@charset "UTF-8";
html body #charm,
html body #access {
  scroll-margin-top: 170px;
}
html body #sake,
html body #seat,
html body #course,
html body #passion,
html body #menu {
  scroll-margin-top: 100px;
}
html body #wrapper {
  /*----------------------------------------------------
      HEADER STYLE
  ----------------------------------------------------*/
}
html body #wrapper > header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5rem;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
html body #wrapper > header.is_scroll {
  background-color: rgba(0, 0, 0, 0.6);
}
html body #wrapper > header .header_logo {
  width: 15%;
}
html body #wrapper > header .nav_area {
  width: 51%;
}
html body #wrapper > header .nav_area ul {
  display: flex;
  justify-content: center;
}
html body #wrapper > header .nav_area ul li {
  padding: 0 clamp(0.95rem, 1.05vw, 1.55rem);
  border-right: 1px solid #fff;
}
html body #wrapper > header .nav_area ul li.access {
  border-right: none;
}
html body #wrapper > header .nav_area ul li a {
  color: #fff;
  text-decoration: none;
  font-size: clamp(0.88rem, 1.12vw, 1.08rem);
}
html body #wrapper > header .header_btn_area {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0.75rem;
  width: 32%;
}
html body #wrapper > header .header_btn_area .header_btn {
  text-align: right;
}
html body #wrapper > header .header_btn_area {
  /* SNSアイコン(IG・LINE)は同じサイズで揃える */
}
html body #wrapper > header .header_btn_area .header_btn:not(.pc) img {
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
}
html body #wrapper > header .header_btn_area {
  /* 予約ボタン(LINEで予約・電話予約)はカンプ準拠の固定幅
     (カンプ 180px / 1740px = 10.34vw、高さは画像比率で約62px) */
}
html body #wrapper > header .header_btn_area .header_btn.pc {
  flex: none;
  width: 10.34vw;
}
html body #wrapper > header .header_btn_area .header_btn.pc img {
  width: 100%;
  height: auto;
}
html body #wrapper {
  /*----------------------------------------------------
      MAIN STYLE
  ----------------------------------------------------*/
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------------------
      SLIDER STYLE
  ----------------------------------------------------*/
}
html body #wrapper > main#contentsAll .mv {
  position: relative;
  overflow: hidden;
  background-color: #fffdf8;
}
html body #wrapper > main#contentsAll .mv .mv_bg_pc {
  position: relative;
  left: 50%;
  display: block;
  width: max(100%, 1440px);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .mv .mv_ttl {
  position: absolute;
  top: 17%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(2rem, 3vw, 3.5rem);
  transform: translateX(-50%);
  color: #fff;
}
html body #wrapper > main#contentsAll .mv .mv_ttl p {
  width: fit-content;
  height: fit-content;
  margin: 0;
  padding-left: clamp(0.8rem, 1vw, 1.2rem);
  border-right: 2px solid #fff;
  font-size: clamp(4rem, 4.72vw, 5.125rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  white-space: nowrap;
  writing-mode: vertical-rl;
}
html body #wrapper > main#contentsAll .mv .mv_ttl p span {
  font-size: 0.7em;
}
html body #wrapper > main#contentsAll .mv .mv_btn_area {
  position: absolute;
  top: 64.5%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.8vw;
  width: max-content;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn {
  display: block;
  width: 15.7vw;
  /* picture はレイアウトに影響させず img を直接の子として扱う */
}
html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn picture {
  display: contents;
}
html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn.sake {
  width: auto;
  /* 瓶が枠上にはみ出す画像。ボタン枠の下辺をLINE/電話に揃える
     ため、親を align-items:flex-end にした上で高さを少し大きめに */
}
html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn.sake img {
  width: auto;
  height: 6.5vw;
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------------------
  STYLE
  ----------------------------------------------------*/
}
html body #wrapper > main#contentsAll h1 .title_img {
  text-align: center;
  padding-top: 3rem;
}
html body #wrapper > main#contentsAll h1 .title_img img {
  width: 7rem;
}
html body #wrapper > main#contentsAll h1 .title {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
}
html body #wrapper > main#contentsAll h1 .pop {
  text-align: center;
  padding-top: 1rem;
}
html body #wrapper > main#contentsAll h1 .pop img {
  width: 12rem;
}
html body #wrapper > main#contentsAll hr {
  border: 2px solid #000;
  margin: 1.5rem 48% 3rem;
}
html body #wrapper > main#contentsAll .inner {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 0.5rem 0;
  margin: 1rem 15% 0;
}
@media only screen and (max-width: 767px) {
  html body #wrapper > main#contentsAll h1 .title_img img {
    width: 4rem;
  }
  html body #wrapper > main#contentsAll h1 .title {
    font-size: 1.5rem;
  }
  html body #wrapper > main#contentsAll h1 .pop img {
    width: 8rem;
  }
  html body #wrapper > main#contentsAll hr {
    margin: 1.5rem 40% 3rem;
  }
  html body #wrapper > main#contentsAll .inner {
    padding: 0;
    margin: 0 0.5rem 0;
  }
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------------------
  CONTENTS STYLE
  ----------------------------------------------------*/
}
html body #wrapper > main#contentsAll .s3,
html body #wrapper > main#contentsAll .s4,
html body #wrapper > main#contentsAll .s5,
html body #wrapper > main#contentsAll .s6,
html body #wrapper > main#contentsAll .s7 {
  position: relative;
  width: 100%;
  overflow: hidden;
}
html body #wrapper > main#contentsAll .s3_content,
html body #wrapper > main#contentsAll .s4_content,
html body #wrapper > main#contentsAll .s5_content {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1740px;
  margin: 0 auto;
}
html body #wrapper > main#contentsAll {
  /* ========================================
  SECTION 01
  ======================================== */
}
html body #wrapper > main#contentsAll .s1 {
  position: relative;
  display: flow-root;
  background-color: #fffdf8;
}
html body #wrapper > main#contentsAll .s1 .s1_content {
  position: relative;
  z-index: 2;
  min-height: clamp(1300px, 80vw, 1700px);
  padding-top: 5%;
  background-image: url("../img/s1_bg_pc.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
html body #wrapper > main#contentsAll .s1 .s1_intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: start;
  width: 68%;
  margin: -6rem auto 0;
  transform: translateX(clamp(30px, 3vw, 60px));
}
html body #wrapper > main#contentsAll .s1 .s1_img {
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}
html body #wrapper > main#contentsAll .s1 .s1_img img {
  display: block;
  width: 90%;
  max-width: none;
  height: auto;
  transform: translate(clamp(-150px, -8vw, -60px), clamp(20px, 2vw, 40px)) scale(1.3);
  transform-origin: left center;
}
html body #wrapper > main#contentsAll .s1 .s1_ttl {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 2rem;
  margin: -2rem 0 0;
  color: #061b36;
  font-size: clamp(2.5rem, 3.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
html body #wrapper > main#contentsAll .s1 .s1_ttl span {
  display: block;
  width: fit-content;
  padding-left: 1rem;
  border-right: 2px solid #061b36;
  white-space: nowrap;
  writing-mode: vertical-rl;
}
html body #wrapper > main#contentsAll .s1 .s1_check_area {
  position: relative;
  z-index: 2;
  width: min(700px, 42%);
  margin-top: 10rem;
  margin-left: max(10%, (100% - 1380px) / 2);
}
html body #wrapper > main#contentsAll .s1 .check_list {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-bottom: 1.5rem;
}
html body #wrapper > main#contentsAll .s1 .check_list .checkmark {
  flex-shrink: 0;
  width: clamp(38px, 3.2vw, 56px);
  height: auto;
}
html body #wrapper > main#contentsAll .s1 .check_list p {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.5;
  white-space: nowrap;
}
html body #wrapper > main#contentsAll .s1 .s1_dish {
  position: absolute;
  top: 40%;
  right: 13%;
  z-index: 2;
  width: 40%;
  pointer-events: none;
}
html body #wrapper > main#contentsAll .s1 .s1_dish img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s1 .s1_btn_area {
  position: absolute;
  bottom: 9%;
  z-index: 3;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 5%;
  width: 35vw;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .s1 .s1_btn_area .rsv_btn {
  display: block;
  width: 47.5%;
}
html body #wrapper > main#contentsAll .s1 .s1_btn_area .rsv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s1 .s1_slider {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: clamp(360px, 25.46vw, 443px);
  margin-bottom: 5rem;
  overflow: hidden;
}
html body #wrapper > main#contentsAll .s1 .s1_slider:not(.slick-initialized) {
  display: flex;
}
html body #wrapper > main#contentsAll .s1 .s1_slider:not(.slick-initialized) > img {
  flex: 0 0 20%;
  width: 20%;
}
html body #wrapper > main#contentsAll .s1 .s1_slider .slick-list {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
html body #wrapper > main#contentsAll .s1 .s1_slider .slick-track {
  display: flex;
  height: 100%;
}
html body #wrapper > main#contentsAll .s1 .s1_slider .slick-slide {
  display: block;
  height: 100%;
  margin: 0 8.5px;
  object-fit: cover;
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------
  section02
  ----------------------------------------*/
}
html body #wrapper > main#contentsAll .s2 {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1740/1725;
  background: url("../img/s2_bg.webp") center top/cover no-repeat;
  color: #fff;
}
html body #wrapper > main#contentsAll .s2 .s2_dots {
  display: none;
}
html body #wrapper > main#contentsAll .s2 .s2_content {
  position: relative;
  width: 100%;
  height: 100%;
}
html body #wrapper > main#contentsAll .s2 .s2_heading {
  position: absolute;
  top: 6.5%;
  left: 10.3%;
  z-index: 2;
  width: 43%;
}
html body #wrapper > main#contentsAll .s2 .s2_ttl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  color: #fff796;
  font-size: clamp(3.5rem, 4.7vw, 5.125rem);
  font-weight: 700;
  line-height: 1.35;
}
html body #wrapper > main#contentsAll .s2 .s2_ttl span {
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid #fff796;
  white-space: nowrap;
}
html body #wrapper > main#contentsAll .s2 .s2_heading h3 {
  margin: clamp(2rem, 3vw, 3.5rem) 0 1.5rem;
  font-size: clamp(1.7rem, 2.1vw, 2.3rem);
  font-weight: 700;
  line-height: 1.5;
}
html body #wrapper > main#contentsAll .s2 .s2_heading > p {
  margin: 0;
  font-size: clamp(0.85rem, 1.05vw, 1.15rem);
  font-weight: 700;
  line-height: 1.8;
}
html body #wrapper > main#contentsAll .s2 .s2_card_area {
  position: absolute;
  top: 45%;
  left: 10.3%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8%;
  width: 79.4%;
}
html body #wrapper > main#contentsAll .s2 .s2_card {
  min-width: 0;
  padding: clamp(1rem, 1.4vw, 1.5rem);
  border: 2px solid #fff796;
  background-color: rgba(6, 27, 54, 0.78);
}
html body #wrapper > main#contentsAll .s2 .s2_card h3 {
  margin: 0 0 1.2rem;
  color: #fff;
  text-align: center;
  font-size: clamp(1.2rem, 1.7vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
}
html body #wrapper > main#contentsAll .s2 .s2_card > p {
  margin: 1.2rem 0 0;
  color: #fff;
  font-size: clamp(0.7rem, 0.85vw, 0.9rem);
  font-weight: 700;
  line-height: 1.7;
}
html body #wrapper > main#contentsAll .s2 .s2_card_img {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  background-color: #fff;
}
html body #wrapper > main#contentsAll .s2 .s2_card_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html body #wrapper > main#contentsAll .s2 .s2_btn_area {
  position: absolute;
  bottom: 6%;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 5%;
  width: 35vw;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .s2 .s2_btn_area .rsv_btn {
  display: block;
  width: 47.5%;
}
html body #wrapper > main#contentsAll .s2 .s2_btn_area .rsv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------
  section03
  ----------------------------------------*/
}
html body #wrapper > main#contentsAll .s3 {
  background-image: url("../img/s3_bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  aspect-ratio: 3470/5830;
}
html body #wrapper > main#contentsAll .s3 .s3_heading {
  position: absolute;
  top: 3.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
