/* ==========================================================
   英文法大全 — 画面のスタイル
   ポップ（原田英語スラング辞典と同じ系統：クリーム地・太い黒線・ずらし影・原色）
   ========================================================== */
:root {
  --bg: #fff6e9; --dot: #1111110d; --card: #fff; --ink: #141414; --sub: #55555f; --faint: #8d8d96; --soft: #f6efe3; --soft2: #fdf8ef;
  --line: #141414; --shc: #141414; --sh: 4px 4px 0 var(--shc); --sh-s: 3px 3px 0 var(--shc); --sh-l: 6px 6px 0 var(--shc);
  --y: #ffe14d; --y2: #fff3b0; --pink: #ff4f9a; --pink2: #ffe3ef; --blue: #3d63ff; --blue2: #e3e9ff; --purple: #8b5cff; --purple2: #eee6ff;
  --lime: #b6f23a; --lime2: #effcd3; --orange: #ff8a3d; --orange2: #ffe9d9; --red: #ff3b3b; --red2: #ffe1e1; --mint: #3fe0b5; --mint2: #dcfaf1; --green: #1fb57a; --green2: #daf6ea;
  --mark: #ffe14d; --ok: #1fb57a; --ng: #ff3b3b;
  --rS: #3d63ff; --rV: #ff3b3b; --rO: #1fb57a; --rC: #ff8a3d; --rM: #8b5cff; --rX: #8d8d96;
  --r: 16px; --r-s: 11px;
  --disp: "Dela Gothic One", system-ui, sans-serif;
  --jp: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --en: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs: 16px;
  color-scheme: light;
}
:root[data-fs="l"] { --fs: 18px; }
:root[data-fs="s"] { --fs: 15px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16161d; --dot: #ffffff0a; --card: #20202a; --ink: #f2f2f6; --sub: #b4b4c0; --faint: #85859a; --soft: #2a2a36; --soft2: #242430;
    --line: #e8e8ee; --shc: #000;
    --y2: #4a4118; --pink2: #4a1f33; --blue2: #1f2a57; --purple2: #33245a; --lime2: #34431a; --orange2: #4a2e1a; --red2: #4a1d1d; --mint2: #16443a; --green2: #173d2e;
    --mark: #8a7414;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #16161d; --dot: #ffffff0a; --card: #20202a; --ink: #f2f2f6; --sub: #b4b4c0; --faint: #85859a; --soft: #2a2a36; --soft2: #242430;
  --line: #e8e8ee; --shc: #000;
  --y2: #4a4118; --pink2: #4a1f33; --blue2: #1f2a57; --purple2: #33245a; --lime2: #34431a; --orange2: #4a2e1a; --red2: #4a1d1d; --mint2: #16443a; --green2: #173d2e;
  --mark: #8a7414;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0; font-family: var(--jp); font-size: var(--fs); line-height: 1.75; color: var(--ink);
  background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 18px 18px;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)); overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
