/* PRキャリアエージェントのLP（prca-js-lp）のデザインシステムをそのまま使う。
   診断はLPからの続きなので、見た目が切れないようにトークンを揃えてある。

   LPは白一色でダークモードを持たない。こちらもそれに合わせる。
   LPが白で診断が黒だと、同じサービスに見えない。 */
:root{
  --white:#FFFFFF; --paper:#FBFDFF;
  --navy-900:#04173F; --navy-800:#06235F; --navy-700:#0B2E72; --navy-600:#123C8C;
  --blue-600:#0549B8; --blue-500:#075CE5; --blue-400:#3C82F0;
  --blue-100:#D9E6F7; --blue-50:#EAF2FD; --blue-25:#F3F8FF;
  --ink-900:#0C1B33; --ink-700:#172A4D; --ink-500:#41557A; --ink-400:#6B7C9C;
  --gold-500:#C8952B;
  --danger:#B3261E;

  --text-heading:var(--navy-800); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --surface-page:var(--white); --surface-panel:var(--blue-50); --surface-tint:var(--blue-25);
  --border-default:var(--blue-100); --border-strong:#BCD3EF;

  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  --fs-h1:40px; --fs-h2:38px; --fs-h3:24px; --fs-h4:18px;
  /* 文字の基準は、デジタル庁デザインシステムのタイポグラフィに合わせている。
     本文は16px以上（一般的には17〜18）、字間2%、行高は本文170〜175%・見出し140〜150% */
  --fs-nav:14px; --fs-body-lg:18px; --fs-body:17px; --fs-small:14px; --fs-caption:13px;
  /* 読む列の幅。本文17px×41字＝697px。日本語の本文は35〜45字/行が読みやすい */
  --col-read:700px;
  --lh-body:1.75; --lh-heading:1.5; --lh-display:1.3;
  --ls-normal:.02em; --ls-wide:.08em;

  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --r-sm:6px; --r-md:10px; --r-card:14px; --r-panel:18px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(6,35,95,.04),0 4px 14px rgba(6,35,95,.05);
  --shadow-btn:0 2px 8px rgba(7,92,229,.24);
  --ring-focus:0 0 0 3px rgba(7,92,229,.35);
  --dur:200ms; --ease:cubic-bezier(.2,.6,.3,1);
}

/* ★説明文の中では太字（<b>）を使わない（2026/9/19）。
   文の一部を太くすると、AIが書いた文のように見えるという指摘。
   強弱は大きさ・色・位置でつける。render.js の jp() が ** を落とすので、
   モデルが書いた文に ** が混ざっても画面には出ない。
   見出し・ラベル・数値は要素ごと font-weight:700 にしてあり、これは太字のまま */
*{box-sizing:border-box}
/* ★hidden 属性を必ず効かせる（2026/9/19）。
   hidden はブラウザ既定の display:none で効くので、要素に display を
   指定すると負ける。button[type=submit] に display:flex を入れた結果、
   1問目でも「診断する」が出たままになった（実測で発覚）。 */
[hidden]{display:none!important}
body{margin:0;background:var(--surface-page);color:var(--text-body);
  /* 日本語を文節の切れ目だけで折り返す。既定では「戦略設計／で、」のように
     文節の途中で改行される（2026/9/18 指摘）。keep-all で自動の改行を止め、
     <wbr> を置いた場所だけで折り返させる（BudouX 本体の applyWrapStyle と
     同じ指定）。<wbr> は render.js（結果画面）と vendor/budoux の applyWbr
     （入力画面・モーダル）が入れる。
     overflow-wrap:anywhere は、1文節が1行より長いときの逃げ道。
     word-break:auto-phrase（CSSだけで同じことをする指定）は使わない。
     Chrome と Edge しか対応しておらず、Safari では効かないため */
  word-break:keep-all;overflow-wrap:anywhere;
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-normal);-webkit-font-smoothing:antialiased}
/* 外枠はLPに合わせて広く取る（LPは 1200px 上限・1024px 画面で 960px 前後）。
   そのうえで、読ませる文章だけを細い段に絞る。
   枠を狭めて文章を太くすると、窮屈なのに読みにくいという逆の結果になる。 */
/* LPと同じ器。中身は 1200px まで、左右 24px */
.container{max-width:1200px;margin:0 auto;padding-inline:var(--sp-6)}


