@charset "UTF-8";

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

/* 色調整は画像に焼き込み済み（PCの1枚目はFigmaからの書き出し、
   SPの1枚目と2枚目は以前の filter: sepia(.08) saturate(1.1) brightness(.81) contrast(1.04) を焼き込み） */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 1200px at 12% 96%,
    rgba(0, 0, 0, .62) 0%,
    rgba(0, 0, 0, .45) 25%,
    rgba(0, 0, 0, .2) 50%,
    rgba(0, 0, 0, 0) 75%);
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem; /* 24px */
}

.hero-lead-group {
  display: flex;
  flex-direction: column;
}

.hero-eyebrow {
  font-family: var(--font-en);
  line-height: 1.4;
  letter-spacing: .02em;
  opacity: .7;
}

.hero-title {
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: .06em;
}

.hero-lead {
  line-height: 1.9;
  letter-spacing: .06em;
}

@media (width >= 751px) {
  #hero {
    height: 100vh;
    min-height: 43.75rem; /* 700px */
  }

  .hero-copy {
    width: 53.75rem; /* 860px */
    margin-left: max(3.5rem, calc((100% - var(--frame)) / 2 + 3.5rem));
    margin-bottom: 5.375rem; /* 86px */
  }

  .hero-eyebrow {
    font-size: .875rem;
  }

  .hero-title {
    font-size: 2.25rem; /* 36px */
  }

  .hero-lead {
    font-size: .875rem;
  }
}

/* --------------------------------------------------------------------------
   WHY SORA
   -------------------------------------------------------------------------- */
#why {
  position: relative;
  background: var(--color-back);
}

.reason > img {
  flex: 0 0 auto;
}

.reason h3 {
  line-height: 1.78;
  letter-spacing: .06em;
}

.reason p {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: .06em;
}

.reason .reason-note {
  font-size: .75rem;
  letter-spacing: .06em;
}

@media (width >= 751px) {
  #why {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;          /* 80px */
    min-height: 48.9375rem; /* 783px（Figma） */
    padding-top: 10rem; /* 160px */
    padding-inline: calc((100% - var(--content)) / 2);
  }

  #why .heading {
    align-items: center;
    text-align: center;
  }

  /* 1段目4つ・2段目3つ。::before を幅100%の空行にして4つ目の後で折り返す。
     行間は空行の上下の row-gap 2つ分で48px */
  .reasons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 3rem; /* 24 / 48 */
    width: 100%;
  }

  .reasons::before {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }

  .reason:nth-child(n+5) {
    order: 2;
  }

  .reason {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* 16px */
    min-width: 14.25rem; /* 228px */
    text-align: center;
  }

  .reason:not(:last-child) {
    width: 14.25rem;
  }

  /* 見出しが長い7つ目は見出しの幅で本文を折り返す */
  .reason:last-child {
    width: min-content;
  }

  html[lang="ja"] .reason:nth-child(5) p {
    white-space: nowrap;
  }

  .reason:not(:nth-child(4)):not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3rem;
    right: -1.5rem;
    width: 1px;
    height: 7.1875rem; /* 115px */
    background: var(--color-border);
  }

  .reason > img {
    width: 2rem;
    height: 2rem;
  }

  .reason > div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
  }

  .reason h3 {
    color: var(--color-accent);
    font-size: 1.375rem; /* 22px */
    white-space: nowrap;
  }

  .reason p {
    text-align: left;
  }

  .reason .reason-note {
    line-height: 2.34;
  }
}

/* --------------------------------------------------------------------------
   TREATMENTS
   -------------------------------------------------------------------------- */
#treatments {
  background: var(--color-back);
}

.menu-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.menu-intro .heading-en,
.menu-intro .heading-ja {
  text-align: center;
}

.menu-lead {
  font-family: var(--font-ja);
  font-size: 1.375rem; /* 22px */
  line-height: 1.78;
  letter-spacing: .06em;
}

/* アニメON時は導入文が sticky で残るので、価格は手前に重ねて隠す */
.pricebox {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-back);
  text-align: center;
}

