/* aliz-corporate-web のスタイル（PoC-1 の試作から移設。TASK-2）。
  検討中の値: 視差の量と量の読み方（MOTION-7。量と読み方は依頼者の回答済み〔spec#12 問 3-1・spec#18 問 2〕だが spec は検討中。値と根拠は視差の節）・行間と行の長さ（TYPE-5。--lh-*・--measure-body）・ガラスの質感（GLASS-5。--glass-alpha・--glass-blur。依頼者はガラス 4 種を調整なしで採った〔2026-11-03、決定 ID なし・spec は検討中〕ため値は初期値のまま。調整が出たら差し替える）・書体の組（TYPE-2・検討中。assets/fonts.tsv）・動きの長さの秒数（MOTION-2。--dur-*。2 段の構成は回答済み〔D-2026-11-06-4〕）・段階 5 の扉の角度と視点（TOP-22。--door-*）は決定後に差し替える。
  色の値は直下の「色の設計トークン」の区画だけで定義する（SHAPE-4・TASK-10-1）。ほかの場所には色の値を直接書かず、var(--…) で参照する。
  濃淡は不透明度で出し、色は増やさない。ブランドカラーは「役割を得る瞬間（段階 6）」「操作部品のフォーカスと選択」「ロゴ」にだけ使う。 */
/* 色の設計トークン（SHAPE-4: 基本の 4 色とロゴ由来の色。色の値を持つ唯一の区画）。
  --bg=白・--ink=墨・--sub=灰・--line=薄い灰、--deep=ロゴ由来の色。
  --deep はグラデーション 5 色の終点も兼ねる（figures.rs の gLight の終点が var(--deep) を参照）ため、5 色目の別名は作らない。
  --grad-1〜--grad-4 はグラデーションの中間色（図版 gLight の stop が var() で参照）。
  濃淡は新しい色にせず color-mix(… transparent)・fill-opacity 等の不透明度で出す。
  庭の光（GARDEN-25）は依頼者が「実際に光る所にだけ使う（現状の色づかい）」を採った（2026-11-03、決定 ID なし・spec は検討中。TASK-105-5）ため、ここに足す色は無い。既存の --grad-*・--deep を使い、時間帯ごとの値は assets/garden/light.config.js が持つ。灰へ切り替える設定の置き場所は assets/garden/occasion-light.config.js（TASK-34-3）。
  入力エラーの表示（TASK-65-2）はパレット外の赤を足さず、墨・枠の濃さ・文言の前の円（形）で示す。CONTACT-7（検討中）の「赤」は SHAPE-4 と食い違うため、spec の決定（spec リポの Issue）が出るまで実装しない。
  main.rs のテスト（TASK-10-1）が、この区画の外の色の直書きと定義の重複を検出する。
  走査対象は site.css のこの区画の外のほか、figures::tokens_css() の出力（tokens.css）と書体の CSS（fonts::site_css()・fonts::sample_css()・type.css）。そこに色の定義があれば「site.css の外にある」として失敗させる。 */
