/* ===== ABOUT ページ固有のスタイル ===== */

html {
   background-color: #191310;
}

/* ===== sub-mv → 席のこだわり への切り替わり ===== */

:root {
   --seat-top-start: 160px;
   --seat-bottom-start: 160px;
   --seat-band-top: 31vh;
   --seat-band-bottom: 31vh;
   --seat-wave-h: 120px;
   --seat-runway: 200vh;
   --dishes-runway: 300vh;
   --counter-runway: 300vh;
   --section-hold: 800px;
   --close-end: calc(50vh + var(--seat-wave-h));
   --close-runway: 150vh;
   --pm-runway: 150vh;
   --pmtext-runway: 150vh;
}

.sub-mv {
   position: sticky;
   top: 0;
   z-index: 1;
   height: 100vh;
   overflow: hidden;
   background-color: #b8b4ac;
   transform: translateZ(0);
   backface-visibility: hidden;
}

.sub-mv__inner,
.sub-mv__bg {
   height: 100%;
}

.sub-mv__bg img {
   height: 100%;
   object-fit: cover;
}

.sub-mv.is-done {
   visibility: hidden;
}

/* ===== 席のこだわり ===== */
.commitment {
   position: relative;
   z-index: 2;
   background: transparent;
   margin-top: -100vh;
}

.commitment__inner {
   margin: 0 auto;
}

.about__seat-contents {
   position: sticky;
   top: 0;
   height: 100vh;
   background: rgba(62, 149, 168, var(--seat-p, 0));
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: translateZ(0);
   backface-visibility: hidden;
}

.seat__text-container,
.dishes__text-container,
.about__counter-contents {
   font-family: "Zen Kaku Gothic New", sans-serif;
}

.seat__text-container p,
.dishes__text-container p,
.about__counter-contents p {
   line-height: 40px;
   letter-spacing: 10%;
}

.commitment__spacer {
   height: var(--seat-runway);
}

.dishes__spacer {
   height: var(--dishes-runway);
}

.counter__spacer {
   height: var(--counter-runway);
}

.close__spacer {
   height: var(--close-runway);
}

.pm__spacer {
   height: var(--pm-runway);
}

.pmtext__spacer {
   height: var(--pmtext-runway);
}

.commitment__hold,
.dishes__hold,
.counter__hold,
.close__hold,
.pm__hold,
.pmbody__hold {
   height: var(--section-hold);
}

.about__dishes-contents,
.about__counter-contents {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
}

.commitment__curtain {
   position: absolute;
   left: 0;
   width: 100%;
   height: 100vh;
   z-index: 2;
   pointer-events: none;
}

