:root{--ff:#dcebfb;--fl:#1d3f8f;--sec:#8db6ea;--wt:#a9cbf2;--desk:#e9ecef;--paper:#fff;--ink:#111;--sub:#555;--line:#222;--soft:#bbb;--hl:#f1f3f5;--warn:#c2185b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ff:#1f3550;--fl:#8fb8ff;--sec:#3c6aa8;--wt:#2f5a8f;--desk:#14181c;--paper:#1f252b;--ink:#e8ecef;--sub:#a6b0b8;--line:#cfd6dc;--soft:#55616b;--hl:#29313a;--warn:#ff8fb0}}
:root[data-theme="dark"]{--ff:#1f3550;--fl:#8fb8ff;--sec:#3c6aa8;--wt:#2f5a8f;--desk:#14181c;--paper:#1f252b;--ink:#e8ecef;--sub:#a6b0b8;--line:#cfd6dc;--soft:#55616b;--hl:#29313a;--warn:#ff8fb0}
:root{box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 60px)}
html,body{background:var(--desk)}
body{margin:0;color:var(--ink);font-family:"BIZ UDGothic","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;font-size:16px;line-height:1.75}
a{color:var(--fl)}
/* ヘッダー */
header.site{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:2px solid var(--line);padding:env(safe-area-inset-top,0px) 12px 0}
header.site .in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{font-weight:700;color:var(--ink);text-decoration:none;font-size:17px;padding:8px 0;white-space:nowrap}
header nav{display:flex;overflow-x:auto;flex:1 1 300px;scrollbar-width:none}
header nav a{color:var(--ink);text-decoration:none;padding:9px 10px 7px;white-space:nowrap;font-weight:700;font-size:14px;border-bottom:4px solid transparent}
header nav a[aria-current="page"]{border-bottom-color:var(--ink)}
header nav a:hover{background:var(--hl)}
/* 本文 */
.wrap{max-width:960px;margin:0 auto;padding:18px 12px 48px}
h1{font-size:23px;margin:0 0 6px;border:2px solid var(--line);border-radius:10px;padding:5px 14px;background:var(--paper);letter-spacing:.03em}
.lead{margin:6px 0 12px}
h2{font-size:18px;margin:26px 0 8px;padding:2px 10px;border-left:6px solid var(--line);background:var(--hl)}
h3{font-size:16px;margin:14px 0 4px}
p{margin:6px 0}
small{font-size:13px;color:var(--sub)}
.warn{color:var(--warn)}
i.v{font-family:"Times New Roman",Georgia,serif;font-style:italic;font-size:1.14em;padding:0 .04em}
.fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.15;font-size:.88em;margin:0 .12em}
.fr>span:first-child{border-bottom:1.3px solid currentColor;padding:0 .2em}
sup{font-size:.7em}
.nb{white-space:nowrap}
/* ボタン類 */
button{font:inherit;font-size:15px;font-weight:700;cursor:pointer;border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:5px 12px;border-radius:6px;line-height:1.5}
button[aria-pressed="true"],button.pri{background:var(--ink);color:var(--paper)}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}
.tabs,.ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.ctl label{font-weight:700;display:flex;align-items:center;gap:8px;flex:1 1 260px}
.ctl label.chk{flex:0 0 auto}
input[type=range]{flex:1;accent-color:var(--fl);min-width:120px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--fl)}
/* パネル・ステージ */
.panel{display:none;background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:8px}
.panel.on{display:block}
.stage{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:10px;align-items:start}
.stage.one{grid-template-columns:minmax(0,1fr)}
svg.scene{display:block;width:100%;height:auto;max-height:66vh;cursor:grab;touch-action:none}
svg.flat{display:block;width:100%;height:auto;max-height:66vh}
.side{border:1.5px dashed var(--soft);border-radius:8px;padding:8px;text-align:center}
.side h3{margin:0 0 4px;font-size:15px}
.side .name{font-size:20px;font-weight:700}
.hint{font-size:13px;color:var(--sub);margin:2px 0 0}
.msg{border:1.5px solid var(--ink);border-radius:8px;padding:6px 10px;margin-top:8px;font-weight:700;min-height:2.6em}
.msg.warn{border-color:var(--warn);color:inherit}
/* まとめ系 */
.bx{border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;margin:8px 0;background:var(--paper)}
.tip{border:1.5px dashed var(--line);border-radius:8px;padding:8px 12px;margin:8px 0;background:var(--paper)}
.big{font-size:19px;font-weight:700;text-align:center;margin:6px 0}
.tbl{overflow-x:auto}
table.t2{border-collapse:collapse;width:100%;background:var(--paper)}
.t2 th,.t2 td{border:1px solid var(--line);padding:4px 8px;vertical-align:middle;text-align:left}
.t2 th{background:var(--hl);white-space:nowrap}
.t2.c td,.t2.c th{text-align:center}
ol.steps,ul.pts{margin:6px 0;padding-left:1.5em}
ol.steps li,ul.pts li{margin:3px 0}
/* トップ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.card{display:block;background:var(--paper);border:2px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);text-decoration:none}
.card:hover{background:var(--hl)}
.card svg{display:block;width:100%;height:110px}
.card b{font-size:17px;display:block;margin-top:4px}
.card span{font-size:14px;color:var(--sub);display:block;line-height:1.55}
footer.foot{text-align:center;font-size:13px;color:var(--sub);padding:0 12px 24px}
@media (max-width:700px){.stage{grid-template-columns:minmax(0,1fr)}h1{font-size:20px}body{font-size:15px}}
@media print{header.site,.ctl,.tabs,footer.foot{display:none}.panel{display:block;break-inside:avoid}body,html{background:#fff}}