/* style.css — mizuasagi 全站样式（Neverland LP 設計稿）。
   :root の CSS 変数は layout/theme.liquid が settings から逐 token 出力（本文件は var() 消费のみ）。
   布局・装饰は全部 class（body 内 inline は信頼域の style（★塗り率 %）と外壳 backdrop のみ）。
   モバイル専用（設計稿 $preview 430×932）：@media は prefers-reduced-motion のみ、断点なし。

   設計稿からの移植規則（重要）：
   ・**絶対間隔は原値のまま**（段の padding、eyebrow の下 14px、見出しの下 22/26/10/9/20px、
     台帳行の padding 15/16/13/11/14px、B/A の gap 12px・格子の隙間 3px・caption の上 11px …）。
   ・**構図幅だけ 480/430 で換算**：设计稿の 358px の出血写真 → 403px。%（44% / 85%）は其のまま。
     页壳幅は全站規範の 480px（W16、--maxw token）。
   ・設計稿は全部 inline style で書かれており CSS 変数もクラス体系も無い。色は「店主自製の料金表から
     実測採取した 6 色、第 7 色を発明しない」制約付きなので、token も其の 6 色 + 派生に限り、
     罫線の 3 階調（.16 / .14 / .10）は --text の color-mix で導く（token を増やさない）。
   ・LINE 緑 #06C755 は R3 ブランド锁色（token 化しない・全页唯一の高饱和・予約入口だけ）。
   ・全站の圆角は --radius(2px) の一種類だけ（設計稿の芯）。 */

/* 字体栈は :root に置く（.nv-page ではなく）——.page-footer は页壳の外にあり、
   .nv-page 側に定義すると watermark 行だけ既定フォントに落ちる。
   layout の <style>:root は --font-* のみ出力、こちらは --stack-* のみ定義 → 属性が重ならず衝突しない。
   --stack-num は「Jost → 明朝」の順：後端の品名は「60分」の様に数字と日本語が 1 文字列なので分解できないが、
   このスタックなら 60 が Jost・分が明朝に落ち、コース名（全角のみ）は丸ごと明朝になる
   ＝ 設計稿が時間行（Jost）とコース名（明朝）で書き分けているのを 1 つのスタックで両立できる。
   R14-1 は「価格は明朝」だが、設計稿は所要時間・序号・価格を同一の数字軸（Jost）で組んでおり、
   価格だけ明朝にすると同じ行の中で軸が割れる。設計稿の軸を優先して譲った（審査で拾える様に明記）。 */
:root {
  --stack-heading: var(--font-heading, 'Shippori Mincho'), 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --stack-body: var(--font-body, 'Zen Kaku Gothic New'), 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  --stack-latin: var(--font-latin, 'Jost'), 'Helvetica Neue', Arial, sans-serif;
  --stack-num: var(--font-latin, 'Jost'), var(--font-heading, 'Shippori Mincho'), serif;
  --rule-strong: color-mix(in srgb, var(--text) 16%, transparent);
  --rule-mid: color-mix(in srgb, var(--text) 14%, transparent);
  --rule-weak: color-mix(in srgb, var(--text) 10%, transparent);
}

/* ============= 页壳（480px 居中縦長 LP 列）============= */
/* body の既定 margin（8px）を落とす —— 落とさないと页壳の上に 8px の白帯が出る（設計稿 helmet も body{margin:0}）。
   layout/theme.liquid の <body> は inline で background-color だけを持つので margin は此処で決める。
   letter-spacing:.02em は設計稿の全局字距（body 側に載っている）。 */
/* 底部固定条の為の逃げは **取らない**。条は「hero も 予約段の大按钮も視口外」の時だけ出るので、
   頁末（＝予約段の按钮が見えている位置）では必ず隐れている＝水印行に被らない。
   逃げを取ると水印行の下に用途の無い空白が残る（izz check の W18 が此れを見張る）。 */
body { margin: 0; }
/* 灯箱 trigger は <button>：<a href=原図> だと Googlebot が assets の画像 blob を網頁として抓取し GSC「未インデックス」に積む。UA 既定の枠・余白・灰背景・shrink-to-fit を消して旧 <a> と同じ箱にする。 */
[data-lb-trigger] { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; width: 100%; cursor: zoom-in; }
.nv-page {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
  font-family: var(--stack-body);
  font-weight: var(--font-body-weight, 400);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-break: strict;
  text-wrap: pretty;
}
/* overflow:hidden（上）は 3 箇所の負 margin 出血写真の受け皿 —— 外すと窄屏で横スクロールが出る。 */
.nv-page img { display: block; max-width: 100%; }
.nv-page a { color: var(--accent); text-decoration: none; }
.nv-page a:hover { color: var(--accent-deep); }

