/* =========================================================
   SO-TEN FITNESS — LP styles
   DNA: 名刺ネイビー基調 / 白余白主役 / muted gold は点 / 夜明けグラデ
        明朝(Noto Serif JP)見出し × ゴシック(Noto Sans JP)本文 / Jost(Latin)
   ========================================================= */

:root {
  /* ---- color (tinted, no pure black/white) ---- */
  --navy:        #1b2a4a;
  --navy-deep:   #14223c;
  --navy-soft:   #2c4a6e;
  --sky:         #6f93bd;     /* 夜明けの淡青 */
  --slate:       #3f4d57;     /* （旧）差し色スレート・未使用 */
  --accent-1:    #1b2838;     /* 差し色グラデ上端（ダークブルーグレー）*/
  --accent-2:    #2e4156;     /* 差し色グラデ下端（やや明るい青灰＝下へ薄く）*/
  --accent-grad: linear-gradient(180deg, var(--accent-1) 0%, #233140 52%, var(--accent-2) 100%);
  --base:        #e2dccf;     /* くすみホワイト（warm greige / dusty・濃いめ）韓国系くすみトレンド */
  --base-2:      #ebe6db;     /* 少し明るいくすみ白（モーダル等）*/
  --ink:         #1d2740;     /* 本文 on light（ネイビー寄りの黒）*/
  --ink-soft:    #586780;     /* 補助文字（ネイビー寄りグレー）*/
  --gold:        #b3934f;     /* muted gold（差し色・点でのみ）*/
  --gold-soft:   #c7ab78;
  --hair:        rgba(27,42,74,.14);
  --hair-light:  rgba(247,244,238,.22);

  /* dawn gradient（濃紺→淡青→淡いオレンジ）*/
  --dawn: linear-gradient(160deg, #14223c 0%, #233f63 42%, #5b6f8e 70%, #b98b5e 100%);

  /* ---- type ---- */
  --serif: "Noto Serif JP", serif;
  --sans:  "Noto Sans JP", sans-serif;
  --latin: "Jost", sans-serif;

  --fs-hero:   clamp(2.4rem, 7vw, 5rem);
  --fs-h2:     clamp(1.7rem, 4vw, 3rem);
  --fs-lead:   clamp(1.15rem, 2vw, 1.5rem);
  --fs-body:   clamp(.95rem, 1.1vw, 1.0625rem);
  --fs-small:  .8125rem;

  /* ---- space ---- */
  --pad-x:     clamp(1.25rem, 6vw, 8rem);
  --sec-y:     clamp(5rem, 12vw, 11rem);

  /* ---- motion ---- */
  --ease:  cubic-bezier(.22,1,.36,1);   /* ease-out-quint 風 */
  --dur:   1.05s;

  --maxw: 1240px;
}

/* ---- reset ---- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--base);
  line-height: 1.9;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p,dl,dd,figure,blockquote { margin: 0; }

/* =========================================================
   Logo mark (sunrise)
   ========================================================= */
.logo-img { display: block; width: auto; }
/* header: hero上は白抜き、スクロール後（明背景）はフルカラーに切替 */
.header__brand { position: relative; }
.logo-img--header { height: 46px; transition: opacity .5s var(--ease); }
.logo--color { position: absolute; left: 0; top: 0; opacity: 0; }
.header.is-solid .logo--white { opacity: 0; }
.header.is-solid .logo--color { opacity: 1; }
.logo-img--loader { width: 156px; opacity: 0; transform: translateY(8px); animation: loaderIn 1.1s var(--ease) .15s forwards; }
/* footer: 紺背景なので白抜き版 */
.logo-img--footer { height: 70px; }

/* =========================================================
   Loader
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--base);
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 1.2rem; }
.loader .logo-mark { width: 76px; opacity: 0; transform: translateY(8px); animation: loaderIn 1s var(--ease) .1s forwards; }
.loader__word {
  font-family: var(--latin); letter-spacing: .42em; font-size: .9rem;
  color: var(--navy); padding-left: .42em;
  opacity: 0; animation: loaderIn 1s var(--ease) .45s forwards;
}
.loader .lm-sun { stroke-dasharray: 80; stroke-dashoffset: 80; animation: drawSun 1.1s var(--ease) .3s forwards; }
@keyframes loaderIn { to { opacity: 1; transform: none; } }
@keyframes drawSun { to { stroke-dashoffset: 0; } }

/* =========================================================
   Header / Nav
   ========================================================= */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem,2.4vw,1.7rem) var(--pad-x);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.header.is-solid {
  background: rgba(226,220,207,.93);
  backdrop-filter: blur(8px);
  padding-top: .8rem; padding-bottom: .8rem;
  box-shadow: 0 1px 0 var(--hair);
}
.header__brand { display: flex; align-items: center; gap: .6rem; }
.header__wordmark {
  font-family: var(--latin); letter-spacing: .3em; font-size: .82rem;
  color: var(--base); padding-left: .3em; transition: color .5s var(--ease);
}
.header.is-solid .header__wordmark { color: var(--navy); }
.header.is-solid .logo-mark .lm-horizon,
.header.is-solid .logo-mark .lm-ray { stroke: var(--navy); }
/* hero上（透明時）はロゴを明色に */
.header:not(.is-solid) .logo-mark .lm-horizon,
.header:not(.is-solid) .logo-mark .lm-ray { stroke: var(--base); }
.header:not(.is-solid) .logo-mark .lm-sun { stroke: var(--gold-soft); }

.nav { display: flex; align-items: center; gap: clamp(1rem,2vw,2.2rem); }
.nav a {
  font-family: var(--latin); font-size: .82rem; letter-spacing: .16em;
  color: var(--base); position: relative; padding: .2rem 0; transition: color .5s var(--ease);
}
.header.is-solid .nav a { color: var(--ink); }
.nav a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav a:not(.nav__cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta {
  border: 1px solid var(--gold); border-radius: 2px;
  padding: .55rem 1.1rem !important; font-family: var(--sans); letter-spacing: .08em;
  font-size: .8rem; transition: background .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover { background: var(--gold); color: var(--base) !important; }

.nav-toggle { display: none; }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 400; letter-spacing: .1em;
  padding: 1rem 2.2rem; border-radius: 2px; cursor: pointer;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  border: 1px solid transparent; font-size: .95rem;
}
.btn--gold { border-color: var(--gold); color: var(--base); background: transparent; position: relative; }
.btn--gold::before {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); z-index: -1; border-radius: 2px;
}
.btn--gold:hover { color: var(--navy-deep); border-color: var(--gold); }
.btn--gold:hover::before { transform: scaleX(1); transform-origin: left; }
/* on light bg */
.section .btn--gold, .footer__legal .btn--gold { color: var(--navy); }
.btn--line-dark { background: var(--navy); color: var(--base); }
.btn--line-dark:hover { background: var(--navy-deep); }
.price__more { background: #1b2838; border-color: #1b2838; color: var(--base); }
.price__more:hover { background: #2e4156; border-color: #2e4156; }

/* =========================================================
   Reveal (scroll-in)
   ========================================================= */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .12s; }
[data-delay="2"] { transition-delay: .24s; }
[data-delay="3"] { transition-delay: .36s; }
[data-delay="4"] { transition-delay: .48s; }

/* =========================================================
   Placeholder image blocks
   ========================================================= */
.ph-img {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(27,42,74,.03) 0 12px, transparent 12px 24px),
    linear-gradient(135deg, #20304f, #2c4a6e);
  border: 1px solid var(--hair);
}
.ph-img::after {
  content: attr(data-ph);
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 1.2rem; font-size: .72rem; letter-spacing: .06em; line-height: 1.7;
  color: rgba(247,244,238,.66); font-family: var(--sans);
}
.ph-img::before {
  content: "PHOTO"; position: absolute; top: .7rem; left: .8rem;
  font-family: var(--latin); font-size: .58rem; letter-spacing: .3em; color: rgba(247,244,238,.4);
}
/* 実画像 <img> はスロットを満たす（箱・比率は維持） */
.concept__photo, .program__photo, .voice__photo, .profile__photo { object-fit: cover; display: block; }
/* width/height属性の固定高さを無効化し、aspect-ratio を効かせる（voiceは固定88px維持） */
.concept__photo, .program__photo, .profile__photo { height: auto; }
/* GSAP制御時は CSS reveal transition を無効化（GSAPが制御） */
.gsap-on [data-reveal] { transition: none; }
/* 見出しマスク（明朝が下から立ち上がる） */
.reveal-mask { overflow: hidden; }
.reveal-mask > .mask-in { display: block; will-change: transform; }
/* 差し色: 暗いスレートのセクション（comme系 #3f4d57）。明暗のリズムを作る。全幅ブリード＋明色文字 */
.section.section--dark {
  max-width: none; width: 100%; margin: 0;
  background: var(--accent-grad); color: #f3efe9;       /* 上=濃紺→下=薄め の縦グラデ */
  padding-inline: max(var(--pad-x), calc((100% - var(--maxw)) / 2));
}
.section.section--dark .sec-label { color: rgba(243,239,233,.72); }
.section.section--dark .sec-no { color: var(--gold-soft); }
.section.section--dark .program__en { color: var(--gold-soft); }
.section.section--dark .program__desc,
.section.section--dark .profile__text p:not(.sec-label),
.section.section--dark .profile__name-en { color: rgba(243,239,233,.92); }
/* price / voice を差し色（ダーク）にした際の中身の配色 */
.section.section--dark .price__feature-num,
.section.section--dark .price__row-val { color: #f3efe9; }
.section.section--dark .price__feature-num small,
.section.section--dark .price__row-val small,
.section.section--dark .price__feature-note { color: rgba(243,239,233,.7); }
.section.section--dark .price__feature { border-top-color: var(--hair-light); border-bottom-color: var(--hair-light); }
.section.section--dark .price__row { border-bottom-color: var(--hair-light); }
.section.section--dark .voice__item blockquote { color: #f3efe9; }
.section.section--dark .voice__item figcaption { color: rgba(243,239,233,.7); }
.section.section--dark .btn--line-dark { background: transparent; border-color: rgba(243,239,233,.45); color: #f3efe9; }
.section.section--dark .btn--line-dark:hover { background: rgba(243,239,233,.1); border-color: rgba(243,239,233,.7); }
.section.section--dark .btn--gold { color: var(--base); }       /* 差し色上の予約CTA */
/* Access を差し色（ダーク）にした際の中身の配色 */
.section.section--dark .access__num,
.section.section--dark .access__info dt { color: var(--gold-soft); }
.section.section--dark .access__info .muted { color: rgba(243,239,233,.6); }
.section.section--dark .access__map { border-color: var(--hair-light); }

/* Brand / 理念（Philosophy）— うねる SO-TEN（くり抜き）＋ 創業理念。夜明けネイビー背景 */
.brand {
  position: relative; width: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: clamp(1.4rem, 3.5vw, 2.6rem);
  padding: clamp(3.5rem, 8vw, 7rem) var(--pad-x) clamp(4rem, 9vw, 7rem);
  background: var(--accent-grad);                       /* 差し色と統一（上=濃紺→下=薄め）*/
}
.brand > * { position: relative; z-index: 1; }                  /* 本文・波文字は波紋 canvas の前面 */
.brand__ripple { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.brand__label { font-family: var(--latin); letter-spacing: .34em; font-size: .74rem; text-transform: uppercase; color: var(--gold-soft); padding-left: .34em; }
.brand__canvas { position: relative; width: 100vw; max-width: 100vw; height: clamp(70vh, 94vh, 1000px); }
.brand__canvas canvas { display: block; }
.brand__fallback { display: none; font-family: "Cormorant Garamond", var(--serif); font-weight: 500; letter-spacing: .02em; font-size: clamp(3rem, 15vw, 11rem); color: transparent; -webkit-text-stroke: .6px #ece7dd; }
.brand--static .brand__canvas { display: none; }
.brand--static .brand__fallback { display: block; }
.philosophy { max-width: var(--maxw); width: 100%; text-align: center; }
/* lead は中央寄せの読み幅を保ち、values だけ本文幅いっぱいに広げて 01 を他セクション左端へ揃える */
.philosophy__lead { max-width: 30em; margin-inline: auto; }
.philosophy__lead { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.7vw, 2.15rem); line-height: 2.0; color: #f3efe9; }
/* lead をホバーで波打たせる（音が伝わる）: 1文字ずつ span 化して translateY */
.lead-char { display: inline-block; will-change: transform; }
@media (hover: hover) { .philosophy__lead { cursor: default; } }
.philosophy__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.4rem); margin-top: clamp(2.6rem, 6vw, 4.5rem); text-align: left; }
.value__no { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--gold-soft); margin-bottom: .5rem; }
.value__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: #f3efe9; margin-bottom: .6rem; letter-spacing: .04em; }
.value p { color: rgba(243,239,233,.72); font-size: var(--fs-body); line-height: 1.9; }
@media (prefers-reduced-motion: reduce) { .brand__canvas { display: none; } .brand__fallback { display: block; } }
@media (max-width: 760px) { .philosophy__values { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .br-pc { display: none; } }

/* =========================================================
   Section base
   ========================================================= */
/* 全セクション共通の左基準（02 と同じ）：全幅＋ max(pad-x, 中央寄せ余白)。
   → 全セクションの見出し左位置が揃う。広い画面では従来通り maxw 内に収まる */
.section { max-width: none; margin: 0; padding: var(--sec-y) max(var(--pad-x), calc((100% - var(--maxw)) / 2)); }
.section__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: clamp(2rem,4vw,3.5rem); }
.sec-no { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem,5vw,3.6rem); color: var(--gold); line-height: 1; }
.sec-label { font-family: var(--latin); letter-spacing: .3em; font-size: clamp(.86rem, 1.2vw, .96rem); color: var(--ink-soft); padding-left: .3em; text-transform: uppercase; }
.section__title { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.5; margin-bottom: clamp(2rem,4vw,3.5rem); }

/* =========================================================
   ① Hero
   ========================================================= */
.hero { position: relative; height: 100svh; min-height: 600px; display: flex; align-items: center; color: var(--base); overflow: hidden; }
.hero__bg { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 2.4s var(--ease), transform 7s linear; background-size: cover; background-position: center; }
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__slide::after, .hero__slide::before { opacity: .5; } /* placeholder labels fainter behind veil */
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,34,60,.45) 0%, rgba(20,34,60,.18) 35%, rgba(20,34,60,.55) 100%),
    linear-gradient(110deg, rgba(20,34,60,.62) 0%, rgba(20,34,60,.1) 60%);
}
.hero__content { position: relative; z-index: 2; padding: 0 var(--pad-x); max-width: none; margin: 0; width: 100%; will-change: transform, opacity; }
.hero__brand { font-family: var(--latin); letter-spacing: .42em; font-size: .82rem; padding-left: .42em; margin-bottom: 1.6rem; color: var(--gold-soft); }
.hero__catch { font-family: var(--serif); font-weight: 400; font-size: var(--fs-hero); line-height: 1.32; letter-spacing: .02em; }
.hero__catch .line { display: block; overflow: hidden; }
.hero__sub { font-size: clamp(.95rem,1.6vw,1.15rem); letter-spacing: .14em; margin: 1.8rem 0 2.6rem; font-weight: 300; }
.hero__scroll { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: .6rem; }
.hero__scroll span:first-child { font-family: var(--latin); font-size: .66rem; letter-spacing: .3em; color: var(--base); }
.hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--gold-soft), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--base); animation: scrollFlow 2.2s var(--ease) infinite; }
@keyframes scrollFlow { 0% { top: -50%; } 100% { top: 100%; } }

