/* 配置：1カラムの読み物＋20問の一問一答。規模の選択と進捗は上部に固定。色はDC広研の青を基調に、見直し候補だけ橙で示す。 */
:root{
  --bg:#F3F8FB; --card:#FFFFFF; --ink:#0B2E4A; --muted:#55667A; --line:#D9E6EF;
  --accent:#006BB0; --accent-bg:#EAF7FD; --bar:#0091EA; --bar-off:#C5D6E3; --bar-all:#8497AA;
  --flag:#A8420A; --flag-bg:#FFF1E8; --ok:#2F7A1F; --ok-bg:#EDF8E8;
  --font:"BIZ UDPGothic","BIZ UDPゴシック","Meiryo","Yu Gothic",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1A28; --card:#12283B; --ink:#E6F0F8; --muted:#9DB1C4; --line:#25405A;
  --accent:#6CC0F5; --accent-bg:#123552; --bar:#2FA6EA; --bar-off:#37526B; --bar-all:#7F95A9;
  --flag:#FFA877; --flag-bg:#3A2216; --ok:#9AD97F; --ok-bg:#1B3318; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0B1A28; --card:#12283B; --ink:#E6F0F8; --muted:#9DB1C4; --line:#25405A;
  --accent:#6CC0F5; --accent-bg:#123552; --bar:#2FA6EA; --bar-off:#37526B; --bar-all:#7F95A9;
  --flag:#FFA877; --flag-bg:#3A2216; --ok:#9AD97F; --ok-bg:#1B3318; color-scheme:dark;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.75;word-break:auto-phrase;line-break:strict;margin:0;padding-inline:16px;padding-block:0 56px}
.wrap{max-width:860px;margin-inline:auto}
h1,h2,h3{text-wrap:balance;line-height:1.4;margin:0}
p{margin:0}
.kicker{font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.04em}
header{padding-block:40px 8px;display:grid;gap:14px}
h1{font-size:clamp(26px,5vw,38px);font-weight:700}
.lead{max-width:36em}
.facts{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--muted);font-size:14px;padding-top:4px}
.facts b{color:var(--ink);font-variant-numeric:tabular-nums}
.privacy{background:var(--accent-bg);border-radius:8px;padding:14px 18px;font-size:14px}
.privacy b{color:var(--accent)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;counter-reset:s}
.how li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;counter-increment:s}
.how li::before{content:counter(s);display:inline-block;min-width:1.6em;height:1.6em;line-height:1.6em;text-align:center;border-radius:50%;background:var(--accent);color:var(--card);font-weight:700;margin-right:8px;font-size:13px}
@media (max-width:560px){.how{grid-template-columns:minmax(0,1fr)}}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
button{font:inherit;font-size:15px;border-radius:8px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:var(--card);cursor:pointer}
button.sec{background:transparent;color:var(--accent)}
button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button[hidden]{display:none}
.dlnote{font-size:13px;color:var(--muted)}
.progress{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);margin-inline:-16px;padding:10px 16px}
.progress .in{max-width:860px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:14px}
.progress label{display:flex;gap:8px;align-items:center;font-weight:700}
select{font:inherit;font-size:14px;padding:6px 8px;border-radius:6px;border:1px solid var(--accent);background:var(--card);color:var(--ink);max-width:100%}
.progress .meter{flex:1 1 120px;height:6px;background:var(--bar-off);border-radius:3px;overflow:hidden;min-width:100px}
.progress .meter i{display:block;height:100%;background:var(--bar);width:0;transition:width .3s}
.progress b{font-variant-numeric:tabular-nums}
.flagcount{color:var(--flag);font-weight:700}
section{padding-block:36px 0}
h2{font-size:clamp(21px,3.4vw,26px);padding-bottom:8px}
.sub{color:var(--muted);font-size:14px;max-width:40em}
details.grp{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
details.grp>summary{cursor:pointer;list-style:none;padding:14px 18px;font-size:17px;font-weight:700;color:var(--accent);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary::before{content:"▸";font-size:14px;transition:transform .15s}
details.grp[open]>summary::before{transform:rotate(90deg)}
details.grp>summary small{color:var(--muted);font-weight:400;font-size:13px;margin-left:auto;font-variant-numeric:tabular-nums}
.gbody{padding:0 14px 6px}
.item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:14px}
.item h3{font-size:17px;font-weight:700}
.item .base{color:var(--muted);font-size:13px;margin-top:4px}
.item .base b{font-variant-numeric:tabular-nums;color:var(--ink)}
.opts{display:grid;gap:8px;margin-top:12px}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"in tx vl" ". br br";gap:2px 10px;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;min-width:0}
.opt input{grid-area:in;margin-top:6px;accent-color:var(--accent);flex:none}
.opt .tx{grid-area:tx;min-width:0}
.opt .vl{grid-area:vl;font-size:14px;font-variant-numeric:tabular-nums;text-align:right;line-height:1.5;padding-top:2px}
.opt .vl b{font-weight:700}
.opt .vl .al{color:var(--muted)}
.opt .vl .cs{display:block;color:var(--muted);font-size:13px}
.opt .br{grid-area:br;display:grid;gap:3px;margin-top:4px}
.opt .br i{display:block;height:7px;border-radius:2px;background:var(--bar-all)}
.opt .br i.bd{background:var(--bar)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){.opt{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"in tx" ". vl" ". br"}.opt .vl{text-align:left}}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted);margin-top:10px}
.legend span::before{content:"";display:inline-block;width:14px;height:7px;border-radius:2px;margin-right:6px;background:var(--bar-all)}
.legend span.bd::before{background:var(--bar)}
.none{margin-top:8px;font-size:13px;padding:6px 12px}
.res{margin-top:14px;display:grid;gap:10px}
.res[hidden]{display:none}
.cmp{font-size:15px}
.cmp b{font-variant-numeric:tabular-nums}
.step{border-radius:8px;padding:12px 14px;font-size:15px}
.step.flag{background:var(--flag-bg);border-left:4px solid var(--flag)}
.step.flag b.h{color:var(--flag)}
.step.ok{background:var(--ok-bg);border-left:4px solid var(--ok)}
.step.ok b.h{color:var(--ok)}
.step ul{margin:6px 0 0;padding-left:1.2em}
.foot{font-size:13px;color:var(--muted);margin-top:12px}
.finds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
@media (max-width:560px){.finds{grid-template-columns:minmax(0,1fr)}}
a{color:var(--accent)}
.find{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px}
.find h3{font-size:16px;font-weight:700;margin-bottom:8px}
.pair{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.pair div{display:grid}
.pair strong{font-size:30px;font-variant-numeric:tabular-nums;line-height:1.2}
.pair small{color:var(--muted);font-size:13px}
.pair .lo strong{color:var(--flag)}
.pair .hi strong{color:var(--accent)}
.find p{font-size:14px;color:var(--muted);margin-top:8px}
.summary{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin-top:14px}
.summary ul{margin:10px 0 0;padding-left:1.2em;display:grid;gap:8px}
textarea{width:100%;font:inherit;font-size:14px;margin-top:12px;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--bg);color:var(--ink);min-height:10em}
.ask{margin:12px 0 0;padding-left:1.4em;display:grid;gap:8px}
.dl{background:var(--accent-bg);border-radius:10px;padding:22px}
.dl h2{padding-bottom:4px}
footer{padding-block:40px 0;font-size:13px;color:var(--muted);display:grid;gap:6px}
@media print{.progress,.btns,textarea{display:none}details.grp:not([open])>.gbody{display:block}}

