/* Hallmark · macrostructure: Split Studio · theme: custom (ant-nest network, navy on white, formal trust) · genre: modern-minimal · nav: N1b · footer: Ft2 · axes: light / japanese-mincho (classical-serif) / cool-navy */

/* ============================================================
   ブレークポイント一覧(このファイルで使うのはこの5つのみ)
   ------------------------------------------------------------
     min-width:  720px    … カードグリッド 2 列 /
                            下層ページの定型項目表(.spec--legal)を
                            「キー | 値」の 2 カラムへ(§10b)
     min-width:  768px    … セクション余白・ボタン内余白の拡大 /
                            フッターの 2 カラム化 /
                            下層ページ(.page)の上下余白の拡大
     min-width:  860px    … ヒーロー 2 カラム(ロゴ左・コピー右)/
                            料金 3 列 / ステップ 4 列 + 巣モチーフの横接続線 /
                            巣モチーフのフィールドを縦長窓(SP)→横長窓(PC)へ /
                            ステップの縦接続線(.nest--step-rail)を畳む
     min-width:  900px    … デスクトップヘッダー(ロゴ・ナビ・CTA 横並び)
                            ★ js/main.js の matchMedia('(min-width: 900px)')
                              と相互同期必須。片方だけ変更しないこと。
     max-width:  899.98px … 上記 900px の裏側(ナビ未強化時のヘッダー縦積み。
                            no-JS と main.js 読み込み失敗の両方が該当する)
     max-width:  719.98px … 最終 CTA の 2 ボタンを均等縮小(SP 横並び用)
   ------------------------------------------------------------
   tokens.css は index.html で style.css より前に読み込む
   (@import はレンダリングを直列化するため使わない)。
   ============================================================ */

/* ============================================================
   0. ローカル追加トークン
   tokens.css は編集禁止のため、tokens.css に存在しない値のみ
   ここで命名して定義する。
   ------------------------------------------------------------
   生値の扱い(実態に合わせた規約):
     - 色・字間・行間・余白・角丸は生値禁止。必ずトークン名で参照する。
     - 例外は 0b の @supports フォールバック(oklch 非対応向けの
       トークン再定義)と、この :root でのローカルトークン定義のみ。
     - 実測由来の寸法(ロゴ高 24/34px・トグルのバー 18×1px 等)と
       WCAG 要件値(タッチターゲット 44px / 大ボタン 56px)は
       スケールに載らない固有値のため px 直書きを許容する。
   ============================================================ */
:root {
  /* 白地前提のページであることを UA に伝える(スクロールバー・フォーム類) */
  color-scheme: light;

  /* 固定ヘッダーの高さ(アンカーのスクロールオフセットにも使用) */
  --header-h: 64px;

  /* アクセントの hover 状態(tokens.css に無いため追加) */
  --color-accent-hover: oklch(38% 0.085 272);

  /* ヒーロー見出しのサイズ。
     tokens.css の --text-display(上限 52px)は 1 カラム前提の傾きのため、
     860px 以上でコピーが右カラム(内容幅の約 6 割)に入るスプリット構成では
     行が収まらない。上限 52px は保ったまま vw の傾きだけを緩めた変種。 */
  --text-hero: clamp(1.5rem, 3.4vw + 0.25rem, 3.25rem);

  /* 巣モチーフ(装飾 SVG)の濃度。線・ノードとも currentColor で描き、
     濃度をここで一元管理する(DESIGN.md nest-motif 2026-08-10 改定)。
     白面・薄青帯の上では --color-ink-2、濃紺フッターの上では
     --color-accent-ink(白)。フィールドは面積が大きいため上限は
     白 0.12 / 帯 0.2 / 濃紺 0.18。実効値はさらにマスクで落ちる。 */
  /* 各値は「マスクが最大(=1)になっても、その面に載る最も弱い文字色が
     AA を保てる上限」を実測で求め、その内側に置いてある。
     こうしておくとマスクの形やレイアウトが変わっても破綻しない。
       白面 : 最弱は --color-ink-2 → 上限 0.386
       帯   : 最弱は --color-ink-2 → 上限 0.343
              (統括判断 2026-08-10: 帯上の .note を muted → ink-2 に1段上げ、
               フィールドの存在感を優先。上限 0.064 の制約を解消)
       濃紺 : 最弱は © の白 82% → 上限 0.275 */
  --nest-opacity-on-paper: 0.12;   /* 白面のフィールド(ヒーロー) */
  --nest-opacity-on-band: 0.16;    /* 薄青グレー帯(概要・料金) */
  --nest-opacity-steps: 0.2;       /* 入会ステップの接続線(機能的モチーフ) */
  --nest-opacity-footer: 0.18;     /* 濃紺フッターのフィールド */

  /* 入会ステップの赤ノードと、そこから伸びる赤の立ち上がり。
     格子(--nest-opacity-steps)とは独立に強く出す(ユーザー指示 2026-08-10:
     通路は薄く、各ステップ上の大ノードは赤で強く)。ノードは本文の外側
     (ステップカードの上)にあり、文字に重ならないため 1.0 近傍まで許容する。 */
  --nest-opacity-steps-red: 0.9;

  /* 赤ノード層(§3b ①-red)の濃度。格子とは独立に持つ:
     格子の 0.12〜0.18 に載せると赤が白に溶けて判別できなくなるため。
     ------------------------------------------------------------
     格子と違い「マスク最大でも AA を保てる濃度」は取れない
     (実測: 格子を下に敷いた状態で --color-ink-2 と 4.5:1 を保てる
      赤の上限は白面 0.315 / 帯 0.225。ここまで下げると赤が消える)。
     そこで次の3つを組み合わせて AA を担保する:
       ① 丸ノードは各窓の上端・下端に当たる 6 点だけを選び、
          セクションのパディング帯(本文の外側)に落とす
       ② ノードから延びる線(index.html の <linearGradient
          id="nest-red-fade-*">)は本文側へ入る前に急速に減衰させる
          (線形ではなく 0 → 0.3 で 1.0 → 0.32 に落とす曲線)
       ③ 層全体の濃度をこの値で抑える
     320〜1600px の 23 幅で、赤(丸+線)が文字要素の矩形に重なる
     すべての点について合成後のコントラストを実測し、最悪値 4.74:1
     (480px・料金の "Price" ラベル下)= AA 4.5:1 クリアを確認済み。
     ノード配置・線の長さ・フェード曲線・この値のいずれかを変えたら
     この実測をやり直すこと。
     濃紺フッターでは使わない(層自体を <use> しない)。 */
  --nest-opacity-red: 0.55;

  /* 濃紺帯(footer-band)の上で © を一段落とすための不透明度。
     白 82% の合成でも濃紺地に対し 4.5:1 を上回ることを実測確認済み。 */
  --footer-copy-opacity: 0.82;

  /* Concept & Value の背景写真(青山の夜景テラス。ユーザー指示 2026-08-13)。
     原本: references/design/S__229032007.jpg(加工許可あり)。
     写真の上には --color-scrim(紺 45%)を敷き、見出しを白に反転する
     (.section--photo)。720px 以下は軽量版に差し替え。 */
  --concept-bg-image: url("../img/concept-aoyama-1920.jpg");

  /* カード見出しのアイコンの一辺(ユーザー指示 2026-08-18)。
     32px は見出し 22px と本文 17px の間で「見出しより一回り大きい印」に
     なる大きさ。SP の 2×2(1 列 158px)では 24px に落とす
     — 32px のままだとカード内の余白を食って本文の行数が増える。 */
  --card-icon-size: 32px;

  /* カードのドロップシャドウ(ユーザー指示 2026-08-18)。
     DESIGN.md は元々 box-shadow を禁止していたが、この指示により
     「カードに限り許容」へ規範を更新した(decisions.md 参照)。
     純黒ではなく ink の色相(272)を使い、白地から浮かせすぎない。
     近距離の 1px で輪郭を締め、遠距離の 12px で面を持ち上げる 2 段重ね。 */
  --shadow-card: 0 1px 2px oklch(27% 0.05 272 / 0.05), 0 4px 12px oklch(27% 0.05 272 / 0.07);

  /* SP(720px 未満)の 2×2 カード本文の行間。
     tokens.css の --leading-body(1.9)は 1 列・行長 45〜75ch の本文向けで、
     幅 128〜150px のカード(1 行 6〜7 字)に使うと行が離れて塊に見えない。
     見出し用の 1.5 では逆に詰まりすぎるため中間値を命名して持つ
     (ユーザー採択 2026-08-13「行間を 1.7 相当に」)。
     本文サイズが 14 → 17px に上がった後もこの値を維持する
     ——狭いカードで行数が増えるため、行間を締める理由はむしろ強まる。 */
  --leading-card-sp: 1.7;

  /* SP(720px 未満)の 2×2 カードの内側余白と列間。
     本文が 14 → 17px に上がった(2026-08-13 のサイズ統一)ぶん、
     320px では 1 行あたりの字数が足りず最長のカードが 4 行に割れる
     (実測: 内側 12px のとき 4 行 / 8px のとき 3 行)。一方で 600px 級では
     8px 固定だと文字が枠線に貼り付いて見える。
     ブレークポイントを増やさずに両立させるため、320px で --space-xs(8px)、
     720px で --space-lg(24px)へ線形に開く clamp を1つ命名して持つ
     (720px 以上は @media が --space-lg を直接指定するので連続する)。
     傾き 4vw と切片 -4.8px はこの 2 点(320→8 / 720→24)から求めた値で、
     スケールに載る量ではないためここでだけ生値で書く。 */
  --card-pad-sp: clamp(var(--space-xs), 4vw - 4.8px, var(--space-lg));

  /* SP(860px 未満)の入会ステップ接続線のレーン。
     スケールに載らない実測寸法(赤ノード径 14px = PC の .nest--steps の
     r=7 が .shell 内容幅 1000px のとき描かれる径と同値)。
       rail-w … カード列の左に空けるレーンの幅
       node-x … レーン内での赤ノード中心の x(svg の viewBox と同値)
       bend-x … レーン内での折れ点の x(svg の viewBox と同値)
     ★ この 4 値は index.html の .nest--step-rail の viewBox
       (0 0 32 100)と path の座標に一致させること。 */
  --steps-rail-w: 32px;
  --steps-node-x: 22px;
  --steps-bend-x: 8px;
  --steps-node-d: 14px;
  --steps-bend-d: 7px;
  /* 接続線の太さ。index.html の .nest--step-rail の stroke-width と同値
     (svg 側は vector-effect="non-scaling-stroke" で 2px に固定される)。 */
  --steps-line-w: 2px;
}