/* =========================================================
   ② Concept
   ========================================================= */
/* comme 型：テキスト左＋写真を右半分に。テキスト先頭と写真の上辺を揃える（上揃え）／右端ブリード維持 */
.concept { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem,5vw,6rem); align-items: start; padding-right: 0; overflow: hidden; }
.concept__text { align-self: start; }
.concept__heading { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3.75rem); line-height: 1.45; letter-spacing: .01em; margin-bottom: clamp(1.4rem,3vw,2.2rem); }
.concept__body { display: grid; gap: 1.4rem; font-size: var(--fs-body); color: var(--ink-soft); max-width: 34em; word-break: auto-phrase; line-break: strict; }
.concept__media { align-self: start; position: relative; aspect-ratio: 3 / 4; margin-block: 0; overflow: hidden; }
.concept__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }

/* =========================================================
   ③ Program
   ========================================================= */
.program__list { display: grid; gap: clamp(4rem,8vw,7rem); }
/* Concept と同じ contained な2分割：左カラム=写真、右カラム=テキスト(x678〜)。上辺を揃える */
.program__item { display: grid; align-items: start; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,7rem); }
.program__photo { aspect-ratio: 4/3; width: 100%; }   /* 左カラム内に収める（x678 を超えない） */
.program__text { align-self: start; }
.program__ja { font-family: var(--serif); font-size: clamp(1.4rem,2.6vw,2rem); font-weight: 400; }
.program__en { font-family: var(--latin); letter-spacing: .28em; font-size: .76rem; color: var(--gold); margin: .3rem 0 1.2rem; }
.program__desc { color: var(--ink-soft); font-size: var(--fs-body); max-width: none; word-break: auto-phrase; }
.program__meta { margin-top: 1rem; font-family: var(--sans); font-size: .82rem; letter-spacing: .05em; color: var(--gold-soft); }
.program__lead { max-width: 40em; margin: clamp(1.2rem,3vw,1.8rem) 0 clamp(2.6rem,6vw,4rem); color: rgba(243,239,233,.82); font-size: var(--fs-body); line-height: 1.95; word-break: auto-phrase; }
.program__note { margin-top: clamp(2.5rem,6vw,4rem); font-size: .88rem; letter-spacing: .03em; color: rgba(243,239,233,.6); word-break: auto-phrase; }