/* UA 既定 margin を潰すだけのリセット。:where() で特異度 0 に落とすのが必須 ——
   素の `.nv-page p{margin:0}`（0,1,1）は後続の単一クラス規則（0,1,0）より強く、
   .nv-heading / .nv-voice-stat / .nv-mgroup-lead 等の margin を全部黙って無効化する
   （設計稿の縦リズムが丸ごと消え、B/A の caption 位置や段の高さもズレる。tokiiro が実機で踏んだ）。 */
:where(.nv-page) :where(p, dl, dd, dt, figure, figcaption, blockquote, h1, h2, h3) { margin: 0; }
/* summary の既定マーカー（▶ / disclosure triangle）を消す（設計稿と同じ扱い）。 */
.nv-page summary { list-style: none; }
.nv-page summary::-webkit-details-marker { display: none; }

/* ============= 段の枠と共通部品 ============= */
/* 段の上下 padding は設計稿の実値（段ごとに違う）。左右は --gutter で統一。 */
.nv-section { padding: 58px var(--gutter); }
.nv-section--band { background: var(--band); }

/* eyebrow 三点セット：26×7 の薄荷ブロック + Jost の英字（設計稿 8 段共通、gap 9 / 下 14）。 */
.nv-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.nv-eyebrow-mark { flex: none; width: 26px; height: 7px; background: var(--mint); }
.nv-eyebrow-text {
  font-family: var(--stack-latin);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--accent);
}

/* 段見出し（R13 骨架要素）。設計稿の min(26px, 6.4vw) を其のまま採る（窄い端末で自動的に縮む）。
   copy slot は改行を \n で持つので pre-line（平台が転義するので <br> は書けない）。 */
.nv-heading {
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: min(26px, 6.4vw);
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: normal;
}
.nv-heading--concept { margin-bottom: 22px; }
.nv-heading--approach { margin-bottom: 26px; font-size: 26px; line-height: 1.6; }
.nv-heading--ba { margin-bottom: 10px; font-size: 26px; line-height: 1.6; }
.nv-heading--voice { margin-bottom: 9px; }
.nv-heading--menu { margin-bottom: 20px; }
.nv-heading--faq { margin-bottom: 20px; }
.nv-heading--info { margin-bottom: 20px; }
.nv-heading--reserve { margin-bottom: 14px; font-size: 20px; }

/* 設計稿の CONCEPT 本文は段落ごとに独立した <p>（間隔 18px）。concept.liquid は intro.detail を
   行ごとに <p> へ割るので、連続する段落の間だけ 18px を空ける（先頭には付けない）。 */
.nv-body { font-size: 14px; line-height: 1.9; white-space: pre-line; }
.nv-body + .nv-body { margin-top: 18px; }
.nv-note { font-size: 10.5px; line-height: 1.8; color: var(--text-2); white-space: pre-line; }
.nv-latin { font-family: var(--stack-latin); letter-spacing: 0.1em; }
/* R14-2：評分・電話・時刻等の数字は本文ゴシック + tnum（桁が揃う）。 */
.nv-tnum { font-variant-numeric: tabular-nums; }

/* 出血写真の共通部品。枠（幅・出血方向・高さ）は段ごとの修飾クラスが持つ。
   .nv-shots は 1 枚なら見た目そのまま、2 枚以上なら同じ高さのまま横に流れる strip になる。 */