/* ------------------------------------------------------------
   0b. oklch 非対応ブラウザ向けフォールバック
   DESIGN.md「Colors > ブラウザフォールバック」が許容する
   唯一の生値記述。トークン名の再定義のみを行い、
   ここ以外で hex / rgb を書かないこと。
   値は tokens.css / 上記ローカルトークンの oklch を
   sRGB へ変換した同値(ガモット外は sRGB にクリップ)。
   ------------------------------------------------------------ */
@supports not (color: oklch(0% 0 0)) {
  :root {
    /* tokens.css のカラートークン */
    --color-paper: #ffffff;
    --color-paper-2: #f1f3f8;
    --color-paper-3: #e4e8ef;
    --color-ink: #1e253f;
    --color-ink-2: #434a5e;
    --color-rule: #d1d4db;
    --color-muted: #636976;
    --color-accent: #212a53;
    --color-accent-ink: #ffffff;
    --color-brand-red: #c52c26;
    --color-focus: #384ca2;
    --color-scrim: #1e253f73;
    --color-danger: #9b1f1b;
    --shadow-card: 0 1px 2px rgba(30, 37, 63, 0.05), 0 4px 12px rgba(30, 37, 63, 0.07);

    /* style.css のローカルカラートークン */
    --color-accent-hover: #333e6f;
  }
}

/* ============================================================
   1. リセット / ベース
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 保険としての横溢れ止め。body 側には置かない
     (body の overflow-x は overflow-y を auto に伝播させる) */
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
  /* WebKit / Blink が既定で出す半透明黒のタップフラッシュを止める。
     ブランド色でない灰色の矩形が丸ピルやリンクの形を無視して出るため
     (SP 体験監査の採択項目⑨)。消しっぱなしにすると押した手応えが
     無くなるので、代わりに下の各 :active でトークン色の状態変化を持たせる。 */
  -webkit-tap-highlight-color: transparent;
}

/* モバイルナビ展開中の背景スクロールロック(js/main.js が付与)。
   ★ クラスは <body> ではなく <html> に付ける。上の overflow-x: clip により
   html 側が overflow-y: auto のスクロールコンテナになっているため、
   body に overflow: hidden を置いてもビューポートのスクロールは止まらない
   (body の overflow がビューポートへ伝播するのは html が visible のときだけ)。
   position: fixed 方式は取らない — スクロール位置の保存・復元が要らず、
   解除時に位置が飛ぶ経路を作らないため。
   ★ 折り畳みパネルが存在する幅でだけ効かせる(fail-open)。
   js/main.js も matchMedia でロックを掛けない側に倒しているが、
   ロックが外れないと「ページ全体がスクロールできない」という到達不能状態に
   なるため、幅の条件を CSS 側にも二重に持たせる。
   ★ 899.98px は §5 のナビ未強化フォールバックと同じ 900px の裏側。 */
@media (max-width: 899.98px) {
  html.is-nav-locked {
    overflow: hidden;
  }
}

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  /* v2.1.3(2026-08-12): 「細い」の実体はサイズだったため(base 16→17px)、
     ウェイトはユーザー指示で 500 に戻す(DESIGN.md body-md と同期)。 */
  font-weight: 500;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  /* 和文の禁則:小書き仮名・長音符が行頭に来ないようにする */
  line-break: strict;
  word-break: normal;
  -webkit-font-smoothing: antialiased;
}

/* v2.1(2026-08-12)フォント明朝化のメモ:
   見出しは Shippori Mincho 700(headline-display / headline-lg)。
   20px 級の title-md 相当(.card__title / .price-block__title / .prose .lede)は
   DESIGN.md の指定どおり 600 に落とす — 明朝の 700 は 20px では字面が潰れる。
   読み込む weight は index.html の Google Fonts URL と一致させること。 */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  overflow-wrap: break-word;
  line-break: strict;
  /* 対応ブラウザでは文節単位で改行する(未対応ブラウザは宣言が無視される) */
  word-break: auto-phrase;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd,
dt {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   2. フォーカス / スキップリンク
   フォーカスリングの出現はアニメーションさせない(即時)。
   ------------------------------------------------------------
   リングは常に 3px のオフセットを取るため、紺のピル上でも
   リングの内外に接するのは白面(--color-paper / --color-paper-2)。
   --color-focus は白面に対して 7.7:1、薄青グレー帯に対して 7.0:1 で
   隣接色コントラスト 3:1 を満たす(ボタン個別の上書きは不要)。
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  transition: none;
}

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(calc(-100% - var(--space-xl)));
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. レイアウト土台
   深度は「白面 + outline の枠線」と「paper-2 の帯」で作る。
   box-shadow は使わない(DESIGN.md「Elevation & Depth」)。
   ============================================================ */
.shell {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.section {
  /* 巣モチーフのフィールド(§3b ①)の配置基準。z-index: -1 の SVG を
     セクションの背景より前・内容より後ろに閉じ込め、はみ出しを切る。 */
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-block: var(--space-2xl);
}

.section--paper {
  background-color: var(--color-paper);
}

.section--raised {
  background-color: var(--color-paper-2);
}

/* SP には軽量版(960px)を配信する */
@media (max-width: 720px) {
  :root {
    --concept-bg-image: url("../img/concept-aoyama-960.jpg");
  }
}

/* ---- 写真背景のダークバンド(Concept & Value) ----
   白カード・赤ドット付き英字ラベルはそのまま、写真+紺スクリムの上で
   見出しだけ白に反転する。読み込み中・印刷時は --color-accent の
   ベタが下地になり、白文字のコントラストが常に確保される。 */
.section--photo {
  background-color: var(--color-accent);
  background-image: var(--concept-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 写真の上の紺スクリム(--color-scrim = 紺 45%)。
   負の z-index は同一スタッキングコンテキスト内で「背景より上・
   内容より下」に入る(.section が isolation: isolate を持つ)。 */
.section--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-scrim);
}

.section--photo .section-label,
.section--photo .section-title__text {
  color: var(--color-accent-ink);
}

@media (min-width: 768px) {
  .shell {
    padding-inline: var(--space-xl);
  }

  .section {
    padding-block: var(--space-3xl);
  }
}

/* ---- セクション見出し(英字ラベル + 和文見出し) ---- */
.section-title {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.section-label {
  font-family: var(--font-display-en);
  font-size: var(--text-label-en);
  font-weight: 500;
  line-height: var(--leading-label-en);
  letter-spacing: var(--tracking-label-en);
  text-transform: uppercase;
  color: var(--color-ink-2);
}

/* ロゴ中央の「赤い点」の引用(DESIGN.md brand-red 差し色規約②)。
   各セクションラベルの先頭に小さな赤ノードを置く。 */
.section-label::before {
  content: "";
  display: inline-block;
  width: var(--space-xs);
  height: var(--space-xs);
  margin-right: var(--space-xs);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-red);
  vertical-align: 0.05em;
}

.section-title__text {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

@media (min-width: 768px) {
  .section-title {
    margin-bottom: var(--space-2xl);
  }
}

/* ---- 本文ブロック(行長 45〜75ch) ---- */
.prose {
  display: grid;
  gap: var(--space-lg);
  max-width: 62ch;
  color: var(--color-ink-2);
}

.prose .lede {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  /* title-md(DESIGN.md typography.title-md = 600) */
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.note {
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-muted);
}

/* 薄青帯の上ではフィールド(--nest-opacity-on-band)を効かせるため
   注記を1段濃くする(muted のままだと帯フィールドの上限が 0.064 になる)。
   階層はフォントサイズ(--text-sm)で維持される。 */
.section--raised .note {
  color: var(--color-ink-2);
}

/* ============================================================
   3b. 巣モチーフ(アリの巣ネットワーク)
   DESIGN.md「Components > nest-motif」(2026-08-10 改定)。
   隅への「スタンプ配置」は禁止。ページに元から流れている「脈」に
   見せるため、**セクション全体に広がる薄い面(フィールド)**として敷く:
     ① フィールド … ヒーロー / 概要(帯)/ 料金(帯)/ フッター(濃紺)。
        母体の格子は index.html の <defs id="nest-field"> に1組だけ置き、
        各セクションは viewBox で縦に連続した窓を切り出して <use> する。
        白セクション(Concept & Value / 会員特典)は敢えて敷かず「呼吸」を作る。
     ② 入会ステップの接続線 … 機能的モチーフとして継続。
   すべて aria-hidden。線・ノードは currentColor で描き、
   色は --color-ink-2(濃紺面では --color-accent-ink)、
   濃度はローカルトークンで一元管理する。
   ============================================================ */
.nest {
  color: var(--color-ink-2);
  pointer-events: none;
}

/* ---- ① ネットワーク・フィールド(面として敷く脈) ----
   母体の格子は index.html の <defs id="nest-field"> に一度だけ置き、
   各セクションは viewBox で縦に連続した窓を切り出して <use> する。
   ここでは「面いっぱいに敷く」ことと「中心へ向けて減衰させる」ことだけを担う。 */
.nest-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.nest-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  /* サイズで逃げるのではなくマスクで減衰させる。
     中心(= 本文・見出し・カードが載る領域)は完全に透明、
     そこから外周へ向かってなだらかに現れ、四隅で最大になる。
     楕円半径 70%/62% と 45% の平坦部は、マスク値 0.5 の等高線が
     「上下端から約 5%」の位置に来るように選んである。本文はセクションの
     パディング(64/96px)より内側にしか来ないため、テキスト直下の
     実効濃度は常に半分以下(帯なら 0.06 未満)に収まる。
     色は transparent / black のみ(生値ではない)。 */
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 0%, transparent 45%, black 100%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 0%, transparent 45%, black 100%);
}

