/* フリーボーン AI教室 — styled on the freeborn.ai-sns.io design system (tokens, nav, hero, cards, footer) */
:root{
  --bg:#ffffff;--bg-soft:#f5f7fb;--bg-soft2:#eef2f8;--panel:#ffffff;
  --line:#e4e9f2;--line-2:#d7deeb;
  --heading:#0d2a4d;--ink-btn:#0d2a4d;--ink-btn-2:#12386a;--txt:#132238;--ink:#132238;--muted:#5a6b82;--muted-2:#606f85;
  --brand:#1667d6;--brand-soft:#e8f1ff;--accent:#0bb69b;--accent-soft:#e6f8f4;--accent-ink:#077263;
  --ok:#077263;--ok-bg:#e6f8f4;--err:#b42318;--err-bg:#fdecea;--amber-bg:#fff6e0;--amber-ink:#6b4500;
  --shadow:0 8px 30px rgba(16,40,73,.08);--shadow-sm:0 2px 12px rgba(16,40,73,.06);
  --radius:16px;--nav-bg:rgba(255,255,255,.92);
  --hero-bg:radial-gradient(1200px 600px at 80% -10%,#eef4ff 0%,transparent 60%),linear-gradient(180deg,#fbfcfe,#fff);
  --font-jp:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,system-ui,sans-serif;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220;--bg-soft:#101a2c;--bg-soft2:#152039;--panel:#131e33;
  --line:#243250;--line-2:#31415f;
  --heading:#e9f0fb;--ink-btn:#1b4f95;--ink-btn-2:#2a6fd6;--txt:#dde6f4;--ink:#dde6f4;--muted:#a4b5cd;--muted-2:#7f90aa;
  --brand:#5aa2ff;--brand-soft:#16294a;--accent:#2fd3b5;--accent-soft:#0f2f2b;--accent-ink:#2fd3b5;
  --ok:#2fd3b5;--ok-bg:#0f2f2b;--err:#ff8a80;--err-bg:#3a1618;--amber-bg:#33270c;--amber-ink:#ffd27a;
  --shadow:0 10px 34px rgba(0,0,0,.5);--shadow-sm:0 2px 14px rgba(0,0,0,.35);
  --nav-bg:rgba(11,18,32,.9);
  --hero-bg:radial-gradient(1200px 600px at 80% -10%,#15254a 0%,transparent 60%),linear-gradient(180deg,#0d1626,#0b1220);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-jp);color:var(--txt);background:var(--bg);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--brand);color:#fff}
a{color:var(--brand)}a:hover{color:var(--heading)}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* Nav — fixed glass bar, same as freeborn.ai-sns.io */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.02em;color:var(--heading);text-decoration:none;line-height:1.2}
.brand:hover{color:var(--heading)}
.brand .logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#0d2a4d,#1667d6);display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.1rem;flex:none}
.brand small{display:block;font-size:.6rem;letter-spacing:.2em;color:var(--muted-2);font-weight:600}
.nav{display:flex;align-items:center;gap:6px 26px;font-size:.92rem;font-weight:600}
.nav a{color:var(--muted);text-decoration:none;position:relative;transition:.2s}
.nav a:hover{color:var(--heading)}
.nav a.plain::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--brand);transition:.25s}
.nav a.plain:hover::after{width:100%}
.nav form{margin:0}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;font-weight:600}
.linklike:hover{color:var(--heading)}
.theme-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);background:var(--panel);color:var(--heading);cursor:pointer;display:grid;place-items:center;font-size:1rem;flex:none}
.theme-btn:hover{border-color:var(--brand)}
.lang-btn{height:38px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);background:var(--panel);color:var(--heading);display:inline-grid;place-items:center;font-size:.85rem;font-weight:700;text-decoration:none;flex:none;white-space:nowrap}
.lang-btn:hover{border-color:var(--brand);color:var(--heading)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px}
.burger span{width:24px;height:2px;background:var(--heading);transition:.3s}
@media (max-width:860px){
  .burger{display:flex}
  .nav{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:8px 24px 18px}
  .nav.open{display:flex}
  .nav>a,.nav>form{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:12px}
  .nav .theme-btn{margin-top:12px}
  .nav>a.lang-btn{margin-top:12px;padding:0 12px;border:1px solid var(--line-2);align-self:flex-start}
}

