:root {
      --ink: #06131f;
      --paper: #ffffff;
      --line: #dbe3ea;
      --muted: #4b5563;
      --signal: #0b63ce;
      --font-sans: HelveticaNeue, "Helvetica Neue", Helvetica, Arial,
        "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium",
        "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS ゴシック", "MS Gothic",
        sans-serif;
      --font-mono: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
      font-family: var(--font-sans);
      color: var(--ink);
      background: var(--paper);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-size: 16px;
      line-height: 1.8;
      font-feature-settings: "palt";
      -webkit-font-smoothing: antialiased;
      word-wrap: break-word;
      background: #f8f7f2;
    }
    a { color: inherit; }
    img { display: block; max-width: 100%; height: auto; }

    .site-header {
      display: flex; align-items: center; justify-content: space-between; gap: 18px;
      min-height: 62px; padding: 14px clamp(20px, 4vw, 58px) 10px; background: #f8f7f2;
    }

    main { padding-bottom: clamp(60px, 9vw, 120px); }
    .wrap { max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

    .breadcrumb {
      padding-top: clamp(28px, 5vw, 56px);
      color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 780; letter-spacing: 0.06em;
    }
    .breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }

    .section-label {
      margin: 0 0 8px; color: var(--signal); font-family: var(--font-mono);
      font-size: 11px; font-weight: 780; letter-spacing: 0.12em; text-transform: uppercase;
    }

    /* 表紙と書誌 */
    .book-hero {
      display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
      column-gap: clamp(20px, 4vw, 48px); row-gap: 14px; margin-top: 18px;
    }
    .book-hero-cover img {
      width: 100%; border: 1px solid rgba(6, 19, 31, 0.18);
      box-shadow: 0 18px 38px rgba(6, 19, 31, 0.16), 0 3px 8px rgba(6, 19, 31, 0.1);
    }
    .book-hero h1 { margin: 0 0 8px; font-size: clamp(32px, 5vw, 52px); line-height: 1.1; font-weight: 840; letter-spacing: 0.01em; }
    .book-hero-tagline { margin: 0 0 14px; font-size: clamp(15px, 1.8vw, 19px); font-weight: 760; line-height: 1.55; }
    .book-hero-meta { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
    .book-hero-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 10px; align-self: start; }
    .book-hero-cover { grid-row: span 2; }
    .book-hero > div { align-self: end; }
    /* 推薦の言葉（帯） */
    .endorse { margin-top: clamp(32px, 5vw, 48px); padding: clamp(22px, 4vw, 36px); border-radius: 18px; background: #06131f; color: #f8f7f2; }
    .endorse-label { color: #c9f24a; }
    .endorse h2 { margin: 4px 0 18px; color: #f8f7f2; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.4; }
    .endorse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .endorse-card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; margin: 0; padding: 18px; border-left: 1px solid rgba(248, 247, 242, 0.18); }
    .endorse-card blockquote { margin: 0; }
    .endorse-card blockquote p { margin: 0; color: #f8f7f2; font-size: 15.5px; font-weight: 780; line-height: 1.75; }
    .endorse-card blockquote p::before { content: "「"; }
    .endorse-card blockquote p::after { content: "」"; }
    .endorse-card figcaption { display: grid; gap: 2px; }
    .endorse-card figcaption b { color: #c9f24a; font-size: 17px; letter-spacing: 0.04em; }
    .endorse-card figcaption span { color: rgba(248, 247, 242, 0.72); font-size: 12.5px; line-height: 1.5; }
    .endorse-obi { margin: 18px auto 0; max-width: 620px; }
    .endorse-obi img { display: block; width: 100%; height: auto; border-radius: 6px; }
    .endorse-obi figcaption { margin-top: 6px; color: rgba(248, 247, 242, 0.6); font-size: 12px; text-align: center; }
    @media (max-width: 760px) { .endorse-grid { grid-template-columns: 1fr; } }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
      padding: 10px 18px; border: 1px solid var(--ink); font-size: 14px; font-weight: 780; text-decoration: none;
    }
    .btn-primary { background: var(--ink); color: var(--paper); }
    .btn-secondary { background: var(--paper); color: var(--ink); }
    .btn-primary:hover, .btn-primary:focus-visible { background: var(--signal); border-color: var(--signal); outline: none; }
    .btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--signal); color: var(--signal); outline: none; }

    .lead { margin: clamp(32px, 5vw, 48px) 0 0; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.95; }

    h2 { margin: clamp(52px, 7vw, 80px) 0 14px; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.35; font-weight: 820; }
    h3 { margin: 28px 0 8px; font-size: 18px; line-height: 1.5; font-weight: 800; }
    p { margin: 0 0 14px; }

    /* 読解パック */
    .pack { margin-top: clamp(36px, 5vw, 56px); border-radius: 18px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(6, 19, 31, 0.08); }
    .pack-hero {
      padding: clamp(26px, 4vw, 44px); color: #f8f7f2;
      background: radial-gradient(circle at 88% 12%, rgba(11, 99, 206, 0.75), transparent 46%), linear-gradient(135deg, #02080d 0%, #071928 64%, #0b3f80 140%);
    }
    .pack-label { color: #8fc0ff; }
    .pack-hero h2 { margin: 4px 0 12px; color: #f8f7f2; }
    .pack-lead { max-width: 640px; color: rgba(248, 247, 242, 0.86); }
    .pack-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 22px 0; padding: 0; list-style: none; }
    .pack-stats li { display: grid; justify-items: center; gap: 2px; padding: 12px 4px; border-left: 1px solid rgba(248, 247, 242, 0.18); }
    .pack-stats b { font-family: var(--font-mono); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.1; }
    .pack-stats span { color: rgba(248, 247, 242, 0.72); font-size: 12px; font-weight: 700; }
    .pack-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

    .btn-download {
      gap: 6px; background: #ff7a1a; border-color: #ff7a1a; color: #fff;
      box-shadow: 0 6px 16px rgba(255, 122, 26, 0.35);
    }
    .btn-download:hover, .btn-download:focus-visible { background: #e25f00; border-color: #e25f00; color: #fff; outline: none; }
    .btn-download:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .btn-large { min-height: 56px; padding: 14px 26px; font-size: 16px; border-radius: 6px; }
    .btn-step { align-self: start; margin-top: 12px; min-height: 40px; padding: 8px 16px; font-size: 13.5px; }
    .step { display: flex; flex-direction: column; }

    .btn-ai { background: #0b63ce; border-color: #0b63ce; color: #fff; }
    .btn-ai:hover, .btn-ai:focus-visible { background: #084c9e; border-color: #084c9e; outline: none; }
    .ai-launch { margin-top: 22px; padding: 18px; border: 1px solid rgba(248, 247, 242, 0.22); border-radius: 14px; background: rgba(248, 247, 242, 0.07); }
    .ai-launch-title { margin: 0 0 4px; font-weight: 820; font-size: 16px; }
    .ai-launch-text { margin: 0 0 12px; color: rgba(248, 247, 242, 0.85); font-size: 14px; line-height: 1.75; }
    .ai-launch-text b { color: #fff; }
    .ai-launch-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
    .ai-btn { min-height: 48px; padding: 10px 20px; border-radius: 999px; font-size: 15px; border: 0; color: #fff; }
    .ai-btn-gpt { background: #10a37f; }
    /* ダウンロード・別タブで開くボタンは押しても画面が変わらず、押せたか分からない（Clarityのデッドクリック上位）。押した直後に次の一歩を示す */
    .click-feedback { grid-column: 1 / -1; margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid #10a37f; background: rgba(16, 163, 127, 0.1); font-size: 0.92rem; line-height: 1.6; }
    .click-feedback a { color: inherit; text-decoration: underline; white-space: nowrap; }
    .ai-btn-claude { background: #d97757; }
    .ai-btn-gemini { background: #4c7cf3; }
    .ai-btn:hover, .ai-btn:focus-visible { filter: brightness(1.1); outline: 2px solid #fff; outline-offset: 2px; }
    .ai-launch-note { margin: 12px 0 0; color: rgba(248, 247, 242, 0.72); font-size: 13px; line-height: 1.7; }
    .btn-light { background: #f8f7f2; color: #06131f; border-color: #f8f7f2; }
    .btn-light:hover, .btn-light:focus-visible { background: #8fc0ff; border-color: #8fc0ff; outline: none; }
    .pack-file { color: rgba(248, 247, 242, 0.7); font-size: 12.5px; }
    .pack-body { padding: clamp(22px, 4vw, 40px); }
    .pack-subhead { margin: 0 0 14px; font-size: 17px; }
    .pack-subhead:not(:first-child) { margin-top: 34px; }
    .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
    .step { position: relative; padding: 18px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; }
    .step-no { position: absolute; top: -11px; left: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--signal); color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 800; }
    .step-icon { display: block; font-size: 24px; line-height: 1.2; margin: 4px 0 6px; }
    .step b { display: block; margin-bottom: 4px; line-height: 1.5; }
    .step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
    .chat { display: grid; gap: 10px; padding: 18px; border-radius: 14px; background: #eef3f8; }
    .bubble { max-width: 88%; padding: 12px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.8; }
    .bubble .who { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 780; letter-spacing: 0.06em; opacity: 0.7; }
    .bubble-user { justify-self: end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
    .bubble-ai { justify-self: start; background: var(--paper); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
    .chat-note { margin: 0; color: var(--muted); font-size: 12px; }
    .examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
    .examples li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 13.5px; }
    .examples li::before { content: "💬 "; }
    .fold { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: #fbfaf6; }
    .fold summary { cursor: pointer; font-weight: 780; }
    .fold ul { margin: 10px 0 0; padding-left: 1.2em; }
    .fold li { margin-bottom: 6px; font-size: 14.5px; }
    .fold p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }

    /* 各章 */
    .chapters-section { margin-top: clamp(56px, 7vw, 88px); }
    .chapters-section h2 { margin-top: 4px; }
    .chapters-lead { color: var(--muted); }
    .chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
    .chapter-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); border-top: 4px solid var(--signal); }
    .chapter-card:first-child { grid-column: 1 / -1; border-top-color: var(--ink); }
    .chapter-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
    .chapter-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: 24px; font-weight: 840; }
    .chapter-no { margin: 0; color: var(--signal); font-family: var(--font-mono); font-size: 11.5px; font-weight: 780; letter-spacing: 0.04em; }
    .chapter-title { margin: 2px 0 0; font-size: 17px; line-height: 1.45; }
    .chapter-desc { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.8; }
    .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
    .chips li { padding: 0; color: var(--muted); font-size: 12.5px; font-weight: 500; }
    .chips li + li::before { content: "・"; margin-right: 6px; }
    .chapter-secs { margin-top: auto; border-top: 1px solid var(--line); padding-top: 10px; }
    .chapter-secs summary { cursor: pointer; color: var(--signal); font-size: 13.5px; font-weight: 780; }
    .chapter-secs ol { margin: 8px 0 0; padding-left: 1.4em; }
    .chapter-secs li { margin: 0; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; line-height: 1.6; }
    .chapter-secs li::marker { color: var(--muted); font-size: 12px; }
    .sec-title { margin-right: 8px; }
    .sec-page { color: var(--muted); font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap; }

    @media (max-width: 760px) {
      .pack-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .steps { grid-template-columns: 1fr; gap: 18px; }
      .chapters { grid-template-columns: 1fr; }
      .bubble { max-width: 94%; }
    }

    /* 読者ガイド */
    .guides-section h2 { margin-top: 4px; }
    .guides-section { margin-top: clamp(56px, 7vw, 88px); }
    .guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
    .guide-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); text-decoration: none; }
    .guide-card:hover, .guide-card:focus-visible { border-color: var(--signal); outline: none; }
    .guide-card:hover b, .guide-card:focus-visible b { color: var(--signal); }
    .guide-icon { font-size: 24px; line-height: 1.2; }
    .guide-card b { font-size: 17px; line-height: 1.45; }
    .guide-card span:last-child { color: var(--muted); font-size: 14px; line-height: 1.75; }
    @media (max-width: 460px) { .guides { grid-template-columns: 1fr; } }

    /* 関連記事 */
    .related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
    .related a {
      display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px;
      padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-decoration: none;
      transition: border-color 0.18s ease, transform 0.18s ease;
    }
    .related a:hover, .related a:focus-visible { border-color: var(--signal); transform: translateY(-1px); outline: none; }
    .related-thumb { display: block; width: 104px; height: 78px; overflow: hidden; border-radius: 10px; background: #eef1ef; }
    .related-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .related-copy { display: grid; gap: 3px; min-width: 0; }
    .related-kind { color: var(--signal); font-family: var(--font-mono); font-size: 11px; font-weight: 780; letter-spacing: 0.08em; text-transform: uppercase; }
    .related b { line-height: 1.5; font-size: 15px; }
    @media (max-width: 640px) {
      .related { grid-template-columns: 1fr; }
      .related a { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
      .related-thumb { width: 88px; height: 66px; }
      .related b { font-size: 14px; }
    }

    .credits { margin-top: clamp(48px, 6vw, 72px); padding-top: 18px; border-top: 1px solid var(--line); }
    .credits p { color: var(--muted); font-size: 13px; line-height: 1.8; }

    @media (max-width: 560px) {
      .book-hero { grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: start; }
      .book-hero h1 { font-size: 30px; }
      .book-hero-tagline { font-size: 14px; }
      .book-hero-meta { font-size: 12.5px; }
      .book-hero-cover { grid-row: auto; }
      .book-hero-actions { grid-column: 1 / -1; }
      .chapters li { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
    }
    @media (max-width: 340px) {
      .book-hero { grid-template-columns: 96px minmax(0, 1fr); }
    }

    html[data-color-mode="dark"] body, html[data-color-mode="dark"] .site-header { background: #0b1220; color: #e8eef5; }
    html[data-color-mode="dark"] { --ink: #e8eef5; --paper: #111a2b; --line: #263247; --muted: #a8b3c2; --signal: #6aa8ff; }
    html[data-color-mode="dark"] .examples li, html[data-color-mode="dark"] code { background: #1b2638; }
    html[data-color-mode="dark"] .btn-primary { color: #0b1220; }
    html[data-color-mode="dark"] .step, html[data-color-mode="dark"] .chat, html[data-color-mode="dark"] .fold { background: #16213a; }
    html[data-color-mode="dark"] .chips li { color: var(--muted); }
    html[data-color-mode="dark"] .bubble-user, html[data-color-mode="dark"] .chapter-num { color: #0b1220; }