/* ================================================================
   zemi.css — 超絶受験イングリッシュ（2026-11-15 作り直し）
   ユーザー「PDFは付録。文法の4択・長文読解講座・英文解釈講座・ゲームが主役」「もっとポップに。今のは地味すぎ」
   「洋楽サイト（/yogaku/）の UI に満足している」
   - 生成りの地・黒い太字・黄と赤ピンクの差し色・丸いボタン・英語の細長いラベル（洋楽サイトと同じ家族の見た目）
   - いちばん最後に読む（style.css → dojo.css → ux.css → zemi.css）。古いページの色もここでそろえる
   - ライトだけ（ダークは作らない）
   ================================================================ */
:root, :root[data-theme='dark'], :root[data-theme='auto'] {
  --z-bg: #fff9ee; --z-bg2: #fdf0d8; --z-card: #fff; --z-ink: #1b1a22; --z-ink2: #4a4756; --z-mute: #7b7787; --z-line: #eadfcb;
  --z-sun: #ffc928; --z-sun2: #ffe58a; --z-hot: #f0245a; --z-sky: #1e9bf0; --z-mint: #12b886; --z-orange: #ff7a1a; --z-vio: #7c4dff;
  --z-r: 18px; --z-sh: 0 2px 0 rgba(27, 26, 34, 0.04), 0 14px 30px -18px rgba(27, 26, 34, 0.35);
  --z-disp: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --z-maru: 'Zen Maru Gothic', 'Zen Kaku Gothic New', 'Hiragino Maru Gothic ProN', sans-serif;
  /* 古いページ（シート・大学別・道場）の色を新しい色に合わせる */
  --bg: var(--z-bg); --bg2: var(--z-bg2); --card: #fff; --paper: #fff; --ink: var(--z-ink); --ink2: var(--z-ink2); --mute: var(--z-mute);
  --line: var(--z-line); --line2: #dccdb0; --navy: #1b1a22; --navy2: #33313f; --acc: var(--z-hot); --acc-bg: #ffe9ef; --mk: var(--z-sun); --mk-bg: #fff4cc;
  --brand: #1b1a22; --brand2: var(--z-hot); --on-brand: #fff; --hdr: rgba(255, 249, 238, 0.94); --hl: var(--z-sun); --logo2: var(--z-hot);
  color-scheme: light;
}
body { background: var(--z-bg); color: var(--z-ink); }
h1, h2, h3 { font-family: var(--z-maru); }

