/* ATAWI一次方程式 — 憲法 §11 デザイン規約。明朝を使わない。字間（レタースペーシング）を空けない。 */
:root{
  --c-primary:#1f4e79; --c-accent:#d08000; --c-accent-text:#9c5e00; --c-warn:#c0504d;
  --c-bg:#ffffff; --c-text:#222222; --c-muted:#666666; --c-panel:#e8eff7; --c-reason-bg:#fff8ec;
  --c-A:#1f4e79; --c-B:#2e7d32; --c-C:#6a1b9a; --c-D:#9c5e00; --c-E:#00695c; --c-F:#8d6e63;
  --font:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic","Meiryo",system-ui,sans-serif;
  --fs-base:1rem; --lh:1.75; --w-main:720px;
  --c-sky:#f3f8fc; --c-cream:#fffaf0; --c-leaf:#eef7ee;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh);color:var(--c-text);background:var(--c-bg);overflow-x:hidden}
a{color:var(--c-primary)}
/* ヘッダー：帯は横いっぱい、ロゴとメニューは本文と同じ幅（720px）の中に寄せる */
.site-header{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px;padding:10px max(16px,calc((100% - 760px)/2));border-bottom:3px solid var(--c-primary)}   /* 1段。ロゴは左・メニューは右で、その組を幅760pxにして中央に寄せ、間をあける（第21版。第19版は560px） */
.brand{font-weight:700;text-decoration:none;font-size:1.1rem}
.global{display:flex;flex-wrap:nowrap;gap:18px}
.global a{white-space:nowrap}
.brand-text{white-space:nowrap}
.global a{font-size:1rem}
.main{max-width:var(--w-main);margin:0 auto;padding:16px}
.site-footer{max-width:var(--w-main);margin:32px auto 0;padding:16px;border-top:1px solid #ccc;font-size:1rem}
.site-footer a{margin-right:12px}
.small{font-size:1rem;color:var(--c-muted)}
h1{font-size:1.5rem;color:var(--c-primary);margin:.5rem 0 1rem}
h2{font-size:1.15rem;color:var(--c-primary);background:var(--c-panel);border-left:5px solid var(--c-primary);padding:4px 10px;margin:1.5rem 0 .6rem}
blockquote{margin:1rem 0;padding:8px 14px;border-left:4px solid var(--c-accent);background:var(--c-reason-bg)}
.btn{display:inline-block;padding:10px 16px;background:var(--c-primary);color:#fff;border:0;border-radius:6px;text-decoration:none;font-size:1rem;cursor:pointer;margin:4px 4px 4px 0}
.btn.secondary{background:#fff;color:var(--c-primary);border:2px solid var(--c-primary)}
button{font-family:inherit;font-size:1rem}
table{border-collapse:collapse;width:100%;margin:.5rem 0 1rem}
th,td{border:1px solid #999;padding:6px 8px;text-align:left;vertical-align:top}
th{background:var(--c-panel);color:var(--c-primary)}
.cards{list-style:none;padding:0;margin:0}
.cards li{border:1px solid #ccc;border-radius:6px;margin:6px 0}
.cards a{display:block;padding:10px;text-decoration:none;color:inherit}
.stars{color:var(--c-accent-text)}
.adv{color:#fff;background:var(--c-warn);padding:0 6px;border-radius:4px;font-size:1rem}
.draft{color:var(--c-muted);border:1px solid var(--c-muted);padding:0 6px;border-radius:4px;font-size:1rem}
.tag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--c-accent);color:var(--c-accent-text);border-radius:4px;font-size:1rem}
.note{color:var(--c-muted);font-size:1rem}
/* 7つの動詞 */
.verbs{display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:.5rem 0 1rem;counter-reset:v}
.verbs li{counter-increment:v;padding:4px 10px;border:1px solid var(--c-primary);border-radius:14px;font-size:1rem;background:#fff}
.verbs li::before{content:counter(v) ". ";color:var(--c-primary);font-weight:700}
.verbs li[aria-current=step]{background:var(--c-primary);color:#fff}
.verbs li a{text-decoration:none;color:inherit}
/* 1問ページ */
.problem .meta{color:var(--c-muted);margin:0 0 .4rem}
.statement{font-size:1.1rem;padding:12px;border:2px solid var(--c-primary);border-radius:8px;background:#fff}
.mode-switch{margin:.6rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mascot.mode-note{justify-content:center}
.mascot.mode-note .bubble{text-align:center}
.mode-switch button{padding:8px 12px;border:2px solid var(--c-primary);background:#fff;color:var(--c-primary);border-radius:6px;cursor:pointer}
.mode-switch button[aria-pressed=true]{background:var(--c-primary);color:#fff}
.sec{border-top:1px solid #ddd;padding:6px 0 10px}
.sec h2{margin-top:.6rem}
.sec-connect{background:var(--c-panel);padding:8px 12px;border-radius:8px}
.reason{padding:8px 12px;border-left:4px solid var(--c-accent);background:var(--c-reason-bg);font-weight:700}
.equation{font-size:1.4rem;font-weight:700;margin:.4rem 0}
.verbs-list li{margin:.25rem 0}
.five-questions{padding-left:1.6em}
.five-questions li{margin:.6rem 0;padding:8px 12px;border:2px solid var(--c-primary);border-radius:8px;background:#fff}
.pattern{display:inline-block;padding:2px 10px;border-radius:12px;color:#fff;font-weight:700;font-size:1rem;background:var(--c-primary)}
.pattern-A{background:var(--c-A)}.pattern-B{background:var(--c-B)}.pattern-C{background:var(--c-C)}.pattern-D{background:var(--c-D)}.pattern-E{background:var(--c-E)}.pattern-F{background:var(--c-F)}
.answer{font-size:1.3rem;font-weight:700;color:var(--c-primary)}
.judgment{padding:8px 12px;border:2px solid var(--c-warn);border-radius:6px}
.steps li{font-size:1.1rem}
.try-row{margin:.5rem 0 1rem;padding:8px;border:1px dashed var(--c-accent);border-radius:6px}
.try-table{font-size:1rem}
.try-input input{font-size:1.1rem;padding:6px;width:8em}
.reason-input{width:100%;font-family:inherit;font-size:1rem;padding:8px}
details.mistake{border:1px solid #ccc;border-radius:6px;padding:6px 10px;margin:.4rem 0}
details.mistake summary{cursor:pointer;font-weight:700}
code{background:#f0f0f0;padding:0 .3em;font-family:inherit}
figure{margin:0}
figcaption{font-size:1rem;color:var(--c-muted);margin-top:.3rem}
.next{margin:1.2rem 0}
.reveal-next{margin:.8rem 0}
@media (max-width:599px){
  .triple thead{display:none}
  .triple tr{display:block;border:1px solid #999;margin-bottom:6px}
  .triple td{display:block;border:0;border-bottom:1px solid #ddd;padding:4px 8px}
  .triple td::before{content:attr(data-th) "：";color:var(--c-primary);font-weight:700}
  .triple td:empty{display:none}
}
/* 学習の記録は、ヘッダーとフッターで枠でくくって目立たせる（詳細設計書 §4.1 第21版） */
.global{align-items:center}
.nav-rec{display:inline-block;padding:1px 10px;border:3px solid var(--ink,#161616);border-radius:999px;background:#fff;box-shadow:2px 2px 0 var(--ink,#161616);text-decoration:none;font-weight:700;line-height:1.5}
.global a.nav-rec[aria-current]{background:var(--pop-b,#1f4e79);color:#fff;padding:1px 10px;border-radius:999px;text-decoration:none}
.site-footer a.nav-rec{color:var(--ink,#161616);background:var(--pop-y,#ffe14d);padding:2px 12px}
/* スマホで1段に収めるため、ロゴは しかくん だけにする（文字は読み上げ用に残す。第19版。メニューが4つになったので620px以下で） */
@media (max-width:620px){
  .brand-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .global{gap:14px}
}
/* さらに狭いときは「学習の記録」を「記録」と短くする（読み上げは aria-label で「学習の記録」） */
@media (max-width:440px){
  .site-header{gap:8px}
  .global{gap:10px}
  .global .nav-rec-pre{display:none}
  .global .nav-rec,.global a.nav-rec[aria-current]{padding:1px 8px}
}
/* 1問ページ：形式ボタンを押すまでは 区画0（問題）と もっと見る・類題 だけ（憲法第10版 §8）。JS がない端末は全部出す */
html.js article.problem[data-mode=none] :is(.sec[data-step],.legend,.reveal-next,.model-answer,.verbs-recap){display:none}
html.js article.problem[data-mode=a] .reveal-next{display:none}
.problem-title{font-size:1.2rem;margin:.2rem 0 .4rem}
/* ===== 楽しさ・かわいさ（詳細設計書 §14） ===== */
.btn{border-radius:999px}
.mode-switch button{border-radius:999px}
.cards li,details.mistake,.statement{border-radius:12px}
.problem .sec{background:var(--c-sky);border:0;border-radius:12px;padding:8px 14px 12px;margin:12px 0}
.problem .sec-problem{background:transparent;padding:0}
.problem .sec-connect{background:var(--c-panel)}
.problem .sec h2{margin-top:.4rem;background:transparent;border-left:0;padding:0}
/* しかくん の吹き出し */
.mascot{display:flex;align-items:flex-start;gap:10px;margin:.4rem 0 .8rem}
.mascot img{flex:0 0 auto;width:48px;height:48px}
.mascot-large img{width:96px;height:96px}
.bubble{position:relative;margin:0;padding:8px 12px;background:var(--c-cream);border:2px solid var(--c-accent);border-radius:12px;line-height:1.6}
.bubble::before{content:"";position:absolute;left:-10px;top:14px;border-style:solid;border-width:8px 10px 8px 0;border-color:transparent var(--c-accent) transparent transparent}
.hero{background:var(--c-sky);border-radius:16px;padding:12px 16px;margin-bottom:1rem}
.hero h1{margin-top:.2rem}
/* 分野の絵 */
.cat-icon{margin-right:.35em;font-size:1.2em}
.cat-tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cat-tiles a{display:block;padding:10px 12px;background:var(--c-sky);border-radius:12px;text-decoration:none;font-weight:700}
/* てんびん（確かめる：答えを方程式に戻した左右の値） */
.scale{display:flex;align-items:flex-end;gap:8px;margin:.4rem 0}
.scale svg{width:200px;height:auto;overflow:visible}
.scale-beam{transform-box:view-box;transform-origin:100px 60px}
/* お祝い（点数は出さない） */
.celebrate{background:var(--c-leaf);border-radius:16px;padding:10px 14px;margin:12px 0}
@media (prefers-reduced-motion:no-preference){
  .scale-beam{transition:transform .4s ease}
  .sec:not([hidden]) > .mascot{animation:mascot-pop .25s ease-out}
  .celebrate:not([hidden]){animation:mascot-pop .4s ease-out}
  .verbs li[aria-current=step]{animation:verb-hop .3s ease-out}
  .scale.balanced .scale-face{animation:verb-hop .4s ease-out}
}
@keyframes mascot-pop{from{transform:translateY(6px) scale(.97)}to{transform:none}}  /* 透明度は変えない（動きの途中でも文字の色の差を保つ） */
@keyframes verb-hop{50%{transform:translateY(-5px)}}
/* ===== 問題から始める（基本設計書 §14、詳細設計書 §4.2・4.3 第4版） ===== */
.answer-box{background:var(--c-cream);border:2px solid var(--c-accent);border-radius:12px;padding:10px 12px;margin:.6rem 0}
.answer-box label{display:block;font-weight:700;margin-bottom:.4rem}
.answer-box input{font-size:1.1rem;padding:6px 8px;width:7em;border:2px solid var(--c-primary);border-radius:8px}
.answer-box .mascot{margin:.6rem 0 0}
.verbs-recap{background:var(--c-sky);border-radius:12px;padding:8px 14px;margin:12px 0}
.recap-title{font-weight:700;color:var(--c-primary);margin:.2rem 0}
.today-one .site-lead{font-weight:700;color:var(--c-primary);margin:0}
.today-one h1{font-size:1.4rem;margin:.4rem 0}
.promise{font-weight:700;color:var(--c-primary);background:var(--c-leaf);border-radius:12px;padding:8px 12px}
.today-list{counter-reset:none;padding-left:0}
.today-list li{list-style:none}
.today-list .snippet{color:var(--c-muted)}
/* おく（詳細設計書 §4.3 第6版）：答案の1行目。「〜を x とする」の1文を枠で大きく見せる */
.x-decl{font-size:1.15rem;font-weight:700;background:var(--c-cream);border:2px solid var(--c-accent);border-radius:12px;padding:10px 14px;margin:.4rem 0}
.x-alts summary{cursor:pointer;color:var(--c-primary)}
.check-scale{margin-top:.6rem}
/* 表す の中の「単位をそろえる」（憲法第3版：そろえるは 表す に含める） */
.align{background:#fff;border-radius:10px;padding:6px 12px;margin:.4rem 0 .6rem}
.align-title{font-weight:700;color:var(--c-primary);margin:.2rem 0}
/* もっと見る（理由を書く・間違い探し・戻る先。ふだんは閉じる） */
.more{border-top:2px dashed #c8d6e5;margin-top:1.2rem;padding-top:.6rem}
.more-title{color:var(--c-muted);margin:.2rem 0 .4rem}
.more-item{background:var(--c-sky);border-radius:12px;padding:8px 14px;margin:8px 0}
.more-item > summary{cursor:pointer;font-weight:700;color:var(--c-primary);font-size:1.05rem}
.check-text{margin:.2rem 0 0}
/* 答案に書くこと と 解説 の区別（詳細設計書 §4.3 第8版） */
.write{background:#fff;border:2px solid var(--c-primary);border-radius:12px;padding:6px 14px 10px;margin:.5rem 0}
.write-label,.legend-write{display:inline-block;font-weight:700;color:#fff;background:var(--c-primary);border-radius:999px;padding:1px 12px;margin:.3rem 0 .2rem}
.legend{margin:.4rem 0}
.explain-label{color:var(--c-muted);font-weight:700;margin:.6rem 0 .2rem}
.parts-write{margin:.2rem 0;padding-left:1.2em}
/* 模範答案 */
.model-answer{background:#fff;border:3px double var(--c-primary);border-radius:12px;padding:8px 16px 12px;margin:16px 0}
.model-answer h2{margin:.3rem 0}
.ma{padding-left:0;list-style:none;counter-reset:ma 1}
.ma li{counter-increment:ma;border-top:1px dashed #c8d6e5;padding:8px 0;line-height:1.8}
/* 段階名は答案に書かないので、色の枠で囲んで本文と分ける */
.ma li{display:flex;gap:12px;align-items:flex-start}
.ma-k,.ma-k-sample{flex:0 0 auto;display:inline-block;font-weight:700;color:var(--c-primary);background:var(--c-sky);border:2px solid #9fbad6;border-radius:8px;padding:0 8px;font-size:1rem;line-height:1.7}
.ma-k{min-width:5.2em;text-align:center}
.ma-k::before{content:counter(ma) ". "}
.ma-v{flex:1 1 auto;min-width:0}
/* 間違い探し：つまずきの型 */
.mtype{margin:.6rem 0}
.mtype-head{margin:.2rem 0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.mtype-name{font-weight:700;color:#fff;background:var(--c-accent-text);border-radius:999px;padding:1px 12px}
.mtype-stage{color:var(--c-muted)}
.mtype-rule{background:var(--c-cream);border-radius:8px;padding:6px 10px}
/* ここまで理解できている？ */
.can-do{list-style:none;padding-left:0}
.can-do li{padding:6px 0 6px 1.8em;position:relative;border-bottom:1px dashed #c8d6e5}
.can-do li::before{content:"□";position:absolute;left:0;top:4px;font-size:1.2em;color:var(--c-primary)}
.reason-q{font-size:1.05rem}
.sub-line{margin:.1rem 0 .1rem 1em;font-size:1.05rem}
.scene-check{margin:.4rem 0}
/* 中学生向け（憲法 §10 第6版）：見出し・ボタン・吹き出しだけ丸ゴシック。本文は読みやすいゴシックのまま。読み込むまでは本文と同じゴシック */
:root{--font-round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","BIZ UDPGothic","Hiragino Sans","Yu Gothic","Meiryo",sans-serif}
h1,h2,.brand,.btn,.mode-switch button,.bubble,.write-label,.legend-write,.ma-k,.mtype-name,.more-item>summary,.cat-tiles a,.promise,.site-lead,.recap-title{font-family:var(--font-round)}
.bubble{font-weight:700}
.next h2{margin-top:1.2rem}
/* タイトルバナー（詳細設計書 §14.4 第11版） */
.title-banner{margin:.4rem 0 .2rem}
.title-banner svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.tb-font{font-family:var(--font-round)}
.banner-lead{text-align:center;font-size:1.1rem;margin:.4rem 0 1rem}
.brand{display:inline-flex;align-items:center;gap:6px}
.brand img{width:32px;height:32px;flex:0 0 auto}

/* ===== マンガ風の見た目（憲法 §10 第7版、詳細設計書 §14.4 第11版）。内容は変えず、見た目だけ =====
   見出し・ボタン・ロゴは元気なマンガ文字（Mochiy Pop One）。本文は読みやすいゴシックのまま。
   コマ割りの太い黒線とずらした影、黄色の帯、網点の背景。文字色と背景の差は WCAG AA を保つ */
:root{--ink:#161616;--pop-y:#ffe14d;--pop-y2:#fff4b8;--pop-r:#ff4f5e;--pop-b:#1f4e79;--shadow:4px 4px 0 var(--ink);
  --font-pop:"Mochiy Pop One","Zen Maru Gothic","Hiragino Maru Gothic ProN","BIZ UDPGothic","Yu Gothic","Meiryo",sans-serif}
body{background-color:#fffdf6;background-image:radial-gradient(rgba(22,22,22,.07) 1.2px,transparent 1.3px);background-size:12px 12px}
h1,h2,.brand,.btn,.mode-switch button,.write-label,.legend-write,.ma-k,.mtype-name,.more-item>summary,.cat-tiles a,.promise,.site-lead,.recap-title,.tb-font,.problem-title,.align-title,.reveal-next{font-family:var(--font-pop);font-weight:400}
/* ヘッダー */
.site-header{background:var(--pop-y);border-bottom:4px solid var(--ink)}
.brand{color:var(--ink)}
.global a{color:var(--ink);font-weight:700}
/* 見出し */
h1{color:var(--ink)}
h2{color:var(--ink);background:var(--pop-y);border:3px solid var(--ink);border-left-width:3px;border-radius:8px;box-shadow:var(--shadow);padding:6px 12px;display:table}
.problem .sec h2{background:var(--pop-y);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:4px 12px;display:inline-block;margin:.2rem 0 .6rem}
/* コマ（区画・カード） */
.hero,.problem .sec:not(.sec-problem),.verbs-recap,.model-answer,.more-item,.cards li,.cat-tiles a,.celebrate,.answer-box{background:#fff;border:3px solid var(--ink);border-radius:10px;box-shadow:var(--shadow)}
.hero{background:#fff}
.problem .sec-connect{background:#fff}
.statement{background:#fff;border:3px solid var(--ink);border-radius:10px;box-shadow:var(--shadow)}
.celebrate{background:var(--pop-y2)}
.cat-tiles a{color:var(--ink)}
.cat-tiles a:hover,.cards li a:hover{background:var(--pop-y2)}
.promise{background:var(--pop-y2);border:3px solid var(--ink);border-radius:10px;box-shadow:var(--shadow);color:var(--ink)}
/* ボタン（押すと沈む） */
/* 行の高さは数値で固定する（normal のままだと、マンガ文字が届いた瞬間にボタンが伸びて下がずれる） */
.btn,.mode-switch button,.reveal-next{line-height:1.5;background:var(--pop-y);color:var(--ink);border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:9px 18px}
.btn.secondary,.mode-switch button[aria-pressed=false]{background:#fff;color:var(--ink)}
.mode-switch button[aria-pressed=true]{background:var(--pop-b);color:#fff}
.btn:active,.mode-switch button:active,.reveal-next:active{transform:translate(3px,3px);box-shadow:none}
/* 吹き出し（マンガの吹き出し） */
.bubble{background:#fff;border:3px solid var(--ink);border-radius:18px;color:var(--ink)}
.bubble::before{border-color:transparent var(--ink) transparent transparent;left:-12px}
/* 答案に書く・模範答案 */
.write{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--pop-b)}
.write-label,.legend-write{background:var(--pop-b);color:#fff;border:2px solid var(--ink)}
.model-answer{border:4px solid var(--ink)}
.ma-k,.ma-k-sample{background:var(--pop-y);border:2px solid var(--ink);color:var(--ink)}
.mtype-name{background:var(--pop-r);color:var(--ink);border:2px solid var(--ink)}
.x-decl{background:var(--pop-y2);border:3px solid var(--ink)}
.equation{font-family:var(--font)}
/* 3つ組表 */
.triple th{background:var(--pop-y);color:var(--ink)}
/* タイトルバナー */
.title-banner svg{max-width:600px}
.banner-lead{font-family:var(--font-pop);font-size:1.15rem;color:var(--ink)}
.slot-line{font-size:1.1rem;margin:.3rem 0}
.mtype-name::before{content:"⚠ "}
.can-check{background:var(--c-sky);border-radius:8px;padding:4px 10px;margin:.3rem 0}
.review-check{margin:.8rem 0}
.review-points li{margin:.3rem 0}
.review-toc{background:#fff;border:3px solid var(--ink,#161616);border-radius:10px;padding:8px 14px;margin:1rem 0}
.review-toc ol{margin:.2rem 0;padding-left:1.4em}
.review-lesson{background:var(--c-sky);border-radius:12px;padding:8px 14px 12px;margin:12px 0}
.review-lesson h3{margin:.3rem 0 .4rem;color:var(--c-primary)}
.lesson-no{display:inline-block;min-width:1.6em;height:1.6em;line-height:1.6em;text-align:center;border-radius:50%;background:var(--pop-y,#ffe14d);border:2px solid var(--ink,#161616);margin-right:.4em;font-size:1em}
.review-fig{margin:.6rem 0}
.review-try{background:#fff;border:2px dashed var(--c-accent);border-radius:10px;padding:6px 12px;margin:.6rem 0 0}
.review-example{margin:.8rem 0}
.review-takeaway{background:var(--c-cream);border-left:4px solid var(--c-accent);padding:6px 10px}
.review-pitfall{background:#fff;border:2px solid var(--c-warn);border-radius:10px;padding:6px 12px;margin:.6rem 0}
.review-pitfall p{margin:.3rem 0}
.drill-stage{margin:1.2rem 0 .4rem;color:var(--c-primary)}
/* 答え合わせの誤答案内（詳細設計書 §4.3 第16版） */
.answer-feedback .bubble{white-space:pre-line}
.answer-actions{display:flex;flex-wrap:wrap;gap:8px;margin:.4rem 0}
.answer-actions[hidden]{display:none}
/* 立式の選択課題（詳細設計書 §4.3・§5.9 第16版）：済むまで答案の枠と、選ぶ式が見える部品を隠す */
html.js .has-fq:not(.fq-done) .fq-answer,html.js .has-fq:not(.fq-done) .fq-hide{display:none}
.fq-done .fq-hide-note,html:not(.js) .fq-hide-note{display:none}
html:not(.js) .fq,article.problem[data-mode=a] .fq{display:none}
.fq{background:#fffbe6;border:3px solid var(--ink,#161616);border-radius:12px;box-shadow:4px 4px 0 var(--ink,#161616);padding:8px 14px 12px;margin:12px 0}
.fq-title{margin:.2rem 0;font-weight:700;color:var(--c-primary)}
.fq-stem{margin:.3rem 0}
.fq-template{font-size:1.3rem;font-weight:700;margin:.4rem 0;overflow-wrap:anywhere}
.fq-blank{display:inline-block;min-width:2.4em;text-align:center;border:2px dashed var(--c-accent-text);border-radius:6px;background:#fff}
.fq-choices{border:0;padding:0;margin:.4rem 0}
.fq-choices legend{font-weight:700;padding:0;margin-bottom:.2rem}
.fq-choice{display:flex;gap:.6rem;align-items:center;padding:.5rem .7rem;margin:.4rem 0;background:#fff;border:2px solid #9fbad6;border-radius:10px;cursor:pointer;font-size:1.1rem;overflow-wrap:anywhere;min-width:0}
.fq-choice input{flex:0 0 auto;width:1.25rem;height:1.25rem;margin:0}
.fq-choice:has(input:checked){border-color:var(--c-primary);background:var(--c-sky);font-weight:700}
.fq-choice:has(input:focus-visible){outline:3px solid var(--c-accent);outline-offset:2px}
.fq-buttons{display:flex;flex-wrap:wrap;gap:8px}
.fq-result{font-weight:700;margin:.4rem 0;min-height:1.2em}
.fq-result.ok{color:#1d6b2f}
.fq-result.ng{color:#a8322d}
.fq-hints{padding:0;margin:.4rem 0}
.fq-hints li{list-style:none;background:#fff;border-left:5px solid var(--c-accent);padding:.35rem .6rem;margin:.35rem 0}
.c-note,.c-explain,.c-tip,.c-solve{background:#fff;border:2px solid var(--c-primary);border-radius:10px;padding:6px 12px;margin:.6rem 0}
/* はじめての3問（詳細設計書 §4.2・§4.11 第16版） */
.course-card{background:#fff;border:3px solid var(--ink,#161616);border-radius:14px;box-shadow:4px 4px 0 var(--ink,#161616);padding:4px 16px 10px;margin:14px 0 18px}
.course-card h2{margin-top:.8rem}
.course-card-flow{font-weight:700}
.course-pos{background:var(--c-panel);border-radius:12px;padding:6px 14px;margin:10px 0}
.course-pos-title{font-weight:700;color:var(--c-primary);margin:.2rem 0}
.course-steps{display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:.3rem 0;list-style:none}
.course-steps li{padding:2px 10px;border:1px solid var(--c-primary);border-radius:14px;background:#fff;font-size:1rem}
.course-steps li[aria-current=step]{background:var(--c-primary);color:#fff;font-weight:700}
.course-goal{margin:.3rem 0}
.course .sec{background:var(--c-sky);border-radius:12px;padding:8px 14px 12px;margin:12px 0}
.course-result li{margin:.3rem 0;font-size:1.1rem}
.course-next[hidden]{display:none}
/* 画面の移動（詳細設計書 §4.1.1 第17版）：本文へスキップ・パンくず・ヘッダーの現在地・下の案内 */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:var(--c-primary);border:3px solid var(--ink,#161616);padding:8px 14px;font-weight:700}
.skip-link:focus{left:12px;top:12px}
.main:focus{outline:none}
.breadcrumb{max-width:var(--w-main);margin:8px auto 0;padding:0 16px;font-size:1rem}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 0}
.breadcrumb li{display:inline;overflow-wrap:anywhere}
.breadcrumb li+li::before{content:"＞";margin:0 .4em;color:var(--c-muted)}
.breadcrumb [aria-current=page]{color:var(--c-muted)}
.global a[aria-current]{text-decoration-thickness:3px;text-underline-offset:5px}
.global a[aria-current=page]{background:#fff;border-radius:6px;padding:0 6px}
.nav-sub{display:flex;flex-wrap:wrap;gap:6px 18px;margin:.6rem 0}
.course-sub{display:flex;flex-wrap:wrap;gap:6px 18px;margin:1rem 0}
.course-steps li a{display:inline-block;padding:2px 10px;border:1px solid var(--c-primary);border-radius:14px;background:#fff}
.course-steps li:has(a){padding:0;border:0;background:none}
.course-steps li:has([aria-current=step]){background:var(--c-primary);color:#fff;font-weight:700}
/* 学習の記録（詳細設計書 §4.12 第20版）：状態は色だけでなく記号 ◎○△・ と文字でも示す */
:root{--st-solo:#2e8b3a;--st-solo-bg:#d4f0d6;--st-hint:#ffcf33;--st-hint-bg:#fff1b3;--st-ng:#ff4f5e;--st-ng-bg:#ffd6d9;--st-seen:#9fbad6;--st-seen-bg:#e3edf7}
.rec-main{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:.4rem 0 .8rem}
.rec-big{background:#fff;border:3px solid var(--ink,#161616);border-radius:12px;box-shadow:4px 4px 0 var(--ink,#161616);padding:8px 12px;text-align:center}
.rec-big.st-solo{background:var(--st-solo-bg)}
.rec-big.st-hint{background:var(--st-hint-bg)}
.rec-big p{margin:.1rem 0}
.rec-big-label{font-weight:700;line-height:1.4}
.rec-mark-lg{display:block;font-size:1.6rem;line-height:1.2}
.rec-tag{display:block;font-weight:400;color:var(--c-text)}
.rec-big-num{font-size:1.1rem}
.rec-big-num b{font-size:2.6rem;line-height:1.2;margin-right:.1em}
.rec-of{color:var(--c-muted)}
.rec-sub{list-style:none;padding:0;margin:.2rem 0 .8rem;display:flex;flex-wrap:wrap;gap:6px 16px}
.rec-sub b{font-size:1.25rem;margin:0 .1em}
.rec-dot{display:inline-block;min-width:1.2em;text-align:center}
.rec-bar-big,.rec-bar-small{display:flex;width:100%;border:3px solid var(--ink,#161616);border-radius:8px;overflow:hidden;background:#fff}
.rec-bar-big{height:36px}
.rec-bar-small{height:16px;border-width:2px;border-radius:6px}
.rec-bar-big .seg,.rec-bar-small .seg{display:block;height:100%}
.rec-bar-big .seg+.seg,.rec-bar-small .seg+.seg{border-left:2px solid var(--ink,#161616)}
.seg.st-solo{background:var(--st-solo)}.seg.st-hint{background:var(--st-hint)}.seg.st-ng{background:var(--st-ng)}.seg.st-seen{background:var(--st-seen)}.seg.st-none{background:#fff}
.rec-legend{list-style:none;padding:0;margin:.5rem 0;display:flex;flex-wrap:wrap;gap:4px 14px}
.rec-swatch{display:inline-block;width:1.5em;height:1.5em;line-height:1.3em;text-align:center;border:2px solid var(--ink,#161616);border-radius:5px;margin-right:.3em;vertical-align:middle;font-weight:700;color:var(--ink,#161616)}
.rec-swatch.st-solo{background:var(--st-solo-bg)}.rec-swatch.st-hint{background:var(--st-hint-bg)}.rec-swatch.st-ng{background:var(--st-ng-bg)}.rec-swatch.st-seen{background:var(--st-seen-bg)}.rec-swatch.st-none{background:#fff;border-style:dashed}
.rec-cats{list-style:none;padding:0;margin:0}
.rec-cats li{margin:.2rem 0 .7rem}
.rec-cat-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;margin:0 0 .15rem}
.rec-cat-num{color:var(--c-text)}
.rec-todo{background:#fff;border:3px solid var(--ink,#161616);border-radius:12px;padding:6px 14px 8px;margin:.6rem 0}
.rec-todo-title{font-weight:700;margin:.2rem 0}
.rec-todo ul{margin:.3rem 0;padding-left:1.3em}
.rec-todo li{margin:.2rem 0}
.rec-go{margin:1rem 0}
.rec-about ul{padding-left:1.3em}
.rec-about li{margin:.3rem 0}
.rec-filter{display:flex;flex-wrap:wrap;gap:8px;margin:.6rem 0 .2rem}
.rec-filter[hidden]{display:none}
.rec-filter button{padding:6px 12px;border:2px solid var(--ink,#161616);background:#fff;color:var(--ink,#161616);border-radius:999px;cursor:pointer;line-height:1.5}
.rec-filter button[aria-pressed=true]{background:var(--pop-b,#1f4e79);color:#fff}
.rec-cat h2{margin-bottom:.2rem}
.rec-cat[hidden]{display:none}
.rec-grid{list-style:none;padding:0;margin:.3rem 0 .8rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}
.rec-grid li[hidden]{display:none}
.rec-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;border:2px solid var(--ink,#161616);border-radius:8px;text-decoration:none;color:var(--ink,#161616);background:#fff;line-height:1.2}
.rec-cell.st-none{border-style:dashed;border-color:#8a8a8a;color:var(--c-muted)}
.rec-cell.st-solo{background:var(--st-solo-bg)}.rec-cell.st-hint{background:var(--st-hint-bg)}.rec-cell.st-ng{background:var(--st-ng-bg)}.rec-cell.st-seen{background:var(--st-seen-bg)}
.rec-cell:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}
.rec-cell:hover{box-shadow:2px 2px 0 var(--ink,#161616)}
.rec-num{font-weight:700}
.rec-mark{min-height:1.2em;font-weight:700}
.rec-day h3{margin:.8rem 0 .2rem;font-size:1.05rem;color:var(--c-primary)}
.rec-day ul{list-style:none;padding:0;margin:0}
.rec-day li{margin:.3rem 0}
.rec-link{background:#fff;border:2px dashed var(--c-primary);border-radius:10px;padding:4px 12px}
@media (max-width:420px){.rec-big-num b{font-size:2.1rem}.rec-main{gap:8px}.rec-big{padding:6px 8px}}


/* ブログ導線追加：狭い画面では自然に2段に折り返す。メニュー順は保持。 */
@media(max-width:760px){.site-header{flex-wrap:wrap;justify-content:center;gap:8px}.global{flex-wrap:wrap;justify-content:center;gap:8px 14px}.global a{min-height:32px;display:inline-flex;align-items:center}}