/* 案内ページ（/guide・/3kyu・/2kyu・/1kyu・/pricing・404）の見た目。アプリ版の案内（app.html の <style>）と同じ配色・部品
   （.wrap・.brand・.card・.tag・.btn・.note・footer）に、表・パンくず・例題を足したもの。2026-10-01 SEO 対策で追加。
   着せ替えは theme-bg.css の .doc-panel（白い台紙）、ダークは theme-dark.css の .wrap .card・table・.btn などの上書きで効く */
:root{--ink:#3a2e4d;--muted:#6a5c7d;--accent:#6b46c1;--accent-dark:#5a37ad;--soft:#f1e9ff;--line:#e4d7f5;--bg:#fcf8ff;--gold:#8a5200;--cream:#fff4d9;--rainbow:linear-gradient(90deg,#ffb3c7,#ffd9a8,#fff0a3,#bdecc4,#a9dcf5,#c9b8f5,#f3b3e0)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.8 'M PLUS Rounded 1c','Segoe UI','Yu Gothic UI','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;-webkit-text-size-adjust:100%;overflow-wrap:anywhere}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:5px;background:var(--rainbow);z-index:40}
.wrap{max-width:720px;margin:0 auto;padding:28px 16px 56px}
.brand{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:19px;text-decoration:none;color:var(--ink)}
.brand img{width:46px;height:46px;border-radius:12px;box-shadow:0 3px 10px #5a3e9a1f}
.crumbs{font-size:13px;color:var(--muted);margin:14px 0 0}
.crumbs a{color:var(--muted)}
h1{font-size:26px;line-height:1.4;margin:18px 0 8px}
h1::after{content:"";display:block;width:118px;height:10px;margin-top:12px;background:radial-gradient(circle at 5px 5px,#ffb3c7 4.5px,transparent 5px),radial-gradient(circle at 23px 5px,#ffd9a8 4.5px,transparent 5px),radial-gradient(circle at 41px 5px,#fff0a3 4.5px,transparent 5px),radial-gradient(circle at 59px 5px,#bdecc4 4.5px,transparent 5px),radial-gradient(circle at 77px 5px,#a9dcf5 4.5px,transparent 5px),radial-gradient(circle at 95px 5px,#c9b8f5 4.5px,transparent 5px),radial-gradient(circle at 113px 5px,#f3b3e0 4.5px,transparent 5px)}
h2{font-size:19px;line-height:1.5;margin:6px 0}
h3{font-size:16px;line-height:1.5;margin:18px 0 2px}
p{margin:8px 0}
.lead{color:var(--muted)}
.card{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:22px 20px;margin:18px 0;box-shadow:0 6px 18px #5a3e9a0f}
.tag{display:inline-block;background:var(--cream);color:var(--gold);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700;letter-spacing:1.5px}
.btn{display:block;width:100%;text-align:center;text-decoration:none;background:var(--accent);color:#fff;font-weight:700;font-size:17px;padding:16px 18px;border-radius:999px;margin:14px 0 6px;box-shadow:0 4px 12px #6b46c133}
.btn:hover{background:var(--accent-dark)}
.btn.sub{background:#fff;color:var(--accent);border:1.5px solid var(--accent);box-shadow:none}
.btn.sub:hover{background:var(--soft)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.meta{font-size:13px;color:var(--muted)}
ol,ul{margin:10px 0 0;padding-left:1.4em}
li{margin:6px 0}
.note{background:var(--cream);border:1.5px solid #f3dfa6;border-radius:16px;padding:12px 14px;font-size:14px;margin-top:14px}
a{color:var(--accent)}
.links{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 0;padding:0;list-style:none}
.links li{margin:0}
.table-wrap{overflow-x:auto;margin:12px 0 4px}
table{border-collapse:collapse;width:100%;background:#fff;font-size:14px;line-height:1.6}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
thead th{background:var(--soft);font-weight:700}
tbody th{background:var(--bg);white-space:nowrap}
td.num{text-align:right;white-space:nowrap}
.faq h3{margin-top:16px}
.faq p{margin-top:2px}
/* 例題（3級の無料サンプルから）。選択肢は番号つきの一覧、正解と解説はたたんでおく */
.sample{border-top:2px dotted var(--line);padding-top:12px;margin-top:16px}
.sample:first-of-type{border-top:0;padding-top:0}
.sample ol{list-style:none;padding-left:0}
.sample ol li{border:1.5px solid var(--line);border-radius:14px;padding:6px 12px}
.sample details{margin-top:10px}
.sample summary{cursor:pointer;color:var(--accent);font-weight:700}
footer{font-size:12px;line-height:1.85;color:var(--muted);margin-top:28px;border-top:2px dotted var(--line);padding-top:14px}
footer a{margin-right:1em;white-space:nowrap}
@media(max-width:420px){h1{font-size:23px}table{font-size:13px}th,td{padding:7px 8px}tbody th{white-space:normal;min-width:6em}}