/* ============================================================
 * 既存ページの部品を、新しい型 (base.css) の見た目に寄せる層 — 2026-11-06
 *
 * 全ページで base.css の後に読み込む。ページごとの CSS (features-help.css・tools.css・
 * 各ページの <style>) より強くするため、セレクタの頭に html body を付けている。
 * ページを型の部品 (c-*) で書き直したら、そのページに当たるルールはここから消してよい。
 * ============================================================ */

html body { color: var(--ink); }
html body main { font-size: var(--fs-body); line-height: 1.8; }

/* ---------- パンくず (帯の上の白い行) ---------- */
html body .breadcrumb { background: #fff; border-bottom: 0; padding: 12px var(--gutter); max-width: none; }
html body .breadcrumb ol { max-width: var(--w-main); margin: 0 auto; font-size: var(--fs-note); }
html body .breadcrumb a { color: var(--ink-2); }
html body .breadcrumb [aria-current="page"] { color: var(--ink-3); }

/* ---------- 下層ページの帯 (.page-head → .c-band と同じ見た目) ---------- */
html body .page-head { background: var(--blue-tint); border-bottom: 0 !important; padding: 64px var(--gutter) 104px; text-align: center; }
html body .page-head__inner { max-width: var(--w-read); margin: 0 auto; }
html body .page-head__eyebrow { display: block; text-transform: uppercase; font-family: inherit; font-size: var(--fs-note); font-weight: 700; letter-spacing: .12em; color: var(--blue); margin: 0 0 var(--sp-1); }
html body .page-head__eyebrow::before { display: none; }
html body .page-head h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--ink); margin: 0; }
html body .page-head h1::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--blue); margin: 20px auto 0; }
html body .page-head p { max-width: var(--w-read); margin: 20px auto 0; font-size: var(--fs-body); line-height: 1.8; color: var(--ink-2); }
html body .page-head__features { justify-content: center; }
@media (max-width: 640px) {
  html body .page-head { padding: 40px var(--gutter) 72px; text-align: left; }
  html body .page-head h1::after { margin-left: 0; }
  html body .page-head p { margin-left: 0; }
  html body .page-head__features { justify-content: flex-start; }
}

/* ---------- 区画 ---------- */
html body .sect { padding: 96px 0; }
html body .sect--alt { background: var(--surface-alt); }
html body .wrap { max-width: calc(var(--w-main) + var(--gutter) * 2); padding-left: var(--gutter); padding-right: var(--gutter); }
html body .sect__head { text-align: center; max-width: var(--w-read); margin: 0 auto var(--sp-6); }
html body .sect__label { font-family: inherit; font-size: var(--fs-note); font-weight: 700; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }
html body .sect__label::before { display: none; }
html body .sect__title { font-size: var(--fs-h2); font-weight: 700; line-height: 1.45; letter-spacing: 0; color: var(--ink); }
html body .sect__desc { font-size: var(--fs-lead); line-height: 1.8; color: var(--ink-2); }
@media (max-width: 640px) {
  html body .sect { padding: 64px 0; }
  html body .sect__head { text-align: left; margin-bottom: var(--sp-4); }
}

/* ---------- 見出しの太さと黒をそろえる ---------- */
html body main h1, html body main h2, html body main h3, html body main h4 { font-weight: 700; color: var(--ink); letter-spacing: 0; }

/* ---------- ボタン ---------- */
html body main .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--r-m); font-size: var(--fs-sub); font-weight: 700; border-width: 1px; }
html body main .btn--lg { min-height: 56px; padding: 0 32px; font-size: var(--fs-body); }
html body main .btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
html body main .btn--primary:hover { background: var(--blue-press); border-color: var(--blue-press); color: #fff; }
html body main .btn--ghost { background: #fff; border-color: var(--line); color: var(--ink); }
html body main .btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
/* ストアへの申し込みボタンは、どのページでも差し色 */
html body main a.btn[href*="chromewebstore.google.com"], html body main a.btn[href*="microsoftedge.microsoft.com"].btn--primary,
html body main a.tools-extension-cta__action[href*="chromewebstore.google.com"] { background: var(--warm); border-color: var(--warm); color: var(--ink); }
html body main a.btn[href*="chromewebstore.google.com"]:hover, html body main a.tools-extension-cta__action[href*="chromewebstore.google.com"]:hover { background: var(--warm-press); border-color: var(--warm-press); color: var(--ink); }

/* ---------- カード ---------- */
html body .card-grid { gap: var(--sp-3); }
html body .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); padding: 28px; }
html body .card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--blue-line); }
html body .card--thumb { padding: 0; overflow: hidden; }
html body .card__title { font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--ink); }
html body .card__desc { font-size: var(--fs-sub); line-height: 1.8; color: var(--ink-2); }
html body .card__category { font-size: var(--fs-note); font-weight: 700; color: var(--blue); letter-spacing: .04em; }
html body .card__action { color: var(--blue); font-weight: 700; font-size: var(--fs-sub); }
html body .card__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; }
html body .card__badge { border-radius: var(--r-s); font-size: var(--fs-note); font-weight: 700; }
html body .card__badge--on { background: var(--blue-tint); color: var(--blue); }
html body .card__badge--off { background: var(--surface-alt); color: var(--ink-3); }