.commitment__curtain--top {
   bottom: 100%;
   background: #fff;
   -webkit-mask:
      linear-gradient(#000, #000) top / 100% calc(100% - var(--seat-wave-h) + 1px) no-repeat,
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,90%20C260,0%20540,45%20760,70%20C990,100%201230,90%201440,20%20L1440,0%20L0,0%20Z'%20fill='%23000'/%3E%3C/svg%3E") bottom / 100% var(--seat-wave-h) no-repeat;
   mask:
      linear-gradient(#000, #000) top / 100% calc(100% - var(--seat-wave-h) + 1px) no-repeat,
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,90%20C260,0%20540,45%20760,70%20C990,100%201230,90%201440,20%20L1440,0%20L0,0%20Z'%20fill='%23000'/%3E%3C/svg%3E") bottom / 100% var(--seat-wave-h) no-repeat;
   transform: translateY(calc(var(--seat-top-start) + var(--seat-p, 0) * (var(--seat-band-top) - var(--seat-top-start)) + var(--close-p, 0) * (var(--close-end) - var(--seat-band-top)))) translateZ(0);
   transform: translateY(round(var(--seat-top-start) + var(--seat-p, 0) * (var(--seat-band-top) - var(--seat-top-start)) + var(--close-p, 0) * (var(--close-end) - var(--seat-band-top)), 1px)) translateZ(0);
}

.commitment__curtain--bottom {
   top: 100%;
   background: #fff;
   -webkit-mask:
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,90%20C260,0%20540,45%20760,70%20C990,100%201230,90%201440,20%20L1440,120%20L0,120%20Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--seat-wave-h) no-repeat,
      linear-gradient(#000, #000) bottom / 100% calc(100% - var(--seat-wave-h) + 1px) no-repeat;
   mask:
      url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,90%20C260,0%20540,45%20760,70%20C990,100%201230,90%201440,20%20L1440,120%20L0,120%20Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--seat-wave-h) no-repeat,
      linear-gradient(#000, #000) bottom / 100% calc(100% - var(--seat-wave-h) + 1px) no-repeat;
   transform: translateY(calc(-1 * (var(--seat-bottom-start) + var(--seat-p, 0) * (var(--seat-band-bottom) - var(--seat-bottom-start)) + var(--close-p, 0) * (var(--close-end) - var(--seat-band-bottom))))) translateZ(0);
   transform: translateY(round(-1 * (var(--seat-bottom-start) + var(--seat-p, 0) * (var(--seat-band-bottom) - var(--seat-bottom-start)) + var(--close-p, 0) * (var(--close-end) - var(--seat-band-bottom))), 1px)) translateZ(0);
}

.seat__img-wrap,
.dishes__img-wrap,
.counter__img-wrap {
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 3;
}

.seat__img-wrap,
.seat__text-container {
   opacity: calc(var(--seat-p, 0) * (1 - var(--dishes-p, 0)));
}

.dishes__img-wrap,
.dishes__text-container {
   opacity: calc(var(--dishes-p, 0) * (1 - var(--counter-p, 0)));
}

.counter__img-wrap,
.counter__text-container {
   opacity: calc(var(--counter-p, 0) * (1 - var(--close-p, 0)));
}

.seat__window01,
.seat__window02,
.dishes__window01,
.dishes__window02,
.counter__window01,
.counter__window02 {
   position: absolute;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   z-index: 3;
}

.seat__window01 img,
.seat__window02 img,
.dishes__window01 img,
.dishes__window02 img,
.counter__window01 img,
.counter__window02 img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.seat__window01 img {
   object-position: center 60%;
}

.counter__window02 img {
   object-position: center bottom;
}

.seat__img-container01,
.seat__img-container02,
.dishes__img-container01,
.dishes__img-container02,
.counter__img-container01,
.counter__img-container02 {
   width: 100%;
   height: 100%;
}

/* ===== 写真をゆっくり右から左へ流す（席・食器・カウンター共通） ===== */
.seat__img-container01,
.seat__img-container02,
.dishes__img-container01,
.dishes__img-container02,
.counter__img-container01,
.counter__img-container02 {
   width: 115%;
   animation: imgSlide 20s ease-in-out infinite alternate;
}

@keyframes imgSlide {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-13%);
   }
}

@media (prefers-reduced-motion: reduce) {

   .sub-mv__bg,
   .seat__img-container01,
   .seat__img-container02,
   .dishes__img-container01,
   .dishes__img-container02,
   .counter__img-container01,
   .counter__img-container02 {
      animation: none;
   }
}

.seat__window01,
.dishes__window01,
.counter__window01 {
   right: 4%;
   top: 10vh;
   width: 27%;
}

.seat__window02,
.dishes__window02,
.counter__window02 {
   left: 4%;
   bottom: 8vh;
   width: 27%;
}

@media (min-width: 431px) and (max-width: 1100px) {

   .seat__window01,
   .dishes__window01,
   .counter__window01,
   .seat__window02,
   .dishes__window02,
   .counter__window02 {
      width: 20%;
   }
}

.seat__text-container,
.dishes__text-container,
.counter__text-container {
   position: absolute;
   z-index: 1;
   text-align: center;
   color: #fff;
}

