:root{--blue:#17479b;--deep:#0b2d68;--ink:#203650;--red:#e84d48;--yellow:#ffdb50;--paper:#f4f8ff;--line:#cbdaf1;--sans:Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans Black",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.8}button{font:inherit}button:not(:disabled){cursor:pointer}img{max-width:100%}code,pre{font-family:Consolas,"Courier New",monospace}code{overflow-wrap:anywhere}:focus-visible{outline:3px solid var(--red);outline-offset:3px}.skip-link{position:absolute;left:12px;top:-100px;z-index:50;padding:9px 14px;background:#fff;color:var(--deep)}.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:2px solid var(--blue);backdrop-filter:blur(12px)}.header-inner{max-width:1280px;min-height:72px;margin:auto;padding:10px 24px;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{color:var(--blue);font-size:1.12rem;font-weight:950;letter-spacing:.02em;line-height:1.2}.brand span{display:block;color:#536b94;font-size:.65rem;letter-spacing:.15em}.site-header nav{display:flex;gap:4px;flex-wrap:wrap}.site-header nav a{padding:8px 12px;border-radius:9px;color:var(--deep);font-size:.83rem;font-weight:900;text-decoration:none}.site-header nav a:hover{background:#e7efff}
.hero{overflow:hidden;background:linear-gradient(115deg,#e3f0ff 0%,#fcfdff 55%,#fff2b8 100%);border-bottom:2px solid var(--line)}.hero-inner{max-width:1280px;margin:auto;padding:58px 24px 47px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:20px}.hero-copy{position:relative;z-index:1}.eyebrow,.section-index{display:inline-block;color:var(--red);font-size:.78rem;font-weight:950;letter-spacing:.12em}.eyebrow{padding:6px 10px;background:var(--blue);color:#fff;border-radius:4px}.hero h1{margin:20px 0 18px;color:var(--deep);font-size:clamp(3rem,6vw,5.4rem);line-height:1.26;letter-spacing:-.06em;font-weight:950}.hero h1 em{color:var(--red);font-style:normal;white-space:nowrap}.hero-lead{max-width:560px;margin:0;font-size:clamp(1.08rem,1.9vw,1.35rem);font-weight:800}.primary-link{display:inline-flex;gap:30px;align-items:center;margin-top:27px;padding:11px 20px;background:var(--blue);border:2px solid var(--blue);border-radius:12px;box-shadow:5px 5px 0 var(--yellow);color:#fff;font-weight:950;text-decoration:none}.primary-link:hover{transform:translateY(-2px)}.hero-meta{color:#506889;font-size:.82rem;font-weight:800;margin:21px 0 0}.hero-art{margin:0;align-self:end;text-align:center}.hero-art img{display:block;width:100%;height:auto;max-height:550px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(25,65,131,.12))}.hero-art figcaption{display:inline-block;margin-top:-12px;padding:5px 14px;background:#fff;border:2px solid var(--blue);border-radius:99px;color:var(--deep);font-size:.79rem;font-weight:900}
.page-shell{max-width:1280px;margin:auto;padding:60px 24px 95px;display:grid;grid-template-columns:235px minmax(0,1fr);gap:65px;align-items:start}.lesson-map{position:sticky;top:98px;padding:21px 15px 20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:5px 5px 0 #e6effd}.map-kicker{margin:0 0 10px;color:var(--red);font-size:.78rem;font-weight:950;letter-spacing:.08em}.lesson-map ol{margin:0;padding:0;list-style:none;counter-reset:lesson}.lesson-map li{counter-increment:lesson;border-bottom:1px solid #e5edfa}.lesson-map li a{display:flex;align-items:baseline;gap:8px;padding:10px 2px;color:var(--deep);font-size:.84rem;font-weight:850;text-decoration:none}.lesson-map li a:before{content:counter(lesson,decimal-leading-zero);color:var(--red);font-size:.7rem;font-weight:950}.lesson-map a:hover{text-decoration:underline}.map-note{margin:17px 0 0;color:#526c8a;font-size:.72rem;line-height:1.65}.lesson-content{min-width:0}.intro-card,.lesson-section{scroll-margin-top:100px}.intro-card{padding:28px 32px;background:#fff;border:2px solid var(--blue);border-radius:20px;box-shadow:8px 8px 0 #dbe9ff}.intro-card h2{margin:4px 0 16px;color:var(--deep);font-size:clamp(1.4rem,2.7vw,1.9rem);line-height:1.4;font-weight:950}.goal-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.goal-list li{display:flex;align-items:baseline;gap:11px;font-weight:700}.goal-list span{flex:none;color:var(--red);font-size:.77rem;font-weight:950}.goal-list code{padding:.1em .35em;background:#edf4ff;border-radius:4px;color:var(--deep)}
.lesson-section{padding-top:86px}.section-heading{margin-bottom:26px}.section-heading h2{margin:5px 0 10px;color:var(--deep);font-size:clamp(2rem,3.8vw,3rem);font-weight:950;letter-spacing:-.04em;line-height:1.35}.section-heading p{max-width:780px;margin:0;font-weight:700}.talk{display:grid;gap:13px;margin:28px 0}.talk.compact{margin:25px 0}.bubble{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:start;gap:13px;max-width:740px}.bubble>img{width:68px;height:68px;object-fit:contain;border:3px solid var(--blue);border-radius:50%;background:#fff;object-position:center top}.bubble.student-a>img{border-color:#ec8178;background:#fff0e9}.bubble.student-b>img{border-color:#81a8e7;background:#e9f3ff}.bubble>div{padding:13px 19px;background:#fff;border:2px solid var(--line);border-radius:8px 18px 18px 18px;box-shadow:4px 4px 0 #e7effc}.bubble.student-a>div{border-color:#f5c5bf}.bubble.student-b>div{border-color:#bdd5f4}.bubble strong{display:block;color:var(--blue);font-size:.82rem;font-weight:950}.bubble p{margin:2px 0 0}.bubble code{padding:.08em .2em;color:var(--deep);background:#edf4ff;border-radius:4px}
.concept-figure{margin:36px 0 0;padding:25px 30px 19px;background:#fff;border:2px solid var(--blue);border-radius:22px;box-shadow:8px 8px 0 #dbe9ff}.figure-topline{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}.figure-topline span{color:var(--red);font-size:.73rem;font-weight:950}.figure-topline strong{color:var(--deep);font-size:1.22rem;font-weight:950}.variable-flow{display:flex;align-items:center;justify-content:center;gap:20px;margin:25px auto 22px;max-width:650px}.code-label,.value-box{min-width:0;flex:1;text-align:center;border:3px solid var(--blue);border-radius:15px;padding:14px 12px;background:#f2f7ff}.code-label small,.value-box small{display:block;margin-bottom:2px;color:#557199;font-size:.74rem;font-weight:900}.code-label code{color:var(--deep);font-size:clamp(1rem,2.2vw,1.6rem);font-weight:950}.flow-arrow{color:var(--red);font-size:2.8rem;font-weight:950;line-height:1}.value-box{background:#fff5cb;border-color:#ddb43e}.value-box strong{display:block;color:var(--deep);font-family:Consolas,monospace;font-size:2.1rem;line-height:1.15}.apple-line{display:block;color:var(--red);font-size:1rem;letter-spacing:.15em}.code-block{max-width:100%;margin:0;padding:17px 20px;overflow-x:auto;border-radius:12px;background:#102c61;color:#f8fbff;font-size:clamp(.88rem,1.6vw,1rem);line-height:1.7;tab-size:4}.code-block code{white-space:pre}.code-block .line{display:block}.code-block i{display:inline-block;width:23px;margin-right:12px;color:#9bb6e5;font-style:normal;text-align:right}.figure-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:18px;flex-wrap:wrap}.figure-controls>span{font-weight:900}.figure-controls>div{display:flex;gap:8px}.value-choice{min-width:65px;padding:6px 12px;background:#fff;border:2px solid var(--blue);border-radius:9px;color:var(--deep);font-weight:900}.value-choice.is-active,.value-choice:hover{background:var(--yellow)}.figure-feedback{margin:13px 0 0;padding:9px 12px;background:#edf4ff;border-left:4px solid var(--blue);font-weight:750}.concept-figure figcaption{margin-top:21px;padding-top:13px;border-top:1px solid var(--line);color:#3b5679;font-size:.84rem;line-height:1.65}.note{margin-top:27px;padding:18px 23px;background:#fff6cf;border-left:6px solid #e2ac1f;border-radius:0 12px 12px 0}.note strong{color:var(--deep);font-weight:950}.note p{margin:4px 0 0}.note code,.small-print code{color:var(--deep);font-weight:800}
.type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.type-card{min-width:0;padding:18px;background:#fff;border:2px solid var(--line);border-radius:17px;box-shadow:4px 4px 0 #e6eefc}.type-icon{display:grid;place-items:center;width:65px;height:65px;border-radius:15px;background:#dbecff;border:2px solid var(--blue);color:var(--blue);font-family:Consolas,monospace;font-size:1.8rem;font-weight:950}.type-icon.decimal{background:#fff3c3;border-color:#d1a218;font-size:1.42rem}.type-icon.word{background:#ffe5e0;border-color:#db736b;font-size:1.42rem}.type-card h3{margin:12px 0 8px;color:var(--deep);font-size:1.25rem;line-height:1.45;font-weight:950}.type-card h3 small{color:#657995;font-size:.8rem}.type-card pre{margin:0;padding:10px 8px;overflow-x:auto;border-radius:8px;background:#edf4ff;color:var(--deep);font-size:.8rem;font-weight:850}.type-card p{margin:11px 0 0;font-size:.84rem}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:19px}.comparison>div{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:15px 20px;background:#fff;border:1px solid var(--line);border-radius:13px}.comparison span{grid-column:1/-1;color:#536e92;font-size:.78rem;font-weight:900}.comparison code{color:var(--deep);font-size:1.1rem;font-weight:900}.comparison strong{color:var(--red);font-size:1.2rem}.small-print{margin:17px 0 0;color:#4c6384;font-size:.87rem}
.example-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:18px;align-items:stretch}.example-layout>div:first-child{min-width:0}.output{display:flex;gap:18px;align-items:center;margin-top:12px;padding:12px 18px;border:2px solid #b6d1f2;border-radius:10px;background:#edf5ff}.output span{color:#516b8d;font-size:.8rem;font-weight:950}.output code{color:var(--deep);font-size:1.2rem;font-weight:950}.example-explain{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;background:#fff6cc;border:2px solid #ebcd64;border-radius:15px;text-align:left}.example-explain img{height:100px;object-fit:contain}.example-explain p{margin:8px 0 0;font-size:.83rem;line-height:1.65}.example-explain strong{color:var(--deep)}.side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:13px}.side-by-side>div{display:flex;flex-direction:column;gap:7px;padding:17px;background:#fff;border:2px solid var(--line);border-radius:11px}.side-by-side code{color:var(--deep);font-weight:900}.side-by-side span{color:var(--red);font-weight:950}
.update-card{padding:22px;background:#fff;border:2px solid var(--line);border-radius:18px}.update-steps{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:17px 0}.update-steps>div{flex:1;display:flex;gap:7px;align-items:start}.update-steps b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--deep);font-size:.83rem}.update-steps p{margin:0;font-size:.83rem;font-weight:800}.update-steps>span{color:var(--red);font-weight:950}.update-card .output{margin-top:0}
.activity-section{padding-bottom:15px}.quiz-card{margin:20px 0;padding:23px;background:#fff;border:2px solid var(--blue);border-radius:18px}.quiz-top{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.quiz-top span{padding:3px 10px;background:var(--yellow);border-radius:5px;color:var(--deep);font-size:.76rem;font-weight:950}.quiz-top strong{color:var(--deep);font-size:1.06rem;font-weight:950}.quiz-card>p:first-of-type{margin:13px 0}.answer-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.answer-buttons button{padding:8px 14px;background:#fff;border:2px solid var(--blue);border-radius:9px;color:var(--deep);font-weight:900}.answer-buttons button:hover,.answer-buttons button[aria-pressed=true]{background:var(--yellow)}.quiz-feedback{min-height:59px;margin:14px 0 0;padding:10px 14px;background:#edf4ff;border-left:5px solid var(--blue);font-weight:800}.quiz-feedback.is-correct{background:#e7f7eb;border-color:#28945b}.quiz-feedback.is-wrong{background:#fff0e9;border-color:var(--red)}.challenge{margin-top:24px;padding:18px 22px;background:#fff9dd;border:2px solid #e4c75f;border-radius:14px}.challenge summary{color:var(--deep);font-weight:950;cursor:pointer}.challenge p{margin:13px 0}.closing{display:flex;gap:18px;align-items:center;margin-top:65px;padding:19px 25px;background:#e1edff;border-radius:17px;border-left:7px solid var(--blue)}.closing img{flex:none;width:86px;height:86px;object-fit:contain}.closing span{display:block;color:var(--blue);font-size:.78rem;font-weight:950}.closing p{margin:4px 0 0;font-weight:850}
.term{display:inline;padding:0;border:0;border-bottom:2px dotted var(--blue);background:transparent;color:var(--blue);font-weight:900}.term-mark{display:inline-grid;place-items:center;width:17px;height:17px;margin-left:2px;border-radius:50%;background:var(--blue);color:#fff;font-family:Arial,sans-serif;font-size:.7rem}dialog{max-width:min(90vw,450px);padding:0;border:3px solid var(--blue);border-radius:18px;box-shadow:10px 10px 0 #bdd1ef;color:var(--ink)}dialog::backdrop{background:rgba(5,22,55,.45)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 18px;background:#e5f0ff}.dialog-header strong{color:var(--deep);font-size:1.2rem}.dialog-header button{width:37px;height:37px;border:2px solid var(--blue);border-radius:50%;background:#fff;color:var(--deep);font-size:1.25rem;font-weight:900}dialog p{margin:0;padding:18px 20px 23px}.site-footer{display:flex;flex-direction:column;align-items:center;gap:1px;padding:30px 20px;background:var(--deep);color:#fff;text-align:center;font-size:.82rem}.site-footer strong{font-size:1.35rem;letter-spacing:.12em}.site-footer small{margin-top:5px}
@media(max-width:1000px){.page-shell{gap:35px;grid-template-columns:200px minmax(0,1fr)}.hero-inner{padding-top:42px}.hero h1{font-size:clamp(2.8rem,5.6vw,4.7rem)}}
@media(max-width:760px){.site-header{position:static}.header-inner{align-items:flex-start;flex-direction:column;gap:8px}.site-header nav{margin-left:-9px}.hero-inner{grid-template-columns:1fr;gap:0;padding:40px 19px}.hero-art{max-width:620px;justify-self:center}.hero-art img{max-height:420px}.page-shell{display:block;padding:35px 18px 75px}.lesson-map{position:static;margin-bottom:35px}.lesson-map ol{display:grid;grid-template-columns:1fr 1fr;column-gap:13px}.lesson-map li a{padding:7px 2px}.lesson-section{padding-top:68px;scroll-margin-top:15px}.intro-card{scroll-margin-top:15px}.type-grid{grid-template-columns:1fr 1fr}.example-layout{grid-template-columns:1fr}.example-explain{flex-direction:row;gap:12px;justify-content:flex-start}.example-explain img{width:80px;height:80px;flex:none}}
@media(max-width:520px){.hero h1{font-size:clamp(2.65rem,10vw,3.6rem)}.hero-art figcaption{margin-top:0;font-size:.7rem}.section-heading h2{font-size:2rem}.intro-card{padding:20px}.bubble{grid-template-columns:52px minmax(0,1fr);gap:9px}.bubble>img{width:52px;height:52px}.bubble>div{padding:10px 13px}.concept-figure{padding:17px}.variable-flow{gap:8px}.code-label,.value-box{padding:10px 5px}.code-label code{font-size:.92rem}.flow-arrow{font-size:1.8rem}.type-grid,.comparison,.side-by-side{grid-template-columns:1fr}.type-card{display:grid;grid-template-columns:65px 1fr;gap:0 13px}.type-card h3{align-self:center;margin:0}.type-card pre,.type-card p{grid-column:1/-1}.type-card pre{margin-top:10px}.update-steps{align-items:start;flex-direction:column;padding-left:3px}.update-steps>span{transform:rotate(90deg);margin-left:7px}.answer-buttons{flex-direction:column}.answer-buttons button{text-align:left}.closing{align-items:start;padding:16px}.closing img{width:60px;height:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.site-header,.lesson-map,.figure-controls,.answer-buttons,.primary-link{display:none}.hero-inner,.page-shell{display:block;padding:15px}.hero-art{max-width:400px}.lesson-section{padding-top:30px;break-inside:avoid}.concept-figure,.quiz-card{box-shadow:none}.site-footer{background:#fff;color:#111}}
.bubble>img{object-fit:cover}
.intro-diagram{display:block;margin:20px auto;overflow:hidden;border-radius:14px;background:linear-gradient(125deg,#f7fbff,#fffdf2)}
.intro-diagram img{display:block;width:100%;height:auto;margin:0 auto}