:root {
  --bg: #FFFFFF; --ink: #1F252C; --sub: #5F6770; --line: #A9B0B8; --deep: #275CC2;
  --grad-1: #52E5E7; --grad-2: #50E0E5; --grad-3: #49C8E1; --grad-4: #388FD4;
}
/* 寸法・書体の設計トークン（色は上の区画に置く） */
:root {
  color-scheme: light;
  /* SHAPE-14（検討中・根拠は DP-4【提案】のみ）・TASK-11-1: 余白と間隔の基準単位の唯一の定義。
      margin・padding・gap などの間隔は calc(var(--u) * n) の倍数で書き、値を直書きしない。
      8px は PoC-1 の値のままの仮の値で spec の値ではない。TASK-105（PoC-12 論点 3・TYPE-2）の後、
      TASK-11-3 の見本で決め、この 1 行だけを差し替える。
      --scroll-pad-top などのトークンと、type.css・header-menu.css・pages.rs の見本のインライン style もこの値を参照する。
      定義が 1 か所であることは src/main.rs の spacing_base_unit_is_a_single_token が守る。
      直書きの px も倍数にする。計算後の px の点検は check/spacing-unit.mjs（TASK-11-6）。
      NAV-7（確定）の値（--nav-pad-narrow の 6px と .brand の押せる範囲の補正）だけは倍数でなく、点検の例外表（E1・E2）に ID 付きで載せている */
  --u: 8px;
  /* 繰り返す寸法の設計トークン（操作対象の最小高さ・フォーカス輪・角丸）。値は PoC-3 の実測のまま */
  --target-min: 44px;
  /* NAV-5（確定）・PoC-3・TASK-50-1: スキップリンクの大きさ 114×48 px。.skip の min-width・min-height が参照する下限で、文字の行の高さ（--lh-body）や字幅に左右されない。
    文字が 200% になれば箱は下限を超えて広がり、切り取らない（A11Y-4）。値を変えるときはこの 1 行だけを差し替える */
  --skip-w: 114px; --skip-h: 48px;
  --focus-w: 2px; --focus-offset: 3px; --focus-offset-s: 2px;
  /* SHAPE-7（検討中・根拠は DP-11【提案】のみ）・TASK-12-1: フォーカスの輪と要素の間の「切れ目」の幅。
    切れ目の有無はこの 1 か所で切り替える（0px = なし、正の長さ = あり）。依頼者は切れ目を置かない版を採った
    （2026-11-06、PoC-12 第 3 回 shape-7、D-2026-11-06-4 (4)。SHAPE-7 の行は spec で検討中のままのため確定とは扱わない）。既定の 0px のまま値は変えていない（TASK-108-8 で注記のみ反映）。
    切れ目ありへ変える場合もこの値だけを差し替える（A11Y-10 の 2 px 実線 --deep は変えない）。
    切れ目ありの 4px は採らなかった版の点検用の値で spec の値ではなく、check/focus-variants.mjs（TASK-12-2）が同名の変数で両版を上書きして点検する。
    単位なしの 0 だと calc(3px + 0) が無効になるので必ず単位付き。切れ目は透明な隙間で、白い地（SHAPE-4）の上で白く見える【提案】。
    box-shadow の層は足さない（GLASS-3 の外側の影 1 層の点検 check/glass-edge.mjs を保つ）。NAV-3: 輪が固定ヘッダーに隠れない確認は focus-stops.mjs */
  --focus-gap: 0px;
  /* CONTACT-7・TASK-65-2: 小さな円（.road .dot・.kind .dot とエラー文言の前の円）の直径の唯一の定義。値は PoC-1 のまま。変えるときはこの 1 行だけを差し替える。点検は src/main.rs の contact_error_style_problems */
  --dot-size: 8px;
  --radius-s: 4px; --radius-m: 8px; --radius-pill: 999px;
  /* GLASS-2・GLASS-5（検討中・PoC-12 論点 2）: ガラスの面の白の割合とぼかしの量。
    依頼者はガラス 4 種を採り、調整の指示は無い（2026-11-03、aliz-corporate-web-spec#12、TASK-105-2）ため値は変えていない。
    調整が出たらここだけを差し替える（@supports の中の .glass が参照する唯一の定義）。調整後も GLASS-1〜GLASS-4 を満たすこと */
  --glass-alpha: 84%; --glass-blur: 14px;
  /* TOP-22（検討中）: 段階 5 の扉の開いた角度と視点。PoC-13 の【提案】の値のまま置き、確定は TASK-132 で差し替える（この 3 つが唯一の定義）。
    --door-persp は cqw なので、container-type を持つ .fig3d の内側（.persp）で解決される */
  --door-open-deg: 99.214deg; --door-persp: 71.93cqw; --door-persp-origin: 50% 64%;
  /* MOTION-2（検討中・根拠は DP-7【提案】のみ）・TASK-23-1: 動きの長さ 2 段（操作への応答は短く、形の変化はゆっくり）の唯一の定義。
    値は制作側の仮の値で spec の値ではない。依頼者は 2 段の分け方と、形の変化をスクロール駆動のままにすることを採った
    （2026-11-06、PoC-12 第 3 回 motion-2、D-2026-11-06-4 (4)。MOTION-2 の行は spec で検討中のままのため確定とは扱わない。TASK-108-8 で注記のみ反映）。
    秒数は「いま決めない」で、値は仮のまま変えていない。動きを見比べられるようになってから改めて聞く（時期は未定）。差し替えはこの行だけ。
    物語の形の変化はスクロール駆動で、この値を参照しない（MOTION-3）。現時点で参照する宣言は 0 件。
    時間で動くものを足す側は直書きせず var() で参照し、形の変化は 1 回だけ再生する。足すときは A11Y-11 の点検をやり直し、
    check/motion-search.mjs は括弧の外の var(--dur-*) の完全一致の参照だけ通す（TASK-23-2 で決定）。点検は src/main.rs の motion_duration_token_problems と check/motion-durations.mjs */
  --dur-response: 150ms; --dur-shape: 600ms;
  /* --logo-h・--logo-clear・--line-w は figures.rs の tokens_css が生成する唯一の定義（SHAPE-8）。ここには書かない */
  /* 固定ヘッダーの高さの唯一の定義（既定=デスクトップ。幅 520 px 以下の値は直後の @media で上書きする）。
    .site-header の min-height・.wrap の上の余白・--scroll-pad-top が参照する。NAV-3・NAV-7・PoC-3（デスクトップの値は PoC-1 由来で spec に明示の値はない） */
  --header-h: 64px;
  /* NAV-11（検討中）・TASK-54-2: 文字だけを拡大したとき固定ヘッダーが伸びて --header-h を超えるぶんを scroll-padding-top に足す。
    #601 の記録（docs/records/task-54-inspection.md）の B 案（追従）を実装したもので、記録の確定待ち。
    増分は html の文字の大きさ（1rem）が --text-base（ブラウザ既定の 16px）を超えたぶんの --header-text-grow-k 倍。既定の大きさでは 0 で、値は変わらない。
    B 案の選定理由は上の記録にあるが、係数 2.5 は記録の値ではない。320〜640px 幅の 200% 模擬（Chromium・--fonts off）の実測からの制作側の【提案】で spec の値ではなく、実測の記録はまだ無い（記録するまで確定扱いにしない）。差し替えはこの 1 行。
    実機で 1rem が文字サイズ設定に追従するかは未確認（VERIFY-9・TASK-116）。PERF-4 のため JS は使わない */
  --text-base: 16px;
  --header-text-grow-k: 2.5;
  --header-text-grow: max(0px, calc((1rem - var(--text-base)) * var(--header-text-grow-k)));
  /* アンカー移動・フォーカス時に見出しや操作部品が固定ヘッダーの下へ潜らないための上の余白（html の scroll-padding-top が参照する唯一の定義）。
    ヘッダーの高さ以上であること（NAV-3・WCAG 2.4.11）。文字拡大への追従は上の --header-text-grow（NAV-11） */
  --scroll-pad-top: calc(var(--header-h) + var(--u) * 2 + var(--header-text-grow));
  /* Tab で止まった要素の輪の下の辺が画面の下端で切れないための下の余白（html の scroll-padding-bottom が参照する唯一の定義。A11Y-10・SHAPE-7・#1759）。
    輪は要素から offset（--focus-offset と --focus-offset-s の大きいほう）+ --focus-gap + --focus-w だけ外へ出る。これが無いと、ブラウザは要素の下端を画面の下端にそろえるだけで止め、輪の外側が画面外になる。
    --u を足すのは輪と画面の端の間に隙間を残すため（制作側の【提案】で spec の値ではない）。理由と測定は docs/records/task-123-inspection.md の「下の辺が描かれない原因」 */
  --scroll-pad-bottom: calc(max(var(--focus-offset), var(--focus-offset-s)) + var(--focus-gap) + var(--focus-w) + var(--u));
  /* 複数行の入力欄（textarea）が画面の下端にかかるときの下の余白。Chromium は入力欄に焦点を移すとき箱ではなくキャレットの行を見せるため、上の値（13px）だと箱の下半分が画面外のままスクロールしない。
    入力欄の高さ（既定で約 191px）+ 輪より大きくすると、上端が余白の帯に入って箱ごと寄る。html:has(textarea:focus) の間だけ当てる。
    200px は実測（幅 1280・高さ 800 で 112px はスクロール 0、120px は 8px で輪が切れたまま、200px で箱が全部入る）からの制作側の【提案】。resize: vertical で伸ばした後は保証しない */
  --scroll-pad-bottom-textarea: 200px;
  /* UI の小さい文字サイズの段 --fs-xs〜--fs-l（繰り返し使う値の唯一の定義。type.css からも参照する） */
  --fs-xs: 12px; --fs-s: 13px; --fs-m: 14px; --fs-l: 15px;
  /* TYPE-5（検討中）・TASK-17-1: 文字の大きさ 4 段（本文・小見出し・見出し・表示〔トップの 1 行〕）と比率 1 つの唯一の定義。
    値は仮で spec の値ではない（本文は PoC-1 の 16px、比率は現行の見出しの最大値 26・31・40px を本文から 1〜3 乗で最もよく再現する値〔対数の最小二乗〕）。
    TASK-105（PoC-12 論点 3）の後、TASK-17-4 の見本で決めて --fs-body・--fs-ratio の 2 つだけを差し替える。上 3 段は比率からの導出なので直接書き換えない。
    上の --fs-xs〜--fs-l は UI の小さい文字の段で、この 4 段の外にある（4 種類への収束は TASK-17 の後続） */
  --fs-body: 16px;
  /* TASK-78-5: 道のラベルを上へ送る係数（文字 200% で薄い余白が残る値。制作側の【提案】。文字 100% では 0 になる） */
  --road-label-lift: 2;
  --fs-ratio: 1.385;
  --fs-sub: calc(var(--fs-body) * var(--fs-ratio));
  --fs-heading: calc(var(--fs-sub) * var(--fs-ratio));
  --fs-display: calc(var(--fs-heading) * var(--fs-ratio));
  /* 文字の太さの段（太さ 2 段の唯一の定義。TYPE-5 検討中・TASK-17-2）。値は和文のウェイト 400・500（TYPE-1 確定）で、assets/fonts.tsv の site の jp 行と一致させる。
    TASK-105・TYPE-2 の決定後はこの行と fonts.tsv を一緒に変える（src/main.rs のテストが一致を守る）。他の場所に太さの数値を書かず var(--fw-*) で参照する */
  --fw-regular: 400; --fw-medium: 500;
  /* NAV-7・TASK-49: 幅 360 px 以下のヘッダーのリンクの余白（確定）と文字。文字は TYPE-11（検討中）。ここの 12 px は 3 リンクの作り（--header-menu off・popover 非対応）用で、
    3 リンクの作りは 12.3 px までしか NAV-7 を満たさないため値を変えない（測定は docs/records/task-106-inspection.md の TASK-106-10 の 9。#1722）。
    メニューの作り（既定）の「相談する」は header-menu.css が --nav-fs-narrow を --nav-fs-narrow-menu（PoC-12 論点 9 の回答で 12 px より少し大きく）に上書きする。メニューの作りの「メニュー」ボタンは別の段（header-menu.css）。
    差し替え手順: メニューの作りの文字は --nav-fs-narrow-menu を変える。ここを上げるのは 3 リンクの作りで NAV-7 を満たすと測れた場合だけ（共有トークンを単純に上げない）。--nav-pad-narrow は確定値で変えない */
  --nav-pad-narrow: 6px; --nav-fs-narrow: var(--fs-xs);
  /* 代わりの書体の並びの唯一の定義。--fonts on のとき fonts::site_css() が --font の先頭に採る組を足す */
  --font-fallback: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font: var(--font-fallback);
  /* ガラスの縁と影（GLASS-3・TASK-19-3・DP-6・PoC-4）。光は右上から: 右上の縁は白 1 px、左下の縁は灰 22% の 1 px、影は左下へ短く 1 段。
    色は白・灰・墨だけ（SHAPE-4）。ブランドカラー（--deep・--grad-*）は使わない（SHAPE-5）。縁は border-color ではなく inset の box-shadow で表す。
    影の濃さ（墨 9%）は spec の決めた値ではなく PoC-4 の値。GLASS-3 が決めるのはオフセット（x ≤ 0・y ≥ 0）・縁の色・1 段であること。
    GLASS-5 の調整の指示は無く（2026-11-03）、値は変えていない。調整が出たらこの 2 行の差し替えだけで済ませる。
    外側の影（--glass-shadow）を持つのは相談ボタン・段階 3 の道・依頼の種類の 3 種だけ。ヘッダー（.site-header）は PoC-4 のまま縁（--glass-edge）だけで、外側の影を持たない。 */
  --glass-edge: inset -1px 1px 0 var(--bg), inset 1px -1px 0 color-mix(in srgb, var(--sub) 22%, transparent);
  --glass-shadow: -2px 3px 6px color-mix(in srgb, var(--ink) 9%, transparent);
  /* 行間と本文の行の長さ（TYPE-5・TASK-17-3）。値はここ 1 か所だけで持ち、ほかは var() で参照する。
    TYPE-5（検討中・根拠は DP-3【提案】のみ）: 仮の値。TASK-105（PoC-12 論点 3）の後、TASK-17-4 の見本で確定してここだけ差し替える。
    --lh-body は本文、--lh-heading は見出し（表示・見出し・小見出し）で共有する。--measure-body は文章の塊の max-width（和文 1 字 ≒ 1em）。
    見出しの長さ（1 行・目安 15 字）は src/copy.rs の HEADING_MAX_CHARS が唯一の置き場所で、CSS では持たない。 */
  --lh-body: 1.8;
  --lh-heading: 1.4;
  --measure-body: 40em;
}
/* popover 非対応のブラウザと --header-menu off での、スマートフォン幅で 3 リンクが 2 段目に並ぶ高さ。NAV-7（--header-h 108 px・scroll-padding-top 124 px を超えない）・PoC-3。
  NAV-4（spec は検討中）の依頼者の回答（2026-11-04・05、aliz-corporate-web-spec#13、spec 本体の更新待ち）で、既定の高さは header-menu.css の --header-h-menu が持つ。
  既定の高さを変えるときはそちらを変える */
@media (max-width: 520px) {
  :root { --header-h: 108px; }
}
/* 間隔の規則の設計トークン（SHAPE-14〔検討中・根拠は DP-4【提案】のみ〕・TASK-11-2）。区切りは罫線ではなく余白でつける。
  関係の近いものほど間を狭くする段 --sp-bound < --sp-near < --sp-block < --sp-group < --sp-section は、基準単位 --u（TASK-11-1 の担当）の正の整数倍。
  倍率は【提案】で spec の値ではない。TASK-11-3 の見本で決めて、この区画の値だけを差し替える（端数の倍率を足さない）。
  見出しの上（--sp-heading-above）は下（--sp-heading-below）より広い。見出しの前置き（段階の番号）の直後だけは --sp-bound を使う（前置きと見出しで 1 つのまとまり）。
  「区切りの罫線」（TASK-11-4 の読み。【提案】で spec の定義ではない）は、片側の border・`<hr>`・まとまりを分ける線の疑似要素。
  操作部品の 4 辺の枠線・フォーカスの outline・ガラスの inset の box-shadow（GLASS-3）・図形の線（SHAPE-1）は区切りではない。検査は src/main.rs の divider_border_problems。
  構造の検査は src/main.rs の spacing_rule_problems。計算後の px が基準単位の倍数に収まるかの点検は check/spacing-unit.mjs（TASK-11-6。例外は NAV-7 の E1・E2 だけ） */