/* =========================================================
   ④ Price
   ========================================================= */
.price { text-align: left; }
.price__feature { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: clamp(2rem,4vw,3rem) 0; display: grid; justify-items: start; gap: .4rem; margin-bottom: clamp(2rem,4vw,3rem); }
.price__feature-label { font-family: var(--serif); font-size: clamp(1.2rem,2.4vw,1.7rem); }
.price__feature-num { font-family: var(--serif); font-size: clamp(3rem,9vw,6rem); line-height: 1; color: var(--navy); }
.price__feature-num small { font-size: .28em; margin-left: .3em; color: var(--ink-soft); }
.price__feature-note { color: var(--ink-soft); font-size: var(--fs-body); letter-spacing: .06em; }
/* オープン記念特典 */
.price__campaign { margin: clamp(1.4rem,3vw,2rem) 0 clamp(2.4rem,5vw,3.6rem); max-width: 680px; font-size: var(--fs-body); line-height: 1.95; color: var(--ink); border-left: 2px solid var(--gold); padding: .8rem 0 .8rem 1.2rem; }
.price__campaign-tag { font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .08em; color: var(--gold); margin-right: .7rem; }
.price__campaign s { color: var(--ink-soft); }
.price__campaign strong { font-family: var(--serif); font-weight: 500; font-size: 1.15em; }
/* 初回体験の流れ（4ステップ）：Price 内に内包 */
.price__flow { margin-bottom: clamp(2.4rem,5vw,3.6rem); }
.price__flow-head { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); margin-bottom: 1.5rem; letter-spacing: .04em; }
.price__flow-list { list-style: none; display: grid; gap: 1.15rem; max-width: 720px; }
.price__flow-list li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 1.1rem; row-gap: .35rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--hair); }
.price__flow-list li:last-child { border-bottom: none; padding-bottom: 0; }
.price__flow-no { grid-row: 1 / span 2; font-family: var(--latin); color: var(--gold); font-size: 1rem; letter-spacing: .08em; }
.price__flow-t { grid-column: 2; font-family: var(--serif); color: var(--ink); font-size: 1.04rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .7rem; }
.price__flow-t small { font-family: var(--sans); color: var(--ink-soft); font-size: .78rem; letter-spacing: .06em; }
.price__flow-d { grid-column: 2; color: var(--ink-soft); font-size: .92rem; line-height: 1.85; word-break: auto-phrase; }
.price__rows { display: grid; gap: 0; max-width: 560px; margin-bottom: clamp(2rem,4vw,3rem); }
.price__row { display: flex; justify-content: space-between; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px dotted var(--hair); }
.price__row-name { font-size: var(--fs-body); }
.price__row-val { font-family: var(--serif); font-size: 1.4rem; color: var(--navy); }
.price__row-val small { font-size: .55em; color: var(--ink-soft); margin-left: .15em; }