/* ---------- 上の帯 ---------- */
.hd { background: var(--hdr); border-bottom: 1px solid var(--z-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hd .logo, .hd .logo-t b { color: var(--z-ink); }
.hd .logo { gap: 9px; text-decoration: none; }
.z-logo { width: 38px; height: 38px; flex: none; display: block; }
.hd .logo-t b { font: 400 1.45rem/1 var(--z-disp); letter-spacing: 0.04em; display: block; }
.hd .logo-t b i { font-style: normal; color: var(--z-hot); }
.hd .logo-t small { color: var(--z-mute); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; }
.hd .ib { color: var(--z-ink); background: #fff; border: 1px solid var(--z-line); border-radius: 50%; width: 42px; height: 42px; }
.hd .ib.hb { background: var(--z-ink); border-color: var(--z-ink); }
.hd .hb span { background: #fff; }
.hd .js-theme { display: none; }
.hd-nav a { color: var(--z-ink); font-weight: 800; font-size: 0.9rem; }
.hd-nav a:hover { color: var(--z-hot); }
.tabbar { background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--z-line); }
.tabbar a, .tabbar button { color: var(--z-mute); font-weight: 800; }
.tabbar a.on, .tabbar a[aria-current] { color: var(--z-ink); }
.tabbar a.on span, .tabbar a[aria-current] span { background: var(--z-sun); border-radius: 999px; }
.tabbar a span, .tabbar button span { display: grid; place-items: center; width: 44px; height: 26px; margin: 0 auto 1px; }
.btn-pri, .mbar .btn-pri { background: var(--z-ink); border-color: var(--z-ink); color: #fff; border-radius: 999px; }
.totop { background: var(--z-ink); color: #fff; border-radius: 50%; }
.ft { background: var(--z-ink); color: #d9d6e0; border-top: 0; margin-top: 40px; }
.ft a, .ft .logo-t b { color: #fff; }
.ft .logo-t small, .ft p, .ft-col b { color: #b3afbf; }
.ft-cr { border-top: 1px solid #3a3846; }
.ft-hara { background: var(--z-sun); color: var(--z-ink) !important; border-radius: 999px; }
.ft-hara * { color: var(--z-ink) !important; }
.dw { background: var(--z-bg); }
.dw-top { font-weight: 800; }
.dw-g { font: 400 0.95rem var(--z-disp); letter-spacing: 0.12em; color: var(--z-hot); }

/* ================================================================
   新しいページ（main.z）
   ================================================================ */
main.z { padding: 0 0 56px; max-width: none; overflow-x: clip; }
.z-w { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.z-w.narrow { max-width: 760px; }
.z-sec { padding: 34px 0 6px; }
.z-kick { display: flex; align-items: center; gap: 8px; font: 400 0.95rem/1 var(--z-disp); letter-spacing: 0.16em; color: var(--z-hot); margin: 0 0 8px; }
.z-kick::before { content: ''; width: 34px; height: 6px; flex: none; background: radial-gradient(circle, currentColor 2.6px, transparent 3px) 0 0 / 9px 6px repeat-x; }
.z-h2 { font: 900 clamp(1.45rem, 6vw, 2.1rem)/1.25 var(--z-maru); letter-spacing: -0.01em; margin: 0 0 8px; }
.z-h2 em, .z-h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--z-sun) 62%); }
.z-sub { color: var(--z-ink2); font-size: 0.95rem; line-height: 1.75; margin: 0 0 16px; }
.z-sech { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.z-more { flex: none; font-weight: 800; font-size: 0.86rem; color: var(--z-ink); text-decoration: none; border-bottom: 2px solid var(--z-sun); padding-bottom: 1px; margin-bottom: 12px; white-space: nowrap; }
.z-bc { font-size: 0.78rem; color: var(--z-mute); padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.z-bc a { color: var(--z-mute); }

/* ボタン */
.z-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--z-ink); background: #fff; color: var(--z-ink); font: 900 1rem/1.2 var(--z-maru); text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 var(--z-ink); transition: transform 0.12s, box-shadow 0.12s; -webkit-tap-highlight-color: transparent; }
.z-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--z-ink); }
.z-btn.sun { background: var(--z-sun); }
.z-btn.ink { background: var(--z-ink); color: #fff; box-shadow: 0 4px 0 #6b6878; }
.z-btn.hot { background: var(--z-hot); color: #fff; }
.z-btn.sm { min-height: 40px; padding: 0 16px; font-size: 0.88rem; box-shadow: 0 3px 0 var(--z-ink); }
.z-btn.wide { width: 100%; }
.z-btn .ic { width: 20px; height: 20px; }
.z-btn[disabled] { opacity: 0.4; pointer-events: none; }
.z-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0; }
.z-tag { display: inline-block; font: 400 0.82rem/1 var(--z-disp); letter-spacing: 0.1em; padding: 5px 9px 4px; border-radius: 6px; background: var(--z-ink); color: #fff; }
.z-tag.sun { background: var(--z-sun); color: var(--z-ink); } .z-tag.hot { background: var(--z-hot); } .z-tag.sky { background: var(--z-sky); } .z-tag.mint { background: var(--z-mint); } .z-tag.vio { background: var(--z-vio); } .z-tag.orange { background: var(--z-orange); }
.z-card { background: #fff; border: 1px solid var(--z-line); border-radius: var(--z-r); box-shadow: var(--z-sh); }

/* ---------- トップ：ヒーロー ---------- */
.z-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 80% 0%, #ffe58a 0%, rgba(255, 229, 138, 0) 60%), var(--z-bg); padding: 22px 0 0; }
.z-hero .z-w { position: relative; }
.z-hero-k { font-size: 0.86rem; font-weight: 800; color: var(--z-ink2); margin: 0 0 6px; line-height: 1.6; }
.z-h1 { font: 900 clamp(2.5rem, 12.5vw, 4.6rem)/1.08 var(--z-maru); letter-spacing: -0.03em; margin: 0 0 12px; }
.z-h1 span { display: block; }
.z-h1 .c2 { color: var(--z-sky); } .z-h1 .c3 { color: var(--z-hot); }
.z-hero-l { font-size: 1rem; line-height: 1.8; color: var(--z-ink2); margin: 0 0 4px; max-width: 30em; }
.z-hero-l b { color: var(--z-ink); background: linear-gradient(transparent 62%, var(--z-sun2) 62%); }
.z-hero-art { display: block; width: 100%; height: auto; border-radius: 22px; border: 3px solid var(--z-ink); box-shadow: 0 6px 0 var(--z-ink); margin: 20px 0 0; aspect-ratio: 16/9; object-fit: cover; }
@media (min-width: 860px) {
  .z-hero > .z-w:first-child { display: grid; grid-template-columns: 1fr 1.05fr; gap: 34px; align-items: center; padding-top: 18px; padding-bottom: 8px; }
  .z-hero-art { margin: 0; }
}
/* 数字 */
.z-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 22px 0 0; padding: 14px 0 4px; }
.z-stats a { text-decoration: none; color: var(--z-ink); text-align: center; }
.z-stats b { display: block; font: 400 clamp(2rem, 9vw, 3rem)/1 var(--z-disp); letter-spacing: 0.02em; }
.z-stats small { display: block; font-size: 0.68rem; font-weight: 800; color: var(--z-mute); margin-top: 2px; }
/* 流れる帯 */
.z-tick { background: var(--z-ink); color: #fff; overflow: hidden; white-space: nowrap; margin-top: 16px; padding: 11px 0 10px; font-weight: 800; font-size: 0.9rem; }
.z-tick div { display: inline-block; padding-left: 100%; animation: z-tick 46s linear infinite; }
.z-tick span { margin-right: 34px; }
.z-tick span::before { content: '★'; color: var(--z-sun); margin-right: 8px; }
@keyframes z-tick { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .z-tick div { animation: none; padding-left: 16px; } }

/* 更新情報 */
.z-new { position: relative; padding: 16px 16px 14px; margin: 22px 0 0; }
.z-new-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.z-new-h b { font: 900 1.05rem var(--z-maru); }
.z-new-h small { color: var(--z-mute); font-weight: 700; font-size: 0.78rem; }
.z-new ul { list-style: none; margin: 0; padding: 0; }
.z-new li a { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 11px 0; border-bottom: 1px dashed var(--z-line); text-decoration: none; color: var(--z-ink); font-weight: 800; font-size: 0.92rem; }
.z-new li:last-child a { border-bottom: 0; }
.z-new time { font: 400 1.05rem/1 var(--z-disp); background: var(--z-sun2); border-radius: 6px; padding: 5px 7px 3px; }
.z-new li span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.z-new li i { font-style: normal; color: var(--z-hot); }
.z-burst { position: absolute; right: -6px; top: -20px; width: 76px; height: 76px; display: grid; place-items: center; background: var(--z-hot); color: #fff; font: 400 1.15rem/0.95 var(--z-disp); letter-spacing: 0.04em; text-align: center; transform: rotate(12deg); clip-path: polygon(50% 0, 61% 12%, 75% 6%, 79% 21%, 94% 21%, 90% 36%, 100% 46%, 90% 58%, 97% 72%, 82% 76%, 79% 92%, 64% 88%, 50% 100%, 36% 88%, 21% 92%, 18% 76%, 3% 72%, 10% 58%, 0 46%, 10% 36%, 6% 21%, 21% 21%, 25% 6%, 39% 12%); }

/* 4本柱 */
.z-pil { display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .z-pil { grid-template-columns: 1fr 1fr; } }
.z-pil li { position: relative; overflow: hidden; border-radius: 22px; border: 3px solid var(--z-ink); box-shadow: 0 6px 0 var(--z-ink); background: var(--pc, #fff); }
.z-pil a.main { display: grid; grid-template-columns: 1fr 42%; gap: 4px; align-items: stretch; text-decoration: none; color: var(--z-ink); min-height: 172px; }
.z-pil .tx { padding: 16px 4px 14px 16px; display: flex; flex-direction: column; }
.z-pil .en { font: 400 0.9rem/1 var(--z-disp); letter-spacing: 0.14em; opacity: 0.75; margin: 0 0 6px; }
.z-pil h3 { font: 900 1.5rem/1.2 var(--z-maru); margin: 0 0 6px; letter-spacing: -0.01em; }
.z-pil p { font-size: 0.86rem; line-height: 1.6; margin: 0 0 10px; font-weight: 600; }
.z-pil .go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--z-ink); color: #fff; border-radius: 999px; padding: 8px 14px; font: 900 0.86rem var(--z-maru); }
.z-pil img { width: 100%; height: 100%; object-fit: cover; display: block; border-left: 3px solid var(--z-ink); }
.z-pil .n { font: 400 1.05rem/1 var(--z-disp); background: #fff; border: 2px solid var(--z-ink); border-radius: 999px; padding: 4px 9px 2px; margin-left: 6px; vertical-align: 3px; }

/* 学習の道すじ */
.z-road { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: rd; }
@media (min-width: 760px) { .z-road { grid-template-columns: repeat(4, 1fr); } }
.z-road li { counter-increment: rd; }
.z-road a { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; height: 100%; padding: 14px; text-decoration: none; color: var(--z-ink); background: #fff; border: 1px solid var(--z-line); border-radius: var(--z-r); box-shadow: var(--z-sh); }
.z-road a::before { content: counter(rd); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--z-sun); border: 2px solid var(--z-ink); font: 400 1.6rem/1 var(--z-disp); padding-top: 3px; box-sizing: border-box; }
.z-road b { display: block; font: 900 1rem var(--z-maru); }
.z-road small { display: block; color: var(--z-ink2); font-size: 0.8rem; line-height: 1.5; margin-top: 2px; }
.z-road .pr { display: block; font-size: 0.74rem; font-weight: 800; color: var(--z-hot); margin-top: 4px; }

/* 自分の記録 */
.z-me { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 18px 0 0; padding: 12px 6px; text-align: center; }
.z-me div, .z-me a { text-decoration: none; color: var(--z-ink); border-left: 1px dashed var(--z-line); padding: 0 4px; }
.z-me > :first-child { border-left: 0; }
.z-me small { display: block; font-size: 0.68rem; font-weight: 800; color: var(--z-mute); }
.z-me b { font: 400 1.9rem/1.1 var(--z-disp); }
.z-me b i { font: 800 0.7rem var(--jp); font-style: normal; margin-left: 1px; }

/* ---------- 4択（どのページでも同じ部品） ---------- */
.zq { padding: 18px 16px 16px; margin: 0 0 16px; }
.zq-n { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.zq-q { font: 600 1.12rem/1.6 var(--en, Georgia), var(--jp); margin: 0 0 14px; word-break: break-word; }
.zq-q.ja { font-family: var(--jp); font-weight: 800; font-size: 1rem; }
.zq-q .blank { display: inline-block; min-width: 3.2em; border-bottom: 3px solid var(--z-hot); margin: 0 3px; vertical-align: baseline; }
.zq-c { display: grid; gap: 10px; }
.zq-c button { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left; min-height: 54px; padding: 8px 46px 8px 10px; border-radius: 14px; border: 2px solid var(--z-ink); background: #fff; color: var(--z-ink); font: 700 1rem/1.4 var(--en, Georgia), var(--jp); cursor: pointer; box-shadow: 0 3px 0 var(--z-ink); transition: transform 0.1s, box-shadow 0.1s, background 0.15s; -webkit-tap-highlight-color: transparent; }
.zq-c button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--z-ink); }
.zq-c button > i { font: 400 1.25rem/1 var(--z-disp); font-style: normal; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--kc, var(--z-sun)); color: var(--z-ink); padding-top: 2px; box-sizing: border-box; }
.zq-c button:nth-child(1) { --kc: #ffc928; } .zq-c button:nth-child(2) { --kc: #7fd0ff; } .zq-c button:nth-child(3) { --kc: #8fe3c4; } .zq-c button:nth-child(4) { --kc: #ffb3c7; }
.zq-c button[disabled] { cursor: default; box-shadow: none; transform: none; }
.zq-c button.ok { background: #e3f9ef; border-color: var(--z-mint); }
.zq-c button.ng { background: #ffe9ef; border-color: var(--z-hot); }
.zq-c button.dim { opacity: 0.45; }
.zq-c button .mk { position: absolute; right: 10px; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
.zq-c button .mk * { fill: none; stroke-width: 5; stroke-linecap: round; }
.zq-c button.ok .mk * { stroke: var(--z-mint); } .zq-c button.ng .mk * { stroke: var(--z-hot); }
.zq-fb { margin: 14px 0 0; padding: 14px; border-radius: 14px; background: var(--z-bg); border: 1px dashed #d8c8a6; font-size: 0.93rem; line-height: 1.8; }
.zq-fb b.h { display: inline-block; font: 900 1.05rem var(--z-maru); margin: 0 0 4px; }
.zq-fb b.h.ok { color: var(--z-mint); } .zq-fb b.h.ng { color: var(--z-hot); }
.zq-fb .tr { color: var(--z-ink2); font-size: 0.86rem; margin: 6px 0 0; }
.zq-fb .z-btn { margin-top: 12px; }

/* ---------- 文法：単元の一覧 ---------- */
.z-phd { padding: 8px 0 0; }
.z-phd .z-w { display: grid; gap: 14px; align-items: center; }
.z-phd h1 { font: 900 clamp(1.9rem, 8.6vw, 3rem)/1.15 var(--z-maru); letter-spacing: -0.02em; margin: 4px 0 8px; }
.z-phd h1 em { font-style: normal; color: var(--z-hot); }
.z-phd p { margin: 0; color: var(--z-ink2); line-height: 1.8; font-size: 0.96rem; }
.z-phd img { width: 100%; max-width: 420px; aspect-ratio: 1; object-fit: cover; border-radius: 22px; border: 3px solid var(--z-ink); box-shadow: 0 6px 0 var(--z-ink); justify-self: center; }
.z-phd.wideart img { aspect-ratio: 16/9; max-width: none; }
@media (max-width: 759px) { .z-phd img { max-width: 240px; } .z-phd.wideart img { max-width: none; } }
@media (min-width: 760px) { .z-phd .z-w { grid-template-columns: 1fr 340px; gap: 30px; } }
.z-grp { font: 900 1.05rem var(--z-maru); margin: 24px 0 10px; display: flex; align-items: center; gap: 8px; }
.z-grp::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--gc, var(--z-hot)); border: 2px solid var(--z-ink); }
.z-units { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .z-units { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .z-units { grid-template-columns: repeat(4, 1fr); } }
.z-units a { position: relative; display: block; height: 100%; padding: 12px 12px 10px; text-decoration: none; color: var(--z-ink); background: #fff; border: 2px solid var(--z-ink); border-radius: 14px; box-shadow: 0 3px 0 var(--z-ink); box-sizing: border-box; }
.z-units a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--z-ink); }
.z-units b { display: block; font: 900 0.98rem/1.35 var(--z-maru); padding-right: 30px; }
.z-units small { display: block; font-size: 0.72rem; font-weight: 800; color: var(--z-mute); margin-top: 4px; }
.z-units .bst { position: absolute; right: 8px; top: 8px; min-width: 30px; height: 30px; padding: 2px 4px 0; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; background: var(--z-bg2); font: 400 0.95rem/1 var(--z-disp); color: var(--z-mute); }
.z-units .bst.on { background: var(--z-sun); color: var(--z-ink); } .z-units .bst.full { background: var(--z-mint); color: #fff; }

/* ---------- 4択バトル（単元ページ・ゲーム） ---------- */
.gb { margin: 18px 0 0; }
.gb-start { padding: 18px 16px; text-align: center; }
.gb-start h2 { font: 900 1.25rem var(--z-maru); margin: 0 0 6px; }
.gb-start p { margin: 0 0 14px; color: var(--z-ink2); font-size: 0.9rem; line-height: 1.7; }
.gb-modes { display: grid; gap: 12px; }
@media (min-width: 560px) { .gb-modes { grid-template-columns: 1fr 1fr; } }
.gb-hud { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 0 0 10px; font-weight: 800; font-size: 0.86rem; }
.gb-hud .cnt { font: 400 1.3rem/1 var(--z-disp); }
.gb-bar { height: 12px; border-radius: 999px; background: #fff; border: 2px solid var(--z-ink); overflow: hidden; }
.gb-bar i { display: block; height: 100%; width: 100%; background: var(--z-sun); transition: width 0.1s linear; }
.gb-bar i.low { background: var(--z-hot); }
.gb-combo { font: 400 1.15rem/1 var(--z-disp); background: var(--z-hot); color: #fff; border-radius: 999px; padding: 5px 10px 3px; visibility: hidden; }
.gb-combo.on { visibility: visible; }
.gb-score { font: 400 1.3rem/1 var(--z-disp); }
.z-res { text-align: center; padding: 24px 16px 20px; }
.z-res .ring { width: 150px; height: 150px; margin: 0 auto 10px; position: relative; }
.z-res .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.z-res .ring circle { fill: none; stroke-width: 12; }
.z-res .ring .bg { stroke: var(--z-bg2); } .z-res .ring .fg { stroke: var(--z-hot); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1); }
.z-res .ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 3.2rem/1 var(--z-disp); padding-top: 6px; }
.z-res .ring b small { font: 800 0.9rem var(--jp); margin-left: 2px; }
.z-res h2 { font: 900 1.5rem var(--z-maru); margin: 0 0 4px; }
.z-res p { color: var(--z-ink2); margin: 0 0 12px; font-size: 0.92rem; line-height: 1.7; }
.z-res .cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.z-res .cells div { background: var(--z-bg); border-radius: 12px; padding: 8px 4px 6px; }
.z-res .cells small { display: block; font-size: 0.7rem; font-weight: 800; color: var(--z-mute); }
.z-res .cells b { font: 400 1.6rem/1.1 var(--z-disp); }
.z-res .z-acts { justify-content: center; }
.z-miss { text-align: left; margin: 18px 0 0; padding: 14px; background: var(--z-bg); border-radius: 14px; }
.z-miss h3 { font: 900 0.95rem var(--z-maru); margin: 0 0 8px; }
.z-miss li { font-size: 0.88rem; line-height: 1.6; margin: 0 0 8px; }
.z-miss ol { margin: 0; padding-left: 1.3em; }
.z-miss b { color: var(--z-mint); }
/* おさらい（まとめ・PDF は付録） */
.z-3 { padding: 16px; margin: 18px 0 0; }
.z-3 h2 { font: 900 1.1rem var(--z-maru); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.z-3 ol { margin: 0; padding-left: 1.4em; line-height: 1.85; font-size: 0.95rem; }
.z-3 mark, .kp mark, .rp-say mark, .z-point mark { background: linear-gradient(transparent 58%, var(--z-sun) 58%); color: inherit; padding: 0; }
.z-app { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px; margin: 12px 0 0; text-decoration: none; color: var(--z-ink); }
.z-app img { width: 64px; height: 90px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--z-line); }
.z-app b { display: block; font: 900 0.95rem/1.4 var(--z-maru); }
.z-app small { display: block; color: var(--z-mute); font-size: 0.78rem; font-weight: 700; margin-top: 2px; }
.z-app .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.z-app .acts a { font-size: 0.8rem; font-weight: 800; color: var(--z-ink); text-decoration: none; border: 2px solid var(--z-ink); border-radius: 999px; padding: 5px 12px; background: #fff; }
.z-app .acts a.dl { background: var(--z-sun); }
.z-apph { font: 400 0.95rem var(--z-disp); letter-spacing: 0.14em; color: var(--z-mute); margin: 26px 0 0; }

/* ---------- 講座の一覧 ---------- */
.z-lv { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; }
.z-lv h2 { font: 900 1.3rem var(--z-maru); margin: 0; }
.z-lv small { color: var(--z-mute); font-weight: 800; font-size: 0.8rem; margin-left: auto; }
.z-les { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .z-les { grid-template-columns: 1fr 1fr; } }
.z-les a { display: grid; grid-template-columns: 46px 1fr 28px; gap: 12px; align-items: center; height: 100%; padding: 12px; box-sizing: border-box; text-decoration: none; color: var(--z-ink); background: #fff; border: 2px solid var(--z-ink); border-radius: 16px; box-shadow: 0 3px 0 var(--z-ink); }
.z-les a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--z-ink); }
.z-les .no { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--lc, var(--z-sun)); font: 400 1.5rem/1 var(--z-disp); padding-top: 3px; box-sizing: border-box; color: var(--z-ink); }
.z-les b { display: block; font: 900 0.98rem/1.4 var(--z-maru); }
.z-les small { display: block; color: var(--z-ink2); font-size: 0.8rem; line-height: 1.5; margin-top: 2px; }
.z-les .ck { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--z-line); display: grid; place-items: center; color: transparent; }
.z-les a.done .ck { background: var(--z-mint); border-color: var(--z-mint); color: #fff; }
.z-les .ck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 講座のページ（共通） ---------- */
.z-lhd { padding: 6px 0 4px; }
.z-lhd .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 8px; }
.z-lhd h1 { font: 900 clamp(1.5rem, 6.6vw, 2.2rem)/1.3 var(--z-maru); letter-spacing: -0.01em; margin: 0 0 10px; }
.z-catch { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin: 0 0 6px; }
.z-catch img { width: 64px; height: 64px; object-fit: contain; }
.z-catch p { position: relative; margin: 0; padding: 12px 14px; background: #fff; border: 2px solid var(--z-ink); border-radius: 16px; font: 900 1.02rem/1.5 var(--z-maru); }
.z-catch p::before { content: ''; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: #fff; border-left: 2px solid var(--z-ink); border-bottom: 2px solid var(--z-ink); transform: rotate(45deg); }
.z-point { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--z-r); background: var(--z-ink); color: #fff; line-height: 1.8; font-size: 0.98rem; }
.z-point > b:first-child { display: block; font: 400 0.92rem var(--z-disp); letter-spacing: 0.14em; color: var(--z-sun); margin: 0 0 2px; }
.z-point mark { color: #fff; background: linear-gradient(transparent 58%, rgba(255, 201, 40, 0.55) 58%); }
.z-trap { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #ffe9ef; font-size: 0.92rem; line-height: 1.75; }
.z-trap > b:first-child { display: inline-block; font: 400 0.9rem var(--z-disp); letter-spacing: 0.12em; color: #fff; background: var(--z-hot); border-radius: 6px; padding: 4px 8px 2px; margin-right: 8px; }
.z-h3 { font: 900 1.2rem var(--z-maru); margin: 30px 0 12px; display: flex; align-items: center; gap: 10px; }
.z-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 30px 0 0; }
.z-pn a { display: block; padding: 12px; text-decoration: none; color: var(--z-ink); background: #fff; border: 1px solid var(--z-line); border-radius: 14px; }
.z-pn a.n { text-align: right; background: var(--z-sun); border: 2px solid var(--z-ink); box-shadow: 0 3px 0 var(--z-ink); }
.z-pn small { display: block; font-size: 0.72rem; font-weight: 800; color: var(--z-ink2); }
.z-pn b { display: block; font: 900 0.9rem/1.4 var(--z-maru); margin-top: 2px; }
.z-done { margin: 26px 0 0; text-align: center; }
.z-done .z-btn.on { background: var(--z-mint); color: #fff; }
.z-more2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.z-more2 li { padding: 14px; }
.z-more2 .en { font: 600 1.05rem/1.6 var(--en, Georgia); margin: 0 0 6px; }
.z-more2 details summary { cursor: pointer; font-weight: 800; font-size: 0.86rem; color: var(--z-hot); }
.z-more2 details p { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.7; }
.z-more2 details p.tip { color: var(--z-ink2); }

/* ---------- 英文解釈プレーヤー ---------- */
.kp { position: relative; padding: 14px 14px 12px; margin: 0 0 14px; border: 3px solid var(--z-ink); box-shadow: 0 6px 0 var(--z-ink); border-radius: 22px; background: #fff; }
.kp-top { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.kp-top .dots { margin-left: auto; display: flex; gap: 5px; }
.kp-top .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--z-line); }
.kp-top .dots i.on { background: var(--z-hot); }
.kp-s { font: 500 clamp(1.22rem, 5.2vw, 1.6rem)/3 var(--en, Georgia), serif; padding: 2px 0 14px; word-spacing: 0.08em; min-height: 6em; }
.kp-s .w { position: relative; display: inline-block; white-space: nowrap; line-height: 1.5; transition: opacity 0.3s; padding: 0 0.04em; }
.kp-s .w .t { position: relative; display: inline-block; z-index: 1; }
.kp-s .w .ul { position: absolute; left: -0.16em; right: -0.16em; bottom: -5px; height: 5px; background: var(--rc); transform-origin: left center; }
.kp-s .w.rs .ul { border-radius: 3px 0 0 3px; left: 0; } .kp-s .w.re .ul { border-radius: 0 3px 3px 0; right: 0; } .kp-s .w.rs.re .ul { border-radius: 3px; }
.kp-s .w.sb .ul { height: 3px; bottom: -4px; opacity: 0.8; }
.kp-s .w .lb { position: absolute; left: 0; bottom: -27px; min-width: 20px; height: 20px; padding: 1px 5px 0; box-sizing: border-box; display: grid; place-items: center; border-radius: 6px; background: var(--rc); color: #fff; font: 400 0.95rem/1 var(--z-disp); z-index: 2; }
.kp-s .w.sb .lb { background: #fff; color: var(--rc); border: 2px solid var(--rc); height: 19px; min-width: 19px; font-size: 0.85rem; text-transform: lowercase; font-family: var(--jp); font-weight: 900; padding: 0 4px; }
.kp-s .r-S { --rc: var(--z-sky); } .kp-s .r-V { --rc: var(--z-hot); } .kp-s .r-O { --rc: var(--z-mint); } .kp-s .r-C { --rc: var(--z-orange); } .kp-s .r-M { --rc: #9a96a6; }
.kp-s .br { display: inline-block; font: 900 1.15em/1 var(--jp); margin: 0 0.02em; transform-origin: center; }
.kp-s .br.b1 { color: var(--z-vio); } .kp-s .br.b2 { color: #0b8f7a; } .kp-s .br.b3 { color: #b0731a; }
.kp-s .w.hi .t::before { content: ''; position: absolute; left: -3px; right: -3px; top: 8%; bottom: 2%; background: var(--z-sun); border-radius: 5px; z-index: -1; }
.kp-s .w.dimmed { opacity: 0.22; }
.kp-say { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; min-height: 86px; }
.kp-say img { width: 44px; height: 44px; object-fit: contain; }
.kp-say p, .rp-say p { margin: 0; padding: 11px 13px; border-radius: 4px 16px 16px 16px; background: var(--z-bg); border: 1px solid var(--z-line); font-size: 0.95rem; line-height: 1.75; }
.kp-say p b, .rp-say p b { color: var(--z-hot); }
.kp-ch { display: flex; flex-wrap: wrap; gap: 6px 4px; margin: 4px 0 10px; }
.kp-ch span { display: inline-flex; flex-direction: column; align-items: flex-start; padding: 6px 9px; border-radius: 10px; background: var(--z-bg); border: 1px solid var(--z-line); }
.kp-ch span b { font: 500 0.95rem/1.3 var(--en, Georgia); }
.kp-ch span i { font-style: normal; font-size: 0.8rem; font-weight: 800; color: var(--z-hot); line-height: 1.4; }
.kp-ja { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--z-sun2); font: 900 1rem/1.7 var(--z-maru); }
.kp-ja small { display: block; font: 400 0.82rem var(--z-disp); letter-spacing: 0.14em; color: var(--z-ink2); }
.kp-ctl { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 10px; }
.kp-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font-size: 0.72rem; font-weight: 800; color: var(--z-mute); }
.kp-leg i { font-style: normal; font-weight: 900; margin-right: 2px; }

/* ---------- 長文読解プレーヤー ---------- */
.z-tech { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: tc; }
@media (min-width: 700px) { .z-tech { grid-template-columns: 1fr 1fr; } }
.z-tech li { counter-increment: tc; position: relative; padding: 14px 14px 14px 58px; }
.z-tech li::before { content: counter(tc); position: absolute; left: 12px; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--z-sun); border: 2px solid var(--z-ink); font: 400 1.3rem/1 var(--z-disp); padding-top: 3px; box-sizing: border-box; }
.z-tech b { display: block; font: 900 1rem/1.4 var(--z-maru); }
.z-tech span { display: block; font-size: 0.9rem; line-height: 1.7; color: var(--z-ink2); margin-top: 2px; }
.rp { padding: 14px 14px 12px; margin: 0 0 14px; border: 3px solid var(--z-ink); box-shadow: 0 6px 0 var(--z-ink); border-radius: 22px; background: #fff; }
.rp-p { font: 500 1.08rem/2.15 var(--en, Georgia), serif; margin: 0 0 12px; }
.rp-p p { margin: 0 0 0.6em; }
.rp-p .sn { transition: opacity 0.3s; }
.rp-p .sj { display: none; font: 500 0.86rem/1.7 var(--jp); color: var(--z-ink2); background: var(--z-bg); border-radius: 8px; padding: 4px 8px; margin: 2px 0 6px; }
.rp.showja .sj { display: block; }
.rp-p mark { background: none; color: inherit; padding: 0 1px; position: relative; }
.rp-p mark.h-key { background: linear-gradient(transparent 55%, var(--z-sun) 55%); }
.rp-p mark.h-sig { outline: 2.5px solid var(--z-hot); outline-offset: 1px; border-radius: 999px; padding: 0 5px; font-weight: 700; }
.rp-p mark.h-main { border-bottom: 4px solid var(--z-sky); font-weight: 700; }
.rp-p mark.h-ex { opacity: 0.4; }
.rp-p mark.h-para { border-bottom: 3px dashed var(--z-mint); }
.rp-p mark.h-ref { text-decoration: underline wavy var(--z-vio); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rp-say { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; min-height: 92px; }
.rp-say img { width: 44px; height: 44px; object-fit: contain; }
.rp-tool { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; }
.rp-tool button { font: 800 0.78rem var(--jp); border: 1px solid var(--z-line); background: #fff; color: var(--z-ink); border-radius: 999px; padding: 6px 12px; cursor: pointer; min-height: 34px; }
.rp-leg { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 10px 0 0; font-size: 0.72rem; font-weight: 800; color: var(--z-mute); }
.rp-leg mark { font-family: var(--jp); }
.z-take { margin: 0; padding: 16px 16px 16px 2.4em; border-radius: var(--z-r); background: var(--z-ink); color: #fff; line-height: 1.9; font-weight: 700; }
.z-take li::marker { color: var(--z-sun); font-family: var(--z-disp); font-size: 1.2em; }

/* ---------- ゲームの一覧 ---------- */
.z-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 760px) { .z-games { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .z-games.four { grid-template-columns: repeat(4, 1fr); } }
.z-games li > a, .z-games li > button { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left; text-decoration: none; color: var(--z-ink); background: #fff; border: 3px solid var(--z-ink); border-radius: 18px; box-shadow: 0 5px 0 var(--z-ink); overflow: hidden; cursor: pointer; font-family: var(--jp); -webkit-tap-highlight-color: transparent; }
.z-games li > a:active, .z-games li > button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--z-ink); }
.z-games img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-bottom: 3px solid var(--z-ink); background: var(--z-sun2); }
.z-games .tx { padding: 10px 11px 12px; display: block; }
.z-games .en { display: block; font: 400 0.78rem/1 var(--z-disp); letter-spacing: 0.12em; color: var(--z-hot); margin: 0 0 3px; }
.z-games b { display: block; font: 900 0.98rem/1.35 var(--z-maru); }
.z-games small { display: block; color: var(--z-ink2); font-size: 0.76rem; line-height: 1.5; margin-top: 3px; font-weight: 600; }
.z-games .new { position: absolute; }
.z-games li { position: relative; }
.z-games li .z-tag { position: absolute; left: 10px; top: 10px; z-index: 2; }

/* ゲームの舞台（全画面） */
html.zs-open { overflow: hidden; }
.zs { position: fixed; inset: 0; z-index: 200; background: var(--z-bg); display: flex; flex-direction: column; }
.zs-top { flex: none; display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--z-line); background: #fff; }
.zs-x { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--z-ink); background: #fff; font: 900 1rem var(--jp); cursor: pointer; color: var(--z-ink); }
.zs-tt { font: 900 1rem var(--z-maru); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-hud { font: 400 1.25rem/1 var(--z-disp); }
.zs-body { flex: 1; overflow-y: auto; padding: 16px 16px 40px; }
.zs-body > * { max-width: 680px; margin-left: auto; margin-right: auto; }
/* SVハンター */
.sv-s { font: 500 clamp(1.25rem, 5.4vw, 1.6rem)/2.3 var(--en, Georgia), serif; padding: 14px; margin: 0 0 12px; }
.sv-s button { font: inherit; line-height: 1.5; color: var(--z-ink); background: none; border: 0; border-bottom: 3px solid transparent; padding: 2px 3px; margin: 0 1px; border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-s button:hover { background: var(--z-bg2); }
.sv-s button.v { background: var(--z-hot); color: #fff; } .sv-s button.s { border-bottom-color: var(--z-sky); } .sv-s button.x { background: #ffe9ef; text-decoration: line-through; }
.sv-s button[disabled] { cursor: default; }
.sv-ask { font: 900 1.05rem var(--z-maru); margin: 0 0 10px; text-align: center; }
.sv-ask b { color: var(--z-hot); }
/* スピード読み */
.sp-p { font: 500 1.1rem/2.1 var(--en, Georgia), serif; padding: 16px; margin: 0 0 12px; }
.sp-p span { transition: opacity 0.4s, background 0.15s; border-radius: 4px; padding: 1px 0; }
.sp-p span.now { background: var(--z-sun); }
.sp-p span.past { opacity: 0.12; }
.sp-set { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 14px; }
.sp-set button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--z-ink); background: #fff; font: 900 0.9rem var(--z-maru); cursor: pointer; color: var(--z-ink); }
.sp-set button.on { background: var(--z-sun); }

/* ---------- 付録（PDF）・関連サイト ---------- */
.z-pdfs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .z-pdfs { grid-template-columns: repeat(4, 1fr); } }
.z-pdfs a { display: grid; grid-template-columns: 46px 1fr; gap: 9px; align-items: center; height: 100%; padding: 8px; box-sizing: border-box; text-decoration: none; color: var(--z-ink); background: #fff; border: 1px solid var(--z-line); border-radius: 12px; }
.z-pdfs img { width: 46px; height: 64px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--z-line); }
.z-pdfs b { display: block; font: 900 0.86rem/1.35 var(--z-maru); }
.z-pdfs small { display: block; font-size: 0.7rem; color: var(--z-mute); font-weight: 700; }
.z-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .z-links { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .z-links { grid-template-columns: repeat(3, 1fr); } }
.z-links a { display: grid; grid-template-columns: 1fr 22px; gap: 10px; align-items: center; height: 100%; padding: 13px 14px; box-sizing: border-box; text-decoration: none; color: var(--z-ink); background: #fff; border: 1px solid var(--z-line); border-radius: 14px; }
.z-links b { display: block; font: 900 0.96rem/1.4 var(--z-maru); }
.z-links small { display: block; color: var(--z-ink2); font-size: 0.8rem; line-height: 1.55; margin-top: 2px; }
.z-links .k { display: inline-block; font-size: 0.68rem; font-weight: 900; color: var(--z-hot); margin-bottom: 2px; }
.z-links .ic { width: 20px; height: 20px; color: var(--z-mute); }
.z-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.z-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--z-line); color: var(--z-ink); font-weight: 800; font-size: 0.86rem; text-decoration: none; }
.z-chips a.hot { background: var(--z-ink); color: #fff; border-color: var(--z-ink); }
/* 共通テストまで */
.z-cd { display: grid; gap: 12px; padding: 16px; align-items: center; background: var(--z-ink); color: #fff; border-radius: 22px; }
@media (min-width: 700px) { .z-cd { grid-template-columns: auto 1fr; gap: 24px; padding: 20px 24px; } }
.z-cd .num { display: flex; align-items: baseline; gap: 8px; }
.z-cd .num small { font-weight: 800; font-size: 0.86rem; color: #cfcbd9; }
.z-cd .num b { font: 400 4.2rem/0.9 var(--z-disp); color: var(--z-sun); }
.z-cd .num i { font-style: normal; font-weight: 900; }
.z-cd .hms { font: 400 1.3rem/1 var(--z-disp); letter-spacing: 0.06em; color: #cfcbd9; display: block; margin-top: 4px; }
.z-cd p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.7; color: #e7e4ee; }
.z-cd .z-chips a { background: transparent; color: #fff; border-color: #6b6878; }
.z-cd .z-chips a.hot { background: var(--z-sun); color: var(--z-ink); border-color: var(--z-sun); }
/* 今日の1問 */
.z-daily { display: grid; gap: 14px; }
@media (min-width: 760px) { .z-daily { grid-template-columns: 260px 1fr; align-items: start; } }
.z-daily-art { position: relative; border-radius: 22px; overflow: hidden; border: 3px solid var(--z-ink); box-shadow: 0 6px 0 var(--z-ink); background: var(--z-sun2); }
.z-daily-art img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
@media (min-width: 760px) { .z-daily-art img { aspect-ratio: 1; } }
.z-daily-art b { position: absolute; left: 10px; bottom: 10px; background: #fff; border: 2px solid var(--z-ink); border-radius: 999px; padding: 5px 12px; font: 900 0.86rem var(--z-maru); }
.z-faq details { background: #fff; border: 1px solid var(--z-line); border-radius: 14px; padding: 0 14px; margin: 0 0 8px; }
.z-faq summary { cursor: pointer; font: 900 0.96rem/1.5 var(--z-maru); padding: 14px 0; }
.z-faq p { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.8; color: var(--z-ink2); }
.z-note { font-size: 0.78rem; color: var(--z-mute); line-height: 1.7; margin: 18px 0 0; }
.z-in { opacity: 1; }

/* ---------- 級（初級・中級・上級） ---------- */
.z-lvs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.z-lvs a { position: relative; display: block; height: 100%; box-sizing: border-box; padding: 14px 8px 12px; text-align: center; text-decoration: none; color: var(--z-ink); background: var(--lc); border: 3px solid var(--z-ink); border-radius: 18px; box-shadow: 0 5px 0 var(--z-ink); }
.z-lvs a:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--z-ink); }
.z-lvs .en { display: block; font: 400 0.72rem/1 var(--z-disp); letter-spacing: 0.1em; opacity: 0.7; }
.z-lvs b { display: block; font: 900 clamp(1.4rem, 7vw, 2rem)/1.3 var(--z-maru); }
.z-lvs small { display: block; font-size: 0.7rem; font-weight: 800; line-height: 1.4; }
.z-lvs .st { display: block; font-size: 0.8rem; letter-spacing: 2px; margin-top: 2px; }
.z-lvs .you { display: none; position: absolute; left: 50%; top: -13px; transform: translateX(-50%); white-space: nowrap; font: 900 0.68rem/1 var(--jp); font-style: normal; background: var(--z-ink); color: #fff; border-radius: 999px; padding: 5px 9px; }
.z-lvs a.on .you { display: block; }
.z-lvsw { display: inline-flex; gap: 0; border: 2px solid var(--z-ink); border-radius: 999px; overflow: hidden; background: #fff; }
.z-lvsw a { min-width: 68px; min-height: 42px; display: grid; place-items: center; padding: 0 14px; text-decoration: none; color: var(--z-ink); font: 900 0.9rem var(--z-maru); border-left: 2px solid var(--z-ink); }
.z-lvsw a:first-child { border-left: 0; }
.z-lvsw a[aria-current] { background: var(--z-sun); }
.z-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.z-filter button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--z-ink); background: #fff; color: var(--z-ink); font: 900 0.9rem var(--z-maru); cursor: pointer; }
.z-filter button.on { background: var(--z-ink); color: #fff; }
.z-filter small { font: 400 0.9rem var(--z-disp); margin-left: 5px; opacity: 0.7; }
i.lv { font-style: normal; display: inline-block; font-size: 0.66rem; font-weight: 900; line-height: 1; padding: 3px 5px; border-radius: 5px; margin-right: 5px; color: var(--z-ink); vertical-align: 1px; }
i.lv-shokyu { background: #8fe3c4; } i.lv-chukyu { background: #7fd0ff; } i.lv-jokyu { background: #ffb3c7; }
[hidden] { display: none !important; }
/* 実演の説明と「次へ」は、スマホでは画面の下に貼り付ける（英文が長くても、説明と印を同時に見られる） */
.rp-dock { position: sticky; bottom: 0; background: #fff; padding: 8px 0 2px; z-index: 3; }
@media (max-width: 859px) { .rp-dock { bottom: calc(64px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 12px -8px rgba(27, 26, 34, 0.18); margin: 0 -8px; padding: 8px 8px 6px; border-radius: 12px 12px 0 0; } .rp-say { min-height: 0; } }
.rp-p, .rp-p p, .sp-p, .kp-s, .sv-s, .zq-q:not(.ja), .z-more2 .en { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.rp-p { line-height: 1.95; font-weight: 500; }
.zq-c button span { font-family: 'Source Serif 4', Georgia, var(--jp), serif; }
@media (max-width: 859px) { .pg-z .totop { display: none !important; } }