html body #wrapper > main#contentsAll .s3 .s3_heading h2 {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 0.3em;
  margin: 0;
  color: #06192e;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
}
html body #wrapper > main#contentsAll .s3 .s3_heading h2 span {
  writing-mode: vertical-rl;
  white-space: nowrap;
  border-right: 2px solid #000;
}
html body #wrapper > main#contentsAll .s3 .s3_heading h2 em {
  color: #e9251b;
  font-style: normal;
  text-combine-upright: all;
}
html body #wrapper > main#contentsAll .s3 .s3_reason {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 91%;
  height: 22%;
  z-index: 2;
}
html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_txt {
  position: absolute;
  z-index: 2;
  color: #07182b;
}
html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_txt .s3_number {
  display: inline-block;
  margin: 0 0 0.8em;
  padding: 0.2em 0.6em;
  border: 2px solid #e4251b;
  color: #e4251b;
  background-color: rgba(255, 255, 255, 0.75);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_txt h3 {
  margin: 0 0 0.5rem;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.02em;
}
html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_txt > p:not(.s3_number) {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.8;
}
html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_img {
  position: absolute;
}
html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_img img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s3 .s3_reason01 {
  top: 22%;
}
html body #wrapper > main#contentsAll .s3 .s3_reason01 .s3_reason_txt {
  top: 8%;
  left: 3%;
  width: 44%;
}
html body #wrapper > main#contentsAll .s3 .s3_reason01 .s3_reason_img {
  top: 5%;
  right: -6%;
  width: 58%;
}
html body #wrapper > main#contentsAll .s3 .s3_reason02 {
  top: 48%;
}
html body #wrapper > main#contentsAll .s3 .s3_reason02 .s3_reason_img {
  top: 18%;
  left: -4%;
  width: 56%;
}
html body #wrapper > main#contentsAll .s3 .s3_reason02 .s3_reason_txt {
  top: -8%;
  right: 8%;
  width: 44%;
}
html body #wrapper > main#contentsAll .s3 .s3_reason03 {
  top: 69.5%;
}
html body #wrapper > main#contentsAll .s3 .s3_reason03 .s3_reason_txt {
  top: 3%;
  left: 3%;
  width: 42%;
}
html body #wrapper > main#contentsAll .s3 .s3_reason03 .s3_reason_img {
  top: 1%;
  right: -6%;
  width: 56%;
}
html body #wrapper > main#contentsAll .s3 .s3_btn_area {
  position: absolute;
  bottom: 2.8%;
  z-index: 4;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 5%;
  width: 35vw;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .s3 .s3_btn_area .rsv_btn {
  display: block;
  width: 47.5%;
}
html body #wrapper > main#contentsAll .s3 .s3_btn_area .rsv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------
  section04
  ----------------------------------------*/
}
html body #wrapper > main#contentsAll .s4 {
  background-image: url("../img/s4_bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  aspect-ratio: 3480/2918;
}
html body #wrapper > main#contentsAll .s4 .s4_dots {
  display: none;
}
html body #wrapper > main#contentsAll .s4 .s4_heading {
  position: absolute;
  top: 14%;
  left: 10.5%;
  z-index: 2;
}
html body #wrapper > main#contentsAll .s4 .s4_heading h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4.1vw, 7rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
html body #wrapper > main#contentsAll .s4 .s4_heading h2 span {
  position: relative;
  display: block;
  padding-bottom: 0.15em;
}
html body #wrapper > main#contentsAll .s4 .s4_heading h2 span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #fff;
}
html body #wrapper > main#contentsAll .s4 .s4_card_area {
  position: absolute;
  top: 42%;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 1.8%;
  transform: translateX(-50%);
  width: 78.5%;
  z-index: 3;
}
html body #wrapper > main#contentsAll .s4 .s4_card {
  width: 32.15%;
  background-color: #fff;
  border: 1px solid rgba(7, 28, 51, 0.3);
  box-sizing: border-box;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