/* =========================================================
   ⑤ Profile
   ========================================================= */
/* Concept と同じ contained な2分割：左カラム=小さめの写真、右カラム=本文(x678〜)。上辺を揃える */
.profile__grid { display: grid; align-items: start; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,7rem); }
.profile__text { align-self: start; }
.profile__photo { aspect-ratio: 5/7; width: 100%; max-width: 400px; }  /* comme のトレーナー写真サイズに寄せて小さく */
.profile__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem,3.4vw,2.6rem); margin: .4rem 0 1.4rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.profile__name-en { font-family: var(--latin); font-size: .9rem; letter-spacing: .2em; color: var(--ink-soft); }
.profile__text p:not(.sec-label):not(.profile__name) { color: var(--ink-soft); font-size: var(--fs-body); margin-bottom: 1.2rem; max-width: none; word-break: auto-phrase; }

/* =========================================================
   ⑥ Voice
   ========================================================= */
.voice[data-hidden="true"] { display: none; }
.voice__list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); }
.voice__item { display: grid; gap: 1.2rem; }
.voice__photo { width: 88px; height: 88px; border-radius: 50%; }
.voice__item blockquote { font-family: var(--serif); font-size: clamp(1.05rem,1.6vw,1.25rem); line-height: 1.9; color: var(--ink); }
.voice__item figcaption { font-size: var(--fs-small); color: var(--ink-soft); letter-spacing: .1em; }

