/* ================================================================
   大学受験英語 究極チートシートPDF — style.css
   スマホが基本（375px で組んで、広い画面で段を増やす）。横スクロールは作らない（表もスマホでは縦に積む）
   色はすべて :root のトークン。ダークは [data-theme=dark] と OS 設定（auto）
   動き：html.mo のときだけ「見えたらふわっと」（fx.js）。上の帯は動かさない・形を変えない
   ================================================================ */
:root {
  --bg: #fffaf3;
  --bg2: #f6efe4;
  --card: #ffffff;
  --paper: #ffffff;
  --ink: #1d1830;
  --ink2: #3b3552;
  --mute: #6d6684;
  --line: #ece3d4;
  --line2: #ddd1bd;
  --brand: #4b2fb8;
  --brand2: #3a2296;
  --on-brand: #fff;
  --hl: #ffe14d;
  --coral: #ff6b4a;
  --logo2: #ff6b4a;
  --ok: #1d8a4b;
  --ng: #d6336c;
  --rs: #e8425a;
  --hdr: rgba(255, 250, 243, 0.88);
  --shadow: 0 1px 2px rgba(19, 26, 44, 0.06), 0 6px 20px -8px rgba(19, 26, 44, 0.18);
  --shadow-lg: 0 2px 6px rgba(19, 26, 44, 0.08), 0 22px 44px -18px rgba(19, 26, 44, 0.35);
  --r: 18px;
  --jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
  --en: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
  --num: 'Fraunces', 'Georgia', 'Zen Kaku Gothic New', serif;
  --fsz: 16px;
  --hh: 60px;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #0e1323;
  --bg2: #141a2e;
  --card: #182036;
  --paper: #f6f3ea;
  --ink: #edf0fa;
  --ink2: #c6cbde;
  --mute: #959cb6;
  --line: #273050;
  --line2: #35406a;
  --brand: #9775fa;
  --brand2: #a3b4ff;
  --on-brand: #0e1323;
  --hl: #ffd43b;
  --coral: #ff8a6e;
  --logo2: #ff8a6e;
  --ok: #51cf86;
  --ng: #ff6b9a;
  --rs: #ff5c74;
  --hdr: rgba(14, 19, 35, 0.86);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 48px -18px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    --bg: #0e1323;
    --bg2: #141a2e;
    --card: #182036;
    --paper: #f6f3ea;
    --ink: #edf0fa;
    --ink2: #c6cbde;
    --mute: #959cb6;
    --line: #273050;
    --line2: #35406a;
    --brand: #9775fa;
    --brand2: #a3b4ff;
    --on-brand: #0e1323;
    --hl: #ffd43b;
    --coral: #ff8a6e;
    --logo2: #ff8a6e;
    --ok: #51cf86;
    --ng: #ff6b9a;
    --rs: #ff5c74;
    --hdr: rgba(14, 19, 35, 0.86);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 24px 48px -18px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 12px); }
body {
  margin: 0; font-family: var(--jp); font-size: var(--fsz); line-height: 1.75; color: var(--ink); background: var(--bg);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.2px); background-size: 22px 22px;
  overflow-x: hidden; font-feature-settings: 'palt' 1; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { line-height: 1.35; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
mark { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--hl) 75%, transparent) 58%); color: inherit; padding: 0 1px; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
main { display: block; max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }
.blank { display: inline-block; width: 3em; border-bottom: 1.5px solid currentColor; margin: 0 3px; transform: translateY(-3px); }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--card); color: var(--ink); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; }
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: scale(0.97); }
.btn-pri { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--brand) 80%, transparent); }
.btn-pri:hover { background: var(--brand2); border-color: var(--brand2); }
.btn-l { min-height: 52px; padding: 0 22px; font-size: 1.02em; }
.btn-t { background: none; border: 0; color: var(--brand); font-weight: 700; padding: 6px 4px; font-size: 0.9em; }
.btn-i { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--card); display: inline-grid; place-items: center; color: var(--ink2); transition: transform 0.15s; }
.btn-i:active { transform: scale(0.92); }
.ib { width: 42px; height: 42px; border-radius: 12px; border: 0; background: none; display: inline-grid; place-items: center; color: var(--ink); }
.ib:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.ib .ic { width: 22px; height: 22px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); padding: 3px 10px; border-radius: 999px; text-decoration: none; }
.no { font: 700 0.78rem/1 var(--num); color: var(--mute); letter-spacing: 0.04em; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 700; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--card)); padding: 3px 9px; border-radius: 999px; }

/* ---------- 上の帯（スクロールしても形を変えない） ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: var(--hdr); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.hd-in { max-width: 1180px; margin: 0 auto; height: var(--hh); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); min-width: 0; }
.logo-mk { width: 34px; height: 34px; flex: none; }
.logo-t { display: grid; line-height: 1.15; min-width: 0; }
.logo-t b { font-size: 1.02rem; font-weight: 900; letter-spacing: -0.01em; white-space: nowrap; }
.logo-t small { font-size: 0.66rem; color: var(--mute); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-nav { display: none; margin-left: auto; gap: 4px; }
.hd-nav a { color: var(--ink2); text-decoration: none; font-weight: 700; font-size: 0.9rem; padding: 8px 12px; border-radius: 10px; }
.hd-nav a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.hd-r { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.hd-nav + .hd-r { margin-left: 4px; }
:root:not([data-theme='dark']) .i-sun, :root[data-theme='dark'] .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root[data-theme='auto'] .i-moon { display: none; } :root[data-theme='auto'] .i-sun { display: block; } }
.hb span { display: block; width: 20px; height: 2.2px; background: currentColor; border-radius: 2px; transition: transform 0.25s, opacity 0.2s; grid-area: 1 / 1; }
.hb span:nth-child(1) { transform: translateY(-6px); }
.hb span:nth-child(3) { transform: translateY(6px); }
.hb[aria-expanded='true'] span:nth-child(1) { transform: rotate(45deg); }
.hb[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hb[aria-expanded='true'] span:nth-child(3) { transform: rotate(-45deg); }

/* ---------- ハンバーガーメニュー ---------- */
.dw-bg { position: fixed; inset: 0; z-index: 60; background: rgba(8, 11, 22, 0.45); opacity: 0; transition: opacity 0.25s; }
.dw { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(90vw, 380px); background: var(--bg); box-shadow: var(--shadow-lg); transform: translateX(104%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.dw.open { transform: none; }
.dw-bg.open { opacity: 1; }
.dw-h { display: flex; align-items: center; justify-content: space-between; height: var(--hh); padding: 0 8px 0 18px; border-bottom: 1px solid var(--line); flex: none; }
.dw-q { position: relative; margin: 14px 16px 6px; flex: none; }
.dw-q input { width: 100%; height: 46px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--card); padding: 0 14px 0 40px; }
.dw-q .ic { position: absolute; left: 13px; top: 13px; color: var(--mute); }
.dw-nav { overflow-y: auto; padding: 4px 16px 24px; overscroll-behavior: contain; }
.dw-top { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 700; }
.dw-top:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dw-g { font: 800 0.72rem/1 var(--num); letter-spacing: 0.12em; color: var(--mute); margin: 18px 10px 8px; }
.dw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dw-chips a { font-size: 0.86rem; font-weight: 700; text-decoration: none; color: var(--c); background: color-mix(in srgb, var(--c) 11%, var(--card)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent); border-radius: 999px; padding: 6px 12px; }
.dw-list { display: grid; gap: 2px; }
.dw-list a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.dw-list a:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.dw-list i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; transform: rotate(45deg); }
.dw-list small { margin-left: auto; font: 700 0.78rem var(--num); color: var(--mute); }
body.lock { overflow: hidden; }

