:root{--blue:#6A83F8;--blue-d:#4a63e0;--coral:#EE6461;--bg:#f6f7fb;--ink:#444;--line:#dcdfe6}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;font-size:17px;line-height:1.75;-webkit-text-size-adjust:100%}
header{background:#fff;border-bottom:3px solid var(--blue);padding:10px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5}
header img{height:38px;border-radius:6px}header b{font-size:15px;color:#666;line-height:1.3}
main{max-width:640px;margin:0 auto;padding:16px}
h1{font-size:21px;margin:6px 0 4px}h2{font-size:17px;background:#e3e6ec;border-radius:8px;padding:3px 12px;margin:20px 0 10px}
.crumb{font-size:14px;color:#888;margin:2px 0 8px}.crumb a{color:var(--blue-d);text-decoration:none}
.btn{display:block;width:100%;background:#fff;border:2px solid var(--line);border-radius:14px;padding:15px 18px;margin:0 0 12px;font:inherit;font-size:18px;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer}
.btn small{display:block;font-size:13px;color:#888}.btn:active{background:#eef1ff;border-color:var(--blue)}
.btn.off{color:#aaa;background:#f0f1f4;pointer-events:none}.btn.off:after{content:"　準備中";font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.grid .btn{margin:0;text-align:center;padding:14px 4px;font-size:18px;font-weight:bold;color:var(--blue-d)}
.nav{display:flex;gap:10px;margin:16px 0}.nav a{flex:1;text-align:center;background:#fff;border:2px solid var(--blue);color:var(--blue-d);border-radius:12px;padding:12px;text-decoration:none;font-weight:bold}
.nav a.off{border-color:var(--line);color:#bbb;pointer-events:none}
.card{background:#fff;border:1.6px solid var(--line);border-radius:14px;padding:12px 14px;overflow-x:auto}
.qh{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.no{background:#8b93a3;color:#fff;border-radius:8px;padding:0 10px;font-weight:bold}
.ans{background:var(--coral);color:#fff;border-radius:8px;padding:0 10px;font-weight:bold}
.pt{background:#fff3cf;border-radius:8px;padding:0 8px;font-size:14px;color:#8a5a00}.topic{font-size:13px;color:#888}
.step{margin:6px 0}.step b.n{display:inline-block;background:#eceef2;color:#666;border-radius:50%;width:1.4em;height:1.4em;text-align:center;line-height:1.4em;margin-right:6px;font-size:14px}
.b{color:#4a63e0;font-weight:bold}.r{color:#EE6461;font-weight:bold}.g{color:#2FA37A;font-weight:bold}.o{color:#d98a12;font-weight:bold}.p{color:#8453c9;font-weight:bold}
.box{background:#f3f4f7;border-radius:10px;padding:7px 12px;margin:8px 0}.box.r{background:#fff0ef;font-weight:normal;color:var(--ink)}.box.g{background:#edf8f3;font-weight:normal;color:var(--ink)}.box.y{background:#fff8e6}
.fig{text-align:center;margin:8px 0}.fig svg,.card svg{max-width:100%;height:auto}
.row{display:flex;flex-wrap:wrap;gap:10px}.row>.col{flex:1 1 280px;min-width:0}
table.t{border-collapse:collapse;margin:6px auto;font-size:15px}table.t th,table.t td{border:1px solid #d5d8e0;padding:2px 8px;text-align:center}table.t th{background:#eef0f4}
.sm{font-size:15px}.frac{display:inline-block;vertical-align:middle;text-align:center;line-height:1.15;margin:0 2px}.frac i{display:block;font-style:normal;padding:0 3px}.frac i:first-child{border-bottom:1.2px solid currentColor}
.ok{color:#2FA37A;font-weight:bold}.ng{color:#EE6461;font-weight:bold}
ul{margin:4px 0;padding-left:1.3em}
.gate{text-align:center;padding-top:30px}.gate img{height:90px;border-radius:12px}
input{width:100%;font:inherit;font-size:20px;padding:14px;border:2px solid var(--line);border-radius:12px;text-align:center;margin:12px 0}
.err{color:var(--coral);min-height:1.5em;font-size:15px}.go{background:var(--blue);color:#fff;border:0;text-align:center;font-weight:bold}
.foot{font-size:12px;color:#999;text-align:center;margin:24px 0 8px}