/* ===== Hero: grand-open の一言（緊急性） ===== */
.hero__open { font-family: var(--latin); letter-spacing: .14em; font-size: .82rem; color: var(--gold-soft); margin: .2rem 0 1.6rem; }

/* ===== 「こんな方へ」共感・悩み（差し色） ===== */
.needs__list { list-style: none; padding: 0; display: grid; gap: clamp(1.1rem, 2.6vw, 1.9rem); max-width: 900px; margin: 0 0 clamp(2.4rem, 5vw, 3.4rem); }
.needs__item { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.7; padding-left: 1.7rem; position: relative; }
.needs__item::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.needs__close { font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.9; color: var(--ink-soft); }

/* ===== Price: 予約CTA＋詳細の並び ===== */
.price__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ===== FAQ ===== */
.faq__list { display: grid; gap: 0; max-width: 780px; }
.faq__item { border-bottom: 1px solid var(--hair); padding: clamp(1.3rem, 3vw, 1.9rem) 0; }
.faq__item dt { font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--ink); margin-bottom: .65rem; padding-left: 1.5rem; position: relative; }
.faq__item dt::before { content: "Q"; position: absolute; left: 0; top: 0; color: var(--gold); font-family: var(--latin); font-size: .95em; }
.faq__item dd { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.95; padding-left: 1.5rem; max-width: 60ch; }

