:root{
  --navy:#10233F; --navy2:#1B3560; --yellow:#FFC531; --yellow-d:#E0A300;
  --paper:#FFFBF2; --gray:#EEF0F3; --gray2:#D5DAE1; --tint:#E3ECF8; --ink:#14213A; --mute:#4A566B;
  --ok:#1D6B45; --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.8 "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;overflow-wrap:anywhere;word-break:normal;line-break:strict}
h1,h2,h3{line-height:1.45;margin:0 0 .6em;color:var(--navy)}
h1{font-size:1.65rem;font-weight:900}
h2{font-size:1.25rem;font-weight:700}
h3{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em}
ul,ol{padding-left:1.3em;margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--yellow);color:var(--navy);padding:10px 14px;border-radius:8px;z-index:50;font-weight:700}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 6px var(--yellow)}
main:focus{outline:none}
h1:focus{outline:none}

.topbar{background:var(--navy);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 14px;position:sticky;top:0;z-index:20}
.brand{background:none;border:0;color:#fff;font:900 1rem/1.3 inherit;padding:10px 4px;min-height:44px;cursor:pointer;text-align:left}
.brand span{color:var(--yellow)}
nav{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
nav button{background:transparent;color:#fff;border:2px solid transparent;border-radius:999px;padding:8px 12px;min-height:44px;font:500 .9rem/1.2 inherit;cursor:pointer}
nav button[aria-current="page"]{background:var(--yellow);color:var(--navy);font-weight:700}
nav button:hover{border-color:var(--yellow)}
.topbar :focus-visible{outline-color:#fff;box-shadow:0 0 0 5px var(--yellow-d)}

#banner:empty{display:none}
.warn{background:#FFF1C9;border-bottom:3px solid var(--yellow-d);color:#4A3500;padding:12px 16px;font-weight:500}
.warn button{margin-left:8px}

main{max-width:880px;margin:0 auto;padding:22px 16px 56px}
.card{background:#fff;border:2px solid var(--gray2);border-radius:var(--r);padding:18px;margin-bottom:16px}
.card.tint{background:var(--tint);border-color:#C3D4EC}
.card.navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.card.navy h2,.card.navy h3{color:var(--yellow)}
.eyebrow{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:700;font-size:.8rem;padding:2px 10px;border-radius:999px;margin-bottom:.7em;line-height:1.7}
.lead{font-size:1.05rem}
.muted{color:var(--mute);font-size:.92rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 22px;border-radius:999px;border:2px solid var(--navy);background:var(--yellow);color:var(--navy);font:700 1rem/1.3 inherit;cursor:pointer;text-align:center;text-decoration:none;max-width:100%}
.btn:hover{background:#FFD35E}
.btn.sec{background:#fff}
.btn.sec:hover{background:var(--tint)}
.btn.ghost{background:transparent;border-color:var(--gray2);color:var(--navy)}
.btn.danger{background:#fff;border-color:#A8321E;color:#8A2410}
.btn[aria-disabled="true"]{background:var(--gray);border-color:var(--gray2);color:#5B6578;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* welcome */
.hero{background:var(--navy);color:#fff;border-radius:20px;padding:26px 18px;margin-bottom:18px}
.hero h1{color:#fff;font-size:1.9rem;margin-bottom:.3em}
.hero .sub{color:var(--yellow);font-weight:700;font-size:1.05rem}
.hero .promise{color:#E7EEF9}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0}
.flow .node{background:var(--yellow);color:var(--navy);font-weight:900;border-radius:12px;padding:10px 16px;min-width:76px;text-align:center}
.flow .arrow{color:var(--yellow);font-weight:900;font-size:1.3rem}
.steps{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{background:#fff;border:2px solid var(--gray2);border-radius:var(--r);padding:14px 16px;counter-increment:s;position:relative;padding-left:54px}
.steps{counter-reset:s}
.steps li::before{content:counter(s);position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--yellow);font-weight:900;display:grid;place-items:center}
.steps strong{display:block;color:var(--navy)}

/* lab grid */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));list-style:none;padding:0;margin:0 0 16px}
.exp{background:#fff;border:2px solid var(--gray2);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px}
.exp .no{font-weight:900;color:var(--navy);font-size:.85rem;letter-spacing:.04em}
.exp h3{margin:0}
.exp .desc{font-size:.93rem;flex:1;margin:0}
.tag{display:inline-block;background:var(--tint);color:var(--navy);border-radius:8px;padding:1px 10px;font-size:.8rem;font-weight:500;align-self:flex-start}
.status{font-weight:700;font-size:.88rem;display:flex;align-items:center;gap:6px}
.dots{display:inline-flex;gap:4px}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--navy);background:#fff;display:inline-block}
.dots i.on{background:var(--navy)}
.exp.done{border-color:var(--ok)}
.exp.done .status{color:var(--ok)}

/* decision */
.stage{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.stage .pill{background:var(--navy);color:#fff;border-radius:999px;padding:2px 12px;font-weight:700;font-size:.85rem}
.stage .pill.y{background:var(--yellow);color:var(--navy)}
.prog{display:flex;gap:6px;margin:0 0 16px}
.prog span{flex:1;height:8px;border-radius:4px;background:var(--gray2)}
.prog span.on{background:var(--navy)}
.prog span.cur{background:var(--yellow);outline:2px solid var(--navy)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-weight:700;font-size:1.1rem;color:var(--navy);line-height:1.6;padding:0;margin-bottom:12px}
.opt{display:block;position:relative;margin:0 0 10px}
.opt input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.opt .box{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--gray2);border-radius:var(--r);padding:14px 14px;min-height:56px}
.opt .mark{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--navy);display:grid;place-items:center;font-weight:900;font-size:.85rem;color:var(--navy);background:#fff}
.opt input:checked+.box{border-color:var(--navy);background:var(--tint);box-shadow:inset 0 0 0 2px var(--navy)}
.opt input:checked+.box .mark{background:var(--navy);color:var(--yellow)}
.opt input:checked+.box .mark::after{content:"✓";margin-left:0}
.opt input:checked+.box .mark span{display:none}
.opt input:focus-visible+.box{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 6px var(--yellow)}
.opt:hover .box{border-color:var(--navy)}
.hint{min-height:1.6em;color:#8A2410;font-weight:700;margin:6px 0 0}

/* result */
.chosen{border-left:8px solid var(--yellow);background:#fff;border-radius:var(--r);padding:14px 16px;margin-bottom:16px;border-top:2px solid var(--gray2);border-right:2px solid var(--gray2);border-bottom:2px solid var(--gray2)}
.chosen .k{font-weight:700;font-size:.82rem;color:var(--mute)}
.blk{border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.blk h3{margin-bottom:.3em;font-size:.95rem}
.blk.c{background:var(--tint)}
.blk.e{background:#fff;border:2px solid var(--gray2)}
.blk.r{background:#FFF4D3;border:2px solid var(--yellow)}
.bridge{border-top:2px dashed var(--gray2);padding-top:12px;color:var(--mute)}

/* final sheet */
.sheet{background:#fff;border:3px solid var(--navy);border-radius:18px;padding:20px 16px}
.sheet header{border-bottom:3px solid var(--yellow);margin-bottom:14px;padding-bottom:8px}
.sheet .brandline{font-weight:700;color:var(--mute);font-size:.85rem}
.dec{border:2px solid var(--gray2);border-radius:var(--r);padding:12px 14px;margin-bottom:12px;break-inside:avoid}
.dec .n{display:inline-block;background:var(--navy);color:var(--yellow);font-weight:900;font-size:.8rem;border-radius:999px;padding:0 10px}
.dec .lab{font-weight:700;margin:.3em 0}
.dec .tk{background:#FFF4D3;border-radius:8px;padding:8px 12px;margin-top:6px;font-weight:500}
.dec .no-print{margin-top:6px}

/* progress */
.plist{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}
.plist li{background:#fff;border:2px solid var(--gray2);border-radius:var(--r);padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.plist .t{flex:1 1 200px;font-weight:700}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.stat{background:var(--navy);color:#fff;border-radius:var(--r);padding:12px 18px;font-weight:700}
.stat b{color:var(--yellow);font-size:1.4rem}

/* confirm */
.confirm{background:#FFF1EE;border:3px solid #A8321E;border-radius:var(--r);padding:16px;margin:0 0 16px}
.toast{background:var(--ok);color:#fff;border-radius:var(--r);padding:10px 16px;margin-bottom:14px;font-weight:700}
.noscript{padding:16px;background:#FFF1C9}
details.help{background:#fff;border:2px solid var(--gray2);border-radius:var(--r);margin-bottom:10px;padding:0}
details.help summary{cursor:pointer;padding:14px 16px;font-weight:700;color:var(--navy);min-height:48px;list-style:none}
details.help summary::-webkit-details-marker{display:none}
details.help summary::before{content:"＋ ";color:var(--navy)}
details.help[open] summary::before{content:"－ "}
details.help p{padding:0 16px;margin:0 0 14px}

@media (max-width:420px){
  h1{font-size:1.4rem}.hero h1{font-size:1.55rem}
  main{padding:16px 12px 48px}
  .btn{width:100%}
  nav{margin-left:0;width:100%}
  nav button{flex:1 1 auto;padding:8px 6px;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:no-preference){.card,.exp,.hero{animation:in .25s ease-out}@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}

@media print{
  @page{margin:14mm}
  body{background:#fff;font-size:11pt;line-height:1.6}
  .topbar,#banner,.skip,.no-print,.btn,nav,.toast,.confirm{display:none!important}
  main{max-width:none;padding:0}
  .sheet{border:2px solid #000;border-radius:0;padding:0 10px}
  .dec,.card{break-inside:avoid}
  body.print-final main>*:not(.sheet){display:none!important}
  body:not(.print-final) main{display:none}
  body:not(.print-final)::before{content:"印刷はふり返りシートの画面から行ってください。";display:block;padding:20px}
  .dec .tk{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}