.seat__text-title,
.dishes__text-title,
.counter__text-title {
   font-size: 26px;
   margin-bottom: 60px;
}

.seat__text,
.dishes__text,
.counter__text {
   line-height: 62px;
}

.header.is-transparent {
   background: transparent;
   color: #fff;
}

.header.is-transparent .header__nav-item {
   color: #fff;
}

.header.is-transparent .header__logo-img--black {
   opacity: 0;
}

.header.is-transparent .header__logo-img--white {
   opacity: 1;
}

.header.is-transparent .header__sns-img--default {
   opacity: 0;
}

.header.is-transparent .header__sns-img--white {
   opacity: 1;
}

.header.is-transparent .header__wave {
   fill: transparent;
}

/* 夜帯セクション */

/* ===== 夜帯の3枚（背景・見出し・本文）は、出番が来るまで描画対象から外す ===== */
.about__seat-contents .pm__bg,
.about__seat-contents .about__pm-01,
.about__seat-contents .about__pm-02 {
   visibility: hidden;
}

.about__seat-contents.is-pm-ready .pm__bg,
.about__seat-contents.is-pm-ready .about__pm-01,
.about__seat-contents.is-pm-ready .about__pm-02 {
   visibility: visible;
}

.about__seat-contents .pm__bg {
   position: absolute;
   inset: 0;
   z-index: 5;
   opacity: var(--pm-p, 0);
   pointer-events: none;
}

.about__seat-contents .pm__bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.about__seat-contents .about__pm-01 {
   position: absolute;
   inset: 0;
   z-index: 6;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   opacity: calc(var(--close-p, 0) * (1 - var(--pmtext-p, 0)));
   transition: opacity 1.4s ease;
}

