:root { --fg:#1a1a1a; --muted:#666; --line:#d8d8d8; --accent:#1f4e79; --error:#b3261e; --bg:#fff; }
* { box-sizing: border-box; }
body { margin:0 auto; padding:1.5rem 1rem 4rem; max-width:52rem; color:var(--fg); background:var(--bg);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif; line-height:1.7; }
header { border-bottom:2px solid var(--accent); padding-bottom:.75rem; margin-bottom:1.5rem; }
h1 { font-size:1.35rem; margin:0; color:var(--accent); }
.subtitle { margin:.25rem 0 0; color:var(--muted); font-size:.95rem; }
.question { border:1px solid var(--line); border-radius:6px; padding:1rem 1.25rem; margin-bottom:1rem; }
.question[hidden] { display:none; }
.question.has-error { border-color:var(--error); background:#fdf6f5; }
/* 設問の見出しレベルは直前の見出しに応じて h3〜h5 に変わる（form.html）。
   どのレベルでも見た目は同じにする */
.question h3, .question h4, .question h5 { font-size:1rem; margin:0 0 .75rem; font-weight:600; }
/* 設問文（Word）の見出し。事業（h2）の下に【大見出し】（h3）→（中見出し）（h4）と続く。
   47問を1本の列として見せないための区切りで、原典どおりの単位で入れている */
.theme-major { font-size:1rem; margin:1.5rem 0 .5rem; color:var(--fg); font-weight:600; }
.theme-minor { font-size:.95rem; margin:1rem 0 .5rem; color:var(--muted); font-weight:600; }
/* 事業の区切り。47問を1本の列として見せず、2つのまとまりに割る */
.section-head { font-size:1.05rem; color:var(--accent); margin:2rem 0 .75rem;
  padding-bottom:.35rem; border-bottom:2px solid var(--accent); }
.section-head:first-of-type { margin-top:0; }
.qno { display:inline-block; background:var(--accent); color:#fff; font-size:.75rem;
  padding:.15rem .5rem; border-radius:3px; margin-right:.5rem; vertical-align:middle; }
/* 「3つ選択してください」。ちょうど3つ選ぶ設問にだけ出る（form.html の select_count）。
   設問文（Word）の「３つお選びください。」は長い本文の末尾にあって埋もれるため、
   独立した行として色と太さで立てる。見落とすと validation が400で差し戻し、
   回答者は長い設問を読み直すことになる。色は既存の --accent、背景は qnote と同じ */
.hint { margin:.25rem 0 .6rem; padding:.35rem .6rem; font-size:.9rem; font-weight:600;
  color:var(--accent); border-left:3px solid var(--accent); background:#f7f7f5;
  border-radius:3px; display:inline-block; }
.onum { color:var(--muted); margin-right:.35rem; }
/* 設問文（Word）の表を載せる。行の折り返しを保つため white-space を指定する */
.qnote { margin:0 0 .75rem; padding:.6rem .8rem; font-size:.85rem; line-height:1.7;
  color:var(--fg); background:#f7f7f5; border-left:3px solid var(--line);
  border-radius:3px; white-space:pre-line; }
.options { list-style:none; margin:0; padding:0; }
.options li { margin:.35rem 0; }
.options label { display:flex; gap:.5rem; align-items:flex-start; cursor:pointer; padding:.3rem; border-radius:4px; }
.options label:hover { background:#f3f6fa; }
input[type=radio], input[type=checkbox] { margin-top:.35rem; flex-shrink:0; width:1.05rem; height:1.05rem; }
textarea { width:100%; padding:.5rem; border:1px solid var(--line); border-radius:4px;
  font-family:inherit; font-size:1rem; }
.free-text { margin-top:.6rem; }
.free-text label { font-size:.9rem; color:var(--muted); display:block; }
.error { color:var(--error); font-size:.9rem; margin:.5rem 0 0; font-weight:600; }
.errors { border:1px solid var(--error); background:#fdf6f5; border-radius:6px; padding:1rem; margin-bottom:1.5rem; }
.errors ul { margin:.5rem 0 0; padding-left:1.25rem; }
.notice[hidden] { display:none; }
.notice { border:1px solid var(--accent); background:#f3f6fa; border-radius:6px; padding:1rem; margin-bottom:1.5rem; }
.notice p { margin:0 0 .75rem; }
.notice button { padding:.5rem 1.25rem; font-size:.95rem; margin-right:.5rem; }
.notice button.secondary { background:#fff; color:var(--accent); border:1px solid var(--accent); }
.actions { position:sticky; bottom:0; background:var(--bg); padding:1rem 0; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.actions button { flex-shrink:0; }
/* 進捗。分母は分岐で到達する設問数なので、選ぶほど減ることがある */
.progress { margin:0; flex:1 1 10rem; min-width:0; display:flex; align-items:center; gap:.6rem;
  font-size:.9rem; color:var(--muted); }
.progress-bar { flex:1 1 auto; min-width:3rem; height:.5rem; background:#e8e8e8; border-radius:99px; }
#progress-fill { display:block; height:100%; width:0; background:var(--accent); border-radius:99px;
  transition:width .2s ease; }
#progress-text { flex-shrink:0; white-space:nowrap; }
button { background:var(--accent); color:#fff; border:0; border-radius:5px;
  padding:.7rem 2rem; font-size:1rem; cursor:pointer; font-family:inherit; }
button:hover { background:#163c5c; }
/* スマートフォン。回答は休日に私物端末で行われる想定のため、狭い画面が主経路になる。
   設問番号を行内に置いたままだと設問文が回り込み、「…お選びくださ／い。」のように
   途中で折り返して読みにくい */
@media (max-width: 480px) {
  .qno { display:block; width:fit-content; margin:0 0 .4rem; }
  .question { padding:1rem; }
  /* 送信ボタンと並べると両方が潰れるため、進捗を1行上に置く。
     ただし帯は常時画面を占めるので、そのぶん余白を詰める */
  .progress { flex:1 0 100%; font-size:.85rem; }
  .actions { gap:.45rem; padding:.6rem 0; }
}

table.status { border-collapse:collapse; margin-bottom:1.5rem; }
table.status th, table.status td { border:1px solid var(--line); padding:.5rem 1.5rem; text-align:left; }
table.status th { background:#f3f6fa; }