:root{font-family:system-ui,-apple-system,'Noto Sans JP',sans-serif;color:#17314c;background:#f3f8fc}*{box-sizing:border-box}body{margin:0}.shell{max-width:1100px;margin:auto;padding:24px 20px 55px}.top{background:#0e638e;color:white;padding:17px 24px}.top a{color:white}.brand{font-weight:700;text-decoration:none}.crumb{font-size:.86rem;opacity:.85;margin-top:5px}h1{font-size:clamp(1.65rem,4vw,2.3rem);margin:12px 0}h2{font-size:1.2rem;margin:0 0 12px}p{line-height:1.7}.lead{color:#46596c}.lesson{background:white;border:1px solid #d9e5ed;border-radius:17px;padding:clamp(16px,3vw,28px);margin-top:22px;box-shadow:0 4px 18px #12476b0c}.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}.definition{background:#eff7fd;padding:12px 16px;border-radius:10px;line-height:1.85}.formula{font-size:clamp(1.2rem,2.25vw,1.6rem);font-weight:600;letter-spacing:.01em;white-space:normal;margin:15px 0 4px}.example{font-size:clamp(1.07rem,1.8vw,1.3rem);font-weight:600;margin-top:15px}.aside{font-size:.91rem;color:#506278;margin:5px 0 16px}.math{font-family:"Times New Roman","Liberation Serif",serif;font-style:italic;font-weight:400;font-size:1.12em}.graph-wrap{width:100%}.graph{display:block;width:100%;height:auto;border:1px solid #dfebf1;border-radius:9px;background:#fff}.toggle{width:100%;margin-top:4px;background:#e7f2f8;border:1px solid #c2d9e9;color:#195a7d;border-radius:6px;padding:5px 10px;font-size:.83rem;cursor:pointer}.graph-placeholder{background:#f7fbfd;text-align:center;padding:30px;color:#667b8b;border-radius:8px}.controls{margin-top:22px;padding:17px 18px 12px;background:#f0f7fc;border-radius:12px}.control-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.control-head strong{font-size:1.2rem}.hint{font-size:.92rem;margin:7px 0 10px}input[type=range]{width:100%;accent-color:#d92a3a;cursor:pointer;height:23px}.bounds{display:flex;justify-content:space-between;color:#617182;font-size:.82rem}.square-area{display:flex;align-items:center;justify-content:center;min-height:210px}.square-svg{width:min(100%,320px);height:auto}.lesson-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.tile{background:white;border:1px solid #d6e6ef;border-radius:14px;padding:20px;color:inherit;text-decoration:none}.tile:hover{border-color:#1b83ae}.return{display:inline-block;margin-top:26px;color:#146b99}.muted{font-size:.85rem;color:#64768b}.topic{font-size:.8rem;color:#116c97;font-weight:700;letter-spacing:.05em}@media(max-width:700px){.lesson-grid{grid-template-columns:1fr}.shell{padding:19px 14px 36px}.lesson-links{grid-template-columns:1fr}.top{padding:14px 17px}}
/* 青〜シアンの配色 */
.top{background:linear-gradient(135deg,#1565c0,#00bcd4);box-shadow:0 3px 9px rgba(13,71,161,.16)}
.tile,.lesson{box-shadow:0 8px 24px rgba(13,71,161,.10);transition:transform .16s ease,box-shadow .16s ease}
a.tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(13,71,161,.17)}

/* 2026-10-19: unified browser-style tabs and compact back/next navigation */
.modern-tabs{display:flex;align-items:flex-end;gap:4px;white-space:nowrap;overflow-x:auto;margin:22px 0 -1px;padding:0 5px;scrollbar-width:thin}
.modern-tabs a{flex:0 0 auto;display:block;padding:10px 14px 9px;border:1px solid #b7d0df;border-radius:10px 10px 0 0;background:linear-gradient(#f8fbfe,#dceaf3);color:#285d7d;text-decoration:none;font-size:.86rem;font-weight:600}
.modern-tabs a[aria-current="page"]{background:#fff;color:#176489;border-bottom-color:white;font-weight:800;position:relative;z-index:1}
.modern-tabs a:hover:not([aria-current="page"]){background:#eaf5fb}
.modern-tabs a:focus-visible{outline:3px solid #dd8b28;outline-offset:-3px}
.modern-tabs+.lesson{margin-top:0;border-top-left-radius:0}
.modern-steps{display:flex;align-items:center;gap:7px;margin:18px 0 7px}
.modern-steps a,.modern-steps button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:inherit;font-size:.85rem;font-weight:700;min-height:35px;padding:7px 12px;border:1px solid #9fb9cd;border-radius:9px;color:#30536b;background:linear-gradient(#f9fcff,#dbe9f4);cursor:pointer;box-shadow:0 2px 4px #17314c22}
.modern-steps a:last-child,.modern-steps button#next{background:linear-gradient(#4cadd4,#177eaf);border-color:#176b94;color:white}
.modern-steps button[disabled]{visibility:hidden}
.modern-steps [hidden]{display:none!important}
.modern-steps a:active,.modern-steps button:active{transform:translateY(1px)}
.modern-steps a:focus-visible,.modern-steps button:focus-visible{outline:3px solid #dd8b28;outline-offset:3px}
.modern-lesson .formula,.modern-lesson .example{overflow-x:auto;overflow-y:hidden;overflow-wrap:normal;white-space:nowrap;line-height:1.6;scrollbar-width:thin}
.modern-lesson mjx-container{max-width:none}
.modern-lesson .graph-column{min-width:0;position:sticky;top:12px;align-self:start}
.modern-lesson .graph-column .controls{margin-top:10px}
@media(max-width:700px){.modern-lesson .graph-column{position:static}.modern-tabs a{font-size:.8rem;padding:9px 11px}}

/* 色々な文字を使う：累乗の箱と同じ上下ナビゲーション */
.modern-tabs{margin:14px 0 -1px;gap:4px;padding:0 6px;justify-content:flex-start}
.modern-tabs a{border-radius:10px 10px 0 0;box-shadow:inset 0 1px rgba(255,255,255,.8)}
.modern-tabs a[aria-current="page"]{border-bottom:1px solid #fff}
.modern-tabs+.lesson.modern-lesson{border-color:#b7d0df;border-radius:0 14px 14px 14px}
.modern-lesson>.modern-steps{margin:18px 0 0;justify-content:flex-start;gap:6px}
.modern-lesson>.modern-steps a{min-width:70px;padding:7px 11px;min-height:35px;font-size:.85rem}
.modern-lesson>.modern-steps a:first-child{background:linear-gradient(#f9fcff,#dbe9f4);border-color:#9fb9cd;color:#30536b}
.modern-lesson>.modern-steps a:last-child{background:linear-gradient(#4cadd4,#177eaf);border-color:#176b94;color:white}
@media(max-width:700px){.modern-tabs{margin-top:12px}.modern-lesson>.modern-steps{flex-wrap:wrap}}

/* 色々な文字を使う①〜③：累乗①〜⑤と同じタブ構造を固定 */
nav.letter-stage-tabs{display:flex!important;visibility:visible!important;align-items:flex-end;justify-content:flex-start;gap:4px;overflow-x:auto;white-space:nowrap;padding:0 6px;margin:12px 0 -1px;scrollbar-width:thin;position:relative;z-index:2}
nav.letter-stage-tabs>a{display:inline-block!important;visibility:visible!important;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)}
nav.letter-stage-tabs>a[aria-current="page"]{background:#fff;color:#176489;border-bottom:1px solid #fff;font-weight:800;position:relative;z-index:3}
nav.letter-stage-tabs+.modern-lesson{margin-top:0;border:1px solid #b7d0df;border-radius:0 14px 14px 14px}
@media(max-width:700px){nav.letter-stage-tabs>a{padding:9px 11px;font-size:.8rem}}

/* 現在地の階層リンクと教材一覧リンク */
.crumb a{color:inherit;text-decoration:underline;text-underline-offset:2px}.crumb a:hover{color:#fff;text-decoration-thickness:2px}.lesson-return{margin:22px 0 8px}.lesson-return a{color:#146b99}