:root {
  --sp-bound: var(--u);
  --sp-near: calc(var(--u) * 2);
  --sp-block: calc(var(--u) * 3);
  --sp-group: calc(var(--u) * 4);
  --sp-section: calc(var(--u) * 6);
  --sp-heading-below: var(--sp-near);
  --sp-heading-above: var(--sp-section);
}
* { box-sizing: border-box; }
/* 見出しの行間は 1 か所のトークンを参照する（TYPE-5・TASK-17-3）。個別の見出しに値を書かない。 */
h1, h2, h3 { line-height: var(--lh-heading); }
html { scroll-padding-top: var(--scroll-pad-top); scroll-padding-bottom: var(--scroll-pad-bottom); }
html:has(.field textarea:focus) { scroll-padding-bottom: var(--scroll-pad-bottom-textarea); }
/* SHAPE-4・TASK-10-2: ページの背景は白の単色（--bg）。背景のグラデーション・パターン・過去案の領域色を使わない。点検は check/page-background.mjs */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: var(--focus-w) solid var(--deep);outline-offset: calc(var(--focus-offset) + var(--focus-gap)); border-radius: var(--radius-s); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--u); top: -100vh; z-index: 30; display: flex; align-items: center; justify-content: center; min-width: var(--skip-w); min-height: var(--skip-h); background: var(--bg); color: var(--ink); padding: var(--u) calc(var(--u) * 2); border: 1px solid var(--line); border-radius: var(--radius-m); }
/* NAV-3・NAV-5・TASK-49-9: フォーカス時は固定ヘッダー（--header-h）の直下に出し、ヘッダーと 1 点も重ならないようにする（WCAG 2.4.11）。
  以前の top: var(--u) は角丸（--radius-m）の角の外側でヘッダーが最前面になり、check/focus-stops.mjs が「完全に隠れる」と判定した。
  ヘッダーの高さは :root の --header-h（幅 520 px 以下で 108 px、メニューボタンの作りでは --header-h-menu）に追従する。大きさ 114×48 px は :root の --skip-w・--skip-h で持つ（NAV-5・PoC-3・TASK-50-1）。 */
.skip:focus { top: calc(var(--header-h) + var(--u)); }
/* NAV-5・TASK-50-2: position: fixed にして、スクロールしてもフォーカス中のスキップリンクが固定ヘッダーの矩形に入らないようにする（absolute だと文書の先頭に付き、スクロール後はヘッダーの内側へ収まる）。
  非フォーカス時の top: -100vh は画面の高さ基準で、文字が大きくなって箱が伸びても画面内に入らない（px の固定値だと 300% 相当ではみ出す）。
  z-index: 30 はヘッダー（20）より手前。「1 点も重ならない」は通常の文字の大きさの話で、文字 200% でヘッダーが伸びて矩形が交わっても手前に出る。
  top layer の .menu-pop には z-index で勝てないため、header-menu.css 側でフォーカス中だけパネルを隠す。点検は src/main.rs の skip_link_front_problems */

/* 固定ヘッダー（操作層）。上下の余白と gap は L-2（--logo-clear。BRAND-5・TASK-8-8）を下限にする。
  ガラス質感（`.glass`）は下の「操作層のガラス」で重ねる（PoC-4）。
  本文との境は罫線ではなく余白とガラスの面でつける（SHAPE-14〔検討中〕・DP-4【提案】・TASK-11-4）。下辺の灰は GLASS-3 の縁で、罫線ではない */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 20; min-height: var(--header-h); background: var(--bg);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: max(var(--u), var(--logo-clear)) max(calc(var(--u) * 2), var(--logo-clear)); padding: max(var(--u), var(--logo-clear)) max(calc(var(--u) * 2), env(safe-area-inset-right, 0px)) max(var(--u), var(--logo-clear)) max(calc(var(--u) * 2), env(safe-area-inset-left, 0px)); }
/* NAV-7・A11Y-3・TASK-49-4: ロゴのリンクの押せる範囲を高さ --target-min 以上にし、見た目は --logo-h のまま保つ（PoC-3 の修正 1）。
  負のマージンは (--logo-h − --target-min) / 2 を導出し、値の直書きをしない（見た目の高さは L-1（承認済み）、押せる範囲は NAV-7（確定）・A11Y-3）。
  正にならないよう min(0px, …) で抑える。大きさは .site-header の上下の余白（--u）以内でなければ押せる範囲が画面の外へ出る。
  幅は <img> の縦横比で 44 px 以上が出るため min-width は置かない */
.brand { display: flex; align-items: center; min-height: var(--target-min); margin-block: min(0px, calc((var(--logo-h) - var(--target-min)) / 2)); line-height: 0; border-radius: var(--radius-s); }
.brand img { height: var(--logo-h); width: auto; display: block; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0 calc(var(--u) * 1); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--u); font-size: var(--fs-m); text-decoration: none; border-radius: var(--radius-pill); }
.site-nav a:hover, .site-nav a:focus-visible { background: color-mix(in srgb, var(--line) 22%, transparent); } /* A11Y-8: ホバーで灯る背景はフォーカスでも同じ値で灯る（輪は全体の :focus-visible。A11Y-10） */
.site-nav a[aria-current="page"] { text-decoration: underline; }
.site-nav a.cta { border: 1px solid var(--ink); }
@media (max-width: 520px) {
  .site-nav { width: 100%; justify-content: space-between; }
  .site-nav a { padding: 0 var(--u); font-size: var(--fs-s); }
}
/* 幅 360 px 以下: 3 つのリンクが 1 行に収まるよう文字と余白を詰める。メニューの作りでは「相談する」にも当たる（収まらないとヘッダーが 3 段になり、--header-h と scroll-padding-top を超える。NAV-7・TASK-49・PoC-3。値は :root の --nav-pad-narrow・--nav-fs-narrow。文字は TYPE-11 検討中。メニューの作りは header-menu.css が上書き） */
@media (max-width: 360px) {
  .site-nav a { padding: 0 var(--nav-pad-narrow); font-size: var(--nav-fs-narrow); }
}

.wrap { max-width: 1120px; margin: 0 auto; padding: calc(var(--header-h) + var(--u) * 6) max(calc(var(--u) * 2), env(safe-area-inset-right, 0px)) calc(var(--u) * 12) max(calc(var(--u) * 2), env(safe-area-inset-left, 0px)); }
.hero { padding-block: calc(var(--u) * 10) calc(var(--u) * 8); max-width: 760px; }
/* TYPE-8: 書体の入れ替わりの前後でトップの見出しの改行位置を変えない。font-kerning: none で採用書体の行は据え置きのまま、代替書体との分割点の反転（text-wrap: balance との組み合わせ）が消える。
依頼者の決定 2026-11-05（spec リポの Fandhe-AI/aliz-corporate-web-spec#15）。測定は docs/records/task-18-inspection.md の TASK-18（#335）の節。他の見出しは変えない */
.hero h1 { margin: 0; font-weight: var(--fw-medium); font-size: clamp(26px, 4.4vw, 40px); letter-spacing: .04em; text-wrap: balance; font-kerning: none; }
.hero p { margin: var(--sp-heading-below) 0 0; color: var(--sub); max-width: var(--measure-body); }

/* 物語の段階 */
.stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-section); align-items: center; padding-block: var(--sp-section); }
.stage-fig { view-timeline: --fig block, --fig-par block; view-timeline-inset: auto, 0; }
/* MOTION-10【依頼者の回答】（spec#18 問 1。決定 ID なし）: 段階 6 の図が画面の中央に来る位置で視差のずれ 0。
  視差の層だけ別名の --fig-par を使い、inset を 0 にする（この 1 行が唯一の置き場所）。--fig は html の scroll-padding（ヘッダーぶんの上の余白）で
  範囲が縮み、cover 50% が画面の中央から約 35px（探りの傾きからの導出）ずれて subtle で ty が約 0.3px 残ったため。.stage-fig は段階 0〜6 に付くので [data-par] の 4 要素すべての ty 0 の位置に効く（量は不変）（docs/records/task-24-parallax-amount.md 10 節）。 */
.fig { width: 100%; max-width: 440px; height: auto; display: block; margin-inline: auto; overflow: visible; }
/* 進め方の図の段階 3（SVC-4・TASK-55-3）: 図の外枠。道の語（HTML）を端の点に重ねる。
最大幅は .fig と同じ（位置が % のため。幅 760px 以下の値も揃える）。色・大きさは body から継承し、ブランドカラー・ガラスは使わない。 */
.process-fig-labeled { position: relative; width: 100%; max-width: 440px; margin-inline: auto; }
.process-road-label { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; line-height: var(--lh-heading); }
.process-road-label[data-place="below"] { transform: translate(-50%, 0); }
/* TASK-78-5（A11Y-4）: 文字 200% で左へ寄せた「見直す」が隣の「進む」と重なるのを、上へ送って避ける。
    送る量 = min(0, --fs-body - 1em) × --road-label-lift。文字 100% は 1em = --fs-body で 0（見た目は変わらない）、大きいほど負の値で上へ。 */
.process-road-label[data-lift] { margin-top: calc(min(0px, var(--fs-body) - 1em) * var(--road-label-lift)); }
/* 対応図（SVC-1・TASK-56-2）: 外枠の最大幅は .fig と同じ（ラベルの % の位置を図とずらさない）。位置・幅は figures.rs の scope_map がインラインで渡す。
    TASK-56-3: 線の太さ・色は .fig の .ln / .ln-ink（進め方の図と共通）。文字は --fs-m のまま、折り返しを許し、長い呼び名は anywhere で折る（nowrap は文字 200% で横スクロールの原因）。色・動きは足さない */
