/* KAKURU v2 デザインシステム (2026-07-30 ダークモード対応・セマンティック変数化)
   トーン: 価格比較サービスの信頼感。ブランドカラー=鮮やかな赤 #F50000(確定・2026-07-30)。
   赤の面積は広げない(CTA/リンク/強調のみに使用・地色には使わない)。
   カード型UI・角丸8px・薄い影。system-uiフォントスタック(外部フォント読込なし)。
   絵文字不使用・アイコンはインラインSVG(stroke=currentColor)。 [恒久ルール]

   ダークモード: prefers-color-scheme追従・JS不使用(OS設定のみ)。
   変数は全てセマンティック名(--bg/--surface/--text/--text-muted/--border/--accent系)で
   統一し、ライト/ダークの値だけを@mediaで差し替える。個別ルールに色を直書きしない。 */

:root {
  /* ブランド: メインカラー=#F50000(2026-07-30確定)。ダーク面での可読性のため
     --accent-on-dark(フッタ等・常時ダーク面用)は別に持つ。 */
  --accent: #f50000;
  --accent-hover: #c40000;
  /* 赤入れ2026-07-30「文字色赤はやりすぎ」: 本文リンクは落ち着いたリンク青。赤はCTA/バッジ/強調のみ */
  --link: #0b6bcb;
  --accent-soft: #fff1f0;
  --accent-soft-strong: #ffdad6;
  --accent-on-dark: #c40000;

  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --text: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-soft: #f1f5f9;
  --border-strong: #cbd5e1;

  --neutral-strong: #334155;
  --neutral-strongest: #0f172a;

  --mall-rakuten-bg: #ffdad6;
  --mall-rakuten-text: #c40000;
  --mall-yahoo-bg: #fce7f3;
  --mall-yahoo-text: #a21caf;
  --mall-amazon-bg: #ffedd5;
  --mall-amazon-text: #c2410c;

  --badge-bg: #f1f5f9;
  --badge-text: #64748b;
  --badge-ad-bg: #fff1f0;
  --badge-ad-text: #c40000;

  --footer-bg: #0f172a;
  --footer-text: #94a3b8;
  --footer-heading: #cbd5e1;
  --footer-border: rgba(255, 255, 255, 0.1);

  /* ヘッダ(Amazon型レイアウト#1・2026-07-30本人指定「ほぼほぼAmazonでいい」)。
     常時ダーク面(フッタと同じ考え方)。オレンジ/ネイビーは使わずニュートラルな濃色にする。 */
  --header-bg: #1f2124;
  --header-subnav-bg: #2d3038;
  --header-text: #f1f1f1;
  --header-text-muted: #c7c9cc;
  --header-border: rgba(255, 255, 255, 0.08);

  --radius: 8px;
  --radius-lg: 12px;
  /* カードの質感(2026-07-30高級化#3): 2層シャドウ+hover時のlift用の強化版を用意 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 10px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 10px 22px rgba(15, 23, 42, 0.1);
  --shadow-hero: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.12);
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.02);

  /* system-ui先頭だとWindowsの日本語が游ゴシックUI(字間が詰まる・細い)になり可読性が落ちる
     (赤入れ2026-08-01「読みにくい」)。日本語はBIZ UDPゴシック(UD設計)→メイリオ優先。 */
  --font: "Segoe UI", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Noto Sans JP", Meiryo, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 赤は暗背景では強すぎるため明度を上げる(彩度は保つ・面積は増やさない) */
    --accent: #ff4d42;
    --accent-hover: #ff6a61;
    --accent-soft: rgba(255, 77, 66, 0.16);
    --accent-soft-strong: rgba(255, 77, 66, 0.26);
    --accent-on-dark: #ff4d42;
    --link: #7ab3f0;

    --bg: #0b1220;
    --surface: #151d2b;
    --surface-alt: #101828;
    --text: #e5e7eb;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border: #263241;
    --border-soft: #1c2636;
    --border-strong: #334155;

    --neutral-strong: #47556a;
    --neutral-strongest: #1e293b;

    --mall-rakuten-bg: rgba(255, 77, 66, 0.18);
    --mall-rakuten-text: #ff9089;
    --mall-yahoo-bg: rgba(217, 70, 239, 0.18);
    --mall-yahoo-text: #e879f9;
    --mall-amazon-bg: rgba(249, 115, 22, 0.18);
    --mall-amazon-text: #fdba74;

    --badge-bg: #1c2636;
    --badge-text: #94a3b8;
    --badge-ad-bg: rgba(255, 77, 66, 0.16);
    --badge-ad-text: #ff9089;

    --footer-bg: #060a12;
    --footer-text: #8291a6;
    --footer-heading: #aab4c2;
    --footer-border: rgba(255, 255, 255, 0.08);

    /* ヘッダはページ本体(--bg)より明るい濃色にして明度差を確保する(高級化#注記) */
    --header-bg: #262b35;
    --header-subnav-bg: #313742;
    --header-text: #f1f1f1;
    --header-text-muted: #b9bec7;
    --header-border: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-hero: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 36px rgba(0, 0, 0, 0.45);
    /* ダークでは境界光(inset highlight)でカード上端に立体感を持たせる */
    --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  }
}

* { box-sizing: border-box; }

/* 項目8: 767px以下すべてで横スクロール発生ゼロにするための安全ネット
   (position:stickyの祖先には影響しない=body/htmlに設定するだけなので問題なし)。 */