.about__seat-contents .about__pm-text {
   font-size: 26px;
   color: #3E95A8;
   color: color-mix(in srgb, #fff calc(var(--pm-p, 0) * 100%), #3E95A8);
}

/* ===== 夜帯営業の本文 ===== */
.about__seat-contents .about__pm-02 {
   position: absolute;
   inset: 0;
   z-index: 6;
   color: #fff;
   pointer-events: none;
   opacity: var(--pmtext-p, 0);
   transition: opacity 1.4s ease;
}

.about__seat-contents .about__pm-02 .pm__button {
   pointer-events: auto;
}

.pm__text-container {
   position: absolute;
   left: 9%;
   top: 50%;
   transform: translateY(-50%);
   width: 38%;
}

.pm__text {
   font-size: 22px;
   line-height: 46px;
   margin-bottom: 70px;
}

.pm__button {
   display: grid;
   align-items: end;
   justify-items: center;
   width: 210px;
   color: #fff;
}

.pm__button+.pm__button {
   margin-top: 40px;
}

.pm__button-text {
   grid-area: 1 / 1;
   font-size: 16px;
   padding: 0 10px 12px 0;
}

.pm__button-arrow {
   grid-area: 1 / 1;
   display: block;
   width: 210px;
}

.pm__button-arrow img {
   width: 100%;
   height: auto;
   display: block;
   filter: brightness(0) invert(1);
   transition: transform 0.3s ease;
}

.pm__button:hover .pm__button-arrow img {
   transform: translateX(15px);
}

.pm__bg-container {
   position: absolute;
   right: 4%;
   top: 50%;
   transform: translateY(-50%);
   width: 50%;
   height: 70vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.pm__bg-container .guide__stack {
   position: relative;
   height: 82%;
   aspect-ratio: 2 / 3;
   width: auto;
   z-index: 2;
}

/* ===== 以下 .guide__card / .guide-cursor 系は TOP（css/style.css）と同一 ===== */
.guide__card {
   --tilt: 0deg;
   position: absolute;
   inset: 0;
   transform-origin: 100% 100%;
   transform: rotate(0deg);
   cursor: grab;
   touch-action: none;
   user-select: none;
   -webkit-user-select: none;
   will-change: transform;
   pointer-events: auto;
}

.about__seat-contents .about__pm-02 .guide__card {
   pointer-events: none;
   will-change: auto;
}

.about__seat-contents .about__pm-02.is-visible .guide__card {
   pointer-events: auto;
   will-change: transform;
}

.guide__card:not(.is-top):nth-last-child(2) { transform: translate(-4px, -2px) rotate(2deg); }
.guide__card:not(.is-top):nth-last-child(3) { transform: translate(4px, -4px) rotate(-3deg); }
.guide__card:not(.is-top):nth-last-child(4) { transform: translate(-6px, -6px) rotate(4deg); }
.guide__card:not(.is-top):nth-last-child(5) { transform: translate(6px, -8px) rotate(-5deg); }
.guide__card:not(.is-top):nth-last-child(6) { transform: translate(-8px, -10px) rotate(5deg); }
.guide__card:not(.is-top):nth-last-child(n+7) { transform: translate(8px, -12px) rotate(-6deg); }

.guide__card.is-top {
   transform: rotate(var(--tilt));
}

.guide__card img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none;
}

.guide__card.is-dragging {
   cursor: grabbing;
   transition: none;
}

.guide__card.is-animating {
   transition: transform 1s ease, opacity 1s ease;
}

.has-guide-cursor .guide__card {
   cursor: none;
}

.guide-cursor {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9998;
   pointer-events: none;
   will-change: transform;
}

.guide-cursor__circle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 80px;
   margin: -40px 0 0 -40px;
   border-radius: 50%;
   background: rgba(62, 149, 168, 0.75);
   color: #fff;
   font-size: 20px;
   line-height: 1;
   opacity: 0;
   transform: scale(0.2);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.guide-cursor.is-active .guide-cursor__circle {
   opacity: 1;
   transform: scale(1);
}

@media (max-width: 768px) {

   .hamburger:not(.is-open) .hamburger__line,
   .hamburger:not(.is-open) .hamburger__line::before,
   .hamburger:not(.is-open) .hamburger__line::after {
      background: #3E95A8;
      background: color-mix(in srgb, #fff calc(var(--close-p, 0) * 100%), #3E95A8);
      transition: background 1.4s ease, transform 0.3s ease, opacity 0.3s ease;
   }

   .sub-mv__copy {
      right: auto;
      bottom: auto;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: auto;
   }

   :root {
      --seat-wave-h: 8.333vw;

      --seat-runway: 100vh;
      --dishes-runway: 150vh;
      --counter-runway: 150vh;
      --close-runway: 75vh;
      --pm-runway: 75vh;
      --pmtext-runway: 75vh;
      --section-hold: 400px;

      --seat-band-top: calc(31vh - 20px);
      --seat-band-bottom: calc(31vh - 20px);

      --curtain-top-d: calc(var(--seat-top-start) + var(--seat-p, 0) * (var(--seat-band-top) - var(--seat-top-start)) + var(--close-p, 0) * (var(--close-end) - var(--seat-band-top)));
      --curtain-bottom-d: calc(var(--seat-bottom-start) + var(--seat-p, 0) * (var(--seat-band-bottom) - var(--seat-bottom-start)) + var(--close-p, 0) * (var(--close-end) - var(--seat-band-bottom)));

      --wave-mask-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,90 C260,0 540,45 760,70 C990,100 1230,90 1440,20 L1440,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
      --wave-mask-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,90 C260,0 540,45 760,70 C990,100 1230,90 1440,20 L1440,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
   }

   /* ===== SP: テキストだけ、写真とは別のタイミングで入れ替える ===== */
   .seat__text-container {
      opacity: calc(var(--seat-p, 0) * (1 - clamp(0, var(--dishes-p, 0) / 0.2, 1)));
   }

   .dishes__text-container {
      opacity: calc(clamp(0, (var(--dishes-p, 0) - 0.25) / 0.25, 1) * (1 - clamp(0, var(--counter-p, 0) / 0.2, 1)));
   }

   .counter__text-container {
      opacity: calc(clamp(0, (var(--counter-p, 0) - 0.25) / 0.25, 1) * (1 - var(--close-p, 0)));
   }

   /* ===== SP: 写真を小さな四角ではなく、白い部分いっぱいに敷く ===== */
   .seat__window01,
   .dishes__window01,
   .counter__window01,
   .seat__window02,
   .dishes__window02,
   .counter__window02 {
      left: 0;
      right: auto;
      width: 100%;
      aspect-ratio: auto;
      -webkit-mask-repeat: no-repeat, no-repeat;
      mask-repeat: no-repeat, no-repeat;
      --mask-overlap: 1px;
   }

   .seat__window01,
   .dishes__window01,
   .counter__window01 {
      top: 0;
      bottom: auto;
      height: var(--curtain-top-d);
      -webkit-mask-image: var(--wave-mask-top), linear-gradient(#000, #000);
      mask-image: var(--wave-mask-top), linear-gradient(#000, #000);
      -webkit-mask-size: 100% var(--seat-wave-h), 100% calc(100% - var(--seat-wave-h) + var(--mask-overlap));
      mask-size: 100% var(--seat-wave-h), 100% calc(100% - var(--seat-wave-h) + var(--mask-overlap));
      -webkit-mask-position: bottom, top;
      mask-position: bottom, top;
   }

   .seat__window02,
   .dishes__window02,
   .counter__window02 {
      bottom: 0;
      top: auto;
      height: var(--curtain-bottom-d);
      -webkit-mask-image: var(--wave-mask-bottom), linear-gradient(#000, #000);
      mask-image: var(--wave-mask-bottom), linear-gradient(#000, #000);
      -webkit-mask-size: 100% var(--seat-wave-h), 100% calc(100% - var(--seat-wave-h) + var(--mask-overlap));
      mask-size: 100% var(--seat-wave-h), 100% calc(100% - var(--seat-wave-h) + var(--mask-overlap));
      -webkit-mask-position: top, bottom;
      mask-position: top, bottom;
   }

   .sub-mv__bg {
      height: calc(100% + 30px);
      margin-top: -30px;
   }

   /* ===== フォントサイズ: TOP（css/style.css）のSP縮小率に合わせる ===== */

   .seat__text-title,
   .dishes__text-title,
   .counter__text-title {
      font-size: 20px;
      margin-bottom: 30px;
      font-family: "Zen Kaku Gothic New", sans-serif;
   }

   .seat__text,
   .dishes__text,
   .counter__text {
      font-size: 16px;
      font-weight: 400;
      font-family: "Zen Kaku Gothic New", sans-serif;
   }

   .about__seat-contents .about__pm-text {
      font-size: 18px;
      transition: color 2.8s ease;
   }

   .pm__text {
      font-size: 16px;
      line-height: 29px;
      margin-bottom: 30px;
   }

   .pm__button-text {
      font-size: 16px;
   }

   .about__pm-02 {
      display: flex;
      flex-direction: column-reverse;
   }

   .pm__bg-container {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      width: 73.6%;
      max-width: 1440px;
      margin: 0 auto;       /* 中央寄せ */
      height: auto;
      flex: 7;
      padding: 80px 0 0;
      box-sizing: border-box;
   }

   .pm__bg-container .guide__stack {
      width: auto;
      height: min(100%, 50vh);
      max-width: 100%;
   }

   .pm__text-container {
      position: static;
      left: auto;
      top: auto;
      transform: none;
      width: 100%;
      flex: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 9%;
      box-sizing: border-box;
      text-align: center;
   }
   

      .pm__text-container {
         margin-bottom: 50px;
      }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
   .about__seat-contents .about__pm-text {
      transition: none;
   }
}