/* ── フッター（LPと同じ紺） ── */
.site-footer{background:var(--navy-800);color:var(--white)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-5);padding-block:26px;flex-wrap:wrap}
.footer-name{font-size:var(--fs-h4);font-weight:700}
.footer-links{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.footer-links a{font-size:var(--fs-small);color:var(--white);text-decoration:none;opacity:.9}
.footer-links a:hover{opacity:1;text-decoration:underline}

/* ── 全幅の帯。LPは白と blue-25 を交互に敷いている ── */
.band{padding-block:var(--sp-20)}
/* 見出しの帯のすぐ下に来る帯は、上を詰める */
.band--title + .band{padding-top:var(--sp-10)}
.band--tint{background:var(--surface-tint)}
/* 見出しの帯。LPのヒーローと同じ、白から淡い青へ落とすグラデーション */
.band--title{padding-block:var(--sp-10);
  background:linear-gradient(180deg,#FFFFFF 0%,#F3F8FF 100%);
  border-bottom:1px solid var(--border-default)}

.sheet{max-width:1200px;margin:0 auto;padding-inline:var(--sp-6)}

/* ── 診断でわかること ── */
/* 説明カードと設問の間。margin 48px に加えて、共通の section の下padding 40px が
   乗って合計88px空いていた（2026/9/19 実測）。padding を打ち消して32pxにする */
.intro{max-width:820px;margin:0 auto var(--sp-8);padding-bottom:0;text-align:center}
.intro h2{font-size:var(--fs-h3);font-weight:700;color:var(--text-heading);margin:0}
.intro h2::after{content:"";display:block;width:40px;height:3px;
  margin:var(--sp-4) auto var(--sp-5);background:var(--blue-500);border-radius:var(--r-pill)}
.intro .lead{font-size:var(--fs-body);color:var(--text-muted);margin:0 0 var(--sp-8)}
/* ★狭い画面では手で入れた改行を消す（2026/9/21）。
   横に入る字数が足りず、1文が2行に折れたうえで <br> が入り、
   ちぎれたような見え方になっていた。狭いときは文節の切れ目に任せる */
@media (max-width:700px){.intro .lead br,.field .policy br{display:none}}
.intro .lead:first-child{margin-top:0}

/* LPのカードと同じ器（白・1px罫・角丸14px・影）。
   ★枚数を固定しない（2026/9/21）。結果画面の節に合わせて2枚になったため、
     3列で決め打ちせず、入る数だけ横に並べる */
.gains{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--sp-4);text-align:left}
.gains li{background:var(--white);border:1px solid var(--border-default);
  border-radius:var(--r-card);padding:var(--sp-6) var(--sp-5);box-shadow:var(--shadow-card)}
.gains .no{display:block;font-size:var(--fs-caption);font-weight:700;
  color:var(--blue-500);letter-spacing:var(--ls-wide);margin-bottom:var(--sp-2)}
/* 見出しは折り返さない。「経験を生かしやすい就業／先」のように
   最後の1文字だけ次行に落ちると読みにくいため。
   3列時のカード幅（約182px）に一番長い見出しが収まる字送りにしてある */
.gains h3{font-size:var(--fs-body);font-weight:700;color:var(--text-heading);
  margin:0 0 var(--sp-3);line-height:1.6;letter-spacing:0;white-space:nowrap}
.gains p{margin:0;font-size:var(--fs-small);color:var(--text-muted);line-height:1.8}
/* 縦の余白は帯が持つ。両方が持つと帯の中が間延びする */

/* 文章は1行35文字前後に収める。LPの本文と同じ密度 */
/* 読ませる文章を細い段に絞るのはフォーム側の補足文だけ。
   結果画面の本文はカードの中なので、器いっぱいに流す */
.hint{max-width:34em}
/* フォームはLPのパネルと同じ器に入れる（blue-25・1px罫・角丸18px）。
   ★幅は器いっぱいに取る。LPのパネルも 961px（器いっぱい）で、
     中を段組みにして使っている。パネルだけ細くすると左右が空くだけになる */
form{max-width:820px;margin-inline:auto;
  background:var(--surface-tint);border:1px solid var(--border-strong);
  border-radius:var(--r-panel);padding:var(--sp-10) var(--sp-10)}


/* 診断結果のイメージ。結果画面が固まるまでは枠だけ置いてある。
   見出しはイントロの h2 と同じ書式（青の下線つき） */

/* 設問の最後に置くプライバシーポリシーの記載 */
.policy{max-width:34em;margin:calc(var(--sp-4) * -1) auto var(--sp-6);
  font-size:var(--fs-small);color:var(--text-muted);line-height:1.8;text-align:center}
.policy a{color:var(--blue-500);text-decoration:underline}
.choices{display:grid;gap:var(--sp-3)}

/* ── 結果画面 ── */
/* 幅はLPのコンテンツエリアに合わせる。LPの .container は
   max-width:1200px / padding 0 24px で、中身が使えるのは1152px。
   .sheet が同じ指定なので、.result は幅を持たず .sheet に従わせる。
   広がった分は本文を伸ばすのではなく段組みに使い、長い文は --read で止める。
   セクションごとに白いカードに入れて、見出しがカードの外に浮かないようにする */
/* 日本語を文節の切れ目だけで折り返す。
   既定では「戦略設計／で、」のように文節の途中で改行される。keep-all で
   自動の改行を止め、render.js が <wbr> を置いた場所だけで折り返させる
   （BudouX 本体の applyWrapStyle と同じ指定）。
   overflow-wrap:anywhere は、1文節が1行より長いときの逃げ道。
   ★モーダル（.modal）には掛けない。手書きのHTMLで <wbr> を入れていないため */
.result{max-width:none;margin:0 auto}

/* ── セクションの組み方 ──
   左に見出し、右に読む列、段組みのブロックは横いっぱいに張り出す。
   器を1152pxに広げたので、prose をそのまま伸ばすと1行70字になる。
   かといって本文だけ640pxで止めると、見出しの罫は1086px・本文は640pxと
   右端が2本になって読みにくかった（2026/9/18の指摘）。
   左を見出しの列にすると、基準線が左右1本ずつになり、幅も構造で使われる */
.result section{background:var(--white);border:1px solid var(--border-default);
  border-radius:var(--r-card);box-shadow:var(--shadow-card);
  padding:var(--sp-8);margin:0 0 var(--sp-4);
  display:grid;grid-template-columns:320px minmax(0,var(--col-read));
  gap:var(--sp-5) var(--sp-12);align-items:start}
.sec-head{grid-column:1}
.sec-body{grid-column:2;min-width:0}
/* 段組みのブロックは、読む列に収めず横いっぱいに使う */
.sec-wide{grid-column:1 / -1;min-width:0}

/* 結果画面は冒頭に見出しを置くので、上の余白は見出し側が持つ */


/* 冒頭。LPのヒーローと同じ淡い青のグラデーションを敷く */
.masthead{padding:0;text-align:center;max-width:none}
.masthead .kicker{font-size:var(--fs-caption);letter-spacing:var(--ls-wide);
  color:var(--blue-500);font-weight:700;margin:0 0 6px}
.masthead h1{font-size:var(--fs-h2);line-height:var(--lh-heading);font-weight:700;
  color:var(--text-heading);margin:0;letter-spacing:var(--ls-normal);max-width:none}
/* LPの見出しと同じ、短い青の線 */
.masthead h1::after{content:"";display:block;width:48px;height:4px;
  margin:var(--sp-4) auto 0;background:var(--blue-500);border-radius:var(--r-pill)}

section{padding:0 0 var(--sp-10)}
.head{font-size:var(--fs-h4);font-weight:700;color:var(--text-heading);
  line-height:var(--lh-heading);margin:0 0 var(--sp-5);
  padding-left:12px;border-left:4px solid var(--blue-500)}

/* ── 結果セクションの部品はこの4つだけ ──
   verdict   … その節の答え。どの節でも同じ大きさで置く
   facts     … 内訳。ラベルと値の行
   body-text … 説明
   caveat    … 補足
   節ごとに大きさや囲みを変えない。変えると、どれが答えでどれが説明なのかを
   読むたびに判断し直すことになる */
/* 節のメインメッセージ。ここがその節でいちばん大きい（本文17pxの2.0倍）。
   伝わるデザイン／netsanyo の「コントラストは大胆につける」に寄せた */
.verdict{font-size:34px;font-weight:700;
  color:var(--text-heading);line-height:var(--lh-heading);text-wrap:balance;
  margin:0 0 var(--sp-5)}
.verdict:last-child{margin-bottom:0}

.facts{display:grid;gap:var(--sp-3);margin:0 0 var(--sp-5)}
.facts:last-child{margin-bottom:0}
/* 横並びの内訳。「経験を生かしやすいキャリア」で判定のすぐ下に置く。
   min() を外すと携帯幅で親より広くなる（375pxで実測） */
.facts--row{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
/* ラベルは値の上に置く。横に並べるとラベルの字数で値の左端がそろわない
   （「主な強み」4字と「第二の強み」5字で2pxずれた。段階によっては
   「中心にある領域」7字も出るので、幅を決め打ちにできない） */
.facts>div{padding:var(--sp-4) var(--sp-5);background:var(--surface-panel);
  border-radius:var(--r-md)}
.facts dt{margin:0 0 var(--sp-2);
  font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--blue-600)}
.facts dd{margin:0;font-size:var(--fs-h4);font-weight:700;color:var(--text-heading)}

.body-text{margin:0;font-size:var(--fs-body);color:var(--text-muted)}
/* どんな会社かを本文で出すので、年数の根拠はその下に小さく置く */
.body-text.sub{margin-top:var(--sp-4);font-size:var(--fs-small);color:var(--ink-400)}
.body-text + .body-text{margin-top:var(--sp-4)}
.facts .sub2{font-size:var(--fs-small)!important;font-weight:400!important;
  color:var(--text-muted)!important;line-height:1.9}

/* 補足。12pxで774px幅だと1行65字になっていた。13pxにして幅を絞る */
.caveat{margin:var(--sp-5) 0 0;max-width:34em;padding:var(--sp-4);
  background:var(--surface-panel);border-radius:var(--r-md);
  font-size:var(--fs-caption);color:var(--text-muted);line-height:var(--lh-body)}

/* ── 8領域。相手ごとの4ブロックに分け、担当範囲を棒で示す ──
   棒は左が企画、右が実行。左端から始まっている＝企画から入って実行まで担った。
   「企画から実行まで」は求人票の言い回しそのもの（1,622件の調査）。
   8つとも並べる。選ばれたものだけを出すと、何個の中から選ばれたのかが分からない */

/* 見出しの列。見出し → モーダルを開くボタン の順に置く。
   ★説明文（.axis-note）は置かない（2026/9/20 削除）。
     3つの見出しの下すべてに説明が入り、答えより先に仕組みを読ませていた。
     説明はボタンの先のモーダルに移した */
.sec-head .head{margin:0}
.sec-head .info{margin-top:var(--sp-4)}
.info{background:var(--white);border:1px solid var(--border-strong);
  border-radius:var(--r-pill);padding:7px 16px 7px 34px;cursor:pointer;position:relative;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--blue-600);
  transition:background var(--dur) var(--ease)}
