body {
  margin: 0 auto;
  background-color: #000000;
  color: #ffffff;
}
p {
  font-family: serif;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  color: #ffffff;
  transition: .5s;
}
a:hover {
  opacity: 0.5;
}
/* ヘッダー */
.header {
  display: flex;
}
ul {
  padding: 0;
}
ul li {
  list-style: none;
  font-family: "Verdana";
}
ul li:hover {
  opacity: 0.5;
}
ol li a {
  vertical-align: baseline;
}
ol li a:hover {
  opacity: 0.5;
}
li a {
  line-height: 0;
}

/* テイクアウト方法 */
.reserevation-guide h3 {
  margin-top: 10%;
}
.reserevation-guide img {
  border: 2px #ffffff solid;
}

/* 事前予約 */
.reservation-section {
  position: relative;
}
.reservation-section div {
  position: absolute;
  background-color: #000000;
}

/* アクセス情報 */
.access-section {
  text-align: center;
  margin-top: 10%;
}
.googlemap-link {
  background-color: #ffffff;
}
.googlemap-link img {
  transition: .7s;
}
.googlemap-link img:hover {
  opacity: 0.5;
}

/* フッター */
.footer {
  text-align: center;
  margin: 10% 0 7%;
}

@media screen and (min-width: 721px) {/*PC*/
  .sp-map {
    display: none;
  }

  /* テイクアウト方法 */
  .reserevation-guide {
    margin: 5% 30%;
  }
  .reserevation-guide img {
    width: 100%;
    margin-bottom: 10%;
  }

  /* 事前予約ボタン */
  /* ボタンをhover */
  .reservation-section div {
    overflow: hidden;
  }
  .reservation-section div img {
    transition: 1s all;
  }
  .reservation-section div img:hover {
    transform: scale(1.2,1.2);
    transition: 1s all;
  }
  /* ボタンの位置 */
  .tel-reservation {
    width: 35%;
    display: flex;
    justify-content: left;
    top: 35%;
    left: 13%;
  }
  .online-reservation {
    width: 35%;
    display: flex;
    justify-content: left;
    top: 35%;
    right: 13%;
  }
  .guide-reservation {
    width: 35%;
    display: flex;
    justify-content: left;
    top: 60%;
    left: 32.5%;
  }

  /* アクセス情報 */
  .access-section {
    text-align: center;
    margin-top: 10%;
  }
  .access-title {
    margin-bottom: 3%;
  }
  .access-title img{
    width: 15%;
  }
  .adress p {
    font-size: 1.5em;
    line-height: 0.5em;
  }
  .googlemap-link {
    margin: 3% 42.5% 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  /* フッター */
  .footer-logo {
    margin-bottom: 2%;
  }
  .footer-logo img {
    width: 6%;
  }
  .facebook {
    width: 1.2%;
    margin-right: 2%;
  }
  .instagram {
    width: 2.5%;
    margin-right: 2%;
  }
  .mail {
    width: 3%;
  }
  .tel {
    font-size: 1.4em;
  }
}

@media screen and (min-width: 901px) {/* ヘッダーナビPC */
  .drawer,
  #open,
  #close {
    display: none;
  }
  /* ヘッダー */
  .header {
    margin: 0.35% 15%;
    display: flex;
  }
  .header-logo {
    margin-top: 1.5%;
    margin-right: 5%;
  }
  .header-nav {
    width: 100%;
    margin-left: 5%;
  }
  ul {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.7em;
  }
  ul li {
    margin-top: 2%;
  }
  ul li:hover {
    opacity: 0.5;
  }
  li a {
    line-height: 0;
    vertical-align: super;
  }
}

@media screen and (min-width: 0px) and (max-width: 900px) {/*ヘッダーナビハンバーガー*/
  /* ヘッダー */
  .header {
    margin: 0.8% 10%;
    display: flex;
    justify-content: space-between;
  }
  .header-logo {
    width: 56%;
  }

  /* ヘッダーナビ */
  ul li {
    padding: 1%;
  }
  .header-nav {
    width: 4%;
  }
  .btn {
    font-size: 1.4em;
  }
  #open a {
    transition: 1s;
  }
  #close a {
    color: #fff;
    background: #aaa;
    width: 30px;
    line-height: 30px;
    border-radius: 15px;
  }
  #g_menu li {
    list-style: none;
  }
  #g_menu a {
    color: #fff;
  }
  #g_menu {
    height: 100%;
    width: 150px;
    padding: 20px;
    background: rgba(0, 0, 0,.6);
    transition: right 1s;
    position: fixed;
    top: 0;
  }
  #g_menu:not(:target) {
    right: -100%;
  }
  #g_menu:target {
    right: 0;
  }
}

@media screen and (min-width: 0px) and (max-width: 720px) {/*SP*/
  .pc-map {
    display: none;
  }

  /* ヘッダー */
  .header {
    margin: 2% 3%;
  }
  .header-logo {
    width: 56%;
  }

  /* テイクアウト方法 */
  .reserevation-guide {
    margin: 5% 10%;
  }

  /* 事前予約 */
  .tel-reservation {
    width: 70%;
    top: 28%;
    left: 15%;
  }
  .online-reservation {
    width: 70%;
    top: 52%;
    left: 15%;
  }
  .guide-reservation {
    width: 70%;
    top: 76%;
    left: 15%;
  }
  /* ボタンhoverしたとき */
  .reservation-section div img {
    transition: .5s;
  }
  .reservation-section div img:hover {
    opacity: 0.5;
  }

  /* アクセス情報 */
  .access-section {
    text-align: center;
    margin-top: 10%;
  }
  .access-title {
    margin-bottom: 7%;
  }
  .access-title img{
    width: 20%;
  }
  .adress p {
    font-size: 0.9em;
    line-height: 0.5em;
  }
  .googlemap-link {
    margin: 3% 30% 0;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 9px;
  }

  /* フッター */
  .footer-logo {
    margin-bottom: 2%;
  }
  .footer-logo img {
    width: 10%;
  }
  .facebook {
    width: 2.5%;
    margin-right: 2%;
  }
  .instagram {
    width: 5%;
    margin-right: 2%;
  }
  .mail {
    width: 6%;
  }
  .tel {
    font-size: 0.6em;
  }

  /* ヘッダーナビ */
  #g_menu ul li {
    padding: 1%;
  }
  .header-nav {
    width: 4%;
  }
  .btn {
    font-size: 1.4em;
  }
  #open a {
    transition: 1s;
  }
  #close a {
    color: #fff;
    background: #aaa;
    width: 30px;
    line-height: 30px;
    border-radius: 15px;
  }
  #g_menu li {
    list-style: none;
  }
  #g_menu a {
    color: #fff;
  }
  #g_menu {
    height: 100%;
    width: 150px;
    padding: 20px;
    background: rgba(0, 0, 0,.6);
    transition: right 1s;
    position: fixed;
    top: 0;
  }
  #g_menu:not(:target) {
    right: -100%;
  }
  #g_menu:target {
    right: 0;
  }
}