/* ---- SP 用の窓(縦長)/ PC 用の窓(横長)の差し替え ----
   preserveAspectRatio="slice" は「窓と要素のアスペクト比の差」だけ拡大する。
   SP ではセクションが縦長(375px 幅に対し高さ 344〜940px)になるため、
   横長の PC 窓(1600×300〜460)を敷くと縦方向に 2.3〜4.7 倍へ拡大され、
     - 実効線幅が 2.3〜4.7px とセクションごとにばらつく
     - 格子の横方向は 10〜20% しか映らない(料金の窓はノード 0 個)
   という状態になっていた(SP 体験監査 2026-08-13 の実測)。
   そこで各セクションの SP での実表示アスペクト比に合わせた縦長の窓を
   別に持ち、860px で入れ替える。
   ------------------------------------------------------------
   ★ SP 窓の座標(index.html の .nest-field--sp の viewBox)
     幅はすべて 350。430px 幅では窓の幅で拡大率が決まるので
     (430/350 = 1.23)全セクションが同じ 2.46px に揃い、320/375px では
     セクション高で決まるが、高さを「そのセクションの 320/375/430px での
     実測高」から逆算してあるので拡大率は 1.03〜1.23 に収まる。
       ヒーロー   x1115 y-20  350×500
       概要       x1115 y345  350×445
       料金       x1210 y400  350×795
       FAQ        x1250 y655  350×715
       フッター   x1250 y1090 350×295
     窓の上端(-20→345→400→655→1090)と中心 y は単調に下り、隣り合う窓は
     必ず重なる(脈の連続性)。x 中心は 1290→1290→1385→1425→1425 と
     ゆるく右へ流れる。格子の右端側に寄せてあるのは、この帯だけが
     5 段の主脈すべてと交差し、どの窓にもノードが 2 個以上入るため。
   ★ 実測(320/375/430px、実効線幅 px / 窓内ノード数 / マスク後も見えるノード数)
       ヒーロー 2.12,2.26,2.46 / 3,3,3 / 3,3,3
       概要     2.07,2.14,2.46 / 3,2,2 / 3,2,2
       料金     2.36,2.23,2.46 / 4,4,4 / 4,4,4
       FAQ      2.37,2.15,2.46 / 4,4,4 / 3,3,3
       フッター 2.33,2.33,2.46 / 2,2,2 / 2,2,2
     窓を動かしたらこの表を取り直すこと。
   ★ 430〜859px の間は縦長窓のまま横へ拡大されるので線は太くなる
     (実測 500px で 2.9px / 720px で 4.1px / 859px で 4.9px)。
     PC 窓のままだと同じ帯で 1.8〜5.1px とセクションごとにばらつくため
     (859px 実測: ヒーロー 2.8 / 概要 2.4 / 料金 5.1 / FAQ 4.4 /
      フッター 1.8)、太さの均一性と SP との一貫性を優先して 860px で
     切り替えている。この帯を最適化するなら 3 段目の窓を足すことになるが、
     セクションあたりの svg が 3 個になるので今は取っていない。 */
.nest-field--sp {
  display: block;
}

.nest-field--pc {
  display: none;
}

@media (min-width: 860px) {
  .nest-field--sp {
    display: none;
  }

  .nest-field--pc {
    display: block;
  }
}

/* FAQ だけは Q&A がセクション幅いっぱいに並ぶため、四隅残しの
   楕円マスクでは端の網が文字に掛かる(ユーザー指摘 2026-08-12)。
   上下のパディング帯にだけ網を出す縦マスクへ切り替える —
   テキスト領域(12〜88%)は完全透明、脈の連続性は上下の帯が保つ。 */
#faq .nest-field {
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 12%, transparent 88%, black 100%);
  mask-image: linear-gradient(180deg, black 0%, transparent 12%, transparent 88%, black 100%);
}

/* 濃度は svg ではなく層ごとに持つ。svg 側に置くと赤ノードまで
   格子の濃度(0.12〜0.18)で薄まり、白地に溶けて判別できなくなる。
   マスク(上の -field)は svg に掛けたままなので、赤も中心部では
   格子と同じだけ減衰する(本文の可読性が常に優先される)。 */
/* 既定は白面の濃度。セクション種別のセレクタ(.hero 等)を条件にすると、
   新しい面に <use> を足したときに opacity 指定が漏れて格子が原色の
   ink-2 で出る(= 本文の可読性が落ちる)。既定を持たせて fail-open にし、
   面ごとの上書きだけを下で行う。 */
.nest__lattice {
  opacity: var(--nest-opacity-on-paper);
}

.section--raised .nest__lattice {
  opacity: var(--nest-opacity-on-band);
}

/* ロゴ中央の「赤い点」の引用(DESIGN.md brand-red 差し色規約④)。
   母体格子の既存ノード 6 点だけを赤で置き直す層
   (実体は index.html の <g id="nest-nodes-red">)。 */
.nest__red {
  color: var(--color-brand-red);
  opacity: var(--nest-opacity-red);
}

/* 赤ノードから中点へ向かって消えるグラデーションの色。
   <stop> は通常の DOM 要素なので CSS で指定でき、
   ここでもトークン名だけを参照する(生値は書かない)。
   両端とも同じ色で、index.html 側の stop-opacity 1 → 0 だけで消す。 */
.nest-red-stop {
  stop-color: var(--color-brand-red);
}

/* ---- ② 入会ステップの接続線(4 列表示のときだけ意味を持つ) ----
   opacity は svg ではなく層別に持つ: 通路(線+小ノード)は薄く、
   各ステップ直上の大ノードは赤で強く(ユーザー指示 2026-08-10)。 */
.nest--steps {
  display: none;
  width: 100%;
  height: auto;
  margin-bottom: var(--space-xs);
}

.nest--steps .steps__lattice {
  opacity: var(--nest-opacity-steps);
}

.nest--steps .steps__nodes {
  color: var(--color-brand-red);
  opacity: var(--nest-opacity-steps-red);
}

/* 赤丸から延びる線(半分でグレーへ溶けるオーバーレイ)。
   色は stop 側(.nest-red-stop = var(--color-brand-red))が持つ。
   ノードと同じ濃度で立ち上がらせる(接点で段差を作らない)。 */
.nest--steps .steps__fade {
  opacity: var(--nest-opacity-steps-red);
}

/* ---- ③ フッターのフィールド(濃紺の footer-band 上に描くため白系) ----
   赤ノード層はここには <use> しない(DESIGN.md「濃紺フッター上では使わない」)。 */
.site-footer .nest-field {
  color: var(--color-accent-ink);
}

.site-footer .nest__lattice {
  opacity: var(--nest-opacity-footer);
}

/* ============================================================
   4. ボタン(ピル)
   ============================================================ */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.button--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* :active は -webkit-tap-highlight-color: transparent(§1)の代替。
   タップ中の手応えを UA の灰色フラッシュではなくトークン色で返す。
   transition は .button が既に持っており、prefers-reduced-motion では
   §11 が 150ms に縮退させる(新しい transition は足さない)。 */
.button--primary:hover,
.button--primary:active {
  background-color: var(--color-accent-hover);
}

/* 白地×紺文字+outline 枠のピル(DESIGN.md「Components > button-secondary」)。
   最終 CTA で primary(LINE入会申込)の隣に置く副次アクション用。
   枠線はカードと同じ --color-rule。白地に対しては 1.5:1 だが、
   このボタンは文字ラベル(--color-ink / 14:1)自体がコントロールの識別を
   担うため WCAG 1.4.11 の 3:1 要件は枠線に掛からない。
   hover / focus では枠を ink-2(8.3:1)まで上げて状態変化を明示する。
   ★ 赤いボタンは禁止(DESIGN.md。修正指示画像の赤枠は注釈色)。 */
.button--secondary {
  background-color: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-rule);
}

.button--secondary:hover,
.button--secondary:active {
  background-color: var(--color-paper-2);
  border-color: var(--color-ink-2);
}

.button--secondary:focus-visible {
  border-color: var(--color-ink-2);
}

/* 濃紺面(footer-band)の上で使う白ピル×紺文字。
   紺ピルは濃紺地に沈むため、フッターの LINE CTA はこちらを使う。 */
.button--inverse {
  background-color: var(--color-accent-ink);
  color: var(--color-accent);
}

/* フッターの LINE CTA は SP でも主要導線。タップフラッシュを消した以上、
   ここにも押下状態を持たせないと唯一フィードバックが無いボタンになる。 */
.button--inverse:hover,
.button--inverse:active {
  background-color: var(--color-paper-2);
}