/* ---------- 検索パネル ---------- */
.sp { position: fixed; inset: 0; z-index: 70; background: rgba(8, 11, 22, 0.5); display: flex; justify-content: center; align-items: flex-start; padding: 10px; }
.sp[hidden] { display: none; }
.sp-in { width: min(720px, 100%); background: var(--bg); border-radius: 20px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: calc(100dvh - 20px); display: flex; flex-direction: column; }
.sp-f { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.sp-f > .ic { color: var(--mute); }
.sp-f input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font-size: 1.05rem; outline: none; }
.sp-r { overflow-y: auto; padding: 8px; }
.sp-hint { color: var(--mute); font-size: 0.88rem; padding: 12px; }
.sp-it { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.sp-it:hover, .sp-it.on { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.sp-it img { width: 44px; height: 62px; object-fit: cover; border-radius: 4px; box-shadow: var(--shadow); background: #fff; }
.sp-it b { display: block; font-size: 0.95rem; line-height: 1.4; }
.sp-it small { color: var(--mute); font-size: 0.78rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-it small em { font-style: normal; background: color-mix(in srgb, var(--hl) 60%, transparent); color: var(--ink); padding: 0 2px; border-radius: 3px; }
.sp-more { display: block; text-align: center; padding: 12px; font-weight: 700; }

/* ---------- 見出し（セクション） ---------- */
.sec { margin-top: 56px; }
.sec-h { margin-bottom: 18px; }
.sec-en { font: 800 0.74rem/1 var(--num); letter-spacing: 0.16em; color: var(--brand); margin-bottom: 8px; }
.sec-h h2 { font-size: clamp(1.45rem, 5.4vw, 2.1rem); font-weight: 900; }
.sec-h > p:last-child:not(.sec-en) { color: var(--ink2); margin-top: 6px; font-size: 0.95rem; }

/* ---------- トップの大見出し ---------- */
.hero { display: grid; gap: 22px; padding-top: 18px; }
.hero-art { margin: 0; order: -1; position: relative; }
.hero-art img { border-radius: 22px; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.hero-art::after { content: ''; position: absolute; inset: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); pointer-events: none; }
.kick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.kick span { font: 800 0.7rem/1 var(--num); letter-spacing: 0.14em; padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--ink); }
.kick span:first-child { background: var(--ink); color: var(--bg); }
.hero-h { font-size: clamp(2rem, 8.6vw, 3.6rem); font-weight: 900; line-height: 1.22; letter-spacing: -0.03em; }
.hero-h .mk { background: linear-gradient(transparent 62%, var(--hl) 62%); padding: 0 2px; }
.nb { white-space: nowrap; }
.hero-s { margin-top: 14px; color: var(--ink2); font-size: 1rem; }
.hero-s b { color: var(--ink); }
.hero-q { margin-top: 20px; display: flex; align-items: center; gap: 6px; background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 5px 5px 5px 16px; box-shadow: 0 5px 0 var(--ink); }
.hero-q > span { color: var(--mute); display: grid; }
.hero-q input { flex: 1; min-width: 0; border: 0; background: none; height: 42px; outline: none; font-size: 1rem; }
.hero-q .btn { min-height: 42px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.hero-tags a { font-size: 0.82rem; font-weight: 700; color: var(--ink2); text-decoration: none; padding: 5px 11px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.hero-tags a:hover { border-color: var(--brand); color: var(--brand); }
.stats { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stats li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; display: grid; }
.stats b { font: 800 clamp(1.6rem, 7vw, 2.2rem)/1.05 var(--num); letter-spacing: -0.02em; }
.stats span { font-size: 0.78rem; color: var(--mute); font-weight: 700; }

/* ---------- コンセプト（約2,800本の記事を再編） ---------- */
.concept { margin-top: 48px; background: var(--card); border: 2px solid var(--ink); border-radius: 24px; padding: 22px 18px; box-shadow: 0 6px 0 var(--ink); position: relative; overflow: hidden; }
.concept::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: color-mix(in srgb, var(--hl) 40%, transparent); z-index: 0; }
.concept > * { position: relative; z-index: 1; }
.concept-req { font-size: 0.9rem; color: var(--ink2); margin: 2px 0 10px; }
.concept-req b { display: inline-block; background: var(--ink); color: var(--bg); font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; margin-right: 8px; }
.concept-h { font-size: clamp(1.45rem, 6vw, 2.3rem); font-weight: 900; line-height: 1.35; letter-spacing: -0.02em; }
.concept-h > span:first-child { color: var(--brand); }
.concept-h .mk { background: linear-gradient(transparent 62%, var(--hl) 62%); }
.concept-p { margin-top: 12px; color: var(--ink2); max-width: 46em; }
.concept-p b { color: var(--ink); }
.concept-f { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 6px; margin-top: 16px; max-width: 520px; }
.concept-f span { display: grid; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; min-width: 0; }
.concept-f b { font: 800 clamp(1.15rem, 5vw, 1.5rem)/1.1 var(--num); }
.concept-f small { font-size: 0.7rem; color: var(--mute); font-weight: 700; white-space: nowrap; }
.concept-f b { white-space: nowrap; }
@media (max-width: 359px) { .concept-f span { padding: 7px 7px; } .concept-f small { font-size: 0.62rem; } }
.concept-f i { font-style: normal; font: 800 1.2rem var(--num); color: var(--mute); }
@media (min-width: 860px) { .concept { padding: 34px 36px; } }

/* ---------- 姉妹PDF（究極の英単語帳）への案内 ---------- */
.sis-pdf { margin-top: 40px; }
.sis-pdf a { display: grid; gap: 4px; padding: 18px 18px 16px; border-radius: 22px; text-decoration: none; color: #fff; background: linear-gradient(120deg, #0c8599 0%, #2f4cdd 100%); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; transition: transform 0.2s; }
.sis-pdf a::after { content: "ABC"; position: absolute; right: -6px; bottom: -22px; font: 800 6rem/1 var(--num); color: rgba(255, 255, 255, 0.12); letter-spacing: -0.04em; }
.sis-pdf a:hover { transform: translateY(-2px); }
.sis-k { font-size: 0.76rem; font-weight: 700; opacity: 0.9; }
.sis-pdf b { font-size: clamp(1.15rem, 5vw, 1.5rem); font-weight: 900; }
.sis-s { font-size: 0.86rem; opacity: 0.92; }
.sis-go { margin-top: 8px; justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #1f36b5; font-weight: 800; font-size: 0.88rem; padding: 8px 14px; border-radius: 999px; position: relative; z-index: 1; }
.sis-sm { margin: 0 0 16px; }
.sis-sm a { padding: 14px 16px; }
.sis-sm b { font-size: 1.02rem; }

/* ---------- 確認問題集 ---------- */
.dr-b { font-size: 0.68rem; font-weight: 800; color: #fff; background: var(--brand); padding: 2px 7px; border-radius: 999px; }
.dr-cta { margin-top: 14px; display: grid; gap: 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 22px; padding: 18px; box-shadow: 0 5px 0 var(--ink); }
.dr-k, .dr-hero .sec-en { font: 800 0.72rem/1 var(--num); letter-spacing: 0.14em; color: var(--brand); }
.dr-cta b { display: block; font-size: 1.15rem; font-weight: 900; margin-top: 6px; }
.dr-cta p { color: var(--ink2); font-size: 0.88rem; margin-top: 4px; }
.dr-act { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-act .btn { flex: 1 1 200px; }
.dr-hero { padding: 10px 0 6px; display: grid; gap: 10px; }
.dr-hero h1 { font-size: clamp(1.3rem, 5.6vw, 2.1rem); font-weight: 900; line-height: 1.35; }
.dr-hero h1 span { display: inline-block; margin-left: 8px; font-size: 0.6em; background: var(--ink); color: var(--bg); padding: 3px 12px; border-radius: 999px; vertical-align: 4px; }
.dr-hero > p { color: var(--ink2); }
.dr-score { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; position: sticky; top: calc(var(--hh) + 8px); z-index: 5; }
.dr-score b { font: 800 1.3rem var(--num); color: var(--ok); }
.dr-score .tl-bar { flex: 1; }
.dr-body { margin-top: 14px; }
.dr-body .sc { grid-column: 1 / -1; }
.dq .it { grid-template-columns: 30px 1fr; }
.dq-q { line-height: 1.75; }
.dq-q u { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.dr-body .qz-c { display: grid; gap: 6px; }
.dq-o { display: flex; align-items: center; gap: 10px; text-align: left; border: 1.5px solid var(--line2); background: var(--bg); border-radius: 12px; padding: 10px 12px; font-family: var(--en); font-size: 1rem; transition: border-color 0.15s, background 0.15s; }
.dq-o i { font: 800 0.8rem/24px var(--num); font-style: normal; width: 24px; height: 24px; border-radius: 7px; background: var(--card); border: 1px solid var(--line2); text-align: center; flex: none; }
.dq-o:hover:not(:disabled) { border-color: var(--brand); }
.dr-body .qz-c .dq-o span { background: none; border: 0; padding: 0; border-radius: 0; }
.dq-o.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.dq-o.ng { border-color: var(--ng); background: color-mix(in srgb, var(--ng) 10%, var(--card)); }
.dq-o:disabled { cursor: default; }
.dq-show { margin-top: 8px; border: 1.5px dashed var(--line2); background: none; border-radius: 12px; padding: 8px 14px; font-weight: 700; color: var(--brand); }
.dq-ans { margin-top: 10px; background: color-mix(in srgb, var(--ok) 8%, var(--bg)); border-radius: 12px; padding: 10px 12px; font-size: 0.92rem; }
.dq-it.wrong .dq-ans { background: color-mix(in srgb, var(--ng) 7%, var(--bg)); }
.dq-a b { color: var(--ok); margin-right: 8px; font-size: 0.8rem; }
.dq-a { font-family: var(--en); font-weight: 700; }
.dq-e { color: var(--ink2); margin-top: 4px; }
@media (min-width: 720px) { .dr-cta { grid-template-columns: 1fr auto; align-items: center; } .dr-body .qz-c { grid-template-columns: 1fr 1fr; } }

/* ---------- 原田英語の無料アプリ ---------- */
.appg { display: grid; gap: 10px; }
.app { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--line); text-decoration: none; color: var(--ink); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.app:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.app-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.app-h b { font-size: 1.02rem; font-weight: 900; line-height: 1.4; }
.app-pdf { font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--ok); padding: 2px 8px; border-radius: 999px; }
.app-d { font-size: 0.86rem; color: var(--ink2); line-height: 1.65; }
.app-u { display: inline-flex; align-items: center; gap: 4px; font: 600 0.74rem var(--num); color: var(--brand); margin-top: 2px; }
.app-u .ic { width: 14px; height: 14px; }
.more { text-align: center; margin-top: 16px; }
@media (min-width: 600px) { .appg { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .appg { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 目的から探す ---------- */
.routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.route { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 148px; padding: 14px 14px 12px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; overflow: hidden; }
.route::before { content: ''; position: absolute; right: -26px; top: -26px; width: 86px; height: 86px; border-radius: 50%; background: color-mix(in srgb, var(--c) 14%, transparent); }
.route:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--c); }
.route-n { font: 800 1.5rem/1 var(--num); color: var(--c); }
.route b { font-size: 1.08rem; font-weight: 900; margin-top: 4px; }
.route small { color: var(--ink2); font-size: 0.78rem; line-height: 1.5; }
.route-c { margin-top: auto; display: flex; align-items: center; gap: 4px; font: 700 0.8rem var(--num); color: var(--c); padding-top: 8px; }

/* ---------- 分野から探す ---------- */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cat { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c); color: #fff; text-decoration: none; box-shadow: var(--shadow); isolation: isolate; }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.cat:hover img { transform: scale(1.06); }
.cat-ph { position: absolute; inset: 0; background: radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.35), transparent 50%), var(--c); }
.cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--c) 30%, rgba(8, 10, 20, 0.85)) 100%); z-index: 1; }
.cat-b { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 12px; display: grid; }
.cat-b small { font: 800 0.62rem/1.2 var(--num); letter-spacing: 0.12em; opacity: 0.85; text-transform: uppercase; }
.cat-b b { font-size: 1rem; font-weight: 900; line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.cat-n { position: absolute; right: 10px; top: -134%; display: none; }
.cat .cat-n { position: static; display: inline-block; justify-self: start; margin-top: 4px; font: 700 0.72rem var(--num); background: rgba(255, 255, 255, 0.92); color: #131a2c; padding: 2px 9px; border-radius: 999px; }

/* ---------- 絞り込み ---------- */
.flt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; margin-bottom: 16px; }
.flt-q { position: relative; }
.flt-q .ic { position: absolute; left: 13px; top: 13px; color: var(--mute); }
.flt-q input { width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--bg); padding: 0 12px 0 40px; }
.flt-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.flt-cats button { border: 1.5px solid var(--line2); background: var(--bg); border-radius: 999px; padding: 5px 11px; font-size: 0.82rem; font-weight: 700; color: var(--ink2); display: inline-flex; align-items: center; gap: 5px; }
.flt-cats button small { font: 700 0.7rem var(--num); color: var(--mute); }
.flt-cats button.on { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: #fff; }
.flt-cats button.on small { color: rgba(255, 255, 255, 0.8); }
.flt-o { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.86rem; }
.flt-o select { height: 36px; border-radius: 10px; border: 1.5px solid var(--line2); background: var(--bg); padding: 0 8px; font-size: 0.85rem; }
.flt-n { margin-left: auto; font-weight: 700; color: var(--mute); }
.flt-n b { font: 800 1.1rem var(--num); color: var(--ink); }
.tg { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 700; color: var(--ink2); user-select: none; }
.tg input { position: absolute; opacity: 0; pointer-events: none; }
.tg span { width: 36px; height: 22px; border-radius: 999px; background: var(--line2); position: relative; transition: background 0.2s; flex: none; }
.tg span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.tg input:checked + span { background: var(--brand); }
.tg input:checked + span::after { transform: translateX(14px); }
.tg input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 50%, transparent); }
.empty { text-align: center; color: var(--mute); padding: 40px 0; }

/* ---------- シートのカード（紙の束） ---------- */
.grid { display: grid; gap: 10px; }
.card { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.card:hover { box-shadow: var(--shadow); border-color: var(--line2); }
.card[hidden] { display: none; }
.card-th { position: relative; display: block; align-self: start; }
.card-th img { width: 100%; aspect-ratio: 480 / 679; object-fit: cover; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.25); position: relative; z-index: 2; }
.card-th::before, .card-th::after { content: ''; position: absolute; inset: 0; border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); z-index: 1; }
.card-th::before { transform: rotate(-4deg) translate(-2px, 2px); background: color-mix(in srgb, var(--c) 18%, #fff); }
.card-th::after { transform: rotate(3deg) translate(2px, 1px); }
.card-p { position: absolute; z-index: 3; left: 4px; bottom: 4px; font: 800 0.62rem/1 var(--num); background: var(--ink); color: var(--bg); padding: 3px 6px; border-radius: 6px; letter-spacing: 0.04em; }
.card-rk { position: absolute; z-index: 3; left: -6px; top: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--hl); color: #131a2c; font: 800 0.85rem/28px var(--num); text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.card-b { display: flex; flex-direction: column; min-width: 0; }
.card-k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-d { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; color: var(--c); }
.cat-d::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--c); transform: rotate(45deg); }
.card .au { color: var(--ok); display: inline-grid; }
.card .au .ic { width: 16px; height: 16px; }
.card h3 { font-size: 0.98rem; font-weight: 900; line-height: 1.45; margin: 4px 0 10px; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--r); }
.card h3 a:hover { color: var(--brand); }
.card-a, .rl .card-a { margin-top: auto; display: flex; align-items: center; gap: 6px; position: relative; z-index: 3; }
.dl { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 0.86rem; text-decoration: none; transition: transform 0.15s, background 0.15s; }
.dl:hover { background: var(--brand2); }
.dl:active { transform: scale(0.95); }
.dl small { font: 600 0.68rem var(--num); opacity: 0.8; }
.dl .ic { width: 16px; height: 16px; }
.fav { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--card); display: inline-grid; place-items: center; color: var(--mute); transition: transform 0.15s, color 0.15s; }
.fav .ic { width: 17px; height: 17px; }
.fav[aria-pressed='true'], .btn-i.fav[aria-pressed='true'] { color: #f59f00; border-color: #f59f00; }
.fav[aria-pressed='true'] .ic { fill: #fcc419; }
.sel { margin-left: auto; position: relative; display: inline-grid; cursor: pointer; }
.sel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sel span { width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid var(--line2); display: grid; place-items: center; color: transparent; background: var(--card); transition: background 0.15s, color 0.15s; }
.sel span .ic { width: 17px; height: 17px; }
.sel input:checked + span { background: var(--ok); border-color: var(--ok); color: #fff; }
.sel input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--brand) 50%, transparent); }
.card.seen .card-p::after { content: ' ✓'; }

