/* ==========================================================================
   design2026.css — blueqat news を全社のデザイン基準に合わせる上書き
   --------------------------------------------------------------------------
   正: ~/pm/DESIGN.md（2026-10-15 作成・湊さん承認 2026-10-15
       「色・書体・余白・ボタン・入力欄・カード・表・ヘッダー・フッター・ロゴを変えてよい」）。
   方向は会社サイト blueqat.co.jp の新しいトップ（白地・黒の丸ボタン・角丸 24px のカード）。

   ■ 作り方
     - style.css（2,000 行あり、全ページが使う）はそのまま読み、このファイルを「後」に読んで上書きする。
       base.html で style.css → design2026.css の順。順番を逆にすると何も効かない。
     - 先に style.css の色の変数（--paper / --ink / --rule / --band / --accent など）を
       DESIGN.md ① の色に置き換え、細かい部品はその下で個別に直す。

   ■ 変えないもの（DESIGN.md ⑦・湊さんの指示）
     - グラフ・分析の画面の色と形: 株価の折れ線（.spark・.stockx-chart）、業界の関係図（.netmap-*）、
       ナレッジベースの集計（.kb-charts）、広告の実績グラフ（.adsx-chart）、記事の図表（.ig-*・Chart.js）。
       → 下の「グラフの囲い」で、これらの中だけ変数を元の値に戻している。
     - ナレッジベースの「推定」と「公開事実」の色分け（.kb-estimated など。契約上の区別なので見た目も残す）
     - 上がり下がりの赤緑（--up / --down / --up-dark / --down-dark）
     - メルマガ（newsletter_layout.py とメールの雛形）。このファイルはメールには効かない。

   ■ 暗い配色
     - OS の設定に合わせた暗い配色（prefers-color-scheme: dark）は作らない（DESIGN.md ① 2026-10-15 湊さん「無くす」）。
       2026-10-15 時点で style.css・テンプレートに prefers-color-scheme の指定は無かった（grep で確認）。
       念のため color-scheme: light を宣言し、万一 dark の指定が後から入っても下の @media で明るい値に戻す。
     - 例外は銘柄の帯（.market-strip）。DESIGN.md の「暗い区画」(.bq-dark) として黒地で残す。
       中の折れ線が明るい地では読みにくい色で描かれており、グラフは変えない決まりのため。

   ⚠ このファイルは本番と開発で共有（~/qbm-dev/static は ~/qbm/static への symlink）。
     本番の base.html がこのファイルを読み込むまでは、本番には効かない。
   ========================================================================== */


/* ---------- ① 色（DESIGN.md ①） ---------- */
:root {
    color-scheme: light;

    /* DESIGN.md の変数そのもの */
    --bq-bg: #ffffff;
    --bq-surface: #f5f5f7;
    --bq-ink: #1a1a1a;
    --bq-ink-2: #424245;
    --bq-ink-3: #515154;
    --bq-muted: #6e6e73;
    --bq-faint: #86868b;
    --bq-line: #e5e7eb;
    --bq-link: #0066cc;
    --bq-tag-bg: #f4f4f4;
    --bq-tag-ink: #666666;
    --bq-input-line: #d2d2d7;

    /* style.css の変数を置き換える */
    --paper: var(--bq-bg);            /* 地: 生成り → 白 */
    --paper-raised: #ffffff;          /* 白い面（グラフの地にも使われているので白のまま） */
    --ink: var(--bq-ink);
    --ink-soft: var(--bq-ink-2);
    --rule: var(--bq-line);
    --band: #000000;                  /* 暗い帯（銘柄の帯・特集の帯）。DESIGN.md .bq-dark */
    --band-text: #ffffff;
    --band-rule: #333336;
    --accent: var(--bq-link);         /* 文字の「青」は全部リンクの青に。ブランドの青 #009fe8 はロゴだけ */
    --accent-soft: var(--bq-surface); /* 薄い青の地 → 薄い灰の面 */
}

/* 暗い区画（DESIGN.md ①）。ページ全体ではなく区画単位で使う */
.bq-dark {
    --bq-bg: #000000;
    --bq-surface: #1d1d1f;
    --bq-ink: #ffffff;
    --bq-ink-2: #d2d2d7;
    --bq-ink-3: #a1a1a6;
    --bq-muted: #a1a1a6;
    --bq-line: #333336;
    --bq-link: #2997ff;
}

/* 暗い配色は作らない。OS が暗い設定でも、明るい値のまま（上と同じ値を同じ強さで言い直す） */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: light; }
    html, body { background: #ffffff; color: #1a1a1a; }
}


/* ---------- グラフの囲い（変えない） ----------
   グラフの中だけ、style.css の元の色に戻す。枠の内側の見た目は 2026-10-15 以前と同じ */
.spark,
.stockx-chart-box, .stockx-legend,
.netmap-figure, .netmap-legend,
.kb-charts,
.adsx-figure, .adsx-legend, .adsx-chart, .adsx-chart-axis,
.ig-figure,
.chart-canvas-box,
.stockx-corr {   /* 相関の数値の下に敷いた横棒も、小さなグラフとして元の色のまま */
    --paper: #F4F2EC;
    --paper-raised: #FFFFFF;
    --ink: #12151B;
    --ink-soft: #4B4E56;
    --rule: #DBD7CB;
    --accent: #3049E6;
    --accent-soft: #E7EAFB;
}


/* ---------- ② 書体（DESIGN.md ②） ---------- */
body {
    font-family: "Inter", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
    background: var(--bq-bg);
    color: var(--bq-ink);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt" 0;
}
/* 日本語の見出しを文節で折り返す（DESIGN.md ②） */
h1, h2, .bq-lead { word-break: auto-phrase; text-wrap: balance; }