/* 濃紺面の上の副ボタン(お問い合わせ)。白ピル(inverse)が主・
   白枠アウトラインが従、の階層で並べる(2026-08-13 ユーザー指示)。 */
.button--inverse-outline {
  background-color: transparent;
  color: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
}

.button--inverse-outline:hover,
.button--inverse-outline:active {
  background-color: var(--color-accent-hover);
}

.button--lg {
  min-height: 56px;
  padding-inline: var(--space-xl);
  font-size: var(--text-base);
}

@media (min-width: 768px) {
  .button {
    padding-inline: var(--space-lg);
  }
}

/* ============================================================
   5. ヘッダー(Nav N1b:ロゴ左 / リンク中央 / CTA 右)
   スクロールすると白面 + 下罫線になる。
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color var(--dur-base) var(--ease-out);
}

/* 下端の境界線は擬似要素で描く。
   border-bottom にするとヘッダーの実高が --header-h + 1px になり、
   scroll-padding-top / ヒーローの余白計算と 1px ずれるため。 */
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background-color: var(--color-rule);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* ------------------------------------------------------------
   ★ 2つの JS クラスの役割分担(混同しないこと)
     .js            … index.html の head インラインが即付与する。
                      「JS が有効」を表すだけのフラグで、現在このファイルの
                      セレクタでは使っていない(将来の enhancement 用に残す)。
     .nav-enhanced  … js/main.js がナビの開閉を配線し終えたときだけ付与する。
                      「折り畳んでも開ける」ことの保証。
   折り畳み(display: none)やトグルの表示など、**JS が動かないと開けなくなる**
   ものは必ず .nav-enhanced 側に載せる。.js を条件にしてはいけない:
   head インラインは main.js の取得失敗・パースエラーでも実行されるため、
   ナビが閉じたまま開けない(= 到達不能な)状態が残ってしまう。
   ちらつきについて: .nav-enhanced は <script defer> の実行時、つまり HTML の
   パース完了直後に付く。描画はレンダーブロッキングな CSS(この 3 枚)の到着
   まで止まるため、未強化レイアウトが先に描かれることは実質起こらない。
   ------------------------------------------------------------ */

/* opaque-on-scroll(JS 有効時) */
.site-header.is-scrolled,
/* メニュー展開中も面を出す */
.site-header.is-open,
/* 強化されていないとき(no-JS / main.js 不発)は is-scrolled が付かないため
   常に不透明にして、スクロール中の本文と重なっても読めるようにする */
html:not(.nav-enhanced) .site-header {
  background-color: var(--color-paper);
}

.site-header.is-scrolled::after,
.site-header.is-open::after,
html:not(.nav-enhanced) .site-header::after {
  opacity: 1;
}

/* 開閉が配線されていないときは、押しても何も起きないトグルを出さない */
html:not(.nav-enhanced) .nav-toggle {
  display: none;
}

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "brand cta toggle";
  align-items: center;
  /* 320px ではロゴ画像 + 社名 + CTA + トグルで横幅が逼迫するため、
     デスクトップ(900px 以上)より詰める */
  gap: var(--space-2xs);
  min-height: var(--header-h);
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  /* グリッドトラックの最小サイズを内容幅に縛られないようにし、
     狭幅でロゴがヘッダーを押し広げて横スクロールを生むのを防ぐ */
  min-width: 0;
  overflow: hidden;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
  white-space: nowrap;
  text-decoration: none;
}

/* 白背景 JPG のロゴマーク。装飾扱い(alt="" / aria-hidden)。
   img の既定 height: auto を上書きするため高さ側で固定する。 */
.brand__mark {
  flex: none;
  width: auto;
  height: 24px;
}

/* ellipsis は flex コンテナ(.brand)ではなくテキスト側の
   ブロックで効かせる。狭幅で画像に押されても「脈…」で収まり、
   ヘッダーを押し広げて横スクロールを生まない。 */
.brand__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header__cta {
  grid-area: cta;
}

/* ---- ハンバーガー ---- */
.nav-toggle {
  grid-area: toggle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2xs);
  border: var(--rule-hairline);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  /* button の UA 既定(400)を上書き。400 は Google Fonts で読み込んで
     いないため、SR 用の非表示テキストが合成ウェイトを要求しないように */
  font-weight: 500;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 1px;
  background-color: var(--color-ink);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -5px;
}

.nav-toggle__bars::after {
  top: 5px;
}

/* ---- ナビゲーション(モバイル:折り畳みパネル) ----
   折り畳みは .nav-enhanced(= main.js が開閉を配線できた)ときだけ。
   配線できていなければ下の「縦積み」フォールバックが効き、
   ナビは常時展開表示になる(閉じたまま開けない状態を作らない)。 */
html.nav-enhanced .site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  /* svh 非対応ブラウザ向けに vh 版を先に置く(後勝ちで svh が採用される) */
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  background-color: var(--color-paper);
  border-bottom: var(--rule-hairline);
}

html.nav-enhanced .site-nav.is-open {
  display: block;
}

/* ナビ未強化時のモバイル(no-JS / main.js 不発):トグルが使えないので
   リンクを2行目に全幅で並べる。固定配置もやめ、ヘッダーが本文に
   被らないようにする(::after の基準を保つため static ではなく relative)。 */
@media (max-width: 899.98px) {
  html:not(.nav-enhanced) .site-header {
    position: relative;
  }

  html:not(.nav-enhanced) .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand cta"
      "nav   nav";
  }

  html:not(.nav-enhanced) .site-nav {
    grid-area: nav;
  }

  /* ヘッダーが在来配置(relative)になり本文を押し下げるため、
     .hero が固定ヘッダー用に確保している逃げ(--header-h)は不要になる。
     残すとヒーロー上部に --header-h ぶんの空白が二重に入る。 */
  html:not(.nav-enhanced) .hero {
    padding-block-start: var(--space-2xl);
  }
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-lg);
  padding: var(--space-xs) var(--space-lg) var(--space-md);
}

html.nav-enhanced .site-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-ink-2);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

html.nav-enhanced .site-nav__list a {
  display: flex;
  justify-content: flex-start;
  border-bottom: var(--rule-hairline);
}

html.nav-enhanced .site-nav__list li:last-child a {
  border-bottom: 0;
}

.site-nav__list a:hover {
  color: var(--color-accent);
}

/* 折り畳みパネルの行は全幅なので、押下は文字色だけでなく行の地を
   薄青グレーに変えて示す(タップフラッシュの代替。§1 参照)。 */
.site-nav__list a:active {
  background-color: var(--color-paper-2);
  color: var(--color-ink);
}

/* ★ 900px は js/main.js の matchMedia('(min-width: 900px)') と相互同期必須 */
@media (min-width: 900px) {
  .site-header__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand nav cta";
    gap: var(--space-lg);
  }

  .site-nav {
    grid-area: nav;
  }

  .nav-toggle {
    display: none;
  }

  /* トグルが消えて横幅に余裕が出るので、ロゴと社名を一段大きくする */
  .brand {
    gap: var(--space-xs);
    font-size: var(--text-xl);
  }

  .brand__mark {
    height: 34px;
  }

  html.nav-enhanced .site-nav {
    position: static;
    display: block;
    max-height: none;
    overflow: visible;
    background-color: transparent;
    border-bottom: 0;
  }

  .site-nav__list,
  html.nav-enhanced .site-nav__list {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: 0;
  }

  html.nav-enhanced .site-nav__list a {
    display: inline-flex;
    justify-content: center;
    border-bottom: 0;
  }
}

/* ============================================================
   6. [1] ヒーロー(Split diptych:ロゴ左 / コピー右)
   全画面ヒーローは廃止。白地にロゴマークとコピーを置き、
   隅に巣モチーフ(§3b ①)を敷く。
   ============================================================ */
.hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
  background-color: var(--color-paper);
  /* 続く [2] も白面のため、境界は罫線で示す。
     隅の巣モチーフが切れる位置とも一致し、網が線の下へ潜って見える。 */
  border-bottom: var(--rule-hairline);
  /* 巣モチーフの端を画面外へ逃がすため、はみ出しはここで切る */
  overflow: clip;
  isolation: isolate;
}

.hero__inner {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}

/* ロゴマークは白背景 JPG。白地に直置きして地と馴染ませる */
.hero__mark {
  width: 100%;
  max-width: 420px;
}

.hero__title {
  /* h1 が h2(--text-3xl)より小さくなる帯域(SP 全般と 574〜647px)が
     存在したため、常に「h2 以上」を保証する(見出し階層の逆転防止。
     2026-08-13 フォント統一監査の指摘)。320px でも
     「ビジネスで高め合う。」(10字)が 26px で 1 行に収まることは実測済み。 */
  font-size: max(var(--text-3xl), var(--text-hero));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
}

/* 節(読点)単位で改行させ、語の途中で折らない */
.hero__title-line {
  display: inline-block;
}

/* ロゴ中央の「赤い点」の引用(DESIGN.md brand-red 差し色規約①)。
   見出し末尾の句点だけを赤にする。 */
.hero__period {
  color: var(--color-brand-red);
}

.hero__lead {
  margin-top: var(--space-md);
  font-size: var(--text-base);
  line-height: var(--leading-heading);
  /* 本文サイズの和文なので本文の字間。--tracking-display は
     ディスプレイ級(--text-hero)の見出し専用 */
  letter-spacing: var(--tracking-body);
  color: var(--color-ink-2);
}

/* 語の途中ではなく文節で改行させる */
.hero__lead-line {
  display: inline-block;
}

@media (min-width: 768px) {
  .hero {
    padding-block: calc(var(--header-h) + var(--space-3xl)) var(--space-3xl);
  }
}

