/* ナレッジバンドル 教材ページ（LP）の作り込み（2026-10-22）
 * 読むページ: /m/<slug>/・ハブ /m/denken/ /m/cma/・一覧 /m/（body.kb-lp。generate_kb_seo_pages.py が生成）
 * kb-ui.css のあとに読む。コラム（body.kb-col）と HP には効かない。
 * 方針:
 *   - 文章・見出し・並び順は SEO の施策で調整中なので変えない。見た目と操作性だけをここで作る
 *   - 見出しの上の英字ラベル（EXAM など）は CSS の content で出す（本文の文字を増やさない＝全ページ共通の定型文を増やさない）
 *   - 教材のジャンルごとに差し色（--acc）を変える。購入ボタンはブランドの青のまま
 *   - ライト／ダークの両方。タップ領域 44px 以上。動きは prefers-reduced-motion で止める
 */

/* ─────────────────────────────────────────────
 * トークン
 * ───────────────────────────────────────────── */
body.kb-lp {
  --acc: #0ba8e0; --acc-2: #0b6fc2; --acc-ink: #0670a0;
  --acc-soft: color-mix(in srgb, var(--acc) 12%, transparent);
  --acc-line: color-mix(in srgb, var(--acc) 28%, transparent);
  --surface: #fff;
  --surface-2: #f6f9fc;
  --tint: color-mix(in srgb, var(--acc) 5%, #f6f9fc);
  --ring: 0 0 0 1px var(--kb-line);
  --lp-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 8px 28px rgba(11, 18, 32, .06);
  --lp-shadow-lg: 0 2px 6px rgba(11, 18, 32, .05), 0 24px 64px rgba(11, 18, 32, .12);
  --gold: #f5b400;
}
body.kb-lp.g-ai_data     { --acc: #7c5cff; --acc-2: #4f46e5; --acc-ink: #5a3fd6; }
body.kb-lp.g-cloud       { --acc: #ff9a3c; --acc-2: #f05a28; --acc-ink: #b0450d; }
body.kb-lp.g-energy      { --acc: #f5b300; --acc-2: #f08c00; --acc-ink: #965700; }
body.kb-lp.g-engineering { --acc: #14b8a6; --acc-2: #0f766e; --acc-ink: #0d6b63; }
body.kb-lp.g-medical     { --acc: #f0567e; --acc-2: #d63864; --acc-ink: #b3234f; }
body.kb-lp.g-welfare     { --acc: #34c27a; --acc-2: #15965a; --acc-ink: #127a49; }
body.kb-lp.g-finance     { --acc: #3c6df0; --acc-2: #1e3fae; --acc-ink: #2448b8; }
body.kb-lp.g-life        { --acc: #ff7a59; --acc-2: #e2523a; --acc-ink: #b23f28; }
body.kb-lp.g-language    { --acc: #6366f1; --acc-2: #4338ca; --acc-ink: #4338ca; }

/* ヒーローの色はページ上端（パンくず・note の案内の後ろ）から敷く */
body.kb-lp { --hero-bg:
    radial-gradient(60% 70% at 0% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%),
    radial-gradient(50% 60% at 100% 10%, color-mix(in srgb, var(--acc-2) 16%, transparent), transparent 70%),
    radial-gradient(40% 50% at 70% 100%, rgba(11, 168, 224, .10), transparent 70%);
  background: var(--hero-bg) top / 100% 1250px no-repeat, var(--surface-2); }
@media (max-width: 859px) { body.kb-lp { background-size: 100% 1600px, auto; } }
body.kb-lp .wrap { max-width: 1120px; }
body.kb-lp h1, body.kb-lp h2, body.kb-lp h3, body.kb-lp summary, body.kb-lp .btn, body.kb-lp .checklist li, body.kb-lp .stat span { word-break: auto-phrase; }
body.kb-lp p, body.kb-lp li, body.kb-lp td { overflow-wrap: break-word; }
body.kb-lp .section > .wrap > p:not(.muted):not(.small) { max-width: 46em; font-size: 16px; }

/* ─────────────────────────────────────────────
 * ヒーロー
 * ───────────────────────────────────────────── */
body.kb-lp .crumbs { position: relative; z-index: 2; }
body.kb-lp .m-hero { position: relative; isolation: isolate; overflow: hidden; padding: 36px 0 96px; background: none; }
/* 方眼の地模様（外側ほど薄く） */
body.kb-lp .m-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--kb-line) 1px, transparent 1px), linear-gradient(90deg, var(--kb-line) 1px, transparent 1px);
  background-size: 36px 36px; opacity: .55;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 80% at 50% 30%, #000 20%, transparent 75%); }
@media (min-width: 860px) {
  body.kb-lp .m-hero { padding: 56px 0 128px; }
  body.kb-lp .m-hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; }
}
body.kb-lp .m-hero .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--acc-line); color: var(--acc-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .02em; box-shadow: var(--lp-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.kb-lp .m-hero .badge::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 4px var(--acc-soft); animation: lp-pulse 2.4s ease-in-out infinite; }
@keyframes lp-pulse { 50% { box-shadow: 0 0 0 7px transparent; } }
body.kb-lp .m-hero h1 { font-size: clamp(34px, 5.6vw, 60px); line-height: 1.12; letter-spacing: -.02em; margin: 6px 0 18px; }
body.kb-lp .m-hero h1 > span { display: inline-block; margin-top: 12px; font-size: clamp(15px, 1.7vw, 19px) !important; line-height: 1.5;
  color: var(--kb-ink-2) !important; padding: 4px 0 4px 14px; border-left: 4px solid var(--acc); letter-spacing: 0; }
body.kb-lp .m-hero .lead { font-size: 16px; line-height: 1.9; color: var(--kb-muted); max-width: 36em; }

/* チェックリスト: 3 つの要点をカードの列に */
body.kb-lp .m-hero .checklist { display: grid; gap: 8px; margin: 0 0 24px; }
body.kb-lp .m-hero .checklist li { margin: 0; padding: 10px 14px 10px 44px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--kb-line); font-size: 14px; line-height: 1.6; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.kb-lp .m-hero .checklist li::before { left: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: linear-gradient(135deg, var(--acc), var(--acc-2)); }

/* 画像: 傾けた端末のような枠＋光 */
body.kb-lp .m-hero .wrap > div:last-child:has(img) { position: relative; perspective: 1600px; }
body.kb-lp .m-hero .wrap > div:last-child:has(img)::before { content: ""; position: absolute; inset: 8% 4% -6%; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 45%, transparent), transparent); filter: blur(30px); opacity: .7; }
body.kb-lp .m-hero img { border-radius: 24px; border: 6px solid var(--surface); box-shadow: var(--lp-shadow-lg); transform: rotateY(-8deg) rotateX(3deg); transform-origin: 30% 50%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
body.kb-lp .m-hero img:hover { transform: none; }
@media (max-width: 859px) { body.kb-lp .m-hero img { transform: none; border-width: 4px; } }

/* ヒーロー内のボタン */
body.kb-lp .hero-buy__main { position: relative; overflow: hidden; border-radius: 20px; padding: 18px 56px 18px 22px; }
body.kb-lp .hero-buy__main::after { content: ""; position: absolute; right: 20px; top: 50%; width: 12px; height: 12px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: translateY(-50%) rotate(45deg); transition: right .2s ease; }
body.kb-lp .hero-buy__main:hover::after { right: 16px; }
body.kb-lp .hero-buy__main::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%); transform: translateX(-100%); animation: lp-shine 5s ease-in-out 1.2s infinite; }
@keyframes lp-shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
body.kb-lp .m-hero .btn-row .btn { min-height: 52px; }

/* ─────────────────────────────────────────────
 * 数字（ヒーローの下に重ねる）
 * ───────────────────────────────────────────── */
body.kb-lp #stats { padding-top: 0; position: relative; z-index: 2; }
body.kb-lp .stats { margin: -64px 0 56px; gap: 0; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: var(--lp-shadow-lg); border: 1px solid var(--kb-line); }
body.kb-lp .stat { position: relative; border: 0; border-radius: 0; box-shadow: none; padding: 22px 20px 20px 24px; background: transparent; }
body.kb-lp .stat + .stat { border-left: 1px solid var(--kb-line); }
@media (max-width: 639px) {
  body.kb-lp .stat:nth-child(3) { border-left: 0; }
  body.kb-lp .stat:nth-child(n+3) { border-top: 1px solid var(--kb-line); }
}
body.kb-lp .stat b { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -.02em; background: linear-gradient(120deg, var(--acc-2), var(--acc)); -webkit-background-clip: text; background-clip: text; font-variant-numeric: tabular-nums; }
body.kb-lp .stat span { font-weight: 700; color: var(--kb-muted); }
body.kb-lp .stat::before { content: ""; position: absolute; right: 18px; top: 20px; width: 32px; height: 32px; border-radius: 10px; background: var(--acc-soft); }
body.kb-lp .stat::after { content: ""; position: absolute; right: 18px; top: 20px; width: 32px; height: 32px; background: var(--acc-ink); -webkit-mask: var(--ic) center / 16px no-repeat; mask: var(--ic) center / 16px no-repeat; }
body.kb-lp .stat:nth-child(1) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 11l3 3 8-8'/%3E%3Cpath d='M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E"); }
body.kb-lp .stat:nth-child(2) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V4H6.5A2.5 2.5 0 0 0 4 6.5z'/%3E%3C/svg%3E"); }
body.kb-lp .stat:nth-child(3) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
body.kb-lp .stat:nth-child(4) { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E"); }

/* ─────────────────────────────────────────────
 * セクションの見出し（英字ラベルは CSS で出す）
 * ───────────────────────────────────────────── */
/* ボタンの文言は狭い幅では折り返す（省略・はみ出しをさせない） */
body.kb-lp main .btn, body.kb-lp .section .btn, body.kb-lp .cta-band .btn, body.kb-lp .m-hero .btn { white-space: normal; text-align: center; line-height: 1.45; }
body.kb-lp .section { position: relative; }
body.kb-lp .section.soft { background: var(--surface); }
body.kb-lp .section:not(.soft):not(#stats) { background: var(--tint); }
body.kb-lp .section-head { max-width: 760px; margin-bottom: 32px; }
body.kb-lp .section-head h2 { position: relative; margin-bottom: 12px; }
body.kb-lp .section-head::before { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--acc-ink);
  content: attr(data-k); }
body.kb-lp .section-head h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); }
body.kb-lp .section-head .muted { font-size: 15px; }
body.kb-lp #stats .section-head h2::after { display: none; }
#stats .section-head::before { content: "ABOUT"; }
#exam .section-head::before { content: "EXAM OVERVIEW"; }
#test-content .section-head::before { content: "TEST"; }
#qualification .section-head::before { content: "QUALIFICATION"; }
#pass-rate .section-head::before { content: "PASS RATE"; }
#contents .section-head::before { content: "CONTENTS"; }
#themes .section-head::before { content: "KEY THEMES"; }
#distribution .section-head::before { content: "DATA"; }
#kakomon .section-head::before { content: "TRENDS"; }
#study .section-head::before { content: "STUDY GUIDE"; }
#column .section-head::before { content: "COLUMN"; }
#app .section-head::before { content: "DEVICES"; }
#terms .section-head::before { content: "GLOSSARY"; }
#howto .section-head::before { content: "HOW IT WORKS"; }
#features .section-head::before { content: "FEATURES"; }
#pricing .section-head::before { content: "PRICING"; }
#faq .section-head::before { content: "FAQ"; }
#related .section-head::before { content: "RELATED"; }
#subjects .section-head::before { content: "SUBJECTS"; }
#list .section-head::before { content: "MATERIALS"; }
body.kb-lp .section-head::before { padding-left: 34px; background: linear-gradient(90deg, var(--acc), var(--acc)) left center / 24px 2px no-repeat; }
body.kb-lp h3 { font-size: 18px; }
body.kb-lp .section .wrap > h3 { display: flex; align-items: center; gap: 10px; margin: 36px 0 14px; }
body.kb-lp .section .wrap > h3::before { content: ""; width: 6px; height: 20px; border-radius: 3px; background: var(--acc); flex: none; }

/* 定義文（「〜とは」「〜を学ぶ」） */
body.kb-lp .define { max-width: 46em; font-size: 16px; line-height: 2; }

/* ─────────────────────────────────────────────
 * 表（共通: 角丸カード）
 * ───────────────────────────────────────────── */
body.kb-lp .table-wrap, body.kb-lp .exam-tbl:not(.table-wrap .exam-tbl), body.kb-lp .fd-table, body.kb-lp .topic-table-wrap {
  background: var(--surface); border: 1px solid var(--kb-line); border-radius: 20px; box-shadow: var(--lp-shadow); }
body.kb-lp .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.kb-lp table { border-collapse: separate; border-spacing: 0; }
body.kb-lp .table-wrap .exam-tbl { margin: 0; }
body.kb-lp .table-wrap th, body.kb-lp .table-wrap td { padding: 13px 18px; }
body.kb-lp .table-wrap thead th { background: var(--surface-2); color: var(--kb-muted); font-size: 13px; font-weight: 800; border-bottom: 1px solid var(--kb-line); white-space: nowrap; }
body.kb-lp .table-wrap tbody td { border-bottom: 1px solid var(--kb-line); vertical-align: top; }
body.kb-lp .table-wrap tbody tr:last-child td { border-bottom: 0; }
body.kb-lp .table-wrap tbody tr:hover td { background: var(--acc-soft); }
body.kb-lp .step-num { font-weight: 800; color: var(--acc-ink); text-align: center; }

/* 試験概要: 見出し列に記号 */
body.kb-lp #exam .exam-tbl { overflow: hidden; }
body.kb-lp #exam .exam-tbl th, body.kb-lp #exam .exam-tbl td { padding: 16px 20px; border-bottom: 1px solid var(--kb-line); vertical-align: top; }
body.kb-lp #exam .exam-tbl tr:last-child th, body.kb-lp #exam .exam-tbl tr:last-child td { border-bottom: 0; }
body.kb-lp #exam .exam-tbl th { width: 9.5em; background: var(--surface-2); color: var(--kb-ink); font-weight: 800; font-size: 14px; }
body.kb-lp #exam .exam-tbl th::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; background: var(--acc-ink); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
body.kb-lp #exam .exam-tbl td { font-size: 15px; }
body.kb-lp #exam .exam-tbl tr:last-child td { font-weight: 800; color: var(--kb-ink); }
body.kb-lp #exam tr:nth-child(1) th { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 21h18M5 21V9l7-5 7 5v12M9 21v-6h6v6'/%3E%3C/svg%3E"); }
body.kb-lp #exam tr:nth-child(2) th { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
body.kb-lp #exam tr:nth-child(3) th { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
body.kb-lp #exam tr:nth-child(4) th { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 7l4 5 4-5M12 12v6M8.5 13h7M8.5 16h7'/%3E%3C/svg%3E"); }
body.kb-lp #exam tr:nth-child(5) th { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
@media (max-width: 559px) {
  body.kb-lp #exam .exam-tbl, body.kb-lp #exam .exam-tbl tbody, body.kb-lp #exam .exam-tbl tr, body.kb-lp #exam .exam-tbl th, body.kb-lp #exam .exam-tbl td { display: block; width: auto; }
  body.kb-lp #exam .exam-tbl th { border-bottom: 0; padding: 12px 16px 4px; background: transparent; color: var(--kb-muted); font-size: 13px; }
  body.kb-lp #exam .exam-tbl td { padding: 0 16px 14px; }
}

/* 合格率の棒 */
body.kb-lp .pr-rate { min-width: 9em; }
body.kb-lp .pr-rate b { font-size: 17px; color: var(--kb-ink); font-variant-numeric: tabular-nums; }
body.kb-lp .pr-bar { display: block; height: 6px; margin-top: 6px; border-radius: 6px; background: var(--acc-soft); position: relative; overflow: hidden; }
body.kb-lp .pr-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); }

/* 受験資格の職種・テーマ */
body.kb-lp .topic-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
body.kb-lp .topic-list li { padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--kb-line); font-size: 14px; font-weight: 700; }