html, body { margin: 0; padding: 0; overflow-x: hidden; overflow-x: clip; } /* clip非対応の旧ブラウザはhiddenへフォールバック */ /* hidden→clip: stickyヘッダを壊さず横はみ出しだけ防ぐ(監査D7) */

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* リンク: 下線は下線アニメーションで表現(text-decorationは使わない・高級化#7)。
   ボタン/バッジ/カード状の要素は個別クラスでこのレイヤーを無効化する(下記)。 */
a {
  color: var(--link);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 180ms ease;
}
a:hover { background-size: 100% 1.5px; }

/* フォーカスリングの統一(高級化#7: マイクロディテール) */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* タイポグラフィの律動(高級化#1): 見出し階層をサイズ・字間・weightで体系化 */
h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.4em; letter-spacing: -0.015em; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 2em 0 0.75em; color: var(--text); letter-spacing: -0.005em; }
h3 { font-weight: 700; letter-spacing: -0.005em; }

/* 価格の主役化(高級化#1・#6): 数字はtabular-nums+大きく、単位は小さく上付き風。
   yen_html()/unit_price_html()が出力する構造にのみ適用する。 */
.price-num, .unit-price {
  font-variant-numeric: tabular-nums;
}
.price-num .num {
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.price-num .unit {
  font-size: 0.62em;
  font-weight: 600;
  margin-left: 0.15em;
  color: var(--text-muted);
  vertical-align: 0.35em;
}
.unit-price {
  font-size: 0.85em;
  color: var(--text-muted);
}
.unit-price .num { font-weight: 700; color: var(--text-secondary); }

/* ボタン/pill/カード状の要素はリンク下線アニメーションを無効化(見た目が壊れるため) */
.chip, .offer-cta, .top-card, .product-card, .cat-entry-name, .header-subnav a,
.category-list li a, .logo, .site-footer a, .mall-badge, .badge, .footer-top-link {
  background-image: none;
}

/* ===== ヘッダー(Amazon型レイアウト#1・2026-07-30本人指定「ほぼほぼAmazonでいい」) =====
   丸パクリ禁止の規律: ロゴ・Amazon固有配色(オレンジ/ネイビー)・スマイル矢印等は使わない。
   借りるのは「濃色ヘッダ+大きな検索箱+サブナビ」という構造とUXパターンのみで、
   色はKAKURU赤+ニュートラルな濃色に置換する。 */

/* ファーストビュー最上部の広告明瞭性の帯(§1.2・独立した薄い帯として維持) */
.top-strip {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-soft);
}
.top-strip .wrap {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 6px 20px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-top {
  background: var(--header-bg);
}
.header-top-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
}
.logo {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--header-text);
  flex-shrink: 0;
}
.logo span { color: var(--accent); }

