*{box-sizing:border-box}body{font-family:Meiryo,"Yu Gothic",sans-serif;background:#f2f8fc;color:#263c49;margin:0}main{max-width:1060px;margin:24px auto;padding:0 16px}h1{font-size:1.6rem}p{line-height:1.7}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.tabs button,.hide{border:1px solid #bcd0da;background:#fff;border-radius:9px;padding:10px;cursor:pointer}.tabs button.active{background:#177eaf;color:#fff}.card{background:#fff;border:1px solid #d2e1e9;border-radius:14px;padding:16px}.layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.lesson{background:#edf6fb;border-radius:10px;padding:14px;text-align:center}.lesson p{text-align:left}.chart{border:1px solid #d2e1e9;border-radius:10px;padding:12px}svg{width:100%;display:block}.shape{height:215px}.formula{font-size:1.35rem;font-weight:bold;padding:9px}.result{font-weight:bold;font-size:1.12rem}.note{color:#536b78;font-size:.89rem}.hide{display:block;width:100%;margin-top:8px;padding:7px;background:#f9fcfd}.control{margin-top:15px;background:#edf6fb;border-radius:10px;padding:16px}.bar{display:flex;justify-content:space-between;font-weight:bold}.hint{margin:8px 0;font-weight:600}input[type=range]{width:100%;accent-color:#dd253e;cursor:pointer}input[type=range]::-moz-range-thumb{background:#dd253e;border:0}.marks{display:flex;justify-content:space-between;color:#536b78;font-size:.83rem}.summary{border-left:4px solid #1786b7;background:#f0faff;margin-top:14px;padding:12px}.hidden{display:none}hr{border:0;border-top:1px solid #d0e0e8;margin:14px 0}@media(max-width:700px){.layout{grid-template-columns:1fr}}
.math,#defs b{font-family:"Times New Roman","Liberation Serif",serif;font-style:italic;font-weight:400}.math{font-size:1.12em}.lesson-nav{display:flex;gap:12px;margin-top:24px}.lesson-nav button{flex:1;min-height:76px;padding:16px;border:0;border-radius:12px;background:#177eaf;color:#fff;font:inherit;font-size:1.25rem;font-weight:700;cursor:pointer}.lesson-nav button small{display:block;font-size:.85rem;font-weight:400;margin-top:6px}.lesson-nav .back{background:#e7f1f7;color:#176489}.lesson-nav button[hidden]{display:none}.tabs{justify-content:center;margin-top:20px}.tabs button{font:inherit}.tabs button:focus-visible,.lesson-nav button:focus-visible{outline:3px solid #dd8b28;outline-offset:3px}.formula,.result{overflow-wrap:anywhere;line-height:1.8}.layout>*{min-width:0}.zoom-controls{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.zoom-controls button{font:inherit;border:1px solid #bcd0da;border-radius:8px;background:#f0f7fc;color:#176489;padding:9px 12px;cursor:pointer}.zoom-status{font-size:.85rem;color:#536b78;margin:8px 0 0}.n-input{width:72px;font:inherit;font-size:1.1rem;border:1px solid #bcd0da;border-radius:6px;padding:5px;text-align:center}.fraction{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;line-height:1.35;margin:0 .15em}.fraction>span:first-child{border-bottom:1px solid currentColor;padding:0 .18em .12em}.fraction>span:last-child{padding:.12em .18em 0}#lControl{margin-top:16px}#lControl[hidden]{display:none}.fraction del{color:#8a99a5;text-decoration-color:#d45353;text-decoration-thickness:2px}.derivation{font-size:1rem;text-align:left;line-height:1.9}.derivation p{margin:14px 0 8px}.derivation-equation{text-align:center;font-size:1.18rem;line-height:1.9;padding:10px 4px;overflow-wrap:anywhere}.zero-explanation{margin-top:24px;padding:16px;background:#f0f7fc;border-radius:10px}.zero-explanation h3{font-size:1.05rem;margin:0 0 8px}.note{white-space:pre-line}.control{padding:8px 11px;margin-top:7px}.control hr{margin:5px 0}.control .hint{display:none}.control .marks{font-size:.69rem;line-height:1.1}.control .bar{font-size:.78rem;line-height:1.2;align-items:center}.control .bar label{white-space:nowrap}.control input[type=range]{height:23px;min-width:0;flex:1}.control .n-input{width:48px;font-size:.85rem;padding:2px}.control #nControl,.control #lControl{margin-top:5px}.control .zoom-controls{margin-top:5px;gap:4px}.control .zoom-controls button{font-size:.73rem;padding:5px 7px}.control input[type=range]:focus-visible{outline:2px solid #146e9a;outline-offset:3px}.compact-slider-row{display:flex;align-items:center;gap:8px;margin:4px 0}.compact-slider-row label{width:18px;flex:none;font-size:.9rem;font-weight:700}.compact-slider-row output{min-width:40px;text-align:right;font-size:.8rem}.compact-slider-row input[type=range]{flex:1}.compact-slider-row .n-input{flex:none}.control{padding:8px 10px;margin-top:6px}.compact-slider-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:5px;margin:1px 0;min-height:30px;white-space:nowrap}.compact-slider-row label{width:16px;font-size:.85rem}.compact-slider-row output{min-width:26px;font-size:.77rem;text-align:right}.compact-slider-row input[type=range]{width:100%;min-width:0;margin:0;height:24px}.compact-slider-row:has(.n-input){grid-template-columns:16px minmax(0,1fr) 43px auto}.compact-slider-row .n-input{width:43px;font-size:.8rem;padding:2px}.slider-description{font-size:.72rem;line-height:1.35;color:#536b78;margin:5px 0 0}.control #nControl,.control #lControl{margin:0}.control #arithmeticActions .zoom-controls{margin-top:6px}.control #arithmeticActions button{font-size:.75rem;padding:5px 7px}/* 同一グリッド列で x・n・l のスライダー長を統一 */.control .compact-slider-row,.control .compact-slider-row:has(.n-input){display:grid;grid-template-columns:18px minmax(0,1fr) 53px;gap:5px;align-items:center;min-width:0}.control .compact-slider-row label{width:18px;min-width:0;white-space:nowrap;overflow:hidden;font-size:.85rem}.control .compact-slider-row input[type=range]{grid-column:2;width:100%;min-width:0}.control .compact-slider-row output,.control .compact-slider-row .n-input{grid-column:3;width:53px;min-width:0;max-width:53px;justify-self:stretch;box-sizing:border-box;text-align:center}.control .compact-slider-row #nOut[hidden]{display:none!important}.control .compact-slider-row{margin:0;min-height:29px}.control .slider-description{font-size:.7rem;line-height:1.35;margin-top:4px}.arithmetic-button-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:7px}.control .arithmetic-button-row button{min-width:0;padding:7px 2px;font-size:clamp(.65rem,1vw,.77rem);white-space:nowrap;line-height:1.2;border:1px solid #bcd0da;border-radius:7px;background:#f0f7fc;color:#176489;cursor:pointer}.arithmetic-button-row button[hidden]{display:none!important}#arithmeticActions[data-mode="m"] .arithmetic-button-row{grid-template-columns:repeat(2,minmax(0,1fr))}/* 3d arithmetic buttons */.control .arithmetic-button-row button{background:linear-gradient(180deg,#ffffff 0%,#eef8ff 42%,#cfe6f4 100%);border:1px solid #8bb4c8;border-bottom:4px solid #5d8ea8;border-radius:8px;box-shadow:0 3px 7px rgba(23,49,76,.18),inset 0 1px 0 rgba(255,255,255,.9);font-weight:700}.control .arithmetic-button-row button:hover{filter:brightness(1.03)}.control .arithmetic-button-row button:active{transform:translateY(2px);border-bottom-width:2px;box-shadow:0 1px 2px rgba(23,49,76,.18),inset 0 1px 0 rgba(255,255,255,.7)}.control .arithmetic-button-row button:focus-visible{outline:3px solid #df922d;outline-offset:2px}
.tabs .stage-link{display:inline-block;border:1px solid #bcd0da;background:linear-gradient(#fff,#e2f2fa);border-radius:9px;padding:10px;color:#176489;text-decoration:none;font-weight:600;box-shadow:0 2px 4px #17314c22}.tabs .stage-link.active{background:linear-gradient(#38a3d0,#177eaf);color:white}.tabs .stage-link:focus-visible{outline:3px solid #dd8b28;outline-offset:3px}

/* 独立した説明・グラフの2ペイン配置 */
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px}
.layout>.lesson{min-width:0;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.layout>.graph-side{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:stretch;gap:6px;position:sticky;top:12px;max-height:calc(100dvh - 24px)}
.graph-side>.graph-content{min-width:0;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.graph-side>.side-toggle{writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;min-height:170px;width:32px;height:100%;margin:0;padding:10px 4px;font-size:.78rem;font-weight:700;line-height:1.2;background:linear-gradient(90deg,#d8edf9,#fff);box-shadow:0 3px 6px #17314c24;white-space:nowrap}
.layout.graph-hidden{grid-template-columns:minmax(0,1fr) 32px}
.layout.graph-hidden>.lesson{max-height:none;overflow:visible}
.layout.graph-hidden>.graph-side{display:block;max-height:none}
.layout.graph-hidden .graph-content{display:none}
.layout.graph-hidden .side-toggle{height:100%;min-height:180px}
@media(max-width:700px){.layout{grid-template-columns:minmax(0,1fr)}.layout>.lesson{max-height:none;overflow:visible}.layout>.graph-side{position:static;max-height:none}.graph-side>.graph-content{max-height:none;overflow:visible}.layout.graph-hidden{grid-template-columns:minmax(0,1fr)}.layout.graph-hidden>.graph-side{display:flex;justify-content:flex-end}.layout.graph-hidden .side-toggle{height:auto;min-height:120px}}

/* 2026-10-19: 教材の情報密度を高める（読みやすさを保ち、余白と折り返しを削減） */
main{max-width:1240px;margin:12px auto;padding:0 14px}
main>h1{font-size:1.42rem;margin:4px 0 7px}
main>p{font-size:.91rem;line-height:1.45;margin:6px 0 12px}
.card{padding:10px}
.layout{gap:10px}
.layout>.lesson{padding:11px 13px;text-align:left;font-size:.94rem;line-height:1.5}
.layout>.lesson h2{font-size:1.15rem;line-height:1.35;margin:1px 0 7px}
.layout>.lesson p{line-height:1.5;margin:7px 0}
.layout>.lesson hr{margin:8px 0}
.layout>.lesson .shape{height:162px}
.layout>.lesson .formula{font-size:1.13rem;line-height:1.45;padding:4px 2px;margin:3px 0}
.layout>.lesson .result{font-size:1.01rem;line-height:1.5;margin:4px 0}
.layout>.lesson .note{font-size:.83rem;line-height:1.5}
.layout>.lesson .derivation{font-size:.91rem;line-height:1.5}
.layout>.lesson .derivation p{margin:7px 0 4px}
.layout>.lesson .derivation-equation{font-size:1.04rem;line-height:1.5;padding:5px 2px}
.layout>.lesson .zero-explanation{padding:9px 11px;margin-top:10px}
.layout>.lesson .zero-explanation p{margin:6px 0}
.chart{padding:8px}
.chart strong{font-size:.94rem}
.summary{margin-top:10px;padding:9px 11px;font-size:.92rem;line-height:1.5}
.lesson-nav{margin-top:14px;gap:9px}
.lesson-nav button{min-height:56px;padding:9px 12px;font-size:1rem}
.lesson-nav button small{margin-top:2px}
.tabs{margin:12px 0;gap:5px}
.tabs .stage-link{padding:7px 10px;font-size:.85rem}
.layout.graph-hidden>.lesson{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:16px;row-gap:5px}
.layout.graph-hidden>.lesson>*{grid-column:1 / -1;min-width:0}
.layout.graph-hidden>.lesson #shape{grid-column:1;grid-row:3;width:100%;height:170px;align-self:start}
.layout.graph-hidden>.lesson #defs{grid-column:2;grid-row:3;align-self:center;font-size:.95rem}
@media(max-width:700px){main{padding:0 11px}.layout>.lesson{padding:10px}.layout>.lesson .shape{height:165px}.layout.graph-hidden>.lesson{display:block}.layout.graph-hidden>.lesson #defs{margin:4px 0}}

/* 変数の定義を数式の右に置き、縦方向の改行を削減 */
.layout>.lesson .equation-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(135px,43%);gap:10px;align-items:center;margin:5px 0;min-width:0}
.layout>.lesson .equation-details .formula{min-width:0;margin:0;overflow-wrap:anywhere;text-align:left}
.layout>.lesson .equation-details #defs{min-width:0;max-width:100%;border-left:2px solid #c4deec;padding:3px 0 3px 9px;font-size:.82rem;line-height:1.55}
.layout.graph-hidden>.lesson .equation-details{grid-column:1/-1;grid-row:auto}
.layout.graph-hidden>.lesson .equation-details #defs{grid-column:auto;grid-row:auto;align-self:center}
@media(max-width:700px){.layout>.lesson .equation-details{grid-template-columns:minmax(0,1fr) minmax(110px,43%);gap:7px}.layout>.lesson .equation-details #defs{padding-left:7px;font-size:.76rem}}


/* 累乗演算ページ：図の余白を縮小し、数式を数式用セリフ書体に */
body[data-kind="m"] .layout>.lesson .shape,body[data-kind="d"] .layout>.lesson .shape{height:112px;margin:0 auto 2px}
body[data-kind="m"] .layout>.lesson #formula,body[data-kind="d"] .layout>.lesson #formula,
body[data-kind="m"] .layout>.lesson #result,body[data-kind="d"] .layout>.lesson #result,
.layout>.lesson .math,.layout>.lesson #defs b{font-family:"Cambria Math","STIX Two Math","Latin Modern Math","Times New Roman","Liberation Serif",serif;font-weight:400}
body[data-kind="m"] .layout>.lesson #formula,body[data-kind="d"] .layout>.lesson #formula{font-size:1.16rem}
body[data-kind="m"] .layout>.lesson #intro,body[data-kind="d"] .layout>.lesson #intro{margin:4px 0 5px}
.layout.graph-hidden body[data-kind="d"] .shape{height:112px}

/* 主図の大きな式と変数説明を同じ行に置く */
body:is([data-kind="m"],[data-kind="d"]) .layout>.lesson .diagram-details{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(125px,.9fr);gap:8px;align-items:center;margin:3px 0 5px;min-width:0}
body:is([data-kind="m"],[data-kind="d"]) .layout>.lesson .diagram-details .shape{grid-column:1;width:100%;height:auto;min-height:0;margin:0;align-self:center}
body:is([data-kind="m"],[data-kind="d"]) .layout>.lesson .diagram-details #defs{grid-column:2;border-left:2px solid #b4d7e9;padding:4px 0 4px 9px;font-size:.85rem;line-height:1.65;min-width:0}
.layout.graph-hidden>.lesson .diagram-details{grid-column:1/-1;grid-row:auto}
@media(max-width:700px){body:is([data-kind="m"],[data-kind="d"]) .layout>.lesson .diagram-details{grid-template-columns:minmax(0,1.2fr) minmax(112px,.85fr);gap:5px}body:is([data-kind="m"],[data-kind="d"]) .layout>.lesson .diagram-details #defs{font-size:.76rem;padding-left:6px}}

/* 約分の式変形を等号で一続きにし、縦方向に折り返さない */
body[data-kind="d"] .layout>.lesson #formula{max-width:100%;overflow-x:auto;overflow-y:hidden;white-space:nowrap;overflow-wrap:normal;font-size:1.08rem;scrollbar-width:thin}
body[data-kind="d"] .layout>.lesson #formula .equality-chain{display:inline-block;white-space:nowrap;min-width:max-content;padding:3px 0}
body[data-kind="d"] .layout>.lesson #formula .fraction{white-space:nowrap}

/* MathJax: SVGでなくブラウザのフォントで組版する数式 */
body[data-kind="d"] .layout>.lesson #formula{font-family:inherit;line-height:1.5}
body[data-kind="d"] .layout>.lesson #formula mjx-container{max-width:none;white-space:nowrap;font-size:115%!important}
body[data-kind="d"] .layout>.lesson #formula mjx-container[display="true"]{margin:0}

/* ⑤：主図を含む数式をMathJaxで統一 */
body[data-kind="d"] #shape[hidden]{display:none}
body[data-kind="d"] #mathDiagram{text-align:center;min-width:0}
body[data-kind="d"] #mathDiagram[hidden]{display:none}
body[data-kind="d"] #mathDiagram .math-heading{font-size:1rem;font-weight:700;line-height:1.4;margin-bottom:8px}
body[data-kind="d"] #mathDiagram .math-hero{font-size:1.65rem;color:#177eaf;white-space:nowrap}
body[data-kind="d"] #mathDiagram .math-prompt{font-size:1rem;font-weight:700;line-height:1.4;margin-top:8px}
body[data-kind="d"] #note .derivation-equation,body[data-kind="d"] #result{overflow-x:auto;white-space:nowrap;overflow-wrap:normal;text-align:left}
body[data-kind="d"] #mathDiagram mjx-container,body[data-kind="d"] #note mjx-container{font-weight:normal}

/* ⑤: hide the obsolete SVG panel when MathJax replaces it */
body[data-kind="d"] .diagram-details svg#shape[hidden]{display:none!important}
body[data-kind="d"] .diagram-details:has(#mathDiagram:not([hidden])){grid-template-columns:minmax(0,1.3fr) minmax(125px,.9fr)}
body[data-kind="d"] #mathDiagram .math-prompt{font-size:.95rem}

/* 累乗5段階：章内の移動ボタンを教材選択ボタンと同じ行に統合 */
.tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.tabs .step-back,.tabs .step-next{display:inline-flex;align-items:center;justify-content:center;border-radius:9px;padding:7px 11px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;min-height:35px;line-height:1.35;box-shadow:0 2px 4px #17314c22}
.tabs .step-back{background:linear-gradient(#f9fcff,#dbe9f4);color:#30536b;border:1px solid #9fb9cd}
.tabs .step-next{background:linear-gradient(#4cadd4,#177eaf);color:#fff;border:1px solid #176b94}
.tabs .step-back[hidden],.tabs .step-next[hidden]{display:none}
.tabs .step-back small,.tabs .step-next small{display:none}
.tabs .step-back:hover,.tabs .step-next:hover{filter:brightness(1.05)}
.tabs .step-back:active,.tabs .step-next:active{transform:translateY(1px)}
.tabs .step-back:focus-visible,.tabs .step-next:focus-visible{outline:3px solid #dd8b28;outline-offset:3px}

/* ナビ：左は前後移動を固定のペア、右は①〜⑤（改行しても順序維持） */
.tabs{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:8px 22px}
.tabs .stage-actions{display:flex;flex:none;align-items:center;gap:6px}
.tabs .stage-choices{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.tabs .stage-actions .step-back,.tabs .stage-actions .step-next{min-width:70px}
.tabs .stage-actions button[hidden]{display:inline-flex;visibility:hidden;pointer-events:none}
@media(max-width:700px){.tabs{gap:9px 18px}}

/* ①〜⑤：教材の上端にブラウザ風タブを配置 */
.lesson-tabs{display:flex;align-items:flex-end;gap:4px;overflow-x:auto;white-space:nowrap;padding:0 6px;margin:12px 0 -1px;scrollbar-width:thin}
.lesson-tabs .stage-link{display:inline-block;flex:0 0 auto;border:1px solid #b7d0df;border-bottom:1px solid #b7d0df;border-radius:10px 10px 0 0;padding:10px 14px 9px;background:linear-gradient(#f8fbfe,#dceaf3);color:#285d7d;text-decoration:none;font-size:.86rem;font-weight:600;box-shadow:inset 0 1px rgba(255,255,255,.8)}
.lesson-tabs .stage-link[aria-current="page"]{background:#fff;color:#176489;border-color:#b7d0df;border-bottom:1px solid #fff;font-weight:800;position:relative;z-index:1}
.lesson-tabs .stage-link:hover:not([aria-current="page"]){background:#eaf5fb}
.lesson-tabs .stage-link:focus-visible{outline:3px solid #dd8b28;outline-offset:-3px}
.lesson-tabs+.card{border-top-left-radius:0}
@media(max-width:700px){.lesson-tabs .stage-link{padding:9px 11px;font-size:.8rem}}
/* 下部は戻る・次へだけ */
.tabs{justify-content:flex-start;gap:0}
.tabs .stage-actions{gap:6px}

/* ④：SVGで描いた旧数式をMathJax表示に置き換える */
body[data-kind="m"] #shape[hidden]{display:none!important}
body[data-kind="m"] #mathDiagram[hidden]{display:none!important}
body[data-kind="m"] #mathDiagram{text-align:center;min-width:0}
body[data-kind="m"] #mathDiagram .math-heading{font-size:1rem;font-weight:700;line-height:1.4;margin-bottom:7px}
body[data-kind="m"] #mathDiagram .math-hero{font-size:1.65rem;color:#177eaf;white-space:nowrap}
body[data-kind="m"] #mathDiagram .math-prompt{font-size:1rem;font-weight:700;margin-top:7px}

/* ⑤：0乗の結論を独立表示し、* の注釈を本文より小さく */
body[data-kind="d"] #note .zero-conclusion{font-size:1.23rem;font-weight:600;text-align:center;padding:7px 0 4px;white-space:nowrap;overflow-x:auto}
body[data-kind="d"] #note .zero-footnote{font-size:.76rem;line-height:1.5;color:#536b78;margin-top:3px}

body[data-kind="d"] #note span.zero-footnote{display:block;font-size:.76rem;line-height:1.5;color:#536b78;margin-top:5px}

/* グラフ表示切替を廃止：右列はグラフと操作領域を全幅で使う */
.layout>.graph-side{display:block;min-width:0;position:sticky;top:12px;max-height:calc(100dvh - 24px)}
.layout>.graph-side>.graph-content{width:100%;min-width:0}
@media(max-width:700px){.layout>.graph-side{position:static;max-height:none}}

/* ①〜⑤：学習順序の注記をタブと同じ高さに置く */
.lesson-tabbar{display:flex;align-items:flex-end;gap:10px;min-width:0;margin:12px 0 -1px}
.lesson-tabbar .lesson-tabs{flex:1 1 auto;min-width:0;margin:0}
.lesson-tabbar .lesson-tab-note{flex:0 0 auto;margin:0 0 9px;max-width:none;white-space:nowrap;color:#637a89;font-size:.72rem;line-height:1.35;text-align:right}
.lesson-tabbar+.card{border-top-left-radius:0}
@media(max-width:850px){.lesson-tabbar{flex-wrap:wrap;gap:3px}.lesson-tabbar .lesson-tabs{flex-basis:100%}.lesson-tabbar .lesson-tab-note{order:-1;max-width:none;width:100%;margin:0 0 2px;text-align:right;font-size:.7rem}}

/* 教材の現在地：階層別リンク */
.crumb{font-size:.86rem;color:#536b78;margin:0 0 12px;line-height:1.6}.crumb a{color:#176489;text-decoration:underline;text-underline-offset:2px}.crumb a:hover{color:#0f87b7}.lesson-return{margin:22px 0 8px}.lesson-return a{color:#176489}