.price-lead {
  display: flex;
  flex-direction: column;
  gap: .375rem; /* 6px */
}

.price-lead h3 {
  color: var(--color-accent);
  font-size: 1.375rem;
  line-height: 1.78;
  letter-spacing: .06em;
}

.price-lead p {
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

.prices {
  display: flex;
  align-items: center;
  background: var(--color-white);
}

.prices li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem; /* 8px */
  white-space: nowrap;
}

.prices span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .06em;
}

.prices b {
  font-family: var(--font-en);
  font-size: 1.1875rem; /* 19px */
  line-height: 1;
  letter-spacing: .02em;
}

.prices strong {
  font-family: var(--font-en);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .02em;
}

/* --- メニューカード --- */
.menu-stack {
  display: flex;
  flex-direction: column;
}

.menu-row {
  display: flex;
}

.menu-card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--color-white);
}

.menu-card-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.menu-card-img picture,
.menu-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-card-full img { object-position: center 50%; }
.menu-row:nth-child(2) .menu-card:nth-child(1) img { object-position: 38% center; }
.menu-row:nth-child(2) .menu-card:nth-child(2) img { object-position: 15% center; }
.menu-row:nth-child(3) .menu-card:nth-child(1) img { object-position: 40% center; }
.menu-row:nth-child(3) .menu-card:nth-child(2) img { object-position: 45% center; }

.menu-card::before,
.menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.menu-card::before {
  background: linear-gradient(to right,
    rgba(20, 20, 20, .8) 0%,
    rgba(20, 20, 20, .3) 45%,
    rgba(20, 20, 20, 0) 80%);
}

.menu-card::after {
  background: linear-gradient(to bottom,
    rgba(18, 18, 18, .45) 46.468%,
    #121212 100%);
}

.menu-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 24px */
  width: 100%;
}

.menu-card-head {
  display: flex;
  flex-direction: column;
  gap: .5rem; /* 8px */
}

.menu-card-name {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .06em;
}

.menu-card-en {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu-card-en span {
  font-family: var(--font-en);
  font-size: 3.75rem; /* 60px */
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}

.menu-card-badge {
  padding: 1px 1rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
}

.menu-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.menu-card-text {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.menu-card-catch {
  font-family: var(--font-ja);
  font-size: 1.375rem; /* 22px */
  line-height: 1.78;
  letter-spacing: .06em;
}

.menu-card-desc {
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
  opacity: .7;
}

.menu-card-effect {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

.menu-card-effect dt {
  flex: 0 0 auto;
  padding-inline: .5rem;
  background: rgba(0, 0, 0, .6);
  opacity: .7;
}

.menu-card-effect dd {
  flex: 1 1 0;
  min-width: 0;
  opacity: .7;
}

@media (width >= 751px) {
  .menu-card {
    min-height: 49.96875rem; /* 799.5px */
    padding: 0 3.5rem 4rem;
  }

  .menu-card .menu-card-content {
    width: 16.5rem; /* 264px */
  }

  .menu-card-full {
    flex: 1 1 100%;
    min-height: 56.25rem; /* 900px */
    padding-right: 52.5rem; /* 840px */
    padding-left: 3.5rem;
  }

  .menu-card-full .menu-card-content {
    width: 34rem; /* 544px */
  }

  .menu-intro {
    gap: 3rem;             /* 48px */
    padding-top: 12rem;    /* 192px */
    padding-bottom: 10rem; /* 160px */
    padding-inline: calc((100% - var(--content)) / 2);
  }

  .pricebox {
    gap: 2.5rem;     /* 40px */
    padding: 7.5rem; /* 120px */
  }

  .price-lead {
    width: 61.25rem; /* 980px */
  }

  .prices {
    gap: 3rem; /* 48px */
    padding: 1.9375rem 4.5rem; /* 31 / 72 */
  }

  .prices li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.5rem;
    width: 1px;
    height: 1.5rem;
    transform: translateY(-50%);
    background: var(--color-border);
  }
}

/* --------------------------------------------------------------------------
   PRIVATE ROOMS
   -------------------------------------------------------------------------- */
#rooms {
  position: relative;
  overflow: hidden;
  background: var(--color-back);
  color: var(--color-white);
}

.rooms-hero {
  position: absolute;
  overflow: hidden;
  background: var(--color-sumi);
}

.rooms-hero picture {
  display: block;
}

/* 写真・下のグラデーション・墨色まで画像に焼き込んである（支給の書き出し）。
   枠より横長の窓では上を切り、墨色の下端をそろえる */
.rooms-hero img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}