.nv-figure { position: relative; }
.nv-shots {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nv-shots::-webkit-scrollbar { display: none; }
.nv-shot { flex: 0 0 100%; scroll-snap-align: start; display: block; overflow: hidden; }
.nv-shot-img { width: 100%; height: 100%; object-fit: cover; }
.nv-figcaption { font-size: 10px; letter-spacing: 0.02em; color: var(--text-2); }

/* ============= 01 HERO ============= */
.nv-hero { background: var(--page); }
/* 設計稿は 430 页壳で height:min(62svh, 460px) —— 高さの上限 460px は「430 幅に対する 460」＝
   縦横比 43:46 の意味であって、絶対値ではない。480 页壳で 460px のままだと首屏が設計稿より平たくなる
   （430:460=0.93 → 480:460=1.04 で構図が横長に化ける）。よって上限側は aspect-ratio で持つ：
   幅がいくつでも設計稿と同じ比になり、430 幅では 460px に一致する。
   svh 側（短い端末で首屏を食い潰さない為の天井）は max-height にそのまま残す
   —— iOS のツールバー伸縮で高さが跳ねない単位。非対応環境は前行の vh に落ちる。 */
.nv-hero-photo {
  position: relative;
  aspect-ratio: 43 / 46;
  max-height: 62vh;
  max-height: 62svh;
  overflow: hidden;
}
.nv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left 35%; }
/* 設計稿の rgba(18,28,28,.44→0) を --text の color-mix に置換（店主が --text を変えても遮罩が破綻しない）。 */
.nv-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--text) 52%, transparent) 0%,
    color-mix(in srgb, var(--text) 15%, transparent) 40%,
    transparent 66%);
}
/* 設計稿唯一の縦書き＝記憶点。他の要素は必ず此れより静かに保つ事。 */
.nv-hero-signature {
  position: absolute;
  left: 18px;
  top: 20px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  font-family: var(--stack-heading);
  font-weight: var(--font-heading-weight, 600);
  font-size: min(13.5px, 1.85svh);
  line-height: 1.45;
  letter-spacing: 0.1em;
  color: var(--cream);
  text-shadow: 0 1px 6px color-mix(in srgb, var(--text) 45%, transparent);
}
/* 設計稿に位は無いが、店主がロゴを上げた時に黙って捨てない為の位（右上・小さく）。 */
.nv-hero-logo { position: absolute; right: 16px; top: 16px; width: 84px; height: auto; }
.nv-hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 16px 12px 18px;
  background: var(--page);
}
.nv-hero-line { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.7; }
/* R12 の頭像。intro.avatar_url が空なら liquid 側で出ないので、未設定の店では設計稿と同じ絵になる。 */
.nv-hero-avatar { flex: none; width: 32px; height: 32px; border-radius: 999px; object-fit: cover; background: var(--convert-bg); }
.nv-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nv-tag {
  background: var(--page);
  border: 1px solid var(--rule-mid);
  border-radius: var(--radius);
  padding: 6px 9px;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ============= 02 CONCEPT ============= */
.nv-concept { padding: 28px var(--gutter) 58px; }
/* 右側 44% の出血写真（設計稿の比率をそのまま）。負 margin は页壳の overflow:hidden で裁つ。 */
.nv-figure--concept { width: calc(44% + var(--gutter)); margin: 24px calc(var(--gutter) * -1) 0 auto; }
.nv-figure--concept .nv-shot-img { height: auto; }
.nv-figure--concept .nv-figcaption { margin: 7px var(--gutter) 0 0; }
/* 店主名・肩書の署名行（設計稿に位は無い。打たれた時だけ本文の末尾に出る）。 */
.nv-sign { margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--text-2); }
.nv-sign-title { margin-left: 8px; font-size: 11px; }

/* ============= 03 施術の流れ（台帳行）============= */
.nv-approach { padding: 10px var(--gutter) 58px; }
/* 台帳行 = 罫線だけで刻む列（設計稿の「三等分グリッド禁止」の代替表現）。
   行の上下罫線は「先頭行だけ上罫、全行に下罫」＝隣接行で二重にならない。 */
.nv-ledger-row { display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--rule-mid); }
.nv-ledger-row:first-child { border-top: 1px solid var(--rule-mid); }
.nv-ledger-no { flex: none; width: 24px; font-family: var(--stack-latin); font-size: 14px; letter-spacing: 0.06em; color: var(--accent); }
.nv-ledger-no--sm { width: 20px; padding-top: 5px; font-size: 11px; }
.nv-ledger-body { flex: 1; min-width: 0; }
.nv-ledger-title { font-family: var(--stack-heading); font-weight: var(--font-heading-weight, 600); font-size: 16px; line-height: 1.6; }
.nv-ledger-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.9; color: var(--text-2); white-space: pre-line; }
/* 右出血写真：設計稿 358px を 480 页壳へ等比換算した 403px、高さ 300px の cover。 */
.nv-figure--approach { width: 403px; max-width: calc(100% + var(--gutter)); margin: 26px calc(var(--gutter) * -1) 22px auto; }
.nv-figure--approach .nv-shot { height: 300px; }
.nv-figure--approach .nv-shot-img { object-position: 50% 74%; }

/* ============= 04 BEFORE / AFTER ============= */
/* 段の左右 padding は 0（横スワイプが端まで流れる為の必須条件）。16px は見出し側の内層と
   track の padding-left が別々に持つ —— 段側に戻すと横滑が右で早く切れ、snap もズレる。 */
.nv-results { padding: 56px 0 58px; }
.nv-results-head { padding: 0 var(--gutter); }
.nv-ba-leadrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.nv-ba-lead { font-size: 11.5px; line-height: 1.8; color: var(--text-2); white-space: pre-line; }
.nv-ba-hint { flex: none; font-family: var(--stack-latin); font-size: 10px; letter-spacing: 0.18em; color: var(--accent); }
/* 横スワイプ案内は横スワイプの時だけ意味がある。だが R15-1 が「切替えるのは列表容器の修飾クラス 1 個だけ」を
   要求する（＝ liquid で toggle 分岐を増やせない）ので、:has() で列の状態を見て隠す。
   :has() 非対応の旧環境では此の規則ごと無効になり案内が常に出る＝安全側に落ちる。 */
