/* Sologen LP — 1枚主義。装飾を足さない。
   ⚠️ 3枚（/ ・ /paper ・ /presentation）で共有するので、ページ固有の値をここに書かない。 */

:root {
  --ink: #14161a;
  --ink-soft: #4a5058;
  /* 🆕 2026-09-13 フッタ専用の、いちばん薄い灰。
     ⚠️ **これ以上薄くしない** ―― #6b727c は白地で **4.85:1**（WCAG AA 4.5 の内側）。
        #737a84 まで薄くすると 4.33:1 で**落ちる**（実測して選んだ値）。 */
  --ink-faint: #6b727c;
  --line: #e3e6ea;
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --accent: #1a5fd0;
  --warn: #8a5a00;
  --warn-bg: #fff8e6;
  --max: 42rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic Medium", meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- hero: 375px 幅でここまでが1画面に収まること ---------- */

/* ══════ 🆕 2026-09-13 M1 メインコピー ―― 明るい写真の上に濃い文字 ══════
   🔴 **白抜きから反転した**（人の指定「明るい、かつ、おしゃれな写真に」）。
      ⚠️ 明るい写真に白抜きは**原理的に載らない**。写真を明るくするなら、
         文字も同時に反転させるしかない ―― 片方だけ変えると読めなくなる。
   🔑 **`.hero` 自体を淡色にする。** 読みやすさを画像の到着に依存させない ――
      404・遅延・圏外のどれでも、文字は読めたままにする。
   ⚠️ `<main class="wrap">` の**外**に置いてある。中に入れたまま全幅にするには
      `100vw` が要り、それはスクロールバーぶん（15px 前後）横にはみ出す。 */
.hero {
  position: relative;
  isolation: isolate;              /* 子の負 z-index を .hero の中に閉じる */
  overflow: hidden;
  /* 🔴 2026-09-13 被せるのは h1 だけになったので、**上下を広く取って写真を見せる**。
     ⚠️ 文字が減ったぶん箱を詰めると、写真がただの帯になる。 */
  padding: 3.5rem 0 4rem;
  background: #eef1f4;
  /* ページ本体（純白）と地続きに見えないよう、下に1本 */
  border-bottom: 1px solid var(--line);
}
/* 🔴 2026-09-14 `width: 100%` を**全幅で**指定する（前は広い画面だけだった）。
   `.hero` は flex なので、子の `max-width` を絞ると `.hero-in` 自身が
   **中身に合わせて縮み**、`.wrap` の `margin: 0 auto` で中央へ寄る ――
   文字を細くしたはずが、まるごと被写体の上へ移動していた（実測 L=20 → 138）。
   ⚠️ 縮めるのは**中の要素**であって、段そのものではない。 */
/* 🔴 2026-09-14 **ヒーローの段だけ中央寄せをやめる。**
   `.wrap` は 42rem を中央に置くので、1200px では文字が x=264 から始まる。
   無地なのは 0〜598px なので、使える幅が 318px しか残らず、
   「大きく」と言われた見出しが小さく折り返していた。
   左端へ寄せれば同じ写真で **558px** 取れる（＝字を倍近く大きくできる）。
   ⚠️ 本文の段（`main.wrap`）とは揃わなくなるが、ヒーローは全幅の写真なので
      そこだけ別の段で成立する。 */
.hero-in {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: clamp(1.25rem, 4vw, 4.5rem);
  padding-right: 1.25rem;
}

/* 🆕 2026-09-13 **写真に高さを持たせる。** 被せる要素がロゴと h1 の2つだけに
   なったぶん中身が薄く、内容なりの高さだと**ただの帯**に見える（実画で確認）。
   ⚠️ `padding` で伸ばさない ―― 文字が上に張り付く。箱に下限を与えて中央に置く。 */
@media (min-width: 48.0625rem) {
  .hero {
    /* 🆕 25rem → 34rem（人の指定「画像領域がもっと大きくていい」） */
    min-height: 42rem;
    display: flex;
    /* 🔑 上下中央（人の指定）。⚠️ 下寄せをやめたので、暗がりも下から掛けない */
    align-items: center;
  }
  /* （`width: 100%` は上の共通指定へ移した） */
}

/* 🔴 2026-09-13 **幕を「画面の左◯%」ではなく「文字の段」に追従させる。**
   `.hero-in` は `.wrap`（中央寄せ・max-width）なので、広い画面では
   文字は左ではなく**真ん中**に来る。画面基準の grading だと、文字の右端が
   いちばん薄い所に乗る ―― 実測で 4件が 4.5 を割った（rebuttal は 2.36）。
   🔑 `::before` を `.hero-in` に持たせれば、段と一緒に動くので
      viewport 幅の計算が要らない。
   🔴 最初 `left: -50vw` にして**外した**。`background` の % は
      **要素の幅**が基準なので、要素を画面幅ぶん広げると濃い所が全部画面の外へ行く
      （実測で 27件が 4.5 を割り、最悪 1.21 まで落ちた）。
      → 伸ばすのは `-100%`（＝段と同じ幅ぶん）。これなら % と段の関係が保たれる。
   ⚠️ `.hero` が `overflow: hidden` なので横スクロールは出ない
      （`check_modules` が scrollWidth を見ている）。 */
/* 🗑️ 2026-09-13 **白座布団（`.hero-in::before`）を撤去**（人の指定）。
   代わりに**白文字＋距離0・ぼかし大のシャドー**を乗せる。
   ⚠️ 濃さは下の `.hero-in` の `text-shadow` が持つ。`check_hero.py` が
      **シャドー込みの画素**で測る（`color: transparent` にしても
      `text-shadow` は描かれるので、幕と同じやり方で測れる）。 */

/* 文字の段は写真より狭くする。⚠️ 段いっぱいに伸ばすと、幕も一緒に右へ広がり
   写真が見える幅が残らない（「明るいおしゃれな写真」という目的が消える）。 */
/* 🆕 `--text-max` は `fitCopy()` が入れる（被写体の手前で文字を止める幅）。
   ⚠️ `min()` で重ねる ―― 被写体が遠いときに 40rem を超えて伸びないように。 */
.hero-in > * { max-width: min(40rem, var(--text-max, 40rem)); }

/* ── ロゴ ──────────────────────────────
   ⚠️ 高さで指定する（幅で指定すると、ワードマークの長さが変わったとき崩れる）。
   ⚠️ `color` は継承 ―― 文字部分が `currentColor` なので、地が暗くなれば白へ寄る。 */
.brand { margin: 0 0 1.75rem; line-height: 0; }
/* 🆕 30 → 40 → 56 → 72 → **96px**（人の指定で4段階）。
   ⚠️ 高さで指定する。上限は `check_modules` が「ヒーローの45%以内」で見ている。
   🆕 `--brand-h` は `fitCopy()` が**段からはみ出すときだけ**入れる。 */
.brand-svg { height: var(--brand-h, 96px); width: auto; display: block; }

/* ── サブコピー（写真の外・CTA の手前）──────────
   🔑 M1 の h1 と M2 のボタンの**あいだ**に置く1本。ここが「何をする物か」を言う
      唯一の場所なので、注釈サイズにしない（本文より少し大きい）。 */
.lede {
  margin: 1.75rem 0 0.25rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink-soft);
}
.lede strong { color: var(--ink); font-weight: 700; }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🔑 主役は右側に撮ってある。左（文字が乗る側）を残して寄せる */
  object-position: 76% 50%;
  /* ⚠️ 既定は透明。`segment.js` が**読み込めたときだけ** `.has-bg` を付ける。
     半端に出ている画の上に文字が乗る状態を作らない */
  opacity: 0;
  transition: opacity 0.45s ease;
}
.hero.has-bg .hero-bg { opacity: 1; }