@media (min-width: 860px) {
  .hero__inner {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xl);
    justify-items: stretch;
    text-align: start;
  }

  .hero__mark {
    max-width: 100%;
  }
}

/* ============================================================
   7. カード([2] Concept & Value / [4] 会員特典)
   白面 + outline 枠線(帯セクションの上でも同じ見え方にする)
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.card {
  min-width: 0;
  padding: var(--space-lg);
  border: var(--rule-hairline);
  border-radius: var(--radius-card);
  background-color: var(--color-paper);
  /* 枠線は残す(印刷と強制カラーモードでは影が出ないため、
     カードの境界は枠線が担い続ける) */
  box-shadow: var(--shadow-card);
}

.card__title {
  font-size: var(--text-xl);
  /* title-md(DESIGN.md typography.title-md = 600) */
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
}

.card__text {
  margin-top: var(--space-xs);
  /* 本文役割は全ページ 17px に統一(ユーザー指示 2026-08-13
     「他のフォントサイズがそろっていないものをそろえて。PC・SP 両方」)。
     .prose p / .faq__a / .price-block__text と同じ「読ませる文」なので
     --text-sm(14px)ではなく --text-base を使う。 */
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
}

.card--numbered {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-md);
  align-items: baseline;
}

/* ---- カードのアイコン(ユーザー指示 2026-08-18)----
   defs の #icon-* を <use> で参照する。意匠は
   references/design/icon/無料のプレゼントイラスト.svg に倣った
   **単色の塗りシルエット**(線画ではない。ユーザー指示 2026-08-18)。
   意味は見出しが担うので SVG 側は aria-hidden(装飾)。
   色は accent 固定で赤は使わない(brand-red の差し色規約 4 系統に
   5 つ目を足さない)。fill="currentColor" なので color で決まる。 */
.card__icon {
  display: block;
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
}

.card__num {
  /* アイコンが入って右列が 3 行になったので、番号もその高さまで伸ばす
     (1 / 3 のままだと番号がアイコンと見出しの間で途切れる)。 */
  grid-row: 1 / 4;
  font-family: var(--font-display-en);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label-en);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}

.card--numbered .card__icon,
.card--numbered .card__title,
.card--numbered .card__text {
  grid-column: 2;
}

/* 番号付きカードでは、番号の字面の上端とアイコンの上端を揃えたい。
   .card--numbered は align-items: baseline なので、ブロック要素である
   アイコンは自分の下端がベースラインになる。行の高さを揃えるために
   アイコン行だけ align-self を上端基準に戻す。 */
.card--numbered .card__icon {
  align-self: start;
}

/* ---- SP でも 2 列で組むグリッド([2] Concept & Value のみ) ----
   ユーザー指示 2026-08-12(修正指示-v1.png)。720px 以上は既定と同じ 2 列に
   合流するので、ここでは 720px 未満の見え方だけを決めればよい
   (max-width のブレークポイントを増やさないため、この順序で書いている。
    下の @media (min-width: 720px) で元の余白・字送りへ戻す)。
   320px では 1 列あたり約 128px しか取れないため、カード内の余白を
   既定の lg より詰める。カードは非インタラクティブなので
   44px のタップ域要件は掛からない。
   ------------------------------------------------------------
   2026-08-13(SP 体験監査の採択項目⑥):320px で本文が 1 行 5〜6 字に
   割れて読みにくかったため、内側の余白と列間を詰めて 1 行あたりの字数を稼ぐ
   (当時は md → sm 固定。下の「サイズ統一」で --card-pad-sp に置き換えた)。
   詰めたぶん行が近づくので、本文の行間だけ
   --leading-body(1.9)→ --leading-card-sp(1.7)に締める。
   文言は変更していない。
   ------------------------------------------------------------
   2026-08-13(サイズ統一):見出しの SP 縮小(--text-xl → --text-base)を
   撤回した。#benefits のカード見出しは SP でも 22px のままで、同じ
   .card__title が画面幅ではなくセクションによって 17/22px に割れていたため
   (ユーザー指示「そろっていないものをそろえて」)。本文も 14 → 17px に
   上がったので、17px の見出しでは本文と同サイズになり階層も消えていた。
   字数を稼ぐぶんは列間・内側余白を --card-pad-sp(320px で 8px、
   720px で 24px へ線形に開く。定義と根拠は §0 のローカルトークン)で確保する。 */
.card-grid--sp-2up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-pad-sp);
}

.card-grid--sp-2up .card {
  padding: var(--card-pad-sp);
}

.card-grid--sp-2up .card__text {
  line-height: var(--leading-card-sp);
}

/* 2×2 では 1 列 128〜158px しかないため、アイコンと下の見出しの間隔も
   カード内の余白に合わせて詰める(32px のままだと本文の行数が増える)。 */
.card-grid--sp-2up .card__icon {
  width: 24px;
  height: 24px;
  margin-bottom: var(--space-xs);
}

@media (min-width: 720px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  /* 2 列に余裕が出るので既定のカードと同じ見え方へ戻す */
  .card-grid--sp-2up .card {
    padding: var(--space-lg);
  }

  .card-grid--sp-2up .card__text {
    line-height: var(--leading-body);
  }

  /* アイコンも既定サイズ(--card-icon-size)へ戻す。
     2×2 用に縮めた 24px を PC まで持ち越すと、同じ .card__icon が
     セクションによって 24/32px に割れる。 */
  .card-grid--sp-2up .card__icon {
    width: var(--card-icon-size);
    height: var(--card-icon-size);
    margin-bottom: var(--space-sm);
  }
}

/* ============================================================
   8. [5] 料金システム(スペックシート)
   ============================================================ */
.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
}

.price-block {
  min-width: 0;
}

/* 見出し頭の小さな四角はワイヤーフレームの「■」に対応する
   (擬似要素なのでマークアップは変えない) */
.price-block__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding-bottom: var(--space-xs);
  font-size: var(--text-xl);
  /* title-md(DESIGN.md typography.title-md = 600) */
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  border-bottom: var(--rule-hairline);
}

.price-block__title::before {
  content: "";
  flex: none;
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: var(--radius-input);
  background-color: var(--color-accent);
}

.price-block__text {
  margin-top: var(--space-md);
  color: var(--color-ink-2);
}

.price-block__list {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  color: var(--color-ink-2);
}

.price-block .note {
  margin-top: var(--space-sm);
}

.spec {
  margin-top: var(--space-xs);
}

.spec__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hairline);
}

.spec__key {
  /* 注記付きの行(非会員交流会参加費)ではキーが 2 行以上になる。
     flex-basis を 0 にして「キーの内容幅」を折り返し判定から外し、
     金額(dd)を先に確保してから残りをキーに与える。
     auto のままだと注記の max-content(約 312px)で判定され、
     320px では金額が 2 行目へ落ちて価格の右揃えが崩れる(実測)。
     min-width: 0 は flex アイテムの既定の min-width:auto を外し、
     長い注記が行をはみ出させないようにするため。 */
  flex: 1 1 0;
  min-width: 0;
  /* 値(.spec__value)と同じ 17px。行の左右で本文サイズが 14/17px に
     割れていた(ユーザー指示 2026-08-13「そろっていないものをそろえて」)。
     行内の注記(.spec__note)は注記役割なので 14px のまま。 */
  font-size: var(--text-base);
  letter-spacing: var(--tracking-ui);
  color: var(--color-ink-2);
}

/* 行内の注記。dt の中でブロックに落とし、キーの直下へ回り込ませる。
   .price-block .note(margin-top: sm)を打ち消すため、同じ詳細度で後に置く。
   色は .note が持つ(帯セクションでは .section--raised .note が
   muted → ink-2 に上げる。巣モチーフのフィールドとの合成 AA 対応)。 */
.spec__key .spec__note {
  display: block;
  margin-top: var(--space-3xs);
  letter-spacing: var(--tracking-body);
}

.spec__value {
  font-size: var(--text-base);
  letter-spacing: var(--tracking-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-ink);
}

.spec__unit {
  margin-left: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

@media (min-width: 860px) {
  .price-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2xl) var(--space-xl);
  }
}

/* ============================================================
   9. [6] 入会方法(F4 Step sequence)
   ステップは枠線カード。4 列表示のときだけ巣モチーフの
   接続線(§3b ②)を上に重ねて「巣穴の通路」に見せる。
   ============================================================ */
/* ★ .steps の gap(--space-md)は SP の接続線レーンの折れ点位置
   (カード上端から gap の半分ぶん上)の基準でもある。変えるときは
   .nest--step-rail / .step + .step::after の calc も一緒に見直すこと。 */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* カードの大きさを統一(ユーザー指示 2026-08-13)。
     03 だけ改行で背が高くなるため、全行を最も高いカードに揃える。 */
  grid-auto-rows: 1fr;
  gap: var(--space-md);
  /* SP:カード列の左に接続線のレーンを空ける(860px 以上で 0 に戻す)。
     position は入口/出口の線(下の ::before / ::after)の基準。 */
  position: relative;
  padding-left: var(--steps-rail-w);
}

/* 脈の入口と出口。PC の .nest--steps が左右の画面外へ抜けていくのと同じで、
   SP でも上下へ抜けさせる(ロゴの文法:脈は途切れない)。
   x は各カードの赤ノードと同じ位置。1px はカードの枠線ぶんのずれ
   (レーンの svg は .step の padding box 基準に置いてあるため)。 */
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: calc(var(--steps-node-x) + 1px - var(--steps-line-w) / 2);
  width: var(--steps-line-w);
  height: var(--space-lg);
  background-color: var(--color-ink-2);
  opacity: var(--nest-opacity-steps);
}