.info::before{content:"i";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;border-radius:50%;background:var(--blue-500);color:var(--white);
  font-size:11px;font-weight:700;line-height:15px;text-align:center;font-style:italic}
.info:hover{background:var(--surface-panel)}

.areas-sec .verdict{margin:0 0 var(--sp-5)}

/* 求人の傾向に照らした一文（2026/9/21）。
   ★囲いをやめ、上の説明文と同じ書式にする（2026/9/23）。
     囲うと注記のように見えて、いちばん読ませたい一文が本文より弱くなっていた。
     太字だけで差をつける */
.market{margin:var(--sp-4) 0 0;font-size:var(--fs-body);font-weight:700;
  color:var(--text-body);line-height:var(--lh-body)}

/* 本命の下に置く「その他候補」の見出し（2026/9/23）。
   それまでは各ブロックに「次点」「3番目」と付けていた */
.alt-h{margin:var(--sp-6) 0 var(--sp-3);font-size:var(--fs-small);font-weight:700;
  color:var(--text-muted);letter-spacing:var(--ls-normal)}

/* ★その他候補の3段を、本命と同じ並びにする（2026/9/23）。
     本命    34px黒太字 →  20px青太字 → 17pxグレー
     その他候補 17px黒太字 →  14px青太字 → 13pxグレー
   大きさだけ落として、見出し・担当すること・理由の関係は同じにする */
.facts--alt dt{margin:0 0 var(--sp-2);font-size:var(--fs-body);font-weight:700;
  color:var(--text-heading);letter-spacing:var(--ls-normal);line-height:var(--lh-heading)}
.alt-work{margin:0 0 var(--sp-3)!important;font-size:var(--fs-small)!important;
  font-weight:700!important;color:var(--blue-600)!important;line-height:var(--lh-heading)}
.facts--alt .sub2{font-size:var(--fs-caption)!important;color:var(--text-muted)!important}
.facts dt .pill{vertical-align:middle}

/* ── キャリアの選択肢（2026/9/21） ──
   本命は「働き方の札 → どこで何になるか → そこで何を担当するか → なぜ」の4段。
   次点と3番目は .facts のブロックに1つずつ置き、札は小見出しの横に付ける。 */
.eyebrow{display:inline-block;margin:0 0 var(--sp-3);padding:4px 14px;
  border-radius:var(--r-pill);background:var(--surface-panel);
  font-size:12px;font-weight:700;color:var(--blue-600);letter-spacing:var(--ls-normal)}
.pill{display:inline-block;margin-left:var(--sp-3);padding:2px 10px;
  border-radius:var(--r-pill);background:var(--white);
  font-size:11px;font-weight:700;color:var(--blue-600);letter-spacing:var(--ls-normal)}
