/* 国民保護力 学習・検定サイト  共通スタイル
   配色：官公庁文書の紺を主、警報の朱、備えの緑青、注意の琥珀。
   見出しは明朝（Noto Serif JP）、本文はゴシック（Noto Sans JP）。 */

/* ---- light（既定） ---- */
:root{
  --navy:#1D3557; --steel:#3C6E8F; --teal:#1F7A6C; --red:#C1272D; --amber:#A96A00;
  --ink:#161C24; --ink-2:#333E4B; --gray:#5A6472; --line:#D7DFE8; --line-soft:#E6EDF4;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F6F9FC; --foot:#F5F8FB;
  --tint:#EDF2F8; --tint-teal:#E3F1EE; --tint-red:#FBEAEA; --tint-amber:#FAF2E2;
  --on-tint:#1F3550; --on-teal:#123C35; --on-red:#4A1214; --on-amber:#4B3200;
  --notice-bg:#FAF2E2; --notice-ink:#5C3D00; --notice-line:#EBDDC0;
  --btn-ink:#FFFFFF; --btn-hover:#16293F; --focus:#7FB0DA;
  --key-bg:#EDF2F8; --key-ink:#1D3557;
  --shadow:0 1px 2px rgba(22,32,48,.06), 0 8px 24px rgba(22,32,48,.08);
  --r:10px; --maxw:940px;
  --f-head:"Noto Serif JP",'Hiragino Mincho ProN','Yu Mincho',serif;
  --f-body:"Noto Sans JP",'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,system-ui,sans-serif;
}
/* ---- dark（OSの設定が dark で、明示的に light を選んでいないとき） ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#9DC0E0; --steel:#8FB6D2; --teal:#67C6B2; --red:#F1888B; --amber:#E5B45E;
    --ink:#E8EDF3; --ink-2:#C3CDD8; --gray:#94A2B2; --line:#2C3947; --line-soft:#232E3A;
    --bg:#101720; --surface:#161F2A; --surface-2:#1A2532; --foot:#0C131A;
    --tint:#1B2836; --tint-teal:#16302B; --tint-red:#33191B; --tint-amber:#2E2413;
    --on-tint:#D6E2EE; --on-teal:#CDEAE3; --on-red:#F3D6D7; --on-amber:#EFE0C2;
    --notice-bg:#2E2413; --notice-ink:#EBD9AF; --notice-line:#40331B;
    --btn-ink:#0F1720; --btn-hover:#BBD6EE; --focus:#7FB0DA;
    --key-bg:#243243; --key-ink:#D6E2EE;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
  }
}
/* ---- 明示的に dark を選んだとき ---- */
:root[data-theme="dark"]{
  --navy:#9DC0E0; --steel:#8FB6D2; --teal:#67C6B2; --red:#F1888B; --amber:#E5B45E;
  --ink:#E8EDF3; --ink-2:#C3CDD8; --gray:#94A2B2; --line:#2C3947; --line-soft:#232E3A;
  --bg:#101720; --surface:#161F2A; --surface-2:#1A2532; --foot:#0C131A;
  --tint:#1B2836; --tint-teal:#16302B; --tint-red:#33191B; --tint-amber:#2E2413;
  --on-tint:#D6E2EE; --on-teal:#CDEAE3; --on-red:#F3D6D7; --on-amber:#EFE0C2;
  --notice-bg:#2E2413; --notice-ink:#EBD9AF; --notice-line:#40331B;
  --btn-ink:#0F1720; --btn-hover:#BBD6EE; --focus:#7FB0DA;
  --key-bg:#243243; --key-ink:#D6E2EE;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.85; letter-spacing:.012em;
  font-feature-settings:"palt" 1;
}
img{max-width:100%}
a{color:var(--steel)}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:4px}

/* ---------- banner / header ---------- */
.notice{
  background:var(--notice-bg); color:var(--notice-ink); font-size:13px; line-height:1.65;
  padding:9px 16px; text-align:center; border-bottom:1px solid var(--notice-line);
}
header.site{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:20}
.head-in{max-width:var(--maxw); margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy); font-family:var(--f-head); font-weight:700; font-size:20px; letter-spacing:.04em}
.brand .mk{width:29px;height:29px;flex:0 0 29px}
nav.main{margin-left:auto; display:flex; gap:3px; flex-wrap:wrap}
nav.main a{
  text-decoration:none; color:var(--gray); font-size:14px; font-weight:700;
  padding:7px 11px; border-radius:7px;
}
nav.main a:hover{background:var(--tint); color:var(--navy)}
nav.main a[aria-current="page"]{background:var(--navy); color:var(--btn-ink)}