/* 検索箱がヘッダの主役(Amazon型#1): 白地・角丸小さめ・右端に赤ボタン一体型 */
.header-search {
  flex: 1;
  display: flex;
  max-width: 640px;
  margin: 0 auto;
}
.header-search input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 4px 0 0 4px;
  padding: 10px 14px;
  font-size: 0.92rem;
  font-family: inherit;
  background: #ffffff;
  color: #111827;
}
.header-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.header-search button {
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 0 18px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.header-search button:hover { background: var(--accent-hover); }

/* サブナビ(旧global-cat-nav・Amazon型#1でヘッダ直下の濃グレー帯へ統合) */
.header-subnav {
  background: var(--header-subnav-bg);
  border-bottom: 1px solid var(--header-border);
}
.header-subnav .wrap {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 8px 20px;
  -webkit-overflow-scrolling: touch;
}
.header-subnav a {
  color: var(--header-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  background-image: none;
  transition: color 150ms ease, border-color 150ms ease;
}
.header-subnav a:hover { color: #fff; text-decoration: none; }
.header-subnav a:first-child {
  padding-right: 14px;
  border-right: 1px solid var(--header-border);
}
/* ヘッダの完成度(高級化#8): 現在ページのカテゴリに赤の下線でアクティブ表示 */
.header-subnav a.is-active {
  color: #fff;
  border-bottom-color: var(--accent);
}

/* パンくず(Amazon型レイアウト#5): 全下層ページ上部の細い導線 */
.breadcrumbs {
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-alt);
}
.breadcrumbs .wrap {
  padding: 8px 20px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.breadcrumbs a { color: var(--text-muted); background-image: none; }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumbs .sep { margin: 0 6px; color: var(--border-strong); }
.breadcrumbs .current { color: var(--text-secondary); }

@media (max-width: 640px) {
  .header-search { max-width: none; }
  .header-top-inner { gap: 14px; }
}

/* ===== モバイルUX本格作り込み(2026-07-30・playbook13条「モバイルファースト確定」)
   参照はAmazonのスマホWeb。基準390px・~480pxまでを主対象、~767pxまでのレイアウト崩れも確認済み。 */
@media (max-width: 640px) {
  /* 項目1: ヘッダを2段に。1段目=ロゴのみ、2段目=検索箱を独立フル幅・44px+で主役に */
  .header-top-inner { flex-wrap: wrap; row-gap: 10px; }
  .header-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
  }
  .header-search input, .header-search button {
    min-height: 44px;
    font-size: 16px; /* 項目7: iOSズーム防止(16px未満だとフォーカス時に自動ズームする) */
  }

  /* サブナビ: 横スクロールチップ+スナップ(項目1) */
  .header-subnav .wrap {
    gap: 8px;
    padding: 8px 12px;
    scroll-snap-type: x proximity;
  }
  .header-subnav a {
    scroll-snap-align: start;
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
  }
  .header-subnav a:first-child { border-right: none; padding-right: 14px; }
  .header-subnav a.is-active { background: var(--accent); color: #fff; }

  /* 広告表記(項目1): 折りたたまず1行極小のまま維持(法務・変更禁止要件) */
  .top-strip .wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* スマホでのタップ領域確保(高級化#9・項目5・390px想定): 主要な操作要素を44px以上に+即時フィードバック */
@media (max-width: 480px) {
  .hero-search input, .hero-search button { min-height: 48px; font-size: 16px; }
  .offer-cta { min-height: 44px; padding: 10px 16px; }
  .chip { min-height: 32px; padding: 8px 14px; }
  .category-list li a { min-height: 40px; display: inline-flex; align-items: center; }
  .cat-entry-name, .cat-entry-links a { min-height: 32px; }

  /* 項目5: タップ気持ちよさ。:activeで即時フィードバック(背景変化+scale(0.98)) */
  .offer-cta:active, .chip:active, .category-list li a:active,
  .header-subnav a:active, .product-card:active, .top-card:active,
  .price-card:active, .list-row:active, .cat-entry:active {
    transform: scale(0.98);
    transition: transform 80ms ease;
  }
  .offer-cta:active { background: var(--accent-hover); }
}

/* ===== メイン領域 ===== */
main { min-height: 60vh; }
.page-body { padding: 24px 0 48px; }

/* ===== トップ: ヒーロー(赤入れ#2で高さ2/3に圧縮) ===== */
.hero {
  /* ヒーローの格上げ(高級化#4): グラデ+CSSのみのドット格子パターンを重ねる(画像なし) */
  background-image:
    radial-gradient(circle, var(--border) 1px, transparent 1px),
    linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 100%);
  background-size: 22px 22px, 100% 100%;
  background-position: -11px -11px, 0 0;
  padding: 40px 0 32px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.hero h1 { font-size: 1.7rem; margin: 0 0 6px; }
.hero .tagline { color: var(--text-secondary); font-size: 0.98rem; margin: 0 0 18px; }

.hero-search {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* ヒーローの格上げ(高級化#4): 検索箱を浮かせる強めのシャドウ */
  box-shadow: var(--shadow-hero), var(--inset-highlight);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.hero-search input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 16px 18px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.hero-search input:focus { outline: none; }
.hero-search button {
  border: none;
  background: var(--accent);
  color: #fff;
  padding: 0 26px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}
.hero-search button:hover { background: var(--accent-hover); }

.example-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* ===== セクション共通 ===== */
/* Amazon型#2: 情報密度高めに詰める(セクション間隔を短縮) */
.section { padding: 28px 0; }
.section-title {
  font-size: 1.2rem;
  margin: 0 0 18px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== カテゴリナビ(価格.com風グループ) ===== */
.cat-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.cat-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-card), var(--inset-highlight);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.cat-group:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover), var(--inset-highlight); }
.cat-group h3 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cat-group ul { list-style: none; margin: 0; padding: 0; }
.cat-group li + li { margin-top: 4px; }

/* カテゴリカード1枚から複数の行き先(商品一覧/ランキング/商品数)へ飛べる形(赤入れ#2) */
.cat-entry {
  padding: 10px 10px;
  border-radius: 6px;
}
.cat-entry:hover { background: var(--accent-soft); }
.cat-entry-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 4px;
}
.cat-entry-name:hover { color: var(--accent-hover); text-decoration: none; }
.cat-entry-name .icon { color: var(--border-strong); flex-shrink: 0; }
.cat-entry:hover .cat-entry-name .icon { color: var(--accent); }
.cat-entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.78rem;
}
.cat-entry-links a { color: var(--link); }
.cat-entry-links .count { color: var(--text-muted); }

/* ===== 実績バー ===== */
.stats-bar {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card), var(--inset-highlight);
}
.stat { text-align: center; }
.stat b {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hover);
  line-height: 1.2;
}
.stat span { font-size: 0.8rem; color: var(--text-muted); }

/* ===== カテゴリ別トップカード / ランキングプレビュー ===== */
.cat-top-block + .cat-top-block { margin-top: 28px; }
.cat-top-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.cat-top-header h3 { margin: 0; font-size: 1.05rem; }
.cat-top-header a { font-size: 0.85rem; }

/* 順位付き/新着リスト共通の行コンポーネント(価格.com風ランキングプレビュー・新着リスト用) */
.list-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 16px;
  box-shadow: var(--shadow-card), var(--inset-highlight);
}
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: background 150ms ease;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--accent-soft); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
/* ランキング演出(高級化#5): 1位の行はわずかに強調する */
.list-row.is-rank1 { background: var(--accent-soft); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.list-row .name {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: none;
}
.list-row .name:hover { color: var(--accent-hover); }
.list-row .price {
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.list-row .meta-time {
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .list-row .meta-time { display: none; }
}

/* ランキング順位バッジ: 1-3位は金銀銅の小さな円形メダル風(高級化#5・CSSのみ) */
.rank-badge, .rank-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--badge-bg);
  color: var(--text-muted);
}
.rank-badge.rank-gold {
  background: linear-gradient(135deg, #f6dc8a, #d4af37);
  color: #4a3800;
}
.rank-badge.rank-silver {
  background: linear-gradient(135deg, #eef0f2, #b9c0c9);
  color: #33383f;
}
.rank-badge.rank-bronze {
  background: linear-gradient(135deg, #e8b287, #b06a3a);
  color: #3a2210;
}

.top-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) {
  .top-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .top-cards-grid { grid-template-columns: 1fr; }
}
.top-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card), var(--inset-highlight);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.top-card:hover {
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover), var(--inset-highlight);
}
.top-card .top-card-body { flex: 1; min-width: 0; }
.top-card .name {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.top-card .price { font-size: 1.1rem; margin-bottom: 6px; }

/* ===== 商品カード(Amazon型レイアウト#3): 画像を大きく上に(正方形・白地)+
   商品名(2行クランプ)→価格→モール/送料の縦積み。情報密度高めのグリッドで敷き詰める。 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  color: var(--text);
  box-shadow: var(--shadow-card), var(--inset-highlight);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  position: relative;
}
.product-card:hover {
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover), var(--inset-highlight);
}
.product-card .thumb {
  /* product_thumb()の呼び出し元は固定px(インラインstyle)を渡すため、
     カード内では!importantでカード幅いっぱいの正方形に上書きする。
     imgのwidth/height属性はレイアウトシフト防止用の比率ヒントとして機能し続ける。 */
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
}
.product-card .thumb img { width: 100% !important; height: 100% !important; }
.product-card .rank-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.product-card .name {
  font-size: 0.84rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.product-card .price { font-size: 1.05rem; }
.product-card .card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}