/* ─────────────────────────────────────────────
 * 収録内容（分野のアコーディオン＋出題テーマ一覧）
 * ───────────────────────────────────────────── */
body.kb-lp .outline { counter-reset: cat; gap: 12px; }
body.kb-lp .outline details.cat { counter-increment: cat; position: relative; background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
body.kb-lp .outline details.cat:hover { border-color: var(--acc-line); }
body.kb-lp .outline details.cat[open] { border-color: var(--acc-line); box-shadow: var(--lp-shadow-lg); }
body.kb-lp .outline details.cat summary { padding: 18px 20px 22px; min-height: 64px; }
body.kb-lp .outline details.cat summary::before { content: counter(cat, decimal-leading-zero); display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: var(--acc-soft); color: var(--acc-ink); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
body.kb-lp .outline details.cat summary h3 { min-width: 0; flex-wrap: wrap; align-items: center; row-gap: 6px; line-height: 1.45; }
body.kb-lp .outline details.cat summary h3 small { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--kb-muted); font-size: 12px; font-weight: 800; }
/* 分野の問題数の棒（最多の分野を 100%。見た目だけ） */
body.kb-lp .outline details.cat summary { background:
  linear-gradient(90deg, var(--acc), var(--acc-2)) left 72px bottom 12px / calc((100% - 92px) * var(--share-n, 0)) 4px no-repeat,
  linear-gradient(var(--surface-2), var(--surface-2)) left 72px bottom 12px / calc(100% - 92px) 4px no-repeat; }
body.kb-lp .outline details.cat ul { padding: 8px 20px 18px 78px; display: grid; gap: 2px; }
body.kb-lp .outline details.cat li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--kb-line); color: var(--kb-ink-2); font-size: 14px; }
body.kb-lp .outline details.cat li:last-child { border-bottom: 0; }
body.kb-lp .outline details.cat li span { flex: none; color: var(--kb-muted); font-weight: 700; font-variant-numeric: tabular-nums; }