/* 全体の薄い白。⚠️ これは**文字のためではなく写真のトーンのため**。
   文字を守るのは上の `.hero-in::before`（段に追従する側）。
   ⚠️ z-index は -2（画 -3 より前、文字の幕 -1 より後ろ）。
      同じ値にすると DOM 順で `.hero::after` が上に来て、段の幕を覆う。 */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  /* 🗑️ 2026-09-13 **背景のグラデーションを撤去**（人の指定「背景にグラデ不要」）。
     🔴 これで白文字を支えるのは**影だけ**になった。明るい写真に白文字は
        素だと比 1.3〜2.3 しか出ないので、影は「薄く」では足りない ――
        距離0・ぼかし大を4枚重ねて、文字のまわりだけを落とす。
     ⚠️ 空にしても要素は残す。⚠️ ここを消すと `.hero-bg` の z-index の並びが
        変わるので、層の順番だけは保つ。 */
  background: none;
}

/* 🆕 2026-09-13 写真の上は**白文字**（人の指定）。⚠️ `.hero` の中だけ。
   🔑 シャドーは **距離0・ぼかし大を3枚重ねる**（人の指定）。1枚だと
      くっきりした縁取りになって「文字に影が付いている」と見えてしまう。
      重ねると、文字のまわりだけが**写真の一部のように暗く落ちる**。 */
/* 🔴 2026-09-13 白 → **黒**（人の指定）。座布団もグラデも影も無いので、
   明るい写真の上では**濃い文字のほうが成立する** ―― 白は実測 1.02 だった。 */
/* 🆕 2026-09-14 **既定は黒。写真が暗ければ `segment.js` が `on-dark` を付ける。**
   ⚠️ 既定を黒にする理由: 判定に失敗した（canvas が使えない等）ときに
      残る側が、明るい写真の上で読めるほうであるべきだから。 */
