@charset "UTF-8";
/* 災害対策本部 検定 — saitaihonbu.com  共通スタイル（オフライン動作・外部読込なし） */

:root{
  --navy:#17365D; --navy-d:#0F2540; --ink:#1F2933; --sub:#55636F;
  --line:#D8DEE6; --bg:#F4F6F9; --card:#FFFFFF;
  --red:#B3261E; --red-bg:#FBEDEC;
  --green:#1B6B48; --green-bg:#E8F3EE;
  --blue:#1C5A82; --blue-bg:#E9F1F7;
  --amber:#97600A; --amber-bg:#FAF1DF;
  --teal:#17666E; --teal-bg:#E5F1F2;
  --radius:10px; --shadow:0 1px 3px rgba(16,32,52,.10), 0 6px 18px rgba(16,32,52,.06);
  --maxw:960px;
}

*{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 Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7FB2D6; outline-offset:2px}

/* ---------- ヘッダー ---------- */
.site-header{background:var(--navy); color:#fff; box-shadow:var(--shadow)}
.site-header .inner{max-width:var(--maxw); margin:0 auto; padding:.7rem 1rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; font-weight:700}
.brand .mark{width:34px; height:34px; flex:0 0 34px}
.brand .t1{font-size:1.05rem; line-height:1.2; display:block}
.brand .t2{font-size:.72rem; opacity:.82; font-weight:400; letter-spacing:.04em; display:block}
.site-nav{margin-left:auto; display:flex; gap:.15rem; flex-wrap:wrap}
.site-nav a{color:#E7EEF6; text-decoration:none; font-size:.88rem; padding:.4rem .6rem; border-radius:6px}
.site-nav a:hover{background:rgba(255,255,255,.14)}
.site-nav a[aria-current="page"]{background:#fff; color:var(--navy); font-weight:700}

/* ---------- レイアウト ---------- */
main{max-width:var(--maxw); margin:0 auto; padding:1.25rem 1rem 2.5rem}
.hero{background:linear-gradient(180deg,#1B4173,#17365D); color:#fff; border-radius:var(--radius); padding:1.5rem 1.25rem; margin-bottom:1.25rem}
.hero h1{margin:0 0 .4rem; font-size:1.45rem; line-height:1.4}
.hero p{margin:0; opacity:.92; font-size:.95rem}
.hero .stats{display:flex; gap:1.25rem; margin-top:.9rem; flex-wrap:wrap}
.hero .stats div{font-size:.82rem; opacity:.85}
.hero .stats b{display:block; font-size:1.35rem; opacity:1}

h2{font-size:1.15rem; margin:1.8rem 0 .7rem; padding-left:.6rem; border-left:5px solid var(--navy)}
h3{font-size:1rem; margin:1.2rem 0 .5rem}
p{margin:.5rem 0}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow); margin-bottom:1rem}
.muted{color:var(--sub); font-size:.88rem}
.center{text-align:center}
.hidden{display:none !important}

/* ---------- 分野選択 ---------- */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.6rem}
.cat{position:relative; display:block; background:#fff; border:2px solid var(--line); border-radius:var(--radius); padding:.75rem .85rem; cursor:pointer; transition:border-color .12s, background .12s}
.cat:hover{border-color:#9FB6CC}
.cat input{position:absolute; opacity:0; width:0; height:0}
.cat .code{display:inline-block; background:var(--navy); color:#fff; font-size:.72rem; font-weight:700; padding:.1rem .45rem; border-radius:4px; margin-right:.4rem}
.cat .nm{font-weight:700; font-size:.95rem}
.cat .n{display:block; color:var(--sub); font-size:.78rem; margin-top:.2rem}
.cat input:checked + .box{}
.cat.selected{border-color:var(--navy); background:#EEF3F9}
.cat.selected::after{content:"✓"; position:absolute; top:.45rem; right:.6rem; color:var(--navy); font-weight:700}

/* ---------- オプション ---------- */
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5rem}
.opt{display:block; border:2px solid var(--line); border-radius:var(--radius); padding:.6rem .7rem; cursor:pointer; background:#fff}
.opt.selected{border-color:var(--navy); background:#EEF3F9}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt b{display:block; font-size:.95rem}
.opt span{display:block; color:var(--sub); font-size:.78rem}

/* ---------- ボタン ---------- */
.btn{display:inline-block; border:0; border-radius:8px; padding:.7rem 1.2rem; font-size:1rem; font-weight:700;
  font-family:inherit; cursor:pointer; text-decoration:none; text-align:center; line-height:1.4}
.btn-primary{background:var(--navy); color:#fff}
.btn-primary:hover{background:var(--navy-d)}
.btn-ghost{background:#fff; color:var(--navy); border:2px solid var(--navy)}
.btn-sub{background:#E7ECF2; color:var(--ink)}
.btn-danger{background:var(--red); color:#fff}
.btn-lg{width:100%; padding:.95rem 1rem; font-size:1.08rem}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-row{display:flex; gap:.6rem; flex-wrap:wrap}
.btn-row .btn{flex:1 1 auto; min-width:130px}

/* ---------- 試験バー ---------- */
.exam-bar{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 6px rgba(16,32,52,.07)}
.exam-bar .inner{max-width:var(--maxw); margin:0 auto; padding:.55rem 1rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.timer{font-variant-numeric:tabular-nums; font-weight:700; font-size:1.25rem; padding:.15rem .6rem; border-radius:6px; background:var(--blue-bg); color:var(--blue)}
.timer.warn{background:var(--amber-bg); color:var(--amber)}
.timer.crit{background:var(--red-bg); color:var(--red); animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:.45}}
.progress{flex:1 1 140px; min-width:120px}
.progress .bar{height:8px; background:#E3E8EF; border-radius:99px; overflow:hidden}
.progress .bar i{display:block; height:100%; background:var(--navy); border-radius:99px; transition:width .2s}
.progress .lbl{font-size:.78rem; color:var(--sub); margin-top:.15rem}

/* ---------- 設問 ---------- */
.qhead{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem}
.badge{display:inline-block; font-size:.74rem; font-weight:700; padding:.15rem .5rem; border-radius:99px; background:#E7ECF2; color:var(--sub)}
.badge.cat{background:var(--navy); color:#fff}
.badge.lv1{background:var(--green-bg); color:var(--green)}
.badge.lv2{background:var(--blue-bg); color:var(--blue)}
.badge.lv3{background:var(--red-bg); color:var(--red)}
.qno{font-weight:700; font-size:1.05rem}
.qtext{font-size:1.06rem; line-height:1.85; margin:.4rem 0 1rem; font-weight:500}

.choices{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.choice{display:flex; gap:.7rem; align-items:flex-start; width:100%; text-align:left; background:#fff;
  border:2px solid var(--line); border-radius:var(--radius); padding:.8rem .85rem; cursor:pointer; font:inherit; color:inherit}
.choice:hover{border-color:#9FB6CC; background:#FAFCFF}
.choice .k{flex:0 0 1.9rem; height:1.9rem; border-radius:50%; background:#E7ECF2; color:var(--sub);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.95rem}
.choice.sel{border-color:var(--navy); background:#EEF3F9}
.choice.sel .k{background:var(--navy); color:#fff}
.choice.ok{border-color:var(--green); background:var(--green-bg)}
.choice.ok .k{background:var(--green); color:#fff}
.choice.ng{border-color:var(--red); background:var(--red-bg)}
.choice.ng .k{background:var(--red); color:#fff}
.choice[disabled]{cursor:default}

.feedback{margin-top:.9rem; border-radius:var(--radius); padding:.85rem 1rem; border:1px solid}
.feedback.ok{background:var(--green-bg); border-color:#BBD9C9}
.feedback.ng{background:var(--red-bg); border-color:#EFC3C0}
.feedback .verdict{font-weight:700; margin:0 0 .35rem}
.feedback.ok .verdict{color:var(--green)}
.feedback.ng .verdict{color:var(--red)}
.feedback .ref{display:inline-block; margin-top:.4rem; font-size:.8rem; color:var(--sub); background:#fff; border:1px solid var(--line); border-radius:99px; padding:.1rem .6rem}

/* ---------- 問題一覧パレット ---------- */
.palette{display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:.35rem}
.palette button{aspect-ratio:1/1; border:2px solid var(--line); background:#fff; border-radius:8px; font:inherit;
  font-size:.85rem; font-weight:700; cursor:pointer; color:var(--sub); padding:0}
.palette button.done{background:#E7EEF6; border-color:#9FB6CC; color:var(--navy)}
.palette button.flag{border-color:var(--amber); color:var(--amber)}
.palette button.cur{outline:3px solid var(--navy); outline-offset:1px}
.legend{display:flex; gap:.9rem; flex-wrap:wrap; font-size:.78rem; color:var(--sub); margin-top:.5rem}
.legend i{display:inline-block; width:.8rem; height:.8rem; border-radius:3px; border:2px solid var(--line); vertical-align:-2px; margin-right:.25rem}
.legend .d i{background:#E7EEF6; border-color:#9FB6CC}
.legend .f i{border-color:var(--amber)}

/* ---------- 結果 ---------- */
.score{display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap; text-align:center}
.score .big{font-size:3rem; font-weight:700; line-height:1; color:var(--navy)}
.score .big small{font-size:1.1rem; color:var(--sub); font-weight:400}
.verdict-tag{display:inline-block; font-size:1.1rem; font-weight:700; padding:.35rem 1.1rem; border-radius:99px}
.verdict-tag.pass{background:var(--green-bg); color:var(--green)}
.verdict-tag.fail{background:var(--amber-bg); color:var(--amber)}

table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{border:1px solid var(--line); padding:.5rem .6rem; text-align:left; vertical-align:top}
th{background:#EEF2F7; font-weight:700; white-space:nowrap}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

.barline{display:flex; align-items:center; gap:.6rem; margin:.35rem 0}
.barline .nm{flex:0 0 11rem; font-size:.86rem}
.barline .tr{flex:1 1 auto; height:14px; background:#E3E8EF; border-radius:99px; overflow:hidden}
.barline .tr i{display:block; height:100%; background:var(--navy)}
.barline .vl{flex:0 0 5.5rem; text-align:right; font-size:.84rem; font-variant-numeric:tabular-nums}

.rev-item{border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:.7rem; overflow:hidden}
.rev-item > summary{padding:.7rem .9rem; cursor:pointer; font-weight:500; list-style:none; display:flex; gap:.6rem; align-items:flex-start}
.rev-item > summary::-webkit-details-marker{display:none}
.rev-item > summary::before{content:"＋"; color:var(--navy); font-weight:700; flex:0 0 auto}
.rev-item[open] > summary::before{content:"−"}
.rev-item .body{padding:0 .9rem .9rem; border-top:1px solid var(--line)}
.mark-ok{color:var(--green); font-weight:700}
.mark-ng{color:var(--red); font-weight:700}

.notice-box{background:var(--amber-bg); border:1px solid #E8D4A8; border-radius:var(--radius); padding:.85rem 1rem; margin:1rem 0}
.notice-box.info{background:var(--blue-bg); border-color:#BBD3E5}
.notice-box.warn{background:var(--red-bg); border-color:#EFC3C0}

ol.doc, ul.doc{padding-left:1.4rem}
ol.doc > li, ul.doc > li{margin:.45rem 0}

/* ---------- フッター ---------- */
.site-footer{background:#0F2540; color:#D7E1EC; margin-top:2rem}
.site-footer .inner{max-width:var(--maxw); margin:0 auto; padding:1.5rem 1rem 2rem; text-align:center}
.site-footer .org{font-size:1.02rem; font-weight:700; color:#fff; margin:0 0 .45rem}
.site-footer .contact{margin:0 0 .8rem; font-size:.95rem; display:flex; gap:1.1rem; justify-content:center; flex-wrap:wrap}
.site-footer a{color:#9FD0F0}
.site-footer .flinks{font-size:.85rem; margin:.6rem 0 0; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap}
.site-footer .cp{font-size:.78rem; color:#8FA3B8; margin-top:.9rem}

/* ---------- モバイル ---------- */
@media (max-width:600px){
  body{font-size:15px}
  main{padding:1rem .75rem 2rem}
  .hero{padding:1.15rem 1rem}
  .hero h1{font-size:1.2rem}
  .card{padding:.85rem .85rem}
  .site-nav a{font-size:.8rem; padding:.35rem .45rem}
  .brand .t1{font-size:.98rem}
  .timer{font-size:1.1rem}
  .qtext{font-size:1.02rem}
  .choice{padding:.7rem .7rem}
  .barline .nm{flex-basis:7.5rem; font-size:.8rem}
  .btn-row .btn{min-width:100%}
  .score .big{font-size:2.5rem}
}
@media print{
  .site-header,.site-nav,.exam-bar,.btn,.btn-row{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; page-break-inside:avoid}
}