.rooms-copy {
  position: absolute;
  display: flex;
  flex-direction: column;
}

.rooms-copy .heading-en,
.rooms-copy .heading-ja {
  color: var(--color-white);
}

.rooms-copy > p {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: .06em;
}

.rooms-track {
  display: flex;
  align-items: flex-start;
}

.room-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem; /* 12px */
}

.room-card picture {
  display: block;
  position: relative;
  overflow: hidden;
}

.room-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-card p {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  color: var(--color-back);
}

.room-card em {
  font-family: var(--font-en);
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
}

.room-card em::after {
  content: "";
  display: inline-block;
  width: .5rem;
  height: 1px;
  margin-left: .5rem;
  vertical-align: middle;
  background: currentColor;
  opacity: .6;
}

.room-card b {
  flex: 1 1 0;
  min-width: 0;
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

@media (width >= 751px) {
  #rooms {
    height: 61.75rem; /* 988px */
  }

  .rooms-hero {
    left: 50%;
    top: 1rem;
    width: calc(100% - 2rem);
    height: 56.25rem;  /* 900px */
    transform: translateX(-50%);
  }


  .rooms-copy {
    left: calc((100% - var(--frame)) / 2 + 7rem); /* 112px */
    top: 11.0625rem; /* 177px */
    width: 74.4375rem; /* 1191px */
    gap: 3rem;
  }

  .rooms-copy > p {
    white-space: nowrap;
  }

  .rooms-carousel {
    position: absolute;
    left: 0;
    right: 0;
    top: 30.9375rem; /* 495px */
    overflow: hidden;
  }

  .rooms-track {
    gap: 2.5rem; /* 40px */
    width: max-content;
    margin-left: calc(50% - 51.7458rem); /* Figma の -108px（1440px幅のとき） */
  }

  .room-card picture {
    width: 32.83rem;   /* 525.289px */
    height: 19.875rem; /* 318px */
  }

}

/* --------------------------------------------------------------------------
   YOUR VISIT
   -------------------------------------------------------------------------- */
#visit {
  position: relative;
  background: var(--color-back);
}

.visit-inner {
  display: flex;
  flex-direction: column;
}

.visit-step {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.visit-step-num {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgba(171, 153, 89, .5);
  border-radius: 100px;
  background: var(--color-back);
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: .02em;
}

.visit-step-num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 1.75rem;
  height: 1px;
  background: rgba(171, 153, 89, .5);
}

.visit-step > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.visit-step h3 {
  color: var(--color-accent);
  line-height: 1.78;
  letter-spacing: .06em;
}

.visit-step p {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: .06em;
}

.visit-img {
  position: absolute;
  overflow: hidden;
  background: var(--color-white);
}

.visit-img img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.visit-img-1 img { object-position: 32% center; }
.visit-img-2 img { object-position: 50% center; }
.visit-img-3 img { object-position: 43% center; }