/* 見出し（34px）と本文（17px）の間。どのポジションで何を担当するか */
.role{margin:var(--sp-3) 0 var(--sp-5);font-size:20px;font-weight:700;
  color:var(--blue-600);line-height:var(--lh-heading);letter-spacing:var(--ls-normal)}
/* 領域の数は文に埋めず、数字として立てる */

/* 段落の間隔は 16px。行送りは30px（17px×1.75）なので、段落の境目は46px＝
   行送りの1.54倍になる。
   ★2026/9/18 まで34px（境目64px＝行送りの2.14倍）で、1行空いて見えていた。
     WCAG 1.4.12 を「著者が本文サイズの2倍に設定する基準」と読み違えたため。
     同基準は「利用者が2倍に上書きしたときに崩れないこと」を求めるもので、
     W3Cの注記に "Content is not required to use these text spacing values" と
     明記されている。著者側で2倍にする理由は無い。
     https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html */
.lead{margin:0 0 var(--sp-4);font-size:var(--fs-body);color:var(--text-muted);
  line-height:var(--lh-body)}
.lead:last-of-type{margin-bottom:var(--sp-8)}

.blk:last-child{margin-bottom:0}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-2)}
.card{background:var(--surface-panel);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5)}
/* 領域名は見出し。行高は本文より狭める（140〜150%） */
/* ★帯の見出し（17px）より小さくする。18pxだと詳細のほうが大きく、
   段が下がるほど小さくなる、という並びが崩れる（2026/9/18） */
.card .nm{margin:0 0 var(--sp-2);font-size:15px;font-weight:700;
  line-height:var(--lh-heading);color:var(--text-heading);
  display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap}
/* 段階は4つとも並べ、該当するものだけ色を付ける（2026/9/23）。
   1つだけ出していたときは、その段階が何段目なのかが分からなかった */
.card .state{margin:var(--sp-3) 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* ★タグの中では折り返さない。.result は keep-all + <wbr> なので、幅が足りないと
   「実／行」「ディレク／ション」と語の途中で2行になっていた（2026/9/23、375pxで確認）。
   flex-wrap は、下の縮小でも入りきらない320px級の画面のための逃げ道 */
.card .tag{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--border-default);
  font-size:11px;font-weight:700;color:var(--ink-400);white-space:nowrap}
.card .tag.on{background:var(--blue-500);border-color:var(--blue-500);color:var(--white)}
/* 携帯では3つを1行に収める（2026/9/23、実測）。
   375pxのとき、カードの余白を16pxにするとタグに使える幅は197px。
   11px・左右10pxのままだと3つで225px、10px・左右5px・字間0で193px */