.scope-map-fig { position: relative; width: 100%; max-width: 440px; margin: var(--sp-heading-below) auto 0; }
.scope-map-label { position: absolute; transform: translateY(-50%); font-size: var(--fs-m); line-height: var(--lh-heading); overflow-wrap: anywhere; }
.scope-map-label[data-col="kind"] { text-align: right; }
.stage-n { margin: 0; color: var(--sub); font-size: var(--fs-s); letter-spacing: .06em; }
/* TYPE-5: 太さを 2 段に収めるため、数字の 300 をやめて regular にした */
.stage-n span { font-size: 28px; color: var(--ink); line-height: 1; margin-right: var(--sp-bound); font-weight: var(--fw-regular); }
.stage h2 { margin: var(--sp-bound) 0 0; font-weight: var(--fw-medium); font-size: clamp(22px, 3vw, 30px); letter-spacing: .05em; }
.stage-desc { margin: var(--sp-heading-below) 0 0; max-width: var(--measure-body); }
.quote { margin: var(--sp-near) 0 0; max-width: var(--measure-body); }
@media (max-width: 760px) { .stage { grid-template-columns: minmax(0, 1fr); gap: var(--sp-near); } .fig { max-width: 340px; } .process-fig-labeled { max-width: 340px; } .scope-map-fig { max-width: 340px; } }
/* 段階 5 の図（TOP-21・TASK-131-3）: 外枠 .fig3d の中に土台の svg・.persp・板の svg 2 つを同じ箱へ重ねる。
    SVG の子要素の 3D 変形は平らにつぶれる（PoC-13 結果 2）ため、板は別ルートの svg に分ける。
    子がすべて絶対配置で外枠の高さが 0 になるので aspect-ratio（viewBox 240x200）が要る。
    蝶番は図の幅の 35%・65%（制作側の【提案】。figures.rs の DOOR_X0・DOOR_X1 の比）。
    視点（TASK-131-4）: perspective は図の幅の 71.93cqw、perspective-origin は図の中心 x 50%・y 64%（128/200）。
    TOP-21 (5)【提案】・PoC-13（scene.css の導出）。角度と組なので TOP-22（検討中）で変わりうる。値は :root の --door-persp・--door-persp-origin だけで持つ（PoC-13 取り込み TASK-131-1）。
    視点はスクロールで動かさず、基準のスタイルに置いて 3 状態で同じにする（TOP-21 (8)）。場面全体の拡大・移動は 0。
    cqw は祖先の query container を基準にするため、.fig3d を container にする（container-type は TASK-131-2 で付与済み。登録しない変数は使う .persp で置き換わる）。
    rotateY は下の .leaf-l・.leaf-r（TASK-131-5）。 */
.fig3d { position: relative; aspect-ratio: 240 / 200; container-type: inline-size; }
.fig3d .part { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
/* overflow: clip は #1328 の対策: 板の svg は箱いっぱい（240x200 の全幅）で、蝶番の外側の角が 約 99 度の Y 軸回転 で視点の面に近づく（z が perspective の約 9 割）。
    その箱の投影が 8〜9 倍に伸び、isMobile の Chromium で横幅が 838〜1015 に広がる。描く板の形は箱の内側に収まる（投影しても図の枠内）ので、.persp の箱で切っても見た目は変わらない。
    A11Y-3（横スクロールを出さない）。clip は scrollable overflow に数えないので sticky を壊さない */
.persp { position: absolute; inset: 0; perspective: var(--door-persp); perspective-origin: var(--door-persp-origin); overflow: clip; }
.leaf-l { transform-origin: 35% 50%; }
.leaf-r { transform-origin: 65% 50%; }
/* TASK-131-5・TOP-21 (3)(8): 基準のスタイルは終わりの姿（回転済み）。角度は :root の --door-open-deg だけで持ち、左右は符号違い。
    動きの条件の外に置くので、非対応・動きを減らす・JS 無効の 3 状態で同じ姿になる。閉じた姿からの回転は下の @keyframes door-l・door-r（スクロール駆動）。
    TOP-22 の案 A（制作側の【提案】・推奨。検討中。TASK-132-1）の基準スタイルで、動かない 3 状態ではこの回転済みの板がそのまま完成図になる。
    条件の外にあることは src/main.rs の stage5_leaf_rotation_is_ungated_base_style が検査する */
.leaf-l { transform: rotateY(calc(-1 * var(--door-open-deg))); }
.leaf-r { transform: rotateY(var(--door-open-deg)); }

/* 3 つの道（段階 3）の色の変化（TOP-7・SHAPE-5・TASK-39-7・A-2026-11-01-7 の (2)）。3 状態に分ける。
表示（既定）は無彩色のトークン（--line・--ink・--bg）だけ。フォーカス（:focus-visible）は輪だけが --deep、選択（:checked）は枠・文字・点が --deep になる。
ブランドカラーはこの 2 状態以外に使わない（:hover にも使わない）。切り替えは :has()・:checked・:focus-visible だけで JS は使わない。
transition・animation は付けない（時間で再生する動きではなく、TOP-6 のスクロール駆動の 5 つにも数えない）。動きの条件（@supports・prefers-reduced-motion・scripting）の外に置き、3 状態（非対応・動きを減らす・JS 無効）のどれでも同じに効かせる。
規則は依頼の種類（.kind）と共有。点検: 構造は src/main.rs の road_color_problems（cargo test）、描画後の全ページは check/brand-color.mjs */
.roads { border: 0; margin: var(--sp-block) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-bound); }
.roads legend { padding: 0; margin-bottom: var(--sp-bound); color: var(--sub); font-size: var(--fs-s); }
/* 段階 3 の道（.road）と依頼の種類（.kind）はガラス 4 部品のうちの 2 種。ガラスは label / a 自体に付け、見出し・段落・凡例を持つ入れ物（.roads・.kinds・fieldset）には付けない（GLASS-1・TASK-19-5） */
.road, .kind { position: relative; display: inline-flex; align-items: center; gap: var(--u); min-height: var(--target-min); padding: 0 calc(var(--u) * 2); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg); cursor: pointer; font-size: var(--fs-l); text-decoration: none; color: var(--ink); }
/* 3 つの道の押せる範囲（TOP-7・A11Y-3・TASK-39-6）。高さは共有規則の min-height、幅はここで --target-min に結ぶ（値の正は :root の --target-min 1 か所）。
input の矩形は label の外縁に合わせる（inset: -1px は .road の枠線 1px が前提。枠線の太さを変えたら一緒に変える）。
input を display: none・visibility: hidden・pointer-events: none にしない（Tab の止まり位置と押せる範囲が消える。A11Y-2） */
.road { min-width: var(--target-min); justify-content: center; }
.road input { position: absolute; inset: -1px; opacity: 0; margin: 0; cursor: pointer; }
.road .dot, .kind .dot { width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: var(--line); flex: none; }
.road:has(input:checked), .kind:has(input:checked) { border-color: var(--deep); color: var(--deep); }
.road:has(input:checked) .dot, .kind:has(input:checked) .dot { background: var(--deep); }
.road:has(input:focus-visible), .kind:has(input:focus-visible) { outline: var(--focus-w) solid var(--deep); outline-offset: calc(var(--focus-offset) + var(--focus-gap)); }

/* 依頼の種類（物語の終わり）。選ぶと相談ページへ移る */
.kinds { padding-block: calc(var(--u) * 8) calc(var(--u) * 4); }
.kinds h2 { margin: 0; font-weight: var(--fw-medium); font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .05em; }
.kinds p { margin: var(--sp-heading-below) 0 0; color: var(--sub); max-width: var(--measure-body); }
.kind-list { list-style: none; margin: var(--sp-block) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-bound); }
/* A11Y-8: ホバーで変わる枠線の色（墨）はフォーカスでも同じ値にする（ホバーにブランドカラーは使えない）。文字と点の --deep、輪は従来どおり（A11Y-10） */
a.kind:hover, a.kind:focus-visible { border-color: var(--ink); }
a.kind:focus-visible { color: var(--deep); }
a.kind:focus-visible .dot { background: var(--deep); }

/* 制作実績の節（TOP-17・検討中）。会社名だけを静かに並べる。リンクではないので操作の見た目を持たない */
.works { padding-block: var(--sp-section) 0; }
.works h2, .scope-map h2, .name-origin h2, .about-stance h2, .about-profile h2 { margin: 0; font-weight: var(--fw-medium); font-size: clamp(20px, 2.6vw, 26px); letter-spacing: .05em; }
.works-list { list-style: none; margin: var(--sp-heading-below) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-bound) var(--sp-near); color: var(--sub); font-size: var(--fs-l); }
.works-list li { overflow-wrap: anywhere; }

/* 図の近くの文章（TASK-56-5・SVC-1・TOP-19）。見出しの書体は .works h2 と共通 */
.scope-map { padding-block: 0 var(--sp-section); }
.scope-map p { margin: var(--sp-heading-below) 0 0; color: var(--sub); max-width: var(--measure-body); }
/* ABOUT-1・TOP-15・TASK-59-3: 名前の由来の節。扉の先でも効くよう .page で限定しない。本文の色を継ぐ */
.name-origin { padding-block: var(--sp-group) 0; }
.name-origin p { margin: var(--sp-heading-below) 0 0; max-width: var(--measure-body); }
/* 考え方の節（ABOUT-2・TASK-59-2）。見出しの書体は .works h2 と共通。4 点は見出しにせず一覧で並べる */
.about-stance { padding-block: 0 var(--sp-section); }
.about-stance-list { list-style: none; margin: var(--sp-heading-below) 0 0; padding: 0; display: grid; gap: var(--sp-near); max-width: var(--measure-body); }
/* 会社概要の表（ABOUT-5・TASK-100-5）。罫線は引かず余白で区切る。狭い幅では項目名と値が縦に積み、広い幅で 2 列になる */
.about-profile { padding-block: var(--sp-group) var(--sp-section); }
.about-profile-list { margin: var(--sp-heading-below) 0 0; padding: 0; display: grid; gap: var(--sp-near); max-width: var(--measure-body); }
.about-profile-list dt { margin: 0; color: var(--sub); }
.about-profile-list dd { margin: 0; overflow-wrap: anywhere; }
/* 代表の行（ABOUT-6・TASK-100-9）。画像と役職の文字だけを横に並べる。
  画像の表示の一辺は --about-rep-size の 1 か所【制作側の判断】。ファイルはその 2 倍の画素（src/representative.rs の PIXELS）で、
  width・height の属性は縦横比の枠を取るため（CLS。PERF-2）。角の丸め・影・枠などの飾りは足さない */