/* ---------- layout ---------- */
main{max-width:var(--maxw); margin:0 auto; padding:36px 20px 80px; display:flex; flex-direction:column; gap:0}
.crumb{font-size:13px; color:var(--gray); margin:0 0 16px}
.crumb a{color:var(--gray)}
h1{font-family:var(--f-head); font-weight:700; font-size:33px; line-height:1.4; margin:0 0 12px; color:var(--navy); letter-spacing:.02em; text-wrap:balance}
h2{font-family:var(--f-head); font-weight:700; font-size:23px; line-height:1.5; margin:46px 0 16px; color:var(--navy); padding-bottom:9px; border-bottom:2px solid var(--line-soft); letter-spacing:.02em; text-wrap:balance}
h3{font-size:18px; font-weight:700; margin:28px 0 8px; color:var(--navy)}
.lead{font-size:18px; color:var(--ink-2); margin:0 0 26px; max-width:40em}
p{margin:0 0 14px; max-width:42em}
ul,ol{margin:0 0 16px; padding-left:1.35em; max-width:42em}
li{margin:0 0 7px}
small,.small{font-size:13.5px; color:var(--gray)}
hr{border:0;border-top:1px solid var(--line);margin:38px 0}
b{font-weight:700}
.c-navy{color:var(--navy)}.c-steel{color:var(--steel)}.c-teal{color:var(--teal)}.c-amber{color:var(--amber)}.c-red{color:var(--red)}

/* ---------- cards ---------- */
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); margin:0 0 8px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.card h3{margin:0 0 6px}
a.card{text-decoration:none; color:inherit; display:block; transition:border-color .15s, box-shadow .15s, transform .15s}
a.card:hover{border-color:var(--steel); box-shadow:var(--shadow); transform:translateY(-1px)}
.card .ico{width:34px;height:34px;display:block;margin-bottom:12px}
.card p{margin:0; font-size:15px; color:var(--ink-2); line-height:1.75; max-width:none}
.card .go{display:inline-block;margin-top:12px;font-size:14px;font-weight:700;color:var(--steel)}

.note{border-radius:var(--r); padding:16px 18px; margin:0 0 20px; font-size:15.5px; line-height:1.8; max-width:44em}
.note b{display:block; margin-bottom:4px}
.note.i{background:var(--tint); color:var(--on-tint)} .note.i b{color:var(--navy)}
.note.w{background:var(--tint-red); color:var(--on-red)} .note.w b{color:var(--red)}
.note.g{background:var(--tint-teal); color:var(--on-teal)} .note.g b{color:var(--teal)}
.note.a{background:var(--tint-amber); color:var(--on-amber)} .note.a b{color:var(--amber)}

table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15.5px; font-variant-numeric:tabular-nums}
th,td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
th{background:var(--navy); color:var(--btn-ink); font-weight:700}
tbody tr:nth-child(even){background:var(--surface-2)}
.tw{overflow-x:auto; margin-bottom:20px}
.tw table{margin-bottom:0}

.chk{list-style:none; padding:0; max-width:44em}
.chk li{position:relative; padding-left:30px; margin-bottom:9px}
.chk li::before{
  content:""; position:absolute; left:0; top:.44em; width:16px; height:16px;
  border:2px solid var(--teal); border-radius:4px;
}
.steps{list-style:none; counter-reset:s; padding:0; max-width:44em}
.steps li{counter-increment:s; position:relative; padding-left:46px; margin-bottom:17px}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:.02em; width:30px; height:30px; border-radius:50%;
  background:var(--navy); color:var(--btn-ink); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.steps li b{display:block; color:var(--navy)}

.tags{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px}
.tag{font-size:12.5px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--tint); color:var(--on-tint)}
.tag.r{background:var(--tint-red); color:var(--red)}
.tag.g{background:var(--tint-teal); color:var(--teal)}
.tag.a{background:var(--tint-amber); color:var(--amber)}