@media (max-width:480px){
  .card{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .card .state{gap:4px}
  .card .tag{font-size:10px;padding:3px 5px;letter-spacing:0}
}
/* 360px（Android に多い幅）ではさらに15px狭くなるので、カードの余白も詰める */
@media (max-width:374px){
  .card{padding-left:12px;padding-right:12px}
  .card .tag{padding:3px 4px}
}
/* ラベルは太字をやめ、小さい字と色で分ける。
   14pxの太字が20か所あり、本文と同じ大きさで強調が効いていなかった（2026/9/18） */
.card .d{margin:var(--sp-3) 0 0;font-size:var(--fs-small);color:var(--text-muted);
  line-height:var(--lh-body)}
.lbl{display:block;margin-bottom:2px;font-size:12px;font-weight:700;
  letter-spacing:.04em;color:var(--blue-600)}
.d.nx .lbl{color:#8A6518}



/* ── 箇条書き ──
   伝わるデザイン（https://tsutawarudesign.com/yomiyasuku5.html）
   「揃えて、まとめて、コントラスト」。行頭記号は「・」より「●」＋色。
   2行目以降はぶら下げ（padding-left ＋ 記号を絶対配置で外に出す）。
   ★2026/9/18 追加。それまでページに箇条書きが1つも無く、全部が散文だった */
.pts{list-style:none;padding:0;margin:var(--sp-5) 0 0}
.pts li{position:relative;padding-left:1.4em;margin:0 0 var(--sp-3);
  font-size:var(--fs-body);color:var(--text-muted);line-height:var(--lh-body)}
.pts li:last-child{margin-bottom:0}
.pts li::before{content:"●";position:absolute;left:0;top:0;
  color:var(--blue-500);font-size:.7em;line-height:2.4}


/* ── 図の囲い ──
   帯（8領域の全体）と、その詳細であるカードを1つの囲いに入れる。
   ★2026/9/18 追加。それまで帯とカードは左端も幅も同じ独立したブロックで、
     「カードは帯の詳細」という親子の関係が読めなかった（指摘）。
     囲いの中のカードを白にして、入れ子だと分かるようにしている。 */
.fig{background:var(--surface-panel);border-radius:var(--r-card);
  padding:var(--sp-6);margin-top:var(--sp-6)}
.fig .fm-b{background:var(--white)}
.fig .card{background:var(--white)}
/* 帯とカードは近づける（近接＝親子）。節と節の間より狭くする */
.fig .fm-row{margin-bottom:var(--sp-5)}


/* ══ 1問ずつ進む入力画面 ══
   設問を1画面に1つだけ出す。全部で7問＋確認画面。
   ★Q2（副業）はQ1の答えによっては出さないので、分母は script が数え直す */
.step{display:none}
/* 設問ごとの高さは132〜440pxとばらつく（実測）。そろえないと「次へ」の位置が
   設問ごとに動き、押すたびに目で探すことになる。
   ★300pxは折り合いの値。440px（一番高いQ3に合わせる）にすると位置は完全に
     止まるが、Q7（メールアドレス1つ）の下に300px以上の空きができて壊れて見える。
     300pxなら「次へ」の動きは172px以内で、空きも目立たない */
.step.on{display:flex;flex-direction:column;min-height:300px}
/* 進み具合。設問の上に細いバーで出す（2026/9/19 に「3 / 7」の文字から変更）。
   数字より、残りがどれくらいかが一目で分かる */
.stepbar{height:4px;margin:0 0 var(--sp-6);border-radius:var(--r-pill);
  background:var(--white);overflow:hidden}
.stepbar>span{display:block;height:100%;border-radius:var(--r-pill);
  background:var(--blue-500);transition:width var(--dur) var(--ease)}
/* 同意文。メールアドレスの下に置く（2026/9/19 に確認画面をやめたため）。
   もとの .policy はフォームの外に1つだけ置く前提で中央寄せだったので、
   設問の中に入れるにあたって左寄せに戻す */
.field .policy{margin:var(--sp-4) 0 0;max-width:none;text-align:left;
  font-size:var(--fs-caption);color:var(--text-muted);line-height:var(--lh-body)}
.field .policy a{color:var(--blue-600)}

/* 進む・戻る。
   ★2つの大きさを近づける（2026/9/19）。「次へ」を横いっぱいの帯にして
     「戻る」を文字だけにしていたため、対比が強すぎた。
     どちらも同じ高さの枠にして、「次へ」は塗り・「戻る」は線で区別する。 */
.navs{display:flex;gap:var(--sp-4);align-items:center;margin-top:var(--sp-6)}
.nav-prev{background:var(--white);border:1px solid var(--border-strong);
  border-radius:var(--r-pill);padding:14px 28px;cursor:pointer;font-family:inherit;
  font-size:var(--fs-body);font-weight:700;color:var(--text-muted);
  letter-spacing:var(--ls-normal)}
.nav-prev:hover{border-color:var(--blue-500);color:var(--text-heading)}
.nav-next{margin-left:auto;min-width:200px;background:var(--blue-500);color:var(--white);
  border:1px solid var(--blue-500);border-radius:var(--r-pill);padding:14px 40px;
  cursor:pointer;font-family:inherit;font-size:var(--fs-body);font-weight:700;
  letter-spacing:var(--ls-normal)}
.nav-next:hover{background:var(--blue-600);border-color:var(--blue-600)}
@media (max-width:480px){
  /* 携帯では横に並べたままにする。縦に積むと「次へ」が画面の外に出る */
  .nav-prev{padding:14px 20px}
  .nav-next,button[type=submit]{min-width:0;flex:1;padding:14px 20px}
}

/* ── 8領域の帯 ──
   8つとも同じ幅のマスで並べ、埋まっているところだけ色が入る。
   ★2026/9/18 追加。以前は8領域すべてをカードで並べていたが、埋まったカードが
     平均248px・空のカードが52pxで4.8倍の差があり、しかも2段組みで左右に分かれる
     ため「全体のどこまで埋まっているか」が比べられなかった（指摘）。
     全体はこの帯で示し、カードは埋まっている領域だけにした。 */
/* 図の中の小見出し（2026/9/20）。帯とカードが続けて並ぶと、どこからどこまでが
   何の話なのかが切れない。「広報・PRの8領域」「ご経験のある領域」を上に置く。
   本文より小さく・太くして、見出しであることだけ分かればよい */
/* 節の見出し（.head は 18px）より一段小さくする（2026/9/23） */
/* 図の中に置く「8領域について」のボタン。説明文の下に一段下げて置く */
.fig-info{margin:0 0 var(--sp-6)}
.fig-h{margin:0 0 var(--sp-4);font-size:16px;font-weight:700;
  color:var(--text-heading);letter-spacing:var(--ls-normal);line-height:var(--lh-heading)}
.fig-h ~ .fig-h{margin-top:var(--sp-8)}
/* 4列×2行。相手ごとの領域の数は 2・2・3・1 なので、span で置くと
   記者+社内 ／ 生活者+投資家 のちょうど2行になり、8マスの幅がすべて揃う。
   1行に8つ並べるとマスが133pxになり、領域名が2行に折れていた（2026/9/18） */
/* ★相手を左の列に置き、相手ごとに1行にする（2026/9/21）。
   それまでは4列のグリッドの上に相手の名前を載せていたが、隣の組との間隔が
   同じで、どこからどこまでが1つの組か読めなかった（指摘）。
   マスは3列でそろえる。1行あたり最大3つ（生活者・顧客）なので、
   足りない行は空くが、そのぶん棒が縦にそろって比べられる */
.fm-row{display:grid;gap:0;margin:0 0 var(--sp-8)}
.fm-g{display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--sp-5);
  align-items:start;padding:var(--sp-5) 0;border-top:1px solid var(--border-default)}
.fm-g:first-child{border-top:0;padding-top:0}
.fm-a{display:block;font-size:var(--fs-caption);font-weight:700;color:var(--blue-600);
  letter-spacing:.04em;padding-top:2px}
.fm-cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.fm-c{min-width:0}
.fm-n{display:block;font-size:var(--fs-caption);color:var(--ink-400);
  line-height:var(--lh-heading);margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-c.on .fm-n{color:var(--text-heading);font-weight:700}
/* ★棒は「左＝企画／右＝実行」を、説明を読まなくても分かる形にする（2026/9/21）。
   真ん中に白い区切り線を引き、器を薄く塗って、担当した範囲だけを濃く塗る。
   8つとも同じ形なので、並べると比べられる */
.fm-b{display:block;position:relative;height:12px;border-radius:var(--r-sm);
  background:var(--blue-50);border:1px solid var(--border-default);overflow:hidden}
/* 区切り線は白。器（薄い青）でも塗り（濃い青）でも見えるようにするため */
.fm-b::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:var(--white);z-index:1}
.fm-c.on .fm-b{border-color:var(--blue-500)}
.fm-b i{position:absolute;top:0;bottom:0;background:var(--blue-600)}
/* 棒の下に「企画」「実行」。凡例を別に置くのをやめ、棒そのものに添える */
.fm-s{display:flex;justify-content:space-between;margin-top:3px}
.fm-s i{font-size:10px;font-style:normal;color:var(--ink-400);letter-spacing:.02em}
/* ★携帯では相手の名前を領域の上に置く（2026/9/23）。
   左の列（128px）を残したままだと、375pxで棒の列が81pxしかなく、
   「メディアリレーションズ」（145px要る）「オウンドメディア運営」（133px）が
   「オウンドメ…」と切れていた。上に積むと棒の列は229pxになる */
@media (max-width:480px){
  .fm-g{grid-template-columns:1fr;gap:var(--sp-2)}
}

/* 棒の読み方。図の中に置いて、モーダルを開かなくても分かるようにする */
.fig-note{margin:0 0 var(--sp-4);font-size:var(--fs-small);color:var(--text-muted);
  line-height:var(--lh-body)}

/* 埋まっている領域のカード。数が少ないので横に並べる */
.cards.filled{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:var(--sp-4)}

.rail{position:relative;height:12px;border-radius:var(--r-sm);
  background:var(--blue-50);border:1px solid var(--border-default);overflow:hidden}
.rail .mid{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--white);z-index:1}
.rail .fill{position:absolute;top:0;bottom:0;background:var(--blue-600)}