body{padding-inline:0}
.pad{padding-inline:16px}
.sitebar{background:var(--card);border-bottom:1px solid var(--line)}
.sitebar .in{max-width:860px;margin-inline:auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center}
.sitebar .name{font-weight:700;font-size:15px;color:var(--ink);text-decoration:none}
.sitebar nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto}
.sitebar nav a{font-size:15px;text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}
.sitebar nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.sitebar nav a:hover{color:var(--accent)}
.progress{margin-inline:0;padding-inline:16px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
@media (max-width:700px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{display:grid;gap:8px;align-content:start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;color:var(--ink);text-decoration:none}
.card:hover{border-color:var(--accent)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card h3{font-size:18px;color:var(--accent)}
.card p{font-size:14px;color:var(--muted)}
.card .go{font-size:14px;font-weight:700;color:var(--accent)}
a.btn{display:inline-block;font-size:15px;border-radius:8px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:var(--card);text-decoration:none}
a.btn.sec{background:transparent;color:var(--accent)}
a.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:12px}
.panel h3{font-size:18px}
dl.spec{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:0;font-size:15px}
dl.spec dt{color:var(--muted)}
dl.spec dd{margin:0}
@media (max-width:560px){dl.spec{grid-template-columns:minmax(0,1fr);gap:2px}dl.spec dd{margin-bottom:8px}}
ol.toc{margin:6px 0 0;padding-left:1.8em;display:grid;gap:4px;font-size:15px;columns:2;column-gap:32px}
ol.toc li{break-inside:avoid}
@media (max-width:700px){ol.toc{columns:1}}
.pts{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.pts li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:12px 16px}
.pts b{display:block}
.pts span{font-size:14px;color:var(--muted)}
.cta{background:var(--accent-bg);border-radius:12px;padding:22px;display:grid;gap:10px}
.cta h2{padding-bottom:0}
.dlmeta{font-size:13px;color:var(--muted)}
.scorebox{gap:14px}
.bandsel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:700}
.sitems{display:grid;gap:6px}
.sgroup{font-size:14px;font-weight:700;color:var(--accent);margin-top:8px}
.sitem{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:start;padding:8px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.sitem input{margin-top:6px;accent-color:var(--accent)}
.sitem .vl{font-size:14px;font-variant-numeric:tabular-nums;text-align:right}
.sitem .vl .al{color:var(--muted)}
.sitem:has(input:checked){border-color:var(--accent);background:var(--accent-bg)}
@media (max-width:560px){.sitem{grid-template-columns:auto minmax(0,1fr)}.sitem .vl{grid-column:2;text-align:left}}
.sres{border-top:1px dashed var(--line);padding-top:12px;display:grid;gap:8px}
.sbig{font-size:17px}
.sbig strong{font-size:30px;color:var(--accent);font-variant-numeric:tabular-nums;margin-inline:4px}
.slist{margin:0;padding-left:1.2em;display:grid;gap:4px;font-size:15px}
.smsg{font-weight:700;color:var(--ok)}
.smsg.lo{color:var(--flag)}
.shead{font-weight:700;font-size:15px;margin-top:4px}