/* Kazunoha — design tokens */
:root{
  --bg:#F4F5F7; --surface:#FFFFFF; --surface2:#EEF0F3; --ink:#0B0F17; --ink2:#4A5262; --mute:#8A92A1; --line:#E2E5EA;
  --blue:#1E5EFF; --blue-dk:#1446C7; --blue-soft:#E6EDFF;
  --lime:#B8F53A; --lime-ink:#2B3A00;
  --green:#12A150; --green-soft:#E3F6EA;
  --coral:#F0533A; --coral-soft:#FDE9E5;
  --amber:#F5A524; --amber-soft:#FEF3DD;
  --m0:#E7E9EE; --m1:#FBD3CB; --m2:#FFE3A6; --m3:#BFE9CC; --m4:#12A150;
  --shadow:0 1px 2px rgba(11,15,23,.06),0 8px 24px rgba(11,15,23,.06);
  --r:20px; --night:#0B0F17; --night2:#161C28;
  --latin:"Outfit","Avenir Next","Helvetica Neue",sans-serif;
  --ja:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0A0D13; --surface:#131822; --surface2:#1B2130; --ink:#F3F5F8; --ink2:#AEB6C4; --mute:#788194; --line:#252C3B;
  --blue:#4D7DFF; --blue-dk:#2E5EE6; --blue-soft:#17223F;
  --green:#2BC46B; --green-soft:#10291B; --coral:#FF6B52; --coral-soft:#33150F; --amber-soft:#2E220A;
  --m0:#1F2532; --m1:#5A2A22; --m2:#5A4614; --m3:#1F5636; --m4:#2BC46B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0D13; --surface:#131822; --surface2:#1B2130; --ink:#F3F5F8; --ink2:#AEB6C4; --mute:#788194; --line:#252C3B;
  --blue:#4D7DFF; --blue-dk:#2E5EE6; --blue-soft:#17223F;
  --green:#2BC46B; --green-soft:#10291B; --coral:#FF6B52; --coral-soft:#33150F; --amber-soft:#2E220A;
  --m0:#1F2532; --m1:#5A2A22; --m2:#5A4614; --m3:#1F5636; --m4:#2BC46B;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--latin),var(--ja);font-family:"Outfit","Zen Kaku Gothic New","Hiragino Sans",sans-serif;font-size:18px;line-height:1.55;font-weight:500;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}
button{font:inherit;font-weight:700;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
input,textarea{font:inherit;-webkit-user-select:text;user-select:text;color:var(--ink)}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:30px;font-weight:900;line-height:1.25}
h2{font-size:21px;font-weight:900}
h3{font-size:17px;font-weight:700}
.num{font-family:var(--latin);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eyebrow{font-family:var(--latin);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.muted{color:var(--ink2);font-size:16px}
.small{font-size:14px;color:var(--ink2)}

.screen{max-width:880px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 18px 48px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--surface);border-radius:var(--r);padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.center{align-items:center;text-align:center}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px}

/* app bar */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.logo{display:flex;align-items:center;gap:10px}
.logo .mark{width:36px;height:36px;border-radius:11px;background:var(--night);border:1px solid var(--line);display:grid;place-items:center}
.logo .word{font-family:var(--latin);font-weight:800;font-size:20px;letter-spacing:.02em}
.chips{display:flex;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);font-family:var(--latin);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.chip svg{width:18px;height:18px}
.chip.xp{background:var(--night);color:var(--lime)}
.iconbtn{width:44px;height:44px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center}
.iconbtn svg{width:22px;height:22px}

/* session bar */
.sbar{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;min-height:56px}
.prog{display:flex;gap:4px;height:10px}
.prog i{flex:1;border-radius:999px;background:var(--line);transition:background .25s}
.prog i.on{background:var(--green)} .prog i.ng{background:var(--coral)} .prog i.cur{background:var(--blue)}
.stitle{font-size:14px;font-weight:700;color:var(--ink2);white-space:nowrap}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:12px 24px;border-radius:16px;background:var(--ink);color:var(--bg);font-size:19px;font-weight:800;width:100%;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn.blue{background:var(--blue);color:#fff}
.btn.lime{background:var(--lime);color:var(--lime-ink)}
.btn.ghost{background:var(--surface2);color:var(--ink)}
.btn[disabled]{opacity:.4;pointer-events:none}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>*{flex:1 1 0}

/* hero */
.hero{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:linear-gradient(135deg,var(--night),var(--night2));border:1px solid var(--line);color:#fff;border-radius:24px;padding:24px 26px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(30,94,255,.55),transparent 70%)}
.hero .eyebrow{color:#9AA3B5}
.hero h1{color:#fff;margin-top:4px}
.hero p{color:#C9CFDA;font-size:16px;margin-top:6px}
.ring{position:relative;width:112px;height:112px;z-index:1}
.ring svg{width:112px;height:112px;transform:rotate(-90deg)}
.ring .bg{fill:none;stroke:rgba(255,255,255,.14);stroke-width:10}
.ring .fg{fill:none;stroke:var(--lime);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .6s}
.ring .lab{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.ring .lab b{font-family:var(--latin);font-size:30px;font-weight:800}
.ring .lab small{display:block;font-size:11px;color:#9AA3B5;letter-spacing:.12em;font-family:var(--latin);font-weight:700}

/* missions */
.missions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){.missions{grid-template-columns:1fr}.hero{grid-template-columns:1fr}}
.mission{position:relative;text-align:left;background:var(--surface);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-height:170px;border:2px solid transparent;transition:transform .1s,border-color .2s}
.mission:active{transform:scale(.985)}
.mission.next{border-color:var(--blue)}
.mission .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center}
.mission .ic svg{width:24px;height:24px}
.mission .t{font-size:20px;font-weight:900}
.mission .m{font-size:14px;color:var(--ink2)}
.mission .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.pill{font-family:var(--latin);font-size:12px;font-weight:800;letter-spacing:.08em;padding:5px 10px;border-radius:999px;background:var(--surface2);color:var(--ink2)}
.pill.go{background:var(--blue);color:#fff}
.pill.done{background:var(--green-soft);color:var(--green)}
.mission .step{font-family:var(--latin);font-weight:800;font-size:13px;color:var(--mute)}

/* mastery */
.mastery{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
@media (max-width:640px){.mastery{grid-template-columns:1fr}}
.mgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;width:300px;max-width:100%}
.mgrid i{aspect-ratio:1;border-radius:5px;background:var(--m0)}
.mgrid i.l1{background:var(--m1)}.mgrid i.l2{background:var(--m2)}.mgrid i.l3{background:var(--m3)}.mgrid i.l4{background:var(--m4)}
.bigstat{font-family:var(--latin);font-weight:800;font-size:48px;line-height:1;letter-spacing:-.03em}
.bigstat small{font-size:20px;color:var(--mute);font-weight:700}
.bars{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.bar{display:grid;grid-template-columns:52px 1fr 40px;gap:10px;align-items:center;font-size:14px}
.bar .tr{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.bar .tr b{display:block;height:100%;background:var(--green);border-radius:999px}
.bar .v{font-family:var(--latin);font-variant-numeric:tabular-nums;color:var(--ink2);text-align:right}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--ink2)}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px;background:var(--c)}
.links{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* problem */
.stage{display:flex;flex-direction:column;align-items:center;gap:18px;padding:10px 0 120px}
.lead{font-size:16px;color:var(--ink2);text-align:center}
.q{font-family:var(--latin);font-size:clamp(56px,11vw,92px);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1;display:flex;align-items:baseline;gap:.25em}
.q .op{color:var(--mute);font-weight:600}
.q .ans{min-width:1.4em;padding:0 .1em;border-bottom:6px solid var(--blue);color:var(--blue);text-align:center}
.q.ok .ans{color:var(--green);border-color:var(--green)}
.q.ng .ans{color:var(--coral);border-color:var(--coral)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:400px}
.pad button{min-height:68px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);font-family:var(--latin);font-size:30px;font-weight:700}
.pad button:active{background:var(--surface2);transform:scale(.97)}
.pad .del{font-size:16px;color:var(--ink2);font-family:var(--ja)}
.pad .go{background:var(--ink);color:var(--bg);font-size:17px;font-family:var(--ja);font-weight:800}
.hintcard{width:100%;max-width:560px;background:var(--amber-soft);border-radius:16px;padding:14px 18px;font-size:18px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.hintcard .eyebrow{color:#B7791F}

/* feedback sheet */
.sheet{position:fixed;left:0;right:0;bottom:0;padding:18px 20px calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;transform:translateY(110%);transition:transform .22s ease-out;z-index:20}
.sheet.show{transform:none}
.sheet.ok{background:var(--green-soft)}
.sheet.ng{background:var(--coral-soft)}
.sheet .badge{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none}
.sheet.ok .badge{background:var(--green)} .sheet.ng .badge{background:var(--coral)}
.sheet .badge svg{width:24px;height:24px}
.sheet .txt{flex:1;font-size:19px;font-weight:800}
.sheet.ok .txt{color:var(--green)} .sheet.ng .txt{color:var(--coral)}
.sheet .xpb{font-family:var(--latin);font-weight:800;background:var(--night);color:var(--lime);border-radius:999px;padding:6px 12px;font-size:15px}
@media (prefers-reduced-motion:reduce){.sheet{transition:none}}

/* manipulatives */
.plates{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:76px;max-width:640px}
.plate{background:var(--surface);border-radius:999px;padding:12px 16px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:180px;box-shadow:var(--shadow);border:1.5px solid var(--line)}
.berry{width:22px;height:24px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--coral);position:relative}
.berry::before{content:"";position:absolute;top:-4px;left:6px;width:10px;height:6px;border-radius:50%;background:var(--green)}
@media (prefers-reduced-motion:no-preference){.plate.new{animation:drop .35s cubic-bezier(.2,.9,.3,1.3)}}
@keyframes drop{from{transform:translateY(-24px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.grid{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.grid-row{display:flex;gap:6px;align-items:center}
.grid-row .lab{width:42px;text-align:right;font-size:14px;color:var(--ink2);font-family:var(--latin);font-weight:700}
.grid i{width:18px;height:18px;border-radius:50%;background:var(--coral)}
.grid i.prev{background:var(--m1)}
.stairs{display:flex;align-items:flex-end;gap:6px;justify-content:center;height:140px}
.stairs div{width:34px;border-radius:8px 8px 3px 3px;background:var(--green-soft);display:flex;align-items:flex-start;justify-content:center;padding-top:4px;font-family:var(--latin);font-size:14px;font-weight:800;color:var(--green)}
.stairs div.cur{background:var(--blue);color:#fff}
.count{font-family:var(--latin);font-size:56px;font-weight:800;display:flex;align-items:baseline;gap:8px}
.count .ans{min-width:1.4em;border-bottom:6px solid var(--blue);color:var(--blue);text-align:center}
.count small{font-size:22px;color:var(--mute)}

/* choices */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:620px}
@media (max-width:520px){.opts{grid-template-columns:1fr}}
.opt{min-height:64px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);border:2px solid transparent;padding:10px 16px;font-size:18px;text-align:left}
.opt.sel{background:var(--green-soft);border-color:var(--green)}
.opt.ng{background:var(--coral-soft);border-color:var(--coral)}
.seq{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;width:100%;max-width:600px}
.seq div{aspect-ratio:1;border-radius:12px;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center;font-family:var(--latin);font-weight:800;font-size:clamp(14px,3.4vw,24px)}

/* results */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.stat{background:var(--surface2);border-radius:16px;padding:16px;text-align:left}
.stat b{display:block;font-family:var(--latin);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.stat.lime{background:var(--night);color:var(--lime)} .stat.lime .eyebrow{color:#9AA3B5}

/* table */
.ktable{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:100%;max-width:600px;font-family:var(--latin);font-variant-numeric:tabular-nums}
.ktable div{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;font-size:clamp(12px,2.6vw,18px);font-weight:700;background:var(--m0)}
.ktable .hd{background:none;color:var(--mute);font-weight:800}
.ktable .l1{background:var(--m1)}.ktable .l2{background:var(--m2)}.ktable .l3{background:var(--m3)}.ktable .l4{background:var(--m4);color:#fff}

/* parent */
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:640px){.kv{grid-template-columns:1fr 1fr}}
.list{display:flex;flex-direction:column}
.list div{display:flex;justify-content:space-between;gap:10px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:16px}
.list div:last-child{border-bottom:0}
.dinner{background:var(--amber-soft);border-radius:16px;padding:16px 18px;font-size:19px;font-weight:700}
.field{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ink2);width:100%}
.field input[type=text]{min-height:54px;border-radius:14px;border:1.5px solid var(--line);padding:8px 16px;background:var(--surface2);font-size:18px}
.chk{display:flex;flex-wrap:wrap;gap:8px}
.chk label{display:flex;align-items:center;gap:6px;background:var(--surface2);border-radius:12px;padding:8px 12px;font-size:16px}
textarea{width:100%;min-height:90px;font-size:12px;border-radius:12px;border:1.5px solid var(--line);padding:10px;background:var(--surface2);font-family:ui-monospace,monospace}
.msg{font-size:16px;min-height:1.4em}
.msg.ng{color:var(--coral)} .msg.ok{color:var(--green);font-weight:800}
.mascot{width:72px;height:72px}

/* ===== 図スタイル（番号バッジ・枠線カード・3枚の流れ） ===== */
:root{ --accent:#A51C30; --accent-soft:#FBEAEC; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --accent:#E0475C; --accent-soft:#2A1216; }}
:root[data-theme="dark"]{ --accent:#E0475C; --accent-soft:#2A1216; }
.card,.mission,.stat,.opt,.pad button,.plate,.seq div,.chip,.iconbtn{box-shadow:none;border:1px solid var(--line)}
.card{border-radius:16px}
.sec{display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:2px;align-items:center;width:100%;text-align:left}
.sec .no{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--latin);font-weight:800;font-size:16px}
.sec h2{font-size:21px;color:var(--ink)}
.sec .cap{grid-column:2;font-size:14px;color:var(--mute)}
.divider{height:1px;background:var(--line);width:100%;margin:6px 0}
.flow{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:stretch;width:100%}
.flow .arr{display:grid;place-items:center;color:var(--mute);font-size:18px}
.fcard{border:1px solid var(--line);border-radius:14px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:var(--surface);min-height:120px;position:relative}
.fcard .ft{font-size:18px;font-weight:800}
.fcard .fb{font-size:30px;font-weight:800;font-family:var(--latin)}
.fcard .fs{font-size:14px;color:var(--ink2)}
.fcard.hl{border:2px solid var(--accent)}
.fcard.done{opacity:.6}
.fcard.done::after{content:"✓";position:absolute;top:6px;right:10px;color:var(--green);font-weight:900}
.fcard.lock{opacity:.45}
button.fcard{cursor:pointer;font:inherit;color:inherit}
.caption{font-size:14px;color:var(--mute);text-align:center;width:100%}
@media (max-width:600px){.flow{grid-template-columns:1fr;row-gap:4px}.flow .arr{transform:rotate(90deg);height:22px}}
.hintwrap{width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center;gap:12px}
.topflow{width:100%;max-width:700px;margin:0 auto}
.topflow .fcard{min-height:84px;padding:10px 8px}
.topflow .ft{font-size:16px}

/* スマホ幅 */
@media (max-width:480px){
  .appbar{gap:8px}
  .logo .word{display:none}
  .chip{height:36px;padding:0 10px;font-size:15px}
  .iconbtn{width:40px;height:40px}
  .hero{padding:20px}
  .hero h1{font-size:24px}
  .ring,.ring svg{width:96px;height:96px}
  .q{font-size:clamp(48px,14vw,64px)}
  .pad button{min-height:60px}
  .screen{padding-inline:14px}
}

/* たんけんマップ・単元 */
.umap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.umc{min-height:118px;padding:12px 10px;gap:4px}
.stars{color:var(--amber);font-size:16px;letter-spacing:2px}
.stars i{font-style:normal;color:var(--line)}
.pfig{display:flex;justify-content:center;width:100%;max-width:420px;margin:0 auto}
.pfig svg{max-width:100%;height:auto}
.fcard.lock{opacity:.45}
@media (max-width:480px){.umap{grid-template-columns:1fr 1fr}}

/* 入力欄（ID・パスワード・名前・えらぶ）を ぜんぶ 同じ見た目に */
.field input:not([type=checkbox]):not([type=radio]),.field select{width:100%;min-height:56px;border-radius:14px;border:1.5px solid var(--line);padding:10px 16px;background:var(--surface2);color:var(--ink);font-size:18px;font-family:inherit;-webkit-appearance:none;appearance:none;box-shadow:none;outline:none;transition:border-color .15s}
.field input:not([type=checkbox]):not([type=radio]):focus,.field select:focus{border-color:var(--blue);background:var(--surface)}
.field input::placeholder{color:var(--mute)}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--surface2) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:84px!important}
.pwwrap button{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--blue);padding:8px 10px;border-radius:10px}
form .msg:empty{display:none}

/* もっと やる・かん字 */
.more{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.more{grid-template-columns:1fr}}
.kjbig{font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-size:120px;line-height:1.1;text-align:center}
.kjwords{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:30px;font-family:"Shippori Mincho","Hiragino Mincho ProN",serif}
.kjwords rt{font-size:.45em;font-family:var(--ja)}

/* 会社ロゴ */
.colog{display:inline-flex;height:var(--h)}
.colog img{height:100%;width:auto}
.colog.center{align-self:center}
.colog .lg-d{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .colog .lg-l{display:none}:root:not([data-theme="light"]) .colog .lg-d{display:block}}
:root[data-theme="dark"] .colog .lg-l{display:none}
:root[data-theme="dark"] .colog .lg-d{display:block}
.cofoot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);color:var(--mute);font-size:12px;font-family:var(--latin);letter-spacing:.06em}
.hero-wm{position:absolute;right:-18px;bottom:-26px;height:150px;width:auto;opacity:.10;pointer-events:none;z-index:0}
.hero > div{position:relative;z-index:1}