/* ── 説明のモーダル（強みについて／キャリアについて／働き方について） ──
   3つとも同じ部品で組む。.mtitle で題、.mh で小見出し、.mp で本文、
   .mdots で箇条書き、.mtable で条件の表、.mnote で末尾の注記 */
.modal{width:min(680px,calc(100vw - 32px));max-width:none;border:0;
  border-radius:var(--r-panel);padding:0;box-shadow:0 24px 64px rgba(6,35,95,.28)}
.modal::backdrop{background:rgba(4,23,63,.55)}
/* モーダルを開いている間は、後ろのページを動かさない。
   余白は render.js の bindModals が、消えるスクロールバーのぶんだけ入れる */
html.modal-open{overflow:hidden}
/* 本文がこのボタンの下をスクロールしていくので、白地と影で浮かせる。
   ★<form method="dialog"> は使わない。下のフォーム画面用の form 規則を拾って
     背景・枠・padding 40px が付いてしまう */
.modal .close{position:absolute;right:var(--sp-5);top:var(--sp-5);z-index:1;
  width:34px;height:34px;border:1px solid var(--border-default);border-radius:50%;
  background:var(--white);cursor:pointer;font-size:15px;color:var(--ink-500);
  font-family:inherit;box-shadow:0 2px 8px rgba(6,35,95,.12)}
.modal .close:hover{background:var(--surface-panel)}
.mbody{padding:var(--sp-8);max-height:80vh;overflow:auto}
.mbody:focus{outline:none}
.mlead{margin:0 0 var(--sp-6);padding-right:52px;
  font-size:var(--fs-small);color:var(--text-muted);line-height:1.9}
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin:0 0 var(--sp-8)}
.mcards>div{background:var(--surface-tint);border-radius:var(--r-md);padding:var(--sp-5)}
.ml{display:inline-block;font-size:var(--fs-caption);font-weight:700;color:var(--blue-600);
  background:var(--white);border-radius:var(--r-pill);padding:3px 12px;margin-bottom:var(--sp-3)}
.mcards p{margin:0;font-size:var(--fs-caption);color:var(--text-muted);line-height:1.8}
/* モーダルの題。どのボタンから開いたのかが分かるように先頭に置く（2026/9/20）。
   「強みについて」「キャリアについて」「働き方について」の3つがあるため */
.mtitle{margin:0 0 var(--sp-4);padding-right:52px;font-size:var(--fs-h4);font-weight:700;
  color:var(--text-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-normal)}
.mh{margin:0 0 var(--sp-4);font-size:var(--fs-body);font-weight:700;color:var(--text-heading)}
.mp{margin:0 0 var(--sp-8);font-size:var(--fs-caption);color:var(--text-muted);line-height:1.8}
/* 直前の箇条書き・表への補足。続きであることを見せるため間を詰める。
   ★詰めるのは負の margin ではなく、直前の要素の下余白で行う（2026/9/20）。
     .mlist と .mdots で下余白が違うので、負の margin だと片方だけ
     くっついて箇条書きの続きに見えていた */
.mlist:has(+ .mp--tight),
.mdots:has(+ .mp--tight),
.mtable:has(+ .mp--tight){margin-bottom:var(--sp-4)}
.mp--tight{margin-top:0}
.mdots{list-style:none;padding:0;margin:0 0 var(--sp-5);display:grid;gap:var(--sp-2)}
.mdots li{padding-left:16px;position:relative;
  font-size:var(--fs-caption);color:var(--text-muted);line-height:1.8}
.mdots li::before{content:"";position:absolute;left:2px;top:.7em;
  width:5px;height:5px;border-radius:50%;background:var(--blue-500)}
.mlist{list-style:none;padding:0;margin:0 0 var(--sp-8);display:grid;gap:var(--sp-3)}
.mlist li{display:flex;gap:var(--sp-4);align-items:flex-start;
  font-size:var(--fs-caption);color:var(--text-muted);line-height:1.8}
.mbar{flex:0 0 72px;position:relative;height:10px;margin-top:5px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--border-default);overflow:hidden}
.mbar i{position:absolute;top:0;bottom:0;background:var(--blue-600);border-radius:var(--r-pill)}
.mtable{width:100%;border-collapse:collapse;margin:0 0 var(--sp-6);font-size:var(--fs-caption)}
.mtable thead th{text-align:left;padding:0 var(--sp-3) var(--sp-2);
  color:var(--ink-400);font-weight:400;border-bottom:1px solid var(--border-default)}
.mtable tbody th{text-align:left;padding:var(--sp-3);vertical-align:top;
  color:var(--blue-600);font-weight:700;white-space:nowrap;
  border-top:1px solid var(--border-default)}
.mtable tbody td{padding:var(--sp-3);vertical-align:top;border-top:1px solid var(--border-default)}
.mnm{display:block;font-weight:700;color:var(--text-heading)}
.mwhat{display:block;margin-top:2px;color:var(--text-muted)}
.mnote{margin:0;padding-top:var(--sp-5);border-top:1px solid var(--border-default);
  font-size:11.5px;color:var(--ink-400);line-height:1.8}

/* ── いただいた回答へのお答え ──
   補助設問（Q1〜Q5）は判定には使っていない。回答した実感が残るように、
   お悩みごとに「この診断で答えたこと」と「答えていないこと」を分けて出す */