.nv-results:not(:has(.nv-bas--slider)) .nv-ba-hint { display: none; }

/* ---- 高さの受け口（R15-2 / R15-3）----
   図ブロックの高さは「表示タイプごとに固定」＝同じタイプの組は必ず同じ高さ。
   組ごとに素材比から高さを導くと段が組ごとにガタつく（hakushi で実測、最大 14.5px の段差）。
   幅はレイアウトで確定しているので高さを固定し、素材比とのズレは cover が中央基準で吸収する（R15-2）。
   値の根拠 = 設計稿の格子比をそのまま 480 页壳に当てたもの（＝裁切量が設計稿と同一になる）：
     設計稿は 430 页壳・カード 85%・格子 gap 3 ・格子高 360 → 半格の箱比 = 181.25/360 = 0.5035。
     ・縦積み   段幅 480−16×2 = 448 → 半格 (448−3)/2 = 222.5 → 高 222.5/0.5035 ≒ 442
     ・横スワイプ カード 85%×480 = 408 → 半格 (408−3)/2 = 202.5 → 高 202.5/0.5035 ≒ 402
     ・ドラッグ比較 箱幅 62%×段幅 → 高 = 箱幅/0.5035（下記 --ba-hr）
   横スワイプでは縦積み構図の組も同じ高さに揃える（R15-3：横に流れるので下端の不揃いが直に見える）。
   別の値に振る時は script/ops/ba_height.rb（保留率＝箱比 vs 素材比のモデル）で最悪保留率を確かめてから。 */
.nv-bas { --ba-h: 442px; --ba-h-v: 606px; --ba-hr: 552px; }
.nv-bas--slider { --ba-h: 402px; --ba-h-v: 402px; --ba-hr: 502px; }

/* ---- 表示タイプ①（既定）縦積み ---- */
.nv-bas { display: flex; flex-direction: column; gap: 24px; padding: 0 var(--gutter); }
.nv-bas-tail { display: none; }

/* ---- 表示タイプ②（settings.ba_slider）横スワイプ卡带 ----
   既定（縦積み）の後に置く事が前提：.nv-bas--slider と .nv-bas は同特異度なので後勝ちで上書きする。
   組の中身は一切分岐させない（liquid 側の差は修飾クラス 1 個だけ = R15-1）。
   スクロールバー隠しは 2 系統とも要る（片方だけだと某端で数 px 食われて高さが変わる）。 */
.nv-bas--slider {
  flex-direction: row;
  gap: 12px;
  padding: 0 0 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nv-bas--slider::-webkit-scrollbar { display: none; }
/* カード幅 85% = 次カードの端が覗く（設計稿の値）。 */
.nv-bas--slider .nv-ba { flex: 0 0 85%; scroll-snap-align: start; }
/* 最後のカードを端まで送った時の右余白（設計稿の 4px スペーサ）。 */
.nv-bas--slider .nv-bas-tail { display: block; flex: 0 0 4px; }

/* ---- 組の中身（全タイプ共通）---- */
.nv-ba { display: flex; flex-direction: column; gap: 11px; }
.nv-ba-pair,
.nv-ba-split {
  position: relative;
  display: flex;
  gap: 3px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--band);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 10%, transparent);
}
.nv-ba--horizontal .nv-ba-pair,
.nv-ba--horizontal .nv-ba-split { flex-direction: row; height: var(--ba-h); }
.nv-ba--vertical .nv-ba-pair,
.nv-ba--vertical .nv-ba-split { flex-direction: column; height: var(--ba-h-v); }
/* 半格は親の固定高さを主軸方向に等分する：横並びなら幅を、縦積みなら高さを flex:1 1 0 で 2 等分し、
   交差軸は align-items:stretch が埋める。両軸が確定するので aspect-ratio は要らない（R15-4 の罠回避）。
   min-width/min-height:0 は flex アイテム既定の min-size:auto を解除する為（無いと縮まず溢れる）。
   灯箱の trigger＝<button>（UA 既定は inline-block）なので display:block を明示。 */