/* Buttons — primary = brand blue, default = deep ink, ghost = outlined panel */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border-radius:8px;border:1px solid transparent;font:inherit;font-weight:700;font-size:.92rem;text-decoration:none;cursor:pointer;background:var(--ink-btn);color:#fff;transition:.25s}
.btn:hover{color:#fff;background:var(--ink-btn-2);transform:translateY(-2px)}
.btn.amber{background:var(--brand);color:#fff;box-shadow:0 6px 18px rgba(22,103,214,.25)}
.btn.amber:hover{background:#12386a;color:#fff;box-shadow:0 10px 26px rgba(22,103,214,.32)}
:root[data-theme="dark"] .btn.amber{color:#0b1220}:root[data-theme="dark"] .btn.amber:hover{background:#7fb4ff;color:#0b1220}
.btn.ghost{background:var(--panel);color:var(--heading);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--panel)}
.btn.small{min-height:38px;padding:0 16px;font-size:.86rem}
.btn.danger{background:var(--panel);color:var(--err);border-color:var(--err-bg)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

main{padding:110px 0 80px}
h1{font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.3;margin:0 0 12px;font-weight:800;color:var(--heading);letter-spacing:.01em}
h2{font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.35;margin:48px 0 16px;font-weight:800;color:var(--heading)}
h3{font-size:1.1rem;margin:0 0 8px;color:var(--heading);font-weight:800}
.lead{font-size:1.04rem;color:var(--muted);max-width:760px;margin:0 0 24px}
.eyebrow{margin:0 0 8px;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);font-weight:700;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--brand);display:inline-block}
.muted{color:var(--muted)}.small{font-size:.9rem}.xs{font-size:.78rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-sm);transition:.28s}
article.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card.dark{background:linear-gradient(135deg,#0d2a4d,#12386a);color:#fff;border:0}
:root[data-theme="dark"] .card.dark{background:linear-gradient(135deg,#0f2647,#1b4f95)}
.card.dark h3{color:#fff}.card.dark .muted{color:#c3d3ea}
.card.dark .btn.amber{background:#fff;color:#0d2a4d;box-shadow:none}.card.dark .btn.amber:hover{background:#e8f1ff;color:#0d2a4d}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid.tight{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.between{justify-content:space-between}
.stack>*+*{margin-top:12px}
.tag{display:inline-block;font-size:.74rem;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--brand-soft);color:var(--brand);border:1px solid var(--line-2)}
.tag.amber{background:var(--accent-soft);color:var(--accent-ink)}.tag.ok{background:var(--ok-bg);color:var(--ok)}.tag.gray{background:var(--bg-soft2);color:var(--muted)}.tag.err{background:var(--err-bg);color:var(--err)}
.price{font-size:1.9rem;font-weight:900;line-height:1.2;color:var(--brand)}
.price small{font-size:.85rem;font-weight:600;color:var(--muted)}

/* Hero — light radial wash / dark navy, gradient headline, pills */
.hero{background:var(--hero-bg);padding:150px 0 90px;position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none}
.hero::before{width:480px;height:480px;left:-160px;top:-120px;background:radial-gradient(circle,rgba(11,182,155,.10),transparent 70%)}
.hero::after{width:560px;height:560px;right:-180px;top:-60px;background:radial-gradient(circle,rgba(22,103,214,.12),transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.22;font-weight:900}
.hero h1 .grad{background:linear-gradient(100deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{margin:28px 0 0}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pill{font-size:.82rem;padding:9px 15px;border-radius:8px;border:1px solid var(--line);color:var(--muted);background:var(--panel);box-shadow:var(--shadow-sm)}
.pill b{color:var(--brand)}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow-sm);transition:.25s}
.stat:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.stat b{color:var(--heading);display:block;font-size:1.08rem}
.stat .num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-weight:900;margin-bottom:12px}
.stat p{margin:6px 0 0;color:var(--muted);font-size:.88rem}
.sec{padding:20px 0}

/* Footer — freeborn grid footer */
.site-footer{border-top:1px solid var(--line);padding:56px 0 30px;background:var(--bg-soft);font-size:.9rem;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.site-footer h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;font-weight:800}
.site-footer a{color:var(--muted);display:block;padding:4px 0;text-decoration:none;font-size:.92rem}
.site-footer a:hover{color:var(--brand)}
.foot-legal{margin-top:36px;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.82rem;color:var(--muted-2)}
.foot-legal b{color:var(--heading)}
.foot-bottom{margin-top:20px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted-2);font-size:.82rem;flex-wrap:wrap;gap:12px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}.hero{padding:120px 0 64px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.flash{border-radius:10px;padding:12px 16px;margin:0 0 20px;font-weight:500}
.flash.ok{background:var(--ok-bg);color:var(--ok)}.flash.error{background:var(--err-bg);color:var(--err)}
.demo-bar{background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:600;text-align:center;padding:7px 12px;position:fixed;top:74px;left:0;right:0;z-index:49;border-bottom:1px solid var(--line)}
.has-demo main{padding-top:140px}
form.stack label,.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{font:inherit;font-weight:400;min-height:44px;border:1px solid var(--line-2);border-radius:8px;padding:8px 12px;background:var(--panel);color:var(--ink);width:100%}
textarea{min-height:120px}
fieldset{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:0}
legend{font-weight:700;padding:0 6px}
.choice,form.stack label.choice{display:flex;flex-direction:row;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-top:8px;cursor:pointer;font-weight:400;font-size:15px}
.choice:hover{background:var(--bg-soft)}
.choice input{margin-top:6px;width:18px;height:18px}
.progress{height:10px;background:var(--bg-soft2);border-radius:999px;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--ok);border-radius:999px}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:13px;color:var(--muted);font-weight:700;background:var(--bg-soft)}
.table-box{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.months{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.month h3{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.lessons{list-style:none;margin:10px 0 0;padding:0}
.lessons li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.lessons li:first-child{border-top:0}
.lessons a{text-decoration:none;color:var(--ink);flex:1}
.lessons a:hover{color:var(--brand)}
.dot{width:24px;height:24px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--bg-soft2);color:var(--muted)}
.dot.done{background:var(--ok);color:#fff}.dot.open{background:var(--brand);color:#fff}.dot.review{background:var(--brand-soft);color:var(--brand)}.dot.locked{background:var(--bg-soft);color:var(--muted-2)}
.lesson-layout{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.lesson-main{flex:999 1 600px;min-width:0}
.lesson-side{flex:1 1 280px;min-width:0}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--ink-btn),var(--brand));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.steps label{display:flex;gap:10px;align-items:flex-start;font-weight:400;cursor:pointer;flex:1}
.steps input{margin-top:6px}
.points{margin:0;padding-left:20px}
.notice{background:var(--amber-bg);color:var(--amber-ink);border-radius:12px;padding:14px 18px}
.okbox{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:14px 18px}
.errbox{background:var(--err-bg);color:var(--err);border-radius:12px;padding:14px 18px}
.cert{max-width:860px;margin:0 auto;background:var(--panel);border:10px double var(--heading);padding:56px 48px;text-align:center}
.cert h1{font-size:44px;letter-spacing:.3em;margin-bottom:24px}
.cert .name{font-size:34px;font-weight:900;border-bottom:2px solid var(--ink);display:inline-block;padding:0 24px 6px;margin:16px 0}
.admin-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.admin-nav a{padding:8px 14px;border-radius:8px;background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px;font-weight:500}
.admin-nav a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
details.card summary{cursor:pointer;font-weight:700}
@media print{.site-header,.site-footer,.theme-btn,.lang-btn,.no-print,.demo-bar{display:none!important}body{background:#fff}main{padding:0}:root{--panel:#fff;--txt:#132238;--ink:#132238;--heading:#0d2a4d}}
form.stack label.inline,label.inline{display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-weight:400}
.slot-day{margin:18px 0 6px;font-size:15px;font-weight:700}
.slot-day:first-of-type{margin-top:0}
.material h4{font-size:16px;margin:18px 0 6px;color:var(--heading)}
.material h4:first-of-type{margin-top:4px}
.prose{white-space:pre-line;font-size:15.5px;line-height:1.9}
.ex{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.ex:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.ex-label{font-size:12.5px;font-weight:700;color:var(--muted);margin:8px 0 4px}
.ex-label.bad{color:var(--err)}.ex-label.good{color:var(--ok)}
pre.prompt,pre.answer,pre.code{white-space:pre-wrap;word-break:break-word;margin:0;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.7}
pre.prompt{background:var(--brand-soft);border:1px solid var(--line-2);font-family:inherit}
pre.answer{background:var(--bg-soft);border:1px solid var(--line);font-family:inherit}
pre.code{background:#0F172A;color:#E2E8F0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
.compare{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.worksheet{margin:10px 0 0;padding-left:22px}
.worksheet li{padding:6px 0}
.worksheet .lines{height:64px;border-bottom:1px dashed var(--line-2);background:repeating-linear-gradient(transparent,transparent 31px,var(--line) 32px)}
.print-page{max-width:820px;margin:0 auto;background:var(--panel);padding:32px 36px}
.print-page .card{border:0;padding:0;margin-top:22px}
/* home hero layout */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hv-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:28px;position:relative;overflow:hidden}
.hv-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--accent))}
.hv-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px}
.hv-head b{color:var(--heading);font-size:1.05rem}
.hv-head span{font-size:.74rem;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);padding:4px 10px;border-radius:999px}
.hv-list{display:grid;gap:12px}
.hv-list .stat{display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:14px 16px;box-shadow:none;background:var(--bg-soft)}
.hv-list .stat .num{grid-row:span 2;margin:0}
.hv-list .stat p{margin:0}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}}
main>.hero{margin-top:-110px}.has-demo main>.hero{margin-top:-140px;padding-top:180px}
.site-footer a.brand{display:flex;padding:0}
@media (max-width:600px){.has-demo main{padding-top:165px}.has-demo main>.hero{margin-top:-165px;padding-top:200px}.site-header .wrap{padding:0 20px}}