/* お悩みは複数選べる。広い画面では横に並べる */
.answers{list-style:none;padding:0;margin:0 0 var(--sp-5);display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}
.ans{background:var(--surface-panel);border-radius:var(--r-md);padding:var(--sp-5);
  border-left:4px solid var(--blue-500)}
.ans .q{margin:0 0 var(--sp-2);font-size:var(--fs-body);font-weight:700;
  color:var(--text-heading)}
.ans .a{margin:0;font-size:var(--fs-small);color:var(--text-muted);line-height:var(--lh-body)}
/* この診断では答えていないもの。面談へ回すので金の罫で分ける */
/* 「どうやって判定したか」。答えではなく方法なので、地を一段落とす */
/* 読み取った事実は値が短いので横に並べる */
/* 前置き。強み・キャリア・働き方は白いカードに入るが、ここは囲わない。
   囲うと3つの判定と同じ層に見えて、どれが説明でどれが結果かが読めない
   （2026/9/18 指摘）。入力画面の .intro と同じ作りにしてある */
.lede{max-width:820px;margin:0 auto var(--sp-10);text-align:center}
.lede .lead{margin:0}
.axes-list{list-style:none;counter-reset:n;padding:0;margin:var(--sp-4) 0 0;
  display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.axes-list li{counter-increment:n;background:var(--white);border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5)}
.axes-list h3{margin:0 0 var(--sp-2);font-size:var(--fs-body);font-weight:700;
  color:var(--text-heading);display:flex;align-items:center;gap:var(--sp-3)}
.axes-list h3::before{content:counter(n,decimal-leading-zero);
  font-size:var(--fs-caption);color:var(--blue-600);font-weight:700}
.axes-list p{margin:0;font-size:var(--fs-small);color:var(--text-muted);line-height:1.8}

/* CTA。面談の申し込みがこの画面の目的なので、ページで一番強い要素にする。
   地をLPのフッターと同じ navy-800 で伏せ、ボタンはフォームの「診断する」と
   同じ blue-500 のベタ（矢印つき）にそろえてある */
.invite{background:var(--navy-800);border-radius:var(--r-panel);
  padding:var(--sp-12) var(--sp-8);text-align:center;margin-top:var(--sp-10);margin-bottom:var(--sp-10)}
.invite h2{font-size:var(--fs-h3);font-weight:700;color:var(--white);
  line-height:var(--lh-heading);margin:0 0 var(--sp-4);text-wrap:balance}
/* ★34em だと「ご経験がいまの市場でどう見られているかと、求人の状況を
     お伝えします。」（34字）が折り返して4行になっていた（2026/9/23）。
     1文＝1行で収まる幅にする */