.nv-ba-slot,
.nv-ba-half {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.nv-ba-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 合成対比図（1 枚に 2 コマ）は <img> スプライトで幾何学的に半分ずつ出す。
   max-width:none は .nv-page img の max-width:100% を解除する為（解除しないと width:200% が潰れる）。 */
.nv-ba-half img { position: absolute; top: 0; left: 0; display: block; max-width: none; object-fit: cover; }
.nv-ba--horizontal .nv-ba-half img { width: 200%; height: 100%; }
.nv-ba--vertical .nv-ba-half img { width: 100%; height: 200%; }
.nv-ba--horizontal .nv-ba-half--after img { left: -100%; }
.nv-ba--vertical .nv-ba-half--after img { top: -100%; }
/* 施術前/施術後の角標（設計稿：左下・半透明の深色・Jost 10px）。両方同じ意匠。 */
.nv-ba-chip {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--text) 55%, transparent);
  font-family: var(--stack-latin);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--cream);
}
/* 組見出しは図（対）の**下**のキャプション（設計稿どおり。hakushi と同じ設計稿由来の例外）。 */
.nv-ba-label { font-size: 12px; line-height: 1.6; color: var(--text); }
.nv-ba-note { margin-top: 20px; padding: 0 var(--gutter); }
/* 矢印は設計稿に無い（BEFORE/AFTER の角標が方向を語る）。DOM には常に有るが、
   並置タイプでは隠し、ドラッグ比較タイプでだけ「分割線 + 掴み手」として立ち上がる
   —— こうすると liquid は 3 タイプで一字も変わらない（R15-1）。 */
.nv-ba-arrow { display: none; }

/* ---- 表示タイプ③（settings.ba_reveal）ドラッグ比較 ----
   2 枚を絶対配置で完全に重ね、後図（2 番目の <button>）を clip-path で --rev の位置まで削る。
   --rev を書くのは app.js（pointer で掴んで動かす）。DOM は並置タイプと逐字節同一。
   合成組（.nv-ba--dual を持たない）には当たらない ＝ 重ねようが無いので自動的に並置のまま落ちる。
   箱は段幅いっぱいにせず 62% に絞る：素材が縦構図（1:2 前後）なので全幅にすると箱が横長になり過ぎ、
   cover の裁切で人物の頭と足が両方消える。62% なら箱比が並置タイプと同じ 0.5035 に保てる。 */
.nv-bas--reveal .nv-ba--dual .nv-ba-pair {
  --rev: 50%;
  width: 62%;
  height: var(--ba-hr);
  margin-left: auto;
  margin-right: auto;
  gap: 0;
  cursor: ew-resize;
  /* 縦スクロールは奪わない・横のドラッグだけ自前で扱う。 */
  touch-action: pan-y;
}
.nv-bas--reveal .nv-ba--dual .nv-ba-slot { position: absolute; inset: 0; flex: none; }
/* 対の 2 番目の <button>（= 施術後）だけを削る。span.nv-ba-arrow を挟んでいるので nth-child ではなく nth-of-type。 */
.nv-bas--reveal .nv-ba--dual .nv-ba-slot:nth-of-type(2) { clip-path: inset(0 0 0 var(--rev)); }
/* 重なるので後図の角標は右下へ逃がす（左下だと分割線の左側に隠れて読めない）。 */
.nv-bas--reveal .nv-ba--dual .nv-ba-chip--after { left: auto; right: 8px; }
.nv-bas--reveal .nv-ba--dual .nv-ba-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rev);
  width: 2px;
  margin-left: -1px;
  z-index: 2;
  background: var(--cream);
  /* 掴み判定は親（.nv-ba-pair）が持つので、線自体はイベントを吸わない。 */
  pointer-events: none;
}
.nv-bas--reveal .nv-ba--dual .nv-ba-arrow::before {
  content: "‹ ›";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--accent);
  font-family: var(--stack-latin);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--text) 30%, transparent);
}

/* ============= 05 VOICE ============= */
.nv-voice { padding: 58px var(--gutter); }
.nv-voice-stat { margin-bottom: 22px; font-size: 12.5px; line-height: 1.9; color: var(--text-2); }
.nv-ledger--voice .nv-ledger-row { align-items: flex-start; padding: 16px 0; }
.nv-voice-text { font-family: var(--stack-heading); font-weight: 500; font-size: 15px; line-height: 1.9; }
.nv-voice-meta { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 11px; line-height: 1.7; color: var(--text-2); }
.nv-voice-bar { flex: none; width: 2px; height: 11px; background: var(--accent); }
.nv-voice-author { margin-left: 4px; }
.nv-voice-date { margin-left: auto; font-variant-numeric: tabular-nums; }
/* R4：金色は字面の星だけ・色は --star token。★ は二層（empty の上に fill を width% でクリップ）。
   塗り率だけは liquid の inline style（信頼域の計算値）。 */
.nv-voice-stars { margin-top: 6px; line-height: 1; }
.nv-stars-empty { position: relative; display: inline-block; font-size: 12px; letter-spacing: 0.1em; color: var(--rule-strong); }
.nv-stars-fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--star); }