html body #wrapper > main#contentsAll .s4 .s4_card .s4_card_img {
  width: 100%;
  overflow: hidden;
}
html body #wrapper > main#contentsAll .s4 .s4_card .s4_card_img img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s4 .s4_card .s4_card_txt {
  padding: 5% 4.5% 5.5%;
  color: #071c33;
}
html body #wrapper > main#contentsAll .s4 .s4_card .s4_card_txt h3 {
  margin: 0 0 0.35em;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.3;
}
html body #wrapper > main#contentsAll .s4 .s4_card .s4_card_txt p {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.65;
}
html body #wrapper > main#contentsAll .s4 .s4_btn_area {
  position: absolute;
  bottom: 7.2%;
  z-index: 3;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 5%;
  width: 35vw;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .s4 .s4_btn_area .rsv_btn {
  display: block;
  width: 47.5%;
}
html body #wrapper > main#contentsAll .s4 .s4_btn_area .rsv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------
  section05
  ----------------------------------------*/
}
html body #wrapper > main#contentsAll .s5 {
  background-image: url("../img/s5_bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  aspect-ratio: 3480/7100;
}
html body #wrapper > main#contentsAll .s5 .s5_heading {
  position: absolute;
  top: 4.5%;
  left: 10%;
  z-index: 2;
}
html body #wrapper > main#contentsAll .s5 .s5_heading h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 0.2em;
  color: #071c33;
  font-size: clamp(1.8rem, 3.5vw, 6rem);
  font-weight: 900;
  line-height: 1.3;
}
html body #wrapper > main#contentsAll .s5 .s5_heading h2::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #071c33;
}
html body #wrapper > main#contentsAll .s5 .s5_seat_area {
  position: absolute;
  inset: 0;
}
html body #wrapper > main#contentsAll .s5 .s5_seat {
  position: absolute;
  width: 37.5%;
  color: #071c33;
}
html body #wrapper > main#contentsAll .s5 .s5_seat .s5_seat_img {
  width: 100%;
  overflow: hidden;
}
html body #wrapper > main#contentsAll .s5 .s5_seat .s5_seat_img img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s5 .s5_seat h3 {
  margin-top: 1.2rem;
  padding: 0.25em 0;
  border-top: 1px solid rgba(7, 28, 51, 0.4);
  border-bottom: 1px solid rgba(7, 28, 51, 0.4);
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}
html body #wrapper > main#contentsAll .s5 .s5_seat p {
  margin: 0;
  padding-top: 3%;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.7;
}
html body #wrapper > main#contentsAll .s5 .s5_seat01 {
  top: 8.64%;
  left: 10%;
}
html body #wrapper > main#contentsAll .s5 .s5_seat02 {
  top: 16.4%;
  right: 10%;
}
html body #wrapper > main#contentsAll .s5 .s5_seat03 {
  top: 29.3%;
  left: 10%;
}
html body #wrapper > main#contentsAll .s5 .s5_seat04 {
  top: 37.2%;
  right: 10%;
}
html body #wrapper > main#contentsAll .s5 .s5_seat05 {
  top: 50%;
  left: 10%;
}
html body #wrapper > main#contentsAll .s5 .s5_btn_area {
  position: absolute;
  top: 70%;
  z-index: 4;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 5%;
  width: 35vw;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .s5 .s5_btn_area .rsv_btn {
  display: block;
  width: 47.5%;
}
html body #wrapper > main#contentsAll .s5 .s5_btn_area .rsv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s5 .s5_slider {
  position: absolute;
  top: 75%;
  left: 0;
  width: 100%;
  height: 17%;
  overflow: hidden;
}
html body #wrapper > main#contentsAll .s5 .s5_slider .swiper-wrapper {
  align-items: flex-start;
  transition-timing-function: linear;
}
html body #wrapper > main#contentsAll .s5 .s5_slider .swiper-slide {
  width: auto;
  height: 75%;
}
html body #wrapper > main#contentsAll .s5 .s5_slider .swiper-slide img {
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
html body #wrapper > main#contentsAll .s5 .s5_slider .swiper-slide:nth-child(even) {
  transform: translateY(28%);
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------
  section06
  ----------------------------------------*/
}
html body #wrapper > main#contentsAll .s6 {
  padding: 68vw 0 3vw;
  color: #061b36;
  background-image: url("../img/s6_bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}
html body #wrapper > main#contentsAll .s6 .s6_ttl {
  position: absolute;
  top: 5.2vw;
  left: 10.2%;
  margin: 0;
  padding-bottom: 0.8%;
  border-bottom: 3px solid #061b36;
  font-size: min(4.6vw, 8rem);
  font-weight: 900;
  line-height: 1.2;
}
html body #wrapper > main#contentsAll .s6 .s6_main_img {
  position: absolute;
  top: 16.7vw;
  left: 10.2%;
  width: 48%;
  height: 32.8vw;
  object-fit: cover;
}
html body #wrapper > main#contentsAll .s6 .s6_course {
  position: relative;
  background-image: url("../img/s6_course_bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_course_inner {
  padding: 7.5% 7.5% 8%;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_tags {
  display: flex;
  flex-wrap: wrap;
  gap: min(0.65vw, 0.7rem) min(1vw, 1.2rem);
  margin-bottom: 4.5%;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_tags span {
  padding: 0.08em 0.6em 0.12em;
  border: 2px solid #f33;
  border-radius: 100px;
  color: #f22;
  font-size: min(1.22vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
html body #wrapper > main#contentsAll .s6 .s6_course h3 {
  margin: 0 0 4%;
  color: #000;
  font-size: min(3.5vw, 5.8rem);
  font-weight: 900;
  line-height: 1.15;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_tax {
  margin: 0 0 3%;
  color: #aaa;
  font-size: min(1.65vw, 2.7rem);
  font-weight: 700;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_price {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding-bottom: 5%;
  border-bottom: 1px solid #222;
  color: #000;
  white-space: nowrap;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_price strong {
  font-size: min(6.4vw, 10.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_price span {
  font-size: min(3.3vw, 5.4rem);
  font-weight: 700;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_description {
  margin: 5% 0 0;
  font-size: min(1.55vw, 2.5rem);
  font-weight: 900;
  line-height: 1.45;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_total {
  margin: 4% 0 0;
  font-size: min(2.8vw, 2.8rem);
  font-weight: 900;
  color: #c0272d;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_total strong {
  font-size: 1.2em;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_menu_list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.4em;
  margin: 4% 0 0;
  padding: 0;
  list-style: none;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_menu_list li {
  position: relative;
  padding-left: 1em;
  font-size: min(2.8vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_menu_list li::before {
  content: "・";
  position: absolute;
  left: 0;
}
html body #wrapper > main#contentsAll .s6 .s6_course .s6_note_sm {
  margin: 5% 0 0;
  font-size: min(2.1vw, 1.8rem);
  font-weight: 700;
  line-height: 1.9;
  color: #666;
}
html body #wrapper > main#contentsAll .s6 .s6_course_main {
  position: absolute;
  top: 29.6vw;
  left: 57.5%;
  width: 32.5%;
  z-index: 2;
}
html body #wrapper > main#contentsAll .s6 .s6_course_main .s6_course_inner {
  padding: 7% 7% 8%;
}
html body #wrapper > main#contentsAll .s6 .s6_course_main .s6_tags {
  gap: min(0.4vw, 0.5rem) min(0.6vw, 0.7rem);
  margin-bottom: 4%;
}
html body #wrapper > main#contentsAll .s6 .s6_course_main .s6_tags span {
  font-size: min(0.93vw, 1.5rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_main h3 {
  font-size: min(2.55vw, 4.2rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_main .s6_tax {
  font-size: min(1.2vw, 2rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_main .s6_price strong {
  font-size: min(4.65vw, 7.6rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_main .s6_price span {
  font-size: min(2.3vw, 3.8rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_main .s6_description {
  font-size: 0.9rem;
}
html body #wrapper > main#contentsAll .s6 .s6_course_main .s6_total {
  font-size: min(2.8vw, 2.8rem);
}
html body #wrapper > main#contentsAll .s6 .s6_other_ttl {
  width: 79.6%;
  margin: 0 auto;
  padding: 0.65% 0;
  color: #fff;
  background-color: #b78600;
  font-size: min(2.3vw, 3.8rem);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
html body #wrapper > main#contentsAll .s6 .s6_other_ttl::before, html body #wrapper > main#contentsAll .s6 .s6_other_ttl::after {
  content: "―";
  margin: 0 1em;
}
html body #wrapper > main#contentsAll .s6 .s6_course_list {
  margin: 2.5vw auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4%;
  width: 79.6%;
}
html body #wrapper > main#contentsAll .s6 .s6_course_list.s6_course_list--single {
  grid-template-columns: 1fr;
}
html body #wrapper > main#contentsAll .s6 .s6_course_list .s6_course h3 {
  font-size: min(2.65vw, 4.3rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_list .s6_course .s6_tags span {
  font-size: min(0.88vw, 1.45rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_list .s6_course .s6_tax {
  font-size: min(1.15vw, 1.9rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_list .s6_course .s6_price strong {
  font-size: min(4.7vw, 7.7rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_list .s6_course .s6_price span {
  font-size: min(2.2vw, 3.6rem);
}
html body #wrapper > main#contentsAll .s6 .s6_course_list .s6_course .s6_description {
  font-size: min(1.08vw, 1.8rem);
}
html body #wrapper > main#contentsAll .s6 .s6_notice {
  width: 79.6%;
  margin: 4vw auto 0;
  min-height: 0;
  padding: 2% 7%;
  border: 8px solid #f36868;
  background-color: rgba(255, 255, 255, 0.7);
  color: #000;
  font-size: min(1.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.45;
}
html body #wrapper > main#contentsAll .s6 .s6_notice p {
  margin: 0;
}
html body #wrapper > main#contentsAll .s6 .s6_notice p + p {
  margin-top: 0.4em;
}
html body #wrapper > main#contentsAll .s6 .s6_notice strong {
  color: red;
}
html body #wrapper > main#contentsAll .s6 .s6_btn_area {
  margin: 4.5vw auto 0;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 5%;
  width: 35vw;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .s6 .s6_btn_area .rsv_btn {
  display: block;
  width: 47.5%;
}
html body #wrapper > main#contentsAll .s6 .s6_btn_area .rsv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s6 .s6_btn_area {
  left: auto;
  transform: none;
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------
  section07
  ----------------------------------------*/
}
html body #wrapper > main#contentsAll .s7 {
  aspect-ratio: 3484/3204;
  color: #061b36;
  background-image: url("../img/s7_bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}
html body #wrapper > main#contentsAll .s7 .s7_ttl {
  position: absolute;
  top: 6.5%;
  left: 10.5%;
  margin: 0;
  padding-bottom: 0.7%;
  border-bottom: 3px solid #fff;
  color: #fff;
  font-size: min(4.4vw, 7.6rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
html body #wrapper > main#contentsAll .s7 .s7_img {
  position: absolute;
  top: 22.7%;
  left: 10.5%;
  width: 61.8%;
  padding: 0.65%;
  border: 1px solid rgba(255, 255, 255, 0.95);
  z-index: 2;
}
html body #wrapper > main#contentsAll .s7 .s7_img img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s7 .s7_vertical_area {
  position: absolute;
  inset: 0;
  z-index: 3;
}
html body #wrapper > main#contentsAll .s7 .s7_vertical {
  position: absolute;
  margin: 0;
  padding: 1.5% 1.1%;
  border: 1px solid #061b36;
  color: #061b36;
  background-color: rgba(255, 255, 255, 0.96);
  font-size: min(3.2vw, 5.5rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.03em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}
html body #wrapper > main#contentsAll .s7 .s7_vertical01 {
  top: 6.3%;
  right: 10.3%;
}
html body #wrapper > main#contentsAll .s7 .s7_vertical02 {
  top: 9.4%;
  right: 18.1%;
}
html body #wrapper > main#contentsAll .s7 .s7_vertical02 span {
  color: #e81e18;
}
html body #wrapper > main#contentsAll .s7 .s7_message {
  position: absolute;
  top: 65.8%;
  left: 10.5%;
  width: 62%;
  z-index: 2;
}
html body #wrapper > main#contentsAll .s7 .s7_message p {
  margin: 0;
  font-size: min(1.16vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
html body #wrapper > main#contentsAll .s7 .s7_signature {
  position: absolute;
  top: 79%;
  left: 56%;
  display: flex;
  align-items: center;
  gap: 1.2%;
  width: 19%;
  z-index: 2;
}
html body #wrapper > main#contentsAll .s7 .s7_signature span {
  flex-shrink: 0;
  font-size: min(1.1vw, 1.9rem);
  font-weight: 700;
}
html body #wrapper > main#contentsAll .s7 .s7_signature img {
  display: block;
  width: 78%;
  height: auto;
}
html body #wrapper > main#contentsAll .s7 {
  /* 予約ボタン */
}
html body #wrapper > main#contentsAll .s7 .s7_btn_area {
  position: absolute;
  top: 85.6%;
  z-index: 2;
  left: 50%;
  display: flex;
  justify-content: center;
  gap: 5%;
  width: 35vw;
  transform: translateX(-50%);
}
html body #wrapper > main#contentsAll .s7 .s7_btn_area .rsv_btn {
  display: block;
  width: 47.5%;
}
html body #wrapper > main#contentsAll .s7 .s7_btn_area .rsv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------
   section08
  ----------------------------------------*/
}
html body #wrapper > main#contentsAll .s8 {
  width: 100%;
  overflow: hidden;
  color: #061b36;
  background-image: url("../img/s8_bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}
html body #wrapper > main#contentsAll .s8 .s8_step_progress {
  display: none;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend,
html body #wrapper > main#contentsAll .s8 .s8_reserve,
html body #wrapper > main#contentsAll .s8 .s8_line_benefit,
html body #wrapper > main#contentsAll .s8 .s8_faq {
  position: relative;
  width: 80%;
  margin: 0 auto;
}
html body #wrapper > main#contentsAll .s8 .s8_ttl {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-bottom: 0.3em;
  font-size: min(3.6vw, 6.2rem);
  font-weight: 900;
  line-height: 1.2;
}
html body #wrapper > main#contentsAll .s8 .s8_ttl::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: #061b36;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend {
  min-height: 19.5vw;
  padding-top: 5%;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_area {
  display: grid;
  grid-template-columns: 52% 50%;
  align-items: center;
  margin-top: 5%;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_visual {
  position: relative;
  z-index: 2;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_visual img {
  display: block;
  width: 100%;
  aspect-ratio: 1422/944;
  object-fit: cover;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_detail {
  align-self: center;
  z-index: 999;
  margin-top: 30%;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_detail h3 {
  margin: 0 0 20%;
  padding-left: 20%;
  font-size: 3.5rem;
  font-weight: 900;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3%;
  margin-left: -6%;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_thumbs button {
  padding: 0;
  overflow: hidden;
  border: 2px solid #d4bc84;
  background: none;
  cursor: pointer;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_thumbs button.active {
  border-color: #061b36;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_thumbs button img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2%;
  width: 35%;
  min-height: min(4vw, 6.8rem);
  margin: 6% auto 0;
  border-radius: 4px;
  color: #fff;
  background-color: #dd1712;
  font-size: min(1.1vw, 1.9rem);
  font-weight: 700;
}
html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_btn img {
  width: 5%;
}
html body #wrapper > main#contentsAll .s8 .s8_reserve {
  padding-top: 11%;
}
html body #wrapper > main#contentsAll .s8 .s8_reserve .s8_reserve_heading {
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: center;
}
html body #wrapper > main#contentsAll .s8 .s8_reserve .s8_reserve_heading h2 {
  margin: 0;
  font-size: min(4.7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.65;
}
html body #wrapper > main#contentsAll .s8 .s8_reserve .s8_reserve_heading h2 span {
  border-bottom: 2px solid #000;
}
html body #wrapper > main#contentsAll .s8 .s8_reserve .s8_reserve_heading h2 .green {
  color: #19a825;
}
html body #wrapper > main#contentsAll .s8 .s8_reserve .s8_reserve_heading h2 .red {
  color: #e51d18;
}
html body #wrapper > main#contentsAll .s8 .s8_reserve .s8_reserve_heading img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s8 .s8_steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3% minmax(0, 1fr) 3% minmax(0, 1fr);
  align-items: center;
  width: 100%;
  margin: 12% auto 0;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step {
  position: relative;
  width: 100%;
  min-height: min(29vw, 49rem);
  padding: 10% 6% 15%;
  background-color: #fff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.08);
  text-align: center;
  z-index: 2;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_number {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #fff;
  background-color: #50b957;
  z-index: 3;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_number span {
  font-size: min(1.3vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_number strong {
  margin-top: 0.08em;
  font-size: min(3.3vw, 5.7rem);
  line-height: 0.95;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_img {
  display: block;
  width: 74%;
  height: min(13vw, 22rem);
  margin: 10% auto 5%;
  object-fit: contain;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_txt h3 {
  margin: 0 0 5%;
  color: #000;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.35;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_txt p {
  margin: 0;
  color: #000;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.55;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_arrow {
  position: relative;
  width: 125%;
  margin-left: -12.5%;
  z-index: 1;
}
html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_arrow img {
  display: block;
  width: 90%;
  height: auto;
}
html body #wrapper > main#contentsAll .s8 .s8_btn_area {
  display: flex;
  justify-content: center;
  gap: 5%;
  width: 35vw;
  margin: 5% auto 0;
}
html body #wrapper > main#contentsAll .s8 .s8_btn_area .rsv_btn {
  display: block;
  width: 47.5%;
}
html body #wrapper > main#contentsAll .s8 .s8_btn_area .rsv_btn img {
  display: block;
  width: 100%;
  height: auto;
}
html body #wrapper > main#contentsAll .s8 .s8_line_benefit {
  padding-top: 9%;
}
html body #wrapper > main#contentsAll .s8 .s8_line_benefit > h2 {
  position: relative;
  display: inline-block;
  margin: 0 0 6%;
  padding-bottom: 0.3em;
  font-size: min(4.7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.55;
}
html body #wrapper > main#contentsAll .s8 .s8_line_benefit > h2 span {
  border-bottom: 2px solid #000;
}
html body #wrapper > main#contentsAll .s8 .s8_line_benefit > h2 .line_green {
  color: #41aa57;
}
html body #wrapper > main#contentsAll .s8 .s8_line_benefit > h2 .red {
  color: #e3221b;
}
html body #wrapper > main#contentsAll .s8 .s8_benefit_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10% 3%;
}
html body #wrapper > main#contentsAll .s8 .s8_benefit_list article {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  min-height: min(7.5vw, 12.8rem);
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.08);
}
html body #wrapper > main#contentsAll .s8 .s8_benefit_list article h3 {
  margin: 0;
  padding: 8%;
  color: #36a950;
  font-size: min(1.4vw, 2.4rem);
  line-height: 1.5;
}
html body #wrapper > main#contentsAll .s8 .s8_benefit_list article p {
  margin: 0;
  padding: 8%;
  border-left: 1px solid #d8d0b8;
  font-size: min(0.85vw, 1.45rem);
  font-weight: 600;
  line-height: 1.6;
}
html body #wrapper > main#contentsAll .s8 .s8_faq {
  margin-top: 18%;
  padding-bottom: 6%;
}
html body #wrapper > main#contentsAll .s8 .s8_faq > h2 {
  position: relative;
  display: inline-block;
  margin: 0 0 7%;
  padding-bottom: 0.25em;
  font-size: min(4.7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.6;
}
html body #wrapper > main#contentsAll .s8 .s8_faq > h2 span {
  border-bottom: 2px solid #000;
}
html body #wrapper > main#contentsAll .s8 .s8_faq > h2 .red {
  color: #e3221b;
}
html body #wrapper > main#contentsAll .s8 .s8_faq_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4% 3%;
}
html body #wrapper > main#contentsAll .s8 .s8_faq_list article {
  padding: 4%;
  background-color: rgba(255, 252, 242, 0.9);
}
html body #wrapper > main#contentsAll .s8 .s8_faq_list .s8_question {
  display: grid;
  grid-template-columns: 14% 86%;
  align-items: center;
  padding-bottom: 3%;
  border-bottom: 2px solid #65bbc9;
}
html body #wrapper > main#contentsAll .s8 .s8_faq_list .s8_question img {
  width: 100%;
}
html body #wrapper > main#contentsAll .s8 .s8_faq_list .s8_question h3 {
  margin: 0;
  padding-left: 5%;
  font-size: 1.2rem;
  font-weight: 900;
}
html body #wrapper > main#contentsAll .s8 .s8_faq_list .s8_answer {
  display: grid;
  grid-template-columns: 8% 92%;
  align-items: center;
  padding-top: 4%;
}
html body #wrapper > main#contentsAll .s8 .s8_faq_list .s8_answer img {
  width: 100%;
}
html body #wrapper > main#contentsAll .s8 .s8_faq_list .s8_answer p {
  margin: 0;
  padding-left: 5%;
  font-weight: 600;
  line-height: 1.6;
}
html body #wrapper > main#contentsAll .s8 .s8_map {
  width: 100%;
  height: min(33vw, 56rem);
}
html body #wrapper > main#contentsAll .s8 .s8_map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
html body #wrapper > main#contentsAll {
  /*----------------------------------------
  footer
  ----------------------------------------*/
}
html body #wrapper > main#contentsAll .footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: #fff;
  background-image: url("../img/footer_bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
html body #wrapper > main#contentsAll .footer .footer_inner {
  display: grid;
  grid-template-columns: 40% 52%;
  gap: 8%;
  width: 69%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 9% 0 7%;
}
html body #wrapper > main#contentsAll .footer {
  /* 左側 */
}
html body #wrapper > main#contentsAll .footer .footer_left {
  padding-top: 2%;
}
html body #wrapper > main#contentsAll .footer .footer_logo {
  display: block;
  width: 82%;
  height: auto;
  margin-bottom: 12%;
  filter: brightness(0) invert(1);
}
html body #wrapper > main#contentsAll .footer .footer_reserve_txt {
  margin: 0 0 5%;
  font-size: min(1.25vw, 2.1rem);
  font-weight: 700;
  text-align: center;
}
html body #wrapper > main#contentsAll .footer .footer_btn_area {
  display: flex;
  flex-direction: column;
  gap: min(1.5vw, 2.5rem);
}
html body #wrapper > main#contentsAll .footer .footer_btn_area .footer_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: clamp(60px, 4.3vw, 82px);
  border-radius: 8px;
  font-size: clamp(15px, 1.05vw, 21px);
  font-weight: 700;
  box-sizing: border-box;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15);
}
html body #wrapper > main#contentsAll .footer .footer_btn_area .footer_btn.line {
  border: 4px solid #57b753;
  color: #57b753;
  background-color: #fff;
}
html body #wrapper > main#contentsAll .footer .footer_btn_area .footer_btn.tel {
  border: 4px solid #c9f4ff;
  color: #fff;
  background-color: #5cc8e4;
}
html body #wrapper > main#contentsAll .footer .footer_sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6%;
  margin-top: 9%;
}
html body #wrapper > main#contentsAll .footer .footer_sns a {
  display: block;
  width: min(3.5vw, 6rem);
  aspect-ratio: 1;
  transition: opacity 0.3s;
}
html body #wrapper > main#contentsAll .footer .footer_sns a:hover {
  opacity: 0.75;
}
html body #wrapper > main#contentsAll .footer .footer_sns a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html body #wrapper > main#contentsAll .footer .footer_right {
  width: 100%;
}
html body #wrapper > main#contentsAll .footer .footer_info {
  margin: 0;
}
html body #wrapper > main#contentsAll .footer .footer_info > div {
  display: grid;
  grid-template-columns: 24% 76%;
  align-items: center;
  min-height: min(4vw, 6.8rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.38);
}
html body #wrapper > main#contentsAll .footer .footer_info dt,
html body #wrapper > main#contentsAll .footer .footer_info dd {
  margin: 0;
  font-size: min(0.95vw, 1.6rem);
  font-weight: 700;
  line-height: 1.5;
}
html body #wrapper > main#contentsAll .footer .footer_info dt {
  padding-left: 4%;
}
html body #wrapper > main#contentsAll .footer .footer_info dd {
  padding: 3% 0 3% 5%;
}
html body #wrapper > main#contentsAll .footer .footer_info a {
  color: #fff;
  text-decoration: none;
}
html body #wrapper > main#contentsAll .footer .footer_copy {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: min(7vw, 12rem);
  background-color: #000;
  text-align: center;
}
html body #wrapper > main#contentsAll .footer .footer_copy small {
  font-size: min(1.1vw, 1.9rem);
  font-weight: 400;
}
html body #wrapper {
  /*====================================================
      SP STYLE ( max-width: 767px )
  ====================================================*/
}
@media only screen and (max-width: 767px) {
  html body #wrapper {
    /*--------------------------------------------
        HEADER (SP)
    --------------------------------------------*/
  }
  html body #wrapper > header {
    padding: 3.5vw 4vw;
  }
  html body #wrapper > header .header_logo {
    order: 1;
    width: 30%;
  }
  html body #wrapper > header .header_btn_area {
    order: 2;
    display: flex;
    align-items: center;
    gap: 3.5vw;
    width: auto;
    margin-left: auto;
    /* IG・LINE（line.webp）を同サイズのアイコンで並べる。
       予約/電話のpillボタン(.pc)はSPでは非表示（common.cssの.pc） */
  }
  html body #wrapper > header .header_btn_area .header_btn {
    width: auto;
    text-align: left;
  }
  html body #wrapper > header .header_btn_area .header_btn img {
    width: 7vw !important;
    height: auto;
  }
  html body #wrapper > header .header_toggle {
    order: 3;
    position: relative;
    z-index: 10001;
    width: 42px;
    margin-left: 3.5vw;
    /* 線はpxで固定し、3本を同じサブピクセル位相に揃えて太さを均一化 */
    padding: 11px 9px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }
  html body #wrapper > header .header_toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #61b2c5;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  html body #wrapper > header .header_toggle span + span {
    margin-top: 6px;
  }
  html body #wrapper > header .nav_area {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68%;
    height: 100vh;
    background-color: rgba(6, 25, 46, 0.97);
    transform: translateX(100%);
    transition: transform 0.4s ease;
  }
  html body #wrapper > header .nav_area ul {
    flex-direction: column;
    gap: 7vw;
    width: 100%;
  }
  html body #wrapper > header .nav_area ul li {
    padding: 0;
    border-right: none;
    text-align: center;
  }
  html body #wrapper > header .nav_area ul li a {
    font-size: 4.6vw;
  }
  html body #wrapper > header.is_nav_open .nav_area {
    transform: translateX(0);
  }
  html body #wrapper > header.is_nav_open .header_toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  html body #wrapper > header.is_nav_open .header_toggle span:nth-child(2) {
    opacity: 0;
  }
  html body #wrapper > header.is_nav_open .header_toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  html body #wrapper > main#contentsAll {
    /* scroll offsets for the smaller SP header */
  }
  html body #wrapper > main#contentsAll #charm,
  html body #wrapper > main#contentsAll #sake,
  html body #wrapper > main#contentsAll #seat,
  html body #wrapper > main#contentsAll #course,
  html body #wrapper > main#contentsAll #passion,
  html body #wrapper > main#contentsAll #menu,
  html body #wrapper > main#contentsAll #access {
    scroll-margin-top: 18vw;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SHARED RESERVE BUTTONS (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s1_btn_area,
  html body #wrapper > main#contentsAll .s2_btn_area,
  html body #wrapper > main#contentsAll .s3_btn_area,
  html body #wrapper > main#contentsAll .s4_btn_area,
  html body #wrapper > main#contentsAll .s5_btn_area,
  html body #wrapper > main#contentsAll .s6_btn_area,
  html body #wrapper > main#contentsAll .s7_btn_area,
  html body #wrapper > main#contentsAll .s8_btn_area {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    /* LINE(緑)＋電話(青)を横並び2カラム（MVと統一）。
       PC側mixinのwidth/gap(34%等)を上書きするため!important */
    display: flex !important;
    justify-content: center;
    gap: 5vw !important;
    width: 92% !important;
    margin: 9vw auto 0;
  }
  html body #wrapper > main#contentsAll .s1_btn,
  html body #wrapper > main#contentsAll .s2_btn,
  html body #wrapper > main#contentsAll .s3_btn,
  html body #wrapper > main#contentsAll .s4_btn,
  html body #wrapper > main#contentsAll .s5_btn,
  html body #wrapper > main#contentsAll .s6_btn,
  html body #wrapper > main#contentsAll .s7_btn,
  html body #wrapper > main#contentsAll .s8_btn {
    flex: 1 1 0;
    width: auto !important;
    height: auto !important;
    min-height: 13.5vw !important;
    border-radius: 8px;
    font-size: 4.1vw !important;
  }
  html body #wrapper > main#contentsAll .s1_btn a,
  html body #wrapper > main#contentsAll .s2_btn a,
  html body #wrapper > main#contentsAll .s3_btn a,
  html body #wrapper > main#contentsAll .s4_btn a,
  html body #wrapper > main#contentsAll .s5_btn a,
  html body #wrapper > main#contentsAll .s6_btn a,
  html body #wrapper > main#contentsAll .s7_btn a,
  html body #wrapper > main#contentsAll .s8_btn a {
    font-size: 4.1vw;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        MV (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .mv {
    /* SP専用MV背景(縦構図・料理＋波)。画像比率に合わせて全体表示 */
    height: auto;
    aspect-ratio: 430/803;
    background: url("../img/mv_bg_sp.webp") top center/cover no-repeat;
  }
  html body #wrapper > main#contentsAll .mv .mv_bg_pc {
    display: none;
  }
  html body #wrapper > main#contentsAll .mv .mv_ttl {
    top: 20%;
    left: 50%;
    gap: 4vw;
  }
  html body #wrapper > main#contentsAll .mv .mv_ttl p {
    padding-left: 2vw;
    font-size: 14vw;
  }
  html body #wrapper > main#contentsAll .mv .mv_btn_area {
    top: auto;
    bottom: 7%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 行間1vw(日本酒はLINE/電話にほぼ密着) / 列間2vw。
       極端に大きく: エリアをほぼ全幅(96%)まで拡張 */
    gap: 1vw 2vw;
    width: 96%;
  }
  html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn {
    width: 100%;
  }
  html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn img {
    display: block;
    width: 100%;
    height: auto;
  }
  html body #wrapper > main#contentsAll .mv .mv_btn_area {
    /* 日本酒を見る = 下段フル幅（SP専用の横長素材 btn_sake_sp.webp を
       picture で切替。上段2ボタンの全幅に合わせる）
       縦の間隔は grid の row-gap(5vw)のみに任せる（margin-topは付けない） */
  }
  html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn.sake {
    grid-column: 1/-1;
  }
  html body #wrapper > main#contentsAll .mv .mv_btn_area .mv_btn.sake img {
    width: 100%;
    height: auto;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SECTION 01 (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s1 .s1_content {
    min-height: 0;
    padding-top: 10vw;
    /* 飾り（唐草）: 画像右上の一番大きいうずまき(中心 x0.846/y0.209)を
       拡大して見出し背面の中央へ。実寸から算出した値 */
    background-size: 170% auto;
    background-position: 134% 32px;
  }
  html body #wrapper > main#contentsAll .s1 .s1_intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 88%;
    margin: 0 auto;
    transform: none;
  }
  html body #wrapper > main#contentsAll .s1 {
    /* コンプ順: 見出し→店舗写真（HTMLは画像→見出しなのでorderで反転） */
  }
  html body #wrapper > main#contentsAll .s1 .s1_ttl {
    order: 1;
    justify-content: center;
    gap: 5vw;
    margin: 0;
    font-size: 7vw;
  }
  html body #wrapper > main#contentsAll .s1 .s1_ttl span {
    padding-left: 2vw;
  }
  html body #wrapper > main#contentsAll .s1 .s1_img {
    order: 2;
    width: 100%;
    margin-top: -2rem;
  }
  html body #wrapper > main#contentsAll .s1 .s1_img img {
    width: 100%;
    transform: none;
  }
  html body #wrapper > main#contentsAll .s1 .s1_check_area {
    width: 88%;
    margin: 9vw auto 0;
  }
  html body #wrapper > main#contentsAll .s1 .check_list {
    gap: 3.5vw;
    margin-bottom: 4vw;
  }
  html body #wrapper > main#contentsAll .s1 .check_list .checkmark {
    width: 8.5vw;
  }
  html body #wrapper > main#contentsAll .s1 .check_list p {
    font-size: 4vw;
    white-space: normal;
  }
  html body #wrapper > main#contentsAll .s1 .s1_dish {
    position: static;
    width: 88%;
    margin: 9vw auto 0;
  }
  html body #wrapper > main#contentsAll .s1 .s1_slider {
    /* 画像が縦長(736×1128)なので、SPでもPC同様の縦カード比率になる高さに。
       2枚表示(スライド幅≈171px)×ポートレート → 約218px */
    height: 58vw;
    margin: 11vw 0;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SECTION 02 (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s2 {
    left: auto;
    width: 100%;
    aspect-ratio: auto;
    padding: 13vw 0;
    background: #0e2038 url("../img/s2_bg_sp.webp") top center/100% auto no-repeat;
    transform: none;
  }
  html body #wrapper > main#contentsAll .s2 .s2_content {
    position: static;
  }
  html body #wrapper > main#contentsAll .s2 .s2_heading {
    position: static;
    width: 86%;
    margin: 0 auto;
  }
  html body #wrapper > main#contentsAll .s2 .s2_heading h3 {
    margin: 5vw 0 4vw;
    font-size: 6vw;
  }
  html body #wrapper > main#contentsAll .s2 .s2_heading > p {
    font-size: 3.6vw;
  }
  html body #wrapper > main#contentsAll .s2 .s2_ttl {
    gap: 2.5vw;
    font-size: 10vw;
  }
  html body #wrapper > main#contentsAll .s2 .s2_ttl span {
    padding-bottom: 1.5vw;
    border-bottom-width: 3px;
  }
  html body #wrapper > main#contentsAll .s2 {
    /* 日本酒カードは横スライダー（1枚＋次カードちら見え）。
       PCはグリッドのまま。SPだけスクロールスナップ化 */
  }
  html body #wrapper > main#contentsAll .s2 .s2_card_area {
    position: static;
    display: flex;
    grid-template-columns: none;
    gap: 4vw;
    width: 100%;
    /* 背景の写真帯(35-58%)を避け、青海波(60%〜)の上にカードを置く */
    margin: 92vw 0 0;
    padding-inline: 10vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10vw;
    scrollbar-width: none;
  }
  html body #wrapper > main#contentsAll .s2 .s2_card_area::-webkit-scrollbar {
    display: none;
  }
  html body #wrapper > main#contentsAll .s2 .s2_card {
    flex: 0 0 80vw;
    scroll-snap-align: center;
    padding: 5vw;
  }
  html body #wrapper > main#contentsAll .s2 .s2_card h3 {
    margin-bottom: 3vw;
    font-size: 6vw;
  }
  html body #wrapper > main#contentsAll .s2 .s2_card > p {
    font-size: 3.4vw;
  }
  html body #wrapper > main#contentsAll .s2 .s2_dots {
    display: flex;
    justify-content: center;
    gap: 2.8vw;
    margin-top: 5vw;
  }
  html body #wrapper > main#contentsAll .s2 .s2_dots button {
    width: 2.4vw;
    height: 2.4vw;
    min-width: 12px;
    min-height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
  }
  html body #wrapper > main#contentsAll .s2 .s2_dots button.is_active {
    background-color: #fff796;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SECTION 03 (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s3 {
    aspect-ratio: auto;
    background: #f6efe0 url("../img/s3_bg_sp.webp") top center/100% auto no-repeat;
    padding: 13vw 0 14vw;
  }
  html body #wrapper > main#contentsAll .s3 .s3_heading {
    position: static;
    transform: none;
    margin: 0 auto;
    text-align: center;
  }
  html body #wrapper > main#contentsAll .s3 .s3_heading h2 {
    justify-content: center;
    font-size: 11.5vw;
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    width: 88%;
    height: auto;
    margin: 0 auto;
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_txt {
    position: static;
    order: 1;
    width: 100% !important;
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_txt .s3_number {
    font-size: 4.4vw;
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_txt h3 {
    font-size: 8.2vw;
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_txt > p:not(.s3_number) {
    font-size: 4vw;
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason .s3_reason_img {
    position: static;
    order: 2;
    width: 100% !important;
    margin-top: 5vw;
  }
  html body #wrapper > main#contentsAll .s3 {
    /* 各理由の写真中心を、背景の淡い写真中心(28/53/78%)に合わせる */
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason01 {
    margin-top: 18vw;
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason02 {
    margin-top: 28.5vw;
  }
  html body #wrapper > main#contentsAll .s3 .s3_reason03 {
    margin-top: 23.5vw;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SECTION 04 (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s4 {
    aspect-ratio: auto;
    background: #f3ead0 url("../img/s4_bg_sp.webp") top center/100% auto no-repeat;
    padding: 20vw 0 14vw;
  }
  html body #wrapper > main#contentsAll .s4 .s4_heading {
    position: static;
    left: auto;
    width: 86%;
    margin: 0 auto;
  }
  html body #wrapper > main#contentsAll .s4 .s4_heading h2 {
    gap: 2vw;
    font-size: 8vw;
  }
  html body #wrapper > main#contentsAll .s4 {
    /* カードは横スライダー。背景の写真帯(0-33%)を避け、クリーム(38%〜)の上に置く */
  }
  html body #wrapper > main#contentsAll .s4 .s4_card_area {
    position: static;
    display: flex;
    width: 100%;
    margin: 20vw 0 0;
    padding-inline: 10vw;
    gap: 4vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10vw;
    scrollbar-width: none;
    transform: none;
  }
  html body #wrapper > main#contentsAll .s4 .s4_card_area::-webkit-scrollbar {
    display: none;
  }
  html body #wrapper > main#contentsAll .s4 .s4_card {
    flex: 0 0 80vw;
    scroll-snap-align: center;
    width: auto;
  }
  html body #wrapper > main#contentsAll .s4 .s4_card .s4_card_txt {
    padding: 4vw;
  }
  html body #wrapper > main#contentsAll .s4 .s4_card .s4_card_txt h3 {
    font-size: 5.5vw;
  }
  html body #wrapper > main#contentsAll .s4 .s4_card .s4_card_txt p {
    font-size: 2.8vw;
  }
  html body #wrapper > main#contentsAll .s4 .s4_dots {
    display: flex;
    justify-content: center;
    gap: 2.8vw;
    margin-top: 6vw;
  }
  html body #wrapper > main#contentsAll .s4 .s4_dots button {
    width: 2.4vw;
    height: 2.4vw;
    min-width: 12px;
    min-height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(6, 28, 51, 0.25);
    cursor: pointer;
  }
  html body #wrapper > main#contentsAll .s4 .s4_dots button.is_active {
    background-color: #061c33;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SECTION 05 (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s5 {
    aspect-ratio: auto;
    background: #f6f1df url("../img/s5_bg_sp.webp") top center/100% auto no-repeat;
    padding: 13vw 0 14vw;
  }
  html body #wrapper > main#contentsAll .s5 .s5_heading {
    position: static;
    left: auto;
    width: 86%;
    margin: 0 auto;
  }
  html body #wrapper > main#contentsAll .s5 .s5_heading h2 {
    font-size: 8vw;
  }
  html body #wrapper > main#contentsAll .s5 .s5_seat_area {
    position: static;
    inset: auto;
  }
  html body #wrapper > main#contentsAll .s5 .s5_seat {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: 88%;
    margin: 9vw auto 0;
  }
  html body #wrapper > main#contentsAll .s5 .s5_seat h3 {
    margin-top: 4vw;
    font-size: 6vw;
  }
  html body #wrapper > main#contentsAll .s5 .s5_seat p {
    padding-top: 3vw;
    font-size: 3.8vw;
  }
  html body #wrapper > main#contentsAll .s5 .s5_slider {
    position: static;
    top: auto;
    height: 50vw;
    margin: 11vw 0 0;
    /* 各画像を半分ずつ縦にずらす（千鳥） */
  }
  html body #wrapper > main#contentsAll .s5 .s5_slider .swiper-slide {
    height: 62%;
  }
  html body #wrapper > main#contentsAll .s5 .s5_slider .swiper-slide:nth-child(even) {
    transform: translateY(50%);
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SECTION 06 (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s6 {
    aspect-ratio: auto;
    background: #f6efe0 url("../img/s6_bg_sp.webp") top center/100% auto no-repeat;
    padding: 13vw 0 14vw;
  }
  html body #wrapper > main#contentsAll .s6 .s6_ttl {
    position: static;
    left: auto;
    width: 88%;
    margin: 0 auto 8vw;
    padding-bottom: 2vw;
    font-size: 8vw;
  }
  html body #wrapper > main#contentsAll .s6 {
    /* SPは各コース=写真＋価格カード重ね。PC用の主画像と他コース見出しは隠す */
  }
  html body #wrapper > main#contentsAll .s6 .s6_main_img {
    display: none;
  }
  html body #wrapper > main#contentsAll .s6 .s6_other_ttl {
    display: none;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course_main {
    position: static;
    left: auto;
    width: 88%;
    margin: 9vw auto 0;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course_list {
    position: static;
    left: auto;
    display: block;
    grid-template-columns: none;
    width: 88%;
    margin: 0 auto;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course_list .s6_course {
    margin-top: 9vw;
  }
  html body #wrapper > main#contentsAll .s6 {
    /* 各コース: 写真の右下に価格カードを重ねる */
  }
  html body #wrapper > main#contentsAll .s6 .s6_course {
    position: relative;
    background-image: none;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course .s6_course_photo {
    display: block;
    width: 100%;
    height: auto;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course .s6_course_inner {
    position: relative;
    z-index: 2;
    width: 80%;
    margin: -22% 0 0 auto;
    padding: 5.5vw 5.5vw 6.5vw;
    background-color: rgba(255, 252, 245, 0.94);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
  }
  html body #wrapper > main#contentsAll .s6 .s6_course {
    /* PCの .s6_course_list .s6_course (3クラス) に負けるため !important で統一 */
  }
  html body #wrapper > main#contentsAll .s6 .s6_course .s6_tags {
    gap: 1.4vw 2vw;
    margin-bottom: 3.5vw;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course .s6_tags span {
    font-size: 2.7vw !important;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course h3 {
    font-size: 5.6vw !important;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course .s6_tax {
    font-size: 2.8vw !important;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course .s6_price strong {
    font-size: 9.5vw !important;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course .s6_price span {
    font-size: 4.4vw !important;
  }
  html body #wrapper > main#contentsAll .s6 .s6_course .s6_description {
    font-size: 3.3vw !important;
  }
  html body #wrapper > main#contentsAll .s6 {
    /* 2番目(リスト1本目)は写真とカードを左右反転（カードを左下に） */
  }
  html body #wrapper > main#contentsAll .s6 .s6_course_list .s6_course:first-child .s6_course_inner {
    margin-left: 0;
    margin-right: auto;
  }
  html body #wrapper > main#contentsAll .s6 .s6_notice {
    position: static;
    left: auto;
    width: 88%;
    min-height: 0;
    margin: 11vw auto 0;
    padding: 6vw 5vw;
    border-width: 4px;
    font-size: 3.6vw;
    /* 【例】以降は各行(br区切り)を1行に収める */
  }
  html body #wrapper > main#contentsAll .s6 .s6_notice p + p {
    font-size: 2.9vw;
    white-space: nowrap;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SECTION 07 (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s7 {
    aspect-ratio: auto;
    background: #eef0ee url("../img/s7_bg_sp.webp") top center/100% auto no-repeat;
    padding: 13vw 0 14vw;
  }
  html body #wrapper > main#contentsAll .s7 .s7_ttl {
    position: static;
    left: auto;
    width: fit-content;
    margin: 0 0 0 5%;
    padding-bottom: 2vw;
    font-size: 11vw;
    color: #fff;
    border-bottom-color: #06192e;
  }
  html body #wrapper > main#contentsAll .s7 .s7_img {
    position: static;
    left: auto;
    width: 100%;
    aspect-ratio: 1.2;
    margin: 50vw 0 0 0;
    padding: 0;
    border: none;
  }
  html body #wrapper > main#contentsAll .s7 .s7_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  html body #wrapper > main#contentsAll .s7 {
    /* 縦書きフレーズを店主写真の右に重ねる（縦書きのまま・段違い） */
  }
  html body #wrapper > main#contentsAll .s7 .s7_vertical_area {
    position: absolute;
    inset: auto;
    top: 35vw;
    right: 7vw;
    z-index: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 2vw;
  }
  html body #wrapper > main#contentsAll .s7 .s7_vertical {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    margin: 0;
    padding: 3vw 1.8vw;
    font-size: 7vw;
    line-height: 1.35;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: upright;
    background-color: rgba(255, 255, 255, 0.96);
    border: 1px solid #061b36;
  }
  html body #wrapper > main#contentsAll .s7 .s7_vertical02 {
    margin-top: 6vw;
  }
  html body #wrapper > main#contentsAll .s7 .s7_vertical02 span {
    color: #e81e18;
  }
  html body #wrapper > main#contentsAll .s7 .s7_message {
    position: static;
    left: auto;
    width: 86%;
    margin: 8vw auto 0;
  }
  html body #wrapper > main#contentsAll .s7 .s7_message p {
    font-size: 3.8vw;
  }
  html body #wrapper > main#contentsAll .s7 .s7_signature {
    position: static;
    top: auto;
    left: auto;
    justify-content: flex-end;
    gap: 3vw;
    width: 86%;
    margin: 7vw auto 0;
  }
  html body #wrapper > main#contentsAll .s7 .s7_signature span {
    font-size: 3.6vw;
  }
  html body #wrapper > main#contentsAll .s7 .s7_signature img {
    width: 40%;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        SECTION 08 (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .s8 {
    /* 上: 飾り入り和紙(円相・波・店内写真)。円相を「旬魚の煮付け」の背後に来るよう約13vw下げる。
       下地: 無地和紙タイルで全長を受ける */
    background: url("../img/s8_bg_sp.webp") center top/100% auto no-repeat, #f7f2e6 url("../img/s8_tile_sp.webp") top center/100% auto repeat-y;
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend,
  html body #wrapper > main#contentsAll .s8 .s8_reserve,
  html body #wrapper > main#contentsAll .s8 .s8_line_benefit,
  html body #wrapper > main#contentsAll .s8 .s8_faq {
    width: 88%;
  }
  html body #wrapper > main#contentsAll .s8 .s8_ttl {
    font-size: 9vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend {
    min-height: 0;
    padding-top: 13vw;
    /* コンプ順: タイトル(旬魚)→メイン写真→サムネ。detailをcontents化してorderで並べ替え */
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_area {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 5vw;
    margin-top: 7vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_visual {
    order: 2;
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_detail {
    display: contents;
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_detail h3 {
    order: 1;
    margin: 0;
    padding: 5.5rem 0 3rem 3rem;
    font-size: 8vw;
    text-align: center;
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_thumbs {
    order: 3;
    gap: 3vw;
    margin-left: 0;
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_btn {
    width: 96%;
    min-height: 12vw;
    margin-top: 9vw;
    font-size: 4vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_recommend .s8_menu_btn img {
    width: 5vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_reserve {
    padding-top: 17vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_reserve .s8_reserve_heading {
    grid-template-columns: 1fr;
    gap: 7vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_reserve .s8_reserve_heading h2 {
    font-size: 9vw;
    line-height: 1.6;
    text-align: left;
  }
  html body #wrapper > main#contentsAll .s8 {
    /* 3ステップは横スライダー（1枚＋次カードちら見え）。矢印は非表示、進捗バーで表現 */
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps {
    display: flex;
    grid-template-columns: none;
    /* gap:0 → 矢印がカードに密着し、中央のカードがちょうど画面に収まる
       (カード82vw / 左右マージン9vw = 矢印9vw が余白を埋める) */
    gap: 0;
    /* 親(.s8_reserve 88%)から全幅に出す。カードのちら見え・中央寄せを正しくする */
    width: 100vw;
    margin: 10vw 0 0 calc(50% - 50vw);
    padding: 12vw 9vw 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 9vw;
    scrollbar-width: none;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps::-webkit-scrollbar {
    display: none;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step {
    flex: 0 0 82vw;
    scroll-snap-align: center;
    min-height: 0;
    padding: 13vw 8vw 10vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_number {
    width: 22vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_number span {
    font-size: 3.4vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_number strong {
    font-size: 9vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_img {
    height: 30vw;
    margin: 8vw auto 5vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_txt h3 {
    font-size: 5.5vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_txt p {
    font-size: 3.8vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps {
    /* カード間に右向き矢印を挟む（横フローの導線） */
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 9vw;
    align-self: center;
    margin: 0;
  }
  html body #wrapper > main#contentsAll .s8 .s8_steps .s8_step_arrow img {
    display: block;
    width: 100%;
    height: auto;
  }
  html body #wrapper > main#contentsAll .s8 .s8_step_progress {
    display: block;
    width: 66%;
    height: 4px;
    margin: 6vw auto 0;
    border-radius: 2px;
    background-color: rgba(80, 185, 87, 0.22);
    overflow: hidden;
  }
  html body #wrapper > main#contentsAll .s8 .s8_step_progress span {
    display: block;
    height: 100%;
    background-color: #50b957;
    transition: width 0.35s ease;
  }
  html body #wrapper > main#contentsAll .s8 .s8_btn_area {
    margin-top: 9vw;
    gap: 3vw;
    width: 100% !important;
  }
  html body #wrapper > main#contentsAll .s8 .s8_btn_area .s8_btn {
    flex: 1 1 0;
    width: auto;
    min-height: 13.5vw;
    font-size: 4.1vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_line_benefit {
    padding-top: 17vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_line_benefit > h2 {
    margin-bottom: 8vw;
    font-size: 8.5vw;
    line-height: 1.6;
  }
  html body #wrapper > main#contentsAll .s8 {
    /* 特典: 各項目=タイトル(緑・中央・上)＋説明(下)の縦積み */
  }
  html body #wrapper > main#contentsAll .s8 .s8_benefit_list {
    grid-template-columns: 1fr;
    gap: 4vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_benefit_list article {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  html body #wrapper > main#contentsAll .s8 .s8_benefit_list article h3 {
    padding: 3.5vw;
    font-size: 4.2vw;
    text-align: center;
  }
  html body #wrapper > main#contentsAll .s8 .s8_benefit_list article p {
    padding: 3.5vw 5vw 4.5vw;
    border-left: none;
    border-top: 1px solid #d8d0b8;
    font-size: 3.4vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_faq {
    margin-top: 20vw;
    padding-bottom: 13vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_faq > h2 {
    margin-bottom: 9vw;
    font-size: 9vw;
    line-height: 1.6;
  }
  html body #wrapper > main#contentsAll .s8 .s8_faq_list {
    grid-template-columns: 1fr;
    gap: 5vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_faq_list .s8_question h3 {
    font-size: 4.2vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_faq_list .s8_answer p {
    font-size: 3.6vw;
  }
  html body #wrapper > main#contentsAll .s8 .s8_map {
    height: 75vw;
  }
  html body #wrapper > main#contentsAll {
    /*--------------------------------------------
        FOOTER (SP)
    --------------------------------------------*/
  }
  html body #wrapper > main#contentsAll .footer .footer_inner {
    grid-template-columns: 1fr;
    gap: 12vw;
    width: 86%;
    padding: 15vw 0 12vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_left {
    padding-top: 0;
  }
  html body #wrapper > main#contentsAll .footer .footer_logo {
    width: 80%;
    margin: 0 auto 9vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_reserve_txt {
    margin-bottom: 6vw;
    font-size: 4vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_btn_area {
    flex-direction: row;
    gap: 5vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_btn_area .footer_btn {
    flex: 1 1 0;
    width: auto;
    min-height: 14vw;
    font-size: 4vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_sns {
    display: none;
  }
  html body #wrapper > main#contentsAll .footer .footer_info > div {
    grid-template-columns: 26% 74%;
    min-height: 0;
  }
  html body #wrapper > main#contentsAll .footer .footer_info dt,
  html body #wrapper > main#contentsAll .footer .footer_info dd {
    font-size: 3.5vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_info dt {
    padding: 3vw 0 3vw 3vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_info dd {
    padding: 3vw 0 3vw 5vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_copy {
    min-height: 16vw;
  }
  html body #wrapper > main#contentsAll .footer .footer_copy small {
    font-size: 3.2vw;
  }
}

/* ==========================================================================
   メニュー一覧モーダル
   ========================================================================== */
body.is_menu_open {
  overflow: hidden;
}

.menu_modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}
.menu_modal.is_open {
  display: flex;
}
.menu_modal .menu_modal_bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}
.menu_modal .menu_modal_body {
  position: relative;
  width: min(92vw, 720px);
  max-height: 92vh;
}
.menu_modal .menu_swiper {
  width: 100%;
  overflow: hidden;
}
.menu_modal .menu_swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu_modal .menu_swiper .swiper-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 86vh;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.menu_modal .menu_modal_close {
  position: fixed;
  top: 3vw;
  right: 3vw;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  z-index: 2;
}
.menu_modal .menu_modal_close::before, .menu_modal .menu_modal_close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  background: #222;
}
.menu_modal .menu_modal_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.menu_modal .menu_modal_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.menu_modal .menu_swiper_prev,
.menu_modal .menu_swiper_next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  z-index: 2;
}
.menu_modal .menu_swiper_prev::before,
.menu_modal .menu_swiper_next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid #222;
  border-right: 2px solid #222;
}
.menu_modal .menu_swiper_prev.swiper-button-disabled,
.menu_modal .menu_swiper_next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.menu_modal {
  /* メニュー表はA4縦(1654:2339)を高さ86vhで表示 → 半幅 = 86vh*0.707/2 ≒ 30.4vh。
     画面中央からその外側に少しだけ離してメニュー表の両隣に置く */
}
.menu_modal .menu_swiper_prev {
  left: 50%;
  transform: translate(calc(-30.4vh - 54px), -50%);
}
.menu_modal .menu_swiper_prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.menu_modal .menu_swiper_next {
  left: 50%;
  right: auto;
  transform: translate(calc(30.4vh + 8px), -50%);
}
.menu_modal .menu_swiper_next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}
.menu_modal .menu_swiper_pagination {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 2.5vh !important;
  width: auto !important;
  transform: none !important;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.menu_modal .menu_swiper_pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
}
.menu_modal .menu_swiper_pagination .swiper-pagination-bullet-active {
  background: #fff;
}

@media only screen and (max-width: 767px) {
  .menu_modal .menu_modal_body {
    width: 84vw;
  }
  .menu_modal .menu_swiper .swiper-slide img {
    max-height: 82vh;
  }
  .menu_modal .menu_modal_close {
    top: 4vw;
    right: 4vw;
    width: 40px;
    height: 40px;
  }
  .menu_modal .menu_swiper_prev,
  .menu_modal .menu_swiper_next {
    width: 36px;
    height: 36px;
  }
  .menu_modal .menu_swiper_prev {
    left: 1vw;
  }
  .menu_modal .menu_swiper_next {
    right: 1vw;
  }
}