.about-rep { --about-rep-size: 96px; display: flex; align-items: center; gap: var(--sp-near); }
.about-rep-img { display: block; flex: none; width: var(--about-rep-size); height: auto; }
@media (min-width: 640px) {
  .about-profile-list { grid-template-columns: max-content 1fr; column-gap: var(--sp-group); }
}
/* SVC-7（検討中）・TASK-58-1: /services/ 末尾の相談への入口の上の余白。
  TASK-58-2: 入口の文字は墨だけで hover の演出は持たない。フォーカスの輪は全体の :focus-visible（--deep。A11Y-10）に任せ色を足さない（SHAPE-5） */
.services-end { margin-top: var(--sp-group); }
/* CONTACT-9・CONTACT-15 (4)・A11Y-3・TASK-71-6: 送信後の画面の「相談のページへ」の押せる範囲。独立した要素にして --target-min 四方以上にする（値の正は :root の --target-min 1 か所） */
.sent-link { display: inline-flex; align-items: center; color: var(--ink); min-width: var(--target-min); min-height: var(--target-min); }
/* SVC-7（検討中）・A11Y-3・TASK-58-1: 入口のリンクの押せる範囲は --target-min（404 の .not-found-link と同じ結び方） */
.services-end-link { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); color: var(--ink); }

/* TOP-15・TOP-16（検討中）・TASK-42-2: トップの小さな扉。形（アーチの小さな版）・置き場所（段階 6 の直後）・表示方式（別 URL）は【提案】に依頼者が 2026-11-06 に「ok」と回答（決定 ID なし。TOP-16 は検討中で、TASK-43 の結果で見直しうる）。
  図の幅は spec に値がなく【提案】（--small-door-w の 1 か所）。押せる範囲は A11Y-3 の --target-min。ガラス・動き・色は足さない（GLASS-1・A11Y-7） */
.small-door { --small-door-w: calc(var(--u) * 3); margin-top: var(--sp-group); }
.small-door-link { display: inline-flex; align-items: center; gap: var(--u); min-height: var(--target-min); min-width: var(--target-min); }
.small-door-link .fig { width: var(--small-door-w); max-width: 100%; margin-inline: 0; flex: none; }

/* TOP-15・TOP-16（検討中）・TASK-42-4: 扉の先をトップ内で展開する方式。読むのは PUBLIC_DOOR.beyond が InTop のときだけで、SeparateUrl では扉の先の入れ物が出力されず効かない。
  JS を使わない（PERF-4）。扉の href が "#name-origin-h" で、その見出しが対象（:target）になったときだけ入れ物を表示し、見出しの tabindex="-1" でフォーカスが移る。
  :has 非対応の環境では最初から開いたままにする（情報を隠さない）。動きは持たない（MOTION-3）。
  隠すのは InTop 専用の入れ物（door_beyond_in_top）だけで、別 URL の door_page の入れ物は常に表示。隠すのは入れ物の側で、名前の由来の節そのものはセレクタに含めない（pages.rs の name_origin_css_does_not_hide_or_animate・ABOUT-8） */
@supports selector(:has(*)) {
  .door-beyond-fold:not(:has(:target)) { display: none; }
}

/* 相談ページ */
.page, .page ~ .footer { max-width: 720px; } /* TASK-51-1: フッターの左端を本文幅のページでそろえる */
.page h1 { margin: var(--sp-heading-above) 0 0; font-weight: var(--fw-medium); font-size: clamp(24px, 3.4vw, 32px); letter-spacing: .05em; }
/* NAV-9（検討中）・TASK-53-2: 404 の鍵穴。幅は制作側の【提案】で spec に値なし（--keyhole-w の 1 か所）。高さは viewBox の比で決まる。
  動かない図なので data-a・data-par は付けない。左揃えは .page の h1・リンクにそろえる */
.not-found-keyhole { --keyhole-w: calc(var(--u) * 8); }
.not-found-keyhole .fig { width: var(--keyhole-w); max-width: 100%; margin-inline: 0; }
/* CONTACT-9（検討中）・DP-11【提案】・TASK-71-1: 送信後の場面（少し開いた扉と光）。静止図で A11Y-7・MOTION-1 を満たす。
  幅は制作側の【提案】で spec に値なし（--sent-scene-w の 1 か所）。 */
.sent-scene { --sent-scene-w: calc(var(--u) * 20); }
.sent-scene .fig { width: var(--sent-scene-w); max-width: 100%; margin-inline: 0; }
/* NAV-9（検討中）・A11Y-3・TASK-53-1: 404 の戻りのリンク。押せる範囲は --target-min */
.not-found-links { display: flex; flex-wrap: wrap; gap: var(--sp-near); margin-top: var(--sp-group); }
.not-found-link { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); }
/* CONTACT-9（検討中）・A11Y-3・TASK-71-7: 送信後の戻る導線。押せる範囲は --target-min（404 の .not-found-link と同じ結び方） */
.sent-links { display: flex; flex-wrap: wrap; gap: var(--sp-near); margin-top: var(--sp-group); }
/* PRIV-4（Could・検討中）・A11Y-3・SHAPE-5・TASK-75-4: ポリシーのページ内の目次。押せる範囲は --target-min（.footer-link と同じ結び方）。
  ブランドカラーは使わない（フォーカスの輪は全体の :focus-visible）。色・:hover・transition を足さない。<nav> にしない（NAV-6） */
.privacy-toc { list-style: none; margin: var(--sp-heading-below) 0 var(--sp-group); padding: 0; max-width: var(--measure-body); }
.privacy-toc ol { list-style: none; margin: 0; padding: 0; padding-inline-start: calc(var(--u) * 2); }
.privacy-toc a { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); }
.page .lead { margin: var(--sp-heading-below) 0 var(--sp-group); color: var(--sub); max-width: var(--measure-body); }
/* ポリシーの本文（PRIV-3・TASK-75-3）。`pages::privacy_main` が本文のブロックを `.policy-body` で包む。
  1 行の長さ: 箱に `--measure-body` を掛けるので、列挙子を足しても同じ幅が効く（TYPE-5 は検討中。値はトークン 1 か所）。
  見出しの大きさは【提案】（TYPE-5 は検討中）。`h2` は `--fs-sub`、`h3` は `--fs-body`。太さは 2 段の内（`--fw-medium`）。`.page h1` より小さく保ち、階層を逆転させない。
  上の余白は `spacing_rule_problems` の規則 4（`--sp-heading-above`）に従う。`line-height` は共通の見出しの規則が持つ。
  `overflow-wrap: anywhere` は長い URL・アドレスで幅 320 px の横スクロールを出さないため（A11Y-4）。 */
.policy-body { max-width: var(--measure-body); overflow-wrap: anywhere; }
.policy-body h2, .policy-body h3 { margin: var(--sp-heading-above) 0 0; font-weight: var(--fw-medium); letter-spacing: .05em; }
.policy-body h2 { font-size: var(--fs-sub); }
.policy-body h3 { font-size: var(--fs-body); }
.policy-body p { margin: var(--sp-heading-below) 0 0; }
.form { display: grid; gap: var(--sp-block); }
.form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-bound); }
.form legend { padding: 0; margin-bottom: var(--sp-bound); font-size: var(--fs-m); }
/* 依頼の種類の押せる範囲（CONTACT-13・A11Y-3・TASK-62-5）。幅は .road と同じく --target-min に結ぶ（高さは共有規則）。
  input は label の外縁に重ねる。inset: -1px と +2px はどちらも .kind の枠線 1px が前提。
  幅・高さを明示するのは、WebKit が inset だけではラジオの固有の大きさ（12×12）を保つため（Playwright WebKit で測定。Safari・実機は VERIFY-9）。
  input に display: none・visibility: hidden・pointer-events: none を付けない（Tab の止まり位置と押せる範囲が消える。A11Y-2）。
  transition は宣言しない（ホバー・フォーカスで動かさない）。点検は src/main.rs の contact_hit_area_problems・contact_form_transition_problems */
.kind { min-width: var(--target-min); }
.kind input { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); opacity: 0; margin: 0; cursor: pointer; }
.field { display: grid; }
.field label { font-size: var(--fs-m); margin-bottom: var(--sp-bound); }
/* CONTACT-7・TASK-65-3: 未入力・メール形式不正の文言。判定はブラウザの制約検証、表示だけを :user-invalid で切り替える（JS 0。PERF-4・PERF-5）。
  外枠 .field-err は常に描画され入力欄の aria-describedby が指す。文言 .field-err-text は既定で隠し、不正のときだけ見せる。
  隠し方は visibility:hidden（display:none ではない）。文言の行の高さを常に確保し、blur で文言が現れても送信ボタンなどが動かないようにする。
  動くと押し下げと押し上げの間にボタンが逃げて click が成立せず、1 回目の押下が失われて最初のエラーへのフォーカス移動も起きない（CONTACT-7・TASK-65-4）。
  フォーカスの移動そのものはブラウザの制約検証が行う（JS 0。PERF-4）。常に残る空き行の可否は依頼者レビューの論点（spec に指定なし）。
  :user-invalid の規則は単独で書く（セレクタの並びに混ぜると、非対応のブラウザで規則全体が無効になる）。赤などの見た目は #698 の担当で、ここでは新しい色・transition を足さない。 */
