/* =====================================================================
   NOAH 仕上げ 2026-11-05（デザイン担当）
   直すのは2か所だけ：①セクションごとの余白 ②縦書きのスクロール演出の置き場所
   元に戻すとき：index.html の <link …polish-2026-11-05.css> と
                 <script src="polish-2026-11-05.js"> の2行を消すだけ。
   文章・写真・色・フォント・HERO・リング・メニュー・プランボタンは触らない。
   ===================================================================== */

/* ---------- 余白の段階（6段） ---------- */
:root{
  --noah-space-1: 8px;   /* ごく近い（ラベルと文字など）。今回は使わず、段階として残す */
  --noah-space-2: 16px;  /* 近い */
  --noah-space-3: 24px;  /* 見出しの下の一覧・短い説明のあと */
  --noah-space-4: 40px;  /* 見出し→中身／セクションの中のまとまりどうし */
  --noah-space-5: 64px;  /* セクションの中の小さな章（プランの種類）／縦書きの上下 */
  --noah-space-6: 96px;  /* セクションとセクションの間 */
  --noah-vt-pad: 24px;   /* 縦書きの舞台の上下の余白（見出し→縦書き＝40+24＝64px） */
}
@media (min-width:768px){
  :root{ --noah-space-6: 120px; }
}

/* ---------- ① セクションの間：どこでも同じ ---------- */
/* 元：.blk は 74px だが、.plans/.flow/.cta だけ 0px に打ち消されていた */
.blk,
.plans.blk, .flow.blk, .cta.blk{ margin-top: var(--noah-space-6); }
.blk:first-child{ margin-top: 0; }
/* 最後のセクション→フッター：元は 56+74＝130px。ほかと同じ間に */
.page{ padding-bottom: 0; }
footer{ margin-top: var(--noah-space-6); }
.scrub-sec{ padding-top: 0; }

/* ---------- ② 見出し→中身：どこでも同じ ---------- */
/* 元：34px（ABOUT だけ 20px） */
.sec-head,
#about .sec-head{ margin-bottom: var(--noah-space-4); }

/* ---------- ③ セクションの中のまとまり ---------- */
/* 元：18・20・22・26・28・42・44px がまざっていた */
.about-chips{ margin-top: var(--noah-space-3); }            /* 18 → 24 */
.about-photo{ margin-top: var(--noah-space-4); }            /* 26 → 40 */
.msg-sign{ margin-top: var(--noah-space-4); }               /* 26 → 40 */
.gr-after{ margin-top: var(--noah-space-4); }               /* 44 → 40 */
.guide-intro{ margin-bottom: var(--noah-space-3); }         /* 18 → 24 */
.gd-rest{ margin-top: var(--noah-space-4); }                /* 26 → 40 */
.plan-cat{ margin: var(--noah-space-5) 0 var(--noah-space-3); }  /* 42/20 → 64/24 */
.plan-foot-note{ margin-top: var(--noah-space-3); }         /* 18 → 24 */
.vtf-track + .plan-cat{ margin-top: 0; }                    /* 縦書きの下の 40+24 に任せる */

/* ---------- ④ 縦書きの上下：どこでも 64px ---------- */
/* 元：見出し→縦書きの文字が 54〜146px、舞台の高さがセクションごとに違った */
.vtf-track,
.vt-about-track,
.vt-on .vt-about-track{ margin-bottom: var(--noah-space-4); }
.vtf-cta{ margin-bottom: 0; }
.vtf-inflow,
.vtf-on .vtf-inflow{ margin-top: var(--noah-space-4); margin-bottom: var(--noah-space-4); }
.vtf-stage,
.vt-about-stage{ padding: var(--noah-vt-pad) 0; }

/* ---------- ⑤ 縦書きのスクロール演出（JS が html に .vtp-on を付けたときだけ） ---------- */
/* 舞台は「文字の高さ＋上下 24px」。画面の見えている所（ヘッダーの下〜下のボタンの上）の
   まん中で止まる。止まる長さ（--vtp-d）は文字数から JS が決める。 */
:root{
  --vtp-head: 78px;  /* 固定ヘッダーの下（元の top:78px と同じ） */
  --vtp-foot: 80px;  /* 画面下の「予約フォームへ／LINEで相談する」の帯 */
}
.vtp-on .vtf-stage,
.vtp-on .vt-about-stage{
  height: auto !important;   /* 元の 354／490px などの高さを外す（finish-refinements.css は id 付きで指定しているため） */
  top: var(--vtp-head) !important;
  top: max(var(--vtp-head), calc(var(--vtp-head) + (100vh - var(--vtp-head) - var(--vtp-foot) - var(--vtp-h, 0px)) / 2)) !important;
  top: max(var(--vtp-head), calc(var(--vtp-head) + (100svh - var(--vtp-head) - var(--vtp-foot) - var(--vtp-h, 0px)) / 2)) !important;
}
/* 文字の濃さ：薄い墨（下書き）→ 読む順に濃く。値は JS が 1文字ずつ --vo に入れる */
.vtp-on .vtf-box .vch,
.vtp-on .vt-about .vch{
  opacity: var(--vo, 1) !important;
  filter: none !important;
}

/* 動きを控えめにする設定：演出は止め、全文を最初から濃く（JS も動かない） */
@media (prefers-reduced-motion: reduce){
  .vtp-on .vtf-box .vch,
  .vtp-on .vt-about .vch{ opacity: 1 !important; }
}