/* ===== モールバッジ(色分けpill・ダーク側も個別定義) ===== */
/* QC 2026-07-30: バッジ類はflexコンテナ内で潰れて1文字ずつ縦割れする事故があったため、
   このクラス自体にflex-shrink:0+white-space:nowrapを常設する(place依存にしない)。 */
.mall-badge {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.mall-badge.rakuten { background: transparent; color: #e11d48; border: 1px solid currentColor; }
.mall-badge.yahoo   { background: var(--mall-yahoo-bg); color: var(--mall-yahoo-text); }
.mall-badge.amazon  { background: var(--mall-amazon-bg); color: var(--mall-amazon-text); }

/* ===== 鮮度/最安バッジ ===== */
.badge {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
}
.badge.ad { background: var(--badge-ad-bg); color: var(--badge-ad-text); }
.badge.reference { background: var(--badge-bg); color: var(--badge-text); }

.fetched-at { font-size: 0.82rem; color: var(--text-muted); }
.updated-count { color: var(--text-muted); font-size: 0.9rem; }

/* ===== カテゴリチップ一覧(汎用・検索0件時等) ===== */
.category-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 10px 0; }
.category-list li a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.88rem;
  color: var(--text);
}
.category-list li a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ===== テーブル(ゼブラ・線を減らす) ===== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.price-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
}
table.price-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 10px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
table.price-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
table.price-table tbody tr:nth-child(even) { background: var(--surface-alt); }
table.price-table tbody tr:hover { background: var(--accent-soft); }

/* テーブルをカードで包む(枠+影を1回だけ) */
.table-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card), var(--inset-highlight);
}
.table-card .table-scroll { margin: 0; }

/* ===== 項目3: 一覧系(c/r/search)はスマホで横スクロールをやめ、1行=1カードの縦リストに変換。
   c.php/r.php/search.phpの<td>にrow-rank/row-name/row-price/row-metaのクラスを付けてあるので、
   ここではCSSだけでテーブル→カード化する(HTML構造・JSは変更しない)。 */
@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  table.price-table { min-width: 0; }
  table.price-table thead { display: none; }
  table.price-table, table.price-table tbody { display: block; width: 100%; }
  table.price-table tr {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 12px;
    row-gap: 2px;
    padding: 12px;
  }
  table.price-table td {
    display: block;
    border: none !important;
    padding: 0 !important;
  }
  table.price-table td.row-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
  }
  table.price-table td.thumb-cell { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  table.price-table td.row-name {
    grid-column: 2;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
  }
  table.price-table td.row-name a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  table.price-table td.row-price {
    grid-column: 2;
    text-align: right;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  table.price-table td.row-meta {
    grid-column: 2;
    font-size: 0.76rem;
    color: var(--text-muted);
  }
  /* 項目5: タップ領域は行全体に。row-nameのリンクの::afterをtr全体へストレッチする。
     aはposition:staticのままにする(::afterの絶対配置は祖先のtr(position:relative)基準になる)。 */
  table.price-table td.row-action { display: none; }
  table.price-table td.row-name a::after { content: ""; position: absolute; inset: 0; }
}

.filter-bar {
  margin: 10px 0 16px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.filter-bar label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ===== 送客CTA ===== */
.offer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}
.offer-cta:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.offer-cta.amazon { background: var(--neutral-strong); }
.offer-cta.amazon:hover { background: var(--neutral-strongest); }
.offer-cta .badge.ad { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ===== p.php: 商品ページ(Amazon型レイアウト#4) =====
   左に大きめ商品画像、右に商品情報+「購入ボックス」風の価格ブロック。 */
.product-hero {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 8px;
}
@media (max-width: 720px) {
  .product-hero { grid-template-columns: 1fr; gap: 16px; }
}
.product-hero-image {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-hero-image .thumb { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; height: auto; }
.product-hero-info { min-width: 0; }

/* 購入ボックス風: 最安価格を大きく+取得日時+CTAボタン縦積み(Amazon型#4) */
.buybox {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
  box-shadow: var(--shadow-card), var(--inset-highlight);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.buybox .buybox-price { font-size: 1.8rem; }
.buybox .buybox-price .price-num .num { font-size: 1em; }
.buybox .buybox-meta { font-size: 0.82rem; color: var(--text-muted); }
.buybox .offer-cta {
  justify-content: center;
  padding: 12px 16px;
  font-size: 0.95rem;
  width: 100%;
}

/* ===== スマホUX作り込み#2: 画面下部固定のsticky CTAバー(商品ページ) =====
   デスクトップでは非表示。has-sticky-ctaが付いたページ本体には下部にバー分の余白を確保する。 */
.sticky-cta { display: none; }
@media (max-width: 640px) {
  .page-body.has-sticky-cta { padding-bottom: 84px; }
  .sticky-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.1);
  }
  .sticky-cta-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sticky-cta-price { font-size: 1.15rem; }
  .sticky-cta .offer-cta { flex-shrink: 0; padding: 10px 20px; min-height: 44px; }
}

/* ===== p.php: 価格比較カード ===== */
.price-cards { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 20px; }
.price-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-card), var(--inset-highlight);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover), var(--inset-highlight); }
.price-card.best { border-color: var(--accent); background: var(--accent-soft); }
.price-card .price-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-card .amount { font-size: 1.35rem; font-weight: 700; color: var(--text); }
.price-card.best .amount { font-size: 1.7rem; color: var(--accent-hover); }
.price-card .meta { font-size: 0.8rem; color: var(--text-muted); }
.price-card .cta-col { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* QC 2026-07-30(sp390px): .price-cardが1行flexのままだとthumb+cta-colの幅に押されて
   本文列が潰れ、バッジ/価格が1文字ずつ縦に折り返す事故があったため、640px以下では
   grid(サムネ列+本文列)+CTAを別行のフルレイアウトに再定義する。文字の縦割れが起きる
   「幅ゼロ近くまで潰れる」計算を全廃するのが狙い。 */
@media (max-width: 640px) {
  .price-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 10px;
    align-items: start;
  }
  .price-card .thumb { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
  .price-card .price-card-body {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .price-card .price-main {
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
  }
  /* バッジ・価格は潰れ禁止(flex-shrink:0)+改行禁止。文字の縦割れはここが原因だった */
  .price-card .price-main .mall-badge,
  .price-card .price-main .badge,
  .price-card .amount,
  .price-card .price-num {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .price-card .meta {
    white-space: normal;
    font-size: 0.74rem;
  }
  .price-card .cta-col {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .price-card .cta-col .offer-cta { width: 100%; justify-content: center; }

  /* buybox内CTAとsticky CTAの二重表示を解消: spではsticky側に一本化し、buyboxは価格のみ残す */
  .buybox .offer-cta { display: none; }
}

.product-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 14px 0 24px; }
.product-meta dt { color: var(--text-muted); font-size: 0.82rem; }
.product-meta dd { margin: 0; font-size: 0.94rem; color: var(--text); }

/* ===== 空状態 ===== */
.empty-state {
  padding: 32px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  color: var(--text-secondary);
}

/* ===== 法務ページ ===== */
.legal-body h2 { margin-top: 1.8em; font-size: 1.05rem; }
.legal-body p { color: var(--text-secondary); }

/* ===== フッター(常時ダーク面。ページ側のライト/ダーク切替とは独立した固定配色) ===== */

/* Amazon型レイアウト#7: フッタ最上部に「ページトップへ戻る」バーを追加 */
.footer-top-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--neutral-strong);
  color: #fff;
  padding: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.footer-top-link:hover { background: var(--neutral-strongest); text-decoration: none; }

.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  margin-top: 40px;
  padding: 0 0 32px;
  font-size: 0.85rem;
}
.site-footer .wrap { padding-top: 32px; }
.site-footer a { color: #9dc3ec; }  /* 常時ダーク面: リンクは明るい青(赤入れ2026-07-30「文字色赤はやりすぎ」) */
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.site-footer p { color: var(--footer-text); margin: 6px 0; }
.site-footer .yahoo-credit a { color: var(--footer-text); text-decoration: underline; }

/* フッタのサイトマップ化(赤入れ#2: フッタからも全面へ飛べるように) */
.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--footer-border);
}
.footer-col h4 {
  margin: 0 0 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--footer-heading);
  font-weight: 700;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-col a { font-size: 0.85rem; }

