:root{--bg:#f6f8fc;--fg:#18202f;--mut:#5a6578;--card:#fff;--bd:#d7deea;--pri:#1f5fd6;--pri2:#e8f0ff;--ok:#0b7a43;--ng:#b3261e;--warn:#7a5200;--warnbg:#fff4d6}
@media(prefers-color-scheme:dark){:root{--bg:#10151f;--fg:#e8edf6;--mut:#a3adc0;--card:#192131;--bd:#2c3850;--pri:#7aa7ff;--pri2:#1d2c4d;--ok:#5ad39a;--ng:#ff8f86;--warn:#ffd88a;--warnbg:#3a2f12}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:9}
.header{background:var(--card);border-bottom:1px solid var(--bd)}.head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.brand{font-weight:700;color:var(--fg);text-decoration:none}.brand span{color:var(--mut);font-weight:400}
a{color:var(--pri)}
h1{font-size:clamp(1.5rem,6vw,2.1rem);line-height:1.3;margin:.6em 0 .3em}h2{font-size:1.25rem;margin:0 0 .4em}
.panel{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px;margin:14px 0}
.banner{background:var(--warnbg);color:var(--warn);border:1px solid var(--warn);border-radius:12px;padding:10px 14px;margin:14px 0;font-size:.92rem}
.eyebrow{margin:0;color:var(--mut);font-size:.78rem;letter-spacing:.06em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
label{display:block;font-weight:600;font-size:.9rem;margin-bottom:4px}
select,input[type=number]{width:100%;min-height:44px;font:inherit;padding:8px;border:1px solid var(--bd);border-radius:10px;background:var(--card);color:var(--fg)}
button,.btn{min-height:44px;padding:8px 16px;border-radius:10px;border:1px solid var(--bd);background:var(--card);color:var(--fg);font:inherit;cursor:pointer}
button.primary{background:var(--pri);color:#fff;border-color:var(--pri)}@media(prefers-color-scheme:dark){button.primary{color:#0b1220}}
button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--pri);outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.hidden{display:none!important}
.qimg{display:block;max-width:100%;height:auto;border:1px solid var(--bd);border-radius:8px;background:#fff;margin:8px 0}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border:0;padding:0;margin:8px 0}.choices legend{position:absolute;left:-999px}
.choices button{font-size:1.2rem;font-weight:700}.choices button[aria-pressed=true]{background:var(--pri2);border-color:var(--pri);outline:2px solid var(--pri)}
.choices button.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--card))}.choices button.wrong{border-color:var(--ng);background:color-mix(in srgb,var(--ng) 18%,var(--card))}
.fb{border-left:4px solid var(--bd);padding:8px 12px;margin:10px 0}.fb.ok{border-color:var(--ok)}.fb.ng{border-color:var(--ng)}
.bar{height:8px;background:var(--bd);border-radius:6px;overflow:hidden}.bar>div{height:100%;background:var(--pri);width:0}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.badge{font-size:.78rem;border:1px solid var(--bd);border-radius:99px;padding:1px 10px;color:var(--mut)}.badge.w{color:var(--warn);border-color:var(--warn)}
table{width:100%;border-collapse:collapse;font-size:.9rem}th,td{border-bottom:1px solid var(--bd);padding:6px 4px;text-align:left}
.footer{margin:30px 0;color:var(--mut);font-size:.85rem}
details summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
@media(max-width:360px){.choices button{font-size:1rem;padding:6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.official-support{margin:1.2rem 0;border:2px solid var(--bd);border-radius:.65rem;padding:1rem;background:var(--card)}
.official-ref{margin:0 0 1rem}.official-ref-label{font-weight:700;margin:.25rem 0 .5rem}.official-ref .qimg{max-width:100%;height:auto;margin:auto;display:block}

.qimg{cursor:zoom-in}

/* 2026-10-28 HP公開基準(14px・44px)対応 */
.eyebrow,.badge,.footer{font-size:14px}
.skip:focus{min-height:44px;display:inline-flex;align-items:center}
header a{display:inline-flex;align-items:center;min-height:44px}
#import{min-height:44px}
.footer small{font-size:14px}