/* ============= 06 MENU / PRICE ============= */
.nv-menu { padding: 58px var(--gutter) 62px; }
/* 段落級のお知らせ枠（設計稿の「初回限定」赤枠）。中身 = 主題包の copy slot（offer_*）。
   枠線・badge・割引額が --price の赤。 */
.nv-offer {
  margin-bottom: 30px;
  padding: 15px 15px 14px;
  border: 1px solid color-mix(in srgb, var(--price) 28%, transparent);
  border-radius: var(--radius);
  background: var(--page);
}
.nv-offer-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 9px;
  background: var(--price);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--cream);
}
/* 箇条行：品目（本文軸）+ 割引額（--price・Jost 17px）。単位（円OFF 等）は設計稿どおり
   本文ゴシック 13.5px に落とす —— 額と単位が別 slot なので設計稿と同じ二段組みができる。 */
.nv-offer-item { display: flex; align-items: baseline; gap: 7px; font-size: 13.5px; line-height: 1.8; }
.nv-offer-item + .nv-offer-item { margin-top: 6px; }
.nv-offer-em { font-family: var(--stack-latin); font-weight: 600; font-size: 17px; letter-spacing: 0.01em; color: var(--price); }
.nv-offer-unit { font-family: var(--stack-body); font-weight: 500; font-size: 13.5px; letter-spacing: 0.02em; }
.nv-offer-sub { margin: 5px 0 0 14px; font-size: 11px; line-height: 1.8; color: var(--text-2); }
.nv-offer-foot { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--rule-weak); font-size: 10.5px; line-height: 1.8; color: var(--text-2); white-space: pre-line; }
/* 英字カテゴリ（設計稿 BODY / FACIAL〈60 MIN〉）。段の eyebrow と同じ Jost 10.5px / .24em だが
   薄荷の色块は付けない —— 色块付きは「段の頭」の記号で、段の途中で再出すると段が割れて見える。
   先頭の括りだけ上余白 0（前は初回限定枠の下 30px が効いている）。括りの下が 1 組だけの時は
   組見出しを描かない分、下余白を 16 → 10 に詰めて括り級リードを受ける（設計稿と同値）。 */
.nv-mcat { margin: 34px 0 16px; font-family: var(--stack-latin); font-size: 10.5px; letter-spacing: 0.24em; color: var(--accent); }
.nv-mcat--first { margin-top: 0; }
.nv-mcat--solo { margin-bottom: 10px; }
.nv-mgroup { margin-bottom: 26px; }
.nv-mgroup:last-child { margin-bottom: 0; }
.nv-mgroup-title { font-family: var(--stack-heading); font-weight: var(--font-heading-weight, 600); font-size: 17px; line-height: 1.6; }
.nv-mgroup-lead { margin: 4px 0 10px; font-size: 11.5px; line-height: 1.8; color: var(--text-2); white-space: pre-line; }
/* 括り級リード（英字ラベルが見出しを兼ねる 1 組だけの括り）。設計稿 340px の折返し幅は
   頁壳 430→480 の比で約 380px。此処は頁の幅ではなく**行長（measure）**の上限なので px ではなく
   em で持つ：28em × 13.5px ≒ 378px。字号を触っても行長の見え方が崩れない、という本来の意味に加え、
   W16（頁壳幅 480 の闸）が px の 380〜600 を全部拾う事も避けられる —— 此れは頁壳ではない。 */
.nv-mgroup-lead--cat { margin: 0 0 22px; max-width: 28em; font-size: 13.5px; line-height: 1.9; color: var(--text); }
.nv-mgroup-note { margin-top: 10px; font-size: 10.5px; line-height: 1.8; color: var(--text-2); white-space: pre-line; }
/* R5：項目名 + 右寄せ ¥ 数字。行は罫線だけ（按钮形態にしない・横線で金額を代替しない）。 */
.nv-price-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--rule-weak); }
.nv-price-row:first-child { border-top: 1px solid var(--rule-strong); }
.nv-price-row:last-child { border-bottom: 1px solid var(--rule-strong); }
.nv-price-thumb { flex: none; width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius); }
.nv-price-main { flex: 1; min-width: 0; }
/* 並びは order で作る（DOM 順は 品名 → 金額 → 説明）。理由は menu.liquid の注釈：
   説明が長い時に「説明だけ」を 2 行目へ落とし、金額を 1 行目の右端に残す為。 */