body.kb-lp .topic-table-wrap { margin-top: 32px; padding: 24px 24px 12px; }
body.kb-lp .topic-table-wrap h3 { font-size: 19px; }
body.kb-lp .topic-table-wrap > p { max-width: 46em; }
body.kb-lp .topic-table-wrap .tt-scroll { overflow-x: auto; margin: 0 -24px; padding: 0 24px; }
body.kb-lp .topic-table { font-size: 14px; }
body.kb-lp .topic-table thead th { white-space: nowrap; position: sticky; top: 0; background: var(--surface); padding: 10px 12px 10px 0; font-size: 12px; letter-spacing: .04em; }
body.kb-lp .topic-table tbody td { padding: 11px 12px 11px 0; }
body.kb-lp .topic-table tbody tr:hover td { background: var(--acc-soft); }
body.kb-lp .topic-table .tt-rank { width: 44px; min-width: 44px; text-align: center; padding: 0 8px 0 0; }
body.kb-lp .topic-table tbody td.tt-rank { font-variant-numeric: tabular-nums; }
body.kb-lp .topic-table tbody tr[data-rank="1"] td.tt-rank, body.kb-lp .topic-table tbody tr[data-rank="2"] td.tt-rank, body.kb-lp .topic-table tbody tr[data-rank="3"] td.tt-rank { color: transparent !important; position: relative; }
body.kb-lp .topic-table tbody tr[data-rank] td.tt-rank::after { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; }
body.kb-lp .topic-table tbody tr[data-rank="1"] td.tt-rank::after { content: "1"; background: linear-gradient(135deg, #f7c948, #e0a100); }
body.kb-lp .topic-table tbody tr[data-rank="2"] td.tt-rank::after { content: "2"; background: linear-gradient(135deg, #c7d0da, #94a3b8); }
body.kb-lp .topic-table tbody tr[data-rank="3"] td.tt-rank::after { content: "3"; background: linear-gradient(135deg, #e6a877, #c0773f); }
body.kb-lp .topic-table tbody tr:nth-child(-n+3) td:first-child { color: inherit; }
body.kb-lp .topic-table .tt-cat { white-space: nowrap; }
body.kb-lp .topic-table td.tt-pct { min-width: 7.5em; }
body.kb-lp .tt-bar { display: block; height: 5px; margin-top: 5px; border-radius: 5px; background: var(--acc-soft); position: relative; overflow: hidden; }
body.kb-lp .tt-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, var(--acc), var(--acc-2)); }
body.kb-lp .topic-table tr.is-more { display: none; }
body.kb-lp .topic-table.is-open tr.is-more { display: table-row; }
body.kb-lp .topic-table tr.is-hit-none { display: none !important; }

@media (max-width: 640px) {
  body.kb-lp .topic-table-wrap { padding: 20px 16px 8px; }
  body.kb-lp .topic-table-wrap .tt-scroll { margin: 0; padding: 0; overflow: visible; }
  body.kb-lp .topic-table, body.kb-lp .topic-table tbody { display: block; }
  body.kb-lp .topic-table thead { display: block; border-bottom: 2px solid var(--kb-line); }
  body.kb-lp .topic-table thead tr { display: flex; flex-wrap: wrap; gap: 0 14px; }
  body.kb-lp .topic-table thead th { position: static; padding: 4px 0; border: 0; }
  body.kb-lp .topic-table thead th:nth-child(3) { display: none; }
  body.kb-lp .topic-table tbody tr { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "r t t" "r n p"; gap: 4px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--kb-line); }
  body.kb-lp .topic-table tbody tr:last-child { border-bottom: 0; }
  body.kb-lp .topic-table tbody td { padding: 0; border: 0; }
  body.kb-lp .topic-table td.tt-rank { grid-area: r; width: 40px; min-width: 0; height: 32px; align-self: start; }
  body.kb-lp .topic-table td:nth-child(2) { grid-area: t; font-weight: 700; color: var(--kb-ink); line-height: 1.6; }
  body.kb-lp .topic-table td:nth-child(4) { grid-area: n; text-align: left; color: var(--kb-muted); }
  body.kb-lp .topic-table td.tt-pct { grid-area: p; min-width: 8em; }
  body.kb-lp .topic-table tr.is-more { display: none; }
  body.kb-lp .topic-table.is-open tr.is-more { display: grid; }
}

/* 並べ替え・絞り込み（kb-lp.js が組み立てる） */
body.kb-lp th[data-sort] { cursor: pointer; user-select: none; }
body.kb-lp th[data-sort] .lp-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; min-height: 32px; }
body.kb-lp th[data-sort] .lp-sort::after { content: "↕"; font-size: 11px; opacity: .45; }
body.kb-lp th[aria-sort="ascending"] .lp-sort::after { content: "▲"; opacity: 1; color: var(--acc-ink); }
body.kb-lp th[aria-sort="descending"] .lp-sort::after { content: "▼"; opacity: 1; color: var(--acc-ink); }
body.kb-lp th[aria-sort] { color: var(--acc-ink) !important; }
body.kb-lp [data-tip] { position: relative; }
body.kb-lp [data-tip] .lp-sort > span { text-decoration: underline dotted; text-underline-offset: 4px; }
body.kb-lp .lp-tip { position: fixed; z-index: 120; max-width: 260px; padding: 8px 12px; border-radius: 10px; background: var(--kb-ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.6; letter-spacing: 0; pointer-events: none; box-shadow: var(--lp-shadow-lg); }
body.kb-lp .lp-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin: 4px 0 16px; padding: 14px; border-radius: 16px; background: var(--surface-2); }
body.kb-lp .lp-filter label { display: grid; gap: 4px; font-size: 12px; font-weight: 800; color: var(--kb-muted); min-width: 0; }
body.kb-lp .lp-filter .lp-f-q { flex: 1 1 200px; }
body.kb-lp .lp-filter .lp-f-range { display: flex; align-items: center; gap: 6px; }
body.kb-lp .lp-filter input, body.kb-lp .lp-filter select { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--kb-line); background: var(--surface); color: var(--kb-ink); font: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0; min-width: 0; }
body.kb-lp .lp-filter ::placeholder { color: var(--kb-muted-2); font-weight: 500; }
body.kb-lp .lp-filter input[type="number"] { width: 5.5em; }
body.kb-lp .lp-filter select { max-width: 100%; }
body.kb-lp .lp-filter .lp-f-cat { flex: 1 1 180px; }
body.kb-lp .lp-filter .lp-f-cat select { width: 100%; }
body.kb-lp .lp-filter input:focus-visible, body.kb-lp .lp-filter select:focus-visible, body.kb-lp .lp-btn:focus-visible { outline: 3px solid var(--acc-line); outline-offset: 1px; }
body.kb-lp .lp-filter__foot { display: flex; align-items: center; gap: 12px; flex: 1 1 100%; justify-content: space-between; font-size: 13px; color: var(--kb-muted); font-weight: 700; }
body.kb-lp .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--kb-line); background: var(--surface); color: var(--kb-ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
body.kb-lp .lp-btn:hover { border-color: var(--acc); color: var(--acc-ink); }
body.kb-lp .lp-more { display: flex; justify-content: center; padding: 14px 0 6px; }
body.kb-lp .lp-empty { padding: 20px 0; text-align: center; color: var(--kb-muted); font-weight: 700; }

/* ─────────────────────────────────────────────
 * よく出るテーマ・頻出分野（番号つきカード）
 * ───────────────────────────────────────────── */
body.kb-lp .themes { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; counter-reset: th; }
body.kb-lp .themes li { counter-increment: th; position: relative; margin: 0; padding: 18px 20px 18px 72px; border-radius: 18px; background: var(--surface); border: 1px solid var(--kb-line); box-shadow: var(--lp-shadow); line-height: 1.85; font-size: 15px; }
body.kb-lp .themes li::before { content: counter(th); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--acc), var(--acc-2)); color: #fff; font-weight: 800; font-size: 16px; }
body.kb-lp .themes li:nth-child(n+4)::before { background: var(--acc-soft); color: var(--acc-ink); }
body.kb-lp .themes strong { color: var(--kb-ink); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--acc) 24%, transparent) 62%); }
@media (max-width: 559px) { body.kb-lp .themes li { padding: 64px 16px 16px; } body.kb-lp .themes li::before { left: 16px; top: 16px; } }