.field-err-text { display: block; visibility: hidden; margin-top: var(--sp-bound); font-size: var(--fs-s); }
.field :user-invalid ~ .field-err > .field-err-text { visibility: visible; color: var(--ink); }
/* 相談フォームの 3 つの状態（CONTACT-13・A11Y-10・SHAPE-5・TASK-62-4）。
  既定: 入力欄の枠は灰の線（--sub。薄い灰 --line は装飾の線だけ。SHAPE-6）。
  フォーカス: --deep の 2 px 実線の輪。offset は --focus-gap を通し、TASK-12 の切り替え（切れ目なしを採った。SHAPE-7 は検討中）と両立させる。
  選択: ラジオの灯りは .road と共有の規則（上の .kind:has(input:checked)・.dot）が担う。
  点検: 構造は src/main.rs の contact_state_color_problems、輪の描画は check/focus-ring.mjs、色の限定は check/brand-color.mjs。 */
.field input, .field textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--sub); border-radius: var(--radius-m); padding: var(--u) calc(var(--u) * 2); min-height: var(--target-min); width: 100%; }
.field textarea { min-height: 160px; resize: vertical; }
/* 入力エラーの見た目（CONTACT-7・検討中、TASK-65-2）。マークアップと表示の切り替えは上の TASK-65-3 の規則（.field-err-text）が担い、ここは色と枠だけを足す。
  エラーの文字は墨のまま、文言の前に墨の小さな円を 1 つ置く（色に頼らず形で示す。ガラスの部品には出さない。GLASS-3）。
  不正な入力欄の枠は太さを変えず --ink へ濃くするだけ（レイアウトを動かさない）。:user-invalid の規則は単独で書く（並びに混ぜない）。
  フォーカス中は下の規則が勝つよう、これらを focus-visible より前に置く。transition は置かない。点検は src/main.rs の contact_error_style_problems */
.field input:user-invalid { border-color: var(--ink); }
.field textarea:user-invalid { border-color: var(--ink); }
.field-err-text::before { content: ""; display: inline-block; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: var(--ink); margin-inline-end: var(--sp-bound); vertical-align: middle; }
.field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-w) solid var(--deep); outline-offset: calc(var(--focus-offset-s) + var(--focus-gap)); border-color: var(--deep); }
.send { justify-self: start; font: inherit; font-size: var(--fs-l); color: var(--ink); background: var(--bg); border: 1px solid var(--ink); border-radius: var(--radius-pill); min-height: var(--target-min); padding: 0 calc(var(--u) * 3); cursor: pointer; }
.send { min-width: var(--target-min); }
/* TASK-67-7・CONTACT-7: 送信に失敗した応答の一言（Worker が返す失敗の画面だけ）。墨の文字で、新しい色・赤の面を足さない。「※」と短い言葉で伝える（色に頼らない） */
.form-failed { margin: 0; color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-medium); max-width: var(--measure-body); }
.note { margin: 0; color: var(--sub); font-size: var(--fs-s); max-width: var(--measure-body); }
/* CONTACT-12・A11Y-3・TASK-69-1: 送信ボタンの近くのポリシーへのリンク。押せる範囲は --target-min（.footer-link と同じ結び方）。
  色・:hover・transition・order は足さない（SHAPE-5・CONTACT-13）。輪は全体の :focus-visible に任せる。p は Resend を通る旨の 1 文（TASK-69-2）の入れ先 */
.form-policy { margin: 0; color: var(--sub); font-size: var(--fs-s); max-width: var(--measure-body); }
.form-policy-link { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); }
/* CONTACT-12・PRIV-1（検討中）・TASK-69-3: 同意の取り方。表（contact-fields.tsv）の control=consent の行があるときだけ出る（既定は行なし）。
  .form-consent は文言だけ（required=no）で .form-policy と同じ文字の扱い。.field-consent はチェック（required=yes）で、DOM の順（input・label・.field-err）のまま 1 行に並べ、
  押せる範囲は --target-min（CONTACT-13・A11Y-3）。見た目の順を変える宣言（order・grid 配置）は使わない（CONTACT-1）。色・:hover・transition は足さない。バナー・ダイアログではない（PRIV-2） */
.form-consent { margin: 0; color: var(--sub); font-size: var(--fs-s); max-width: var(--measure-body); }
.field-consent { display: flex; flex-wrap: wrap; align-items: center; }
.field-consent input { flex: none; width: var(--target-min); height: var(--target-min); min-height: var(--target-min); padding: 0; margin: 0; background: revert; border: revert; border-radius: revert; color: revert; }
.field-consent label { flex: 1; margin-bottom: 0; }
.field-consent .field-err { flex-basis: 100%; }
/* TASK-51-1: フッターは body 直下（.wrap の外）なので、幅と横余白を .wrap（1120px・16px）に合わせて自前で持つ。
縦は .wrap の下余白がフッターの上に来るため、上 0・下 --sp-section にして移設前とページ末尾の合計を保つ。 */
.footer { max-width: 1120px; margin-inline: auto; padding-block: 0 var(--sp-section); padding-inline: max(calc(var(--u) * 2), env(safe-area-inset-left, 0px)) max(calc(var(--u) * 2), env(safe-area-inset-right, 0px)); color: var(--sub); font-size: var(--fs-s); }
/* NAV-8・A11Y-3・TASK-52-3: フッターのリンク（pages.rs の footer()）の押せる範囲を高さ・幅とも --target-min 以上にする（値の正は :root の --target-min 1 か所。宣言は TASK-52-1 で入った）。
  inline のままだと min-height が効かないので display を持たせる。構造は main.rs の footer_hit_area_problems が守り、描画後の実測は TASK-52-4 の担当。 */
.footer-link { display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); }

/* 操作層のガラス（PoC-4）。対象は 4 種だけ: ヘッダー（.site-header）・相談ボタン（.site-nav a.cta）・段階 3 の道（.road）・依頼の種類の選択肢（.kind）。
  本文の面・物語の造形（.fig）には使わない（DP-8）。既定は不透明な単色の面で、backdrop-filter に対応する環境だけ半透明＋ぼかしに切り替える（@supports）。
  面の既定は不透明な白（GLASS-2・TASK-19-1。--glass-bg は var(--bg) の参照で、4 部品の基本規則の background と同じ白）。半透明化とぼかしは直下の @supports の中だけに書く。
  半透明とぼかしの量は :root の --glass-alpha・--glass-blur だけで持つ（GLASS-2・GLASS-5・TASK-105）。
  縁の明るさは右上の光源に合わせる（右上の縁は明るく、左下の縁は暗く、影は左下へ短く 1 段）。色はパレットの白・灰だけ。 */
.glass {
  --glass-bg: var(--bg);
  --glass-hover: color-mix(in srgb, var(--line) 22%, transparent);
  background: var(--glass-bg);
  box-shadow: var(--glass-edge);
}
.road.glass, .kind.glass, .site-nav a.cta.glass { box-shadow: var(--glass-edge), var(--glass-shadow); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    --glass-bg: color-mix(in srgb, var(--bg) var(--glass-alpha), transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
  }
}
/* 相談ボタンのガラス（TASK-19-4・GLASS-1）。hover はガラスの面（--glass-bg。@supports の内外どちらでも）を保ったまま、灰の不透明度の層（--glass-hover）を重ねる（GLASS-3）。
  濃淡は新しい色の混色ではなく不透明度で出す（SHAPE-4・#1217）。2 停止点が同じ色の linear-gradient は一様な層で、見た目のグラデーションではない。
  .site-nav a:hover（特異度が高い）に面を上書きされないよう background の一括指定にする。縁（box-shadow）と backdrop-filter には触れない（glass-edge.mjs） */
.site-nav a.cta.glass:hover, .site-nav a.cta.glass:focus-visible { background: linear-gradient(var(--glass-hover), var(--glass-hover)), var(--glass-bg); }