/* まとめてダウンロードの帯 */
.selbar { position: fixed; z-index: 45; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom) + var(--mbar, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); border-radius: 999px; padding: 6px 6px 6px 18px; box-shadow: var(--shadow-lg); max-width: calc(100vw - 20px); font-size: 0.88rem; }
.selbar[hidden] { display: none; }
.selbar b { font: 800 1.05rem var(--num); }
.selbar .btn { min-height: 40px; font-size: 0.86rem; padding: 0 14px; }
.selbar .btn-t { color: var(--bg); opacity: 0.8; }

/* ---------- 使い方・FAQ ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: st; }
.steps li { counter-increment: st; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 16px 64px; position: relative; }
.steps li::before { content: counter(st); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 800 1rem/34px var(--num); text-align: center; }
.steps b { font-size: 1.05rem; }
.steps p { color: var(--ink2); font-size: 0.92rem; margin-top: 2px; }
.faq { display: grid; gap: 8px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
.faq summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; display: flex; gap: 10px; }
.faq summary::before { content: 'Q'; font: 800 1rem var(--num); color: var(--brand); }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 0 14px 22px; color: var(--ink2); }

/* ---------- 分野・ルート・マイリストの見出し ---------- */
.bc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--mute); padding: 14px 0 10px; }
.bc a { color: var(--ink2); text-decoration: none; }
.bc a:hover { color: var(--brand); text-decoration: underline; }
.pg-hero { position: relative; border-radius: 24px; overflow: hidden; background: var(--c, var(--ink)); color: #fff; margin-bottom: 18px; min-height: 240px; display: flex; align-items: flex-end; isolation: isolate; }
.pg-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pg-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 10, 20, 0.05) 0%, color-mix(in srgb, var(--c, #131a2c) 45%, rgba(8, 10, 20, 0.88)) 78%); }
.pg-hero-b { padding: 22px 18px 20px; display: grid; gap: 8px; justify-items: start; }
.pg-hero .sec-en { color: rgba(255, 255, 255, 0.85); margin: 0; }
.pg-hero h1 { font-size: clamp(1.6rem, 6.6vw, 2.6rem); font-weight: 900; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); }
.pg-hero p { color: rgba(255, 255, 255, 0.92); font-size: 0.95rem; max-width: 46em; }
.pg-hero-n b { font: 800 1.5rem var(--num); }
.pg-hero .btn-pri { background: #fff; border-color: #fff; color: #131a2c; box-shadow: none; }
.rprog { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; font-weight: 700; width: min(320px, 100%); }
.rprog .tl-bar { flex: 1; background: rgba(255, 255, 255, 0.3); }
.rprog .tl-bar i { background: #fff; }
.cchips, .rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.cchips a, .rchips a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; font-size: 0.88rem; color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--c) 28%, transparent); padding: 7px 13px; border-radius: 999px; }
.cchips small, .rchips small { font: 700 0.72rem var(--num); color: var(--mute); }

/* ルートの順番リスト */
.rlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: rl; }
.rl { display: grid; grid-template-columns: 30px 72px 1fr; gap: 12px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; position: relative; }
.rl-n { font: 800 1.3rem/1 var(--num); color: var(--c); padding-top: 4px; text-align: center; }
.rl.seen .rl-n::after { content: '✓'; display: block; font-size: 0.8rem; color: var(--ok); margin-top: 6px; }
.rl-th img { width: 100%; aspect-ratio: 480 / 679; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.25); background: #fff; }
.rl-b { display: grid; gap: 4px; min-width: 0; }
.rl-t { font-weight: 900; color: var(--ink); text-decoration: none; line-height: 1.45; }
.rl-t:hover { color: var(--brand); }
.rl-b p { font-size: 0.84rem; color: var(--ink2); line-height: 1.6; }
.rl .card-a { margin-top: 6px; }

/* マイリスト */
.mytabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.mytabs button { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line2); background: var(--card); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 0.88rem; }
.mytabs button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.mytabs small { font: 700 0.75rem var(--num); opacity: 0.75; }

/* ---------- シートのページ（読みやすさ最優先：白い紙1枚に1列で。PDF はその横に） ---------- */
.pg-sheet { --doc: #ffffff; --doc-line: #ebe6da; --mbar: 64px; }
:root[data-theme='dark'] .pg-sheet { --doc: #141b2f; --doc-line: #263050; }
@media (prefers-color-scheme: dark) { :root[data-theme='auto'] .pg-sheet { --doc: #141b2f; --doc-line: #263050; } }
.sh-hd { display: grid; gap: 10px; max-width: 860px; padding: 4px 0 14px; }
.sh-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.badge-dr { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); }
.sh-hd h1 { font-size: clamp(1.45rem, 6vw, 2.3rem); font-weight: 900; line-height: 1.35; letter-spacing: -0.01em; }
.sh-lead { color: var(--ink); font-size: 1.02rem; line-height: 1.85; }
.sh-pdf { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; max-width: 860px; }
.sh-th { display: block; }
.sh-th img { border-radius: 4px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 14px -8px rgba(0, 0, 0, 0.35); transition: transform 0.2s; }
.sh-th:hover img { transform: translateY(-2px); }
.sh-pdf-b { display: grid; gap: 10px; min-width: 0; }
.sh-pdf-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.sh-pdf-t b { font-weight: 900; }
.sh-pdf-t span { font-size: 0.84rem; color: var(--ink2); }
.sh-act { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-act .btn { min-height: 42px; font-size: 0.92rem; padding: 0 16px; }
.sh-act .btn-pri { flex: 1 1 190px; }
.sh-act .btn-i, .sh-act .btn-i.fav { width: 42px; height: 42px; flex: none; }
.sh-act .btn-i .ic, .sh-act .btn-i.fav .ic { width: 19px; height: 19px; }
.sh-act .btn:not(.btn-pri) { flex: none; }
.sh-wrap { display: grid; gap: 14px; margin-top: 16px; }
.sh-side { display: grid; gap: 10px; min-width: 0; }
.side-dl { display: none; }

/* 目次（スマホはたたむ。広い画面では左に出しっぱなし） */
.toc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 900; font-size: 0.95rem; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary small { font: 700 0.75rem var(--num); color: var(--mute); }
.toc summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink2); border-bottom: 2px solid var(--ink2); transform: rotate(45deg) translateY(-3px); transition: transform 0.2s; }
.toc[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.toc ol { list-style: none; margin: 0; padding: 0 8px 10px; counter-reset: tc; }
.toc li { counter-increment: tc; }
.toc a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--ink2); font-size: 0.9rem; font-weight: 700; line-height: 1.45; }
.toc a::before { content: counter(tc); font: 800 0.8rem/1.75 var(--num); color: var(--c); }
.toc a:hover, .toc a.on { background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--ink); }

