@charset "UTF-8";
/* ffexam.jp 消防 効果測定 — 共通スタイル（外部リソース不使用・オフライン動作） */
:root{
  --red:#b3121b; --red-d:#7e0c13; --navy:#1f3a63; --ink:#1a1a1a; --gray:#5e6470;
  --line:#d7dbe3; --card:#f4f6fa; --tint:#fbeaea; --tintn:#e9eef6;
  --green:#1c7a4a; --amber:#c97c00; --white:#fff;
  --radius:12px; --shadow:0 1px 3px rgba(20,25,40,.10),0 6px 18px rgba(20,25,40,.06);
  --max:960px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--navy)}
img{max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding:0 16px}

/* ---- ヘッダー ---- */
.site-head{background:var(--red); color:#fff; position:sticky; top:0; z-index:50; box-shadow:0 2px 8px rgba(0,0,0,.15)}
.site-head .wrap{display:flex; align-items:center; gap:12px; min-height:58px}
.brand{display:flex; align-items:baseline; gap:10px; color:#fff; text-decoration:none; font-weight:800}
.brand .logo{font-size:1.15rem; letter-spacing:.02em}
.brand .dom{font-size:.78rem; opacity:.85; font-weight:600}
.site-head nav{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap}
.site-head nav a{
  color:#fff; text-decoration:none; font-size:.85rem; font-weight:700;
  padding:7px 11px; border-radius:999px; background:rgba(255,255,255,.14);
}
.site-head nav a:hover,.site-head nav a[aria-current="page"]{background:rgba(255,255,255,.28)}

/* ---- 見出し ---- */
main{padding:22px 0 40px}
h1{font-size:1.5rem; margin:.2em 0 .5em; color:var(--red-d); line-height:1.4}
h2{font-size:1.15rem; margin:1.8em 0 .6em; padding-left:11px; border-left:5px solid var(--red); line-height:1.5}
h3{font-size:1rem; margin:1.4em 0 .4em; color:var(--navy)}
p{margin:.6em 0}
.lead{background:var(--tintn); color:var(--navy); font-weight:700; padding:12px 14px; border-radius:var(--radius); margin:0 0 18px}
.muted{color:var(--gray); font-size:.88rem}
.center{text-align:center}

/* ---- ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:inherit; font-size:1rem; font-weight:800; line-height:1.3;
  padding:13px 20px; min-height:48px; border-radius:10px; border:2px solid var(--navy);
  background:#fff; color:var(--navy); text-decoration:none; cursor:pointer;
}
.btn:hover{background:var(--tintn)}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff}
.btn.primary:hover{background:var(--red-d); border-color:var(--red-d)}
.btn.ghost{border-color:var(--line); color:var(--gray)}
.btn.sm{font-size:.88rem; padding:9px 13px; min-height:40px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-row{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0}

/* ---- カード ---- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.card+.card{margin-top:12px}
.grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}

/* 分野カード */
.field{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; background:#fff; box-shadow:var(--shadow)}
.field:hover{border-color:var(--red); background:var(--tint)}
.field .no{display:inline-block; background:var(--red); color:#fff; font-weight:800; font-size:.78rem;
  padding:3px 10px; border-radius:999px}
.field .ttl{font-weight:800; font-size:1.02rem; line-height:1.45}
.field .meta{font-size:.8rem; color:var(--gray); display:flex; justify-content:space-between; gap:8px; align-items:center}
.badge{font-size:.75rem; font-weight:800; padding:2px 8px; border-radius:999px; background:var(--card); color:var(--gray)}
.badge.pass{background:#e4f4ec; color:var(--green)}
.badge.fail{background:var(--tint); color:var(--red)}

/* ---- 表 ---- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:.92rem; min-width:480px}
th,td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
th{background:var(--navy); color:#fff; font-weight:700; white-space:nowrap}
tbody tr:nth-child(even){background:#fafbfd}
td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}

/* ---- フォーム ---- */
fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin:0 0 14px}
legend{font-weight:800; color:var(--navy); padding:0 6px}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{display:inline-flex; align-items:center; gap:7px; border:2px solid var(--line); border-radius:999px;
  padding:9px 14px; cursor:pointer; font-weight:700; font-size:.92rem; min-height:44px}
.opt input{accent-color:var(--red); width:18px; height:18px}
.opt:has(input:checked){border-color:var(--red); background:var(--tint); color:var(--red-d)}
select,input[type=file],input[type=text]{font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; max-width:100%}

/* ---- 受験画面 ---- */
.exam-bar{position:sticky; top:58px; z-index:40; background:#fff; border-bottom:1px solid var(--line); padding:8px 0}
.exam-bar .wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.timer{font-weight:800; font-variant-numeric:tabular-nums; font-size:1.05rem; color:var(--navy);
  background:var(--tintn); padding:5px 12px; border-radius:999px}
.timer.warn{background:#fff2d6; color:var(--amber)}
.timer.danger{background:var(--tint); color:var(--red); animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:.55}}
.progress{flex:1; min-width:120px; height:9px; background:var(--card); border-radius:999px; overflow:hidden}
.progress>i{display:block; height:100%; background:var(--red); width:0; transition:width .2s}
.qcount{font-weight:800; font-size:.9rem; color:var(--gray); white-space:nowrap}

.qbox{border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); margin-top:14px}
.qhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.qno{background:var(--navy); color:#fff; font-weight:800; border-radius:8px; padding:3px 11px; font-size:.9rem}
.qtopic{font-size:.8rem; color:var(--gray); font-weight:700}
.qtext{font-size:1.08rem; font-weight:700; line-height:1.7; margin:0 0 14px}
.choices{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.choice{display:flex; gap:11px; align-items:flex-start; border:2px solid var(--line); border-radius:10px;
  padding:12px 13px; cursor:pointer; background:#fff; min-height:52px; line-height:1.6}
.choice:hover{border-color:var(--navy); background:var(--tintn)}
.choice input{margin-top:4px; accent-color:var(--red); width:19px; height:19px; flex:none}
.choice .mk{font-weight:800; color:var(--navy); flex:none}
.choice.sel{border-color:var(--red); background:var(--tint)}
.choice.ok{border-color:var(--green); background:#e8f6ee}
.choice.ng{border-color:var(--red); background:var(--tint)}
.choice.locked{cursor:default}

.explain{margin-top:14px; border-radius:10px; padding:12px 14px; border:2px solid var(--line); background:var(--card)}
.explain.ok{border-color:var(--green); background:#eef8f2}
.explain.ng{border-color:var(--red); background:var(--tint)}
.explain .jd{font-weight:800; margin-bottom:4px}
.explain.ok .jd{color:var(--green)}
.explain.ng .jd{color:var(--red)}

.navrow{display:flex; gap:10px; margin-top:16px; align-items:center; flex-wrap:wrap}
.navrow .spacer{flex:1}
.qmap{display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:6px; margin-top:10px}
.qmap button{font:inherit; font-weight:700; font-size:.82rem; min-height:40px; border:1px solid var(--line);
  background:#fff; border-radius:8px; cursor:pointer; color:var(--gray)}
.qmap button.done{background:var(--tintn); color:var(--navy); border-color:var(--navy)}
.qmap button.flag{background:#fff2d6; border-color:var(--amber); color:var(--amber)}
.qmap button.cur{outline:3px solid var(--red); outline-offset:-3px; color:var(--red)}

/* ---- 結果 ---- */
.score{display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center; text-align:center;
  background:var(--card); border-radius:var(--radius); padding:18px; margin-bottom:8px}
.score .big{font-size:3rem; font-weight:800; line-height:1; color:var(--red); font-variant-numeric:tabular-nums}
.score .lbl{font-size:.82rem; color:var(--gray); font-weight:700}
.judge{font-size:1.3rem; font-weight:800; padding:8px 22px; border-radius:999px}
.judge.pass{background:#e4f4ec; color:var(--green)}
.judge.fail{background:var(--tint); color:var(--red)}
.bar{background:var(--card); border-radius:999px; height:12px; overflow:hidden; min-width:90px}
.bar>i{display:block; height:100%; background:var(--navy)}
.rev{border:1px solid var(--line); border-left:5px solid var(--red); border-radius:8px; padding:12px 14px; margin:10px 0; background:#fff}
.rev .yours{color:var(--red); font-weight:700}
.rev .right{color:var(--green); font-weight:700}

canvas{max-width:100%; height:auto}

/* ---- 注意事項 ---- */
ol.notice{padding-left:1.3em}
ol.notice>li{margin:.5em 0}
.callout{border:2px solid var(--red); background:var(--tint); border-radius:var(--radius); padding:14px 16px; margin:16px 0}
.callout h3{margin-top:0; color:var(--red-d)}

/* ---- フッター ---- */
.site-foot{border-top:3px solid var(--red); background:var(--card); margin-top:40px; padding:22px 0 30px}
.site-foot .org{font-weight:800; font-size:1rem; color:var(--red-d)}
.site-foot .links{margin:8px 0 0; display:flex; flex-direction:column; gap:4px}
.site-foot .links a{color:var(--navy); font-weight:700; word-break:break-all}
.site-foot .fnav{margin-top:14px; display:flex; gap:14px; flex-wrap:wrap; font-size:.88rem}
.site-foot .copy{margin-top:14px; font-size:.8rem; color:var(--gray)}

@media (max-width:600px){
  body{font-size:15px}
  h1{font-size:1.28rem}
  .site-head .wrap{min-height:52px; padding-top:6px; padding-bottom:6px; flex-wrap:wrap}
  .exam-bar{top:0; position:sticky}
  .qtext{font-size:1.02rem}
  .score .big{font-size:2.4rem}
  .btn{width:100%}
  .btn-row .btn{width:auto; flex:1 1 auto}
}
@media print{
  .site-head,.exam-bar,.btn-row,.qmap,.site-foot .fnav{display:none}
  body{font-size:11pt}
}