/* style.css が英字に Manrope を指定していた所。Manrope はもう読み込まないので本文と同じ書体に */
.official-link, .back-link, .category-badge, .share-label, .related-heading,
.pagination-nav a, .pagination-nav span, .admin-btn, .stockx-title span, .stockx-date,
.stocklp-eyebrow, .stocklp-table tbody th span, .stocklp-symbols span, .sponsor-label {
    font-family: inherit;
}
/* 日付（DESIGN.md ③ 日付・注記 = 13px・700）。等幅をやめ、桁だけ揃える */
.timestamp, .rail-updated, .trend-updated {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    color: var(--bq-muted);
}
.timestamp { font-size: 12.5px; font-weight: 700; }

/* 本文のリンクは青（DESIGN.md ① --bq-link） */
.article-content a, .evd-body a, .store-body a, .kb-lead a, .adpage-block p a, .stocklp-block p a,
.tag-profile a, .kb-sources a, .kb-crossnav a, .kb-crosslink a, .stockx-kb a {
    color: var(--bq-link);
}
/* 本文の中に置かれたボタンは白字のまま（上の青いリンク色が後勝ちしないように） */
.article-content :is(.gate-button, .nl-box-button, .evd-btn, .store-button, .kb-btn) { color: #fff; }
/* 本文の途中に入る広告枠は本文のリンク色にしない */
.article-content .sponsor a, .article-content .sponsor-body { color: var(--bq-ink); }


/* ---------- ⑤ ヘッダー（DESIGN.md ⑤） ---------- */
.masthead {
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--bq-ink);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.masthead-inner {
    max-width: none;
    height: 64px;
    min-height: 64px;
    padding: 0 24px;
    gap: 12px;
    align-items: center;
}
@media (min-width: 768px) {
    .masthead-inner { height: 96px; padding: 0 48px; }
}

/* 題字: ロゴ（黒）＋ サービス名 */
.wordmark.bq-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--bq-ink);
    text-decoration: none;
    padding: 0;
    font-size: inherit;
}
.bq-brand__logo { display: block; height: 16px; width: auto; filter: brightness(0); }
@media (min-width: 768px) { .bq-brand__logo { height: 20px; } }
.wordmark .bq-brand__service {
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 4px 0 4px 12px;
    border-left: 1px solid #cccccc;
    color: var(--bq-ink);
}

/* 区画のタブ（ニュース・イベント・ナレッジベース・株価）。DESIGN.md のリンクの形: 11px・900・字間 0.2em */
.sections { margin-left: auto; gap: 32px; align-self: stretch; }
.sections a {
    padding: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bq-muted);
    border: 0;
    background: none;
}
.sections a:hover { color: var(--bq-ink); }
.sections a.on {
    color: var(--bq-ink);
    background: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.masthead-tools { margin-left: 32px; gap: 20px; }

/* ログイン・マイページ・記事の「← LIST」もタブと同じ形の文字リンクにする（黒丸ボタンは本文の主ボタンに取っておく） */
.official-link, .back-link {
    border: 0;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bq-ink);
    white-space: nowrap;
}
.official-link:hover, .back-link:hover { color: var(--bq-ink); text-decoration: underline; text-underline-offset: 4px; border: 0; }

/* ヘッダーの検索欄（DESIGN.md ④ 入力欄を小さくしたもの） */
.search-box {
    background: #fff;
    border: 1px solid var(--bq-input-line);
    color: var(--bq-ink);
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    padding: 9px 14px;
    width: 200px;
}
.search-box::placeholder { color: var(--bq-faint); }
.search-box:focus, .search-box:focus-visible {
    outline: none;
    border-color: var(--bq-link);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, .15);
}

@media (max-width: 1100px) {
    .masthead-inner { padding: 0 24px; }
    .sections { gap: 22px; }
    .masthead-tools { margin-left: 22px; gap: 16px; }
    .masthead-tools .search-box { width: 150px; }
}
@media (max-width: 900px) {
    .sections-long { display: none; }
}
/* スマホ: 1段目（64px）にロゴとログイン、2段目に区画のタブ4つ */
@media (max-width: 760px) {
    .masthead-inner { height: auto; min-height: 0; padding: 0; gap: 0; }
    .wordmark.bq-brand { height: 64px; padding: 0 24px; }
    .masthead-tools { margin-left: auto; padding: 0 24px; }
    .sections {
        margin-left: 0;
        border-top: 1px solid var(--bq-line);
        gap: 0;
    }
    .sections a { justify-content: center; padding: 12px 2px 11px; font-size: 11px; letter-spacing: .12em; }
    .sections a.on { text-underline-offset: 6px; }
}


/* ---------- 区画の下の段（サブナビ・トレンド）: 白地・薄い線 ---------- */
.subnav {
    background: var(--bq-bg);
    border-bottom: 1px solid var(--bq-line);
}
.subnav-inner { max-width: 1152px; gap: 28px; }
.subnav a {
    font-size: 13px;
    font-weight: 700;
    color: var(--bq-muted);
    padding: 12px 0;
}
.subnav a.active, .subnav a:hover,
.subnav-section .subnav-inner a.active { color: var(--bq-ink); border-bottom-color: var(--bq-ink); }

.trend-strip-inner { max-width: 1152px; padding: 10px 24px; }
.trend-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2em;
    color: var(--bq-ink);
}
.trend-word, .subnav .trend-word {
    font-size: 13px;
    font-weight: 700;
    color: var(--bq-ink-3);
}
.trend-word:hover, .trend-word.active { color: var(--bq-ink); border-bottom-color: var(--bq-ink); }
.trend-updated { font-size: 11px; color: var(--bq-faint); }