/* ─────────────────────────────────────────────
 * 出題配分データ（横棒）
 * ───────────────────────────────────────────── */
body.kb-lp .fd-table { width: 100%; padding: 8px 24px; margin-bottom: 24px; }
body.kb-lp .fd-table thead th { border-bottom: 1px solid var(--kb-line); padding: 14px 12px 12px 0; }
body.kb-lp .fd-table tbody td { padding: 14px 12px 14px 0; }
body.kb-lp .fd-table tbody tr:last-child td { border-bottom: 0; }
body.kb-lp .fd-table tfoot td { border-top: 1px solid var(--kb-line); padding: 14px 12px 14px 0; }
body.kb-lp .fd-name { white-space: normal; width: 30%; min-width: 10em; }
body.kb-lp td.fd-bar { padding-right: 18px !important; }
body.kb-lp .fd-fill { height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--acc-2), var(--acc)); box-shadow: 0 4px 14px color-mix(in srgb, var(--acc) 35%, transparent); }
body.kb-lp .fd-table tbody tr:first-child .fd-name { color: var(--acc-ink); }
body.kb-lp .fd-num { color: var(--kb-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  body.kb-lp .fd-table { padding: 4px 16px; }
  body.kb-lp .fd-table thead { display: none; }
  body.kb-lp .fd-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 14px 0; border-bottom: 1px solid var(--kb-line); }
  body.kb-lp .fd-table tbody tr:last-child { border-bottom: 0; }
  body.kb-lp .fd-table tbody td { padding: 0; border: 0; }
  body.kb-lp .fd-table .fd-name { width: auto; min-width: 0; grid-column: 1 / -1; }
  body.kb-lp .fd-table td.fd-bar { display: block; width: auto; padding: 0 !important; }
  body.kb-lp .fd-table td.fd-qps { display: none; }
  body.kb-lp .fd-table tfoot tr { display: flex; justify-content: space-between; padding: 12px 0; }
  body.kb-lp .fd-table tfoot td { padding: 0; border: 0; }
  body.kb-lp .fd-table tfoot td.fd-bar { display: none; }
}