/* =========================================================
   ⑦ Access
   ========================================================= */
.access__hero { margin-bottom: clamp(2.5rem,5vw,4rem); }
.access__catch { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem,5vw,3.4rem); line-height: 1.3; }
.access__steps { white-space: nowrap; }
.access__num { color: var(--gold); font-size: 1.4em; }
.footsteps { display: flex; align-items: center; gap: clamp(.5rem,1.4vw,1.1rem); flex-wrap: wrap; margin-top: 1.6rem; min-height: 28px; }
.footstep { width: 16px; height: 22px; opacity: 0; transform: translateY(10px) scale(.5); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.footstep svg { width: 100%; height: 100%; fill: var(--sky); }
.footstep:nth-child(even) { transform: translateY(16px) scale(.5); }
.footstep.is-step { opacity: .9; transform: translateY(0) scale(1); }
.footstep.is-step:nth-child(even) { transform: translateY(8px) scale(1); }

.access__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,7rem); align-items: stretch; }
.access__info dl { display: grid; grid-template-columns: auto; gap: 0; }
.access__info dt { font-family: var(--latin); letter-spacing: .2em; font-size: .72rem; color: var(--gold); text-transform: uppercase; margin-top: 1.6rem; }
.access__info dt:first-child { margin-top: 0; }
.access__info dd { font-size: var(--fs-body); margin-top: .5rem; line-height: 1.9; }
.access__info .muted { color: var(--ink-soft); font-size: .9em; }
.access__map { min-height: 320px; border: 1px solid var(--hair); overflow: hidden; }
.access__map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(.3) contrast(.95); }