/* ---------- 銘柄の帯（暗い区画。中身＝グラフはそのまま） ---------- */
.market-strip { background: var(--bq-bg); border-bottom: 1px solid var(--bq-line); }
.market-strip-inner { max-width: 1152px; }
.market-label { color: var(--bq-muted); }
.market-legend { color: var(--bq-faint); }
.market-legend a { color: var(--bq-ink-2); }


/* ---------- ③ ページの段組み・見出し ---------- */
/* ⚠ .container の幅は変えない。.stockx（900px）・.adsx（980px）などが同じ要素に付いており、
   ここで max-width を書くと後勝ちでそれらの幅を壊す（2026-10-15 に株価のページで実際に起きた） */
.page { max-width: 1152px; padding: 40px 24px 96px; gap: 40px; grid-template-columns: minmax(0, 1fr) 300px; }
@media (max-width: 860px) { .page { grid-template-columns: minmax(0, 1fr); padding-top: 28px; } }

/* 一覧の見出し（DESIGN.md ③: 28px → md 40px・900・-0.03em） */
.listing-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
.listing-head h1 { font-size: 28px; font-weight: 900; letter-spacing: -.03em; line-height: 1.25; }
.listing-head p { font-size: 15px; color: var(--bq-muted); }
@media (min-width: 768px) { .listing-head h1 { font-size: 40px; line-height: 1.15; } }

/* 小見出し語（記事の種別のラベル）。DESIGN.md ④ の小さなタグの形。日本語は 9px では読めないので 11px */
.eyebrow {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    color: var(--bq-tag-ink);
    background: var(--bq-tag-bg);
    padding: 2px 8px;
    line-height: 1.6;
}
.eyebrow:hover { color: var(--bq-ink); }
.feature-eyebrow, .feature-badge, .ad-eyebrow {
    color: #fff;
    background: var(--bq-ink);
    border-radius: 0;
}

/* リード記事（一覧の1本目） */
.lead { gap: 32px; padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--bq-line); }
.lead img { border: 0; border-radius: 24px; background: var(--bq-surface); }
.lead h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.3;
}
@media (min-width: 768px) { .lead h1 { font-size: 32px; } }
.lead p { font-size: 15px; line-height: 1.75; color: var(--bq-ink-3); }

/* 2本目からの一覧 */
.story-list { border-top: 0; }
.lead + .story-list { margin-top: 0; }
.story { padding: 22px 0; border-bottom: 1px solid var(--bq-line); gap: 24px; }
.story img { border: 0; border-radius: 16px; background: var(--bq-surface); }
.story h3 { font-size: 18px; font-weight: 900; letter-spacing: -.02em; line-height: 1.45; }
.story h3 a:hover { color: var(--bq-ink); text-decoration: underline; text-underline-offset: 4px; }
.story-dek { font-size: 14px; line-height: 1.7; color: var(--bq-ink-3); }
@media (max-width: 600px) {
    .story { gap: 14px; padding: 16px 0; }
    .story img { border-radius: 12px; }
    .story h3 { font-size: 15.5px; }
}