/* ─────────────────────────────────────────────
 * 勉強法: 段落をポイントのカードに
 * ───────────────────────────────────────────── */
body.kb-lp #study .wrap { counter-reset: pt; }
body.kb-lp #study .wrap > p { counter-increment: pt; position: relative; max-width: none; margin: 0 0 12px; padding: 20px 22px 20px 22px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--kb-line); line-height: 1.95; }
body.kb-lp #study .wrap > p::before { content: "POINT " counter(pt); display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--acc-ink); }
@media (min-width: 900px) {
  body.kb-lp #study .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  body.kb-lp #study .section-head { grid-column: 1 / -1; }
  body.kb-lp #study .wrap > p:first-of-type { grid-column: 1 / -1; }
}
body.kb-lp #kakomon .wrap > p:first-of-type { max-width: none; padding: 22px 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--kb-line); border-left: 5px solid var(--acc); box-shadow: var(--lp-shadow); }

/* ─────────────────────────────────────────────
 * コラム
 * ───────────────────────────────────────────── */
body.kb-lp #column { background: linear-gradient(180deg, var(--surface) 0%, var(--tint) 100%); }
body.kb-lp .columns-list { counter-reset: col; }
body.kb-lp .columns-list a { counter-increment: col; position: relative; overflow: hidden; background: var(--surface); grid-template-columns: 128px minmax(0, 1fr); padding: 12px 16px 12px 12px; }
body.kb-lp .columns-list img { width: 128px; height: 67px; transition: transform .4s ease; }
body.kb-lp .columns-list a:hover img { transform: scale(1.05); }
body.kb-lp .columns-list a::before { content: "#" counter(col); position: absolute; left: 18px; top: 18px; z-index: 1; padding: 0 7px; border-radius: 6px; background: rgba(11, 18, 32, .72); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; }
@media (max-width: 400px) { body.kb-lp .columns-list a { grid-template-columns: 96px minmax(0, 1fr); } body.kb-lp .columns-list img { width: 96px; height: 50px; } }