/* =========================================================
   ⑧ Footer
   ========================================================= */
.footer { position: relative; background: var(--navy-deep); color: var(--base); overflow: hidden; }
.footer__dawn { position: absolute; left: 0; bottom: 0; width: 100%; height: 55%; background: var(--dawn); opacity: .5; filter: blur(2px); }
.footer__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem,9vw,7rem) var(--pad-x) clamp(2rem,4vw,3rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: start; }
.footer__lead { font-family: var(--serif); font-size: clamp(1.4rem,2.6vw,2rem); line-height: 1.6; margin-bottom: 2rem; }
.footer__line { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.footer__qr { width: 138px; height: 138px; background: #fff; border-radius: 12px; padding: 11px; box-sizing: border-box; display: block; }
.footer__brand { justify-self: end; text-align: right; display: grid; justify-items: end; gap: .5rem; }
.footer__wordmark { font-family: var(--latin); letter-spacing: .34em; font-size: .9rem; padding-left: .34em; }
.footer__company { font-size: var(--fs-small); color: rgba(247,244,238,.66); letter-spacing: .1em; }
.footer__legal { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 1.6rem var(--pad-x) 2.4rem; border-top: 1px solid var(--hair-light); display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }
.footer__legal a { font-size: var(--fs-small); color: rgba(247,244,238,.7); letter-spacing: .06em; }
.footer__legal a[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.footer__legal a:hover { color: var(--gold-soft); }
.footer__copy { margin-left: auto; font-family: var(--latin); font-size: .7rem; letter-spacing: .14em; color: rgba(247,244,238,.55); }

/* =========================================================
   Price Modal
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 500; visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(20,34,60,.55); opacity: 0; transition: opacity .45s var(--ease); }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal__dialog {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-46%);
  width: min(640px, 92vw); max-height: 86vh; overflow-y: auto;
  background: var(--base-2); padding: clamp(1.8rem,4vw,3rem); border-radius: 3px;
  opacity: 0; transition: opacity .45s var(--ease), transform .55s var(--ease);
  box-shadow: 0 30px 80px rgba(20,34,60,.3);
}
.modal.is-open .modal__dialog { opacity: 1; transform: translate(-50%,-50%); }
.modal__close { position: absolute; top: 1rem; right: 1.1rem; width: 40px; height: 40px; border: none; background: none; font-size: 1.6rem; color: var(--ink-soft); cursor: pointer; line-height: 1; }
.modal__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem,3vw,2rem); margin: .2rem 0 1rem; }
.modal__note { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.8; margin-bottom: 1.6rem; }
.modal__block { margin-bottom: 1.8rem; }
.modal__block-head { font-family: var(--latin); letter-spacing: .18em; font-size: .76rem; color: var(--gold); margin-bottom: .7rem; text-transform: uppercase; }
.modal__table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.modal__table th, .modal__table td { text-align: left; padding: .7rem .4rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.modal__table thead th { font-family: var(--latin); font-size: .72rem; letter-spacing: .1em; color: var(--ink-soft); font-weight: 400; }
.modal__table tbody th { font-weight: 400; white-space: nowrap; color: var(--ink); }
.modal__table td { font-family: var(--serif); }
.modal__list { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: .9rem; color: var(--ink-soft); }
.modal__exp { font-size: var(--fs-small); color: var(--ink-soft); margin-top: .7rem; line-height: 1.7; }
.modal__fine { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 1.2rem; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 880px) {
  .nav { position: fixed; inset: 0 0 0 auto; width: min(78vw,340px); flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.8rem; background: var(--navy-deep); padding: 0 2.4rem; transform: translateX(100%); transition: transform .55s var(--ease); }
  .nav.is-open { transform: translateX(0); }
  .nav a { color: var(--base) !important; font-size: 1rem; }
  .header.is-solid .nav a { color: var(--base) !important; }
  .nav-toggle { display: grid; gap: 6px; width: 34px; padding: 6px 0; background: none; border: none; cursor: pointer; z-index: 110; }
  .nav-toggle span { display: block; height: 1.5px; width: 28px; background: var(--base); transition: transform .4s var(--ease), opacity .3s; }
  .header.is-solid .nav-toggle span { background: var(--navy); }
  .nav-toggle[aria-expanded="true"] span { background: var(--base); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .concept,
  .program__item, .program__item--rev,
  .profile__grid,
  .voice__list,
  .access__grid,
  .footer__inner { grid-template-columns: 1fr; }
  /* モバイルは全幅ブリードを解除して通常の縦積みに */
  .program__item, .program__item--rev, .profile__grid { width: auto; margin-left: 0; padding-left: 0; padding-right: 0; gap: 1.6rem; }
  .program__item--rev .program__photo { order: 0; }
  /* Concept：モバイルは縦積み（テキスト上→写真下）、写真は通常ブロックに戻す */
  .concept { padding-right: var(--pad-x); gap: clamp(1.8rem,6vw,2.6rem); align-items: start; }
  .concept__media { margin-block: 0; min-height: 0; aspect-ratio: auto; }
  .concept__photo { position: static; width: 100%; height: auto; aspect-ratio: 4/5; object-position: 50% 28%; }
  .profile__photo { max-width: 360px; }
  .footer__brand { justify-self: start; text-align: left; justify-items: start; margin-top: 1rem; }
  .footer__copy { margin-left: 0; width: 100%; }
}

@media (max-width: 520px) {
  .hero__catch { line-height: 1.4; }
  .voice__list { gap: 2.5rem; }
  .modal__dialog { top: auto; bottom: 0; left: 0; transform: translateY(100%); width: 100vw; max-height: 90vh; border-radius: 16px 16px 0 0; }
  .modal.is-open .modal__dialog { transform: translateY(0); }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__slide { transform: none; }
}