.steps::before {
  top: calc(-1 * var(--space-lg));
}

.steps::after {
  bottom: calc(-1 * var(--space-lg));
}

/* ---- SP(860px 未満)の 1 行構成 ----
   2026-08-13(SP 体験監査の採択項目⑧)。番号の下に本文を置く 2 行構成では
   1 枚 79〜100px あり、4 枚で画面の大半を食っていた。番号(左)+ 本文(右)の
   1 行に組み替えて 1 枚 47px まで縮める(03 のみ改行があるため 2 行)。
   カードはリンクではないので 44px のタップ域要件は掛からない。 */
.step {
  min-width: 0;
  /* 接続線レーンの svg / 疑似要素ノードの配置基準 */
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-sm);
  /* 左右 lg→md(2026-08-12): 4列表示で「公式LINEよりお申し込み」を
     1行に収めるため(ユーザー指示)。
     上下は 1 行構成に合わせて md→sm(2026-08-13)。860px 以上で md に戻す。 */
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hairline);
  border-radius: var(--radius-card);
  background-color: var(--color-paper);
}

/* ---- SP の縦接続線(§3b ② の SP 版)----
   svg 本体は index.html の .nest--step-rail(なぜカードごとに置くかは
   そちらのコメント)。ここでは「カード 1 枚 + 上下の gap 半分」を
   ちょうど覆う矩形に置くことだけを担う。こうすると viewBox の y=50 が
   常にカードの縦中心に一致する(誤差 0px)。 */
.nest--step-rail {
  position: absolute;
  top: calc(var(--space-md) / -2);
  left: calc(-1 * var(--steps-rail-w));
  width: var(--steps-rail-w);
  height: calc(100% + var(--space-md));
}

.step-rail__line {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--nest-opacity-steps);
}

/* 赤ノードから中点まで赤で重ね描きし、そこで完全に透明にする
   (PC の .nest--steps .steps__fade と同じ規約。色は .nest-red-stop が持つ) */
.step-rail__fade {
  stroke-width: 2;
  stroke-linecap: round;
  opacity: var(--nest-opacity-steps-red);
}

/* 丸ノードは svg ではなく疑似要素で描く。rail の svg は
   preserveAspectRatio="none" で y だけを引き伸ばすため、
   svg 内の <circle> は楕円に潰れてしまう。
   ------------------------------------------------------------
   ① 赤の大ノード = 各ステップの位置(カードの縦中心)。
      ロゴ中央の「赤い点」の引用(DESIGN.md brand-red 差し色規約③)。 */
.step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--steps-node-x) - var(--steps-rail-w));
  width: var(--steps-node-d);
  height: var(--steps-node-d);
  margin-top: calc(var(--steps-node-d) / -2);
  margin-left: calc(var(--steps-node-d) / -2);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand-red);
  opacity: var(--nest-opacity-steps-red);
}

/* ② 折れ点の小ノード = カードとカードの間(gap の中点)。
   先頭カードの上には置かない(PC も 4 ノードの「間」にだけ小ノードを置く)。 */
.step + .step::after {
  content: "";
  position: absolute;
  top: calc(var(--space-md) / -2);
  left: calc(var(--steps-bend-x) - var(--steps-rail-w));
  width: var(--steps-bend-d);
  height: var(--steps-bend-d);
  margin-top: calc(var(--steps-bend-d) / -2);
  margin-left: calc(var(--steps-bend-d) / -2);
  border-radius: var(--radius-pill);
  background-color: var(--color-ink-2);
  opacity: var(--nest-opacity-steps);
}

.step__num {
  display: block;
  font-family: var(--font-display-en);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label-en);
  font-variant-numeric: tabular-nums;
  /* ロゴ中央の「赤い点」の引用(DESIGN.md brand-red 差し色規約③)。
     入会 4 ステップの通し番号だけを赤にし、「脈が進んでいく点」に見せる。
     13px / 500 なので大文字扱いにはならず AA 4.5:1 が必要。
     実測 5.58:1(brand-red = rgb(197,44,38) 対 白面のカード地)で満たす。
     #benefits の .card__num は紺(--color-accent)のまま — 番号を
     全部赤にすると「点」ではなく「色分け」になり、ロゴの赤が効かなくなる。 */
  color: var(--color-brand-red);
}

.step__text {
  /* SP は 1 行構成(番号の右)なので上マージンを持たない。
     860px 以上の 2 行構成では --space-2xs に戻す。 */
  margin-top: 0;
  /* PC・SP とも本文と同じサイズに統一(ユーザー指示 2026-08-13。
     これに伴い旧「PC は 1 行に収めるため 14px」の例外は撤廃 —
     折り返しは下の .step__phrase の文節単位で制御する)。 */
  font-size: var(--text-base);
  line-height: var(--leading-heading);
  /* 字間なし(2026-08-12): 4列カードの内容幅の余裕を字間に使わない */
  letter-spacing: normal;
  color: var(--color-ink);
}

/* 文節単位の改行制御(hero__title-line と同じ手法)。
   4 列の狭いカード幅でも「公式LINEより/お申し込み」のように
   語の途中で折れない。1 行に収まる幅ではそのまま連続して見える。 */
.step__phrase {
  display: inline-block;
}

/* ---- PC(860px 以上)は横 4 列 + 上の横接続線に戻す ----
   SP 専用の 1 行構成・縦レーン・疑似要素ノードをすべて解除する
   (2026-08-13 以前の見え方と 1px も変えないこと)。 */
@media (min-width: 860px) {
  .nest--steps {
    display: block;
  }

  .nest--step-rail {
    display: none;
  }

  .steps {
    /* 列数はステップ数に追従する(WP 化 2026-08-18)。
       --steps-n はテンプレートが .steps に inline で出す。既定 4 =
       静的版と完全同一のため、既存の PC レイアウトは変わらない。
       ★ 接続線 SVG(.nest--steps)のノード座標も同じ n から算出されるので、
       n を変えるときは両方が同じ値を見ていることを確認すること。 */
    grid-template-columns: repeat(var(--steps-n, 4), minmax(0, 1fr));
    /* SP 用の高さ統一(1fr)を解除(PC は従来どおり内容なり) */
    grid-auto-rows: auto;
    gap: var(--space-lg);
    /* SP 用に足した値を元の計算値へ厳密に戻す(PC の見え方を変えない) */
    position: static;
    padding-left: 0;
  }

  .step {
    /* li の既定値。grid アイテムとしての見え方は block と同じだが、
       SP 用に足した display: grid を元の計算値へ厳密に戻す */
    display: list-item;
    position: static;
    padding: var(--space-md);
  }

  .steps::before,
  .steps::after,
  .step::before,
  .step + .step::after {
    content: none;
  }

  .step__text {
    margin-top: var(--space-2xs);
    /* サイズは SP と同じ --text-base(2026-08-13 ユーザー指示で
       PC も本文サイズに統一。折り返しは .step__phrase が制御) */
  }

  /* 4 列は行内で高さが揃う(grid の既定 stretch)が、
     文言の行数差(1〜2 行)でカード内の縦位置が暴れないよう上詰めに */
  .steps {
    align-items: stretch;
  }
}

/* ---- 最終 CTA ---- */
.cta-final {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  text-align: center;
}

/* LINE入会申込(primary)+ お問い合わせ(secondary)。
   SP でも横並び(ユーザー指示 2026-08-12)。折り返さず、狭幅では
   各ボタンが均等に縮む(flex: 1 / min-width: 0 / 余白を1段詰める)。 */
.cta-final__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

@media (max-width: 719.98px) {
  /* 親 .cta-final の justify-items: center は子を内容幅に縮めるため、
     SP では行を明示的に全幅へ広げてボタンを大きく見せる
     (ユーザー指示 2026-08-13「SP のボタン幅を広く」)。 */
  .cta-final__actions {
    justify-self: stretch;
    width: 100%;
  }

  .cta-final__actions .button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-sm);
  }
}

@media (min-width: 720px) {
  .cta-final__actions {
    gap: var(--space-md);
  }
}

.cta-final__note {
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  color: var(--color-ink-2);
}

/* ============================================================
   9b. [7] FAQ(details/summary のアコーディオン)
   JS を一切使わない(開閉・キーボード操作・アクセシブルな展開状態は
   すべてブラウザ標準の details が担う)。JS が落ちても機能する。
   カテゴリごとに h3 + 罫線区切りのリストで、カードにはしない
   (Q&A は面ではなく「積み重なった行」に見せる)。
   ------------------------------------------------------------
   マーカーは既定の三角を消して +/− を自作する。線幅・寸法は
   .nav-toggle__bars と同じく実測由来の固有値(px 直書きを許容)。
   ============================================================ */
.faq {
  display: grid;
  gap: var(--space-xl);
  /* 横幅は他セクションと同じ(.shell の 1080px)に合わせる
     (ユーザー指示 2026-08-12。72ch の行長制限は撤廃)。 */
}

.faq__category {
  /* title-md(DESIGN.md typography.title-md = 600) */
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-xs);
}

.faq__item {
  border-bottom: var(--rule-hairline);
}

/* 各カテゴリの先頭にも罫線を引き、見出しと Q&A 群の境界を作る */
.faq__item:first-of-type {
  border-top: var(--rule-hairline);
}