.nv-price-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; }
/* min-width 52px = 設計稿の時間欄の幅。コース名の様な長い品名は其れ以上に伸び、必要なら折り返す。 */
.nv-price-label { order: 1; flex: 0 1 auto; min-width: 52px; font-family: var(--stack-num); font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
/* 短い説明（設計稿の「例）整体30＋オイル30」）は品名と金額の間に inline。 */
.nv-price-ex { order: 2; flex: 0 1 auto; min-width: 0; font-size: 11px; line-height: 1.8; color: var(--text-2); white-space: pre-line; }
/* 長い説明は行の下に全幅で落とす（設計稿のフェイシャル卡片）。order を金額より後ろにするのが要。 */
.nv-price-ex--block { order: 4; flex: 1 0 100%; }
/* margin-left:auto = 説明が無い行・落ちた行でも金額が必ず右端に着く（space-between に頼らない）。 */
.nv-price-nums { order: 3; flex: none; margin-left: auto; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.nv-price-was { font-family: var(--stack-num); font-size: 13px; color: var(--text-2); }
.nv-price-now { font-family: var(--stack-num); font-weight: inherit; font-size: 19px; color: var(--price); font-variant-numeric: tabular-nums; }
.nv-price-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius);
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--accent);
}

/* ============= 07 Q&A ============= */
.nv-faq { padding: 58px var(--gutter) 56px; }
/* R8：安静な手风琴行。R9：頁内展開なので ± アイコン（外链アイコンは使わない）。 */
.nv-qa { border-bottom: 1px solid var(--rule-weak); }
.nv-qa:first-of-type { border-top: 1px solid var(--rule-mid); }
.nv-qa:last-of-type { border-bottom: 1px solid var(--rule-mid); }
.nv-qa-q { display: flex; align-items: flex-start; gap: 12px; padding: 15px 0; cursor: pointer; }
.nv-qa-no { flex: none; width: 20px; padding-top: 2px; font-family: var(--stack-latin); font-size: 11px; color: var(--accent); }
.nv-qa-text { flex: 1; font-size: 13.5px; line-height: 1.8; }
.nv-qa-icon { position: relative; flex: none; width: 12px; height: 12px; margin-top: 6px; }
.nv-qa-h { position: absolute; left: 0; top: 5.5px; width: 12px; height: 1.2px; background: var(--accent); }
.nv-qa-v { position: absolute; left: 5.4px; top: 0; width: 1.2px; height: 12px; background: var(--accent); transition: opacity 0.18s; }
.nv-qa[open] .nv-qa-v { opacity: 0; }
.nv-qa-a { padding: 0 24px 16px 32px; font-size: 12.5px; line-height: 1.9; color: var(--text-2); white-space: pre-line; }

/* ============= 08 INFORMATION ============= */
.nv-info { padding: 20px var(--gutter) 58px; }
/* 左出血写真：設計稿 358×222 を 480 页壳へ等比換算した 403×250。 */
.nv-figure--info { width: 403px; max-width: calc(100% + var(--gutter)); margin: 0 0 26px calc(var(--gutter) * -1); }
.nv-figure--info .nv-shot { height: 250px; }
.nv-figure--info .nv-shot-img { object-position: 50% 58%; }
.nv-info-row { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--rule-weak); }
.nv-info-row:first-child { border-top: 1px solid var(--rule-mid); }
.nv-info-row:last-child { border-bottom: 1px solid var(--rule-mid); }
.nv-info-key { flex: none; width: 74px; font-size: 11px; line-height: 1.8; color: var(--text-2); }
.nv-info-val { flex: 1; font-size: 13px; line-height: 1.8; color: var(--text); white-space: pre-line; }
/* 地図（設計稿に位は無いが、店主が地図リンクを貼った時だけ出る）。R3：緑は使わず --accent。 */
.nv-map { margin-top: 20px; }
/* 静的地図は平台の Static Maps 経由なので、鍵の referrer 制限・配額切れ・住所の解析失敗で
   **画像だけが落ちる**事が有る（頁は正常に出るので気付きにくい）。地色を敷いて崩れを目立たせず、
   実際に落ちた時は app.js が img を外して経路リンクだけ残す（壊れた画像アイコンを出さない）。 */
.nv-map-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius); background: var(--band); }
.nv-map-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--accent); }
.nv-ext { font-size: 11px; }

/* ============= 09 RESERVE ============= */
/* 設計稿の padding-bottom は 150px（段内に按钮が無く、底部固定条の分だけ空けていた値）。
   本主題は段内に页尾大按钮を置き、其の間は固定条が隐れる（app.js の [data-main-cta] observer）ので、
   150px は用途の無い空白になる → 62px に詰める。 */
.nv-reserve { padding: 52px var(--gutter) 62px; }
/* word-break:keep-all = 設計稿の <br> と同じ位置（句点の後）で折り返させる。typed のリード文には
   改行が入らないので、素のままだと「公式LINEから。空」の様に節の途中で切れる。 */