.hero .hero-in { color: var(--ink); }
.hero.on-dark .hero-in { color: #ffffff; }
/* 🗑️ 2026-09-13 **影も撤去**（人の指定「一旦、シャドーもなし」）。
   🔴 これで白文字を支えるものが**ページ上に1つも無い**:
        座布団 ✗ ／ 背景グラデ ✗ ／ 影 ✗
      実測（`check_hero.py` 9枚×5幅）で比 **1.3〜2.3**。WCAG AA は 4.5。
      ⚠️ 明るい写真の上の白文字は、条件が悪いと**輪郭が消える**。
      🔑 戻すなら、効いた順に: 下からの暗がり 0.68（最薄 4.83）
         → 影6枚（最薄 4.62）→ 白座布団 0.80（最薄 4.90）。
         どれも一度は作って測ってある。 */
/* 🔴 ワードマークは「Due」も含めて**黒**（人の指定「ロゴも黒」）。
   ⚠️ アクセント青は角丸マーク（塗りつぶしのタイル）が持っている ――
      青い字は ink より薄く、明るい写真の上でいちばん先に読めなくなる。 */
.hero .brand-svg text,
.hero .brand-svg text tspan { fill: var(--ink); }
.hero.on-dark .brand-svg text,
.hero.on-dark .brand-svg text tspan { fill: #ffffff; }

/* 狭い画面では被写体を更に右へ逃がす（文字の下に顔が来ないように） */
@media (max-width: 48rem) {
  /* 🔴 2026-09-14 **29rem → 22rem**。狭い画面で箱を縦に深くすると、16:9 を
     縦に切る量が増えて**顔が切れる**（人の指摘）。箱を浅くすると同じ幅で
     見える横幅が広がり、顔が枠に収まる。
       29rem → 見える横幅は元画像の 47% ／ 22rem → **62%** */
  /* ⚠️ 18rem / 15rem も試したが、字は 17→20px にしかならなかった（実測）。
     狭い画面では**顔を避けて1行に収める幅が物理的に無い** ―― 2行を受け入れ、
     写真の見え方（22rem）を採る。 */
  .hero { padding: 2.25rem 0; min-height: 22rem;
          display: flex; align-items: flex-start; }
  .brand { margin-bottom: 1.25rem; }
  .brand-svg { height: var(--brand-h, 60px); }
  .lede { font-size: 1rem; margin-top: 1.5rem; }
  /* 🔴 `42% 10%` は**空けた左側だけ**を映していて、顔が枠の外にあった。
     人物は右三分の一・顔は上から 3 割あたりに写っているので、そこへ寄せる。
     ⚠️ `filter: brightness()` は足さない ―― 元が high-key なので白飛びする。 */
  .hero-bg { object-position: 68% 30%; }
  /* 狭い画面では段が画面いっぱいなので、段の幕は左右に広げず縦に掛ける */
  .hero-in > * { max-width: var(--text-max, none); }
  /* 🗑️ 2026-09-14 ここに在った `.hero-in::before`（白座布団）の上書きを削除。
     本体の規則を消した時点で `content` が無くなり、**何も描かれない死んだ指定**に
     なっていた。⚠️ 残すと「モバイルには座布団が在る」と読めてしまう。 */
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

h1 {
  /* 🔴 2026-09-13 1.5 → 1.6875rem にして**戻した**。
     「1節15字まで」は**そのフォントサイズでの実測値**であって、字数だけの規則ではない。
     大きくした途端、14字の節（「質疑応答の突っ込みに耐える。」等）まで 375px で
     折り返し、`check_modules` が6セグメントで落ちた。
     🔑 広い画面は下の `@media (min-width: 40rem)` で 2rem になる ――
        主役にしたいなら、狭い画面ではなくそちらを動かす。 */
  margin: 0 0 0.75rem;
  /* 🆕 2026-09-13 大きくする（人の指定）。⚠️ ただし**狭い画面は据え置き**。
     「1節15字まで」は 375px・1.5rem での実測値で、少しでも上げると
     14字の節まで折り返す（実際に6セグメントで落とした）。
     🔑 `clamp()` の下限を 1.5rem に置き、**広い画面だけ**伸ばす。
        `check_modules` が 375px と 430px の2幅で行数を数えている。 */
  /* 🔴 6.6vw だと **430px で 28px** になり、14字の節まで折り返した。
     430px でちょうど 24px（=1.5rem）に着地する傾きへ引き直す:
       430px → 24px ／ 1200px → 80px  ⇒ 傾き 7.27vw・切片 −0.46rem
     ⚠️ `check_modules` が 375/430 の2幅で行数を数えている。 */
  /* 🆕 2026-09-14 `--h1-fs` は `segment.js` の `fitCopy()` が
     **顔に被るときだけ**入れる。入っていなければ clamp のまま（＝大きいまま）。 */
  font-size: var(--h1-fs, clamp(1.5rem, -0.46rem + 7.27vw, 5rem));
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* ⚠️ H1 の <br> は広い画面のためのもの。375px では自然折り返しが先に来て
   「と、」だけが1行に残る（2026-08-30 実測）。狭い画面では殺す。 */
h1 br { display: none; }

/* 節の途中で折り返させない。日本語は語間に空白が無いので、囲まないと任意の位置で割れる */
.nb { display: inline-block; }

.sub {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ---------- form ---------- */

.signup {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
  padding: 1rem;
}

.signup label {
  display: block;
  margin: 0 0 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 600;
}

.signup input[type="email"],
.signup textarea,
.signup select {
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.6875rem 0.75rem;
  border: 1px solid #c8ccd2;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* ⚠️ 16px 未満だと iOS がフォーカス時にズームする */
  line-height: 1.4;
}

/* box-sizing は 16行目の `*` で border-box 済み（ここには書かない） */
.signup textarea { resize: vertical; min-height: 4.5rem; }

.signup button {
  width: 100%;
  padding: 0.8125rem 1rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.signup button:disabled { background: #9aa1ab; cursor: default; }

.note {
  margin: 0.6875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.micro-note {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
}

.authority-note {
  margin: 0.75rem 0 1rem;
  padding: 0.625rem 0.875rem;
  background: #f4f6f8;
  border-left: 3px solid #14161a;
  border-radius: 0 6px 6px 0;
  font-size: 0.8125rem;
  line-height: 1.65;
}

.demo-result .agitation {
  margin: 0.625rem 0;
  padding: 0.625rem 0.75rem;
  background: #fff3f3;
  border-left: 3px solid #d93838;
  border-radius: 0 6px 6px 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #8a1f1f;
}

/* 🆕 hero の価格1行と CTA（2026-09-12・hero のフォームを #apply へ移したため） */
.pricetag {
  margin: 1.125rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pricetag strong {
  color: var(--ink);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.cta { margin: 0.875rem 0 0; }

/* アンカーで飛んだとき、見出しが画面の上端に貼り付かないようにする */
#apply { scroll-margin-top: 1rem; }

/* ⚠️ ボタンではなく <a>。押せる高さを自前で確保する（44px 未満は指で外す） */
/* ⚠️ `<button>` には UA 既定の `2px outset black` が付く。
   `border` を明示しないと、`<a class="btn">` は枠なし・`<button class="btn">` だけ
   立体的な黒枠、という**同じ見た目になるはずの2つがズレる**（実測）。 */
.cta .btn {
  display: block;
  border: 0;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.8125rem 1rem;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.msg {
  margin: 0.75rem 0 0;
  padding: 0.6875rem 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.65;
}
.msg[hidden] { display: none; }
.msg.ok { background: #e8f4ec; color: #1c5c34; }
.msg.ng { background: #fdecec; color: #8a1f1f; }

/* ---------- sections ---------- */

section { padding: 2rem 0; border-top: 1px solid var(--line); }

h2 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 700;
}

h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 700;
}
h3:first-of-type { margin-top: 0; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ol, ul { margin: 0 0 1rem; padding-left: 1.375rem; }
li { margin-bottom: 0.5rem; }
li:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

/* 数字の内訳 */
.counts {
  margin: 0 0 1rem;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.6;
}
.counts th, .counts td {
  border-bottom: 1px solid var(--line);
  padding: 0.4375rem 0;
  text-align: left;
  font-weight: 400;
}
.counts td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counts tr:last-child th, .counts tr:last-child td { border-bottom: 0; }

/* 13段ステップ表のハイライト */
.steps tr.hi { background: #f4f8ff; }
/* 🆕 2026-09-13 13段の表を4象限へ畳んだので、行ではなく `[data-step]` に当てる。
   ⚠️ 旧 `.steps tr.seg-hi` は当たる相手が居なくなっている（表を消したため）。 */
[data-step].seg-hi {
  background: #fff8e8;
  box-shadow: inset 3px 0 0 #d97706;
  font-weight: 700;
}
.q-cell li[data-step].seg-hi {
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
[data-step].seg-hi small { color: #8a5a00; }

/* まだ測れていないことを隠さない */
.unmeasured {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border-left: 3px solid #d7ab4a;
  border-radius: 0 8px 8px 0;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* 価格 */
.price {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.price .amount {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.price .amount span { font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
.price .when { margin: 0 0 1rem; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }
.price dl { margin: 0; font-size: 0.875rem; line-height: 1.7; }
.price dt { font-weight: 700; margin-top: 0.75rem; }
.price dt:first-child { margin-top: 0; }
.price dd { margin: 0.125rem 0 0; color: var(--ink-soft); }

/* FAQ */
details {
  border-bottom: 1px solid var(--line);
  padding: 0.875rem 0;
}
details:first-of-type { border-top: 1px solid var(--line); }
summary {
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.65;
  font-weight: 700;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: "＋ "; color: var(--accent); }
details[open] summary::before { content: "− "; }
details[open] summary { margin-bottom: 0.625rem; }
details p { font-size: 0.875rem; line-height: 1.8; color: var(--ink-soft); }

footer {
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line);
  /* 🆕 2026-09-13 フッタは**本文より一段引く**（人の指定）。
     0.75rem → 0.6875rem（11px）、太字なし、いちばん薄い灰。
     🔑 ここに書いてあるのは「読ませたい話」ではなく**開示**なので、
        本文と同じ重さで置くと、上のコピーと competing する。 */
  font-size: 0.6875rem;
  line-height: 1.8;
  color: var(--ink-faint);
}
/* ⚠️ 太字は markup から外してあるが、後から戻されても効かないようにここでも止める */
footer strong, footer b { font-weight: 400; }
footer p { margin-bottom: 0.5rem; }

/* ---------- 広い画面 ---------- */

@media (min-width: 40rem) {
  body { font-size: 17px; }
  .hero { padding: 3.5rem 0 2rem; }
  /* 🗑️ 2026-09-14 `h1 { font-size: 2rem }` を撤去。
     ⚠️ これが base の `clamp()` を上書きして、**広い画面でも 32px に固定**していた
        ―― 「もっと大きく」の指定が4回とも効いていなかった真因。
     🔑 大きさは base の `clamp()` と `fitCopy()`（顔に被らない上限）が決める。 */
  h1 br { display: inline; }
  .sub { font-size: 1rem; }
  h2 { font-size: 1.25rem; }
  section { padding: 2.75rem 0; }
  .signup { padding: 1.25rem; }
  .signup .row { display: flex; gap: 0.625rem; }
  .signup .row > * { margin-bottom: 0; }
  .signup .row input[type="email"] { flex: 1 1 auto; }
  .signup .row button { width: auto; flex: 0 0 auto; white-space: nowrap; }
}

/* ---------- 🆕 2026-09-13 沈黙メーター（demo.js） ---------- */
/* ⚠️ 値は他のセクションと共有する変数を使わず、この塊で閉じる（3枚で共有する CSS なので） */
/* 🔴 2026-09-13: ここに `border: 2px solid #14161a; padding:…` が残っていた。
   `#demo` が単独のカードだった頃の名残で、いまは `.fbox`（1箱ステッパー）の
   **中**に入っているため、**黒い枠が二重に見えていた**（画面を見て気づいた）。
   枠は `.fbox` が1つだけ持つ。 */
#demo { margin: 0; }
#demo h2 { margin-top: 0; }
#demo .lead { margin-bottom: 1rem; }

.qbox {
  background: #f4f6f8; border-left: 4px solid #14161a;
  padding: .9rem 1rem; border-radius: 6px; margin: 1rem 0;
}
.q-en { font-size: 1.12rem; font-weight: 700; line-height: 1.5; margin: 0 0 .4rem; }
.q-ja { color: #555; font-size: .92rem; margin: 0 0 .5rem; }
.q-swap { margin: 0; font-size: .85rem; }

/* ボタンは a.btn と同じ当たり判定にする（44px 未満だと check.py が落ちる） */
#demo-btn { min-height: 44px; cursor: pointer; }

.demo-live { min-height: 3.6rem; text-align: center; margin: .6rem 0; }
.demo-live .big { font-size: 2.4rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.demo-live .big.ok { font-size: 1.4rem; color: #1a7f37; }
.demo-live textarea { width: 100%; box-sizing: border-box; }

.demo-result table.silence { width: 100%; border-collapse: collapse; margin: .4rem 0 .8rem; }
.demo-result table.silence th,
.demo-result table.silence td { padding: .45rem .5rem; border-bottom: 1px solid #e3e6ea; text-align: left; }
.demo-result table.silence th { width: 42%; font-weight: 400; color: #555; }
.demo-result table.silence td:first-of-type { font-variant-numeric: tabular-nums; }
.demo-result .diff { background: #f4f6f8; padding: .5rem .7rem; border-radius: 6px; font-size: .92rem; }
.demo-result .caveat { font-size: .86rem; color: #555; line-height: 1.65; }
.demo-live .ng, .demo-result .ng { color: #b42318; }
.linkish {
  background: none; border: 0; padding: 0; color: #14161a;
  text-decoration: underline; cursor: pointer; font: inherit;
}

/* 375px: ラベルが2行に折れて表が間延びする（実測） */
@media (max-width: 430px) {
  .demo-result table.silence th { width: 52%; font-size: .9rem; }
  .demo-result table.silence th,
  .demo-result table.silence td { padding: .4rem .3rem; }
  .demo-live .big { font-size: 2rem; }
}

/* 13段の表。⚠️ 5列にすると 375px で「やること」が1文字ずつ縦に割れる（09-13 実測）。
   横へはみ出さずに**列が潰れる**ので、幅の検査では捕まらない。3列で固定する。 */
table.steps { font-size: .92rem; }
table.steps th, table.steps td { padding: .4rem .4rem; vertical-align: top; }
table.steps td:first-child { width: 1.8rem; color: #888; text-align: right; font-variant-numeric: tabular-nums; }
table.steps th { text-align: left; font-weight: 600; }
table.steps th small { display: block; font-weight: 400; color: #667; font-size: .8rem; margin-top: .1rem; }
table.steps td:last-child { width: 8.5rem; text-align: right; white-space: nowrap; }
table.steps tr.hi { background: #fff8e1; }
table.steps tr.hi th { font-weight: 700; }
@media (max-width: 430px) {
  table.steps { font-size: .86rem; }
  table.steps th, table.steps td { padding: .35rem .25rem; }
  table.steps th small { font-size: .74rem; }
  table.steps td:last-child { width: 6.2rem; }
}

/* 🍯 ハニーポット。⚠️ display:none にしない ―― それだと素通りする bot が多い。
   画面外へ出して、人の目にも当たり判定にも入らないようにする */
.hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; opacity: 0 !important;
  pointer-events: none !important;
}

/* 🔑 ゲート（結果をアンケートの後に出す） */
.gate { border: 2px solid #14161a; border-radius: 10px; padding: .9rem 1rem; background: #fff8e1; }
.gate-h { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 700; }
.gate-b { margin: 0 0 .8rem; line-height: 1.7; }
.gate .cta { margin: .6rem 0 .4rem; }
.gate .note { margin: 0; font-size: .86rem; color: #555; }

/* ---------- 🆕 2026-09-13 ①言い当て ---------- */
.askback {
  margin: 0.75rem 0 0.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.askback b { font-weight: 700; }
.askback-a {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.askback-s { color: var(--ink-soft); font-size: 0.875rem; }

/* ---------- 🆕 レーダー ----------
   色は dataviz スキルの検証済みパレット（validate_palette.js 全項目 PASS）。
   ⚠️ **ダーク用の値は入れていない。** このページ自体がライト固定なので、
      `prefers-color-scheme: dark` で系列色だけ変えると白地に暗色系列が乗る。
      ページごとダークにするときに `--s1: #3987e5` / surface `#1a1a19` へ差し替える。 */
.dg-result { margin-top: 1.25rem; }
.dg-radar { display: block; width: 100%; max-width: 21rem; height: auto; margin: 0.5rem auto; }
.dg-grid  { fill: none; stroke: var(--line); stroke-width: 1; }
.dg-spoke { stroke: var(--line); stroke-width: 1; }
.dg-area  { fill: #2a78d6; fill-opacity: 0.16; stroke: #2a78d6; stroke-width: 2; }
.dg-dot   { stroke: #2a78d6; stroke-width: 2; }
.dg-dot.is-m { fill: #2a78d6; }                 /* 📏 実測 = 塗り */
.dg-dot.is-s { fill: var(--bg); }               /* 🙋 申告 = 中抜き（色以外の手掛かり） */
/* ⚠️ 文字は系列色を着ない（dataviz の非交渉ルール）。ink トークンのまま */
.dg-lab { font-size: 11px; fill: var(--ink-soft); }
.dg-val { font-size: 13px; font-weight: 700; fill: var(--ink); }
.dg-src { margin: 0.5rem 0 0; font-size: 0.8125rem; line-height: 1.75; color: var(--ink-soft); }

/* ---------- 🆕 SRS / 指数の説明図 ---------- */
.fig { margin: 1rem 0; }
.growth { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; }
.growth .ax { stroke: var(--line); stroke-width: 1; }
.growth .g-flat { fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 4 3; }
.growth .g-srs  { fill: none; stroke: #2a78d6; stroke-width: 2.5; }
.growth .g-lab  { font-size: 11px; font-weight: 700; fill: var(--ink); }
.growth .g-lab-flat { fill: var(--ink-soft); font-weight: 400; }
.growth .g-ax   { font-size: 10px; fill: var(--ink-soft); }
.fig figcaption { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.7; color: var(--ink-soft); }
ul.tight { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
ul.tight li { margin: 0.375rem 0; line-height: 1.75; }

/* ══════ 🆕 2026-09-13 5モジュール構成 ══════════════════════════ */

/* ── M2 診断ボタン（ページ内で唯一の CTA）── */
.cta-block { padding: 0.5rem 0 1.75rem; border-top: 0; text-align: center; }
.btn-lg {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
.cta-block .micro-note { margin-top: 0.5rem; text-align: left; }

/* ── M3 特徴 ── */
.feat { margin: 0 0 2rem; }
.feat + .feat { padding-top: 1.5rem; border-top: 1px dashed var(--line); }
.feat h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; line-height: 1.6; }
.feat-n {
  display: inline-block;
  margin-right: 0.25rem;
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 700;
}
/* 診断→学習ループ。⚠️ 375px では1列に落とす（4列だと1文字ずつ縦に割れる） */
ol.loop {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
  counter-reset: loop;
}
ol.loop li {
  position: relative;
  padding: 0.6rem 0.75rem 0.6rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  line-height: 1.5;
}
ol.loop li::before {
  counter-increment: loop;
  content: counter(loop);
  position: absolute;
  left: 0.7rem;
  top: 0.62rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}
ol.loop li small { display: block; color: var(--ink-soft); font-size: 0.8125rem; }
@media (min-width: 34rem) { ol.loop { grid-template-columns: 1fr 1fr; } }

/* 混ぜる／固める の対比表
   ⚠️ `table-layout: fixed` を必ず付ける。既定の auto だと、セルの
      **最小内容幅**（「🧩 文法・語彙（知識）」）が優先されて幅の指定が無視され、
      375px で 9px はみ出す（2026-09-13 実測）。auto のままでは % を下げても効かない。 */
.counts.split { table-layout: fixed; width: 100%; }
.counts.split th { width: 42%; vertical-align: top; word-break: break-word; }
/* 🔴 ここが本命。`.counts td` は数字用に `white-space: nowrap` を持っていて、
      それを **長文の説明セルが継承**して 375px で 129px はみ出していた。
      ⚠️ `table-layout: fixed` も `width` も、nowrap の前では効かない。 */
.counts.split td { white-space: normal; text-align: left; word-break: break-word; }
.counts.split td small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.8125rem; }

/* 13段のレベル見出し行 */
.steps tr.lv th {
  padding-top: 0.8rem;
  background: var(--bg-soft);
  font-size: 0.875rem;
  color: var(--ink);
}
.steps tr.lv th small {
  display: block;
  font-weight: 400;
  font-size: 0.78125rem;
  color: var(--ink-soft);
}

/* ── M4 の進行表示 ── */
ol.stepnav {
  display: flex;
  gap: 0.375rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}
ol.stepnav li {
  flex: 1;
  padding: 0.4rem 0.25rem;
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
}
ol.stepnav li.on { background: var(--accent); color: #fff; font-weight: 700; }
#flow h3 { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; }
/* 選択肢の脇に出す注意書き。⚠️ 「まだ無い」を隠さないための場所 */
.hint {
  margin: -0.35rem 0 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--warn);
  background: var(--warn-bg);
  padding: 0.5rem 0.625rem;
  border-radius: 6px;
}
label small { font-weight: 400; color: var(--ink-soft); font-size: 0.8125rem; }
/* ⚠️ フォーム内の注記は左揃え。中央揃えの2〜3行は日本語だと行頭が揃わず読みにくい
   （送信ボタン直下＝いちばん読ませたい場所なので、ここだけは崩さない） */
#apply .micro-note { text-align: left; }

/* 🗑️ 旧 `.flow-step` は `.fbox`（1箱ステッパー）へ置き換えた */
/* 済んだ手は淡く、いまの手は塗る。⚠️ 色だけで伝えない（✓ を足す） */
ol.stepnav li.done { background: #e8f0fb; color: var(--accent); font-weight: 700; }
ol.stepnav li.done::before { content: "✓ "; }

/* 🗑️ 4象限（.quad 系）は削除。M3 は3列のレベル表へ置き換えた（2026-09-13）
   ⚠️ 段の番号は `[data-step]` のままなので segment.js のハイライトは生きている */

/* ══════ 🆕 2026-09-13 説明は表で出す ══════════════════════════
   ⚠️ `.counts td { white-space: nowrap }` を継承しない独立クラスにする。
      あれは数字用で、長文セルが継承すると 375px で 129px はみ出す（実測）。 */
.tbl {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0.75rem 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
}
.tbl th, .tbl td {
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}
.tbl thead th {
  padding-top: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.tbl tbody th { font-weight: 700; }
.tbl small { display: block; margin-top: 0.1rem; font-size: 0.6875rem; font-weight: 400; color: var(--ink-soft); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl tr.hi { background: #fff8e8; }
.tbl tr.hi th, .tbl tr.hi td { box-shadow: inset 3px 0 0 #d97706; }
.ev th { width: 52%; }
/* ✅ 確認済み ／ ⚠️ 設計判断。⚠️ 色だけで分けない（記号と文字を必ず添える） */
.tbl b.ok { color: #1a7f37; }
.tbl b.wk { color: #8a5a00; }
.feat h4 { margin: 1.25rem 0 0.25rem; font-size: 0.9375rem; }
/* つまづき帳 → SRS の流れ。ol.loop と同じ形で、数を4つに揃える */
ol.loop.srs li { background: var(--bg); }

/* ══════ 🆕 2026-09-13 M4 を1箱のステッパーにする ══════════════
   ⚠️ **状態は `#fbox[data-stage]` の1箇所だけ。**
   ⚠️ `data-step` にしない —— 13段の識別子と衝突して箱ごとハイライトされる。 パネルごとに hidden を
      付け外しすると、必ずどこかで食い違う（demo.js の step() が唯一の書き手）。 */
.prize {
  display: grid;
  gap: 0.5rem;
  margin: 0.875rem 0;
  padding: 0;
  list-style: none;
}
.prize li {
  position: relative;
  padding: 0.65rem 0.75rem 0.65rem 2.4rem;
  border: 1px solid #c7dafa;
  border-radius: 10px;
  background: #eef4fd;
  line-height: 1.6;
}
.prize .p-n {
  position: absolute;
  left: 0.7rem;
  top: 0.72rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
}
.prize li > b { font-size: 0.9375rem; }
.prize li small { display: block; margin-top: 0.1rem; font-size: 0.8125rem; color: var(--ink-soft); }
.prize li small b { color: var(--ink); }

.fbox {
  margin: 1rem 0 0;
  padding: 0.875rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.fbox .stepnav { margin-bottom: 0.875rem; }
.fpanel { margin: 0; }
.fp-h { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 700; line-height: 1.6; }
.fp-n { color: var(--accent); }
.fp-sub { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.7; }
.skip { margin: 0.75rem 0 0; text-align: center; font-size: 0.8125rem; }

/* 済んだ手は1行に畳む */
.donebar {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  box-sizing: border-box;
}
button.donebar { cursor: pointer; }
button.donebar:hover { border-color: var(--accent); }
.donebar span { float: right; color: var(--accent); text-decoration: underline; }

/* 🔑 どの面を見せるか ―― ここだけが見た目を決める */
.fbox[data-stage="1"] #p-form,
.fbox[data-stage="1"] #db-measure,
.fbox[data-stage="1"] #db-form,
.fbox[data-stage="2"] #p-measure,
.fbox[data-stage="2"] #db-form,
.fbox[data-stage="3"] #p-measure,
.fbox[data-stage="3"] #p-form { display: none; }

/* ══════ 🆕 2026-09-13 ① 3行 ／ ③ 3列レベル表 ══════════════════ */
ol.three { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
ol.three li { margin: 0.4rem 0; line-height: 1.8; }

/* ⚠️ **375px では1列に落とす。** 3列のままだと1列 ≈ 100px になり、
   「10秒で言う」が1文字ずつ縦に割れる（横へはみ出さないので幅検査では捕まらない
   ―― 2026-09-13 に13段の表で実際に踏んだ）。
   縦に積むと Lv1→Lv2→Lv3 が上から順に読めるので、進み方とも合う。 */
.lv3col { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin: 0.875rem 0 0; }
@media (min-width: 38rem) { .lv3col { grid-template-columns: repeat(3, 1fr); } }
.lvcol {
  padding: 0.5rem 0.625rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
}
.lvh { margin: 0 0 0.35rem; font-size: 0.8125rem; line-height: 1.45; }
.lvh b { display: inline-block; color: var(--accent); }
.lvh small { display: block; font-size: 0.6875rem; color: var(--ink-soft); }
.lvcol ul { margin: 0; padding: 0; list-style: none; }
.lvcol li {
  padding: 0.32rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.lvcol li:first-child { border-top: 0; }
.lvcol li::after { content: ""; display: block; clear: both; }
.lvcol li b { display: inline; margin-right: 0.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.lvcol li small { display: inline-block; margin-left: 0.3rem; font-size: 0.6875rem; color: var(--ink-soft); }
.lvcol li em { float: right; font-style: normal; font-size: 0.8125rem; }
.lvcol li em a { color: var(--accent); }
.lvcol li.hi { background: #fff8e8; margin: 0 -0.625rem; padding-left: 0.625rem; padding-right: 0.625rem; }

/* ══════ 🆕 2026-09-13 アプリ風グリッド＋アイコン ══════════════ */
/* symbol の入れ物。⚠️ `display:none` にすると Safari で `<use>` が引けない */
.ic-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  /* 🔑 1色（currentColor）。親の色が変われば追従する ―― ラスタ画像にするとこれが効かない */
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
ul.appgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 38rem) { ul.appgrid { grid-template-columns: 1fr; } }
ul.appgrid li {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.4rem;
  align-items: center;
  padding: 0.45rem 1.35rem 0.45rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  border-top: 1px solid var(--line);   /* 旧 .lvcol li の上罫線を打ち消す */
  font-size: 0.8125rem;
  line-height: 1.4;
}
ul.appgrid .app-ic { grid-row: 1 / 3; color: var(--accent); display: flex; justify-content: center; }
ul.appgrid li b { display: inline; margin-right: 0.25rem; color: var(--ink-soft); font-size: 0.6875rem; }
ul.appgrid .app-n { font-weight: 700; }
ul.appgrid li small {
  grid-column: 2; display: block; margin: 0;
  font-size: 0.6875rem; color: var(--ink-soft);
}
/* 状態は右上の小さな札。⚠️ float をやめた（グリッドだと行送りが崩れる） */
ul.appgrid li em {
  position: absolute; top: 0.3rem; right: 0.3rem;
  float: none; font-style: normal; font-size: 0.75rem; line-height: 1;
}
ul.appgrid li.hi { margin: 0; padding-left: 0.45rem; padding-right: 1.35rem; background: #fff8e8; border-color: #f0d9a8; }
ul.appgrid li[data-step].seg-hi { margin: 0; padding-left: 0.45rem; padding-right: 1.35rem; }
/* サンプルのレーダー */
.fig.sample { margin: 0.875rem 0 1rem; padding: 0.5rem 0.25rem 0.25rem; border: 1px dashed var(--line); border-radius: 10px; }
.sample-h { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); text-align: center; }

/* ══════ 🆕 2026-09-13 見出しを大きく／小さい注釈をやめる ══════════
   ⚠️ 「小さい灰色の注釈は誰も読まない」。だから**数を減らして、本文サイズで書く**。
      `.note`（0.8125rem・灰色）をこの節では使わず、`.say` に統一した。 */
#how h2 { font-size: 1.5rem; line-height: 1.5; }
#how .feat h3 {
  margin: 0 0 0.625rem;
  font-size: 1.25rem;
  line-height: 1.55;
}
#how .feat-n { font-size: 1.4rem; }
#how .feat > p { font-size: 1rem; line-height: 1.85; }
ol.three li { font-size: 1rem; line-height: 1.9; }

/* 🔑 残した約束はこれ。**本文と同じ大きさ**で、数を絞る */
.say {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.say.big { font-size: 1rem; border-left-width: 5px; }
.say a { color: var(--accent); }

/* ② の表を大きく・行数を減らす */
.ev tbody th { width: 62%; font-size: 0.9375rem; line-height: 1.6; }
.ev tbody td { font-size: 1rem; text-align: right; vertical-align: middle; }
.ev-sub { font-size: 0.8125rem; font-weight: 400; color: var(--ink-soft); }
.ev thead { display: none; }

/* ── アプリのタイル：アイコン＋機能名だけ・アイコンを大きく ── */
.lvh {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}
ul.appgrid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
@media (min-width: 38rem) { ul.appgrid { grid-template-columns: repeat(4, 1fr); } }
ul.appgrid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.7rem 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  text-align: center;
  /* 🗑️ ハイライト・記号は消した（人の指定）。⚠️ 「どれが動くか」は
     グリッド直下の `.say.big` **1文だけ**が言う。あれを消すと嘘になる。 */
}
ul.appgrid li.hi, ul.appgrid li[data-step].seg-hi {
  margin: 0; padding: 0.7rem 0.25rem 0.6rem; background: var(--bg); box-shadow: none;
}
ul.appgrid .app-ic { color: var(--accent); }
.app-ic svg { width: 40px; height: 40px; stroke-width: 1.5; }
ul.appgrid .app-n { font-size: 0.8125rem; font-weight: 700; line-height: 1.35; }

/* 🆕 2026-09-13 見出しをさらに大きく（人の指定「もっと大きく」）。
   ⚠️ 24→28px は 375px でも1行に収まる範囲。これ以上は「EnglishDue とは」が折れる */
#how h2 { font-size: 1.75rem; line-height: 1.45; letter-spacing: -0.01em; }
#how .feat h3 { font-size: 1.375rem; line-height: 1.5; }
#how .feat-n { font-size: 1.5rem; }
.lvh { font-size: 1.0625rem; }
/* `.say` を詰める。⚠️ 塗りつぶしの箱が縦に積まれると、それ自体がノイズになる */
.say {
  margin: 0.5rem 0 0;
  padding: 0.4rem 0 0.4rem 0.6rem;
  border-left: 3px solid var(--warn);
  background: none;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.say.big { font-size: 1rem; background: var(--warn-bg); padding: 0.6rem 0.7rem; border-left-width: 5px; }

/* ══════ 🆕 2026-09-13 注釈を ※N の脚注へ／12機能を3段×4列 ══════ */
/* 本文に残る ※ の参照。⚠️ **リンクを外さない** ―― 外すと主張だけが残る */
.fnref { margin: 0.4rem 0 0; font-size: 0.875rem; }
.fnref a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.fnref a:hover { color: var(--accent); }

/* 🔑 製品の状態。**脚注にしない**（12個が全部使えると読まれる） */
.status {
  margin: 0.875rem 0 0;
  padding: 0.7rem 0.8rem;
  border-left: 5px solid var(--warn);
  border-radius: 0 8px 8px 0;
  background: var(--warn-bg);
  font-size: 1rem;
  line-height: 1.8;
}
.status a { color: var(--accent); }

/* ── 12機能：縦3段 × 横4列 ── */
.lvrows { display: grid; gap: 0.875rem; margin: 0.875rem 0 0; }
.lvrow { }
.lvrow .lvh { margin: 0 0 0.4rem; }
.lvrow ul.appgrid { grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
/* ⚠️ 高さを揃える。名前が2行に折れるタイルがあり、揃えないと並びが崩れて見える */
.lvrow ul.appgrid li {
  min-height: 92px;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem 0.15rem;
  border-radius: 12px;
}
.lvrow .app-ic svg { width: 32px; height: 32px; }
.lvrow ul.appgrid .app-n { font-size: 0.75rem; line-height: 1.3; }
@media (min-width: 30rem) {
  .lvrow .app-ic svg { width: 40px; height: 40px; }
  .lvrow ul.appgrid li { min-height: 108px; }
  .lvrow ul.appgrid .app-n { font-size: 0.875rem; }
}

/* ── 末尾の注釈 ── */
/* 🗑️ 2026-09-14 `#notes h2` の 1.25rem は撤去 ―― 下で全要素を 0.75rem に揃える。
   ⚠️ 残すと**どちらが後に書いてあるか**で決まる（同じ詳細度）ので、消す。 */
dl.fn { margin: 0.75rem 0 0; }
dl.fn dt {
  margin-top: 1rem;
  font-weight: 700;
  color: var(--accent);
  /* 本文からリンクで飛んでくるので、見出しが上に隠れないようにする */
  scroll-margin-top: 1rem;
}
dl.fn dt:first-child { margin-top: 0; }
dl.fn dd { margin: 0.2rem 0 0; font-size: 0.9375rem; line-height: 1.85; }
/* ⚠️ 名前が2行に折れるタイルだけ背が伸びて、1段の中で 92/100 に割れていた（実測）。
   グリッド既定の stretch が効いていなかったので明示する。 */
.lvrow ul.appgrid { align-items: stretch; }
.lvrow ul.appgrid li { height: 100%; box-sizing: border-box; }

/* ══════ 🆕 2026-09-13 想定読者（架空）══════════════════════════
   🚫 **顔写真を置かない。** 利用者ゼロなので、診断結果の隣に実在しそうな顔が
      並ぶと「この人が使ってこうなった」に読める（＝作れば捏造）。
      だから絵文字の記号アバターにして、見出しで「架空の人物です」と言う。 */
.sample-row { display: grid; gap: 0.5rem; margin: 0.875rem 0 0; }
@media (min-width: 40rem) { .sample-row { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.sample-row .fig.sample { margin: 0; }
.persona {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-soft);
}
.pe-h { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink-soft); }
/* ⚠️ 「架空」を小さくしすぎない。ここが読まれないと、ただの利用者の声になる */
.pe-h span { font-weight: 700; color: var(--warn); }
/* 🆕 2026-09-13 **写真を上・説明を下**（人の指定）。写真はさらに大きく。
   ⚠️ 横並びのままだと写真を大きくできない（375px で文が縦に割れる）。 */
.pe-body { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
/* 🆕 2026-09-13 **履歴書の証明写真**（3:4・大きく）。人の指定。
   ⚠️ 円だと「アイコン」に見えて履歴書感が出ない。角丸の縦長にする。 */
.pe-av {
  flex: none;
  width: 8.25rem; height: 11rem;     /* 132×176 = 3:4 */
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 2rem;
  line-height: 11rem;
  text-align: center;
  overflow: hidden;
}
.pe-who { margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; }
.pe-si  { margin: 0.15rem 0 0; font-size: 0.875rem; line-height: 1.7; color: var(--ink-soft); }
.pe-due { margin: 0.3rem 0 0; font-size: 0.8125rem; font-weight: 700; color: var(--accent); }
/* 誘導元ごとに色みだけ変える。⚠️ 色だけで意味を伝えない（文字が本体） */
.persona.sc-a { border-color: #c7dafa; } .persona.sc-b { border-color: #cfe8d8; }
.persona.sc-c { border-color: #f3dcc2; } .persona.sc-d { border-color: #d9d3f0; }
.persona.sc-e { border-color: #f2d3d3; } .persona.sc-f { border-color: #c9e6ea; }
.persona.sc-g { border-color: #e3e0c6; } .persona.sc-h { border-color: #e3e6ea; }

/* ── 想定読者の顔写真（AI生成）──
   ⚠️ **画像が無いときは絵文字に戻る。** 生成前・404・遅い回線で
      「壊れた画像アイコン」が出る状態にしない（segment.js が has-img を付け外し）。 */
.pe-av { position: relative; overflow: visible; }
/* 🔴 2026-09-13 ここを `display: none` にしていたのが原因で**写真が永久に出なかった**。
   `display:none` の画像はブラウザが**読み込まない**ので、「読めたら表示する」が
   一生成立しない（鶏と卵）。⚠️ 読み込みは走らせたまま、**見せ方だけ**切り替える。 */
.pe-img { display: block; width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.persona:not(.has-img) .pe-img { visibility: hidden; }
.pe-fb { position: absolute; inset: 0; line-height: 11rem; text-align: center; }
.persona.has-img .pe-fb { display: none; }
.persona.has-img .pe-av { border-color: var(--line); background: var(--bg-soft); }
/* 🔑 AI 生成だと画像の上で言う。⚠️ alt だけだと目で見る人には伝わらない */
.pe-ai {
  display: none;
  position: absolute;
  right: -2px; bottom: -2px;
  padding: 0 0.22rem;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.persona.has-img .pe-ai { display: block; }
/* 🆕 1手法＝1行。⚠️ 折り返しても2行で収まるよう th を広めに */
.ev tbody th { width: 66%; font-weight: 400; }
.ev tbody th b { font-weight: 700; }
/* 「設計」札。⚠️ これを消すと、まだ動いていない機能が動いて見える */
.ev-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ══════ 🆕 2026-09-13 1手法＝3行（説明／根拠／引用）══════════════
   🗑️ 表（`.ev`）はやめた。引用の論文名が長く、2列だと右の数字に押されて
      375px で1文字ずつ縦に割れる（幅の検査では捕まらない崩れ方）。 */
ol.meth { margin: 0.875rem 0 0; padding: 0; list-style: none; }
ol.meth li {
  padding: 0.7rem 0 0.75rem;
  border-top: 1px solid var(--line);
}
ol.meth li:first-child { border-top: 0; padding-top: 0; }
.m-1 { margin: 0; font-size: 1rem; line-height: 1.65; }
.m-1 b { font-weight: 700; }
.m-2, .m-3 { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.75; color: var(--ink-soft); }
.m-2 b, .m-3 b { color: var(--ink); }
.m-2 b.ok, .m-3 b.ok { color: #1a7f37; }
/* 「根拠」「引用」の札。⚠️ 幅を揃えて、2行目と3行目の始まりを縦に合わせる */
.m-k {
  display: inline-block;
  min-width: 2.6rem;
  margin-right: 0.35rem;
  padding: 0.02rem 0.3rem;
  border-radius: 4px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  vertical-align: 0.08em;
}

/* ── ② 課題と手法 × 科学的根拠 の表 ──
   ⚠️ `table-layout: fixed` を必ず付ける。auto だと最小内容幅が優先されて
      幅の指定が無視され、375px ではみ出す（09-13 に実測）。
   ⚠️ 引用は著者＋年だけ。論文タイトルを入れると列が潰れる。 */
.meth2 { table-layout: fixed; }
.meth2 thead { display: table-header-group; }
.meth2 thead th {
  padding-bottom: 0.3rem;
  font-size: 0.6875rem; font-weight: 700; color: var(--ink-soft);
}
.meth2 th, .meth2 td { width: 50%; padding: 0.6rem 0.4rem; vertical-align: top; }
.meth2 tbody th { font-size: 0.875rem; font-weight: 400; line-height: 1.65; }
.meth2 tbody th b { font-weight: 700; }
.meth2 tbody td { font-size: 0.8125rem; line-height: 1.65; color: var(--ink-soft); }
.meth2 tbody td b.ok { color: #1a7f37; font-size: 0.9375rem; }
.cite { display: block; margin-top: 0.15rem; font-size: 0.6875rem; color: var(--ink-soft); }
/* Lv 見出しの「課題 → 解決」 */
.lv-s { display: block; margin-top: 0.1rem; font-size: 0.8125rem; font-weight: 400; color: var(--ink-soft); }
/* ペルソナの氏名と社名。⚠️ すべて架空 ―― 見出しでそう言い切っている */
.pe-name { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.pe-org { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-soft); }
.pe-who { margin: 0.15rem 0 0; font-size: 0.8125rem; font-weight: 400; color: var(--ink-soft); }
/* 🆕 2026-09-13 Lv 見出しは**1行で言い切る**（人の指定）。
   ⚠️ `.lv-s` は `display:block` なので必ず2行になる ―― span ごとやめた。
   ⚠️ 375px で折り返さない長さに収める必要があるので、少し小さくする。 */
.lvh { font-size: 0.9375rem; font-weight: 400; color: var(--ink); }
.lvh b { color: var(--accent); font-weight: 700; }

/* 履歴書サイズにしたぶん、右側の文字も少し大きく */
.pe-body { gap: 0.75rem; }
.pe-name { font-size: 1.0625rem; }
.pe-si { font-size: 0.875rem; }

/* 写真が上に来たので、AI 札も右下の角へ寄せ直す */
.pe-ai { right: 3px; bottom: 3px; font-size: 0.5625rem; padding: 0.05rem 0.28rem; }
.pe-body > div { width: 100%; }
.pe-si { text-align: left; }

/* 🆕 2026-09-13 冒頭の3行は**このページで最初に読まれる**ので大きく。
   ⚠️ `#how .feat > p`（1rem）より大きくする ―― 要約が本文と同じ大きさだと埋もれる。 */
ol.three {
  margin: 0.75rem 0 0;
  padding-left: 1.4rem;
}
ol.three li {
  margin: 0.55rem 0;
  font-size: 1.125rem;
  line-height: 1.85;
}
ol.three li::marker { color: var(--accent); font-weight: 700; }

/* ── ※ の記号だけを本文に置く（中身は末尾へ）── */
.fnm {
  margin-left: 0.2rem;
  padding: 0 0.15rem;
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  vertical-align: 0.35em;
  white-space: nowrap;
}
.fnm:hover { text-decoration: underline; }
.fn-cap { margin-top: 0.15rem; text-align: right; }
.fn-cap .fnm { vertical-align: 0; font-size: 0.75rem; }

/* ── 参考文献（論文引用の体裁）──
   ⚠️ DOI はリンクにしない。このページは**外部リンク0**で運用している（cvr_review A6）。 */
#refs { margin-top: 1.75rem; }
.ref-note { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.8; color: var(--ink-soft); }
.ref-note b { color: var(--ink); }
ol.refs { margin: 0.625rem 0 0; padding-left: 1.5rem; }
ol.refs li {
  margin: 0.625rem 0;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--ink-soft);
  /* 長い DOI で横に溢れさせない */
  word-break: break-word;
}
ol.refs i { font-style: normal; color: var(--ink); }

/* ── 記憶定着のグラフを大きく（人の指定）──
   ⚠️ 負のマージンで外へ張り出すと **4px はみ出す**（実測）。
      幅いっぱいまでにして、はみ出させない。 */
.growth { max-width: 100%; width: 100%; }
#how .fig { margin: 1rem 0; }

/* 🆕 2026-09-13 表のフォントを大きく・左は改行なしの1文（人の指定）。
   ⚠️ 詳細（効果量・基準線・出典）は ※3.x の先へ送ったので、セルが短くなった。 */
.meth2 tbody th { font-size: 1rem; line-height: 1.7; }
.meth2 tbody td { font-size: 0.9375rem; line-height: 1.7; color: var(--ink); }
.meth2 tbody td b.ok { font-size: 1.0625rem; }
.meth2 th, .meth2 td { padding: 0.75rem 0.4rem; }
/* 出どころの内訳 */
.refs-dl dd { font-size: 0.875rem; }
.refs-dl i { font-style: normal; color: var(--ink); }

/* 🆕 2026-09-13 冒頭3行と最初の見出しの間にも区切り線（人の指定）。
   ⚠️ これまでは `.feat + .feat` だけだったので、**2つ目の見出しの上にしか線が無かった**。
      1つ目の `.feat` にも同じ線を付けて、区切りの見え方を揃える。 */
#how .feat { padding-top: 1.5rem; border-top: 1px dashed var(--line); }

/* ══════ 🆕 2026-09-13 規約のポップアップ ══════════════════════
   🔑 素の `<dialog>`。ライブラリを足さない（このページは依存ゼロ）。 */
.legal { margin: 0.75rem 0 0; font-size: inherit; }
/* ⚠️ button は font-size を継承しない（既定で UA の 13.333px になる）ので明示する。
   ここを `inherit` にしないと、リンクだけフッタ本文より大きいままになる。 */
.legal .linkish { font: inherit; color: var(--ink-faint); }
.legal .linkish:hover { color: var(--accent); }
.legal span { margin: 0 0.35rem; color: var(--line); }

dialog.dlg {
  width: min(34rem, calc(100vw - 1.5rem));
  max-height: min(82vh, 44rem);
  padding: 1.25rem 1.1rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  overflow: auto;
  /* ⚠️ iOS で本文が背後にスクロールしないよう、慣性スクロールを中に閉じる */
  -webkit-overflow-scrolling: touch;
}
dialog.dlg::backdrop { background: rgba(20, 22, 26, 0.55); }
.dlg-x { position: sticky; top: -1.25rem; text-align: right; margin: -0.5rem -0.35rem 0 0; }
.dlg-x button {
  min-width: 44px; min-height: 44px;        /* 指で押せる下限 */
  border: 0; background: none; color: var(--ink-soft);
  font-size: 1.125rem; cursor: pointer;
}
dialog.dlg h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
dialog.dlg h3 { margin: 1.25rem 0 0.35rem; font-size: 1rem; }
dialog.dlg p, dialog.dlg li { font-size: 0.875rem; line-height: 1.85; }
dialog.dlg ul { margin: 0.35rem 0; padding-left: 1.25rem; }
dialog.dlg li { margin: 0.25rem 0; }
dialog.dlg code { font-size: 0.8125rem; background: var(--bg-soft); padding: 0 0.2rem; border-radius: 3px; }
.dlg-d { margin: 0 0 0.5rem; font-size: 0.75rem !important; color: var(--ink-soft); }
/* 🔑 いちばん大事な段落だけ枠で出す */
.dlg-k {
  padding: 0.6rem 0.7rem; border-left: 4px solid var(--accent);
  background: #eef4fd; border-radius: 0 8px 8px 0;
}
/* 🔴 未記入が残っていることを、見て分かる形にしておく */
.dlg-todo {
  margin-top: 1rem; padding: 0.55rem 0.7rem;
  border: 1px dashed var(--warn); border-radius: 8px;
  background: var(--warn-bg); color: var(--warn);
}

/* ── 🆕 2026-09-13 主ボタンと逃げ道を並べる ──
   🔑 主＝塗り／副＝枠線。同じ塗りにすると測定（CV1）が副へ流れる。
   ⚠️ 375px では2つ並べると1つ約160px。文字が縦に割れないか必ず実測すること。 */
.cta-pair { display: flex; gap: 0.5rem; align-items: stretch; }
.cta-pair .btn { flex: 1 1 0; margin: 0; font-size: 0.9375rem; padding: 0.7rem 0.4rem; }
/* ⚠️ `.cta .btn`（詳細度 0,2,0）に負けるので、**同じ深さで**指定する。
   これを `.btn-ghost` だけにすると**両方とも塗りつぶしの青**になる（実測）。 */
.cta-pair .btn-ghost {
  background: var(--bg);
  color: var(--accent);
  border: 2px solid var(--accent);
}
.cta-pair .btn-ghost:hover { background: #eef4fd; }
@media (min-width: 30rem) { .nb-sp { display: none; } }

/* ---------- 🔒 設問を伏せる（2026-09-13） ----------
   押す前に読めてしまうと「一言目までの秒数」が準備時間つきの数字になる。
   ⚠️ `visibility` ではなく `display` で消す ―― 場所を空けたままだと
      伏せ札と設問が二重の高さを取り、カウントダウン中に箱が跳ねる。 */
.q-wait { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
#demo:not(.q-on) .q-en,
#demo:not(.q-on) .q-ja,
#demo:not(.q-on) .q-swap { display: none; }
/* 3つの状態は排他 —— 伏せ札 → カウント → 設問。⚠️ 同時に2つ出さない */
#demo.q-on .q-wait,
#demo.counting .q-wait,
#demo:not(.counting) .q-cd { display: none; }
/* 箱の高さを3状態で揃える。⚠️ 揃えないとカウント中に下の要素が跳ねる */
.qbox { min-height: 6.5rem; }

/* 3・2・1。⚠️ `.big`（計測中の数字）と同じ大きさにすると、
   カウントと計測値の区別がつかない。カウントは**もっと大きく・灰**で出す。 */
.q-cd { margin: 0; text-align: center; }
.cd { display: block; font-size: 3.2rem; font-weight: 700; line-height: 1.1;
      color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cd-sub { display: block; margin-top: .25rem; font-size: .9rem; color: var(--ink-soft); }

/* ── 注釈（#notes）—— 小さく・薄く・全部おなじ大きさ（2026-09-14 人の指定）──
   🔑 ここは**読ませたい話ではなく出どころ**。探しに来た人だけが読めばよい。
   🔑 **見出しも本文も同じ 0.75rem**（12px）。⚠️ 見出しだけ大きいと、
      「注釈」が節として主張してしまう ―― 縮めた意味が消える。

   🔴 色は **#73777d = 白地で 4.50:1**。WCAG AA（通常文字 4.5）のちょうど下限。
      ⚠️ 最初 #767a80 と手計算して**外した**（実測 4.32 で AA 割れ）――
         青みのぶん輝度が低く出る。**目分量でも手計算でもなく、振って測って選ぶ。**
      人の指定は「ギリギリ読める薄いグレー」で、これがその下限。
      ⚠️ **これ以上薄くすると AA を割る。** 例: #8a8f96 は 3.5:1 で、
         明るい場所のスマホでは**参考文献が読めなくなる** ―― 引用した論文を
         確かめに来た人が、いちばん確かめられない状態になる。
      ⚠️ 12px は AA の「大きい文字」扱い（18pt/14pt太字）には**入らない**ので、
         3.0 ではなく 4.5 で見る必要がある。 */
#notes,
#notes h2,
#notes h3,
#notes p,
#notes li,
#notes .ref-note,
#notes .fn dt,
#notes .fn dd,
#notes .refs-dl dd {
  font-size: 0.75rem;
  line-height: 1.9;
  color: #73777d;
}
/* 太字は残さない（markup の `<b>` は意味として残す・見た目だけ止める） */
#notes b,
#notes strong,
#notes h2,
#notes h3,
#notes .fn dt { font-weight: 400; color: inherit; }
/* ⚠️ `<i>`（論文タイトル）の斜体は残す ―― 書誌の書式であって強調ではない */
#notes .refs-dl i { color: inherit; font-style: italic; }
/* 見出しの余白だけは残す（全部同じ大きさにすると、詰まって塊に見えるため） */
#notes h2 { margin: 1.5rem 0 0.5rem; }
#notes h3 { margin: 1rem 0 0.25rem; }

/* ── 送信後の画面（2026-09-14 人の指定で結果だけにした）── */
.dg-lead { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.8; }
.dg-lead b { font-size: 1.25rem; }
.dg-ticket { margin: 1.25rem 0 0; line-height: 1.8; }
/* 🔑 送信が通った箱では、**測定パネルも4問も出さない**。
   ⚠️ `data-stage="3"` の既存規則に加えて、フォームの完了メッセージも消す ――
      結果の中で同じことを言っているので、二重に出ると画面が散らかる。 */
.fbox[data-stage="3"] .signup,
.fbox[data-stage="3"] .msg,
.fbox[data-stage="3"] .micro-note,
.fbox[data-stage="3"] #db-measure,
/* ⚠️ 「✅ ② 4つの質問 —— 済み」も結果画面では出さない。
   ステッパー（①②③）が同じことを示しているので、二重になる。 */
.fbox[data-stage="3"] #db-form { display: none; }
/* 測っていない人の帯は ✅ に見せない（緑にしない） */
.donebar.is-skipped { color: var(--ink-soft); }
.donebar.is-skipped b { font-weight: 700; color: var(--ink); }
/* 飛ばした段は ✓ にしない。⚠️ `done` と同じ見た目にすると、測っていない人に
   「測った」と表示することになる（`demo.js` の `skip` と対）。
   ⚠️ セレクタは `ol.stepnav li` に合わせる ―― `.stepnav .skip` では
      `li.done`（詳細度が同じで後勝ち）に負けて効かない。 */
ol.stepnav li.skip { background: var(--bg-soft); color: var(--ink-soft); font-weight: 400; }
ol.stepnav li.skip::before { content: "—\00a0"; }

/* 事業者・連絡先。⚠️ `.dlg-todo`（赤い未了マーク）とは別扱いにする ――
   記入済みのものを赤いままにすると、本当に未了のものが埋もれる。 */
.dlg-who { margin: 0.75rem 0 0; line-height: 1.8; }
.dlg-who .dlg-todo { display: block; margin-top: 0.25rem; }