/* ---------- 一覧の前置き ---------- */
html body .list-intro { text-align: center; max-width: var(--w-read); margin: 0 auto var(--sp-5); }
html body .list-intro__lead { font-size: var(--fs-lead); line-height: 1.8; color: var(--ink-2); }

/* ---------- 申し込みの箱 (.detail-cta / .tools-extension-cta → .c-cta と同じ見た目) ---------- */
html body .detail-cta { background: var(--surface-dark); border: 0; border-radius: var(--r-l); padding: 48px 40px; text-align: center; color: #fff; }
html body .detail-cta__title { font-size: var(--fs-h3); line-height: 1.5; color: #fff; margin: 0 0 var(--sp-1); }
html body .detail-cta__desc { font-size: var(--fs-sub); color: #b9c2d0; margin: 0 0 var(--sp-3); }
html body .tools-extension-cta { max-width: var(--w-main); background: var(--surface-dark); border: 0; border-radius: var(--r-l); padding: 40px; color: #fff; }
html body .tools-extension-cta::before { display: none; }
html body .tools-extension-cta__logo { background: #fff; color: var(--blue); border-radius: var(--r-m); }
html body .tools-extension-cta__body h2, html body .tools-extension-cta__body h3 { color: #fff; font-size: 20px; font-weight: 700; }
html body .tools-extension-cta__body p { color: #b9c2d0; }
html body .tools-extension-cta__action { min-height: 48px; border-radius: var(--r-m); font-weight: 700; }
@media (max-width: 640px) {
  html body .detail-cta, html body .tools-extension-cta { padding: 32px 20px; text-align: left; }
}

/* ---------- よくある質問 (アコーディオン) ---------- */
html body .faq-list { gap: 0; border-top: 1px solid var(--line); }
html body .faq-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
html body .faq-item summary { padding: 22px 48px 22px 0; font-size: var(--fs-body); font-weight: 700; }
html body .faq-item summary::after { right: 8px; color: var(--blue); }

/* ---------- 詳細ページの区画 ---------- */
html body .detail-section h2 { font-size: var(--fs-h3); line-height: 1.5; margin: 0 0 var(--sp-2); }
html body .detail-bullets li { font-size: var(--fs-body); line-height: 1.8; }

/* ---------- 手順 ---------- */
html body ol.steps li h3 { font-size: 18px; }

/* 絵文字は使わない (説明の指アイコンを消す) */
html body .feat-pickup__demo-hint::before { content: none !important; display: none !important; }

/* ---------- 使い方ガイド (manual) ---------- */
html body .manual-toc { max-width: calc(880px + var(--gutter) * 2); margin: -40px auto 0; padding: 0 var(--gutter); position: relative; z-index: 1; }
html body .manual-toc > ol, html body .manual-toc-title { background: #fff; }
html body .manual-toc { }
html body .manual-toc-title { font-family: inherit; font-size: var(--fs-note); font-weight: 700; letter-spacing: .12em; color: var(--blue); padding: 28px 32px 8px; border-radius: var(--r-l) var(--r-l) 0 0; margin: 0; border: 1px solid var(--line); border-bottom: 0; box-shadow: var(--sh-1); }
html body .manual-toc > ol { padding: 8px 32px 28px; border-radius: 0 0 var(--r-l) var(--r-l); border: 1px solid var(--line); border-top: 0; box-shadow: var(--sh-2); }
html body .manual-toc a { font-size: var(--fs-sub); font-weight: 700; color: var(--ink); }
html body .manual-toc a::before { font-family: Arial, Helvetica, sans-serif; color: var(--blue); }
html body .manual-section { max-width: calc(800px + var(--gutter) * 2); padding: 88px var(--gutter); border-top: 1px solid var(--line); }
html body .manual-section .section-num { font-family: inherit; font-weight: 700; color: var(--blue); }
html body .manual-section h2 { font-size: var(--fs-h2); line-height: 1.45; letter-spacing: 0; margin: 0 0 var(--sp-2); }
html body .manual-section .lead { font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.8; }
html body .manual-section h3 { font-size: 20px; font-weight: 700; margin: 40px 0 12px; }
html body .manual-section p, html body .manual-section ul, html body .manual-section ol { font-size: var(--fs-body); line-height: 1.9; }
@media (max-width: 640px) {
  html body .manual-toc { margin-top: -24px; }
  html body .manual-toc-title { padding: 20px 20px 4px; }
  html body .manual-toc > ol { padding: 4px 20px 20px; }
  html body .manual-section { padding: 64px var(--gutter); }
}

/* ---------- 旧 style.css の色の値を、新しい型の値に置き換える (暖色寄りの灰・別の青をなくす) ---------- */
:root {
  --bg-alt: #f5f9fe;
  --bg-code: #f1f4f8;
  --bg-dark: #0f172a;
  --text: #191919;
  --text-mid: #525252;
  --text-mute: #6b6b6b;
  --line: #dde3ea;
  --accent: #0067e0;
  --accent-bg: #e8f0fb;
}
html body main a.cta-btn[href*="chromewebstore.google.com"] { background: var(--warm); color: var(--ink); border-radius: var(--r-m); font-weight: 700; }
html body main a.cta-btn[href*="chromewebstore.google.com"]:hover { background: var(--warm-press); color: var(--ink); }
html body .steps > li::before, html body ol.steps li::before { background: var(--blue); }

/* ---------- 無料ツールの一覧 ---------- */
html body .tools-grid { gap: var(--sp-3); }
html body .tool-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); padding: 32px 28px; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
html body .tool-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--blue-line); text-decoration: none; }
html body .tool-card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; }
html body .tool-card h2 { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--ink); }
html body .tool-card p { font-size: var(--fs-sub); line-height: 1.8; color: var(--ink-2); }
html body .tool-card__meta { color: var(--blue); font-weight: 700; font-size: var(--fs-note); }

/* ---------- インストール直後のページ (welcome): 青紫のグラデーションをやめ、青 1 色に ---------- */
html body .welcome-hero { background: var(--blue) !important; }
html body .welcome-hero h1 { color: #fff; font-size: var(--fs-hero); }
html body .cta-primary { background: var(--blue) !important; box-shadow: none; border-radius: var(--r-m); }
html body .cta-primary[href*="chromewebstore.google.com"] { background: var(--warm) !important; color: var(--ink) !important; }
/* アンケートの満足度は、顔の絵文字の代わりに 1〜5 の数字の円で表す */
html body .q-scale__num { display: inline-block; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--blue-line); color: var(--blue); text-align: center; font: 700 15px/30px Arial, "Helvetica Neue", Helvetica, sans-serif; }
html body .q-scale__item input:checked + .q-scale__num { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- ブログ・更新履歴 (2026-11-06) ----------
 * 記事の見出しを下層ページと同じ帯 (.page-head) に入れる。長い題名が多いので帯の中は左寄せ・本文と同じ幅。
 * 一覧 (.blog-card / .news-table) はカードの角・枠・影を .c-card にそろえる。 */
html body .article-head { text-align: left; padding-top: 48px; }
html body .article-head__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
html body .article-head .article__back { color: var(--blue); font-size: 14px; font-weight: 600; margin-bottom: 20px; }
html body .article-head .article__meta { margin-bottom: 16px; font-family: inherit; color: var(--ink-2); }
html body .article-head .article__date { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: var(--ink-2); }
html body .article-head .article__version { background: #fff; border: 1px solid var(--blue-line); }
html body .article-head .tag { background: #fff; }
html body .article-head h1 { font-size: 32px !important; line-height: 1.45; font-weight: 700; letter-spacing: 0; margin: 0; }
html body .article-head h1::after { margin: 20px 0 0; }
html body .article-section { padding-top: 24px; }
html body .article__body { font-size: 16px; line-height: 1.9; }
html body .article__body h2 { font-size: 24px; font-weight: 700; line-height: 1.5; letter-spacing: 0; margin: 56px 0 20px; padding: 0 0 0 16px; border-left: 4px solid var(--blue); }
html body .article__body h3 { font-size: 19px; font-weight: 700; line-height: 1.5; margin: 36px 0 12px; }
html body .article__body blockquote { background: var(--surface-alt); border-left-color: var(--blue); }
html body .article__body table { border: 1px solid var(--line); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
html body .article__body th { background: var(--blue-tint); color: var(--ink); }
html body .article__body tr:last-child td { border-bottom: 0; }
html body .article__hero img { border-radius: 12px; }
html body .article__cta, html body .article__cta-start, html body .article__follow { border-radius: 16px !important; }
html body .article__nav { border-top: 1px solid var(--line); }
html body .article__nav a { color: var(--ink); font-weight: 600; }
html body .article__nav a:hover { color: var(--blue); }
@media (max-width: 700px) {
  html body .article-head { padding-top: 32px; }
  html body .article-head h1 { font-size: 24px !important; }
  html body .article__body h2 { font-size: 20px; margin-top: 44px; }
  html body .article__body h3 { font-size: 17px; }
}
html body .blog-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s; }
html body .blog-card:hover { border-color: var(--blue-line); box-shadow: 0 12px 32px rgba(15, 23, 42, .08); transform: translateY(-2px); }
html body .blog-card__title { font-weight: 700; }
html body .news-table { border: 1px solid var(--line); border-radius: 16px; }
html body .news-row__title { font-weight: 600; }
html body .news-row__action { color: var(--blue); font-weight: 600; }
html body .news-table-section > .wrap, html body .blog-list-section > .wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
html body .news-table-section, html body .blog-list-section { padding-left: 0; padding-right: 0; }
/* 帯の中のひとこと (ネクストエンジンの「見出し＋約束の一文」の形) 2026-11-06 */
html body .page-head .c-band__catch { font-size: var(--fs-lead); font-weight: 700; color: var(--ink); line-height: 1.6; margin: 20px auto 0; }
html body .page-head .c-band__catch + p, .c-band .c-band__catch + p { margin-top: 12px; }
@media (max-width: 700px) { html body .page-head .c-band__catch { font-size: 16px; margin-left: 0; } }