mark { background: linear-gradient(transparent 45%, var(--mark) 45%); color: inherit; padding: 0 1px; }
b, strong { font-weight: 800; }
u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.en, .enx { font-family: var(--en); font-weight: 700; letter-spacing: .005em; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; z-index: 100; background: var(--y); padding: 6px 10px; border: 2px solid var(--line); border-radius: 8px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- ヘッダー ---------- */
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--y); border-bottom: 2.5px solid #141414; color: #141414;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; flex: 1; }
.logo .mk { flex: none; width: 38px; height: 38px; display: grid; place-items: center; background: #ff4f9a; color: #fff; font-family: var(--disp); font-size: 21px; border: 2.5px solid #141414; border-radius: 11px; box-shadow: 2px 2px 0 #141414; transform: rotate(-6deg); }
.logo .t { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.logo small { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.logo b { font-family: var(--disp); font-weight: 400; font-size: 19px; white-space: nowrap; }
.logo b i { font-style: normal; font-family: var(--en); font-weight: 900; font-size: 17px; margin-left: 2px; background: #141414; color: var(--y); padding: 0 5px; border-radius: 5px; }
.ib { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: #fff; border: 2.5px solid #141414; border-radius: 12px; box-shadow: 2px 2px 0 #141414; cursor: pointer; color: #141414; }
.ib svg { width: 22px; height: 22px; }
.ib:active { transform: translate(2px, 2px); box-shadow: none; }
.xpchip { flex: none; font-family: var(--en); font-weight: 900; font-size: 12px; background: #141414; color: var(--y); border-radius: 99px; padding: 3px 9px; white-space: nowrap; cursor: pointer; }
.xpchip:empty { display: none; }
@media (max-width: 440px) { .xpchip { display: none; } }
@media (max-width: 340px) { .logo small { display: none; } .logo b { font-size: 16px; } .logo b i { font-size: 14px; } }

/* ---------- ドロワー ---------- */
.scrim { position: fixed; inset: 0; background: #0008; z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--bg); border-left: 2.5px solid var(--line); z-index: 41; overflow-y: auto; padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); animation: slidein .22s ease-out; }
@keyframes slidein { from { transform: translateX(100%); } }
.drawer h3 { font-family: var(--disp); font-weight: 400; font-size: 15px; margin: 18px 4px 8px; }
.drawer a.di { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 5px 0; background: var(--card); border: 2px solid var(--line); border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 15px; }
.drawer a.di span.e { font-size: 20px; width: 26px; text-align: center; }
.drawer .set { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 4px; }

/* ---------- 下のタブ ---------- */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; background: var(--card); border-top: 2.5px solid var(--line); padding: 5px 4px calc(5px + env(safe-area-inset-bottom)); }
.tabs a { flex: 1; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 1px; text-decoration: none; font-size: 11px; font-weight: 800; color: var(--sub); padding: 3px 0; border-radius: 12px; }
.tabs a .e { font-size: 21px; line-height: 1.2; filter: grayscale(.6); }
.tabs a.on { color: var(--ink); background: var(--y2); }
.tabs a.on .e { filter: none; transform: scale(1.1); }

/* ---------- 上へ戻るボタン ---------- */
#totop { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 35; width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid #141414; background: var(--y); color: #141414; box-shadow: 3px 3px 0 #141414; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; cursor: pointer; padding: 0; animation: popin .25s cubic-bezier(.3,1.6,.5,1); }
#totop svg { width: 24px; height: 24px; margin-top: 2px; }
#totop span { font-size: 10px; font-weight: 900; line-height: 1; margin-top: -2px; }
#totop:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #141414; }
@keyframes popin { from { transform: scale(0); opacity: 0; } }
@media (min-width: 1100px) { #totop { right: calc((100vw - 1000px) / 2 - 70px); } }

/* ---------- 共通 ---------- */
main { display: block; max-width: 1000px; margin: 0 auto; padding: 16px 16px 30px; outline: none; }
.boot { display: grid; place-items: center; min-height: 50vh; color: var(--sub); font-weight: 800; }
.spin { width: 44px; height: 44px; border: 5px solid var(--y); border-top-color: var(--pink); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-in { animation: pagein .28s ease-out; }
@keyframes pagein { from { opacity: 0; transform: translateY(8px); } }
.card { background: var(--card); border: 2.5px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 16px; margin: 14px 0; }
.card.flat { box-shadow: none; }
.card h2, .card h3 { margin-top: 0; }
h1, h2, h3 { line-height: 1.35; }
h1 { font-family: var(--disp); font-weight: 400; font-size: clamp(24px, 6vw, 38px); margin: 8px 0 12px; }
h2 { font-family: var(--disp); font-weight: 400; font-size: clamp(20px, 4.6vw, 26px); margin: 26px 0 10px; }
h3 { font-size: 18px; font-weight: 900; margin: 18px 0 8px; }
.sub { color: var(--sub); }
.small { font-size: .88em; }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row.c { justify-content: center; }
.grow { flex: 1; }
.mt0 { margin-top: 0 !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; min-height: 44px; background: var(--card); border: 2.5px solid var(--line); border-radius: 13px; box-shadow: var(--sh-s); font-weight: 900; font-size: 15px; cursor: pointer; text-decoration: none; line-height: 1.3; text-align: center; color: var(--ink); transition: transform .08s; }
.btn:active, .btn.pressed { transform: translate(3px, 3px); box-shadow: none; }
.btn.y { background: var(--y); color: #141414; }
.btn.pk { background: var(--pink); color: #fff; }
.btn.bl { background: var(--blue); color: #fff; }
.btn.pu { background: var(--purple); color: #fff; }
.btn.gr { background: var(--green); color: #fff; }
.btn.ink { background: var(--ink); color: var(--bg); }
.btn.big { font-size: 17px; padding: 13px 22px; min-height: 52px; border-radius: 15px; }
.btn.sm { font-size: 13px; padding: 6px 11px; min-height: 36px; border-radius: 10px; box-shadow: 2px 2px 0 var(--shc); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; min-height: 34px; background: var(--card); border: 2px solid var(--line); border-radius: 99px; font-weight: 800; font-size: 13.5px; cursor: pointer; text-decoration: none; color: var(--ink); line-height: 1.3; }
.chip.on { background: var(--ink); color: var(--bg); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.badge { display: inline-block; font-size: 11.5px; font-weight: 900; padding: 1px 8px; border-radius: 99px; border: 2px solid var(--line); background: var(--y); color: #141414; white-space: nowrap; vertical-align: middle; line-height: 1.5; }
.lv { display: inline-block; font-family: var(--en); font-weight: 900; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; color: #fff; white-space: nowrap; vertical-align: middle; line-height: 1.55; border: 2px solid var(--line); }
.lv1 { background: #1fb57a; } .lv2 { background: #3d63ff; } .lv3 { background: #8b5cff; } .lv4 { background: #ff4f9a; } .lv5 { background: #141414; color: #ffe14d; }
:root[data-theme="dark"] .lv5 { background: #000; }
.stars { color: #ff8a3d; letter-spacing: -1px; font-size: 13px; }
.crumb { font-size: 13px; font-weight: 800; color: var(--sub); margin: 0 0 6px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.empty { text-align: center; padding: 30px 10px; color: var(--sub); font-weight: 700; }
.hr { height: 2.5px; background: var(--line); border: 0; margin: 22px 0; opacity: .15; border-radius: 2px; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 99px; font-weight: 900; font-size: 14px; transition: .25s; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.xpfly { position: fixed; z-index: 70; pointer-events: none; font-family: var(--en); font-weight: 900; font-size: 22px; color: var(--pink); -webkit-text-stroke: 1px #141414; animation: xpfly 1s ease-out forwards; }
@keyframes xpfly { from { opacity: 1; transform: translateY(0) scale(.8); } 30% { transform: translateY(-20px) scale(1.2); } to { opacity: 0; transform: translateY(-70px) scale(1); } }

/* ---------- ホーム ---------- */
.hero { position: relative; margin: -16px -16px 0; padding: 26px 18px 22px; background: linear-gradient(135deg, #ffe14d 0%, #ffb3d4 55%, #b8c5ff 100%); border-bottom: 2.5px solid #141414; overflow: hidden; color: #141414; }
.hero::after { content: "S V O C M"; position: absolute; right: -10px; bottom: -18px; font-family: var(--disp); font-size: 80px; color: #ffffff38; letter-spacing: 6px; white-space: nowrap; pointer-events: none; }
.hero .tag { display: inline-flex; gap: 6px; align-items: center; background: #141414; color: #fff; border-radius: 99px; padding: 3px 12px 3px 4px; font-weight: 900; font-size: 13px; }
.hero .tag b { background: var(--lime); color: #141414; border-radius: 99px; padding: 0 8px; }
.hero h1 { font-size: clamp(30px, 8.6vw, 56px); line-height: 1.22; margin: 14px 0 10px; position: relative; z-index: 1; }
.hero h1 .hl { background: #fff; padding: 0 6px; border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero h1 .hl2 { background: #141414; color: var(--y); padding: 0 6px; border-radius: 6px; }
.hero p.lead { font-weight: 800; font-size: 15px; margin: 0 0 14px; position: relative; z-index: 1; max-width: 640px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; z-index: 1; max-width: 640px; }
.stat { background: #fff; border: 2.5px solid #141414; border-radius: 13px; padding: 6px 8px; box-shadow: 2px 2px 0 #141414; text-align: center; line-height: 1.2; }
.stat b { display: block; font-family: var(--en); font-weight: 900; font-size: 22px; }
.stat span { font-size: 11.5px; font-weight: 800; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(6, 1fr); } }
.who { margin: 16px 0; }
.who h3 { margin: 0 0 6px; font-size: 16px; }
.lvpick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lvpick button { border: 2.5px solid var(--line); border-radius: 12px; background: var(--card); padding: 7px 2px; cursor: pointer; font-weight: 900; font-size: 12px; line-height: 1.25; box-shadow: 2px 2px 0 var(--shc); }
.lvpick button b { display: block; font-size: 14px; }
.lvpick button.on { background: var(--ink); color: var(--bg); transform: translate(2px, 2px); box-shadow: none; }
@media (max-width: 440px) { .lvpick { grid-template-columns: repeat(3, 1fr); } }
.player { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.player .ava { width: 58px; height: 58px; border-radius: 16px; border: 2.5px solid var(--line); background: var(--y); display: grid; place-items: center; font-size: 32px; box-shadow: var(--sh-s); }
.player .nm { font-weight: 900; font-size: 16px; line-height: 1.3; }
.bar { height: 14px; border: 2px solid var(--line); border-radius: 99px; background: var(--soft); overflow: hidden; margin-top: 5px; }
.bar i { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--pink), var(--pink) 8px, #ff79b3 8px, #ff79b3 16px); border-right: 2px solid var(--line); transition: width .6s; }
.bar.g i { background: repeating-linear-gradient(45deg, var(--green), var(--green) 8px, #3fd39a 8px, #3fd39a 16px); }
.mission { display: grid; gap: 8px; margin-top: 12px; }
.mission a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; text-decoration: none; background: var(--soft2); font-weight: 800; }
.mission a .ck { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2.5px solid var(--line); display: grid; place-items: center; font-size: 15px; background: var(--card); }
.mission a.done .ck { background: var(--green); color: #fff; }
.mission a.done { opacity: .75; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 108px; padding: 12px; border: 2.5px solid #141414; border-radius: 16px; box-shadow: var(--sh); text-decoration: none; color: #141414; overflow: hidden; transition: transform .1s; }
.tile:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shc); }
.tile .e { position: absolute; top: 8px; right: 10px; font-size: 34px; transform: rotate(8deg); }
.tile b { font-family: var(--disp); font-weight: 400; font-size: 17px; line-height: 1.25; }
.tile small { font-weight: 800; font-size: 12px; line-height: 1.35; opacity: .85; }
.tile.t1 { background: var(--y); } .tile.t2 { background: #ffb3d4; } .tile.t3 { background: #b8c5ff; } .tile.t4 { background: #c9f27a; }
.tile.t5 { background: #ffc59e; } .tile.t6 { background: #9ff0d7; } .tile.t7 { background: #d9c7ff; } .tile.t8 { background: #fff; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 28px 0 8px; }
.sec-h h2 { margin: 0; }
.sec-h a { font-weight: 900; font-size: 14px; white-space: nowrap; }
.feat { background: var(--card); }
.feat .fh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 単元カード ---------- */
.cat-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 6px; font-weight: 900; font-size: 15px; }
.cat-h i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--line); display: inline-block; }
.units { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .units { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .units { grid-template-columns: 1fr 1fr 1fr; } }
.ucard { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 11px 12px; background: var(--card); border: 2.5px solid var(--line); border-radius: 15px; box-shadow: var(--sh-s); text-decoration: none; transition: transform .08s; }
.ucard:active { transform: translate(3px, 3px); box-shadow: none; }
.ucard .ue { width: 52px; height: 52px; display: grid; place-items: center; font-size: 28px; border: 2.5px solid var(--line); border-radius: 13px; position: relative; }
.ucard .ue small { position: absolute; left: -7px; top: -8px; font-family: var(--en); font-weight: 900; font-size: 11px; background: var(--ink); color: var(--bg); border-radius: 99px; padding: 0 6px; line-height: 1.6; }
.ucard b { display: block; font-weight: 900; font-size: 16px; line-height: 1.3; }
.ucard .c { font-size: 12.5px; color: var(--sub); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ucard .pg { height: 6px; background: var(--soft); border-radius: 99px; margin-top: 5px; overflow: hidden; }
.ucard .pg i { display: block; height: 100%; background: var(--green); }
.k-bone { --k: var(--lime); --k2: var(--lime2); } .k-verb { --k: var(--blue); --k2: var(--blue2); } .k-verbal { --k: var(--purple); --k2: var(--purple2); }
.k-clause { --k: var(--pink); --k2: var(--pink2); } .k-cmp { --k: var(--orange); --k2: var(--orange2); } .k-pos { --k: var(--mint); --k2: var(--mint2); } .k-real { --k: var(--red); --k2: var(--red2); }
.ucard .ue { background: var(--k2); }
.cat-h i { background: var(--k); }

/* ---------- 単元ページ ---------- */
.uhead { position: relative; background: var(--k2); border: 2.5px solid var(--line); border-radius: 20px; box-shadow: var(--sh); padding: 16px; margin: 6px 0 12px; overflow: hidden; }
.uhead .big { position: absolute; right: -6px; top: -14px; font-size: 92px; opacity: .22; transform: rotate(12deg); pointer-events: none; }
.uhead .no { font-family: var(--en); font-weight: 900; font-size: 13px; background: var(--ink); color: var(--bg); border-radius: 99px; padding: 1px 10px; display: inline-block; }
.uhead h1 { margin: 8px 0 2px; }
.uhead .en { font-size: 15px; color: var(--sub); }
.uhead .catch { font-weight: 900; font-size: 17px; margin: 8px 0 6px; position: relative; }
.uhead p { margin: 6px 0; position: relative; }
.utabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; position: sticky; top: 58px; z-index: 20; background: var(--bg); padding: 6px 0; }
.utabs a { padding: 5px 11px; border: 2px solid var(--line); border-radius: 99px; font-weight: 900; font-size: 13px; text-decoration: none; background: var(--card); white-space: nowrap; }
.utabs a.on { background: var(--ink); color: var(--bg); }
@media (max-width: 420px) { .utabs a { font-size: 12px; padding: 4px 9px; } }
.maplist { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: m; }
.maplist li { counter-increment: m; display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.maplist li::before { content: counter(m); flex: none; width: 24px; height: 24px; display: grid; place-items: center; background: var(--k, var(--y)); color: #141414; border: 2px solid var(--line); border-radius: 8px; font-family: var(--en); font-weight: 900; font-size: 13px; margin-top: 2px; }
.toc { display: grid; gap: 6px; }
.toc a { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; text-decoration: none; background: var(--card); font-weight: 800; }
.toc a .n { font-family: var(--en); font-weight: 900; color: var(--sub); min-width: 26px; }
.toc a .grow { line-height: 1.4; }
.toc a.read { background: var(--green2); }
.toc a.read::after { content: "✔"; color: var(--green); font-weight: 900; }
.lesson { background: var(--card); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: var(--sh); margin: 18px 0; overflow: hidden; }
.lesson > .lh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--k2); border-bottom: 2.5px solid var(--line); }
.lesson > .lh .n { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; border: 2.5px solid var(--line); background: var(--k); color: #141414; font-family: var(--en); font-weight: 900; font-size: 17px; }
.lesson > .lh h2 { margin: 0; font-size: clamp(17px, 4.2vw, 22px); flex: 1; }
.lesson > .lb { padding: 6px 16px 16px; }
.lesson .done-btn { margin-top: 14px; }

/* ---------- ブロック ---------- */
.b-p { margin: 12px 0; }
.b-ex { margin: 14px 0; display: grid; gap: 8px; }
.exi { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; padding: 10px 12px; background: var(--soft2); border: 2px solid var(--line); border-left-width: 7px; border-left-color: var(--k, var(--blue)); border-radius: 12px; }
.exi .say { grid-row: span 3; }
.exi .en { font-size: 1.08em; line-height: 1.5; }
.exi .en b { color: var(--pink); }
:root[data-theme="dark"] .exi .en b { color: #ff7bb5; }
.exi .ja { font-size: .92em; color: var(--sub); line-height: 1.55; }
.exi .nt { font-size: .85em; color: var(--sub); background: var(--card); border: 1.5px dashed var(--faint); border-radius: 8px; padding: 2px 8px; margin-top: 2px; }
body.hideja .exi .ja { filter: blur(6px); cursor: pointer; }
.say { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: var(--y); display: grid; place-items: center; cursor: pointer; padding: 0; color: #141414; }
.say svg { width: 17px; height: 17px; }
.say.on { background: var(--pink); color: #fff; animation: pulse .8s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
.box { position: relative; margin: 16px 0; padding: 12px 14px 12px; border: 2.5px solid var(--line); border-radius: 14px; background: var(--card); }
.box > .bh { display: flex; align-items: center; gap: 6px; font-weight: 900; margin-bottom: 4px; line-height: 1.4; }
.box > .bh .ic { flex: none; font-size: 13px; font-weight: 900; padding: 1px 9px; border-radius: 99px; border: 2px solid var(--line); background: var(--y); color: #141414; white-space: nowrap; }
.box.point { background: var(--y2); box-shadow: var(--sh-s); }
.box.tech { background: linear-gradient(135deg, var(--blue2), var(--purple2)); box-shadow: var(--sh-s); }
.box.tech > .bh .ic { background: var(--blue); color: #fff; }
.box .why { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 2px dashed var(--line); font-size: .92em; }
.box .why::before { content: "🎓 なぜ効く？ "; font-weight: 900; }
.box.warn { background: var(--red2); }
.box.warn > .bh .ic { background: var(--red); color: #fff; }
.box.column { background: var(--soft); border-style: dashed; }
.box.column > .bh .ic { background: var(--orange); color: #fff; }
.box.goro { background: var(--pink2); text-align: center; box-shadow: var(--sh-s); }
.box.goro > .bh { justify-content: center; }
.box.goro > .bh .ic { background: var(--pink); color: #fff; }
.goro-hook { font-family: var(--disp); font-size: clamp(19px, 5vw, 26px); line-height: 1.45; margin: 6px 0 8px; }
.goro-hook b { color: var(--pink); }
.box.goro .gx { text-align: left; font-size: .95em; }
.tbl { overflow-x: auto; margin: 14px 0; border: 2.5px solid var(--line); border-radius: 14px; background: var(--card); }
.tbl table { border-collapse: collapse; width: 100%; font-size: .93em; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1.5px solid var(--soft); text-align: left; vertical-align: top; line-height: 1.55; }
.tbl th { background: var(--ink); color: var(--bg); font-weight: 900; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:nth-child(even) td { background: var(--soft2); }
.tbl .cap { font-size: .85em; color: var(--sub); padding: 6px 10px; border-top: 1.5px solid var(--soft); }
.cmp { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0; position: relative; }
@media (min-width: 560px) { .cmp { grid-template-columns: 1fr 1fr; } }
.cmp > div { border: 2.5px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--card); box-shadow: var(--sh-s); }
.cmp > div:first-child { background: var(--blue2); }
.cmp > div:last-child { background: var(--orange2); }
.cmp h4 { margin: 0 0 4px; font-size: 16px; font-weight: 900; }
.cmp .cen { margin-top: 6px; padding: 6px 8px; border-radius: 9px; background: var(--card); border: 1.5px solid var(--line); }
.cmp .vs { display: none; }
@media (min-width: 560px) { .cmp .vs { display: grid; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--ink); color: var(--y); font-family: var(--en); font-weight: 900; font-size: 14px; border: 2.5px solid var(--y); z-index: 1; } }
.steps { margin: 14px 0; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 14px; background: var(--card); }
.steps h4 { margin: 0 0 8px; font-weight: 900; }
.steps ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; }
.steps li::before { content: counter(s); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: #fff; font-family: var(--en); font-weight: 900; border: 2px solid var(--line); }
.chat { margin: 16px 0; display: grid; gap: 10px; }
.chat .ln { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; }
.chat .ln.S { grid-template-columns: 1fr 40px; }
.chat .ln.S .av { order: 2; }
.chat .av { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--line); display: grid; place-items: center; font-size: 22px; background: var(--y); }
.chat .ln.S .av { background: var(--mint2); }
.chat .bub { position: relative; padding: 8px 12px; border: 2.5px solid var(--line); border-radius: 16px; background: var(--card); line-height: 1.6; }
.chat .ln.T .bub { border-top-left-radius: 4px; }
.chat .ln.S .bub { border-top-right-radius: 4px; background: var(--mint2); }
.chat .who { display: block; font-size: 11px; font-weight: 900; color: var(--sub); }
.qbox { margin: 16px 0; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--sh-s); }
.qbox .qh { font-weight: 900; font-size: 13px; color: var(--purple); }
.qbox .qq { font-family: var(--en); font-weight: 800; font-size: 1.05em; margin: 4px 0 10px; line-height: 1.55; }
.qbox .qq.jp { font-family: var(--jp); }
.opts { display: grid; gap: 8px; }
@media (min-width: 560px) { .opts.two { grid-template-columns: 1fr 1fr; } }
.opt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 12px; min-height: 48px; border: 2.5px solid var(--line); border-radius: 13px; background: var(--card); cursor: pointer; font-family: var(--en); font-weight: 800; font-size: 16px; line-height: 1.35; box-shadow: 2px 2px 0 var(--shc); color: var(--ink); }
.opt .k { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--line); font-size: 13px; background: var(--soft); font-family: var(--en); }
.opt.jp { font-family: var(--jp); font-size: 15px; }
.opt:active { transform: translate(2px, 2px); box-shadow: none; }
.opt.ok { background: var(--green); color: #fff; animation: pop .35s; }
.opt.ng { background: var(--red); color: #fff; animation: shake .35s; }
.opt.dim { opacity: .45; }
.opt[disabled] { cursor: default; }
@keyframes pop { 40% { transform: scale(1.05); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.exp { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--soft2); border: 2px solid var(--line); animation: pagein .25s; }
.exp .res { font-family: var(--disp); font-size: 18px; }
.exp .res.ok { color: var(--green); } .exp .res.ng { color: var(--red); }

/* 文構造 */
.struct { margin: 16px 0; padding: 14px 10px 8px; border: 2.5px solid var(--line); border-radius: 14px; background: var(--card); position: relative; }
.struct .sline { display: flex; flex-wrap: wrap; gap: 20px 6px; align-items: flex-start; position: relative; z-index: 1; padding-top: 20px; }
.struct.noarr .sline { padding-top: 0; }
.sch { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.sch .tx { font-family: var(--en); font-weight: 800; font-size: 1.04em; padding: 3px 8px; border: 2.5px solid var(--c, var(--rX)); border-radius: 9px; background: color-mix(in srgb, var(--c, var(--rX)) 13%, var(--card)); line-height: 1.4; }
.sch .rl { font-family: var(--en); font-weight: 900; font-size: 12px; color: #fff; background: var(--c, var(--rX)); border-radius: 99px; padding: 0 8px; line-height: 1.6; white-space: nowrap; }
.sch.plain .tx { border-color: transparent; background: none; padding: 3px 0; }
.sch.plain .rl { visibility: hidden; }
.sch.rS { --c: var(--rS); } .sch.rV { --c: var(--rV); } .sch.rO, .sch.rO1, .sch.rO2 { --c: var(--rO); } .sch.rC { --c: var(--rC); } .sch.rM { --c: var(--rM); }
.sch.rX .rl { font-family: var(--jp); font-size: 11px; }
.sch.rX .tx { border-style: dashed; }
.struct svg.arr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.struct .sja { margin-top: 8px; font-size: .92em; color: var(--sub); border-top: 1.5px dashed var(--faint); padding-top: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; font-weight: 800; color: var(--sub); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 3px; vertical-align: -1px; }

/* 棒グラフ */
.bars { margin: 16px 0; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 14px; background: var(--card); }
.bars h4 { margin: 0 0 10px; font-weight: 900; }
.brow { display: grid; grid-template-columns: minmax(70px, 30%) 1fr; gap: 8px; align-items: center; margin: 7px 0; }
.brow .bl { font-family: var(--en); font-weight: 900; font-size: .95em; text-align: right; line-height: 1.25; word-break: break-word; }
.brow .bt { height: 26px; border: 2px solid var(--line); border-radius: 8px; background: var(--soft); position: relative; overflow: hidden; }
.brow .bt i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bc, var(--blue)); border-right: 2px solid var(--line); transition: width 1s cubic-bezier(.2, .9, .3, 1.2); }
.brow .bt span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 900; z-index: 1; white-space: nowrap; color: var(--ink); text-shadow: 0 0 3px var(--card), 0 0 3px var(--card); }
.bars .note { font-size: .82em; color: var(--sub); margin-top: 6px; }

/* フロー */
.flow { margin: 16px 0; padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--sh-s); }
.flow h4 { margin: 0 0 8px; font-weight: 900; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flow .trail { display: grid; gap: 8px; }
.fnode { padding: 10px 12px; border: 2.5px solid var(--line); border-radius: 12px; background: var(--y2); font-weight: 800; animation: pagein .25s; }
.fnode .yn { display: flex; gap: 8px; margin-top: 8px; }
.fnode .yn button { flex: 1; }
.fnode.past { background: var(--soft); opacity: .8; font-size: .92em; }
.fnode.past .ans { color: var(--purple); font-weight: 900; }
.fnode.end { background: var(--green2); border-color: var(--green); }
.fnode.end b.r { font-family: var(--disp); font-weight: 400; }
.ftree { font-size: .9em; }
.ftree ul { list-style: none; margin: 0; padding-left: 16px; border-left: 2px dashed var(--faint); }
.ftree li { margin: 6px 0; }
.ftree .fq { font-weight: 800; }
.ftree .fa { font-weight: 900; color: var(--green); }
.ftree .yl { font-weight: 900; color: var(--blue); } .ftree .nl { font-weight: 900; color: var(--red); }

/* ---------- 図（fig） ---------- */
.fig { margin: 16px 0; border: 2.5px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--sh-s); overflow: hidden; }
.fig .fh { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ink); color: var(--bg); font-weight: 900; font-size: 14px; }
.fig .fh .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px #ff3b3b44; animation: pulse 1.2s infinite; }
.fig .fh .grow { line-height: 1.35; }
.fig .fh button { background: var(--y); color: #141414; border: 2px solid var(--y); border-radius: 99px; font-weight: 900; font-size: 12px; padding: 2px 10px; cursor: pointer; }
.fig .fb { padding: 10px 12px 12px; }
.tl-leg { display: grid; gap: 2px; font-size: .9em; font-weight: 700; margin-top: 4px; }
.tl-leg:empty { display: none; }
.tl-leg b { font-size: 1.1em; margin-right: 2px; }
.fig .fcap { font-size: .9em; color: var(--sub); margin-top: 6px; }
.fig svg.stage { display: block; width: 100%; max-width: 760px; margin: 0 auto; height: auto; overflow: visible; }
.fig .tbtns { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 8px; }
.fig .tbtns button { border: 2px solid var(--line); background: var(--card); border-radius: 99px; padding: 3px 10px; font-weight: 800; font-size: 12.5px; cursor: pointer; color: var(--ink); line-height: 1.4; }
.fig .tbtns button.on { background: var(--ink); color: var(--bg); }
.fig .tgrp { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; margin-bottom: 8px; }
.fig .tgrp > b { font-size: 11.5px; color: var(--sub); font-weight: 900; white-space: nowrap; }
.fig .tgrp .tbtns { margin: 0; }
.fig .tinfo { display: grid; gap: 4px; margin-top: 8px; }
.fig .tinfo .nm { font-family: var(--disp); font-size: 20px; line-height: 1.3; }
.fig .tinfo .nm small { font-family: var(--en); font-size: 13px; color: var(--sub); margin-left: 6px; font-weight: 900; }
.fig .tinfo .ex { font-family: var(--en); font-weight: 800; font-size: 1.05em; display: flex; gap: 8px; align-items: center; }
.fig .tinfo .ex b { color: var(--pink); }
.fig .tinfo .ja { color: var(--sub); font-size: .92em; }
.fig .tinfo .img { background: var(--y2); border: 2px solid var(--line); border-radius: 10px; padding: 6px 10px; font-weight: 800; font-size: .93em; }
.fig text { font-family: var(--jp); font-weight: 800; fill: var(--ink); }
.fig text.enl { font-family: var(--en); font-weight: 900; }
.fig .axis { stroke: var(--ink); stroke-width: 3; }
.fig .tick { stroke: var(--faint); stroke-width: 2; }
.fig .nowl { stroke: var(--pink); stroke-width: 3; }
.fig .refl { stroke: var(--purple); stroke-width: 2.5; stroke-dasharray: 5 4; }
/* 変形アニメ */
.mv-stage { position: relative; margin: 6px 0; }
.mv-chip { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--en); font-weight: 800; font-size: 1.04em; padding: 3px 9px; border: 2.5px solid var(--line); border-radius: 10px; background: var(--card); line-height: 1.45; will-change: transform; }
.mv-chip.plain { border-color: transparent; background: none; padding: 3px 1px; }
.mv-meas { position: absolute; visibility: hidden; left: 0; top: 0; right: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; }
.mv-meas span { white-space: nowrap; font-family: var(--en); font-weight: 800; font-size: 1.04em; padding: 3px 9px; border: 2.5px solid transparent; line-height: 1.45; }
.mv-meas span.plain { padding: 3px 1px; }
.mv-lab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 900; font-size: 12.5px; color: var(--sub); }
.mv-lab .st { background: var(--soft); border: 2px solid var(--line); border-radius: 99px; padding: 0 10px; color: var(--ink); }
/* くじら・数直線など */
.whale-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.whale-g .wc { border: 2.5px solid var(--line); border-radius: 14px; padding: 8px; text-align: center; background: var(--soft2); }
.whale-g .wc .em { font-size: 44px; line-height: 1.1; }
.whale-g .wc .q { font-family: var(--en); font-weight: 900; font-size: 14px; }
.meter { height: 120px; width: 42px; margin: 6px auto; border: 2.5px solid var(--line); border-radius: 10px; background: var(--card); position: relative; overflow: hidden; }
.meter i { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: var(--blue); transition: height 1.1s cubic-bezier(.3, 1.3, .5, 1); }
.meter span { position: absolute; left: 0; right: 0; top: 4px; text-align: center; font-family: var(--en); font-weight: 900; font-size: 12px; z-index: 1; }
.whale-say { margin-top: 10px; padding: 10px; border-radius: 12px; border: 2.5px solid var(--line); background: var(--y2); font-weight: 800; min-height: 60px; }
.whale-say .en { font-size: 1.05em; }
.stepbar { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.nl-row { margin: 8px 0; }
.nl-cap { font-weight: 900; }
.sw-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 360px; margin: 8px auto; }
.sw-grid.two { grid-template-columns: repeat(2, 60px); justify-content: center; gap: 16px; }
.sw-grid.week { grid-template-columns: repeat(7, 1fr); }
.sw-grid i { aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--line); background: var(--card); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 12px; transition: background .4s, transform .4s; }
.sw-grid.week i { border-radius: 8px; font-size: 11px; }
.sw-grid i.on { background: var(--green); color: #fff; transform: scale(1.06); }
.sw-grid i.off { background: var(--red2); color: var(--red); }
.feel-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; text-align: center; }
.feel-row .who { border: 2.5px solid var(--line); border-radius: 14px; padding: 8px 4px; background: var(--soft2); }
.feel-row .who .em { font-size: 38px; line-height: 1.15; }
.feel-row .who b { display: block; font-family: var(--en); font-size: 13px; }
.feel-arrow { font-family: var(--en); font-weight: 900; font-size: 12px; text-align: center; }
.feel-arrow .ar { font-size: 30px; color: var(--pink); line-height: 1; display: block; animation: nudge 1s infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.feel-s { display: grid; gap: 8px; margin-top: 10px; }
.feel-s > div { border: 2.5px solid var(--line); border-radius: 12px; padding: 8px 10px; cursor: pointer; background: var(--card); }
.feel-s > div.on { background: var(--y2); box-shadow: var(--sh-s); }
.feel-s .en b { color: var(--pink); }
.subj-g { display: grid; grid-template-columns: 64px repeat(3, 1fr); gap: 6px; font-size: 13px; }
.subj-g > .h { font-weight: 900; text-align: center; background: var(--ink); color: var(--bg); border-radius: 8px; padding: 3px 2px; font-size: 12px; }
.subj-g > .rh { font-weight: 900; display: grid; place-items: center; text-align: center; font-size: 12px; line-height: 1.3; border-radius: 8px; background: var(--soft); border: 2px solid var(--line); }
.subj-g > .cell { min-height: 64px; border: 2px dashed var(--faint); border-radius: 10px; padding: 4px; position: relative; }
.subj-card { border: 2.5px solid var(--line); border-radius: 10px; padding: 4px 6px; background: var(--card); font-family: var(--en); font-weight: 800; font-size: 12.5px; line-height: 1.35; transition: transform .9s cubic-bezier(.4, 1.4, .5, 1), opacity .5s; box-shadow: 2px 2px 0 var(--shc); }
.subj-card small { display: block; font-family: var(--jp); font-size: 11px; color: var(--sub); font-weight: 700; }
.subj-card.real { background: var(--blue2); }
.subj-card.hyp { background: var(--pink2); }
.subj-note { margin-top: 10px; font-weight: 800; padding: 8px 10px; border-radius: 10px; background: var(--y2); border: 2px solid var(--line); }
@media (max-width: 420px) { .subj-g { grid-template-columns: 44px repeat(3, 1fr); gap: 4px; } .subj-card { font-size: 11px; padding: 3px 4px; } }

/* ---------- モーション講義 ---------- */
.lec { position: fixed; inset: 0; z-index: 50; background: var(--bg); background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 18px 18px; display: flex; flex-direction: column; }
.lec-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--ink); color: var(--bg); }
.lec-top .t { flex: 1; font-weight: 900; font-size: 14px; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lec-top button { background: none; border: 2px solid var(--bg); color: var(--bg); border-radius: 10px; padding: 3px 10px; font-weight: 900; cursor: pointer; font-size: 13px; }
.lec-prog { display: flex; gap: 3px; padding: 6px 12px; background: var(--ink); }
.lec-prog i { flex: 1; height: 5px; border-radius: 3px; background: #ffffff33; overflow: hidden; }
.lec-prog i.on { background: var(--y); }
.lec-body { flex: 1; overflow-y: auto; padding: 16px; max-width: 820px; width: 100%; margin: 0 auto; }
.lec-slide { animation: slideup .45s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes slideup { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.lec-slide .sn { font-family: var(--en); font-weight: 900; color: var(--pink); font-size: 14px; }
.lec-slide h2 { margin: 2px 0 12px; font-size: clamp(22px, 5.4vw, 32px); }
.lec-say { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; margin: 10px 0 12px; }
.lec-say .av { width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--line); background: var(--y); display: grid; place-items: center; font-size: 28px; box-shadow: var(--sh-s); }
.lec-say .bub { padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 18px; border-top-left-radius: 4px; background: var(--card); font-size: 1.06em; font-weight: 700; line-height: 1.7; box-shadow: var(--sh-s); min-height: 52px; }
.lec-say .bub .cur { display: inline-block; width: 8px; height: 1.1em; background: var(--pink); vertical-align: -3px; animation: blink .8s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lec-blocks > * { animation: slideup .5s .25s both; }
.lec-nav { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 2.5px solid var(--line); justify-content: center; }
.lec-nav .btn { flex: 1; max-width: 220px; }
.lec-end { text-align: center; padding: 30px 10px; }
.lec-end .big { font-size: 72px; animation: pop .6s; }

/* ---------- ドリル・ゲーム ---------- */
.dr-top { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.dr-top .bar { flex: 1; margin: 0; }
.dr-top .cnt { font-family: var(--en); font-weight: 900; font-size: 15px; white-space: nowrap; }
.dr-card { background: var(--card); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: var(--sh); padding: 16px; animation: pagein .25s; }
.dr-card .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; font-weight: 800; color: var(--sub); margin-bottom: 6px; }
.dr-q { font-family: var(--en); font-weight: 800; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.55; margin: 6px 0 14px; }
.dr-q.jp { font-family: var(--jp); font-size: 17px; }
.dr-q .blank { display: inline-block; min-width: 64px; border-bottom: 3px solid var(--pink); text-align: center; color: var(--pink); }
.dr-ja { font-size: 14px; color: var(--sub); font-weight: 700; margin-bottom: 10px; }
.sort-ans { min-height: 60px; padding: 8px; border: 2.5px dashed var(--line); border-radius: 14px; background: var(--soft2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-family: var(--en); font-weight: 800; }
.sort-ans .fixed { color: var(--sub); padding: 0 2px; }
.sort-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wchip { padding: 7px 12px; border: 2.5px solid var(--line); border-radius: 11px; background: var(--card); font-family: var(--en); font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 2px 2px 0 var(--shc); color: var(--ink); line-height: 1.3; }
.wchip.used { visibility: hidden; }
.sort-ans .wchip { background: var(--y2); box-shadow: none; }
.wchip.ok { background: var(--green) !important; color: #fff; }
.wchip.ng { background: var(--red) !important; color: #fff; }
.err-s { font-family: var(--en); font-weight: 700; font-size: clamp(17px, 4.3vw, 20px); line-height: 2.1; margin: 8px 0 12px; }
.err-s button { font: inherit; font-weight: 800; border: none; background: none; padding: 0 2px; border-bottom: 3px solid var(--ink); cursor: pointer; color: var(--ink); position: relative; line-height: 1.4; border-radius: 3px; }
.err-s button sup { font-size: 11px; font-family: var(--en); background: var(--ink); color: var(--bg); border-radius: 99px; padding: 0 5px; margin-left: 2px; }
.err-s button:hover { background: var(--y2); }
.err-s button.ok { background: var(--green2); border-color: var(--green); }
.err-s button.ng { background: var(--red2); border-color: var(--red); }
.err-s button.pick { background: var(--y); }
.svoc-line { display: flex; flex-wrap: wrap; gap: 14px 6px; margin: 10px 0 14px; }
.svoc-ch { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.svoc-ch .tx { font-family: var(--en); font-weight: 800; font-size: 17px; padding: 4px 9px; border: 2.5px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; }
.svoc-ch.sel .tx { background: var(--y); box-shadow: 0 0 0 3px var(--pink); }
.svoc-ch .rl { min-width: 34px; text-align: center; font-family: var(--en); font-weight: 900; font-size: 13px; border-radius: 99px; padding: 0 8px; border: 2px dashed var(--faint); color: var(--faint); line-height: 1.6; }
.svoc-ch .rl.set { border-style: solid; color: #fff; }
.svoc-ch .rl.S { background: var(--rS); border-color: var(--rS); } .svoc-ch .rl.V { background: var(--rV); border-color: var(--rV); } .svoc-ch .rl.O { background: var(--rO); border-color: var(--rO); } .svoc-ch .rl.C { background: var(--rC); border-color: var(--rC); } .svoc-ch .rl.M { background: var(--rM); border-color: var(--rM); }
.svoc-ch.wrong .tx { border-color: var(--red); background: var(--red2); }
.svoc-ch.right .tx { border-color: var(--green); background: var(--green2); }
.rolepad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.rolepad button { border: 2.5px solid var(--line); border-radius: 12px; font-family: var(--en); font-weight: 900; font-size: 18px; color: #fff; padding: 6px 0; cursor: pointer; box-shadow: 2px 2px 0 var(--shc); line-height: 1.2; }
.rolepad button small { display: block; font-family: var(--jp); font-size: 10px; font-weight: 800; }
.rolepad .S { background: var(--rS); } .rolepad .V { background: var(--rV); } .rolepad .O { background: var(--rO); } .rolepad .C { background: var(--rC); } .rolepad .M { background: var(--rM); }
.result { text-align: center; }
.result .score { font-family: var(--disp); font-size: clamp(44px, 12vw, 72px); line-height: 1.1; margin: 8px 0; }
.result .rank { display: inline-block; font-family: var(--disp); font-size: 22px; background: var(--y); border: 2.5px solid var(--line); border-radius: 14px; padding: 4px 16px; box-shadow: var(--sh-s); transform: rotate(-3deg); color: #141414; }
.rv { text-align: left; }
.rv-i { border: 2px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 8px 0; background: var(--card); }
.rv-i.ng { border-left: 7px solid var(--red); } .rv-i.ok { border-left: 7px solid var(--green); }
.rv-i .q { font-family: var(--en); font-weight: 800; }
.rv-i .a { font-size: 13.5px; color: var(--sub); }
.ghub { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .ghub { grid-template-columns: 1fr 1fr; } }
.gcard { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 14px; border: 2.5px solid #141414; border-radius: 18px; box-shadow: var(--sh); text-decoration: none; color: #141414; overflow: hidden; }
.gcard:active { transform: translate(3px, 3px); box-shadow: none; }
.gcard .ge { width: 64px; height: 64px; border-radius: 16px; border: 2.5px solid #141414; background: #fff; display: grid; place-items: center; font-size: 34px; }
.gcard b { font-family: var(--disp); font-weight: 400; font-size: 18px; display: block; line-height: 1.3; }
.gcard small { font-weight: 800; font-size: 12.5px; line-height: 1.45; display: block; }
.gcard .best { position: absolute; right: 10px; top: 8px; font-family: var(--en); font-weight: 900; font-size: 11px; background: #141414; color: #ffe14d; border-radius: 99px; padding: 0 8px; }
.hud { display: flex; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; }
.hud .t { font-family: var(--en); font-weight: 900; font-size: 26px; min-width: 60px; }
.hud .t.warn { color: var(--red); animation: pulse .5s infinite; }
.hud .sc { font-family: var(--en); font-weight: 900; font-size: 20px; }
.hud .combo { font-family: var(--disp); font-size: 16px; color: var(--pink); }
.boss { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; padding: 12px; border: 2.5px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, #2a1b4a, #4a1f33); color: #fff; margin-bottom: 12px; }
.boss .bm { font-size: 64px; text-align: center; line-height: 1; }
.boss .bm.hit { animation: hit .4s; }
@keyframes hit { 20% { transform: translateX(-8px) rotate(-8deg); filter: brightness(2); } 60% { transform: translateX(6px) rotate(5deg); } }
.boss .hp { height: 16px; border: 2px solid #fff; border-radius: 99px; background: #0005; overflow: hidden; margin-top: 4px; }
.boss .hp i { display: block; height: 100%; background: linear-gradient(90deg, #ff3b3b, #ff8a3d); transition: width .4s; }
.boss .nm { font-family: var(--disp); font-size: 17px; }
.hearts { font-size: 22px; letter-spacing: 2px; }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 65; animation: flash .35s forwards; }
.flash.ok { background: #1fb57a44; } .flash.ng { background: #ff3b3b44; }
@keyframes flash { to { opacity: 0; } }
.gorocard { perspective: 1000px; margin: 10px 0; }
.gorocard .in { position: relative; min-height: 240px; transition: transform .6s; transform-style: preserve-3d; cursor: pointer; }
.gorocard.flip .in { transform: rotateY(180deg); }
.gorocard .fc { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2.5px solid var(--line); border-radius: 18px; box-shadow: var(--sh); padding: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow-y: auto; }
.gorocard .front { background: var(--y2); }
.gorocard .back { background: var(--pink2); transform: rotateY(180deg); }

/* ---------- リスト（テク・語呂・構文・コラム） ---------- */
.list { display: grid; gap: 12px; }
.list.two { grid-template-columns: 1fr; }
@media (min-width: 700px) { .list.two { grid-template-columns: 1fr 1fr; } }
.kcard { display: block; padding: 12px 14px; background: var(--card); border: 2.5px solid var(--line); border-radius: 15px; box-shadow: var(--sh-s); text-decoration: none; }
.kcard:active { transform: translate(3px, 3px); box-shadow: none; }
.kcard .nm { font-weight: 900; font-size: 16px; line-height: 1.35; }
.kcard .pt { font-family: var(--en); font-weight: 800; color: var(--blue); margin: 2px 0; line-height: 1.4; }
.kcard .jj { font-size: 13.5px; color: var(--sub); }
.kcard .top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.kdet .pat { font-family: var(--en); font-weight: 900; font-size: clamp(19px, 5vw, 26px); color: var(--blue); line-height: 1.35; margin: 6px 0; }
.kdet .jat { font-weight: 900; font-size: 17px; background: var(--y2); display: inline; padding: 1px 4px; }
.colcard { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; padding: 12px; background: var(--card); border: 2.5px solid var(--line); border-radius: 15px; box-shadow: var(--sh-s); text-decoration: none; }
.colcard .ce { width: 54px; height: 54px; border-radius: 14px; border: 2.5px solid var(--line); background: var(--orange2); display: grid; place-items: center; font-size: 28px; }
.colcard b { display: block; font-weight: 900; line-height: 1.4; }
.colcard small { color: var(--sub); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article { font-size: 1.02em; line-height: 1.95; }
.article p { margin: 0 0 1.1em; }
.article h3 { border-left: 7px solid var(--orange); padding-left: 10px; margin: 26px 0 10px; }
.colhead { text-align: center; padding: 18px 10px; }
.colhead .ce { font-size: 64px; }
.colhead h1 { margin: 6px 0; }
.colhead .ld { font-weight: 800; color: var(--sub); }
.techcard { padding: 12px 14px; background: linear-gradient(135deg, var(--blue2), var(--purple2)); border: 2.5px solid var(--line); border-radius: 15px; box-shadow: var(--sh-s); }
.techcard .nm { font-weight: 900; font-size: 16.5px; line-height: 1.4; }
.techcard .nm::before { content: "⚡ "; }
.techcard .x { margin: 6px 0; }
.techcard .exx { font-size: .92em; background: var(--card); border-radius: 10px; padding: 6px 10px; border: 1.5px solid var(--line); margin-top: 6px; }
.techcard .why { margin-top: 8px; font-size: .9em; padding: 6px 10px; border: 2px dashed var(--line); border-radius: 10px; background: var(--card); }
.techcard .why::before { content: "🎓 なぜ効く？ "; font-weight: 900; }
.techcard .from { font-size: 12px; font-weight: 800; margin-top: 6px; }
.gcardx { padding: 14px; background: var(--pink2); border: 2.5px solid var(--line); border-radius: 15px; box-shadow: var(--sh-s); text-align: center; }
.gcardx .tg { font-size: 12.5px; font-weight: 900; color: var(--sub); }
.gcardx .gx { text-align: left; font-size: .93em; margin-top: 6px; }
.trapcard { padding: 12px 14px; background: var(--red2); border: 2.5px solid var(--line); border-radius: 15px; }
.trapcard .nm { font-weight: 900; }
.trapcard .ngok { display: grid; gap: 4px; margin-top: 6px; font-family: var(--en); font-weight: 800; font-size: .95em; }
.trapcard .ngok .n { color: var(--red); } .trapcard .ngok .o { color: var(--green); }
.qa { border: 2.5px solid var(--line); border-radius: 15px; background: var(--card); margin: 10px 0; overflow: hidden; }
.qa summary { padding: 12px 14px; font-weight: 900; cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: flex-start; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: "Q"; flex: none; width: 26px; height: 26px; display: grid; place-items: center; background: var(--pink); color: #fff; border-radius: 8px; font-family: var(--en); font-weight: 900; border: 2px solid var(--line); }
.qa[open] summary { background: var(--pink2); border-bottom: 2px solid var(--line); }
.qa .a { padding: 10px 14px 12px; }
.sumlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sumlist li { padding: 8px 12px 8px 36px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); position: relative; font-weight: 700; }
.sumlist li::before { content: "✔"; position: absolute; left: 11px; top: 8px; color: var(--green); font-weight: 900; }
.search-box { display: flex; gap: 8px; margin: 10px 0; }
.search-box input { flex: 1; min-width: 0; font: inherit; font-weight: 800; padding: 10px 14px; border: 2.5px solid var(--line); border-radius: 13px; background: var(--card); color: var(--ink); box-shadow: var(--sh-s); }
.sres { display: grid; gap: 8px; }
.sres a { display: block; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); text-decoration: none; }
.sres a .ty { font-size: 11px; font-weight: 900; background: var(--ink); color: var(--bg); border-radius: 99px; padding: 0 8px; margin-right: 6px; }
.sres a .sx { display: block; font-size: 13px; color: var(--sub); line-height: 1.5; }
.gloss dt { font-weight: 900; font-size: 17px; margin-top: 14px; }
.gloss dt small { font-weight: 700; color: var(--sub); font-size: 12px; margin-left: 6px; }
.gloss dd { margin: 4px 0 0; padding: 8px 12px; border-left: 5px solid var(--y); background: var(--card); border-radius: 0 10px 10px 0; }
.foot { text-align: center; font-size: 12.5px; color: var(--sub); margin: 40px 0 10px; line-height: 1.8; }
.foot a { font-weight: 900; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bdg { text-align: center; padding: 8px 4px; border: 2.5px solid var(--line); border-radius: 14px; background: var(--card); font-size: 11.5px; font-weight: 800; line-height: 1.3; }
.bdg .e { font-size: 30px; display: block; }
.bdg.off { opacity: .35; filter: grayscale(1); }
.ubars { display: grid; gap: 6px; }
.ubar { display: grid; grid-template-columns: 110px 1fr 44px; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; text-decoration: none; }
.ubar .bt { height: 12px; border: 2px solid var(--line); border-radius: 99px; background: var(--soft); overflow: hidden; }
.ubar .bt i { display: block; height: 100%; background: var(--green); }
.ubar .bt i.lo { background: var(--red); } .ubar .bt i.mid { background: var(--orange); }
.pill-note { display: inline-block; font-size: 12px; font-weight: 800; background: var(--soft); border: 1.5px solid var(--line); border-radius: 99px; padding: 1px 10px; }
.banner { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--y2); font-size: 13px; font-weight: 800; margin: 10px 0; }
.banner button { margin-left: auto; }
/* ---------- スマホ・タッチ操作 ---------- */
button, a, .opt, .wchip, .chip, [data-say] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1em) !important; } /* iOS のズーム防止 */
@media (pointer: coarse) {
  .chip { min-height: 40px; padding: 6px 13px; }
  .utabs a { padding: 8px 12px; }
  .fig .tbtns button { padding: 7px 12px; font-size: 13.5px; min-height: 38px; }
  .fig .fh button { padding: 5px 12px; font-size: 13px; }
  .say { width: 40px; height: 40px; }
  .say svg { width: 19px; height: 19px; }
  .lec-top button { padding: 7px 12px; font-size: 14px; }
  .btn.sm { min-height: 42px; padding: 8px 13px; }
  .toc a { padding: 11px 12px; }
  .drawer a.di { padding: 12px; }
  .err-s button { padding: 2px 4px; }
  .svoc-ch .tx { padding: 7px 11px; }
}
@media (max-width: 600px) { .utabs { position: static; padding: 2px 0; } }
@media (max-width: 420px) {
  main { padding: 12px 12px 30px; }
  .hero { margin: -12px -12px 0; padding: 22px 14px 18px; }
  .card { padding: 14px 12px; }
  .lesson > .lb { padding: 4px 12px 14px; }
  .box, .steps, .bars, .flow, .qbox, .struct { padding-left: 11px; padding-right: 11px; }
  .fig .fb { padding: 8px 9px 11px; }
  .exi { padding: 9px 10px; gap: 4px 8px; }
  .dr-card { padding: 14px 12px; }
  .opt { font-size: 15.5px; }
  .tbl th, .tbl td { padding: 7px 8px; }
  .brow { grid-template-columns: minmax(64px, 34%) 1fr; }
}
@media (max-width: 340px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile { min-height: 96px; padding: 10px; }
  .tile b { font-size: 15px; }
  .rolepad button { font-size: 16px; }
  .tabs a { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print { .top, .tabs, .utabs, .drawer, .scrim { display: none !important; } body { background: #fff; padding: 0; } .card, .lesson { box-shadow: none; } }