.faq__q {
  position: relative;
  /* flex にすると Chrome / Firefox の既定マーカー(▶)が消える。
     Safari 用に ::-webkit-details-marker も別途消す。 */
  display: flex;
  align-items: center;
  min-height: 44px;
  /* 右は自作マーカー(12px)+ 余白ぶんを空ける */
  padding: var(--space-sm) var(--space-xl) var(--space-sm) 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q:hover,
.faq__q:active {
  color: var(--color-accent);
}

/* +/− マーカー。position: absolute なので display: flex の
   フレックスアイテムにはならない(行の折り返しに影響しない)。 */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  background-color: var(--color-accent);
}

/* 横棒(+ と − の共通部分) */
.faq__q::before {
  right: 0;
  width: 12px;
  height: 2px;
  margin-top: -1px;
}

/* 縦棒(開いているときだけ消して − にする) */
.faq__q::after {
  right: 5px;
  width: 2px;
  height: 12px;
  margin-top: -6px;
}

.faq__item[open] > .faq__q::after {
  opacity: 0;
}

.faq__a {
  padding: 0 var(--space-xl) var(--space-md) 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-ink-2);
}

/* ============================================================
   10. フッター(Ft2 Inline single line / footer-band)
   上端に巣モチーフの帯(§3b ③)→ CTA → 規約リンク → ©
   ------------------------------------------------------------
   DESIGN.md「Components > footer-band」— 濃紺のベタ帯×白文字。
   ページの背景リズムを「白 → 薄青グレー帯 → 白 → … → 濃紺」で締める。
   帯自体が直前の白セクションとの境界になるため上罫線は置かない。
   ============================================================ */
.site-footer {
  /* 巣モチーフのフィールド(§3b ①)の配置基準 */
  position: relative;
  isolation: isolate;
  padding-block: var(--space-2xl);
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
  overflow: clip;
}

/* 紺のリング(--color-focus)は濃紺地では 1.3:1 まで落ちるため、
   この帯の中だけ白リングに切り替える(白 対 濃紺 = 13.8:1)。 */
.site-footer :focus-visible {
  outline-color: var(--color-accent-ink);
}

.site-footer .shell {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__links a:hover,
.site-footer__links a:active {
  color: var(--color-paper-2);
}

/* LINE(白ピル・主)+ お問い合わせ(白枠・従)の2ボタン行(2026-08-13)。
   SP では最終 CTA と同様に行を全幅へ広げ、2つが均等に並ぶ。 */
.site-footer__cta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-sm);
}

@media (max-width: 719.98px) {
  /* footer .shell の justify-items: start が行を内容幅に縮めるため、
     SP では明示的に全幅へ(最終 CTA と同じ広げ方) */
  .site-footer__cta {
    justify-self: stretch;
    width: 100%;
  }

  .site-footer__cta .button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--space-sm);
  }
}

/* 濃紺帯の上での階層は色相ではなく不透明度で作る
   (--color-muted 等の紺系は濃紺地に沈むため使わない)。 */
.site-footer__copy {
  color: var(--color-accent-ink);
  opacity: var(--footer-copy-opacity);
}

.site-footer__copy small {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-ui);
}

@media (min-width: 768px) {
  .site-footer {
    padding-block: var(--space-3xl);
  }

  .site-footer .shell {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "nav  cta"
      "copy cta";
    align-items: center;
    column-gap: var(--space-xl);
    row-gap: var(--space-xs);
  }

  .site-footer__cta {
    grid-area: cta;
    justify-self: end;
  }

  .site-footer__nav {
    grid-area: nav;
  }

  .site-footer__copy {
    grid-area: copy;
  }
}

/* フッターの規約リンクのうち「現在地」はリンクにせず span で出す
   (自分自身へのリンクは行き先が無く、キーボード利用者を空振りさせる)。
   リンクと同じ行の高さ・字送りを保ったまま、下線を持たないことで
   「押せない」ことを示す(色の差だけに頼らない)。 */
.site-footer__current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-ui);
  white-space: nowrap;
  color: var(--color-accent-ink);
  opacity: var(--footer-copy-opacity);
}

/* © をトップページへの戻り導線にする(下層ページのみ。index.html では
   自分自身なので素のテキストのまま)。--footer-copy-opacity は親の
   .site-footer__copy が持つので、ここでは下線の体裁だけを足す。 */
.site-footer__copy a {
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__copy a:hover,
.site-footer__copy a:active {
  color: var(--color-paper-2);
}

/* ============================================================
   10b. 下層ページ共通(特商法 / プライバシーポリシー / お問い合わせ)
   ------------------------------------------------------------
   下層は実務ページなので、本文には巣モチーフのフィールドを敷かない
   (敷くのは index.html と共通のフッターだけ)。ヘッダー・フッターと
   .shell / .section / .section-title / .spec は本体と共有し、
   ここで足すのは「ページ見出しの下に続く縦の流れ」だけに留める。
   ============================================================ */

/* 固定ヘッダーぶんの逃げ。.hero と同じ量・同じ考え方で取る。
   下端は .section の padding-block をそのまま使いたいので、
   ここでは開始側だけを上書きしたいが、padding-block の一括指定でしか
   .section(--space-2xl / 3xl)を上書きできないため両側を書く。 */
.page {
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-2xl);
}

@media (min-width: 768px) {
  .page {
    padding-block: calc(var(--header-h) + var(--space-3xl)) var(--space-3xl);
  }
}

/* ナビ未強化時(no-JS / main.js 不発)はヘッダーが在来配置になり本文を
   押し下げるため、固定ヘッダー用の逃げは不要になる(残すと二重に空く)。
   §5 の html:not(.nav-enhanced) .hero と同じ扱い。 */
@media (max-width: 899.98px) {
  html:not(.nav-enhanced) .page {
    padding-block-start: var(--space-2xl);
  }
}

/* ページ見出し(英字ラベル + h1)は .section-title / .section-label を
   そのまま使う。h1 は --text-3xl、下層の h2(.page-section__title)は
   --text-xl なので見出し階層は逆転しない。 */

.page-lead {
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
}

/* ---- 準備中の告知ボックス ----
   仮ページであることを本文より先に伝えるための面。深度は box-shadow では
   なく「薄青グレーの面 + 罫線」で作る(DESIGN.md「Elevation & Depth」)。
   左端の太い罫だけを --color-accent にして視線を止める。brand-red は
   使わない — 赤の用途は DESIGN.md の差し色規約①〜④に限定されている。 */