/* 学習ツール */
.tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.tools::-webkit-scrollbar { display: none; }
.tl { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--card); font-weight: 700; font-size: 0.86rem; white-space: nowrap; flex: none; color: var(--ink); }
.tl .ic { width: 17px; height: 17px; }
.tl[aria-pressed='true'] { background: var(--rs); border-color: var(--rs); color: #fff; }
.tl-fs { display: inline-flex; gap: 4px; flex: none; }
.tl-fs .tl { padding: 0 11px; font-family: var(--num); }
.tl-got { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--ink2); white-space: nowrap; flex: none; padding: 0 6px; }
.tl-got b { font: 800 1rem var(--num); color: var(--ok); }
.tl-bar { display: inline-block; width: 64px; height: 6px; border-radius: 9px; background: var(--line); overflow: hidden; }
.tl-bar i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 9px; transition: width 0.4s; }
.tl-au { display: inline-flex; gap: 6px; flex: none; }
.tl-au select { height: 38px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--card); color: var(--ink); padding: 0 8px; font-size: 0.82rem; }
.tl-play { background: var(--ok); border-color: var(--ok); color: #fff; }
.i-pause { display: none; }
.playing-all .i-pause { display: block; }
.playing-all .i-play { display: none; }

/* 本文：白い紙1枚 */
.sh-doc { background: var(--doc); border: 1px solid var(--doc-line); border-radius: 20px; padding: 6px 18px 18px; min-width: 0; font-size: var(--fsz); line-height: 1.85; color: var(--ink); }
.three-w { margin: 16px 0 6px; padding: 16px 16px 14px; border-radius: 14px; background: color-mix(in srgb, var(--c) 8%, var(--doc)); border: 1.5px solid color-mix(in srgb, var(--c) 30%, transparent); }
.three-w h2 { font-size: 0.95rem; font-weight: 900; color: color-mix(in srgb, var(--c) 75%, var(--ink)); margin-bottom: 6px; }
.three-w ol { margin: 0; padding: 0; list-style: none; counter-reset: th; display: grid; gap: 6px; }
.three-w li { counter-increment: th; display: grid; grid-template-columns: 26px 1fr; gap: 6px; font-weight: 700; line-height: 1.7; }
.three-w li::before { content: counter(th); width: 22px; height: 22px; margin-top: 4px; border-radius: 50%; background: var(--c); color: #fff; font: 800 0.78rem/22px var(--num); text-align: center; }
.sh-body { counter-reset: sc; }
.sc { padding: 26px 0 6px; min-width: 0; scroll-margin-top: calc(var(--hh) + 12px); }
.sc + .sc { border-top: 1px solid var(--doc-line); }
.sc-h { font-size: 1.28rem; font-weight: 900; line-height: 1.45; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; counter-increment: sc; }
.sc-h::before { content: counter(sc); flex: none; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--c); color: #fff; font: 800 0.95rem/30px var(--num); text-align: center; margin-top: 2px; }
.sc-n { margin-left: auto; flex: none; font: 700 0.76rem/1 var(--num); color: var(--mute); padding-top: 10px; white-space: nowrap; }
.sc-n::after { content: '項目'; font-family: var(--jp); margin-left: 1px; }
.sc-i { color: var(--ink2); margin: 0 0 6px; }
.sc ul, .sc ol { list-style: none; margin: 0; padding: 0; }
.it { position: relative; }
.en { font-family: var(--en); font-weight: 700; }
.lv { color: #f08c00; font-size: 0.74rem; letter-spacing: -1px; white-space: nowrap; }
.lv i { font-style: normal; color: var(--line2); }
.nt { font-size: 0.93em; color: var(--ink2); line-height: 1.75; margin-top: 4px; }

/* 覚えた ✓（右端の小さな丸） */
.ck { position: absolute; right: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line2); background: var(--doc); display: grid; place-items: center; color: var(--line2); padding: 0; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.ck .ic { width: 16px; height: 16px; }
.ck:hover { border-color: var(--ok); color: var(--ok); }
.ck:active { transform: scale(0.88); }
.it.got > .ck { background: var(--ok); border-color: var(--ok); color: #fff; }
.it.got > :not(.ck) { opacity: 0.55; }
.has-ck { padding-right: 42px !important; }
.pl { width: 30px; height: 30px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); display: inline-grid; place-items: center; vertical-align: -7px; margin-right: 8px; flex: none; padding: 0; }
.pl::before { content: ''; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.it.now { background: color-mix(in srgb, var(--ok) 9%, transparent); border-radius: 10px; box-shadow: -8px 0 0 color-mix(in srgb, var(--ok) 9%, transparent); }
.it.now .pl { background: var(--ok); color: #fff; }

/* 例文：灰色の箱ではなく、左に色の線 */
.ex, .rul-ex { margin-top: 10px; padding: 1px 0 1px 14px; border-left: 3px solid color-mix(in srgb, var(--c) 55%, transparent); }
.ex { font-family: var(--en); font-size: 0.98em; line-height: 1.7; color: var(--ink); }
.ex .dlg { display: flex; gap: 8px; }
.ex .dlg b { font: 800 0.78rem/1.9 var(--num); color: var(--c); flex: none; }
.exja, .rul-ex .ja { display: block; font-family: var(--jp); color: var(--ink2); font-size: 0.88em; margin-top: 2px; line-height: 1.7; }

/* phrases */
.phr .it { padding: 16px 0; border-bottom: 1px solid var(--doc-line); }
.phr .it:last-child { border-bottom: 0; }
.phr-h { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.phr .en { font-size: 1.2em; line-height: 1.45; }
.phr .ja { font-weight: 700; margin-top: 4px; font-size: 1.02em; }

/* words：英語｜意味（スマホでも2列。メモは下に） */
.wd-h { display: none; }
.wd-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 14px; padding: 11px 0; border-bottom: 1px solid var(--doc-line); align-items: baseline; }
.wd-r:last-child { border-bottom: 0; }
.wd-r .w0 { font-family: var(--en); font-weight: 700; font-size: 1.08em; display: flex; align-items: center; flex-wrap: wrap; line-height: 1.5; }
.wd-r .w1 { font-weight: 700; line-height: 1.6; }
.wd-r .w2 { grid-column: 1 / -1; font-size: 0.88em; color: var(--ink2); line-height: 1.7; }
.wd-r .w2:empty { display: none; }

/* rules */
.rul .it { padding: 18px 0; border-bottom: 1px solid var(--doc-line); }
.rul .it:last-child { border-bottom: 0; }
.rul-t { font-weight: 900; font-size: 1.1em; display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.rn { font: 800 0.8rem/24px var(--num); color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border-radius: 7px; min-width: 24px; height: 24px; text-align: center; flex: none; margin-top: 2px; }
.rul-d { margin-top: 6px; }
.rul-ex .en { display: block; font-weight: 500; line-height: 1.7; }
.rul-ex .en b { font-weight: 800; }
.rul-ng { margin-top: 8px; font-size: 0.92em; color: var(--ng); }
.mk-ng, .mk-ok { font-weight: 900; margin-right: 6px; }
.mk-ng { color: var(--ng); }
.mk-ok { color: var(--ok); }

/* table（3列までは表のまま横スクロール、4列以上はスマホで1行ずつ） */
.tbw { overflow-x: auto; border-radius: 12px; border: 1px solid var(--doc-line); margin: 8px 0 6px; }
.tb { width: 100%; border-collapse: collapse; font-size: 0.95em; line-height: 1.65; }
.tb th { background: color-mix(in srgb, var(--c) 12%, var(--doc)); color: var(--ink); text-align: left; padding: 10px 12px; font-size: 0.86em; font-weight: 900; white-space: nowrap; }
.tb td { padding: 10px 12px; border-top: 1px solid var(--doc-line); vertical-align: top; }
.tb td:first-child { font-weight: 700; }
@media (max-width: 719px) {
  .wide .tb thead { display: none; }
  .wide .tb, .wide .tb tbody, .wide .tb tr, .wide .tb td { display: block; width: 100%; }
  .wide .tb tr { padding: 12px 14px; border-top: 1px solid var(--doc-line); }
  .wide .tb tr:first-child { border-top: 0; }
  .wide .tb td { border: 0; padding: 2px 0; display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; min-width: 0; }
  .wide .tb td::before { content: attr(data-l); font-size: 0.8em; color: var(--mute); font-weight: 700; padding-top: 2px; }
  .wide .tb td:first-child { display: block; font-size: 1.05em; margin-bottom: 2px; }
  .wide .tb td:first-child::before { content: none; }
  .tb td { min-width: 6em; }
}

/* traps：✕ と ○ を2行で */
.trp .it, .par .it { padding: 16px 0; border-bottom: 1px solid var(--doc-line); }
.trp .it:last-child, .par .it:last-child { border-bottom: 0; }
.trp .ng { color: var(--ink2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ng) 70%, transparent); text-decoration-thickness: 1.5px; }
.trp .ng .mk-ng { text-decoration: none; display: inline-block; }
.trp .ok { font-weight: 700; margin-top: 4px; }
.par-ab { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.par-a, .par-b { display: grid; gap: 2px; justify-items: start; }
.par-a .en, .par-b .en { font-size: 1.08em; }
.par-a .ja, .par-b .ja { font-size: 0.92em; font-weight: 700; }
.vs { font: 800 0.72rem/2.4 var(--num); color: var(--c); }
.stp { display: grid; gap: 14px; padding: 6px 0; }
.stp .it { display: grid; grid-template-columns: 32px 1fr; gap: 12px; }
.sn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--c); color: var(--c); font: 800 0.95rem/28px var(--num); text-align: center; }
.stp .st-t { display: block; font-weight: 900; }
.stp .st-d { color: var(--ink2); }

/* box */
.sc-box { padding-top: 18px; }
.sc-box + .sc, .sc + .sc-box { border-top: 0; }
.bx { border-radius: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--brand) 6%, var(--doc)); border-left: 4px solid var(--brand); }
.bx-l { display: block; font-size: 0.9rem; font-weight: 900; color: var(--brand); margin-bottom: 4px; }
.bx-uroko { background: color-mix(in srgb, var(--hl) 18%, var(--doc)); border-color: #f08c00; }
.bx-uroko .bx-l { color: #c25e00; }
.bx-warn { background: color-mix(in srgb, var(--ng) 6%, var(--doc)); border-color: var(--ng); }
.bx-warn .bx-l { color: var(--ng); }
.bx-theory { background: color-mix(in srgb, var(--ok) 7%, var(--doc)); border-color: var(--ok); }
.bx-theory .bx-l { color: var(--ok); }
.bx p { line-height: 1.85; }
:root[data-theme='dark'] .bx-uroko .bx-l { color: #ffc078; }

/* quiz：A〜D を押すと ○✕ */
.qz .it { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--doc-line); }
.qz .it:last-child { border-bottom: 0; }
.qn { font: 800 1.05rem/1.75 var(--num); color: var(--c); }
.qz-q { min-width: 0; }
.qz-c { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-family: var(--en); }
.qz-c span { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px 10px; }
.qz-c i { font: 700 0.75rem var(--num); font-style: normal; color: var(--mute); margin-right: 5px; }
.qz-o { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.qz-b { display: flex; align-items: center; gap: 10px; min-height: 46px; text-align: left; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--doc); color: var(--ink); font: 600 0.98em/1.4 var(--en); transition: border-color 0.15s, background 0.15s, transform 0.12s; }
.qz-b span { min-width: 0; overflow-wrap: anywhere; }
.qz-b i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--bg2); color: var(--ink2); font: 800 0.78rem/24px var(--num); font-style: normal; text-align: center; }
.qz-b:hover:not(:disabled) { border-color: var(--brand); }
.qz-b:active:not(:disabled) { transform: scale(0.97); }
.qz-b:disabled { cursor: default; color: var(--ink); }
.qz-b.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--doc)); }
.qz-b.ok i { background: var(--ok); color: #fff; }
.qz-b.ng { border-color: var(--ng); background: color-mix(in srgb, var(--ng) 10%, var(--doc)); }
.qz-b.ng i { background: var(--ng); color: #fff; }
.qz-b.dim { opacity: 0.45; }
.qz-r { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg); font-size: 0.93em; line-height: 1.75; display: grid; gap: 2px; }
.qz-r[hidden] { display: none; }
.qz-r .qz-v { font-size: 1.02rem; }
.qz-r.right .qz-v { color: var(--ok); }
.qz-r.wrong .qz-v { color: var(--ng); }
.qz-a { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; margin-top: 10px; background: none; border: 1.5px dashed var(--line2); border-radius: 12px; padding: 9px 12px; font-size: 0.93em; color: var(--ink); }
.qz-al { font-weight: 900; color: var(--brand); flex: none; }
.qz-av { filter: blur(6px); transition: filter 0.2s; user-select: none; }
.qz-a.open { border-style: solid; border-color: var(--ok); }
.qz-a.open .qz-av { filter: none; user-select: auto; }
.qz-a.open .qz-al { color: var(--ok); }
.qz-score { margin-left: auto; flex: none; font: 800 0.82rem var(--num); color: var(--ok); padding-top: 8px; white-space: nowrap; }

/* links */
.lnk { display: grid; gap: 10px; padding: 6px 0; }
.lnk .it { border: 1px solid var(--doc-line); border-radius: 14px; padding: 12px 14px; }
.lnk a { font-weight: 900; text-decoration: none; }
.lnk a::after { content: ' ↗'; font-weight: 400; }
.lnk p { font-size: 0.92em; color: var(--ink2); margin-top: 2px; }
.lnk .tag { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--c); border: 1px solid var(--c); border-radius: 6px; padding: 0 6px; margin-left: 8px; }

/* 赤シート：和訳・答えを隠す（タップで1つずつ見える） */
.rs-on .rs:not(.show), .rs-on .rs-c:not(.show) { color: transparent !important; background: color-mix(in srgb, var(--rs) 78%, transparent); border-radius: 6px; cursor: pointer; user-select: none; text-decoration: none; }
.rs-on .rs:not(.show) *, .rs-on .rs-c:not(.show) * { color: transparent !important; text-decoration: none; }
.rs-on .phr .ja:not(.show) { display: inline-block; min-width: 7em; }
.rs-on .qz-av { filter: blur(6px); }