.btn{
  display:inline-block; background:var(--navy); color:var(--btn-ink); text-decoration:none; font-weight:700;
  padding:12px 22px; border-radius:8px; border:2px solid var(--navy); cursor:pointer; font-size:16px;
  font-family:inherit; line-height:1.5; transition:background .15s, border-color .15s;
}
.btn:hover{background:var(--btn-hover); border-color:var(--btn-hover); color:var(--btn-ink)}
.btn.sec{background:transparent; color:var(--navy)}
.btn.sec:hover{background:var(--tint); border-color:var(--navy); color:var(--navy)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btnrow{display:flex; gap:10px; flex-wrap:wrap; margin:24px 0}

/* ---------- exam ---------- */
.setup{background:var(--tint); border-radius:var(--r); padding:22px; margin:0 0 26px}
.setup fieldset{border:0; padding:0; margin:0 0 16px}
.setup legend{font-weight:700; color:var(--navy); font-size:15px; margin-bottom:8px; padding:0}
.opts{display:flex; gap:8px; flex-wrap:wrap}
.opts label{
  background:var(--surface); border:2px solid var(--line); border-radius:8px; padding:7px 14px;
  font-size:14.5px; font-weight:700; color:var(--gray); cursor:pointer;
}
.opts input{position:absolute; opacity:0; width:0; height:0}
.opts label:has(input:checked){border-color:var(--navy); background:var(--navy); color:var(--btn-ink)}
.opts label:focus-within{outline:3px solid var(--focus); outline-offset:2px}

.bar{height:7px; background:var(--tint); border-radius:99px; overflow:hidden; margin:0 0 8px}
.bar > i{display:block; height:100%; background:var(--teal); width:0; transition:width .25s}
.meta{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--gray); margin-bottom:20px; font-weight:700; font-variant-numeric:tabular-nums}

.scene{background:var(--tint); border-left:5px solid var(--steel); border-radius:0 8px 8px 0; padding:16px 18px; margin:0 0 16px; font-size:16.5px; line-height:1.85; color:var(--on-tint); max-width:44em}
.qtext{font-size:19px; font-weight:700; color:var(--navy); margin:0 0 16px; line-height:1.6; max-width:40em}
.choices{list-style:none; padding:0; margin:0 0 18px; max-width:44em}
.choices li{margin:0 0 10px}
.choices button{
  width:100%; text-align:left; background:var(--surface); border:2px solid var(--line); border-radius:9px;
  padding:14px 16px 14px 50px; font:inherit; font-size:16px; line-height:1.7; cursor:pointer; position:relative;
  color:var(--ink); transition:border-color .12s, background .12s;
}
.choices button:hover:not(:disabled){border-color:var(--steel); background:var(--surface-2)}
.choices button:disabled{cursor:default}
.choices button .k{
  position:absolute; left:14px; top:13px; width:25px; height:25px; border-radius:50%;
  background:var(--key-bg); color:var(--key-ink); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.choices button.ok{border-color:var(--teal); background:var(--tint-teal); color:var(--on-teal)}
.choices button.ok .k{background:var(--teal); color:var(--btn-ink)}
.choices button.ng{border-color:var(--red); background:var(--tint-red); color:var(--on-red)}
.choices button.ng .k{background:var(--red); color:var(--btn-ink)}

.fb{border-radius:var(--r); padding:18px 20px; margin:0 0 18px; max-width:44em}
.fb.ok{background:var(--tint-teal); color:var(--on-teal)}
.fb.ng{background:var(--tint-red); color:var(--on-red)}
.fb p{max-width:none}
.fb .verdict{font-weight:700; font-size:17px; margin:0 0 8px}
.fb.ok .verdict{color:var(--teal)} .fb.ng .verdict{color:var(--red)}
.fb dl{margin:14px 0 0; font-size:15.5px}
.fb dt{font-weight:700; color:var(--navy); margin-top:10px; font-size:14.5px}
.fb dd{margin:2px 0 0}

.result{text-align:center; padding:10px 0 4px}
.score{font-family:var(--f-head); font-size:62px; font-weight:700; color:var(--navy); line-height:1.15; font-variant-numeric:tabular-nums}
.score small{font-size:22px; color:var(--gray); font-weight:700}
.judge{display:inline-block; font-size:19px; font-weight:700; padding:8px 24px; border-radius:999px; margin:12px 0 6px}
.judge.pass{background:var(--tint-teal); color:var(--teal)}
.judge.fail{background:var(--tint-red); color:var(--red)}
.hidden{display:none !important}

footer.site{border-top:1px solid var(--line); background:var(--foot); margin-top:64px}
.foot-in{max-width:var(--maxw); margin:0 auto; padding:28px 20px 46px; font-size:13.5px; color:var(--gray)}
.foot-in p{max-width:none}
.foot-in a{color:var(--gray)}
.foot-nav{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.credit{color:var(--ink-2); font-size:14px; line-height:1.9; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px}
.credit b{color:var(--navy)}
.credit a{color:var(--steel)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:26px} h2{font-size:20px}
  .head-in{padding:12px 16px; gap:10px}
  nav.main{margin-left:0; width:100%}
  nav.main a{padding:6px 9px; font-size:13px}
  main{padding:24px 16px 60px}
  .score{font-size:50px}
}
@media print{
  .notice,header.site,footer.site,.btnrow,.setup{display:none}
  body{font-size:11pt; background:#fff; color:#000}
  main{max-width:none;padding:0}
  a{color:inherit;text-decoration:none}
}