.invite p{margin:0 auto var(--sp-8);max-width:38em;
  font-size:var(--fs-body);color:#BFD3F2;line-height:1.9}
/* 「求人のご紹介はしません」など、押さえておきたい一文は白で立てる */
.invite a{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  max-width:420px;margin:0 auto;background:var(--blue-500);color:var(--white);
  text-decoration:none;font-size:var(--fs-body-lg);font-weight:700;padding:18px;
  border-radius:8px;box-shadow:var(--shadow-btn);
  transition:background var(--dur) var(--ease)}
.invite a::after{content:"→";font-weight:400}
.invite a:hover{background:var(--blue-600)}

/* フォーム */
.field{margin-bottom:var(--sp-8)}
/* ラベルと必須のしるしは、LPの診断モーダルの書式に合わせてある
   （ラベル 15px/400/ink-700、必須は blue-500 の太字13px・左に6px） */
/* 設問。1画面に1つだけ出すので、その画面のメインメッセージにあたる。
   太字・濃紺にして、選択肢や補足より強くする（2026/9/19）。
   ★:not(.drop) が要る。ファイル選択欄も .field の直下の label なので、
     除かないと padding:0 が効いて、枠が高さ42pxの細い帯に潰れる
     （2026/9/19 に発見。この規則ができたときから潰れていた） */
.field>label:not(.drop),.field>legend{display:block;font-size:var(--fs-body);
  font-weight:700;color:var(--text-heading);margin-bottom:var(--sp-3);padding:0;width:100%}
fieldset.field{border:0;margin:0 0 var(--sp-8);padding:0}

/* 設問番号。ラベルの頭に置く */
.qno{font-weight:700;color:var(--blue-500);margin-right:6px}

.req{font-size:var(--fs-small);font-weight:700;color:var(--blue-500);margin-left:6px}
/* 必須の右に添える補足（※複数回答可 など） */
/* 「※複数回答可」は補足なので、設問が太字になっても細いまま残す */
.note-inline{font-size:var(--fs-caption);font-weight:400;color:var(--ink-400);margin-left:8px}
.field .hint{font-size:var(--fs-caption);color:var(--text-muted);margin:0 0 var(--sp-3);line-height:1.8}
.drop{display:block;border:1.5px dashed var(--border-strong);background:#F4F5F7;
  padding:var(--sp-10) var(--sp-5);text-align:center;cursor:pointer;border-radius:var(--r-card);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.drop:hover,.drop.over{border-color:var(--blue-500);background:#EDEFF2}
.drop.has{border-style:solid;border-color:var(--blue-500);background:var(--white)}
.drop .big{font-size:var(--fs-body-lg);font-weight:700;color:var(--text-heading);
  display:block;margin-bottom:var(--sp-2)}
.drop .small{font-size:var(--fs-caption);color:var(--ink-400)}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
input[type=email],select{width:100%;padding:14px 15px;border:1px solid var(--border-default);
  background:var(--white);color:var(--text-body);font-family:var(--font-sans);
  font-size:var(--fs-body);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
input[type=email]:focus,select:focus{outline:none;border-color:var(--blue-500);box-shadow:var(--ring-focus)}
.choices{display:grid;gap:var(--sp-2)}
.choices label{display:flex;align-items:center;gap:var(--sp-3);padding:14px var(--sp-4);
  border:1px solid var(--border-default);background:var(--white);cursor:pointer;
  font-size:var(--fs-body);border-radius:var(--r-md);box-shadow:var(--shadow-card);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.choices label:hover{border-color:var(--blue-300)}
/* 選べない選択肢。理由を添えて、押せないことが分かるようにする */
.choices label:has(input:disabled){opacity:.45;cursor:not-allowed;background:#F7F8FA}
.choices label:has(input:disabled):hover{border-color:var(--border-default)}
.disabled-note{font-size:var(--fs-caption);color:var(--ink-400);margin:var(--sp-3) 0 0}
.choices label:has(input:checked){border-color:var(--blue-500);background:var(--surface-panel)}
.choices input{accent-color:var(--blue-500);width:17px;height:17px;margin:0;flex:0 0 auto}
/* 送信ボタン。LPの診断モーダルと同じ blue-500
   （紺 navy-800 はLPではヘッダーのCTAに使われている別の役）。
   ★2026/9/19：確認画面をやめ、最後の設問で「戻る」と並べて出す形にしたので、
     大きさを .nav-next にそろえる。width:100% のままだと同じ行に並ばない */
button[type=submit]{margin-left:auto;min-width:200px;background:var(--blue-500);
  color:var(--white);border:1px solid var(--blue-500);
  font-family:var(--font-sans);font-size:var(--fs-body);font-weight:700;padding:14px 40px;
  border-radius:var(--r-pill);cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:var(--sp-3);letter-spacing:var(--ls-normal);
  transition:background var(--dur) var(--ease)}
button[type=submit]::after{content:"→";font-weight:400}
button[type=submit]:disabled::after{content:""}
button[type=submit]:hover:not(:disabled){background:var(--blue-600);border-color:var(--blue-600)}
button[type=submit]:disabled{opacity:.5;cursor:default}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}

.msg{padding:var(--sp-4);font-size:var(--fs-small);margin-bottom:var(--sp-5);
  border-radius:var(--r-md);line-height:1.8}
.msg.error{color:var(--danger);border:1px solid var(--danger);background:#FEF3F2}
.msg.low{color:#7A5A12;border:1px solid var(--gold-500);background:#FDF8EC}
.center{text-align:center;padding:var(--sp-20) 0;color:var(--ink-400);font-size:var(--fs-body)}
.center a{color:var(--blue-500)}

/* 「診断する」を押したあとの待ち画面（2026/9/20）。
   /api/diagnose は1回の往復で返るので、途中の進み具合が取れない。
   割合の出る帯にすると数字が嘘になるため、動いていることだけを示す帯にする。
   器はフォームと同じ（blue-25・1px罫・角丸18px・820px）。
   同じ場所で差し替わるので、画面が切り替わった感じを出さない */
.waiting{max-width:820px;margin-inline:auto;
  background:var(--surface-tint);border:1px solid var(--border-strong);
  border-radius:var(--r-panel);padding:var(--sp-16) var(--sp-10);text-align:center}
/* 回る輪。細い円環の一部だけ濃くして回す */
.spin{width:44px;height:44px;margin:0 auto var(--sp-6);border-radius:50%;
  border:4px solid var(--blue-100);border-top-color:var(--blue-500);
  animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 進み具合。済んだものは印、いま動いているものは青、これからは薄く */
.steps{list-style:none;padding:0;margin:var(--sp-6) auto 0;max-width:380px;
  display:grid;gap:var(--sp-3);text-align:left}
.steps li{position:relative;padding-left:32px;font-size:var(--fs-small);
  color:var(--ink-400);line-height:var(--lh-heading);
  transition:color var(--dur) var(--ease)}
.steps li::before{content:counter(step);counter-increment:step;
  position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;
  background:var(--white);color:var(--ink-400);
  font-size:11px;font-weight:700;line-height:20px;text-align:center}
.steps{counter-reset:step}
.steps li.now{color:var(--text-heading);font-weight:700}
.steps li.now::before{background:var(--blue-500);color:var(--white)}
.steps li.done{color:var(--text-muted)}
.steps li.done::before{content:"✓";background:var(--blue-100);color:var(--blue-600)}
.waiting h2{margin:0 0 var(--sp-4);font-size:var(--fs-h3);color:var(--text-heading);
  line-height:var(--lh-heading);letter-spacing:var(--ls-normal)}
.wait-lead{margin:0 0 var(--sp-5);font-size:var(--fs-body);color:var(--text-body);
  line-height:var(--lh-body)}
.wait-note{margin:var(--sp-6) 0 0;font-size:var(--fs-caption);color:var(--text-muted);
  line-height:var(--lh-body)}
/* 動きを減らす設定のときは上の * ルールでアニメーションが止まる。
   輪の一部だけ濃いまま固まって壊れて見えるので、全周を同じ色にする */
@media (prefers-reduced-motion:reduce){.spin{border-color:var(--blue-500)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:768px){
  form{padding:var(--sp-8) var(--sp-6)}
  .waiting{padding:var(--sp-12) var(--sp-6)}
  .gains{grid-template-columns:1fr}
  /* カードの内側の余白を詰める。32pxのままだと本文に使える幅が
     260px程度しか残らず、領域名が途中で折り返す */
  .result section{padding:var(--sp-6)}
}
@media (max-width:900px){
  /* 相手ごとに1行ではなく、領域ごとに1行にする。
     横並びのままだとマスが72〜197pxとばらつき、「メディアリレーションズ」
     「オウンドメディア運営」が切れていた（2026/9/18 実測） */
  .fm-row{grid-template-columns:1fr;gap:var(--sp-5)}
  .fm-g{grid-column:1 !important}
  .fm-cs{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
  /* 見出しの列を作る余裕がないので、上下に積む */
  .result section{grid-template-columns:1fr;gap:var(--sp-5)}
  .sec-head,.sec-body,.sec-wide{grid-column:1}
  .sec-head .info{margin-top:var(--sp-3)}
}
@media (max-width:820px){
  .mcards{grid-template-columns:1fr}
  .info{margin-left:0}
}
@media (max-width:480px){
  .masthead h1{font-size:var(--fs-h3)}
  .verdict{font-size:25px}   /* 本文17pxの1.47倍。20pxだと1.18倍で主役に見えない */
}