/* シートの終わり */
.srcs { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--doc-line); font-size: 0.84rem; color: var(--ink2); line-height: 1.7; }
.srcs h2 { font-size: 0.9rem; margin-bottom: 4px; }
.srcs ul { margin: 0; padding-left: 1.2em; }
.sh-seo { margin-top: 12px; font-size: 0.8rem; color: var(--mute); line-height: 1.7; }
.sh-cta { margin-top: 26px; display: grid; gap: 14px; align-items: center; background: var(--ink); color: var(--bg); border-radius: 22px; padding: 22px 20px; }
.sh-cta b { font-size: 1.3rem; font-weight: 900; }
.sh-cta p { opacity: 0.85; font-size: 0.9rem; }
.sh-cta .btn-pri { background: var(--hl); border-color: var(--hl); color: #131a2c; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.pn a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; }
.pn a:hover { border-color: var(--c); }
.pn small { color: var(--mute); font-size: 0.76rem; font-weight: 700; }
.pn b { font-size: 0.86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pn-n { text-align: right; }
.sh-routes, .sh-rel, .sh-apps { margin-top: 30px; }
.sh-routes h2, .sh-rel h2, .sh-apps h2 { font-size: 1.15rem; font-weight: 900; margin-bottom: 12px; }
.apps { display: flex; flex-wrap: wrap; gap: 8px; }
.apps a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 0.9rem; }
.apps a:hover { border-color: var(--brand); color: var(--brand); }

/* スマホ下の操作バー（シートのページ） */
.mbar { position: fixed; z-index: 44; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--hdr); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.mbar .btn { flex: 1; min-height: 46px; padding: 0 10px; font-size: 0.9rem; }
.mbar .btn[aria-pressed='true'] { background: var(--rs); border-color: var(--rs); color: #fff; }
.pg-sheet .ft { padding-bottom: 80px; }
@media (max-width: 380px) { .sh-doc { padding: 4px 14px 14px; } .qz-o { grid-template-columns: 1fr; } }
@media (min-width: 600px) {
  .sh-pdf { grid-template-columns: 76px 1fr; padding: 14px 18px; }
  .sh-doc { padding: 10px 30px 26px; }
}
@media (min-width: 1000px) {
  .sh-wrap { grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
  .sh-side { position: sticky; top: calc(var(--hh) + 14px); max-height: calc(100vh - var(--hh) - 28px); overflow-y: auto; scrollbar-width: thin; align-content: start; }
  .toc summary { pointer-events: none; }
  .toc summary::after { display: none; }
  .tools { flex-wrap: wrap; overflow: visible; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
  .tl-au, .tl-fs { width: 100%; }
  .side-dl { display: inline-flex; }
  .sh-doc { padding: 14px 44px 32px; max-width: 860px; }
  .sh-hd, .sh-pdf { margin-left: 278px; }
}

/* ---------- 文章ページ ---------- */
.prose { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 18px 22px; }
.prose h2 { font-size: 1.2rem; font-weight: 900; margin: 22px 0 8px; }
.prose ul { padding-left: 1.2em; margin: 0; }
.prose li { margin: 4px 0; }
.nf { text-align: center; padding: 80px 0; display: grid; gap: 12px; justify-items: center; }
.nf h1 { font-size: 1.8rem; font-weight: 900; }

/* ---------- フッター ---------- */
.ft { margin-top: 70px; background: #11172b; color: #c9cee0; padding: 36px 0 0; }
.ft a { color: #e8ebf6; }
.ft-in { max-width: 1180px; margin: 0 auto; padding: 0 18px; display: grid; gap: 26px; }
.ft-brand .logo { color: #fff; --ink: #fff; --paper: #11172b; }
.ft-brand .logo-t small { color: #9aa1bb; }
.ft-brand p { font-size: 0.84rem; margin-top: 12px; line-height: 1.8; color: #aab0c6; }
.ft-col { display: grid; gap: 7px; align-content: start; font-size: 0.88rem; }
.ft-col b { color: #fff; font-size: 0.8rem; letter-spacing: 0.06em; margin-bottom: 4px; }
.ft-col a { text-decoration: none; }
.ft-col a:hover { text-decoration: underline; }
.ft-cr { max-width: 1180px; margin: 30px auto 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid #263052; display: grid; gap: 10px; }
.ft-hara { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; justify-self: start; background: #1b2340; border: 1px solid #2b3560; border-radius: 999px; padding: 8px 16px; }
.ft-hara span { font-size: 0.72rem; color: #9aa1bb; }
.ft-hara b { font-size: 1.05rem; color: #fff; font-weight: 900; }
.ft-hara small { font: 600 0.74rem var(--num); color: #9aa1bb; }
.ft-cr p { font-size: 0.76rem; color: #8b92ac; }

/* ---------- 上へ戻る・お知らせ ---------- */
.totop { position: fixed; z-index: 46; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--mbar, 0px)); width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop .ic { width: 22px; height: 22px; }
.toast { position: fixed; z-index: 80; left: 50%; top: calc(var(--hh) + 12px); transform: translate(-50%, -12px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; max-width: calc(100vw - 24px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 動き（Motion）：出る前に隠しておく。fx.js が無くても2.5秒で必ず出る ---------- */
.mo :is(.rv, .card, .route, .cat, .rl, .faq details, .sec-h, .stats li):not(.in) { opacity: 0; animation: rvsafe 0.01s 2.5s forwards; }
@keyframes rvsafe { to { opacity: 1; } }

/* ---------- 広い画面 ---------- */
@media (min-width: 600px) {
  .routes { grid-template-columns: repeat(3, 1fr); }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .card { grid-template-columns: 96px 1fr; }
  .sh-cta { grid-template-columns: 1fr auto; }
  .ft-in { grid-template-columns: 1.4fr 1fr 1fr; }
  .rl { grid-template-columns: 36px 88px 1fr; }
}
@media (min-width: 720px) {
  .wd-h { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 12px; font-size: 0.74rem; font-weight: 700; color: var(--mute); padding: 8px 0 4px; border-bottom: 1.5px solid var(--line2); }
  .wd2 .wd-h { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .wd3 .wd-r { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr); }
  .wd3 .wd-r .w2 { grid-column: auto; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
}
@media (min-width: 860px) {
  :root { --hh: 66px; }
  .hd-nav { display: flex; }
  .hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 36px; padding-top: 38px; }
  .hero-art { order: 0; }
  .hero-art img { transform: rotate(1.2deg); }
  .routes { grid-template-columns: repeat(5, 1fr); }
  .cats { grid-template-columns: repeat(4, 1fr); }
  .mbar { display: none; }
  .pg-sheet { --mbar: 0px; }
  .pg-sheet .ft { padding-bottom: 0; }
  .pg-hero { min-height: 320px; }
  .pg-hero-b { padding: 36px 34px 30px; }
}
@media (min-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .card { grid-template-columns: 1fr; }
  .card-th { width: 62%; margin: 4px auto 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .hd, .dw, .dw-bg, .mbar, .totop, .tools, .selbar, .ft, .sh-cta, .pn, .sh-rel, .sh-apps, .sh-routes, .toc { display: none !important; }
  body { background: #fff; }
}
.btn-i.fav { width: 52px; height: 52px; }
.btn-i.fav .ic { width: 22px; height: 22px; }

/* ---------- 検索パネル（表現単位・最近・よく探される） ---------- */
.sp-g { font: 800 0.72rem/1 var(--num); letter-spacing: 0.1em; color: var(--mute); margin: 14px 8px 8px; }
.sp-g small { font-weight: 600; letter-spacing: 0; margin-left: 4px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.sp-chip { border: 1.5px solid var(--line2); background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 0.84rem; font-weight: 700; color: var(--ink2); }
.sp-chip:hover { border-color: var(--brand); color: var(--brand); }
.sp-ex { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.sp-ex:hover, .sp-ex.on { background: color-mix(in srgb, var(--c) 10%, transparent); }
.sp-ex b { font-family: var(--en); font-size: 0.98rem; }
.sp-ex span { grid-column: 1; color: var(--ink2); font-size: 0.84rem; }
.sp-ex small { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 0.7rem; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--card)); padding: 3px 8px; border-radius: 999px; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-ex em, .sp-it em { font-style: normal; background: color-mix(in srgb, var(--hl) 65%, transparent); color: var(--ink); border-radius: 3px; padding: 0 1px; }
kbd { font: 700 0.78em var(--num); border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--card); }

/* ---------- 1分チャレンジ ---------- */
.qc { background: var(--ink); color: var(--bg); border-radius: 24px; padding: 14px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.qc::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hl) 35%, transparent), transparent 70%); pointer-events: none; }
.qc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; position: relative; }
.qc-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.qc-cats button { border: 1.5px solid rgba(255, 255, 255, 0.25); background: transparent; color: inherit; border-radius: 999px; padding: 5px 12px; font-size: 0.82rem; font-weight: 700; }
.qc-cats button.on { background: var(--hl); border-color: var(--hl); color: #131a2c; }
.qc-best { font-size: 0.8rem; font-weight: 700; opacity: 0.85; }
.qc-best b { font: 800 1.1rem var(--num); color: var(--hl); }
.qc-card { margin-top: 12px; background: var(--card); color: var(--ink); border-radius: 18px; padding: 20px 16px; min-height: 280px; display: grid; position: relative; }
.qc-start, .qc-end, .fc-end { display: grid; gap: 12px; justify-items: center; align-content: center; text-align: center; }
.qc-big { font: 800 clamp(2.6rem, 12vw, 4rem)/1 var(--num); letter-spacing: -0.03em; }
.qc-big small { font-size: 0.45em; color: var(--mute); }
.qc-msg { font-weight: 900; font-size: 1.1rem; }
.qc-prog, .fc-prog { display: flex; align-items: center; gap: 10px; font: 700 0.8rem var(--num); color: var(--mute); margin-bottom: 10px; }
.qc-prog .tl-bar, .fc-prog .tl-bar { flex: 1; }
.qc-cat { font-size: 0.76rem; font-weight: 700; color: var(--c); }
.qc-en { font-family: var(--en); font-weight: 700; font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.3; margin: 4px 0 2px; }
.qc-ask { color: var(--mute); font-size: 0.86rem; margin-bottom: 12px; }
.qc-opts { display: grid; gap: 8px; }
.qc-o { display: flex; align-items: center; gap: 10px; text-align: left; border: 1.5px solid var(--line2); background: var(--bg); border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 0.95rem; transition: transform 0.12s, border-color 0.15s, background 0.15s; }
.qc-o:hover:not(:disabled) { border-color: var(--brand); }
.qc-o:active:not(:disabled) { transform: scale(0.98); }
.qc-o i { font: 800 0.8rem/26px var(--num); font-style: normal; width: 26px; height: 26px; border-radius: 8px; background: var(--card); border: 1px solid var(--line2); text-align: center; flex: none; }
.qc-o.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--card)); }
.qc-o.ok i { background: var(--ok); color: #fff; border-color: var(--ok); }
.qc-o.ng { border-color: var(--ng); background: color-mix(in srgb, var(--ng) 10%, var(--card)); }
.qc-o.ng i { background: var(--ng); color: #fff; border-color: var(--ng); }
.qc-o:disabled { cursor: default; }
.qc-fb { margin-top: 12px; font-size: 0.9rem; display: grid; gap: 6px; }
.qc-fb .ok { color: var(--ok); }
.qc-fb .ng { color: var(--ng); }
.qc-src { color: var(--mute); font-size: 0.82rem; }
.qc-next { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.qc-g { font-size: 0.8rem; font-weight: 700; color: var(--mute); }
.qc-miss { display: grid; gap: 6px; width: 100%; max-width: 520px; }
.qc-miss a { display: grid; text-align: left; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.qc-miss b { font-family: var(--en); }
.qc-miss small { color: var(--mute); font-size: 0.76rem; }

/* ---------- レベル（マイリスト） ---------- */
.lvbox { display: grid; gap: 12px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 16px; margin-bottom: 14px; box-shadow: 0 5px 0 var(--ink); }
.lv-l { display: grid; gap: 4px; }
.lv-l small { font-size: 0.76rem; color: var(--mute); font-weight: 700; }
.lv-l b { font-size: 1.6rem; font-weight: 900; }
.lv-next { font-size: 0.84rem; color: var(--ink2); }
.lv-bar { width: 100%; height: 8px; }
.lv-s { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lv-s li { background: var(--bg); border-radius: 12px; padding: 8px 10px; display: grid; }
.lv-s b { font: 800 1.4rem/1.1 var(--num); }
.lv-s span { font-size: 0.7rem; color: var(--mute); font-weight: 700; }

/* ---------- カード・4択（シート） ---------- */
.ov { position: fixed; inset: 0; z-index: 75; background: rgba(8, 11, 22, 0.55); display: grid; place-items: center; padding: 12px; }
.ov-in { width: min(560px, 100%); max-height: calc(100dvh - 24px); overflow: auto; background: var(--bg); border-radius: 22px; box-shadow: var(--shadow-lg); }
.ov-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.ov-b { padding: 16px; }
.fc { display: grid; width: 100%; min-height: 220px; border: 0; padding: 0; background: none; perspective: 900px; margin: 4px 0 14px; color: var(--ink); }
.fc > span { grid-area: 1 / 1; display: grid; place-content: center; gap: 8px; text-align: center; padding: 20px; border-radius: 20px; backface-visibility: hidden; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.fc-f { background: var(--card); }
.fc-f b { font-family: var(--en); font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.3; }
.fc-b { background: color-mix(in srgb, var(--hl) 30%, var(--card)); transform: rotateY(180deg); }
.fc-b b { font-size: 1.3rem; font-weight: 900; }
.fc small { color: var(--mute); font-size: 0.8rem; }
.fc.flip .fc-f { transform: rotateY(-180deg); }
.fc.flip .fc-b { transform: rotateY(0); }
.fc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 検索から飛んできた項目を光らせる */
.it.flash { animation: flash 2.2s ease-out 1; border-radius: 12px; }
@keyframes flash { 0%, 30% { background: color-mix(in srgb, var(--hl) 70%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--hl) 50%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }
@media (min-width: 720px) {
  .qc { padding: 20px; }
  .qc-card { padding: 28px; }
  .qc-opts { grid-template-columns: 1fr 1fr; }
}

/* 単語表のメモ欄の太字（強く読む所など）を見えるように */
.wd-r .w2 b { color: var(--ink); font-weight: 700; }

/* ---------- 図解（data/figs/*.svg） ---------- */
.sc-fig { text-align: center; }
.fig { margin: 6px 0 2px; }
.fig svg { width: 100%; height: auto; max-height: 420px; display: block; margin: 0 auto; }
.fig figcaption { font-size: 0.84rem; color: var(--mute); margin-top: 6px; }
.fig .ln { stroke: var(--ink); fill: none; stroke-width: 2; }
.fig .ln2 { stroke: var(--line2); fill: none; stroke-width: 1.2; }
.fig .lnd { stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-dasharray: 5 4; }
.fig .ac { stroke: var(--c); fill: none; stroke-width: 2.6; }
.fig .acf { fill: color-mix(in srgb, var(--c) 18%, var(--card)); }
.fig .fl { fill: color-mix(in srgb, var(--ink) 7%, var(--card)); }
.fig .fk { fill: var(--ink); }
.fig .tx { fill: var(--ink); font-family: var(--jp); }
.fig .tx2 { fill: var(--mute); font-family: var(--jp); }
.fig .txa { fill: var(--c); font-family: var(--jp); font-weight: 700; }
.fig .en { font-family: var(--en); }
@media (min-width: 860px) { .sh-body > .sc-fig.wide { grid-column: 1 / -1; } }

/* もともと太字の所（見出し語・ここだけ3行・表の1列目など）の中の **強調**（アクセント位置など）は、色と下線で見分ける */
.wd-r .w0 b, .phr .en b, .par-ab .en b, .rul-ex .en b, .trp .ok b, .three > div b, .three-w li b, .tb td:first-child b, .qz-c b { color: var(--c); text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.14em; }

/* 閉じているメニューは描かない（横はみ出しの計算にも入れない） */
.dw[hidden], .dw-bg[hidden] { display: none; }
/* ルートの一覧：狭い画面ではボタンを折り返す */
.rl .card-a { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 359px) { .rl { grid-template-columns: 24px 56px 1fr; gap: 10px; } }

/* ---------- トップ：誰のためのサイトか・定番 ---------- */
.hero-kw { display: block; font-size: clamp(0.84rem, 3.4vw, 1rem); font-weight: 800; letter-spacing: 0.02em; color: var(--brand); margin-bottom: 8px; }
.hero-for { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-for a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 800; font-size: 0.86rem; text-decoration: none; }
.hero-for a .ic { width: 15px; height: 15px; }
.hero-for a:hover { background: var(--brand); color: var(--on-brand); }
.tei-s { margin-top: 10px; }
.tei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tei-t { display: grid; grid-template-rows: 1fr auto; background: var(--card); border: 2px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 18px; overflow: hidden; min-width: 0; transition: transform 0.2s, box-shadow 0.2s; }
.tei-t:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tei-m { position: relative; display: grid; align-content: start; gap: 4px; padding: 14px 14px 0; min-height: 168px; text-decoration: none; color: var(--ink); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, var(--card)), var(--card) 70%); overflow: hidden; }
.tei-k.long { font-size: clamp(0.92rem, 3.9vw, 1.25rem); }
.tei-en { font: 800 0.62rem/1.2 var(--num); letter-spacing: 0.12em; color: var(--c); }
.tei-k { font-size: clamp(1.05rem, 4.6vw, 1.55rem); word-break: keep-all; overflow-wrap: anywhere; font-weight: 900; line-height: 1.25; letter-spacing: -0.01em; position: relative; z-index: 1; }
.tei-d { font-size: 0.76rem; color: var(--ink2); line-height: 1.5; position: relative; z-index: 1; max-width: 64%; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tei-m img { position: absolute; right: -12px; bottom: -56px; width: 40%; border-radius: 4px; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35); transform: rotate(-6deg); transition: transform 0.25s; }
.tei-t:hover .tei-m img { transform: rotate(-2deg) translateY(-6px); }
.tei-a { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--line); position: relative; z-index: 2; background: var(--card); }
.tei-dl { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 0.78rem; text-decoration: none; }
.tei-dl .ic { width: 14px; height: 14px; }
.tei-dl small { font: 700 0.68rem var(--num); opacity: 0.85; }
.tei-more { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); font-weight: 700; font-size: 0.74rem; text-decoration: none; line-height: 1.3; }
.tei-more:hover { border-color: var(--c); color: var(--ink); }
@media (min-width: 860px) {
  .tei { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .tei-m { min-height: 200px; padding: 18px 18px 0; }
}

/* 見出しが自分で番号を持つシート（①・第1問・Part 1）：自動の通し番号は付けない */
.sh-body.own .sc-h { counter-increment: none; }
.sh-body.own .sc-h::before { content: ''; min-width: 6px; width: 6px; height: 26px; padding: 0; border-radius: 3px; margin-top: 3px; }
.sh-body.own .sc-h:has(.sc-no)::before { display: none; }
.sc-no { flex: none; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--c); color: #fff; font: 800 0.95rem/30px var(--num); text-align: center; margin-top: 2px; }
.toc.own a { grid-template-columns: 10px 1fr; }
.toc.own a::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--c); margin-top: 0.62em; }

/* =====================================================================
   2026-10-25 多読ベストの UI に寄せる（ユーザー要望「多読ベストに似せて・遊び心・Motion・スマホで見やすく」）
   ===================================================================== */
:root { --grad: linear-gradient(120deg, #4b2fb8 0%, #9c36b5 45%, #e8590c 100%); --round: 'Zen Maru Gothic', var(--jp); --display: 'Fraunces', 'Georgia', serif; }
h1, h2, h3, .h2, .sec-h h2 { font-family: var(--round); }
.kicker { font: 800 12px/1 var(--display); letter-spacing: 0.22em; color: var(--brand); margin: 0 0 10px; }
.h2 { font-size: clamp(20px, 3vw, 26px); font-weight: 900; margin: 0; }
.sub { color: var(--ink2); margin: 4px 0 14px; font-size: 0.92rem; }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--line2); background: var(--card); color: var(--ink); font-weight: 800; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; white-space: nowrap; }
.btn2:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn2.primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 10px 24px -10px rgba(75, 47, 184, 0.8); }
.btn2.big { padding: 15px 28px; font-size: 1.04rem; }
.btn2.glass { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn2 .ic { width: 18px; height: 18px; }

/* ヒーロー：全面の絵＋左に見出し */
main.top { max-width: none; padding: 0 0 40px; }
main.top > :not(.top-hero) { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.top-hero { position: relative; min-height: min(88vh, 780px); display: grid; align-items: end; color: #fff; overflow: hidden; isolation: isolate; background: #1a1240; }
.top-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; z-index: -2; animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.08) translate(-1%, -1%); } }
.top-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 8, 40, 0.92) 0%, rgba(14, 8, 40, 0.65) 45%, rgba(14, 8, 40, 0.1) 75%); }
.top-hero-in { max-width: 1180px; width: 100%; margin: 0 auto; padding: 120px 18px 34px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 14px 6px 6px; border-radius: 999px; font-weight: 700; font-size: 0.82rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.eyebrow span { background: #f59f00; color: #1d1830; border-radius: 999px; padding: 2px 10px; font: 800 0.72rem var(--display); letter-spacing: 0.1em; }
.top-hero h1 { font-size: clamp(2.1rem, 8.4vw, 4.6rem); line-height: 1.16; margin: 16px 0 14px; font-weight: 900; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35); letter-spacing: -0.01em; }
.top-hero h1 .hero-kw { color: #ffe066; font-size: clamp(0.82rem, 3.2vw, 1.05rem); margin-bottom: 10px; letter-spacing: 0.04em; text-shadow: none; font-family: var(--jp); }
.top-hero h1 em { font-style: normal; background: linear-gradient(100deg, #ffd43b, #ff922b 40%, #f783ac 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: clamp(0.96rem, 1.8vw, 1.1rem); max-width: 620px; opacity: 0.95; margin: 0 0 22px; line-height: 1.85; }
.hero-lead b { color: #ffe066; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.hero-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 620px; }
.hero-stats li { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px; padding: 9px 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-stats b { display: block; font: 800 1.5rem/1.1 var(--display); white-space: nowrap; }
.hero-stats b small { font: 800 0.8rem var(--round); margin-left: 2px; }
.hero-stats span { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.85; margin-bottom: 2px; }
.sparkles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sparkles i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #fff7c2 0%, rgba(255, 212, 59, 0.6) 45%, transparent 70%); opacity: 0; }

/* はらだくん */
.owl-greet { margin-top: 26px !important; }
.owl-main { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.owl-big-btn { border: 0; background: none; padding: 0; cursor: pointer; }
.owl-big { width: 96px; height: auto; filter: drop-shadow(0 10px 16px rgba(60, 30, 10, 0.25)); }
.owl-talk { min-width: 0; }
.owl-name { font: 900 1rem var(--round); margin-bottom: 6px; }
.owl-name small { font: 700 0.72rem var(--jp); color: var(--mute); margin-left: 4px; }
.owl-bubble { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: 18px; padding: 12px 14px; line-height: 1.8; font-size: 0.93rem; box-shadow: 0 5px 0 var(--ink); }
.owl-bubble::before { content: ''; position: absolute; left: -11px; top: 18px; width: 16px; height: 16px; background: var(--card); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.owl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.owl-acts .btn2 { padding: 9px 16px; font-size: 0.9rem; }
.gacha-res:empty { display: none; }
.gacha-res { margin-top: 14px; }
.gacha-card { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; background: var(--card); border: 2px solid var(--c); border-radius: 18px; padding: 12px; box-shadow: 0 14px 30px -16px var(--c); }
.gacha-card img { border-radius: 4px; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35); background: #fff; }
.gacha-card small { font-weight: 800; font-size: 0.74rem; color: var(--c); }
.gacha-card b { display: block; font: 900 1rem/1.45 var(--round); margin: 2px 0 8px; }
.gacha-card .gacha-a { display: flex; flex-wrap: wrap; gap: 6px; }
.gacha-card .btn2 { padding: 7px 14px; font-size: 0.84rem; }
.top-q { display: flex; align-items: center; gap: 8px; margin-top: 18px; background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: 0 5px 0 var(--ink); }
.top-q > span .ic { width: 20px; height: 20px; color: var(--mute); }
.top-q input { flex: 1; min-width: 0; border: 0; background: none; font-size: 1rem; padding: 8px 0; color: var(--ink); outline: none; }
.top-q .btn2 { padding: 10px 18px; }
.top-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.top-tags a { font-size: 0.82rem; font-weight: 700; color: var(--ink2); text-decoration: none; padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.top-tags a:hover { border-color: var(--brand); color: var(--brand); }

/* 定番 */
.tei-emo { position: absolute; right: 12px; top: 10px; font-size: 1.5rem; z-index: 1; }

/* 横スクロールの棚（多読ベストの .row） */
.shelf { margin-top: 40px; }
.shelf-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.shelf-h h2 { min-width: 0; overflow-wrap: anywhere; }
.shelf-h a { font-weight: 800; text-decoration: none; white-space: nowrap; flex-shrink: 0; color: var(--brand); font-size: 0.9rem; }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 230px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding-left: 16px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.row > * { scroll-snap-align: start; }
.scard { display: flex; flex-direction: column; background: var(--card); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; min-width: 0; }
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.scard-th { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 10%, #fff)); }
.scard-th img { position: absolute; left: 50%; top: 14px; width: 76%; transform: translateX(-50%) rotate(-2deg); border-radius: 3px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.4); background: #fff; transition: transform 0.4s; }
.scard:hover .scard-th img { transform: translateX(-50%) rotate(0deg) translateY(-4px); }
.scard-p { position: absolute; left: 10px; bottom: 10px; z-index: 2; font: 800 0.66rem/1 var(--display); background: var(--ink); color: var(--bg); padding: 4px 8px; border-radius: 999px; }
.scard-au { position: absolute; right: 10px; top: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--ok); display: grid; place-items: center; }
.scard-au .ic { width: 15px; height: 15px; }
.scard-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.scard-c { font-size: 0.7rem; font-weight: 800; color: var(--c); }
.scard h3 { font: 800 0.9rem/1.45 var(--round); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.scard h3 a { color: var(--ink); text-decoration: none; }
.scard-a { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 6px; }
.scard-dl { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 0.78rem; text-decoration: none; }
.scard-dl .ic { width: 14px; height: 14px; }
.scard .fav { margin-left: auto; }
.row-apps { grid-auto-columns: minmax(240px, 280px); }

/* 目的（ルート）：色の階段カードを横に */
.rrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 200px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 16px 18px; margin: 0 -16px; scrollbar-width: thin; align-items: end; }
.rcard { --h: calc(170px + (var(--i) - 7) * 0px); scroll-snap-align: start; min-height: 178px; border-radius: 20px 20px 10px 10px; padding: 14px 14px 12px; text-decoration: none; color: #fff; background: linear-gradient(170deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 72%, #000)); box-shadow: 0 14px 28px -14px var(--c); display: flex; flex-direction: column; gap: 6px; transition: transform 0.2s; }
.rcard:hover { transform: translateY(-6px); }
.rcard-n { font: 800 1.6rem/1 var(--display); opacity: 0.9; }
.rcard b { font: 900 1.02rem/1.35 var(--round); }
.rcard small { font-size: 0.74rem; line-height: 1.5; opacity: 0.92; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rcard-c { margin-top: auto; font: 800 1.35rem/1 var(--display); }
.rcard-c small { font: 700 0.72rem var(--jp); margin-left: 2px; display: inline; }

/* 分野：スマホは2段で横にスワイプ */
.cats2 { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 16px; margin: 0 -16px; scrollbar-width: thin; }
.cat2 { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: var(--c); box-shadow: var(--shadow); scroll-snap-align: start; }
.cat2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.6s; }
.cat2::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--c) 88%, #000) 0%, transparent 70%); }
.cat2:hover img { transform: scale(1.06); }
.cat2-t { position: absolute; left: 12px; right: 12px; bottom: 10px; }
.cat2-t b { display: block; font: 900 1.02rem/1.3 var(--round); }
.cat2-t small { font-weight: 800; font-size: 0.74rem; opacity: 0.92; }

/* 全シートへ */
.all-cta { display: grid; gap: 16px; align-items: center; background: var(--grad); color: #fff; border-radius: 26px; padding: 26px 22px !important; margin-top: 44px; box-shadow: 0 20px 40px -20px rgba(75, 47, 184, 0.7); }
.all-cta .kicker { color: #ffe066; }
.all-cta h2 { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; }
.all-cta p { opacity: 0.92; font-size: 0.92rem; margin-top: 4px; }
.all-cta .btn2.primary { background: #fff; color: #4b2fb8; justify-self: start; }
.all-hd { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; margin: 4px 0 8px; }
.all-hd img { width: 84px; height: auto; }
.all-hd h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 900; }
.all-hd p { color: var(--ink2); font-size: 0.9rem; }
.qc-owl { width: 90px; height: auto; margin: 0 auto -4px; }

/* もっと見る */
.pg-hide { display: none !important; }
.more-btn { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 420px; margin: 16px auto 4px; min-height: 48px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-weight: 900; font-size: 0.95rem; box-shadow: 0 4px 0 var(--ink); transition: transform 0.12s, box-shadow 0.12s; }
.more-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.more-btn[hidden] { display: none; }
.sc-more { margin-top: 10px; border-color: var(--c); box-shadow: 0 4px 0 var(--c); color: var(--ink); }

/* どのページにもいる小さなはらだくん */
.owl-pal { position: fixed; left: 12px; bottom: calc(16px + env(safe-area-inset-bottom) + var(--mbar, 0px)); z-index: 45; }
.owl-pal[hidden], .owl-peek[hidden] { display: none; }
.owl-pal-btn { width: 64px; height: 64px; border: 0; background: none; padding: 0; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(40, 20, 0, 0.3)); }
.owl-pal-btn img { width: 100%; height: auto; }
.owl-pal-close { position: absolute; left: 50px; top: -4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(20, 20, 30, 0.7); color: #fff; font-size: 13px; line-height: 22px; padding: 0; }
.owl-pal-bubble { position: absolute; left: 4px; bottom: 74px; width: min(300px, calc(100vw - 32px)); background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 12px 14px; box-shadow: 0 5px 0 var(--ink); font-size: 0.88rem; line-height: 1.75; }
.owl-pal-bubble a { font-weight: 800; }
.owl-pal-bubble .owl-menu { display: grid; gap: 6px; margin-top: 8px; }
.owl-pal-bubble .owl-menu a, .owl-pal-bubble .owl-menu button { display: block; text-align: left; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--bg); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 0.86rem; }
.owl-peek { position: fixed; left: -14px; bottom: calc(90px + env(safe-area-inset-bottom) + var(--mbar, 0px)); z-index: 45; width: 44px; height: 44px; border: 0; background: none; padding: 0; transform: rotate(18deg); opacity: 0.85; }
.owl-peek img { width: 100%; }

/* 下のタブバー（スマホだけ。シートのページは PDF・赤シートのバーがあるので出さない） */
.tabbar { display: none; }
@media (max-width: 859px) {
  body:not(.pg-sheet) .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 52; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 1px; text-decoration: none; color: var(--ink2); font: 700 10.5px/1.2 var(--jp); background: none; border: 0; padding: 2px 0; min-height: 46px; }
  .tabbar span { font-size: 20px; line-height: 1.2; }
  body:not(.pg-sheet) { --mbar: 66px; }
  body:not(.pg-sheet) .ft { padding-bottom: 76px; }
  .selbar { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (min-width: 600px) {
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .owl-main { grid-template-columns: 140px 1fr; gap: 18px; }
  .owl-big { width: 140px; }
  .cats2 { grid-auto-columns: 40%; }
}
@media (min-width: 860px) {
  .top-hero { align-items: center; }
  .top-hero::before { background: linear-gradient(90deg, rgba(14, 8, 40, 0.9) 0%, rgba(20, 10, 50, 0.62) 42%, rgba(20, 10, 50, 0) 70%), linear-gradient(0deg, rgba(14, 8, 40, 0.5), transparent 40%); }
  .top-hero-in { padding: 90px 28px; }
  .top-hero-img { object-position: 60% 50%; }
  .owl-greet { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px 30px; align-items: start; }
  .owl-greet .top-q, .owl-greet .top-tags { grid-column: 2; }
  .owl-greet .owl-main { grid-row: span 3; }
  .owl-greet .gacha-res { grid-column: 1; }
  .rrow { grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); overflow: visible; margin: 0; padding: 6px 0; }
  .rcard { min-height: 200px; }
  .cats2 { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 4px 0; }
  .row { margin: 0; padding-left: 4px; padding-right: 4px; }
  .all-cta { grid-template-columns: 1fr auto; padding: 34px 40px !important; }
}

.owl-cheer { display: block; width: 110px; height: auto; margin: 10px auto 0; }
@media (max-width: 719px) {
  .flt-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -14px; margin-right: -14px; padding: 0 14px 4px; }
  .flt-cats::-webkit-scrollbar { display: none; }
  .flt-cats button { flex: none; }
}

/* ---------- 特集・便利機能 ---------- */
.feats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 16px; margin: 0 -16px; scrollbar-width: thin; }
.feat2 { scroll-snap-align: start; position: relative; display: grid; gap: 4px; align-content: start; min-height: 170px; padding: 16px; border-radius: 20px; text-decoration: none; color: var(--ink); background: var(--card); border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.feat2:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); }
.feat2:nth-child(1) { background: linear-gradient(160deg, #fff3bf, var(--card) 70%); }
.feat2:nth-child(2) { background: linear-gradient(160deg, #d3f9d8, var(--card) 70%); }
.feat2:nth-child(3) { background: linear-gradient(160deg, #ffdeeb, var(--card) 70%); }
.feat2:nth-child(4) { background: linear-gradient(160deg, #d0ebff, var(--card) 70%); }
.feat2:nth-child(5) { background: linear-gradient(160deg, #e5dbff, var(--card) 70%); }
:root[data-theme='dark'] .feat2 { background: var(--card); }
.feat2-emo { font-size: 2rem; line-height: 1; }
.feat2 small { font-size: 0.74rem; font-weight: 800; color: var(--brand); margin-top: 6px; }
.feat2 b { font: 900 1.2rem/1.3 var(--round); }
.feat2 > span:last-child { font-size: 0.82rem; color: var(--ink2); line-height: 1.6; }
.ft-hd { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; margin: 4px 0 18px; }
.ft-hd img { width: 88px; height: auto; filter: drop-shadow(0 8px 12px rgba(60, 30, 10, 0.25)); }
.ft-hd h1 { font-size: clamp(1.45rem, 6vw, 2.3rem); font-weight: 900; line-height: 1.3; }
.ft-hd p:last-child { color: var(--ink2); font-size: 0.92rem; margin-top: 4px; line-height: 1.75; }
/* 1分診断 */
.sd { background: var(--card); border: 2px solid var(--ink); border-radius: 24px; padding: 18px 16px; box-shadow: 0 6px 0 var(--ink); }
.sd-prog { display: flex; align-items: center; gap: 10px; font: 800 0.86rem var(--display); margin-bottom: 14px; }
.sd-prog .tl-bar { flex: 1; width: auto; height: 8px; }
.sd-q { font: 900 clamp(1.25rem, 5vw, 1.6rem)/1.4 var(--round); margin-bottom: 14px; }
.sd-a { display: grid; gap: 8px; }
.sd-a button { text-align: left; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--line2); background: var(--bg); color: var(--ink); font-weight: 800; font-size: 1rem; transition: border-color 0.15s, transform 0.12s, background 0.15s; }
.sd-a button:hover { border-color: var(--brand); }
.sd-a button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sd .btn-t { margin-top: 10px; }
.sd-res { display: grid; grid-template-columns: 76px 1fr; gap: 4px 12px; align-items: center; }
.sd-owl { width: 76px; height: auto; grid-row: span 2; }
.sd-res .sd-q { margin: 0; }
.sd-s { color: var(--ink2); font-size: 0.86rem; }
.sd-row { margin-top: 12px; }
.sd-no { position: absolute; right: 10px; top: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 0.95rem/30px var(--display); text-align: center; }
.sd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* 30日チャレンジ */
.ch-plans { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 8px; margin: 0 -16px; scrollbar-width: none; }
.ch-plans::-webkit-scrollbar { display: none; }
.ch-plans button { flex: none; width: 180px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 2px solid var(--line2); background: var(--card); color: var(--ink); display: grid; gap: 2px; }
.ch-plans button b { font: 900 0.98rem var(--round); }
.ch-plans button small { font-size: 0.72rem; color: var(--ink2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-plans button.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--card)); box-shadow: 0 4px 0 var(--brand); }
.ch-exam { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-weight: 700; }
.ch-exam input { margin-left: 6px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--line2); background: var(--bg); color: var(--ink); font: inherit; }
.ch-exam p { font-size: 0.9rem; color: var(--ink2); }
.ch-exam b { font: 800 1.6rem var(--display); color: var(--ng); }
.ch-t { display: grid; gap: 10px; justify-items: start; background: var(--card); border: 2px solid var(--ink); border-radius: 24px; padding: 18px 16px; box-shadow: 0 6px 0 var(--ink); }
.ch-t h2 { font: 900 1.4rem var(--round); margin-top: -6px; }
.ch-t .scard { width: min(260px, 100%); }
.ch-prog { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-weight: 800; }
.ch-prog b { font: 800 1.3rem var(--display); color: var(--ok); }
.ch-prog .tl-bar { flex: 1; width: auto; height: 8px; }
.ch-cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ch-cal a { display: grid; gap: 2px; align-content: start; min-height: 64px; padding: 6px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--card); text-decoration: none; color: var(--ink); overflow: hidden; }
.ch-cal b { font: 800 0.95rem var(--display); }
.ch-cal small { font-size: 0.6rem; color: var(--ink2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-cal a.today { border-color: var(--brand); box-shadow: 0 3px 0 var(--brand); }
.ch-cal a.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.ch-cal a.done small { color: rgba(255, 255, 255, 0.85); }
.ch-cal a.done b::after { content: " \2713"; }
.ch-zip { margin-top: 14px; }
/* ZIPパック */
.pks { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; margin: 10px -16px 0; padding: 4px 16px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.pk { scroll-snap-align: start; }
.pk { position: relative; display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 2px solid color-mix(in srgb, var(--c) 50%, var(--line)); }
.pk-emo { position: absolute; right: 14px; top: 12px; font-size: 1.5rem; }
.pk b { font: 900 1.05rem var(--round); padding-right: 36px; }
.pk small { font-size: 0.8rem; color: var(--ink2); line-height: 1.55; }
.pk-n { font: 800 0.8rem var(--display); color: var(--c); }
.pk .btn2 { justify-self: start; margin-top: 6px; padding: 9px 16px; font-size: 0.88rem; }
.note { font-size: 0.82rem; color: var(--mute); margin-top: 18px; }
/* 印刷ガイド・先生向け */
.guide { display: grid; gap: 14px; }
.gsteps { list-style: none; margin: 0; padding: 0; counter-reset: g; display: grid; gap: 12px; }
.gsteps li { counter-increment: g; position: relative; padding: 16px 16px 16px 58px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.gsteps li::before { content: counter(g); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; font: 800 1rem/32px var(--display); text-align: center; }
.gsteps b { display: block; font: 900 1.05rem/1.45 var(--round); margin-bottom: 4px; }
.gsteps p { color: var(--ink2); font-size: 0.93rem; line-height: 1.8; }
.gbox { padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--hl) 22%, var(--card)); border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink); }
.gbox b { font: 900 1.02rem var(--round); }
.gbox p { margin-top: 4px; font-size: 0.93rem; line-height: 1.8; }
@media (min-width: 720px) {
  .pks { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; margin: 10px 0 0; padding: 0; }
  .sd-a { grid-template-columns: 1fr 1fr; }
  .ch-cal { grid-template-columns: repeat(10, 1fr); }
}
@media (min-width: 1000px) {
  .feats { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 0; padding: 4px 0 8px; }
  .pks { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- スマホをコンパクトに（2026-10-26）：横スクロールをやめて縦に詰める。PC はそのまま ---------- */
/* 分野ごとの棚：タブで1つずつ（スマホも PC も） */
.shelf-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 56px 0 4px; }
.shelf-tabs button { border: 1.5px solid var(--line2); background: var(--card); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 0.88rem; }
.shelf-tabs button:hover { border-color: var(--ink); }
.shelf-tabs button[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.shelf-tabs-h { width: 100%; font-size: clamp(1.35rem, 5.4vw, 2.1rem); font-weight: 900; margin-bottom: 6px; }
.shelf.tabbed { margin-top: 12px; }
.shelf.tabbed.shelf-off { display: none; }
.shelf.tabbed .shelf-h h2 { display: none; }
.shelf.tabbed .shelf-h { justify-content: flex-end; }
@media (max-width: 719px) { .shelf-tabs { margin-top: 38px; } .shelf-tabs button { padding: 6px 11px; font-size: 0.8rem; } }
.shelf-more { display: block; width: 100%; margin-top: 8px; padding: 9px; border-radius: 12px; border: 1.5px dashed var(--line2); background: none; color: var(--brand); font-weight: 800; font-size: 0.86rem; }
@media (max-width: 719px) {
  .sec { margin-top: 38px; }
  .sec-h { margin-bottom: 12px; }
  .sec-h h2 { font-size: 1.35rem; }
  .sec-h > p:last-child:not(.sec-en) { font-size: 0.86rem; line-height: 1.6; }
  .sub { font-size: 0.84rem; line-height: 1.6; margin: 2px 0 10px; }

  /* 定番：2列の小さなカード（説明・サムネ・関連リンクは各シートで） */
  .tei { gap: 8px; }
  .tei-t { border-radius: 14px; }
  .tei-m { min-height: 0; padding: 10px 10px 8px; gap: 2px; }
  .tei-m img, .tei-d, .tei-more { display: none; }
  .tei-en { font-size: 0.56rem; letter-spacing: 0.08em; padding-right: 26px; }
  .tei-k, .tei-k.long { font-size: 0.98rem; }
  .tei-emo { font-size: 1.15rem; right: 8px; top: 8px; }
  .tei-a { padding: 6px 10px 8px; border-top: 0; }
  .tei-dl { padding: 4px 10px; font-size: 0.74rem; }

  /* 特集・目的：横スクロール → 2列のタイル */
  .feats, .rrow { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 8px; scroll-snap-type: none; }
  .feat2 { min-height: 0; padding: 10px 12px; border-radius: 14px; box-shadow: 0 3px 0 var(--ink); gap: 1px; }
  .feat2 > span:last-child { display: none; }
  .feat2 b { font-size: 0.95rem; }
  .feat2 small { font-size: 0.66rem; }
  .feat2-emo { font-size: 1.3rem; }
  .rcard { min-height: 0; padding: 10px 12px; border-radius: 14px; gap: 2px; box-shadow: none; }
  .rcard > small { display: none; }
  .rcard-n { font-size: 1rem; }
  .rcard b { font-size: 0.92rem; }
  .rcard-c { font-size: 1rem; }

  /* 20の分野：2列の細い帯 */
  .cats2 { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 8px; scroll-snap-type: none; }
  .cat2 { aspect-ratio: auto; min-height: 58px; border-radius: 12px; }
  .cat2 img, .cat2::after { display: none; }
  .cat2-t { left: 10px; right: 10px; bottom: 8px; }
  .cat2-t b { font-size: 0.86rem; line-height: 1.25; }
  .cat2-t small { font-size: 0.68rem; }

  /* 分野ごとの棚：タブで1つずつ、縦の一覧で6本まで */
  .shelf .row:not(.row-apps) { grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 8px; scroll-snap-type: none; }
  .shelf .row:not(.row-apps):not(.show-all) > .scard:nth-child(n + 7) { display: none; }
  .scard { display: grid; grid-template-columns: 56px 1fr; border-radius: 14px; box-shadow: none; }
  .scard-th { aspect-ratio: auto; min-height: 76px; }
  .scard-th img { top: 8px; width: 40px; }
  .scard-p, .scard-au { display: none; }
  .scard-b { padding: 8px 10px; gap: 2px; }
  .scard h3 { font-size: 0.86rem; -webkit-line-clamp: 2; }
  .scard-a { padding-top: 2px; }
  .scard-dl { padding: 3px 10px; font-size: 0.72rem; }
  .shelf-more { display: block; width: 100%; margin-top: 8px; padding: 9px; border-radius: 12px; border: 1.5px dashed var(--line2); background: none; color: var(--brand); font-weight: 800; font-size: 0.86rem; }
  .row-apps { grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 8px; scroll-snap-type: none; }
  .row-apps .app { padding: 10px 12px; gap: 2px; }
  .row-apps .app-d { display: none; }
  .row-apps .app:nth-child(n + 6) { display: none; }

  /* 絞り込みの分野ボタン：横スクロールせず折り返す */
  .flt-cats { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; gap: 5px; }
  .flt-cats button { padding: 5px 10px; font-size: 0.76rem; }

  /* シート本文：紙を端まで広げ、行間と余白を詰める */
  .sh-hd { padding-bottom: 8px; gap: 6px; }
  .sh-hd h1 { font-size: 1.35rem; }
  .sh-lead { font-size: 0.92rem; line-height: 1.7; }
  .sh-doc { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; padding: 2px 14px 12px; line-height: 1.65; }
  .three-w { margin: 12px 0 4px; padding: 10px 12px; }
  .three-w li { line-height: 1.55; }
  .sc { padding: 18px 0 4px; }
  .sc-h { font-size: 1.1rem; gap: 8px; margin-bottom: 4px; }
  .sc-h::before { min-width: 26px; height: 26px; font-size: 0.85rem; line-height: 26px; border-radius: 8px; }
  .sc-i { font-size: 0.9em; line-height: 1.6; }
  .nt { font-size: 0.88em; line-height: 1.55; margin-top: 2px; }
  .ck { top: 9px; width: 28px; height: 28px; }
  .has-ck { padding-right: 36px !important; }
  .pl { width: 26px; height: 26px; vertical-align: -6px; margin-right: 6px; }
  .ex, .rul-ex { margin-top: 5px; padding-left: 10px; }
  .ex { line-height: 1.5; font-size: 0.95em; }
  .ex .dlg b { line-height: 1.6; }
  .exja, .rul-ex .ja { line-height: 1.5; margin-top: 1px; }
  .phr .it { padding: 10px 0; }
  .phr .en { font-size: 1.1em; line-height: 1.35; }
  .phr .ja { margin-top: 1px; font-size: 0.98em; }
  .wd-r { padding: 7px 0; gap: 0 10px; }
  .wd-r .w0 { font-size: 1.02em; }
  .wd-r .w1 { line-height: 1.45; font-size: 0.95em; }
  .wd-r .w2 { line-height: 1.5; }
  .rul .it { padding: 11px 0; }
  .rul-t { font-size: 1.02em; line-height: 1.45; gap: 8px; }
  .rul-d { margin-top: 3px; }
  .rul-ex .en { line-height: 1.5; }
  .trp .it, .par .it { padding: 10px 0; }
  .bx { padding: 10px 12px; }
  .bx p { line-height: 1.65; }
  .tb { line-height: 1.5; }
  .wide .tb tr { padding: 8px 12px; }

  /* 4択：短い選択肢は2×2、長い選択肢（.qz-long）は1列 */
  .qz .it { padding: 11px 0; grid-template-columns: 24px 1fr; gap: 6px; }
  .qz-o { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
  .qz-o.qz-long { grid-template-columns: 1fr; }
  .qz-b { min-height: 40px; padding: 6px 10px; gap: 8px; }
  .qz-b i { width: 22px; height: 22px; line-height: 22px; }
  .qz-r { margin-top: 7px; padding: 8px 12px; line-height: 1.6; }

  /* 確認問題集 */
  .dr-hero { gap: 6px; }
  .dr-hero > p { font-size: 0.88rem; line-height: 1.6; }
  .dr-body { margin: 10px -16px 0; background: var(--doc, var(--card)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 14px 8px; }
  .dq-sc .sc-h { font-size: 1rem; }
  .dr-body .qz-c { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
  .dr-body .qz-c.qz-long { grid-template-columns: 1fr; }
  .dq-o { padding: 7px 10px; gap: 8px; font-size: 0.95rem; border-radius: 10px; }
  .dq-o i { width: 22px; height: 22px; line-height: 22px; }
  .dq-q { line-height: 1.6; }
  .dq-ans { margin-top: 7px; padding: 8px 10px; font-size: 0.88rem; }
  .dq-e { line-height: 1.6; }
  .dr-score { padding: 8px 12px; gap: 8px; font-size: 0.84rem; }
}

/* 確認問題集：自己採点・まちがいだけ */
.dq-self { display: flex; gap: 6px; margin-top: 8px; }
.dq-self[hidden] { display: none; }
.dq-self button { flex: 1; border: 1.5px solid var(--line2); background: var(--card); border-radius: 10px; padding: 7px 10px; font-weight: 800; font-size: 0.86rem; color: var(--ink); }
.dq-self .ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--line2)); }
.dq-self .ng { color: var(--ng); border-color: color-mix(in srgb, var(--ng) 45%, var(--line2)); }
.dq-v { display: block; font-weight: 900; font-size: 0.95rem; }
.dq-it.right .dq-v { color: var(--ok); }
.dq-it.wrong .dq-v { color: var(--ng); }
.dr-wrongbtn { border: 1.5px solid var(--line2); background: var(--card); border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: 0.78rem; color: var(--ink2); white-space: nowrap; }
.dr-wrongbtn[aria-pressed='true'] { background: var(--ng); color: #fff; border-color: var(--ng); }
.dr-only-wrong .dq-it:not(.wrong) { display: none; }
.dr-only-wrong .sc-more { display: none; }
.dr-only-wrong .dq-sc:not(:has(.dq-it.wrong)) { display: none; }
.pg-drill .dr-score { margin-top: 12px; z-index: 20; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.25); }
@media (max-width: 719px) { .owl-peek { width: 34px; height: 34px; left: -16px; opacity: 0.75; } }
@media (max-width: 719px) { .wd-r { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
/* PC も横スクロールさせない：棚は折り返しの格子で6本まで（残りは「もっと見る」）、目的別は全部 */
@media (min-width: 720px) {
  .shelf .row:not(.row-apps), .rrow, .row-apps { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); overflow: visible; margin: 0; padding: 4px 0 8px; scroll-snap-type: none; }
  .row-apps { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .shelf .row:not(.row-apps):not(.show-all) > .scard:nth-child(n + 7) { display: none; }
  .shelf-more { max-width: 360px; margin: 10px auto 0; }
}
.dl.dl-dr { background: var(--card); color: var(--brand); border: 1.5px solid color-mix(in srgb, var(--brand) 45%, var(--line2)); }
@media (max-width: 719px) {
  .card { grid-template-columns: 50px 1fr; gap: 10px; padding: 9px 10px; }
  .card-p { font-size: 0.56rem; padding: 2px 4px; left: 2px; bottom: 2px; }
  .card h3 { font-size: 0.9rem; line-height: 1.4; margin: 2px 0 6px; }
  .card-k { gap: 6px; font-size: 0.86em; }
  .card-a .dl { padding: 5px 10px; font-size: 0.78rem; }
  .card-a .dl small { display: none; }
  .card .fav, .card .sel span { width: 32px; height: 32px; }
}
/* 問題集の本文（長文・掲示・会話）：読みやすい大きさで、左に色の線 */
.dq-sc .sc-i { color: var(--ink); font-size: 0.98rem; line-height: 1.75; background: var(--bg); border-left: 3px solid var(--c); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 4px 0 10px; }
@media (max-width: 719px) { .dq-sc .sc-i { font-size: 0.92rem; line-height: 1.65; padding: 8px 10px; } }
/* 問題集：訳と詳しい解説（Web 版だけ） */
.dq-ans p { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; }
.dq-ans p b { font-size: 0.74rem; font-weight: 900; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.dq-a b { color: #fff !important; background: var(--ok); margin-right: 0 !important; }
.dq-t { margin-top: 6px; color: var(--ink); line-height: 1.7; }
.dq-t b { background: color-mix(in srgb, var(--brand) 12%, var(--card)); color: var(--brand); }
.dq-e { margin-top: 6px; color: var(--ink); line-height: 1.75; }
.dq-e b { background: color-mix(in srgb, var(--hl) 35%, var(--card)); color: #8a4b00; }
:root[data-theme='dark'] .dq-e b { color: #ffc078; }
.dq-tr { margin: -4px 0 10px; }
.dq-tr summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.85rem; color: var(--brand); padding: 6px 12px; border: 1.5px dashed var(--line2); border-radius: 999px; list-style: none; }
.dq-tr summary::-webkit-details-marker { display: none; }
.dq-tr summary::before { content: '訳'; font-size: 0.7rem; background: var(--brand); color: #fff; border-radius: 5px; padding: 0 5px; }
.dq-tr[open] summary { border-style: solid; }
.dq-tr p { margin-top: 8px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; line-height: 1.8; font-size: 0.92rem; }