/* ─────────────────────────────────────────────
 * 端末・単体アプリ
 * ───────────────────────────────────────────── */
body.kb-lp #app .define { padding: 22px 24px 22px 88px; position: relative; border-radius: 20px; background: var(--surface); border: 1px solid var(--kb-line); box-shadow: var(--lp-shadow); max-width: none; }
body.kb-lp #app .define::before { content: ""; position: absolute; left: 24px; top: 24px; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--acc), var(--acc-2)); }
body.kb-lp #app .define::after { content: ""; position: absolute; left: 24px; top: 24px; width: 44px; height: 44px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") center / 22px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E") center / 22px no-repeat; }
@media (max-width: 559px) { body.kb-lp #app .define { padding: 80px 18px 20px; } }
body.kb-lp .single-app { position: relative; overflow: hidden; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-left-width: 1px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--surface)) 0%, var(--surface) 60%); box-shadow: var(--lp-shadow); }
body.kb-lp .single-app::before { content: "BUY ONCE"; display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: #3b2a00; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
body.kb-lp .single-app > b:first-child { display: block; font-size: 17px; }
body.kb-lp .single-app .btn { white-space: normal; text-align: center; }
@media (max-width: 559px) { body.kb-lp .single-app .btn { width: 100%; } }
body.kb-lp .single-app p b { color: var(--kb-ink); }

/* ─────────────────────────────────────────────
 * 用語辞書
 * ───────────────────────────────────────────── */
body.kb-lp .terms { gap: 10px; }
body.kb-lp .terms li { padding: 8px 14px; border-radius: 12px; background: var(--surface); font-weight: 700; color: var(--kb-ink-2); transition: transform .15s ease, border-color .15s ease, color .15s ease; }
body.kb-lp .terms li::before { content: "#"; margin-right: 4px; color: var(--acc-ink); font-weight: 800; }
body.kb-lp .terms li:hover { transform: translateY(-2px); border-color: var(--acc); color: var(--kb-ink); }

/* ─────────────────────────────────────────────
 * 学習の流れ・特長
 * ───────────────────────────────────────────── */
body.kb-lp .steps { position: relative; gap: 20px; }
@media (min-width: 860px) {
  body.kb-lp .steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 46px; height: 2px; background: repeating-linear-gradient(90deg, var(--acc-line) 0 8px, transparent 8px 16px); z-index: 0; }
}
body.kb-lp .step { position: relative; z-index: 1; padding: 26px 24px; background: var(--surface); }
body.kb-lp .step .num { width: 48px; height: 48px; border-radius: 16px; font-size: 20px; background: linear-gradient(135deg, var(--acc), var(--acc-2)); box-shadow: 0 10px 24px color-mix(in srgb, var(--acc) 35%, transparent); margin-bottom: 16px; }
body.kb-lp .step h3 { font-size: 18px; }
body.kb-lp .step p { font-size: 14.5px; line-height: 1.9; }

body.kb-lp #features .grid-3 { gap: 16px; }
@media (min-width: 640px) { body.kb-lp #features .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.kb-lp #features .card { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; align-content: start; }
body.kb-lp #features .card .icon { grid-row: 1 / span 2; margin: 0; }
body.kb-lp #features .card h3 { margin: 2px 0 6px; }
body.kb-lp .card { position: relative; overflow: hidden; padding: 26px 22px; background: var(--surface); transition: transform .2s ease, box-shadow .2s ease; }
body.kb-lp .card:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow-lg); }
body.kb-lp .card { background-image: radial-gradient(120px 120px at 100% 0%, var(--acc-soft), transparent 70%); }
body.kb-lp .card .icon { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--acc), var(--acc-2)); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--acc) 30%, transparent); }
body.kb-lp .card .icon svg { width: 26px; height: 26px; }
body.kb-lp .card p { font-size: 14.5px; line-height: 1.85; }

