:root { --base:#f3f5f4; --card:#fff; --text:#343a40; --main:#01B202; --soft:#dafbe1; --border:1px solid rgba(36,41,47,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:#3f464d; background:var(--base); font-family:"Noto Sans JP",sans-serif; font-size:16px; line-height:1.7; }
a { color:inherit; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
:focus-visible { outline:3px solid var(--main); outline-offset:3px; }
.shell { width:min(880px,calc(100% - 48px)); margin-inline:auto; }
.learn-header { position:sticky; top:0; z-index:30; background:var(--card); border-bottom:var(--border); }
.learn-nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.learn-brand { min-height:44px; display:inline-flex; align-items:center; gap:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
.learn-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:var(--main); color:#fff; }
.level-nav { display:flex; gap:8px; }
.level-nav a { min-height:44px; display:inline-flex; align-items:center; padding:8px 12px; border:var(--border); border-radius:999px; font-size:14px; font-weight:700; text-decoration:none; }
.level-nav a[aria-current="page"] { border-color:var(--main); background:var(--soft); }
.learn-hero { padding-block:64px 40px; }
.level-label { margin:0 0 8px; color:var(--main); font-size:14px; font-weight:700; }
h1 { max-width:680px; margin:0; font-size:clamp(36px,6vw,56px); line-height:1.3; letter-spacing:-.03em; }
.lead { max-width:640px; margin:20px 0 0; }
.progress-card { margin-top:32px; padding:20px 24px; border:2px solid var(--main); border-radius:16px; background:var(--card); }
.progress-copy { display:flex; justify-content:space-between; gap:16px; margin-bottom:8px; font-weight:700; }
.progress-track { height:12px; overflow:hidden; border-radius:999px; background:var(--soft); }
.progress-bar { width:0; height:100%; background:var(--main); transition:width .3s ease; }
.steps { padding-bottom:64px; }
.step-card { display:grid; grid-template-columns:64px 1fr; gap:24px; margin-top:16px; padding:24px; border:var(--border); border-radius:16px; background:var(--card); }
.step-number { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--main); font-weight:700; }
.step-card h2 { margin:0 0 8px; font-size:24px; line-height:1.4; }
.step-card p { margin:0 0 12px; }
.command { display:flex; align-items:center; min-height:52px; padding:12px 16px; overflow-x:auto; border-radius:8px; background:var(--text); color:#fff; white-space:nowrap; }
.try-this { margin-top:12px; padding:12px 16px; border-left:4px solid var(--main); background:var(--soft); }
.step-check { min-height:44px; display:inline-flex; align-items:center; gap:10px; margin-top:16px; font-weight:700; cursor:pointer; }
.step-check input { width:22px; height:22px; accent-color:var(--main); }
.next-level { margin-bottom:64px; padding:32px; border-radius:16px; background:var(--main); color:#fff; text-align:center; }
.next-level h2 { margin:0 0 8px; font-size:28px; }
.next-level p { margin:0 0 20px; }
.next-level a { min-height:48px; display:inline-flex; align-items:center; padding:8px 20px; border-radius:999px; background:#fff; color:var(--main); font-weight:700; text-decoration:none; }
.learn-footer { padding-block:24px; border-top:var(--border); background:var(--card); font-size:14px; }
@media(max-width:700px){
  .shell{width:min(100% - 32px,880px)} .learn-nav{display:block;padding-block:12px}.level-nav{margin-top:8px;overflow-x:auto}.learn-hero{padding-block:40px 24px}h1{font-size:36px}.step-card{grid-template-columns:1fr;padding:20px}.step-number{width:48px;height:48px}.next-level{padding:24px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}