/* ===== SVGアイコン(絵文字不使用・stroke=currentColor) ===== */
.icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.hero-search .icon, .header-search .icon { width: 1.2em; height: 1.2em; }

/* カテゴリカードのピクトグラム(商品写真ではなく線画・外部リクエスト無し) */
.cat-pictogram { width: 1.3em; height: 1.3em; color: var(--accent); flex-shrink: 0; }

/* ===== 商品サムネイル(赤入れ#4: 画像追加・速度厳守) =====
   width/height指定はimg要素側にも必須(レイアウトシフト0)。.thumbはその外枠。
   ダークモード注記: API由来の商品画像は白背景前提のため、ダーク時も無理に暗くせず
   常に白タイルとして見せる(.thumb/.thumb imgの背景は固定値の#fffで、テーマ変数を使わない)。 */
.thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}
.thumb-placeholder { background: #f1f5f9; }
.thumb-placeholder .icon { width: 55%; height: 55%; color: #94a3b8; }

/* リスト行(ランキングプレビュー・新着)にサムネイルを追加するレイアウト */
.list-row .thumb { width: 48px; height: 48px; }
.list-row .name { display: flex; align-items: center; }

/* トップカード/価格カードは画像左+テキスト右のレイアウトに */
.top-card .thumb { width: 64px; height: 64px; }
.top-card .name { margin-bottom: 6px; }

.price-card .thumb { width: 72px; height: 72px; }
.price-card .price-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* 検索結果・カテゴリ/ランキング表のサムネイルは小さめ */
table.price-table .thumb { width: 48px; height: 48px; }
table.price-table td.thumb-cell { width: 56px; }
.product-row-name { display: flex; align-items: center; gap: 10px; }

/* ===== モバイルUX本格作り込み・続き(項目4・6): トップページの圧縮とタイポ/余白の密度 ===== */
@media (max-width: 640px) {
  /* 項目6: 左右パディングを12-16pxに統一、本文14px基準・行間1.5 */
  .wrap { padding: 0 14px; }
  body { font-size: 14px; line-height: 1.5; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.02rem; margin: 1.4em 0 0.6em; }
  .section { padding: 20px 0; }
  .page-body { padding: 16px 0 40px; }

  /* 価格は17-19px基準(price-num側は相対em指定のため、コンテナ側の基準サイズをここで統一) */
  .price-card .amount, .buybox-price, .top-card .price, .product-card .price { font-size: 1.05rem; }
  .list-row .price { font-size: 1rem; }
}

@media (max-width: 480px) {
  /* 項目4: ヒーローを更にコンパクトに(検索箱+チップのみが主役・タグラインは1行に収める) */
  .hero { padding: 20px 0 18px; }
  .hero h1 { font-size: 1.3rem; margin: 0 0 4px; }
  .hero .tagline {
    font-size: 0.85rem;
    margin: 0 0 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .example-chips { margin-top: 12px; }

  /* 項目4: カテゴリカードは2列固定 */
  .cat-groups { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-group { padding: 12px; }
  .cat-group h3 { font-size: 0.72rem; margin-bottom: 6px; }
  .cat-entry { padding: 8px 6px; }
  .cat-entry-name { font-size: 0.86rem; }
  .cat-entry-links { font-size: 0.7rem; gap: 2px 8px; }

  /* 項目4: ランキングカードは横スクロールカルーセル(scroll-snap・1.5枚見せ) */
  .product-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .product-grid .product-card {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }

  .stats-bar { padding: 16px; gap: 20px; }
  .stat b { font-size: 1.3rem; }
}


/* ===== sp価格カード崩れの根治 (QC 2026-07-30: 本文カラム圧死による1文字縦割れ) ===== */
.price-card-body { min-width: 0; }
@media (max-width: 640px) {
  .price-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "thumb body" "cta cta";
    align-items: start;
    gap: 10px 12px;
    padding: 12px;
  }
  .price-card > .thumb { grid-area: thumb; width: 56px !important; height: 56px !important; }
  .price-card .price-card-body { grid-area: body; }
  .price-card .cta-col { grid-area: cta; }
  .price-card .offer-cta { width: 100%; justify-content: center; text-align: center; }
  .price-card .price-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
  .price-card .mall-badge, .price-card .badge { flex-shrink: 0; white-space: nowrap; }
  .price-card .amount { white-space: nowrap; }
  .price-card .meta { white-space: normal; }
}

/* ===== 商品ページ回遊: 近い価格帯の関連商品 (2026-07-30 量産型の型づくり) ===== */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 12px 0 8px;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease;
}
.related-card:hover { border-color: var(--border-strong); text-decoration: none; }
.related-card .thumb { align-self: center; }
.related-name {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.related-price { margin-top: auto; font-weight: 700; }
.related-price .price-num .num { font-size: 1.05rem; }
.related-price-note { font-size: .72rem; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
.related-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
@media (max-width: 640px) {
  /* spは横スクロールの棚(トップのproduct-gridと同じ操作感) */
  .related-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .related-grid .related-card { flex: 0 0 46%; scroll-snap-align: start; }
}
/* buybox内の単価は価格の右に控えめに */
.buybox-price .unit-price { margin-left: 8px; font-size: .85rem; }

/* ===== 赤入れ2026-07-30「カードをクリックしたら飛ぶように」: stretched-link方式(JS不使用) ===== */
/* 価格カードはカード全面がタップ領域。内側のCTAアンカーの::afterをカード全体に広げる。 */
.price-card { position: relative; }
.price-card .offer-cta::after { content: ""; position: absolute; inset: 0; }
.price-card:hover { border-color: var(--border-strong); }
.price-card.best:hover { border-color: var(--accent-hover); }
.price-card:active { transform: scale(0.995); }
/* 店舗名(2026-07-30赤入れ後追加): 同一モール複数店舗の区別。metaの中で店舗だけ視認性を上げる */
.price-card .meta .shop-name { color: var(--text-secondary); font-weight: 600; }

/* ===== 記事ページ a.php (my-best風ランキング型 v4 2026-08-01 監査FINAL反映) =====
   色の役割分担: 赤=価格・CTA・最安バッジのみ / 青(--link)=クリックできるテキスト /
   中性色=説明ボックス。「最安」の語はfreshガード内のみ(表示はPHP側)。 */
.article-body { max-width: 860px; }
.article-body h1 { font-size: 1.45rem; line-height: 1.45; margin: 6px 0 4px; }
.article-date { color: var(--text-muted); font-size: .82rem; margin: 0 0 2px; }
.article-byline { color: var(--text-muted); font-size: .78rem; margin: 0 0 12px; }
.article-byline a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.article-body p { font-size: 1.05rem; line-height: 2.0; letter-spacing: .025em; margin: 14px 0; }
.article-lead { color: var(--text-secondary); }
.article-body h2 { font-size: 1.22rem; margin: 32px 0 12px; padding: 6px 0 6px 12px; border-left: 4px solid var(--accent); background: linear-gradient(90deg, var(--surface-alt), transparent 70%); border-radius: 0 8px 8px 0; scroll-margin-top: 160px; }
.faq-q { font-size: 1rem; margin: 18px 0 4px; }
.ranking-note { color: var(--text-secondary); font-size: .86rem; line-height: 1.9; letter-spacing: .02em; margin: 0 0 14px; }
.article-body h3.article-h3 { font-size: 1.02rem; margin: 20px 0 6px; padding-left: 10px; border-left: 3px solid var(--border-strong); scroll-margin-top: 160px; }

/* SVGシェブロン(記号矢印の置換=D28) */
.chev { width: 14px; height: 14px; vertical-align: -2px; }

/* クリックできるテキストは常にリンク色+下線(押せる場所を迷わせない) */
.rank-name a, .compare-name a, .unit-bar-name, .top3-more, .compare-card-name, .trial-name, .official-link {
  color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.rank-name a:hover, .compare-name a:hover, .unit-bar-name:hover { text-decoration-thickness: 2px; }

/* 押しボタン2種: 塗り(offer-cta=送客)と枠線(サイト内詳細) */
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid var(--link); color: var(--link); font-weight: 700; font-size: .88rem; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
.btn-outline:hover { background: var(--link); color: #fff; text-decoration: none; }
.article-body .offer-cta { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.article-body .offer-cta:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .26); }

/* FV即答ボックス(監査D1/C5) */
.quick-answer { border: 2px solid var(--accent-soft-strong); background: var(--surface); border-radius: 12px; margin: 12px 0 14px; overflow: hidden; }
.quick-answer-title { background: var(--accent); color: #fff; font-weight: 800; font-size: .85rem; padding: 6px 12px; }
.quick-answer-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border-soft); color: inherit; }
.quick-answer-row:first-of-type { border-top: none; }
.quick-answer-row:hover { background: var(--surface-alt); text-decoration: none; }
.qa-label { flex: none; background: var(--accent-soft); color: var(--accent-hover); font-weight: 700; font-size: .78rem; padding: 3px 10px; border-radius: 999px; }
.qa-name { font-weight: 700; font-size: .92rem; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.qa-price { margin-left: auto; font-size: .82rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 目次(監査D3) */
.article-toc { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); padding: 10px 14px; margin: 12px 0; font-size: .88rem; }
.article-toc .toc-title { font-weight: 700; font-size: .8rem; color: var(--text-muted); margin-bottom: 4px; }
.article-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.article-toc li { margin: 2px 0; line-height: 1.7; break-inside: avoid; }
.article-toc a { color: var(--link); }
@media (max-width: 640px) { .article-toc ol { columns: 1; } }

/* 順位バッジ */
.rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 5px 10px; border-radius: 8px; font-weight: 800; font-size: .95rem; color: #fff; background: var(--neutral-strong); flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); }
.rank-badge.rank-1 { background: linear-gradient(180deg, #d9ad2b, #b8901f); }
.rank-badge.rank-2 { background: linear-gradient(180deg, #93a2b2, #75879b); }
.rank-badge.rank-3 { background: linear-gradient(180deg, #b47a44, #96602f); }

/* 保湿グレードチップ(色に頼らない: ラベル文字で判別・輪郭のみ) */
.grade-chip { display: inline-block; border: 1px solid var(--border-strong); color: var(--text-secondary); font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }

/* 星評価: 点灯=琥珀(価格の赤と役割を分ける)・消灯=輪郭のみ */
.spec-stars { display: inline-flex; align-items: center; gap: 2px; }
.spec-stars .star { color: var(--border-strong); }
.spec-stars .star.on { color: #d99b00; }
@media (prefers-color-scheme: dark) { .spec-stars .star.on { color: #f2b933; } }
.spec-note { color: var(--text-muted); font-size: .72rem; }

/* TOP3早見: 横並びカード、spは横スクロール(snapはproximity=D23) */
.top3-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 6px; }
.top3-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.top3-card:hover { text-decoration: none; border-color: var(--link); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.top3-card .thumb { align-self: center; }
.top3-name { font-weight: 700; font-size: .9rem; line-height: 1.45; }
.top3-catch { color: var(--text-secondary); font-size: .8rem; line-height: 1.5; }
.top3-price { color: var(--accent-hover); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }
.top3-unit { color: var(--text-secondary); font-weight: 600; font-size: .78rem; margin-left: 2px; }
.top3-more { font-size: .8rem; margin-top: auto; }
@media (max-width: 720px) {
  .top3-strip { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .top3-card { flex: 0 0 66%; scroll-snap-align: start; }
}

/* ランキング大カード(アンカー着地はヘッダ分を確保=D8) */
.rank-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 0 0 14px; margin: 16px 0; overflow: hidden; scroll-margin-top: 160px; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
.rank-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-alt); border-bottom: 1px solid var(--border-soft); }
.rank-catch { font-weight: 800; font-size: 1.02rem; line-height: 1.5; }
.rank-card-main { display: flex; gap: 16px; padding: 14px; }
.rank-image { flex: none; }
.rank-info { min-width: 0; flex: 1; }
.rank-name { font-weight: 700; font-size: 1.02rem; line-height: 1.5; }
.rank-maker { color: var(--text-muted); font-size: .8rem; margin: 2px 0 8px; }
.official-link { font-size: .8rem; }
.rank-specs { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.spec-row { display: flex; align-items: center; gap: 8px; font-size: .88rem; flex-wrap: wrap; }
.spec-label { color: var(--text-muted); font-size: .78rem; min-width: 84px; }
.spec-value { white-space: nowrap; }
.spec-value.strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-target { background: var(--surface-alt); border-left: 3px solid var(--border-strong); border-radius: 6px; padding: 9px 11px; font-size: .92rem; line-height: 1.8; letter-spacing: .02em; margin: 0 0 8px; }
.rank-target-label { display: inline-block; color: var(--text-secondary); font-weight: 800; font-size: .78rem; margin-right: 8px; }
.rank-points { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: .95rem; letter-spacing: .02em; }
.rank-points li { margin: 5px 0; line-height: 1.85; }
.rank-basis { color: var(--text-muted); font-size: .76rem; margin-top: 6px; }
.rank-nostock { margin: 0 14px; padding: 10px 12px; background: var(--surface-alt); border-radius: 10px; font-size: .88rem; }
.rank-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 14px; padding: 10px 12px; border: 1px solid var(--accent-soft-strong); background: var(--accent-soft); border-radius: 10px; }
.rank-buy-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.3rem; }
.rank-buy-price .fetched-at { font-size: .78rem; color: var(--text-muted); }
.rank-buy-actions { display: flex; align-items: center; gap: 12px; }
@media (max-width: 640px) {
  .rank-card-main { gap: 12px; }
  .rank-image .thumb { width: 96px !important; height: 96px !important; }
  .spec-label { min-width: 70px; }
  .rank-buy { flex-direction: column; align-items: stretch; }
  .rank-buy-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .rank-buy-actions .offer-cta { min-height: 44px; }
  /* sp: 収益CTA直下の同格ボタンはテキストリンクに降格(D9) */
  .rank-buy-actions .btn-outline { border: none; padding: 4px 0; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }
}

/* データカード共通(単価バー・価格表) */
.chart-card, .table-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; margin: 12px 0 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
.chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--surface-alt); border-bottom: 1px solid var(--border-soft); }
.chart-title { font-weight: 700; font-size: .9rem; }
.chart-note { color: var(--text-muted); font-size: .76rem; border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.chart-foot { color: var(--text-secondary); font-size: .84rem; line-height: 1.7; margin: 0; padding: 10px 14px; border-top: 1px solid var(--border-soft); }

/* 単価バー(単色・細マーク・端4px丸・値はインク色/tabular-nums。外れ値は軸外表示=D14) */
.unit-bars { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.unit-bar-row { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; align-items: center; gap: 12px; }
.unit-bar-label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.unit-bar-label .thumb { flex: none; }
.unit-bar-name { font-size: .84rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.unit-bar-plot { display: flex; align-items: center; gap: 10px; }
.unit-bar-track { display: block; flex: 1; height: 12px; background: var(--surface-alt); border: 1px solid var(--border-soft); border-radius: 4px; overflow: hidden; }
.unit-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 4px; }
.unit-bar-fill.capped { background: repeating-linear-gradient(135deg, var(--accent), var(--accent) 6px, var(--accent-hover) 6px, var(--accent-hover) 12px); }
.unit-bar-value { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .95rem; }
.unit-bar-unit { font-weight: 600; color: var(--text-muted); font-size: .76rem; margin-left: 2px; }
.unit-bar-row.best .unit-bar-value { color: var(--accent-hover); }
@media (max-width: 640px) {
  .unit-bar-row { grid-template-columns: 1fr; gap: 4px; }
}

/* データの引用単位ブロック(監査E8) */
.data-note { border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-alt); color: var(--text-secondary); font-size: .82rem; line-height: 1.8; padding: 10px 14px; margin: 10px 0; }

/* 実測価格表: PC=表 / sp=カード積み(横スクロール表を出さない=D4) */
.table-card .compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: .92rem; }
.compare-table th { text-align: left; color: var(--text-muted); font-size: .78rem; font-weight: 700; padding: 8px 10px; background: var(--surface); border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
.compare-table td { padding: 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
.compare-table tbody tr:nth-child(even) td { background: var(--surface-alt); }
.compare-table tbody tr:hover td { background: var(--accent-soft); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tr.best-row td { background: var(--accent-soft); }
.compare-table td.compare-name { white-space: normal; min-width: 220px; max-width: 280px; line-height: 1.5; }
.compare-product { display: flex; align-items: center; gap: 8px; }
.compare-product .thumb { flex: none; }
.compare-product-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.compare-product-text a { font-size: .86rem; }
.compare-product-text .grade-chip { align-self: flex-start; }
.compare-unit .unit-strong { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1rem; }
.compare-unit .badge { margin-left: 6px; }
.compare-table td.fetched-at { color: var(--text-muted); font-size: .8rem; }
.compare-cta { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; background: var(--accent); color: #fff; font-size: .84rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .16); }
.compare-cta:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.compare-cta .badge.ad { background: rgba(255, 255, 255, .2); color: #fff; }
.table-disclosure { color: var(--text-muted); font-size: .76rem; line-height: 1.7; margin: 0; padding: 8px 14px 12px; }
.compare-cards { display: none; }
@media (max-width: 640px) {
  .table-card .compare-scroll { display: none; }
  .compare-cards { display: flex; flex-direction: column; gap: 0; }
  .compare-cards .price-card { border: none; border-bottom: 1px solid var(--border-soft); border-radius: 0; }
  .compare-cards .price-card:last-child { border-bottom: none; }
  .compare-card-name { font-size: .86rem; line-height: 1.5; }
  .compare-cards .offer-cta { min-height: 44px; }
}

/* 段階購入ブロック(監査D15) */
.trial-block { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 14px; margin: 12px 0; }
.trial-title { font-weight: 800; font-size: .95rem; }
.trial-note { color: var(--text-muted); font-size: .82rem; margin: 4px 0 8px; }
.trial-rows { display: flex; flex-direction: column; gap: 8px; }
.trial-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.trial-name { font-size: .88rem; }

/* 再掲CTA(まとめ直後・FAQ直後=D6/D21) */
.recap-ctas { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.recap-ctas .offer-cta { justify-content: center; text-align: center; }

/* 追従CTA(sp表示のみ・p.phpのsticky-ctaと同型=D2) */
.article-sticky { display: none; }
@media (max-width: 640px) {
  .page-body.has-article-sticky { padding-bottom: 84px; }
  .article-sticky {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 8px 14px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(15, 23, 42, .1);
  }
  .article-sticky-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .article-sticky-name { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .article-sticky .offer-cta { flex-shrink: 0; min-height: 44px; }
}

/* 記事ヒーロー画像: 元画像は高画質のまま表示はアイキャッチ帯。spはFV優先で非表示(D1) */
.article-hero { margin: 4px 0 14px; }
.article-hero img { width: 100%; max-height: 280px; object-fit: cover; display: block; border-radius: 14px; border: 1px solid var(--border); }
@media (max-width: 640px) { .article-hero { display: none; } }

/* 記事ハブ(/a.php 一覧) */
.article-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.article-list-card { display: flex; gap: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px; color: inherit; transition: border-color .15s, box-shadow .15s; }
.article-list-card:hover { text-decoration: none; border-color: var(--link); box-shadow: 0 3px 10px rgba(0, 0, 0, .1); }
.article-list-thumb { flex: none; width: 160px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-soft); }
.article-list-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.article-list-title { font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: 3px; line-height: 1.5; }
.article-list-desc { color: var(--text-secondary); font-size: .84rem; line-height: 1.6; }
.article-list-date { color: var(--text-muted); font-size: .76rem; }
@media (max-width: 640px) { .article-list-thumb { width: 96px; height: 54px; } }

/* 広告開示バッジ: 販促バッジ(badge ad=最安系)と意匠を分離(監査B8)。無彩色・輪郭のみ */
.badge.disclosure { display: inline-block; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); font-size: .68rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; }
.offer-cta .badge.disclosure, .compare-cta .badge.disclosure { border-color: rgba(255, 255, 255, .55); color: rgba(255, 255, 255, .9); background: transparent; }

/* ポジションマップ(単価×保湿グレード・SVG自動生成 赤入れ2026-08-01) */
.posmap-wrap { padding: 8px 10px 4px; }
.posmap-wrap svg { width: 100%; height: auto; display: block; }
.posmap-note { color: var(--text-muted); font-size: .78rem; padding: 0 14px 10px; margin: 0; }