/* ─────────────────────────────────────────────
 * 料金
 * ───────────────────────────────────────────── */
body.kb-lp .plan-free { position: relative; padding: 16px 20px 16px 64px; border: 1px solid var(--acc-line); border-style: solid; background: var(--surface); font-size: 15px; }
body.kb-lp .plan-free::before { content: "FREE"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); padding: 2px 8px; border-radius: 8px; background: var(--acc-soft); color: var(--acc-ink); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
body.kb-lp .plans-4 { gap: 16px; align-items: stretch; }
@media (min-width: 720px) and (max-width: 999px) { body.kb-lp .plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.kb-lp .plans-4 .plan { display: flex; flex-direction: column; padding: 26px 22px; background: var(--surface); transition: transform .2s ease, box-shadow .2s ease; }
body.kb-lp .plans-4 .plan:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow-lg); }
body.kb-lp .plans-4 .plan h3 { font-size: 15px; color: var(--kb-muted); }
body.kb-lp .plans-4 .plan .price { font-size: clamp(30px, 3.4vw, 36px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--kb-ink); }
body.kb-lp .plans-4 .plan ul { margin-top: 14px; padding: 14px 0 0; border-top: 1px solid var(--kb-line); list-style: none; }
body.kb-lp .plans-4 .plan li { position: relative; padding-left: 22px; }
body.kb-lp .plans-4 .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--acc-ink); font-weight: 800; }
body.kb-lp .plan.featured { background: linear-gradient(180deg, color-mix(in srgb, var(--kb-brand) 8%, var(--surface)) 0%, var(--surface) 55%); }
@media (min-width: 1000px) { body.kb-lp .plan.featured { transform: translateY(-10px); } body.kb-lp .plan.featured:hover { transform: translateY(-13px); } }
body.kb-lp .plan.featured .price { color: var(--kb-brand-3); }
body.kb-lp .per-mat { border-radius: 12px; padding: 10px 12px; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--kb-ink); }

/* ─────────────────────────────────────────────
 * FAQ
 * ───────────────────────────────────────────── */
body.kb-lp .faq { max-width: 860px; gap: 12px; }
body.kb-lp .faq details { background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
body.kb-lp .faq details[open] { border-color: var(--acc-line); box-shadow: var(--lp-shadow-lg); }
body.kb-lp .faq summary { gap: 14px; padding: 18px 20px; font-size: 16px; line-height: 1.55; }
body.kb-lp .faq summary::before { content: "Q"; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--acc), var(--acc-2)); color: #fff; font-weight: 800; font-size: 15px; }
body.kb-lp .faq summary { justify-content: flex-start; }
body.kb-lp .faq summary::after { margin-left: auto; }
body.kb-lp .faq details p { position: relative; padding: 0 22px 20px 66px; line-height: 1.95; color: var(--kb-ink-2); }
body.kb-lp .faq details p::before { content: "A"; position: absolute; left: 20px; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--acc-soft); color: var(--acc-ink); font-weight: 800; font-size: 15px; }
@media (max-width: 559px) { body.kb-lp .faq details p { padding: 0 16px 18px 16px; } body.kb-lp .faq details p::before { position: static; margin-bottom: 8px; } }

/* ─────────────────────────────────────────────
 * 関連する教材・一覧のカード
 * ───────────────────────────────────────────── */
body.kb-lp .rel { gap: 14px; }
body.kb-lp .rel a { position: relative; padding: 18px 48px 18px 20px; background: var(--surface); font-size: 16px; line-height: 1.5; }
body.kb-lp .rel a::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; border-top: 2.5px solid var(--acc-ink); border-right: 2.5px solid var(--acc-ink); transform: translateY(-50%) rotate(45deg); transition: right .2s ease; }
body.kb-lp .rel a:hover::after { right: 18px; }
body.kb-lp .rel a:hover { border-color: var(--acc); box-shadow: var(--lp-shadow-lg); }
body.kb-lp .list-cats { gap: 40px; }
body.kb-lp .list-cats h2 { display: flex; align-items: center; gap: 10px; font-size: 21px; margin-bottom: 14px; }
body.kb-lp .list-cats h2::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: linear-gradient(var(--acc), var(--acc-2)); }

/* ─────────────────────────────────────────────
 * 最後の CTA 帯
 * ───────────────────────────────────────────── */