@media (width >= 751px) {
  #visit {
    display: flex;
    justify-content: center;
    gap: 7rem;          /* 112px */
    height: 55.9375rem; /* 895px */
    padding-top: 9rem;  /* 144px */
  }

  .visit-inner {
    position: relative;
    gap: 3rem; /* 48px */
  }

  .visit-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(1.75rem - .5px);
    top: 1.75rem;
    width: 1px;
    height: calc(100% + 1.5rem);
    background: var(--color-accent);
    opacity: .3;
  }

  .visit-inner .heading {
    width: 22.5rem; /* 360px */
  }

  .visit-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .visit-step {
    gap: 3.25rem; /* 円56＋線28＋余白24 で本文が108pxから始まる */
  }

  .visit-step > div {
    padding-top: .5rem;
  }

  .visit-step h3 {
    font-size: 1.375rem; /* 22px */
  }

  .visit-step p {
    white-space: nowrap;
  }

  .visit-img-1 {
    left: calc((100% - var(--frame)) / 2);
    top: 17.625rem;   /* 282px */
    width: 12.5rem;   /* 200px */
    height: 20.4375rem; /* 327px */
  }

  .visit-img-2 {
    left: calc((100% - var(--frame)) / 2 + 77.5rem); /* 1240px */
    top: 33.8125rem;  /* 541px */
    width: 12.5rem;
    height: 20.4375rem;
  }

  .visit-img-3 {
    right: calc((100% - var(--frame)) / 2 + 18.5rem); /* 296px */
    top: 58.8125rem;  /* 941px */
    width: 12.5rem;
    height: 12.5rem;
  }
}

/* --------------------------------------------------------------------------
   GUEST VOICES
   -------------------------------------------------------------------------- */
#voices {
  background: var(--color-back);
}

.voice-list {
  display: flex;
  align-items: stretch;
}

.voice {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.voice-stars {
  color: var(--color-accent);
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

.voice-text {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: .06em;
}

.voice-meta {
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

@media (width >= 751px) {
  #voices {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;           /* 48px */
    height: 42.8125rem;  /* 685px */
    padding-top: 17.5rem; /* 280px */
    padding-inline: calc((100% - var(--content)) / 2);
  }

  #voices .heading {
    width: 22.5rem; /* 360px */
  }

  .voice-list {
    gap: 7rem;
    width: 100%;
  }

  .voice:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3.5rem;
    width: 1px;
    background: var(--color-border);
  }
}

/* --------------------------------------------------------------------------
   LOCATION & HOURS
   -------------------------------------------------------------------------- */
#location {
  background: var(--color-back);
}

.location-col {
  display: flex;
  flex-direction: column;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: .06em;
}

.location-info > div {
  display: flex;
  align-items: center;
}

.location-info dt {
  flex: 0 0 auto;
  width: 5.5rem; /* 88px */
}

.location-map {
  overflow: hidden;
}

.location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (width >= 751px) {
  #location {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 42.75rem; /* 684px */
    padding-block: 9rem; /* 144px */
    padding-inline: calc((100% - var(--content)) / 2);
  }

  .location-col {
    gap: 3rem; /* 48px */
  }

  .location-col .heading {
    width: 22.5rem; /* 360px */
  }

  .location-info dd {
    white-space: nowrap;
  }

  .location-map {
    flex: 0 0 auto;
    width: 39.1875rem;  /* 627px */
    height: 24.3125rem; /* 389px */
  }
}

/* --------------------------------------------------------------------------
   BOOKING
   -------------------------------------------------------------------------- */
#booking {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-sumi);
  color: var(--color-white);
}

.booking-bg {
  position: absolute;
  inset: 0;
}

.booking-bg picture,
.booking-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.booking-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2);
}

.booking-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(42, 32, 32, .7);
  border-radius: 4px;
}

.booking-panel .heading-en,
.booking-panel .heading-ja {
  color: var(--color-white);
}

.booking-payment {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  opacity: .7;
}

.booking-payment-title {
  font-family: var(--font-ja);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: .06em;
}

.booking-payment p:last-child {
  font-size: .875rem;
  line-height: 1.9;
  letter-spacing: .06em;
}