.nv-reserve-lead {
  max-width: 330px;
  font-family: var(--stack-heading);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: normal;
}
/* 页尾大按钮（R11 の 2 つ目の渲染位）。姿は底部固定条と同一 —— 全幅ブロック・2 行・--radius(2px)。
   条と同じ語彙にする事で「按钮の形」を 1 種類に保つ（設計稿の芯）。LINE 緑は R3 の锁色。 */
.nv-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 26px;
  padding: 15px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s ease;
}
.nv-cta-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: 0.14em; }
.nv-cta-icon { flex: none; display: block; }
.nv-cta-note { font-size: 10px; letter-spacing: 0.06em; }
/* 文字色は **必ず .nv-page を前置する** —— 素の `.nv-cta--line`(0,1,0) は上の
   `.nv-page a { color: var(--accent) }`(0,1,1) に負け、緑地の上に深青緑の字が乗って読めなくなる
   （実機で踩坑）。按钮は地色が濃いので副行も不透明度を下げない（可読性優先）。 */
.nv-page .nv-cta--line, .nv-page .nv-cta--line:hover { color: #FFFFFF; }
.nv-cta--line { background: #06C755; }
.nv-cta--line:hover { background: #05B44C; }
.nv-page .nv-cta--booking, .nv-page .nv-cta--booking:hover { color: var(--convert-fg); }
.nv-cta--booking { background: var(--convert-bg); }
.nv-cta--booking:hover { opacity: 0.92; }
@media (prefers-reduced-motion: reduce) { .nv-cta { transition: none; } }

/* ============= その他リンク（R2 安静行）============= */
.nv-links { padding: 26px var(--gutter) 40px; display: flex; flex-direction: column; gap: 8px; }
/* R2：浅底填充カード（tone-on-tone）。hairline 枠は持たない —— 分層は明度差だけで作る。 */
.nv-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--radius);
  background: var(--band);
  color: var(--text);
}
.nv-link:hover { color: var(--text); }
.nv-link-label { flex: 1; min-width: 0; font-size: 13px; line-height: 1.6; }
.nv-link-mark { flex: none; width: 15px; height: 15px; color: var(--accent); }
.nv-link-mark svg { width: 100%; height: 100%; display: block; }

/* ============= 灯箱（B/A と画廊で共用）=============
   类名は assets/app.js が硬編码しているので対で改名禁止。
   position:fixed なので DOM 上の位置に関係なく画面全体を覆う（grid セルも flex 行も食わない）。 */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gallery-lightbox.is-open { opacity: 1; }
.gallery-lightbox[hidden] { display: none; }
.gallery-lb-backdrop { position: absolute; inset: 0; background-color: color-mix(in srgb, var(--text) 90%, transparent); }
.gallery-lb-img {
  position: relative;
  max-width: 94vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.gallery-lb-close,
.gallery-lb-prev,
.gallery-lb-next {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--cream) 22%, transparent);
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.gallery-lb-close:hover,
.gallery-lb-prev:hover,
.gallery-lb-next:hover { background-color: color-mix(in srgb, var(--cream) 40%, transparent); }
.gallery-lb-close { top: 0.75rem; right: 1rem; }
.gallery-lb-prev { top: 50%; left: 0.75rem; transform: translateY(-50%); }
.gallery-lb-next { top: 50%; right: 0.75rem; transform: translateY(-50%); }
.gallery-lightbox--single .gallery-lb-prev,
.gallery-lightbox--single .gallery-lb-next { display: none; }

/* ============= 水印页脚（页壳の外）=============
   W16：页壳 / 本行 / 固定条内栏 は同じ --maxw を引く（三者同幅）。 */
/* box-sizing:border-box を明示する —— 既定の content-box だと padding の 2×16px が max-width の外に
   足され、幅が 512px になって页壳（480px）より広い白帯が页尾にはみ出す（幅広い視口で目視できる）。 */
.page-footer { box-sizing: border-box; max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter); background: var(--page); }
.page-footer-text { font-family: var(--stack-latin); font-size: 10.5px; letter-spacing: 0.14em; color: var(--text-2); text-align: center; }
.page-footer-link { color: var(--accent); }

/* ============= スクロール淡入 =============
   .nv-fade-ready は app.js が <html> に付ける —— JS 無し / IO 非対応 / reduced-motion では
   付かないので、初期状態（opacity:0）自体が存在しない＝内容が消えたまま残る事故が起きない。 */
.nv-fade-ready [data-fade] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.72s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nv-fade-ready [data-fade].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nv-fade-ready [data-fade] { opacity: 1; transform: none; transition: none; }
  .gallery-lightbox { transition: none; }
  .nv-qa-v { transition: none; }
}