/* 図形の描き方（造形の文法）。線は 1 種類の太さ（SHAPE-2。値は tokens.css の --line-w だけ）、自由曲線なし、光は右上から */
.fig .ln { fill: none; stroke: var(--line); stroke-width: var(--line-w); vector-effect: non-scaling-stroke; stroke-linecap: butt; stroke-linejoin: miter; }
.fig .ln-faint { stroke-opacity: .5; }
.fig .ln-ink { stroke: var(--sub); }
.fig .ln-soft { stroke-opacity: .6; }
.fig .dot-ink { fill: var(--sub); }
.fig .face { fill: var(--line); fill-opacity: .3; }
.fig .keyface { fill: var(--line); fill-opacity: .8; }
.fig .leaf-open { fill-opacity: .2; }
.fig .hole { fill: var(--bg); }
.fig .hole-dark { fill: var(--sub); }
.fig .shadow { fill: var(--sub); fill-opacity: .22; }
.fig .grin { fill: var(--line); fill-opacity: .75; }
.fig .floor { fill: var(--line); fill-opacity: .18; }
.fig .beam { fill: var(--bg); }
.fig .snow { fill: var(--line); }
.fig .haze { fill: url(#gHaze); }
.fig .stone { fill: url(#gStone); }
.fig .lit { fill: url(#gLight); }
.fig .sky { fill: url(#gSky); fill-opacity: .3; }

/* 静止図版が正本（TOP-5・MOTION-3・MOTION-4・A11Y-6・TASK-38-6）: 上の基本のルールが完成形で、HTML も同じ完成形を持つ。
  動きは完成形に後から足す層で、@supports (animation-timeline) と prefers-reduced-motion: no-preference の両方の内側だけに書く。
  reduce と scripting: none では末尾のルールで止める。条件の外で隠してよいのは、完成形で面になる輪郭の線（[data-a="line"]）と、JS が付ける [data-js] 付きのルールだけ。
  この構造は src/main.rs の motion_gate_problems（cargo test）が検査する。 */
/* スクロールとの結びつけ A: CSS のスクロール駆動アニメーション。非対応・動きを減らす設定では静止した完成形のまま */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-motion="a"] .fig [data-a] { animation-timing-function: cubic-bezier(.2, .7, .2, 1); animation-fill-mode: both; animation-timeline: --fig; }
    /* 変化 (i) 線が閉じて扉の面になる（TOP-6・TASK-39-1）。図の位置（--fig）で進み、時間では再生しない。
      区間はスクロールの割合（PoC-1 の値）で、MOTION-2 の長さ（--dur-*）は参照しない */
    html[data-motion="a"] .fig [data-a="line"]  { animation-name: draw;    animation-range: entry 5% entry 55%; }
    html[data-motion="a"] .fig [data-a="face"]  { animation-name: fade;    animation-range: entry 30% entry 75%; }
    /* (ii) 鍵が生まれる（TOP-6・TASK-39-2）: 輪が現れ、軸が伸びる。進みは図（.stage-fig）の画面上の位置で決まり、時間では再生しない。区間は PoC-1 の値（spec に数値なし） */
    html[data-motion="a"] .fig [data-a="ring"]  { animation-name: grow;    animation-range: entry 45% cover 45%; }
    html[data-motion="a"] .fig [data-a="shaft"] { animation-name: extend;  animation-range: entry 60% cover 38%; }
    /* 段階 3 の変化 (iii)（TOP-6・TASK-39-3）: 鍵が先に寄り、遅れて図の中の 3 つの道（roads。ラジオの .roads とは別）と三日月（grin）が現れる。
      「合わず」は鍵の傾き（figures.rs）で表し、ここに揺れ・弾みは足さない。範囲の値は MOTION-7（検討中）に合わせて差し替える。 */
    html[data-motion="a"] .fig [data-a="key-in"] { animation-name: slide-in; animation-range: entry 20% cover 40%; }
    html[data-motion="a"] .fig [data-a="roads"] { animation-name: rise;    animation-range: entry 55% cover 40%; }
    html[data-motion="a"] .fig [data-a="grin"]  { animation-name: fade;    animation-range: entry 70% cover 44%; }
    /* 変化 (iv) 鍵が磨かれて右上の光と左下の影が付く（TOP-6・TASK-39-4）。図の位置（--fig）で進み、時間では再生しない。
      鍵が合う → 光る塗り → 左下の影の順。光・影の向きは回転中も保つ（SHAPE-3）。区間はスクロールの割合（PoC-1 の値）で、MOTION-2 の長さ（--dur-*）は参照しない */
    html[data-motion="a"] .fig [data-a="turn"]  { animation-name: turn;    animation-range: entry 20% cover 40%; }
    html[data-motion="a"] .fig [data-a="stone"] { animation-name: fade;    animation-range: entry 55% cover 42%; }
    html[data-motion="a"] .fig [data-a="shadow"] { animation-name: fade;   animation-range: entry 75% cover 48%; }
    /* 変化 (v) 扉が開く（段階 5。TOP-21 (3)・TOP-6・TASK-131-6）。図の位置（--fig）で進み、時間では再生しない。
      範囲と速さ曲線 linear は TASK-131 の値（TOP-22 は検討中。値は TASK-132 で変わりうる）。終わりの姿は条件の外の基準のスタイルが持ち（TASK-131-5）、ここは transform・fill-opacity を宣言しない。
      animation-fill-mode: both（共通規則）が、範囲の前を from（開く前）、範囲の後を基準（終わり）の姿で止める（TASK-132-2）。
      速さ曲線は上の共通規則と詳細度が同じなので、必ずそれより後ろに置いて上書きする。範囲は scroll_driven_problems が部品ごとの規則の中で探すため、共通規則には置かない */
    html[data-motion="a"] .fig3d [data-a] { animation-timing-function: linear; }
    html[data-motion="a"] .fig [data-a="door-l"] { animation-name: door-l; animation-range: entry 20% cover 40%; }
    html[data-motion="a"] .fig [data-a="door-r"] { animation-name: door-r; animation-range: entry 20% cover 40%; }
    html[data-motion="a"] .fig [data-a="tone"]   { animation-name: tone;   animation-range: entry 20% cover 40%; }
    html[data-motion="a"] .fig [data-a="beam"]   { animation-name: beam;   animation-range: entry 20% cover 40%; }
  }
}
/* スクロールとの結びつけ B: 節が画面に入ったとき一度だけ再生（PoC では wasm 側が data-state を操作したが、JS は 3 用途限定（PERF-4）のため、この案の採否と実装は未定。MOTION-7 と合わせて決定待ち）。再生前は非表示にして、ちらつきを防ぐ */
html[data-motion="b"][data-js] .stage[data-state="pending"] .fig [data-a] { opacity: 0; }
/* draw: 変化 (i) の線。stroke-dasharray: 100 は figures.rs の stage2() の pathLength="100" が前提 */
@keyframes draw { from { opacity: 1; stroke-dasharray: 100; stroke-dashoffset: 100; } 60% { opacity: 1; stroke-dasharray: 100; stroke-dashoffset: 0; } to { opacity: 0; stroke-dasharray: 100; stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes extend { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes slide-in { from { opacity: 0; transform: translate(-56px, 8px); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes turn { from { transform: rotate(-18deg); } to { transform: rotate(0deg); } }
/* 段階 5（変化 (v)。TOP-21・TASK-131-6・TASK-132-2）: 終わりの姿は条件の外の基準のスタイル（.leaf-l/.leaf-r の回転・.leaf-open の濃さ。TASK-131-5）が持つので、ここは開く前を from だけで与える（案 A。TOP-22 は検討中）。
  from = 開く前: 板は閉じた rotateY(0deg)、tone は .fig .face の基準の濃さ（閉じた板）、beam は狭い光。終わりは暗黙の to（基準のスタイル）に任せる。beam の to は基準（変形なし）と同じ値で PoC-13 の形のまま */
@keyframes door-l { from { transform: rotateY(0deg); } }
@keyframes door-r { from { transform: rotateY(0deg); } }
@keyframes tone { from { fill-opacity: .3; } }
@keyframes beam { from { transform: scaleX(.12); } to { transform: scaleX(1); } }
/* 変形の基準点（user units）。輪郭の線は完成形では見せない（面になる） */
.fig [data-a="line"] { opacity: 0; }
/* ring は中心から現れ、shaft は輪の側（左端）から伸びる（TASK-39-2）。stage2() の data-a と対応 */
.fig [data-a="ring"]  { transform-box: fill-box; transform-origin: center; }
.fig [data-a="shaft"] { transform-box: fill-box; transform-origin: left center; }
/* turn の基準点は figures.rs の stage4_turn_origin()（鍵の軸の先端）と同じ値。テスト stage4_turn_origin_matches_css が一致を検査する */
.fig [data-a="turn"]  { transform-origin: 137px 113.3px; }
/* 光の帯（段階 5）は床の上の中央から横に伸びる（TASK-131-6。角度・変形の基準は TASK-131-5） */
.fig [data-a="beam"] { transform-origin: 120px 168px; }

/* 視差（PoC-5）。扉の向こうの空・庭と段階 0 の靄（`data-par`）だけを、スクロール位置に結びつけて `transform: translateY` で動かす（DP-13）。
  量は `<html data-parallax>`（none / subtle / strong。`--parallax` でビルドを切り替える）。図の高さ 200 ユニットに対する、節が画面を通り過ぎる間の全移動量:
  庭・靄 = 図の高さ × --par（版ごとの値は下の `--par` の行）、空 = それに空の倍率を掛けた量（下の空の層の規則）。移動は −全移動量/2 → +全移動量/2（節が画面の中央にあるとき 0 ＝ 完成形の構図）。
  動きを減らす設定と animation-timeline 非対応のエンジンでは、アニメーションを付けず完成形のまま。
  MOTION-6: 視差で値が変わるのは transform の縦移動だけ（計算後は matrix(1, 0, 0, 1, 0, ty)）。[data-par] の規則には
  transform・opacity・transition などを宣言しない。この構造は src/main.rs の parallax_transform_problems（cargo test）が検査する。
  空の塗りの広げ方（MOTION-8・TASK-22-3）は `figures.rs` の `sky_ext()` がこの節（`--par`・空の倍率・`@keyframes par` の振れ幅）から導く。
  書き方（`--par: <小数>;`・`calc(var(--par) * <倍率>)`・`* ±<n>px`）を変えるときは Rust 側の読み取りも合わせる。 */
/* ここが視差の量と量の読み方の唯一の置き場所（MOTION-7・TASK-24-2）。MOTION-7 は spec では検討中のまま。
  量: 【依頼者の回答】`subtle`（spec#12 問 3-1、決定 ID なし）。TASK-113（PoC-11）は行わない（spec#11）ので、PoC-11 の基準との照合は未実施。根拠は `docs/records/task-24-parallax-amount.md`。
  読み方: 全移動量【依頼者の回答】（spec#18 問 2、決定 ID なし）。MOTION-10 は「段階 6 の図が画面の中央に来る位置で視差のずれ 0」と読む【依頼者の回答】（spec#18 問 1。末尾で中央に来なくてよい。点検は `check/parallax-center.mjs`）。`--par` ＝ 節が画面を通り過ぎる間の全移動量 ÷ 図の高さ。`@keyframes par` の振れ幅が図の高さと等しく、中央で 0 になる（`figures.rs` の parallax_swing_is_figure_height が守る）。
  読み方を変えるときは `--par` を差し替える（比較は同記録の 4 節）。
  `strong`・`none` は比較用の版。公開ビルドに含める版は `src/pages.rs` の `PUBLIC_PARALLAX`（MOTION-15）。
  空の倍率は仮の値のまま回答で残った（MOTION-16 は検討中、決定 ID なし。同記録の 3 節）。反映先は空の層の規則の 1 行だけ（TASK-106-5）。
  差し替えると `figures.rs` の `sky_ext()` と、配信する `render.js` の `FIXED.sky`（配信時に導出値へ替わる。TASK-24-8）は追従する。
  `check/parallax-slack.mjs` とこれを読む点検（test-garden-river・test-garden-sunrise の空の移動量）も追従する。
  ほかの複製（strong の番人のテストなど）は手で直す（一覧は同記録の 9 節、空の倍率の手順は `docs/records/task-106-inspection.md` の TASK-106-5 の節）。 */
html { --par: 0; }
html[data-parallax="subtle"] { --par: .03; }
html[data-parallax="strong"] { --par: .10; }
.fig [data-par] { --amt: var(--par); }
.fig [data-par="sky"] { --amt: calc(var(--par) * 1.5); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-parallax="none"]) .fig [data-par] { animation: par linear both; animation-timeline: --fig-par; animation-range: cover 0% cover 100%; }
  }
}
@keyframes par { from { transform: translateY(calc(var(--amt) * -100px)); } to { transform: translateY(calc(var(--amt) * 100px)); } }

/* TASK-70-1・TASK-70-5・CONTACT-8・MOTION-13（どちらも検討中。根拠は DP-11【提案】）: 送信中の「扉の輪郭を探る動き」。段階 1 の 2 本の線（figures.rs の sending()）を小さく出す。
  この節の `.sending` が、送信中の表示の値（大きさ・点の間隔）の唯一の置き場所。TASK-66 の決定（受信は Workers〔Rust〕、送信は JS なしの通常の POST でページ遷移。D3。docs/records/task-66-reception-design.md の 6.3・7.3）を根拠に、制作側の整理を docs/records/task-70-wait-and-motion.md に置く。
  大きさ（--seek-w）と点の間隔（--seek-dot-pitch。`dot_r()` の倍数で単位なし。figures.rs がビルド時にここから読む）は【提案】の仮の値。CONTACT-8・MOTION-13 が確定したら、この節だけを差し替える。
  動き: 送信中の図は静止図にする（時間ベースのアニメーションを作らない。A11Y-7・MOTION-1）。状態は形と文言で示す。動きを減らす設定（A11Y-6・TASK-70-2）では線を隠して静止した点 3 つ（`.seek-dot`）を出す。切り替えは下のメディアクエリだけで、線にも点にも animation・transition を書かない。
  待ち時間: サイトは値を持たない。送信中の時間は D3 のページ遷移の時間で、サイトはタイマーを持たない。Workers の応答時間は未実測（TASK-67 の後に spec 側で扱う）で、推定で埋めない（D-2026-11-01-19・D-2026-11-01-20）。
  入れ物 `.sending` は pages.rs が `hidden` で隠して置く。`hidden` を外す手段は未決（D3 と PERF-4 の下で spec の判断待ち。TASK-70-3）なので、ここでは `.sending` を含むセレクタに display を宣言しない。切り替えの規則は `.seek-line`・`.seek-dot` の素のセレクタで書く。 */
.sending { --seek-w: calc(var(--u) * 8); --seek-dot-pitch: 4; }
.seek { display: block; width: var(--seek-w); height: auto; }
.seek .ln { fill: none; stroke: var(--sub); stroke-width: var(--line-w); vector-effect: non-scaling-stroke; stroke-linecap: butt; stroke-linejoin: miter; stroke-dasharray: 100; stroke-dashoffset: 0; }
.seek-dot { display: none; fill: var(--sub); }
@media (prefers-reduced-motion: reduce) {
  .seek-line { display: none; }
  .seek-dot { display: inline; }
}

/* TASK-70-4・CONTACT-8・MOTION-13（検討中）・A11Y-7: 送信中の動きの停止の手段（WCAG 2.2.2）。JS なしのチェックボックスを包む label。
  現状は止める動きが無い（上のブロックは静止図。A11Y-7・MOTION-1）。契約: 動きを足す側（TASK-70-5）は `.seek-line`・`.seek-dot` の animation の規則に
  `animation-play-state: var(--seek-play, running)` を必ず書く。チェック中は `--seek-play` が paused になり、動きが止まる。`.sending` に display は書かない。 */
.sending:has(.seek-stop input:checked) { --seek-play: paused; }
.seek-stop { display: inline-flex; align-items: center; gap: var(--u); min-height: var(--target-min); min-width: var(--target-min); color: var(--sub); }
/* 動きを減らす設定では止める動きが無い（静止表示。TASK-70-2）ので手段ごと隠す */
@media (prefers-reduced-motion: reduce) { .seek-stop { display: none; } }

/* A11Y-6・MOTION-4: 動きを減らす設定では B 案の再生前の非表示を解除し、完成形を出す */
@media (prefers-reduced-motion: reduce) { html[data-motion="b"][data-js] .stage[data-state="pending"] .fig [data-a] { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* JS を止めた状態では、物語と視差の動きを止めて完成形の静止図版を出す（PoC-1 の「JS を止めた状態で段階 0〜6 の静止図版が使える」）。
  A 案は JS を使わないが、JS を止めた環境を静止図版の条件に揃えるため、スクリプトの無効を検出するメディア特性で止める。 */
@media (scripting: none) { .fig [data-a], .fig [data-par] { animation: none !important; } }
/* SVC-3・TASK-55-6（SVC-3 は検討中。動きありでの扱いは制作側の【提案】）: 進め方の図は `.stage-fig`（`--fig` の view-timeline）の外に置き、
  動きの有無・JS の有無によらず同じ静止図版にする。`--fig` が無い場所では上の動きの規則の `animation-timeline: --fig` が解決できず、
  animation が終わった扱いで `to`（視差の量）だけが当たり完成形の位置からずれる。それを条件の外で止める（MOTION-3・MOTION-4）。
  `.stage-fig` の中（トップの物語）には掛からない。条件の外に置くため、`!important` で上の動きの規則に勝たせる。
  CONTACT-9・TASK-71-2: 送信後の場面（TASK-71-1）も `.stage-fig` の外の静止図で、完成形は基本のスタイルと HTML が持つ。動きを減らす設定では
  上の `*` の停止規則で同じ姿が出る（A11Y-6）。時間ベースの動きは足さない（A11Y-7・MOTION-1）。検査は `src/pages.rs` の `sent_pages_scene_is_static_canonical`。 */
.fig:not(.stage-fig *) [data-a], .fig:not(.stage-fig *) [data-par] { animation: none !important; }

/* 印刷でリンク先の URL を文字のすぐ後ろに併記する（MOTION-14・TASK-25-3。MOTION-14 は検討中、根拠は DP-11【提案】のみ）。
  紙の上ではリンクを押せないので、行き先を読み手に見せる。画面のメディアには何も足さない（`attr(href)` はこの区画の中だけ）。
  除外: `#` で始まる href（同じページの中への移動。.skip を含む）と .brand（ロゴの周りには何も足さない。BRAND-2・BRAND-5・TYPE-10）。
  ヘッダーを印刷で見せるかどうかは TASK-25-1 の担当で、ここでは見えているリンクすべてに付く規則として書く。
  色は設計トークンの参照だけ（SHAPE-4）。ガラスの面（background・box-shadow・backdrop-filter）には触れない。
  header-menu.css は幅 520px 以下でだけ効くため、印刷の幅では影響しない。 */
@media print {
  /* 公開ドメインは未定（spec に無い。決定後にこの 1 か所だけ差し替える。spec-ssot）。空のあいだ、内部リンクはパスだけが出る */
  :root { --print-url-origin: ""; }
  a[href]:not([href^="#"]):not(.brand)::after {
    content: "(" var(--print-url-origin) attr(href) ")";
    margin-inline-start: .3em; font-size: var(--fs-xs); color: var(--sub); overflow-wrap: anywhere;
  }
  /* 外部リンクの href はすでに絶対 URL なので origin を前に付けない（実ページの外部リンクは今 0 件） */
  a[href^="http"]:not([href^="#"]):not(.brand)::after { content: "(" attr(href) ")"; }
  /* 操作部品（ピル形）の中では折り返さず、高さを増やさない */
  .site-nav a::after, a.kind::after { white-space: nowrap; }
}

/* 印刷: 物語を段階 0〜6 の静止図版の並びで出す（MOTION-14（検討中・根拠は DP-11【提案】のみ）・TASK-25-2）。
  完成形は条件の外の基本のスタイルが持つので、ここでは動きに依存した隠れ・途中の姿だけを外す。値は新設しない。
  ページ全体の動きとガラスの除去は TASK-25-1、URL の併記は TASK-25-3、ブラウザ上の点検は TASK-25-4 の担当。
  この区画は motion_gate_problems（src/main.rs）で「条件付き」と見なされないため、隠す宣言は書かない。 */
@media print { .fig [data-a], .fig [data-par] { animation: none !important; } }
/* B 案の再生前の非表示を解除する。完成形で面になる輪郭線 [data-a="line"] は隠したまま残す */
@media print { html[data-motion="b"][data-js] .stage[data-state="pending"] .fig [data-a]:not([data-a="line"]) { opacity: 1; } }
/* 段階の図と見出し・説明が別ページに割れないようにする */
@media print { .stage { break-inside: avoid; } }