body.kb-lp .cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: left; padding: 72px 0;
  background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--acc) 45%, transparent), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(11, 168, 224, .35), transparent 60%),
    linear-gradient(135deg, #0b1220 0%, #10213a 100%); }
body.kb-lp .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
body.kb-lp .cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
body.kb-lp .cta-band h2 { color: #fff; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.3; margin: 0; }
body.kb-lp .cta-band h2::before { content: "START TODAY"; display: block; margin-bottom: 12px; font-size: 12px; letter-spacing: .18em; color: color-mix(in srgb, var(--acc) 60%, #fff); }
body.kb-lp .cta-band p { max-width: 40em; color: #c9d6e2; line-height: 1.9; }
body.kb-lp .cta-band .btn-row { justify-content: flex-start; margin-top: 8px; }
body.kb-lp .cta-band .btn-outline { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); }
body.kb-lp .cta-band .btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); color: #fff; }
body.kb-lp .cta-shot { display: none; }
@media (min-width: 1000px) {
  body.kb-lp .cta-band { padding: 88px 0; }
  body.kb-lp .cta-band .wrap:has(.cta-shot) { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 48px; align-items: center; }
  body.kb-lp .cta-band .wrap:has(.cta-shot) > :not(.cta-shot) { grid-column: 1; }
  body.kb-lp .cta-shot { display: block; grid-column: 2; grid-row: 1 / span 3; border-radius: 22px; border: 6px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); transform: rotate(2deg); }
  body.kb-lp .cta-band .btn-row .btn { flex: 0 1 auto; }
}

/* ─────────────────────────────────────────────
 * note から来た人への案内（kb-lp.js が utm_content=note-… のときだけ出す）
 * ───────────────────────────────────────────── */
body.kb-lp .lp-hello { position: relative; z-index: 3; margin: 12px auto 0; }
body.kb-lp .lp-hello__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--acc-line); box-shadow: var(--lp-shadow-lg); }
body.kb-lp .lp-hello__tag { flex: none; padding: 3px 10px; border-radius: 999px; background: #41c9b4; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
body.kb-lp .lp-hello__txt { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 700; color: var(--kb-ink); line-height: 1.6; }
body.kb-lp .lp-hello__txt small { display: block; font-size: 12.5px; font-weight: 600; color: var(--kb-muted); }
body.kb-lp .lp-hello .btn { min-height: 44px; padding: 10px 18px; font-size: 14px; }
body.kb-lp .lp-hello__x { flex: none; width: 44px; height: 44px; margin: -6px -6px -6px 0; border: 0; border-radius: 12px; background: none; color: var(--kb-muted); font-size: 20px; cursor: pointer; }
body.kb-lp .lp-hello__x:hover { background: var(--surface-2); }
@media (max-width: 559px) { body.kb-lp .lp-hello .btn { flex: 1 1 100%; } }

/* 先頭へ戻る（PC。スマホは下部の固定ボタンがあるので出さない） */
body.kb-lp .lp-top { position: fixed; right: max(20px, calc((100vw - 1120px) / 2 - 64px)); bottom: 24px; z-index: 40; display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--kb-line); background: var(--surface); color: var(--kb-ink); box-shadow: var(--lp-shadow-lg); cursor: pointer; font-size: 18px; font-weight: 800;
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
body.kb-lp .lp-top.is-shown { opacity: 1; transform: none; }
@media (min-width: 900px) { body.kb-lp .lp-top { display: grid; place-items: center; } }

/* フッター */
body.kb-lp .all-materials, body.kb-lp .footer { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  body.kb-lp .m-hero .badge::before, body.kb-lp .hero-buy__main::before { animation: none; }
  body.kb-lp .m-hero img { transform: none; transition: none; }
  body.kb-lp .card:hover, body.kb-lp .plans-4 .plan:hover, body.kb-lp .terms li:hover { transform: none; }
  body.kb-lp .plan.featured, body.kb-lp .plan.featured:hover { transform: none; }
}

/* ─────────────────────────────────────────────
 * ダークモード（端末の設定に従う）
 * ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  html:has(body.kb-lp) { color-scheme: dark; }
  /* .g-* の指定より強くするため body.kb-m.kb-lp で書く */
  body.kb-m.kb-lp {
    --kb-ink: #eef3f9; --kb-ink-2: #cfd9e6; --kb-muted: #9fb0c4; --kb-muted-2: #7f90a6; --kb-line: rgba(255, 255, 255, .1);
    --kb-bg: #0b111c; --kb-soft: rgba(11, 168, 224, .16); --kb-brand-3: #4cc6f2;
    --navy: #eef3f9; --text: #cfd9e6; --muted: #9fb0c4; --line: rgba(255, 255, 255, .1);
    --surface: #121b2a; --surface-2: #0b111c; --tint: color-mix(in srgb, var(--acc) 4%, #0e1522);
    --lp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .25);
    --lp-shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 64px rgba(0, 0, 0, .45);
    --kb-shadow-sm: var(--lp-shadow);
    --acc-ink: color-mix(in srgb, var(--acc) 70%, #fff);
    background: var(--surface-2); color: var(--kb-ink-2);
  }
  body.kb-lp .header { background: rgba(11, 17, 28, .78); }
  body.kb-lp .kb-menu-btn, body.kb-lp .kb-sheet__close { background: var(--surface); color: var(--kb-ink); }
  body.kb-lp .kb-sheet__panel { background: var(--surface); }
  body.kb-lp .kb-sheet__list a:hover, body.kb-lp .kb-sheet__list a.on { background: var(--surface-2); }
  body.kb-lp .pagenav a:hover { background: rgba(255, 255, 255, .06); }
  body.kb-lp .pagenav a.on { background: var(--kb-ink); color: #0b111c; }
  body.kb-lp .btn-outline { background: var(--surface); color: var(--kb-ink); border-color: rgba(255, 255, 255, .18); }
  body.kb-lp .stat, body.kb-lp .card, body.kb-lp .step, body.kb-lp .plan, body.kb-lp .outline .cat, body.kb-lp .rel a, body.kb-lp .faq details,
  body.kb-lp .columns-list a, body.kb-lp .terms li, body.kb-lp .plan-free, body.kb-lp .howto { background: var(--surface); }
  body.kb-lp .stats .stat { background: transparent; }
  body.kb-lp .m-hero img { border-color: #1b2638; }
  body.kb-lp .sticky-cta { background: rgba(11, 17, 28, .86); }
  body.kb-lp .footer a, body.kb-lp .all-mat-links a { color: var(--kb-muted); }
  body.kb-lp a { color: var(--kb-brand-3); }
  body.kb-lp .btn-primary, body.kb-lp .hero-buy__main { color: #fff; }
  body.kb-lp .columns-list a::before { background: rgba(0, 0, 0, .6); }
  body.kb-lp .lp-tip { background: #eef3f9; color: #0b111c; }
  body.kb-lp .stat b { background-image: linear-gradient(120deg, var(--acc-ink), var(--acc)); }
  body.kb-lp .m-hero .badge { color: var(--acc-ink); }
  body.kb-lp .cta-band { background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--acc) 35%, transparent), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(11, 168, 224, .25), transparent 60%),
    linear-gradient(135deg, #060a12 0%, #0c1a2e 100%); }
}