.notice {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: var(--rule-hairline);
  border-left: var(--space-2xs) solid var(--color-accent);
  border-radius: var(--radius-card);
  background-color: var(--color-paper-2);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-lead + .notice {
  margin-top: var(--space-md);
}

/* ---- 条項ブロック(プライバシーポリシー) ---- */
.page-body {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.page-section__title {
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-size: var(--text-xl);
  /* title-md(DESIGN.md typography.title-md = 600) */
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  border-bottom: var(--rule-hairline);
}

.page-section__text {
  max-width: 62ch;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
}

/* 条項内の段落が続くとき(2 段落目以降)は行間ぶんの間隔を空ける。
   1 段落目は .page-section__title の margin-bottom が受け持つ。 */
.page-section__text + .page-section__text {
  margin-top: var(--space-sm);
}

/* ---- 条項内のリスト ----
   番号付き(第2条の 1./2./3.)と中黒(第3条の列挙)の両方を同じ器で扱う。
   マーカーは list-style に任せ、字下げは padding-inline-start で作る
   (::before の自作マーカーは入れ子の番号継承ができないため使わない)。 */
.page-section__list {
  max-width: 62ch;
  margin-top: var(--space-sm);
  padding-inline-start: var(--space-lg);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
}

.page-section__list > li + li {
  margin-top: var(--space-xs);
}

.page-section__list--ordered {
  list-style: decimal;
}

.page-section__list--bulleted {
  list-style: disc;
}

/* 入れ子(第6条 1. の下の列挙)。親項目の本文に続くので上マージンは詰める。 */
.page-section__list .page-section__list {
  margin-top: var(--space-xs);
}

/* 定型項目の表(.spec)の値としてリストを置く場合(特商法の解約・返金)。
   器から幅・字色・字送りを継ぐので、リスト側の指定は打ち消す。 */
.spec__value > .spec__list {
  max-width: none;
  margin-top: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ---- 定型項目の表(特商法)----
   罫線の流儀は料金表(.spec)を継ぐ。ただし値が金額ではなく文なので
   右揃えにはせず、狭幅ではキーの下へ素直に積む。 */
.spec--legal {
  margin-top: var(--space-2xl);
}

.spec--legal .spec__row {
  justify-content: flex-start;
}

.spec--legal .spec__key {
  /* 狭幅ではキーだけで 1 行を占め、値は次の行へ落とす */
  flex: 1 1 100%;
  color: var(--color-ink);
}

.spec--legal .spec__value {
  /* 「(準備中)」は短いが、正式文言が入ると長文になる。
     .spec__value の nowrap は金額用なので、ここでは折り返しを許す。 */
  white-space: normal;
  color: var(--color-ink-2);
}

/* 720px はカードグリッドの 2 列化と同じ切替点(新しい breakpoint を増やさない)。
   実測 720px では 15em = 204px、値側に 468px 残る。 */
@media (min-width: 720px) {
  .spec--legal .spec__key {
    /* 最長のキー「商品代金以外の必要料金」(12 字)が 1 行に収まる幅。
       em なのでタイプスケールが SP/PC で切り替わっても比率が崩れない。 */
    flex: 0 0 15em;
  }

  .spec--legal .spec__value {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ---- 戻り導線 ---- */
.page-foot {
  margin-top: var(--space-2xl);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-ui);
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

.back-link:hover,
.back-link:active {
  color: var(--color-accent);
}

/* ============================================================
   10c. フォーム(contact.html)
   ------------------------------------------------------------
   ★ 現状は**デザインのみ**。送信処理は無く、送信ボタンは disabled。
   ラベルは常時可視の <label for>(placeholder をラベル代わりにしない)。
   ============================================================ */
.form {
  display: grid;
  gap: var(--space-lg);
  max-width: 62ch;
  margin-top: var(--space-2xl);
}

.field {
  display: grid;
  gap: var(--space-xs);
}

.field__label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-ui);
  color: var(--color-ink);
}

/* 必須/任意のバッジ。色だけで区別させず文字で書く(WCAG 1.4.1)。
   バッジはラベル要素の中にあるので支援技術にも読み上げられ、
   input 側の required 属性と二重に必須を伝える。 */
.field__req,
.field__opt {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-xs);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-ui);
}

.field__req {
  background-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.field__opt {
  background-color: var(--color-paper);
  border-color: var(--color-rule);
  color: var(--color-ink-2);
}

/* 入力欄。白面に白面の入力欄が載るため、コントロールの識別は枠線だけが
   担う(WCAG 1.4.11 非テキストコントラスト 3:1)。--color-rule は白地に
   対し 1.5:1 で要件を満たさないため、枠は --color-ink-2(8.3:1)を使う
   ——.button--secondary の枠が --color-rule で済むのは、あちらは文字
   ラベル自体がコントロールの識別を担っているため。 */
.field__control {
  width: 100%;
  min-height: 44px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-ink-2);
  border-radius: var(--radius-input);
  background-color: var(--color-paper);
  color: var(--color-ink);
  /* UA 既定のフォントを継がないので明示する */
  font-family: var(--font-body);
  /* ★ 入力欄だけは 16px を下回らせない。
     iOS Safari は文字サイズが 16px 未満の入力欄にフォーカスすると
     ビューポートごと拡大し、ユーザーがピンチで戻すまで倍率が残る
     (入力を始めた瞬間にレイアウトが飛ぶ)。SP タイプスケール
     (tokens.css の 860px 未満で --text-base = 0.85rem = 13.6px)を
     そのまま使うとこれに該当する。16px は WCAG 値ではなく
     プラットフォーム側の固定閾値なので、44px のタップ域と同じ扱いで
     スケール外の固有値として書く(§0 の生値規約の但し書き)。
     860px 以上では --text-base(1.0625rem)が 1rem を上回るため、
     この max() は本文サイズをそのまま返す(PC の見え方は不変)。 */
  font-size: max(var(--text-base), 1rem);
  font-weight: 500;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}

/* テキスト入力は :focus-visible にマウス操作でも一致するため、
   §2 のフォーカスリングがそのまま出る。枠色も併せて動かして、
   リングを描かない環境(強制カラーモード等)でも状態変化を残す。 */
.field__control:hover,
.field__control:focus {
  border-color: var(--color-focus);
}

.field__control--multiline {
  /* 6 行ぶん。resize は縦のみ許す(横に広げると .shell を突き抜ける) */
  min-height: 10em;
  line-height: var(--leading-body);
  resize: vertical;
}

/* ---- 送信ブロック(現在は無効 + 代替導線) ---- */
.form__submit {
  display: grid;
  justify-items: start;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.form__note {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-2);
}

/* 無効なボタン。無効コントロールは WCAG のコントラスト要件から除外
   されるが、「そこにボタンがある」ことは読み取れなければならないので
   --color-muted(白文字に対し 5.5:1)まで落とすに留める。
   :hover / :active は §4 の .button--primary が持つため、
   詳細度を 1 段上げて打ち消す(無効なのに反応させない)。 */
.button:disabled {
  cursor: not-allowed;
}

.button--primary:disabled,
.button--primary:disabled:hover,
.button--primary:disabled:active {
  background-color: var(--color-muted);
  color: var(--color-accent-ink);
}

/* ============================================================
   11. モーション(fade-in のみ / modern-minimal)
   .reveal-armed は js/main.js が IntersectionObserver で
   observe() する直前にだけ <html> へ付ける。
   JS 無効・IO 非対応・対象0件のときはクラス自体が付かないため、
   .reveal は最初から不透明のまま(印刷/PDF でも白紙にならない)。
   ============================================================ */
.reveal-armed .reveal {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.reveal-armed .reveal.is-visible {
  opacity: 1;
}

/* opacity: 0 の要素もフォーカス順には残る。IntersectionObserver が
   発火する前のセクションへ Tab で入るとフォーカスリングごと不可視になるため、
   フォーカスが入った時点で CSS だけでも即座に可視化する
   (js/main.js の focusin が is-visible を付けるまでの隙間も塞ぐ)。
   フォーカスリングの出現はアニメーションさせない。 */
.reveal-armed .reveal:focus-within {
  opacity: 1;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* 実際に transition を持つ要素だけを 150ms 以下へ縮退させる。
     * セレクタで transition-duration を上書きすると、
     transition-property の初期値 all により
     「本来アニメーションしない要素」に動きを新設してしまうため使わない。 */
  .reveal-armed .reveal,
  .site-header,
  .site-header::after,
  .button,
  .site-nav__list a,
  .site-footer__links a,
  .site-footer__copy a,
  .faq__q,
  .back-link,
  .field__control {
    transition-duration: 150ms;
  }

  /* スキップリンクの出現は常に即時 */
  .skip-link {
    transition: none;
  }

  /* 現状 @keyframes は1つも定義していないため無効果。
     将来アニメーションを足したときの取りこぼし防止として残す
     (transition と違い animation は初期値が none のため、
      * に掛けても「動かない要素に動きを新設する」副作用が無い)。 */
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   12. 印刷
   JS が動かない/観測が走らない状態でも全セクションを出す。
   ============================================================ */
@media print {
  .reveal {
    opacity: 1 !important;
  }

  .site-header {
    position: static;
  }

  /* 写真背景は紙では刷られない(白地になる)ため、白の見出しを紺へ戻す */
  .section--photo {
    background-image: none;
  }

  .section--photo::before {
    content: none;
  }

  .section--photo .section-label,
  .section--photo .section-title__text {
    color: var(--color-ink);
  }

  /* static になると絶対配置の基準を失うため、印刷では境界線を出さない */
  .site-header::after {
    display: none;
  }

  /* 装飾は紙に出さない */
  .nest {
    display: none;
  }

  /* 影は紙に出さない(境界は .card の枠線が担う) */
  .card {
    box-shadow: none;
  }

  /* SP の接続線のうち、丸ノードと入口/出口の線は svg ではなく疑似要素で
     描いている(§9 参照)ため .nest では消えない。ここで併せて落とす。 */
  .steps::before,
  .steps::after,
  .step::before,
  .step + .step::after {
    content: none;
  }

  .hero {
    padding-block: var(--space-xl);
  }

  /* 下層ページ:紙ではヘッダーが静的配置になるので、固定ヘッダー用の
     逃げ(--header-h)は不要(残すと 1 枚目の頭が大きく空く)。 */
  .page {
    padding-block: var(--space-xl);
  }

  /* 無効な送信ボタンは §10c で --color-muted 地 × 白文字にしてある。
     ブラウザは既定で背景を刷らないため、そのままだと白文字だけが残って
     消える(.button--primary の印刷時の扱いと同じ)。詳細度も
     :disabled のぶん高いので、ここで明示的に戻す。 */
  .button--primary:disabled {
    background-color: transparent;
    color: var(--color-ink);
    border-color: var(--color-rule);
  }

  /* 必須バッジも紺地 × 白文字。紙では罫線囲みの紺文字にする。 */
  .field__req {
    background-color: transparent;
    color: var(--color-ink);
    border-color: var(--color-rule);
  }

  /* 注記ボックスは薄青の面で存在を示しているが、面は刷られない。
     罫線は刷られるのでそのまま残り、紙でも枠として読める。 */

  /* ブラウザは既定で背景を刷らないため、濃紺帯が消えて
     白文字だけが残る(= 判読不能)。紙では白地×紺へ反転させる。 */
  .site-footer {
    background-color: transparent;
    color: var(--color-ink);
    border-top: var(--rule-hairline);
  }

  .site-footer__links a,
  .site-footer__copy,
  .site-footer__current {
    color: var(--color-ink);
    opacity: 1;
  }

  /* ピルは背景で成立しているが、ブラウザは既定で背景を刷らない。
     紺ピル(--color-accent 地 × 白文字)は紙の上では白文字だけが残って
     消えるため、文字色を紺へ戻し、輪郭は罫線で示す。
     背景を明示的に落とすのは、印刷設定で「背景のグラフィック」を
     有効にされたときに濃紺地 × 紺文字(1.1:1)にならないようにするため
     (.site-footer の印刷時の扱いと同じ)。 */
  .button--primary {
    background-color: transparent;
    color: var(--color-ink);
    border-color: var(--color-rule);
  }

  .button--inverse,
  .button--inverse-outline {
    color: var(--color-ink);
    border-color: var(--color-rule);
  }

  /* FAQ は紙では全問を開いた状態で刷る(閉じている details の中身は
     描画されず、質問だけが並んだ紙になってしまう)。
     エンジンによって「閉じた中身」の隠し方が違うため両方を書く:
       ::details-content … 新しいエンジン(この擬似要素で隠している)
       > .faq__a          … 旧エンジン(スロットごと非表示)向けの保険
     ::details-content を知らないブラウザはそのルールだけを捨てる
     (他のルールを巻き込まないよう独立した宣言ブロックにしてある)。
     開閉マーカーは紙では意味を持たないので消す。 */
  .faq__item::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .faq__item > .faq__a {
    display: block;
  }

  .faq__q::before,
  .faq__q::after {
    display: none;
  }
}