@media (width >= 751px) {
  #booking {
    height: 56.25rem; /* 900px */
    padding-block: 8rem; /* 128px */
  }

  .booking-panel {
    gap: 2rem;             /* 32px */
    padding: 4.5rem 7rem;  /* 72 / 112 */
  }

  .booking-payment p:last-child {
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
#faq {
  background: var(--color-back);
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.faq-q {
  display: flex;
  align-items: flex-start;
}

.faq-q em {
  flex: 0 0 auto;
  width: 2.5rem; /* 32px＋余白8px */
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: .02em;
}

.faq-q h3 {
  color: var(--color-accent);
  font-size: 1.25rem; /* 20px */
  line-height: 1.78;
  letter-spacing: .06em;
}

.faq-a {
  padding-left: 2.5rem;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: .06em;
}

@media (width >= 751px) {
  #faq {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 57.5625rem; /* 921px */
    padding-block: 10rem; /* 160px */
    padding-inline: calc((100% - var(--content)) / 2);
  }

  .faq-list {
    gap: 2rem; /* 32px */
  }

  .faq-q {
    align-items: center;
  }

  .faq-q h3,
  .faq-a {
    white-space: nowrap;
  }

  .faq-item:not(:last-child) {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (width <= 750px) {

  /* ---------- HERO ---------- */
  #hero {
    height: 100vh;
    height: 100dvh;
  }

  .hero-copy {
    position: absolute;
    left: 6.4vw;   /* 24px */
    right: 6.4vw;
    bottom: 11.2vw;
    width: auto;
    align-items: flex-start;
    gap: 4.2666666667vw; /* 16px */
    text-align: left;
    margin: 0;
  }

  .hero-copy .btn-primary { align-self: center; }

  .hero-lead-group {
    align-self: center;
    gap: 1.3333333333vw; /* 5px */
    text-align: center;
  }

  .hero-eyebrow { font-size: 3.7333333333vw; /* 14px */ }

  .hero-title {
    font-size: 5.8666666667vw; /* 22px */
    white-space: nowrap;
  }

  .hero-lead { font-size: 3.4666666667vw; /* 13px */ }

  .hero-lead br { display: none; }

  /* ---------- WHY SORA ---------- */
  #why {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.4vw;
    height: auto;
    padding: 21.3333333333vw 6.4vw 0; /* 80 / 24 */
    text-align: center;
  }

  #why .heading { width: 100%; }

  .reasons {
    display: flex;
    flex-direction: column;
    gap: 5.3333333333vw; /* 20px */
    width: 100%;
    text-align: left;
  }

  .reason {
    display: flex;
    align-items: flex-start;
    gap: 3.2vw; /* 12px */
  }

  .reason:not(:last-child) {
    padding-bottom: 5.3333333333vw;
    border-bottom: 1px solid var(--color-border);
  }

  .reason:nth-child(-n+2) p { white-space: nowrap; }

  .reason > img { width: 6.4vw; height: 6.4vw; margin-top: 1.3333333333vw; }
  .reason h3 { font-size: 4.8vw; }   /* 18px */
  .reason p  { font-size: 4vw; }     /* 15px */
  .reason .reason-note { font-size: 3.2vw; } /* 12px */

  /* ---------- TREATMENTS ---------- */
  .menu-intro {
    gap: 6.4vw;
    padding: 19.2vw 6.4vw 10.6666666667vw; /* 72 / 24 / 40 */
  }

  .menu-lead {
    font-size: 4.8vw;
    text-align: left;
  }

  .menu-lead br { display: none; }

  .pricebox {
    gap: 6.4vw;               /* 24px */
    padding: 19.2vw 6.4vw;    /* 72 / 24 */
    width: 100%;
  }

  .price-lead { width: 100%; gap: 1.6vw; }
  .price-lead h3 { font-size: 4.8vw; }

  .price-lead p {
    font-size: 3.4666666667vw;
    text-align: left;
  }


  .prices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4.2666666667vw 0;   /* 16px */
    width: 100%;
    padding: 4.2666666667vw; /* 16px */
  }

  .prices li { gap: 1.6vw; }
  .prices span { font-size: 4.2666666667vw; }   /* 16px */
  .prices b { font-size: 4.8vw; }               /* 18px */
  .prices strong { font-size: 5.3333333333vw; } /* 20px */

  .prices li:not(:nth-child(3n))::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 6.4vw;
    transform: translateY(-50%);
    background: var(--color-border);
  }

  .prices li:nth-child(n+4) {
    padding-top: 4.2666666667vw;
    border-top: 1px solid var(--color-border);
  }

  /* ---------- メニューカード ---------- */
  .menu-row { flex-direction: column; }

  .menu-card,
  .menu-card-full {
    flex: 0 0 auto;
    min-height: 0;
    gap: 8.5333333333vw; /* 32px */
    padding: 0 6.4vw 10.6666666667vw;
    color: var(--color-sumi);
  }

  .menu-card::before,
  .menu-card::after { display: none; }

  .menu-card-img {
    position: static;
    width: 100%;
    aspect-ratio: 327 / 218;
  }

  .menu-card .menu-card-content,
  .menu-card-full .menu-card-content {
    width: 100%;
    gap: 2.1333333333vw; /* 8px */
  }

  .menu-card-body { gap: 3.7333333333vw; /* 14px */ }
  .menu-card-text { gap: 1.0666666667vw; /* 4px */ }

  .menu-card-name { font-size: 4vw; }                 /* 15px */
  .menu-card-en span { font-size: 8.5333333333vw; }   /* 32px */
  .menu-card-badge { font-size: 4.2666666667vw; }     /* 16px */
  .menu-card-catch { font-size: 4.8vw; }              /* 18px */
  .menu-card-desc { font-size: 3.4666666667vw; }      /* 13px */

  .menu-card-effect {
    padding-top: 3.7333333333vw;
    border-top-color: var(--color-border);
    font-size: 3.4666666667vw;
  }

  .menu-card-effect dt { color: var(--color-white); }

  /* ---------- PRIVATE ROOMS ---------- */
  #rooms {
    height: 153.8666666667vw; /* 577px */
  }

  .rooms-hero {
    left: 2.1333333333vw;
    top: 0;
    width: 95.7333333333vw; /* 359px */
    height: 100%;
    transform: none;
  }


  .rooms-copy {
    left: 10.6666666667vw; /* 40px */
    top: 37.0666666667vw;  /* 139px */
    width: 74.4vw;         /* 279px */
    gap: 8.5333333333vw;   /* 32px */
  }

  .rooms-copy > p {
    font-size: 4vw;
    white-space: normal;
  }

  .rooms-carousel {
    position: absolute;
    left: 0;
    top: 101.3333333333vw; /* 380px */
    width: 100%;
    transform: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .rooms-carousel::-webkit-scrollbar { display: none; }

  .rooms-track {
    gap: 4.2666666667vw; /* 16px */
    padding-inline: 6.4vw;
    width: max-content;
  }

  .room-card {
    scroll-snap-align: center;
    gap: 3.2vw; /* 12px */
  }

  .room-card picture {
    width: 51.7333333333vw; /* 194px */
    height: 31.2vw;         /* 117px */
  }

  .room-card em { font-size: 4.2666666667vw; }  /* 16px */
  .room-card b  { font-size: 3.2vw; }           /* 12px */

  .room-card p {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .room-card em::after { display: none; }

  .room-card b { flex: 0 0 auto; }

  /* ---------- YOUR VISIT ---------- */
  #visit {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 19.2vw 6.4vw 0;
    text-align: center;
  }

  .visit-inner { order: 1; }
  .visit-img { order: 2; }

  .visit-inner { gap: 6.4vw; }
  .visit-inner .heading { width: 100%; }

  .visit-steps {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6.4vw; /* 24px */
    text-align: left;
  }

  .visit-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(5.3333333333vw - .5px);
    top: 5.3333333333vw;
    width: 1px;
    height: calc(100% + 6.4vw);
    background: rgba(171, 153, 89, .5);
  }

  .visit-step { gap: 5.3333333333vw; }

  .visit-step-num {
    width: 10.6666666667vw; /* 40px */
    height: 10.6666666667vw;
    font-size: 4.2666666667vw; /* 16px */
  }

  .visit-step-num::after { width: 3.2vw; /* 12px */ }

  .visit-step h3 { font-size: 4.8vw; }
  .visit-step p  { font-size: 4vw; white-space: normal; }

  .visit-step:nth-child(n+2) p br { display: none; }

  .visit-img {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    overflow: hidden;
  }

  .visit-img-1 {
    align-self: flex-start;
    width: 42.9333333333vw;  /* 161px */
    height: 70.4vw;          /* 264px */
    margin: 12.8vw 0 0 -6.4vw;
  }

  .visit-img-1 img { object-position: 34% center; }

  /* SPは右下に受付の写真（PCの3枚目）を置く */
  .visit-img-2 { display: none; }

  .visit-img-3 {
    align-self: flex-end;
    width: 41.0666666667vw;  /* 154px */
    height: 41.0666666667vw;
    margin: -18.9333333333vw -6.4vw 0 0; /* -71px */
  }

  .visit-img-3 img { object-position: 53% center; }

  /* ---------- GUEST VOICES ---------- */
  #voices {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6.4vw;
    height: auto;
    padding: 19.2vw 6.4vw 0; /* 72 / 24 */
    text-align: center;
  }

  #voices .heading { width: 100%; }

  .voice-list {
    flex-direction: column;
    gap: 0;
    width: 100%;
    text-align: left;
  }

  .voice:not(:last-child) {
    padding-bottom: 6.4vw;
    margin-bottom: 6.4vw;
    border-bottom: 1px solid var(--color-border);
  }

  .voice:not(:last-child)::after { display: none; }

  .voice-stars { font-size: 3.4666666667vw; }
  .voice-text  { font-size: 4vw; }
  .voice-meta  { font-size: 3.4666666667vw; }

  /* ---------- LOCATION ---------- */
  #location {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 6.4vw;
    padding: 19.2vw 6.4vw; /* 72 / 24 / 72 */
    text-align: center;
  }

  .location-col { width: 100%; gap: 6.4vw; }
  .location-col .heading { width: 100%; }

  .location-info {
    gap: 2.1333333333vw; /* 8px */
    font-size: 4vw;
    text-align: left;
  }

  .location-info > div { align-items: center; }
  .location-info dt { width: 21.3333333333vw; }
  .location-info dd { flex: 1 1 0; white-space: normal; }

  .location-map {
    width: 100%;
    height: 53.3333333333vw;
  }

  /* ---------- BOOKING ---------- */
  /* Figmaはパネルの上8px・下28pxに写真が見える */
  #booking {
    height: auto;
    padding: 2.1333333333vw 2.1333333333vw 7.4666666667vw; /* 8 / 8 / 28 */
  }

  /* SPの写真は黒20%の重ねまで焼き込んだ支給の書き出し */
  .booking-bg::after { display: none; }

  .booking-panel {
    gap: 6.4vw;
    padding: 14.9333333333vw 7.5333333333vw; /* 56 / 32 */
    width: 100%;
    background: rgba(28, 28, 28, .7);
    border-radius: 0;
  }

  .booking-payment { gap: 4.2666666667vw; /* 16px */ }

  .booking-payment-title { font-size: 4.2666666667vw; }

  .booking-payment p:last-child {
    font-size: 3.4666666667vw;
    white-space: normal;
  }

  .booking-payment p:last-child br { display: none; }

  /* ---------- FAQ ---------- */
  #faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 6.4vw;
    padding: 19.2vw 6.4vw; /* 72 / 24 / 72 */
    text-align: center;
  }

  #faq .heading { width: 100%; }

  .faq-list {
    gap: 6.4vw;
    width: 100%;
    text-align: left;
  }

  .faq-item:not(:last-child) {
    padding-bottom: 6.4vw;
    border-bottom: 1px solid var(--color-border);
  }

  .faq-q em { width: 10.6666666667vw; font-size: 4.2666666667vw; line-height: 2; } /* 32＋余白8 */
  .faq-q h3 { flex: 1 1 0; font-size: 4.8vw; white-space: normal; }

  .faq-a {
    padding-left: 10.6666666667vw;
    font-size: 4vw;
    white-space: normal;
  }
}