/* 特集の帯（暗い区画として、角丸のカードにする） */
.feature-section { border-radius: 24px; padding: 32px; background: #000; color: #fff; }
.feature-section-heading { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
.feature-card img { border: 0; border-radius: 16px; }
.feature-card:hover h3 { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.no-results, .active-filter, .clear-filter { color: var(--bq-muted); }


/* ---------- 記事ページ ---------- */
.article-visual img { border: 0; border-radius: 24px; }
.article-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.35;
    word-break: auto-phrase;
    text-wrap: balance;
}
@media (min-width: 768px) { .article-title { font-size: 36px; line-height: 1.3; } }
@media (max-width: 600px) { .article-title { font-size: 26px; } }

/* 要約（カード） */
.summary-box {
    background: var(--bq-surface);
    border: 0;
    border-radius: 24px;
    padding: 28px 32px;
}
.summary-label { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--bq-muted); text-transform: none; }
.summary-box p { font-size: 16px; line-height: 1.8; color: var(--bq-ink-2); }
@media (max-width: 600px) { .summary-box { padding: 22px 20px; border-radius: 20px; } }

.article-content { font-size: 17px; line-height: 1.95; color: var(--bq-ink); }
.article-content h2 {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.4;
    border-bottom: 0;
    padding-bottom: 0;
    margin: 3.5rem 0 1.2rem;
}
.article-content h3 { font-weight: 900; letter-spacing: -.02em; }
.article-content blockquote { border-left-color: var(--bq-ink); background: var(--bq-surface); border-radius: 0 16px 16px 0; }
.article-content :not(pre) > code { background: var(--bq-surface); color: var(--bq-ink); }
.code-block { border-radius: 16px; }
.body-figure img { border-color: var(--bq-line); border-radius: 16px; }
.body-figure figcaption, .image-credit { color: var(--bq-muted); }
.article-footer { background: var(--bq-surface); border: 0; border-radius: 24px; padding: 28px 32px; }
.contribution-note { background: var(--bq-surface); border: 0; border-radius: 16px; color: var(--bq-ink-3); }
.byline { color: var(--bq-muted); }

/* 対談の話者の色分けは残す（--accent は青のまま。色はリンクの青に寄せた） */

/* 種別のバッジ・タグ（DESIGN.md ④ .bq-tag） */
.category-badge {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: 0;
    background: var(--bq-tag-bg);
    color: var(--bq-tag-ink);
}
.category-badge.aff-pr { background: var(--bq-ink); color: #fff; }
.tag-chip {
    font-size: 12px;
    font-weight: 700;
    color: var(--bq-tag-ink);
    background: var(--bq-tag-bg);
    border: 0;
    border-radius: 0;
    padding: 3px 9px;
}
.tag-chip:hover { color: var(--bq-ink); background: #ebebeb; }

/* シェア */
.share-label { font-size: 11px; font-weight: 900; letter-spacing: .2em; color: var(--bq-muted); }
.share-btn { background: var(--bq-surface); border: 0; color: var(--bq-ink); }
.share-btn:hover, .share-btn.is-done { background: var(--bq-ink); color: #fff; }

/* 関連記事 */
.related-section { border-top: 1px solid var(--bq-line); }
.related-heading { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
.related-thumb img { border: 0; border-radius: 16px; background: var(--bq-surface); }
.related-title { font-weight: 900; letter-spacing: -.01em; }

/* ログインを促す続き（フェードの色を白に） */
.gate { background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 45%, #fff 100%); }
.gate-note { color: var(--bq-ink-3); }

/* メール配信への導線（カード） */
.nl-box, .nl-prompt, .newsletter-first {
    background: var(--bq-surface);
    border: 0;
    border-radius: 24px;
}
.nl-box { padding: 32px; }
.nl-prompt, .newsletter-first { border-radius: 16px; padding: 16px 20px; }
.nl-prompt a { color: var(--bq-link); }
.nl-box-lead { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
.nl-box-note { color: var(--bq-ink-3); font-size: 15px; line-height: 1.625; }


/* ---------- ④ ボタン ---------- */
/* 主ボタン: 黒の丸ボタン（DESIGN.md ④ .bq-btn）。1つの画面に1つまで（DESIGN.md ⑦） */
.gate-button, .nl-box-button, .evd-btn, .store-button, .kb-btn, .kb-search button,
.evx-search button, .adsx-form button, .admin-btn, .admin-btn-approve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bq-ink);
    color: #fff;
    padding: 10px 24px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    filter: none;
    opacity: 1;
    transition: background-color .2s;
}
.gate-button:hover, .nl-box-button:hover, .evd-btn:hover, .store-button:hover, .kb-btn:hover,
.kb-search button:hover, .evx-search button:hover, .adsx-form button:hover,
.admin-btn:hover, .admin-btn-approve:hover {
    background: #000;
    opacity: 1;
    filter: none;
}
.gate-button { padding: 12px 32px; font-size: 15px; }
.gate-button:focus-visible, .nl-box-button:focus-visible, .evd-btn:focus-visible,
.store-button:focus-visible, .kb-btn:focus-visible {
    outline: 2px solid var(--bq-link);
    outline-offset: 3px;
}
.evr-wide { display: flex; width: 100%; padding: 13px 24px; font-size: 15px; }
.kb-btn-off, .kb-btn-off:hover { background: #d2d2d7; color: #fff; cursor: default; }

/* 副ボタン: 青い文字リンク＋「 ›」（DESIGN.md ④ .bq-link）。
   2つ目の主ボタンを並べないため（DESIGN.md ⑦）、控えめなボタン・サイドバーの案内はこの形にする */
.evd-btn-quiet, .rail-newsletter-button, .rail-kb-btn, .rail-kb-btn-sub,
.kb-plans .kb-plan + .kb-plan .kb-btn:not(.kb-btn-off),
.article-container:has(.gate) .nl-box-button,   /* 続きのログイン（黒丸）がある記事では、メール配信の案内はリンクにする */
.kb-gate-slim .kb-btn,   /* ナレッジベースのトップでは上の「プランと料金を見る」が主ボタン。同じ飛び先の2つ目はリンクにする */
.nl-confirm-stop, .admin-btn-reject {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--bq-link);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
/* ⚠ 「ナレッジベースを見る →」のように元から矢印がある文言には付けない（→ › と二重になる） */
.evd-btn-quiet::after, .rail-newsletter-button::after, .rail-kb-btn-sub::after,
.kb-plans .kb-plan + .kb-plan .kb-btn:not(.kb-btn-off)::after,
.article-container:has(.gate) .nl-box-button::after,
.kb-gate-slim .kb-btn::after {
    content: "\00a0›";
}
.evd-btn-quiet:hover, .rail-newsletter-button:hover, .rail-kb-btn:hover, .rail-kb-btn-sub:hover,
.kb-plans .kb-plan + .kb-plan .kb-btn:not(.kb-btn-off):hover,
.kb-gate-slim .kb-btn:hover,
.article-container:has(.gate) .nl-box-button:hover,
.nl-confirm-stop:hover, .admin-btn-reject:hover {
    background: none;
    color: var(--bq-link);
    opacity: 1;
    filter: none;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.kb-plans .kb-plan + .kb-plan .kb-btn:not(.kb-btn-off) { margin-top: 12px; }
/* 「配信を止める」は赤字・黒丸にしない控えめなまま。admin の「却下」は赤字のリンク */
.nl-confirm-stop { color: var(--bq-muted); font-size: 14px; }
.admin-btn-reject { color: var(--down); }
/* サイドバーの案内リンクは左寄せ・中の余白に合わせる */
.rail-newsletter-button, .rail-kb-btn { display: flex; margin: 12px 20px 18px; font-size: 14px; }
.rail-kb-btns { margin: 12px 20px 18px; gap: 10px; }
.rail-kb-btns .rail-kb-btn { margin: 0; }
.evr-cancel button { border-radius: 999px; border-color: var(--bq-input-line); }
.aff-actions button, .x-manual button, .adsx-inline-form button {
    border-radius: 999px;
    border: 1px solid var(--bq-input-line);
    background: #fff;
    color: var(--bq-ink);
    font-weight: 700;
}

/* X のフォロー: 白地に細い線の丸ボタン（黒丸は使わない） */
.x-follow {
    margin: 14px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--bq-ink);
    border: 1px solid var(--bq-input-line);
    padding: 9px 16px;
}
.x-follow:hover { opacity: 1; border-color: var(--bq-ink); }

/* ページ送り */
.pagination-nav a, .pagination-nav span {
    border: 1px solid var(--bq-line);
    border-radius: 999px;
    min-width: 38px;
    text-align: center;
    padding: 9px 13px;
    font-weight: 700;
    font-size: 14px;
    color: var(--bq-ink);
}
.pagination-nav a:hover { border-color: var(--bq-ink); }
.pagination-nav [aria-current="page"] { background: var(--bq-ink); border-color: var(--bq-ink); color: #fff; }
.pagination-nav .pagination-gap { border: 0; }


/* ---------- ④ 入力欄（DESIGN.md ④ .bq-input） ---------- */
.listing-search input,
.kb-search input[type="search"],
.evx-search input[type=search],
.evr-form input[type=text], .evr-form input[type=email], .evr-form textarea,
.adsx-form input, .adsx-form textarea, .adsx-form select,
.adsx-inline-form input,
.aff-actions input[type=text], .aff-link input, .aff-make input,
.evadm-search input,
.evadm-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .evadm-form select, .evadm-form textarea,
.evadm-box input[type=text], .evadm-box textarea, .evadm-box select {
    border: 1px solid var(--bq-input-line);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    background: #fff;
    color: var(--bq-ink);
}
.listing-search input:focus,
.kb-search input[type="search"]:focus,
.evx-search input[type=search]:focus,
.evr-form input:focus, .evr-form textarea:focus,
.adsx-form input:focus, .adsx-form textarea:focus, .adsx-form select:focus,
.adsx-inline-form input:focus, .aff-actions input:focus, .aff-link input:focus, .aff-make input:focus,
.evadm-search input:focus, .evadm-form input:focus, .evadm-form select:focus, .evadm-form textarea:focus,
.evadm-box input:focus, .evadm-box textarea:focus, .evadm-box select:focus {
    outline: none;
    border-color: var(--bq-link);
    box-shadow: 0 0 0 4px rgba(0, 102, 204, .15);
}
.kb-search { gap: 10px; }
.kb-search button, .evx-search button { padding: 0 24px; min-height: 46px; }
.evr-form fieldset, .adsx-slots, .evadm-speaker { border-color: var(--bq-line); border-radius: 12px; }
.evr-choice label { border-color: var(--bq-input-line); border-radius: 12px; }


/* ---------- ④ カード（DESIGN.md ④ .bq-card: 薄い灰の面・角丸 24px） ---------- */

/* サイドバー */
.rail-block {
    background: var(--bq-surface);
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 16px;
}
.rail-head {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
    padding: 20px 20px 10px;
    border-bottom: 0;
}
.rail-updated { font-size: 11px; color: var(--bq-faint); font-weight: 700; }
.rank-item { padding: 4px 20px 16px; border-top: 1px solid rgba(0, 0, 0, .06); }
.rank-num {
    font-family: inherit;
    font-weight: 900;
    font-size: 26px;
    color: #c7c7cc;
    right: 18px;
    top: 10px;
}
.rank-item a { font-size: 14px; font-weight: 700; line-height: 1.55; }
.rank-item a:hover, .latest-list a:hover, .x-list a:hover { color: var(--bq-ink); text-decoration: underline; text-underline-offset: 3px; }
.latest-list li { padding: 12px 20px; border-top: 1px solid rgba(0, 0, 0, .06); }
.latest-list .dot { background: var(--bq-ink); }
.latest-list a { font-size: 14px; font-weight: 700; }
.rail-more-link { padding: 14px 20px 18px; border-top: 1px solid rgba(0, 0, 0, .06); color: var(--bq-link); font-size: 14px; }
.rail-newsletter p, .rail-kb-lead { padding: 0 20px; font-size: 13.5px; line-height: 1.7; color: var(--bq-ink-3); }
.rail-kb { border-left: 0; }
.rail-kb-newhead { padding: 12px 20px; border-color: rgba(0, 0, 0, .06); font-size: 13px; letter-spacing: 0; }
.rail-kb-new { margin: 8px 20px 4px; }
.rail-kb-new li { border-bottom-color: rgba(0, 0, 0, .08); }
.rail-ev-date, .evx-date, .evx-list-date, .evsp-time, .evd-sub { color: var(--bq-muted); }
.x-note { margin: 0 20px 8px; color: var(--bq-muted); }
.x-list { padding: 0 20px 14px; }
.x-list li { border-top-color: rgba(0, 0, 0, .06); }
.rail-sites { border-top-color: var(--bq-line); }
.rail-sites a:hover, .rail-sites a:focus-visible { color: var(--bq-ink); background: var(--bq-surface); }

/* 広告の枠（PR）と自社の案内。「PR」の札は常に見える位置に置く（広告であることを隠さない） */
.sponsor {
    background: var(--bq-surface);
    border: 0;
    border-radius: 24px;
    overflow: hidden;
}
.sponsor-label {
    top: 16px;
    left: 20px;
    background: var(--bq-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;
    padding: 2px 8px;
}
.sponsor-body { padding: 48px 24px 24px; }
.sponsor-article .sponsor-body, .sponsor-feed .sponsor-body { padding: 52px 32px 28px; }
.sponsor-headline { font-size: 17px; font-weight: 900; letter-spacing: -.02em; line-height: 1.5; }
.sponsor-article .sponsor-headline, .sponsor-feed .sponsor-headline { font-size: 21px; letter-spacing: -.025em; }
.sponsor-copy { font-size: 14px; line-height: 1.7; color: var(--bq-ink-3); }
.sponsor-name { color: var(--bq-muted); font-size: 12px; font-weight: 700; }
.sponsor-image { border-radius: 16px; }
.sponsor-house { background: #fff; border: 1px dashed #d2d2d7; }
.sponsor-house .sponsor-body { padding: 48px 24px 24px; }
.sponsor-house-cta { color: var(--bq-link); }
.ad-disclosure { background: var(--bq-surface); border: 0; border-radius: 16px; }
.ad-disclosure .sponsor-label { position: static; }
.sponsor-feed { margin: 20px 0; }

/* タグの概況・一覧の箱 */
.tag-profile, .stockx-caveat, .stocklp-cta, .stocklp-pick, .stockx-gate, .adpage-cta, .adpage-price,
.store-buy, .aff-box, .aff-cta, .kb-gate, .kb-upsell, .kb-todo, .kb-about, .evr-private, .evr-files,
.evr-form-wrap, .kb-abstract, .kb-postbox, .evd-box, .admin-card, .adsx-card, .adsx-empty, .adsx-price,
.tag-profile {
    background: var(--bq-surface);
    border: 0;
    border-radius: 24px;
}
.tag-profile, .stockx-caveat, .stocklp-cta, .adpage-cta, .adpage-price, .kb-gate, .kb-upsell, .kb-todo { padding: 32px; }
.stocklp-pick, .stockx-gate, .store-buy, .aff-box, .aff-cta, .evd-box, .admin-card, .adsx-card, .kb-postbox, .kb-abstract { padding: 24px 28px; }
.kb-about { padding: 8px 28px; }
.kb-about[open] { padding-bottom: 28px; }
.kb-about-grid section { background: #fff; border-radius: 16px; padding: 18px 20px; }
.kb-about-tag { background: var(--bq-tag-bg); color: var(--bq-tag-ink); border-radius: 0; font-weight: 900; }
.kb-about-tag-plan { background: var(--bq-ink); color: #fff; }
.kb-about-login, .kb-about-examples a, .kb-postbox-head, .kb-postbox-more, .kb-artlink { color: var(--bq-link); }
.tag-profile h2 { border-bottom: 0; padding-bottom: 0; font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
.kb-gate h2, .kb-upsell h2, .kb-todo h2, .stockx-caveat h2, .adpage-cta h2, .stocklp-pick h2 {
    font-size: 21px; font-weight: 900; letter-spacing: -.025em;
}
.kb-gate-slim { padding: 18px 24px; border-radius: 16px; }
.kb-note, .kb-crosslink, .stockx-kb, .kb-est-warn { border-radius: 16px; }
.kb-note, .kb-crosslink, .stockx-kb { background: var(--bq-surface); }
.kb-crossnav { background: var(--bq-surface); border: 0; border-radius: 16px; padding: 14px 20px; }
.kb-counts div { background: var(--bq-surface); border-radius: 24px; padding: 20px 24px; }
.kb-counts b { font-weight: 900; letter-spacing: -.03em; }
.kb-plan { border: 0; background: var(--bq-surface); border-radius: 24px; padding: 32px; }
.kb-plan-current { box-shadow: inset 0 0 0 2px var(--bq-ink); }
.kb-plan h2 { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
.kb-price b { font-weight: 900; letter-spacing: -.03em; }
.kb-bulk-links a { border: 0; border-radius: 24px; background: var(--bq-surface); padding: 24px 28px; }
.kb-bulk-links a:hover { box-shadow: 0 10px 30px -12px rgba(0,0,0,.2); border: 0; }
.kb-tabs a { border-color: var(--bq-input-line); }
.kb-tabs a.on { background: var(--bq-ink); border-color: var(--bq-ink); }
.kb-chips a { background: var(--bq-surface); }
.kb-chips a.on { background: var(--bq-ink); color: #fff; }
.kb-pager a { border-color: var(--bq-input-line); border-radius: 999px; }
.kb-notes { background: var(--bq-surface); border-radius: 16px; }

/* マイページ・ストア・広告の案内（押せるカード） */
.mypage-card {
    background: var(--bq-surface);
    border: 0;
    border-radius: 24px;
    padding: 28px 32px;
    transition: box-shadow .3s;
}
.mypage-card:hover { border: 0; box-shadow: 0 10px 30px -12px rgba(0,0,0,.2); }
.mypage-card b { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
.mypage-card span { font-size: 15px; line-height: 1.625; color: var(--bq-ink-3); }
.mypage-reports li a { color: var(--bq-link); }
.store-card { background: var(--bq-surface); border: 0; border-radius: 24px; overflow: hidden; }
.store-card h2 { font-weight: 900; letter-spacing: -.02em; }
.store-card a:hover h2 { color: var(--bq-ink); text-decoration: underline; }
.store-card-cover { border-bottom: 0; }
.store-detail-cover, .store-sample-grid img { border-radius: 16px; overflow: hidden; border-color: var(--bq-line); }
.store-owned { background: var(--bq-ink); color: #fff; border-radius: 0; }
.adpage-stats div, .adpage-slot, .stocklp-kinds li, .adsx-cards > div {
    background: var(--bq-surface);
    border: 0;
    border-radius: 24px;
    padding: 24px;
}
.adpage-stats b, .adsx-cards b { font-weight: 900; letter-spacing: -.03em; }
.adpage-slot h3 { font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.adpage-nav a, .stocklp-symbols a, .evx-years a {
    border: 1px solid var(--bq-input-line);
    border-radius: 999px;
    background: #fff;
    padding: 6px 14px;
}
.adpage-nav a:hover, .stocklp-symbols a:hover, .evx-years a:hover { border-color: var(--bq-ink); }
.evx-years a.on { background: var(--bq-ink); border-color: var(--bq-ink); color: #fff; }
.evx-years a.on span { color: #d2d2d7; }
.stocklp-example .stockx-row { background: var(--bq-surface); border: 0; border-radius: 24px; padding: 24px; }
.adsx-waiting { border: 2px solid var(--bq-ink); border-radius: 24px; padding: 24px 28px; }
.adsx-code { background: #000; border-radius: 16px; }

/* 区画の見出し（広告の案内・株価の案内・関係図の表など）。下の太線をやめ、太さで見せる */
.adpage-block h2, .stocklp-block h2, .netmap-table-section h2, .adsx-h2 {
    border-bottom: 0;
    padding-bottom: 0;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.3;
}
.adpage-hero, .stocklp-hero { border-bottom: 0; }
.adpage-hero h1, .stocklp-hero h1, .netmap-hero h1, .stockx-title, .adsx-head h1, .store-h1 {
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.2;
}
.adpage-hero h1, .stocklp-hero h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.adsx-head h1 { font-size: 28px; }
@media (min-width: 768px) { .adsx-head h1 { font-size: 40px; } }
.adpage-sub, .stocklp-sub, .netmap-sub, .stockx-lead { font-size: 17px; line-height: 1.75; color: var(--bq-ink-2); font-weight: 500; }
.stocklp-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--bq-muted); }
.adsx-sub, .adpage-note, .stocklp-note, .netmap-note { color: var(--bq-muted); }

/* ナレッジベースの見出し */
.kb-section h2, .kb-latest h2 { font-weight: 900; letter-spacing: -.025em; }

/* イベント */
.evx-head {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -.025em;
    border-bottom: 0;
    padding: 0;
    margin: 32px 0 16px;
}
.evx-card {
    background: var(--bq-surface);
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    transition: box-shadow .3s;
}
.evx-card:hover { border: 0; box-shadow: 0 10px 30px -12px rgba(0,0,0,.2); }
.evx-card-body { padding: 18px 22px 22px; }
.evx-title { font-weight: 900; letter-spacing: -.02em; font-size: 16px; }
.evx-cta { color: var(--bq-link); }
.evx-format { border: 0; background: var(--bq-tag-bg); color: var(--bq-tag-ink); font-weight: 900; }
.evx-list-title:hover, .evx-past a:hover .evx-past-title { color: var(--bq-ink); text-decoration: underline; }
.evx-past img { border-radius: 12px; }
.evx-soon { color: var(--bq-ink); border-color: var(--bq-ink); }

.evd-head { border-bottom: 0; padding-bottom: 4px; }
.evd-head h1 {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.3;
}
@media (min-width: 768px) { .evd-head h1 { font-size: 36px; } }
@media (max-width: 640px) { .evd-head h1 { font-size: 24px; } .evd-box { padding: 20px; } }
.evd-img { border-radius: 24px; }
.evd-map { color: var(--bq-link); }
.evd-cta { border-top-color: rgba(0, 0, 0, .08); }
.evd-crumb a { color: var(--bq-muted); }
.evd-body h2, .evd-body .evd-sec, .evd-tt h2, .evsp h2 { font-weight: 900; letter-spacing: -.02em; }
.evd-staff, .x-manual { border-radius: 12px; }

/* 申し込み欄 */
.evr { background: var(--bq-surface); border: 0; border-radius: 24px; padding: 28px 28px 24px; }
.evr-title { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
.evr-status { background: #fff; border: 1px solid var(--bq-line); border-radius: 12px; }
.evr-msg { border-radius: 12px; }
.evr-change summary { color: var(--bq-link); }
.evr-private, .evr-files, .evr-form-wrap { background: #fff; border-radius: 16px; }

/* 登壇者 */
.evsp-item { background: var(--bq-surface); border: 0; border-radius: 24px; padding: 20px; }
.evsp-name { font-weight: 900; letter-spacing: -.02em; }

/* 時間割（Quantum EXPO など）: カードの形にそろえ、種類の色分けは控えめに残す */
.evtt-list { gap: 10px; }
.evtt-row { border: 0; border-radius: 20px; background: var(--bq-surface); padding: 16px 20px; }
.evtt-talk, .evtt-other { background: var(--bq-surface); }
.evtt-talk .evtt-time { color: var(--bq-ink); }
.evtt-kind { color: var(--bq-muted); }
.evtt-time small { color: var(--bq-muted); border-color: #c7c7cc; }
.evtt-net { background: #f0f7f2; border: 0; }
.evtt-open { background: #fbf6ec; border: 0; }
.evtt-icon { border-radius: 50%; }

/* 株価とニュースの一覧（グラフの外側） */
.stockx-tabs { border-bottom-color: var(--bq-line); }
.stockx-tabs a.active { border-bottom-color: var(--bq-ink); }
.stockx-badge { background: var(--bq-tag-bg); border: 0; color: var(--bq-tag-ink); border-radius: 0; font-weight: 700; }
.badge-earnings { background: #fdecea; color: #c0392b; }
.badge-news { background: var(--bq-ink); color: #fff; }
.stockx-related-tag { color: var(--bq-tag-ink); background: var(--bq-tag-bg); border: 0; }
.stockx-links-more { color: var(--bq-link); }
.stockx-row { border-bottom-color: var(--bq-line); }


/* ---------- ④ 表（DESIGN.md ④ .bq-table） ---------- */
.article-table, .stocklp-table, .netmap-table, .kb-table, .adsx-table, .evd-tickets, .kb-about-table,
.stockx-links-table {
    font-size: 15px;
    line-height: 1.6;
    border-collapse: collapse;
}
.article-table th, .article-table td,
.stocklp-table th, .stocklp-table td,
.netmap-table th, .netmap-table td,
.kb-table th, .kb-table td,
.adsx-table th, .adsx-table td,
.evd-tickets th, .evd-tickets td,
.kb-about-table th, .kb-about-table td,
.stockx-links-table th, .stockx-links-table td {
    border-bottom: 1px solid var(--bq-line);
    padding: 10px 12px;
}
.article-table thead th, .stocklp-table thead th, .netmap-table thead th, .kb-table thead th,
.adsx-table thead th, .adsx-table tr:first-child th, .evd-tickets th, .kb-about-table thead th,
.stockx-links-table thead th {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0;
    color: var(--bq-ink);
    background: #fff;
    border-bottom-color: #c7c7cc;
    white-space: nowrap;
}
.article-table-wrap { border: 0; border-radius: 0; }
.article-table th { background: #fff; }
.article-table tbody tr:nth-child(even) { background: none; }
.kb-tablewrap { border: 0; border-radius: 0; }
.kb-table { background: #fff; font-size: 14px; }
.kb-table tbody tr:hover { background: var(--bq-surface); }
.kb-table tr.kb-curated td { background: #f6faf7; }
.stockx-links-table { font-size: 14px; }
.stockx-links-table th, .stockx-links-table td { padding: 8px 6px; }
.evd-tickets { font-size: 14px; }
.evd-tickets th, .evd-tickets td { padding: 8px 10px; }
@media (max-width: 640px) {
    .kb-table, .netmap-table, .stocklp-table { font-size: 13.5px; }
    .kb-table th, .kb-table td { padding: 9px 10px; }
    .stockx-links-table { font-size: 13px; }
    .stockx-links-table th, .stockx-links-table td { padding: 7px 4px; }
}


/* ---------- ⑤ フッター（DESIGN.md ⑤） ---------- */
footer.bq-footer {
    background: #fff;
    color: var(--bq-ink-3);
    border-top: 1px solid var(--bq-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 32px;
    padding: 36px 24px 48px;
    max-width: none;
}
@media (min-width: 768px) { footer.bq-footer { padding: 36px 48px 48px; } }
.bq-footer__logo { display: inline-flex; }
.bq-footer__logo img { display: block; height: 16px; width: auto; filter: grayscale(1); opacity: .7; }
.bq-footer__nav { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; font-weight: 700; }
.bq-footer__nav a { color: var(--bq-ink-3); text-decoration: none; }
.bq-footer__nav a:hover { color: var(--bq-ink); text-decoration: underline; text-underline-offset: 3px; }
.bq-footer__company { padding-left: 32px; border-left: 1px solid var(--bq-line); }
.bq-footer small { margin-left: auto; color: var(--bq-faint); font-size: 11px; }
@media (max-width: 900px) {
    .bq-footer__company { padding-left: 0; border-left: 0; flex-basis: 100%; }
    .bq-footer__nav { flex-basis: 100%; }
    .bq-footer small { margin-left: 0; }
}


/* ---------- 動き（DESIGN.md ④ 登場の動き）は付けない。動きを減らす設定の人には遷移も止める ---------- */
@media (prefers-reduced-motion: reduce) {
    .mypage-card, .evx-card, .kb-bulk-links a, .gate-button, .evd-btn, .kb-btn { transition: none; }
}

/* ===== 2026-10-15 全ページ点検の直し ===== */
/* 1. ナレッジのプラン比較表：スマホで1列目が縦書きのように潰れていた */
@media (max-width: 640px) {
  .kb-about { padding: 8px 16px; }
  .kb-about-table { font-size: 13px; }
  .kb-about-table th, .kb-about-table td { padding: 7px 6px; }
  .kb-about-table td:first-child { min-width: 8em; }
}
/* 2. ナレッジの検索：ボタンが「検／索」と割れ、検索後の「解除」がはみ出していた */
.kb-search input[type=search] { min-width: 0; }
.kb-search button, .kb-clear { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) { .kb-search button { padding: 0 16px; } }
/* 3. ページ内リンクの飛び先が、固定したヘッダーの裏に隠れていた */
html { scroll-padding-top: 112px; }
@media (max-width: 760px) { html { scroll-padding-top: 124px; } }
.evr { scroll-margin-top: 0; }
/* 4. タグ・カテゴリ・連載のページの1本目（h2）にも、トップの1本目（h1）と同じ見出しを当てる */
.lead h2.lead-title { font-size: 28px; font-weight: 900; letter-spacing: -.03em; line-height: 1.3; margin: 0; }
@media (min-width: 768px) { .lead h2.lead-title { font-size: 32px; } }
.lead :is(h1, h2) a, .lead-title a { text-decoration: none; color: inherit; }
/* 5. 記事末尾の「ORIGINAL SOURCE」の箱：文字が薄く、長い URL がはみ出していた */
.article-footer { color: var(--bq-ink-3); }
.article-footer a { color: var(--bq-link); overflow-wrap: anywhere; }
/* 9. 人気記事の順位の数字が読めなかった */
.rank-num { color: #a1a1a6; }
/* 10. 株価の例の「-9.3%」：暗い地向けの色が明るい面に乗っていた */
.stocklp-example .stockx-chg.down { color: var(--down); }
.stocklp-example .stockx-chg.up { color: var(--up); }