@charset "UTF-8";
/* ==========================================================================
   人気ランキング.com  ―  Renewal Design System  v1.0
   Modern minimal / Mobile-first / Editorial
   Build: 2026-05  by ST広告社
   ========================================================================== */

/* ==========================================================================
   ★ !IMPORTANT POLICY (PR-5, 2026-05-20)
   --------------------------------------------------------------------------
   このファイル内で `!important` を使ってよいのは以下のカテゴリのみ。
   それ以外で新規 !important を追加するときは設計の見直しを優先すること。

     A) @media print 内: 印刷用上書き専用ブロックで必要
     B) @media (prefers-reduced-motion: reduce) 内: 全アニメ強制無効化
     C) 1行ユーティリティクラス: .is-hidden, .mt-0, .u-mt-*, .u-mb-*
        → これらは「呼び出し側で確実に上書きしたい」用途で意図的
     D) 上記以外で残存している !important は段階的に削除対象。
        本PRでは確実に外せる箇所のみ対応し、残りは [[memory:!important削減]]
        で別PRに引き継ぐ。

   現在の !important 内訳 (PR-5 直後):
     - print内: 約25件 (聖域)
     - reduced-motion内: 約24件 (聖域)
     - ユーティリティ: 8件 (意図的)
     - その他: 残存 (将来PRで段階的に解決)
   ========================================================================== */

/* ==========================================================================
   ★ BREAKPOINT POLICY (PR-1, 2026-05-20)
   --------------------------------------------------------------------------
   CSS @media クエリ条件式では CSS変数が使えないため、規約として以下の値「のみ」を
   このファイル内で使用します。新規 @media を追加する際は必ずこれを参照してください。

       --bp-xs   480px   ※極小スマホの例外調整時のみ使用。原則使わない
       --bp-sm   640px   モバイル / タブレットの境界（"スマホ専用"の上限）
       --bp-md   960px   タブレット / デスクトップの境界
       --bp-lg  1120px   大画面デスクトップ（コンテナ最大幅と連動）

   従って、許容される @media 表現は以下の8パターンのみ:
       @media (min-width: 480px)   @media (max-width: 480px)
       @media (min-width: 640px)   @media (max-width: 640px)
       @media (min-width: 960px)   @media (max-width: 960px)
       @media (min-width: 1120px)  @media (max-width: 1120px)
   さらに @media (prefers-reduced-motion: reduce) と @media print は別系統で許容。

   過去に存在していた 540/560/600/720/768 などは PR-1 で 640 へ統合しました。
   ========================================================================== */

/* ---------- 1. Reset (modern, conservative) ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video, iframe { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- 2. Design Tokens -------------------------------------------- */
:root {
  /* Brand */
  --brand-name: "人気ランキング.com";

  /* Color — ink scale */
  --ink-900: #0B1220;
  --ink-800: #2D3748;
  --ink-700: #4A5568;
  --ink-600: #5F5E5A;
  --ink-500: #888780;
  --ink-400: #6B7280;
  --ink-300: #9CA3AF;
  --ink-200: #D1D5DB;
  --ink-100: #E5E7EB;
  --ink-50:  #F3F4F6;
  --paper:   #FFFFFF;
  --canvas:  #FAFAF7;   /* warm off-white */

  /* Magazine cream — warm paper feel */
  --cream-50:  #FFFAEF;
  --cream-100: #FAFAF7;
  --cream-200: #F8EFDF;
  --cream-300: #F0E4C8;
  --cream-400: #E6D2A8;

  /* Vermilion — magazine cover red (anan/Hanako 系) */
  --vermilion-800: #712B13;
  --vermilion-700: #993C1D;
  --vermilion-600: #E5392E;
  --vermilion-500: #F45B3C;
  --vermilion-400: #FF7A5C;
  --vermilion-200: #F5C4B3;
  --vermilion-100: #FAECE7;

  /* Teal — secondary accent (information / calm) */
  --teal-800: #085041;
  --teal-100: #E1F5EE;

  /* Magenta — entertainment / trend (anan のアクセント) */
  --magenta-700: #B22A4B;
  --magenta-600: #D9355A;
  --magenta-500: #E84C71;
  --magenta-400: #F36C8E;

  /* Editorial ink — warm black */
  --editorial-ink: #1A1410;

  /* Accent — amber gold (ranking authority) */
  --gold-900: #5A3508;
  --gold-800: #854F0B;
  --gold-700: #BA7517;
  --gold-600: #B07A1F;
  --gold-500: #D4A24C;
  --gold-bright: #D89535;   /* CTAグラデの明色（--gold-700 と対で使用） */
  --gold-350: #F4D27A;   /* 1位カバーの明るい金（gold-300〜400の中間） */
  --bronze:   #C97D4D;   /* 3位メダル / concern アクセント */
  --star-fill:#FF9500;   /* 星評価の塗り色 */
  --gold-400: #ECCB95;
  --gold-300: #FAC775;
  --gold-100: #FAEEDA;
  --gold-50:  #FEF8EA;

  /* Primary brand — deep navy (trust / authority) */
  --navy-950: #050C2A;
  --navy-900: #0A1A4A;
  --navy-800: #0F2466;
  --navy-700: #142664;
  --navy-600: #1E2A78;
  --navy-500: #2E3FB1;
  --navy-400: #4A5EE0;
  --navy-100: #E7EAF6;
  --navy-50:  #F3F5FB;

  /* Semantic */
  --color-bg:        var(--canvas);
  --color-surface:   var(--paper);
  --color-text:      var(--ink-900);
  --color-muted:     var(--ink-600);
  --color-faint:     var(--ink-400);
  --color-line:      var(--ink-100);
  --color-line-soft: var(--ink-50);
  --color-link:      var(--navy-700);
  --color-link-hover:var(--navy-600);
  --color-accent:    var(--gold-600);
  --color-accent-soft:var(--gold-100);

  /* Typography */
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);

  --fs-xs:   clamp(12px, 1.4vw, 13px);
  --fs-sm:   clamp(14px, 1.5vw, 15px);
  --fs-base: clamp(16px, 1.7vw, 17px);
  --fs-lg:   clamp(17px, 2.4vw, 19px);
  --fs-h4:   clamp(16px, 2.5vw, 20px);
  --fs-h3:   clamp(18px, 3vw, 24px);
  --fs-h2:   clamp(22px, 4vw, 32px);
  --fs-h1:   clamp(28px, 6vw, 44px);
  --fs-hero: clamp(34px, 7vw, 60px);

  --lh-tight: 1.25;
  --lh-snug:  1.45;
  --lh-base:  1.85;
  --lh-loose: 2.05;

  --tracking-jp:    0.04em;
  --tracking-head:  0.04em;
  --tracking-display: 0.02em;

  /* Layout */
  --maxw-prose:  720px;
  --maxw-narrow: 880px;
  --maxw:        1120px;
  --maxw-wide:   1280px;

  --gutter:    clamp(16px, 4vw, 32px);
  --gap-sm:    8px;
  --gap:       16px;
  --gap-md:    24px;
  --gap-lg:    40px;
  --gap-xl:    64px;
  --gap-xxl:   96px;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-2: 0 4px 12px rgba(11, 18, 32, .06), 0 2px 4px rgba(11, 18, 32, .04);
  --shadow-3: 0 16px 40px rgba(11, 18, 32, .10), 0 4px 12px rgba(11, 18, 32, .06);

  /* Z-INDEX LADDER — グローバルな重なり順序（局所的な 0–10 は各コンポーネント内で使用）
     overlay群 < modal < skip を保証。新規オーバーレイは必ずこのトークンを使うこと。 */
  --z-header:   100;   /* 固定ヘッダー */
  --z-drawer:   200;   /* モバイルドロワー（ヘッダーより上） */
  --z-overlay:  300;   /* reading-progress / float-top / mini-toc / compare-bar */
  --z-modal:   1000;   /* compare-modal とその backdrop */
  --z-skip:    2000;   /* skipリンク（フォーカス時に最上位） */

  /* Motion */
  --ease: ease;
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 420ms;

  /* Header */
  --header-h: 64px;
}

@media (min-width: 640px) {
  :root { --header-h: 72px; }
}

/* ---------- 3. Base ----------------------------------------------------- */
html { background: var(--color-bg); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-jp);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt";
}

::selection { background: var(--ink-900); color: var(--paper); }

a {
  color: var(--color-link);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
a:hover { color: var(--color-link-hover); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-head);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

p { margin: 0 0 1.2em; }

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: var(--paper);
  padding: 10px 14px;
  z-index: var(--z-skip);
  border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }

/* ---------- 4. Layout primitives --------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: clamp(56px, 9vw, 112px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.section--alt {
  background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%);
  position: relative;
  isolation: isolate;
}
.section--alt::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 80px; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.6;
  z-index: -1;
  pointer-events: none;
}
.section--alt > .container { position: relative; z-index: 1; }

.stack > * + * { margin-top: var(--gap); }
.stack-md > * + * { margin-top: var(--gap-md); }
.stack-lg > * + * { margin-top: var(--gap-lg); }

.grid { display: grid; gap: var(--gap-md); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.flow > * + * { margin-top: 1em; }

/* ---------- 5. Header / Navigation ------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(254, 244, 222, .92);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(26, 20, 16, .08);
  color: var(--editorial-ink);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.95);
  border-color: var(--color-line);
  color: var(--ink-900);
}
.site-header .brand { color: var(--editorial-ink); }
.site-header .brand__mark { background: var(--editorial-ink); color: var(--gold-500); }
.site-header .nav__link { color: var(--editorial-ink); opacity: .82; }
.site-header .nav__link:hover { opacity: 1; color: var(--vermilion-700); }
.site-header .nav__link[aria-current="page"]::after { background: var(--vermilion-600); }
.site-header .iconbtn { color: var(--editorial-ink); border-color: rgba(26,20,16,.15); }
.site-header .iconbtn:hover { background: rgba(26,20,16,.05); border-color: rgba(26,20,16,.25); }
.site-header.is-scrolled .brand__mark { background: var(--ink-900); color: var(--gold-500); }
.site-header.is-scrolled .nav__link[aria-current="page"]::after { background: var(--gold-600); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--gap);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--ink-900);
  font-size: clamp(15px, 2.2vw, 18px);
  white-space: nowrap;
}
.brand__mark {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ink-900);
  color: var(--gold-500);
  line-height: 1;
  flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(11,18,32,.15);
  transition: transform var(--t-base) var(--ease);
}
.brand__mark svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.brand:hover .brand__mark {
  transform: rotate(-8deg) scale(1.06);
}
.brand__dot { color: var(--gold-600); }

.nav { display: none; }
.nav__list { display: flex; gap: clamp(14px, 2vw, 28px); align-items: center; }
.nav__link {
  color: var(--ink-700);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: var(--tracking-head);
  position: relative;
  padding-block: 6px;
}
.nav__link:hover { color: var(--ink-900); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--gold-600);
  border-radius: 2px;
}
@media (min-width: 960px) {
  .nav { display: block; }
}

.header-actions { display: flex; gap: 8px; align-items: center; }

.iconbtn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: var(--ink-700);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.iconbtn:hover { background: var(--ink-50); border-color: var(--color-line); }

.menu-toggle { display: inline-grid; }
@media (min-width: 960px) { .menu-toggle { display: none; } }

/* Mobile drawer — 2026-05 演出強化版 */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%);
  z-index: var(--z-drawer);
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s var(--ease);
  overflow-y: auto;
  padding: var(--gap-md) var(--gutter) var(--gap-xl);
  box-shadow: -4px 0 20px -2px rgba(0,0,0,0.08);
}
.mobile-nav[data-open="true"] {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
/* 背景オーバーレイ */
.mobile-nav::before {
  content: "";
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(11, 18, 32, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--ease);
  z-index: -1;
}
.mobile-nav[data-open="true"]::before {
  opacity: 1;
}
.mobile-nav__list {
  display: grid;
  gap: 4px;
  max-width: 480px;
  margin-left: auto;
}
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
  border-bottom: 1px solid var(--color-line-soft);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-800);
  text-decoration: none;
  position: relative;
  transition: padding-left 0.25s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
  border-radius: 0 8px 8px 0;
}
.mobile-nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 60%;
  background: linear-gradient(180deg, var(--gold-700), var(--gold-bright));
  transform: translateY(-50%);
  border-radius: 2px;
  transition: width 0.25s var(--ease);
}
.mobile-nav__link:hover,
.mobile-nav__link:focus-visible,
.mobile-nav__link:active {
  background: var(--gold-100);
  color: var(--gold-800);
  padding-left: 22px;
  text-decoration: none;
}
.mobile-nav__link:hover::before,
.mobile-nav__link:focus-visible::before,
.mobile-nav__link:active::before {
  width: 4px;
}
.mobile-nav__link small {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  color: var(--gold-800);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* メニュー開閉時の hamburger 変形 */
.menu-toggle[aria-expanded="true"] svg line:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.menu-toggle[aria-expanded="true"] svg line:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] svg line:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}
.menu-toggle svg line {
  transform-origin: center;
  transition: transform 0.25s var(--ease), opacity 0.15s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav::before,
  .mobile-nav__link,
  .mobile-nav__link::before,
  .menu-toggle svg line {
    transition: none;
  }
}

/* ---------- 6. Buttons ------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--tracking-head);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn--lg { height: 56px; padding: 0 28px; font-size: 15px; }
.btn .arrow { transition: transform var(--t-base) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- 7. Common UI ---------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--navy-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-700));
  border-radius: 2px;
}

.section-title {
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-head);
  line-height: 1.3;
  margin-top: 14px;
  font-weight: 900;
}
.section-title .num {
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  color: var(--gold-600);
  margin-right: .25em;
}

.section-lead {
  color: var(--ink-600);
  max-width: 640px;
  line-height: var(--lh-base);
  margin-top: 14px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-700);
  background: var(--ink-50);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.divider {
  height: 1px;
  background: var(--color-line);
  border: 0;
}

/* ---------- 8. Hero (Magazine Cover / Inspiration) ------------------ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--editorial-ink);
  padding-block: clamp(24px, 4vw, 56px) clamp(40px, 6vw, 80px);
  background:
    radial-gradient(60% 80% at 90% 10%, rgba(245,91,60,.10), transparent 60%),
    radial-gradient(50% 60% at 5% 90%,  rgba(217,53,90,.08), transparent 60%),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-200) 60%, var(--cream-300) 100%);
}
/* Paper grain texture via SVG noise */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
/* Giant background issue number — magazine feel */
.hero::after {
  content: "16";
  position: absolute;
  left: -20px;
  bottom: -80px;
  font-family: "Bodoni Moda", "Didot", serif;
  font-weight: 800;
  font-size: clamp(280px, 50vw, 640px);
  line-height: 1;
  color: var(--vermilion-600);
  opacity: .06;
  letter-spacing: -.05em;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero > * { position: relative; z-index: 1; }

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: 1.05fr 1fr; }
}

/* Magazine masthead — Vol. + date */
.hero__masthead {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 18px;
  background: var(--editorial-ink);
  color: var(--cream-100);
  border-radius: 0;
  font-family: "Bodoni Moda", serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
}
.hero__masthead .sep {
  width: 1px; height: 14px;
  background: var(--cream-300);
  display: inline-block;
}
.hero__masthead .vol-no {
  color: var(--vermilion-500);
}

/* Hero badge — "MONTHLY BEST RANKINGS" subtitle */
.hero__subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(15px, 2vw, 18px);
  color: var(--vermilion-800);
  font-weight: 700;
  letter-spacing: .02em;
}
.hero__subtitle::before, .hero__subtitle::after {
  content: "";
  display: inline-block;
  width: 28px; height: 2px;
  background: var(--vermilion-700);
}

/* Main editorial title */
.hero__title {
  font-size: clamp(42px, 8.8vw, 88px);
  line-height: 1.1;
  letter-spacing: .005em;
  font-weight: 900;
  margin-top: 12px;
  color: var(--editorial-ink);
  text-wrap: balance;
  font-feature-settings: "palt";
}
.hero__title .mark {
  position: relative;
  display: inline-block;
  color: var(--vermilion-600);
  font-style: normal;
}
.hero__title .mark::before {
  content: "";
  position: absolute;
  left: 50%; top: -.4em;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: var(--vermilion-600);
  border-radius: 50%;
}
.hero__title .serif {
  font-family: "Bodoni Moda", "Noto Serif JP", serif;
  font-weight: 800;
  font-style: italic;
  color: var(--magenta-600);
  letter-spacing: .01em;
}
.hero__title .underline {
  display: inline-block;
  padding-inline: 4px;
  background-image: linear-gradient(180deg, transparent 0 65%, var(--gold-500) 65% 92%, transparent 92%);
  background-repeat: no-repeat;
}

.hero__lead {
  margin-top: 18px;
  color: var(--ink-800);
  max-width: 520px;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.95;
}
.hero__lead strong {
  color: var(--editorial-ink);
  background: linear-gradient(180deg, transparent 60%, rgba(229,57,46,.18) 60%);
  font-weight: 700;
}

.hero__cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 24px;
}
.hero__cta .btn { font-size: 15px; height: 56px; padding: 0 30px; }
.hero__cta .btn--vermilion {
  background: var(--vermilion-600);
  border: 0;
  color: var(--paper);
  box-shadow: 4px 4px 0 0 var(--editorial-ink);
  border-radius: 0;
  letter-spacing: .12em;
  font-weight: 800;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.hero__cta .btn--vermilion:hover {
  background: var(--vermilion-500);
  transform: translate(-2px, -2px) scale(1.02);
  box-shadow: 6px 6px 0 0 var(--editorial-ink);
}
.hero__cta .btn--outline {
  background: transparent;
  border: 2px solid var(--editorial-ink);
  color: var(--editorial-ink);
  border-radius: 0;
  letter-spacing: .12em;
  font-weight: 800;
  box-shadow: 4px 4px 0 0 var(--editorial-ink);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.hero__cta .btn--outline:hover {
  background: var(--editorial-ink);
  color: var(--cream-100);
  transform: translate(-2px, -2px) scale(1.02);
  box-shadow: 6px 6px 0 0 var(--vermilion-600);
}

/* Cover lines — editorial teasers */
.hero__coverlines {
  margin-top: clamp(36px, 5vw, 56px);
  display: grid;
  gap: 10px;
  max-width: 520px;
}
.hero__coverline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  min-height: 48px;
  border-top: 1px dashed rgba(26,20,16,.22);
  color: var(--editorial-ink);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .03em;
  transition: padding var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.hero__coverline:last-child { border-bottom: 1px dashed rgba(26,20,16,.22); }
.hero__coverline:hover { padding-inline-start: 10px; color: var(--vermilion-800); }
.hero__coverline__num {
  flex: 0 0 auto;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--vermilion-700);
  font-weight: 800;
  min-width: 32px;
}
.hero__coverline__cat {
  color: var(--gold-800);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  margin-right: 6px;
}

/* ---------- 8b. Hero Feature card (Magazine spread style) ----------- */
.feature-wrap { position: relative; }
@media (min-width: 960px) {
  .feature-wrap { margin-top: -20px; }
}

.feature-wrap .feature-card {
  position: relative;
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 40px 80px -20px rgba(229,57,46,.25),
    0 16px 32px -8px rgba(0,0,0,.18),
    4px 4px 0 0 var(--editorial-ink);
  border: 2px solid var(--editorial-ink);
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
@media (min-width: 960px) {
  .feature-card { transform: rotate(1.5deg); }
  .feature-card:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow:
      0 50px 90px -20px rgba(229,57,46,.32),
      0 20px 40px -8px rgba(0,0,0,.22),
      8px 8px 0 0 var(--editorial-ink);
  }
}

/* Top half — vermilion color block w/ huge "01" */
.feature-wrap .feature-card__hero {
  position: relative;
  background:
    radial-gradient(60% 80% at 80% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, var(--vermilion-600) 0%, var(--magenta-600) 100%);
  color: var(--paper);
  padding: clamp(24px, 3.5vw, 36px) clamp(24px, 3.5vw, 36px) clamp(40px, 6vw, 56px);
  overflow: hidden;
}
.feature-wrap .feature-card__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px);
  pointer-events: none;
}
.feature-wrap .feature-card__crown {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--cream-100);
  color: var(--vermilion-700);
  border-radius: 999px;
  border: 2px solid var(--editorial-ink);
  z-index: 2;
}
.feature-wrap .feature-card__topline {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--editorial-ink);
  color: var(--cream-100);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 12px;
  width: fit-content;
  position: relative;
  z-index: 1;
}
.feature-card__star { color: var(--gold-500); }

.feature-wrap .feature-card__rank {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}
.feature-card__no {
  font-family: "Bodoni Moda", "Didot", serif;
  font-size: clamp(88px, 15vw, 160px);
  line-height: .85;
  color: var(--paper);
  letter-spacing: -.06em;
  text-shadow: clamp(3px, .8vw, 6px) clamp(3px, .8vw, 6px) 0 var(--editorial-ink);
  font-weight: 800;
}
.feature-wrap .feature-card__rank__meta {
  padding-bottom: 8px;
  display: grid; gap: 2px;
}
.feature-card__of {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
}
.feature-card__label {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cream-100);
  font-weight: 700;
}

/* Bottom half — white card content */
.feature-wrap .feature-card__body {
  padding: clamp(24px, 3.5vw, 36px);
  display: grid;
  gap: 14px;
  background: var(--paper);
  position: relative;
}
.feature-wrap .feature-card__body::before {
  /* paper edge / tape decoration */
  content: "";
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 100px; height: 24px;
  background: rgba(229,205,117,.7);
  border: 1px solid rgba(176,122,31,.5);
  z-index: 2;
}
.feature-wrap .feature-card__category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--vermilion-700);
  text-transform: uppercase;
  padding: 4px 10px;
  background: transparent;
  border: 1.5px solid var(--vermilion-600);
  width: fit-content;
}
.feature-wrap .feature-card__title {
  font-size: clamp(20px, 2.8vw, 26px);
  line-height: 1.4;
  letter-spacing: .03em;
  color: var(--editorial-ink);
  font-weight: 800;
  font-feature-settings: "palt";
}
.feature-wrap .feature-card__title a { color: inherit; }
.feature-wrap .feature-card__title a:hover { color: var(--vermilion-700); }
.feature-wrap .feature-card__desc {
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.85;
  margin: 0;
}

/* Star rating */
.feature-wrap .feature-card__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-700);
}
.feature-wrap .feature-card__rating .stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold-600);
  letter-spacing: 1px;
  font-size: 18px;
  text-shadow: 0 1px 0 rgba(176,122,31,.2);
}
.feature-wrap .feature-card__rating strong {
  color: var(--editorial-ink);
  font-weight: 800;
  font-family: "Bodoni Moda", serif;
  font-size: 16px;
}

.feature-wrap .feature-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
  color: var(--paper);
  background: var(--editorial-ink);
  padding: 16px 22px;
  letter-spacing: .12em;
  margin-top: 8px;
  transition: background var(--t-base) var(--ease), padding var(--t-base) var(--ease);
  width: 100%;
  position: relative;
}
.feature-wrap .feature-card__cta::before {
  content: "★";
  margin-right: auto;
  color: var(--gold-500);
}
.feature-wrap .feature-card__cta:hover {
  background: var(--vermilion-600);
  color: var(--paper);
}
.feature-wrap .feature-card__cta .arrow { transition: transform var(--t-base) var(--ease); }
.feature-wrap .feature-card__cta:hover .arrow { transform: translateX(6px); }

/* ---------- 8e. Playful Decorations (雑誌の遊び) -------------------- */

/* --- Stickers (シール) --- */
.sticker {
  position: absolute;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  user-select: none;
  pointer-events: none;
  z-index: 4;
  line-height: 1.05;
}

/* ==========================================================================
   ADDED 2026-05  ―  Restoration of missing component styles
   The original main.css was truncated at the .sticker rule. The following
   blocks add what was lost AND what was needed for legacy / cgr- markup.
   ========================================================================== */

/* ---------- Safety net ----------------------------------------------- */
html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--header-h) + 8px); }
[id]  { scroll-margin-top: calc(var(--header-h) + 8px); }
input, textarea, select { font-size: 16px; } /* iOS zoom抑制 */

/* ---------- 9. Rankings (new design system) -------------------------- */
.rankings { display: grid; gap: 20px; }
@media (min-width: 640px) { .rankings { gap: 24px; } }

.rank-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  padding: clamp(20px, 3vw, 28px);
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  overflow: hidden;
}
.rank-card:hover {
  border-color: var(--gold-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.rank-card__no {
  font-family: "Bodoni Moda", "Didot", "Noto Serif JP", serif;
  font-size: clamp(48px, 9vw, 88px);
  font-weight: 800;
  line-height: 1;
  color: var(--gold-600);
  min-width: clamp(60px, 11vw, 110px);
  text-align: center;
  letter-spacing: -.02em;
}
.rank-card__body { display: grid; gap: 10px; }
.rank-card__meta {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 12px; color: var(--color-faint); letter-spacing: var(--tracking-head);
}
.rank-card__title {
  font-size: var(--fs-h3);
  line-height: 1.45;
  letter-spacing: .03em;
  font-weight: 700;
}
.rank-card__title a { color: var(--ink-900); }
.rank-card__title a:hover { color: var(--navy-700); }
.rank-card__desc { color: var(--ink-600); font-size: 14px; line-height: 1.85; }
.rank-card__cta {
  margin-top: 6px;
  display: inline-flex; gap: 6px; align-items: center;
  color: var(--ink-900); font-weight: 700; font-size: 13px;
  letter-spacing: var(--tracking-head);
}
.rank-card__cta:hover { color: var(--navy-700); }

.rank-card[data-rank="1"] {
  border-color: var(--gold-500);
  background: linear-gradient(180deg, var(--cream-50) 0%, #FFFFFF 100%);
  box-shadow: 0 14px 40px rgba(176,122,31,.12);
}
.rank-card[data-rank="1"]::before {
  content: "GOLD";
  position: absolute; top: 12px; right: 16px;
  font-family: "Bodoni Moda", serif;
  font-weight: 800; font-size: 10px; letter-spacing: .2em;
  color: var(--gold-800);
  background: var(--gold-50);
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid var(--gold-400);
}
.rank-card[data-rank="2"]::before {
  content: "SILVER";
  position: absolute; top: 12px; right: 16px;
  font-family: "Bodoni Moda", serif;
  font-weight: 800; font-size: 10px; letter-spacing: .2em;
  color: var(--ink-400);
  background: #F3F4F6;
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid #D1D5DB;
}
.rank-card[data-rank="3"]::before {
  content: "BRONZE";
  position: absolute; top: 12px; right: 16px;
  font-family: "Bodoni Moda", serif;
  font-weight: 800; font-size: 10px; letter-spacing: .2em;
  color: #9C572B;
  background: #FDF2E9;
  padding: 4px 8px; border-radius: 4px;
  border: 1px solid #E8B89A;
}

/* ---------- 9b. Rank card visual cover (magazine spread) ----------- */
.rank-card {
  grid-template-columns: clamp(96px, 18vw, 180px) 1fr;
}
@media (max-width: 640px) {
  .rank-card { grid-template-columns: clamp(72px, 24vw, 110px) 1fr; }
}
.rank-card__cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--paper);
  isolation: isolate;
  box-shadow: 0 8px 22px rgba(11,18,32,.12);
  transition: transform var(--t-base) var(--ease);
}
.rank-card:hover .rank-card__cover { transform: translateY(-2px) rotate(-1deg); }
/* Ranking-color palette: 1位=金 / 2位=銀 / 3位=銅 */
.rank-card[data-rank="1"] .rank-card__cover {
  background:
    radial-gradient(80% 60% at 70% 20%, rgba(255,255,255,.32), transparent 60%),
    linear-gradient(135deg, var(--gold-350) 0%, var(--gold-600) 45%, var(--gold-700) 100%);
  color: var(--editorial-ink);
}
.rank-card[data-rank="2"] .rank-card__cover {
  background:
    radial-gradient(80% 60% at 30% 80%, rgba(255,255,255,.30), transparent 60%),
    linear-gradient(135deg, var(--ink-100) 0%, #B8BEC7 45%, #8A929C 100%);
  color: var(--editorial-ink);
}
.rank-card[data-rank="3"] .rank-card__cover {
  background:
    radial-gradient(80% 60% at 70% 70%, rgba(255,255,255,.28), transparent 60%),
    linear-gradient(135deg, #E3A57A 0%, #B97444 45%, #8A5424 100%);
  color: var(--paper);
}

/* Text colors inside cover: keep readable on each metal */
.rank-card[data-rank="1"] .rank-card__cover-num,
.rank-card[data-rank="2"] .rank-card__cover-num {
  color: var(--editorial-ink);
  text-shadow: 2px 2px 0 rgba(255,255,255,.35);
}
.rank-card[data-rank="3"] .rank-card__cover-num {
  color: var(--paper);
  text-shadow: 2px 2px 0 rgba(0,0,0,.25);
}
.rank-card[data-rank="1"] .rank-card__cover-cat,
.rank-card[data-rank="2"] .rank-card__cover-cat {
  color: rgba(26,20,16,.85);
}
.rank-card[data-rank="3"] .rank-card__cover-cat {
  color: rgba(255,255,255,.95);
}

/* Cover tag (GOLD/SILVER/BRONZE label) — make it readable on each metal */
.rank-card[data-rank="1"] .rank-card__cover-tag {
  background: rgba(26,20,16,.85);
  color: var(--gold-350);
}
.rank-card[data-rank="2"] .rank-card__cover-tag {
  background: rgba(26,20,16,.78);
  color: var(--ink-100);
}
.rank-card[data-rank="3"] .rank-card__cover-tag {
  background: rgba(0,0,0,.5);
  color: var(--gold-350);
}

/* Subtle metallic sheen overlay */
.rank-card[data-rank="1"] .rank-card__cover::after,
.rank-card[data-rank="2"] .rank-card__cover::after,
.rank-card[data-rank="3"] .rank-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 60%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.rank-card__cover::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px);
  pointer-events: none;
}
.rank-card__cover-num {
  font-family: "Bodoni Moda","Didot",serif;
  font-weight: 800;
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 3px 3px 0 rgba(0,0,0,.18);
}
.rank-card__cover-cat {
  position: absolute;
  bottom: 8px; left: 8px; right: 8px;
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255,255,255,.95);
}
.rank-card__cover-tag {
  position: absolute;
  top: 6px; left: 6px;
  background: rgba(0,0,0,.35);
  color: var(--gold-500);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
/* ---------- 9c. Section numeral (magazine page marker) ------------- */
.section-num {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 700;
  color: var(--vermilion-700);
  letter-spacing: .14em;
  margin-right: 14px;
}
.section-num::before {
  content: "—";
  color: var(--ink-300);
  margin-right: 4px;
}

/* ---------- 9d. Pull quote (editorial break) ----------------------- */
.pullquote {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-family: "Noto Serif JP", "Noto Sans JP", serif;
  font-weight: 500;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.6;
  color: var(--editorial-ink);
  letter-spacing: .04em;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 60px);
}
.pullquote::before, .pullquote::after {
  position: absolute;
  font-family: "Bodoni Moda", "Didot", serif;
  font-size: clamp(80px, 12vw, 160px);
  color: var(--vermilion-600);
  opacity: .18;
  line-height: 1;
  font-weight: 800;
  font-style: italic;
}
.pullquote::before {
  content: "\201C";
  top: -12px;
  left: clamp(0px, 4vw, 40px);
}
.pullquote::after {
  content: "\201D";
  bottom: -40px;
  right: clamp(0px, 4vw, 40px);
}
.pullquote cite {
  display: block;
  margin-top: 20px;
  font-size: 12px;
  font-style: normal;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--ink-600);
  text-transform: uppercase;
  font-family: var(--font-sans);
}

/* ---------- 9e. Editor's Letter ------------------------------------ */
.editor-letter {
  background: linear-gradient(180deg, var(--cream-100), var(--cream-200));
  padding-block: clamp(56px, 8vw, 100px);
  position: relative;
  overflow: hidden;
}
.editor-letter::before {
  content: "Editor's Note";
  position: absolute;
  top: clamp(24px, 4vw, 48px);
  right: clamp(-20px, 0vw, 40px);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(60px, 11vw, 140px);
  font-weight: 800;
  color: var(--vermilion-600);
  opacity: .06;
  letter-spacing: -.02em;
  white-space: nowrap;
  pointer-events: none;
}
.editor-letter__inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  background: var(--paper);
  border: 2px solid var(--editorial-ink);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 6px 6px 0 var(--vermilion-600);
}
.editor-letter__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  color: var(--vermilion-700);
  letter-spacing: .12em;
}
.editor-letter__eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--vermilion-600);
}
.editor-letter h2 {
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.4;
  letter-spacing: .03em;
  font-weight: 800;
  color: var(--editorial-ink);
  margin-bottom: 18px;
}
.editor-letter__body {
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.95;
  color: var(--ink-800);
}
.editor-letter__body p { margin-bottom: 1em; }
.editor-letter__body p:last-of-type { margin-bottom: 0; }
.editor-letter__signature {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed rgba(26,20,16,.22);
  display: flex; align-items: center; gap: 14px;
}
.editor-letter__signature-mark {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--editorial-ink);
  color: var(--gold-500);
  display: grid; place-items: center;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
}
.editor-letter__signature-text { line-height: 1.5; }
.editor-letter__signature-text strong {
  display: block; color: var(--editorial-ink); font-weight: 800;
}
.editor-letter__signature-text small {
  font-size: 11px; letter-spacing: .14em; color: var(--ink-600); text-transform: uppercase;
}

/* ---------- 9f. Subscribe & Follow --------------------------------- */
.subscribe {
  background: var(--editorial-ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 8vw, 96px);
}
.subscribe::before {
  content: "FOLLOW";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(160px, 28vw, 380px);
  color: var(--vermilion-600);
  opacity: .12;
  letter-spacing: -.02em;
  pointer-events: none;
  white-space: nowrap;
}
.subscribe__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.subscribe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-500);
  letter-spacing: .14em;
  margin-bottom: 14px;
}
.subscribe__eyebrow::before, .subscribe__eyebrow::after {
  content: "";
  width: 28px; height: 2px;
  background: var(--gold-500);
}
.subscribe h2 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.25;
  letter-spacing: .03em;
  font-weight: 900;
  color: var(--paper);
  margin-bottom: 14px;
}
.subscribe h2 em {
  font-style: italic;
  font-family: "Bodoni Moda", serif;
  background: linear-gradient(90deg, var(--gold-500), #FFE3A8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subscribe__lead {
  color: rgba(255,255,255,.78);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 32px;
}
.subscribe__channels {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  max-width: 480px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .subscribe__channels { grid-template-columns: repeat(2, 1fr); }
}
.subscribe__channel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--paper);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  border-radius: var(--radius);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.subscribe__channel:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--gold-500);
  transform: translateY(-2px);
  color: var(--paper);
}
.subscribe__channel svg { flex-shrink: 0; }
.subscribe__channel small {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.6);
  font-weight: 600;
  margin-top: 2px;
}

/* ---------- 10. Category card --------------------------------------- */
.cat-card {
  display: block;
  padding: clamp(24px, 3.5vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--color-line);
  height: 100%;
  transition: transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -50% auto;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,63,177,.08), transparent 60%);
  transition: transform var(--t-slow) var(--ease);
  pointer-events: none;
}
.cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--ink-200);
  box-shadow: var(--shadow-2);
}
.cat-card:hover::before { transform: scale(1.4); }
.cat-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--ink-900);
  color: var(--gold-600);
  margin-bottom: 18px;
  font-weight: 900;
  font-size: 18px;
}
.cat-card__title { font-size: var(--fs-h3); margin-bottom: 8px; line-height: 1.4; }
.cat-card__desc {
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.85;
  min-height: 4.6em;
}
.cat-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px;
  color: var(--color-faint);
  font-size: 12px;
  letter-spacing: var(--tracking-head);
}
.cat-card__meta .arrow { color: var(--ink-900); }

/* ---------- 11. Article list & cards -------------------------------- */
.article-card {
  display: grid;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}
.article-card__title {
  font-size: var(--fs-h4);
  line-height: 1.5;
  letter-spacing: .03em;
  font-weight: 700;
}
.article-card__title a { color: var(--ink-900); }
.article-card__title a:hover { color: var(--navy-700); }
.article-card__meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: var(--color-faint);
  letter-spacing: var(--tracking-head);
}
.article-card__meta time { font-variant-numeric: tabular-nums; }

/* ---------- 12. Notice block ---------------------------------------- */
.notice {
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}
.notice h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.notice p { color: var(--ink-600); font-size: 15px; line-height: 1.9; }
.notice ul { margin-top: 12px; }
.notice li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: var(--ink-700);
}
.notice li::before {
  content: "";
  position: absolute;
  left: 0; top: .85em;
  width: 8px; height: 1px;
  background: var(--gold-600);
}

/* ---------- 13. FAQ ------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--color-line); }
.faq details {
  border-bottom: 1px solid var(--color-line);
  padding: 22px 4px;
}
.faq summary {
  list-style: none;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: .03em;
  color: var(--ink-900);
  line-height: 1.55;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q";
  flex: 0 0 auto;
  width: 28px; height: 28px;
  background: var(--ink-900);
  color: var(--gold-600);
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: "Bodoni Moda", serif;
  font-size: 14px;
  font-weight: 800;
  margin-top: 2px;
}
.faq summary::after {
  content: "+";
  margin-left: auto;
  width: 28px; height: 28px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px;
  color: var(--ink-600);
  transition: transform var(--t-base) var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq__answer {
  margin: 14px 0 0 44px;
  color: var(--ink-700);
  line-height: 1.9;
  font-size: 15px;
}
.faq__answer strong { color: var(--ink-900); }

/* ---------- 14. Footer ---------------------------------------------- */
/* --- .site-footer 統合版 (CLEAN v2 — 2026-05-20 PR-3) ---
   PR-3 で 3 箇所に分散していた .site-footer 定義を 1 箇所に集約:
     - 旧 Def#1 (基本: ダーク背景・色・padding・margin)
     - 旧 Def#2 (position: relative — ::after リボンの絶対配置基準点)
     - 旧 Def#3 (背景にラジアルグラデを多層化、padding-block 上端を0に) */
.site-footer {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(186, 117, 23, 0.05) 0%, transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(217, 149, 53, 0.04) 0%, transparent 35%),
    var(--ink-900);
  color: #DCE0E8;
  padding-block: 0;  /* 上下とも0: ::after MAGAZINEリボンを下辺に密着させ最下部の余白を除去 */
  margin-top: 80px;
}
.site-footer a { color: #DCE0E8; }
.site-footer a:hover { color: var(--gold-500); }
.footer-grid { display: grid; gap: var(--gap-lg); }
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
.footer__brand .brand { color: var(--paper); }
.footer__brand-name { color: var(--paper); }
.footer__lead {
  margin-top: 14px;
  color: var(--ink-300);
  font-size: 14px;
  line-height: 1.9;
  max-width: 32em;
}
.footer__title {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 14px;
  font-weight: 700;
}
.footer-list { display: grid; gap: 10px; }
.footer-list a { font-size: 14px; }
.footer-search {
  display: flex; gap: 8px;
  margin-top: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  padding: 4px;
  max-width: 360px;
}
.footer-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  padding: 0 14px;
  font-size: 14px;
  min-width: 0;
}
.footer-search input::placeholder { color: rgba(255,255,255,.5); }
.footer-search button {
  background: var(--gold-600);
  color: var(--ink-900);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: var(--tracking-head);
  cursor: pointer;
}
.footer-search button:hover { background: var(--gold-500); }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-300);
}
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- 15. Utility --------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.is-hidden  { display: none !important; }
.mt-0 { margin-top: 0 !important; }
.clear { clear: both; }

/* ---------- 16. Article body ---------------------------------------- */
.article-body {
  max-width: var(--maxw-prose);
  margin-inline: auto;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: 0.04em;
  color: var(--ink-800);
}
.article-body h2 {
  font-size: var(--fs-h2);
  margin: 2.4em 0 .8em;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--ink-900);
  line-height: 1.4;
  font-weight: 800;
}
.article-body h3 {
  font-size: var(--fs-h3);
  margin: 2em 0 .6em;
  padding-left: .65em;
  border-left: 4px solid var(--gold-600);
  line-height: 1.5;
}
.article-body h4 {
  font-size: var(--fs-h4);
  margin: 1.8em 0 .5em;
  padding-left: .55em;
  border-left: 3px solid var(--gold-500);
  color: var(--ink-900);
  line-height: 1.5;
}
.article-body h5 {
  font-size: 16px;
  font-weight: 700;
  margin: 1.5em 0 .4em;
  color: var(--ink-900);
}
.article-body h2 + p, .article-body h3 + p,
.article-body h4 + p, .article-body h5 + p { margin-top: .4em; }
.article-body p {
  margin: 0 0 1.4em;
  word-break: normal;
  overflow-wrap: break-word;
  letter-spacing: 0.03em;
}
.article-body a {
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a:hover { color: var(--navy-600); }
.article-body ul, .article-body ol { margin: 0 0 1.4em 1.6em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: .4em; line-height: 1.85; }
.article-body img {
  margin: 1.4em auto;
  border-radius: var(--radius);
  display: block;
  max-width: 100%;
  height: auto;
}
.article-body blockquote {
  margin: 1.4em 0;
  padding: 16px 20px;
  background: var(--ink-50);
  border-left: 4px solid var(--ink-300);
  color: var(--ink-700);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 14px;
  font-feature-settings: normal;
  font-variant-numeric: tabular-nums;
}
.article-body th, .article-body td {
  border: 1px solid var(--color-line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.article-body th { background: var(--ink-50); font-weight: 700; }

/* ---------- 17. Breadcrumb ----------------------------------------- */
.breadcrumb {
  margin-block: 20px;
  font-size: 12px;
  color: var(--color-faint);
  letter-spacing: var(--tracking-head);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--ink-300);
}
.breadcrumb a { color: var(--ink-600); }
.breadcrumb a:hover { color: var(--ink-900); }
.breadcrumb [aria-current="page"] { color: var(--ink-700); }

/* ---------- 18. Video embed (responsive iframe) -------------------- */
.video-embed,
.article-body iframe[src*="youtube.com"],
.article-body iframe[src*="youtu.be"],
.article-body iframe[src*="youtube-nocookie.com"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 1.4em 0;
  border-radius: var(--radius);
  border: 0;
  background: #000;
}
.video-embed { position: relative; overflow: hidden; }
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- 19. Ranking cards (legacy cgr-* markup) ---------------- */

@media (min-width: 640px) {
}

/* Legacy ranking table wrapper */

/* FAQ (cgr- variant) */

/* Notice boxes (legacy cgr-*) */
.cgr-box-blue, .cgr-box-yellow, .cgr-box-red,
.cgr-box-green, .cgr-box-gray,
.cgr-box-yellow             { background: #FEFCE8; border-left: 4px solid #EAB308; padding: 14px 18px; border-radius: 8px; margin-block: 1em; }
.cgr-box-red                { background: #FEF2F2; border-left: 4px solid #EF4444; padding: 14px 18px; border-radius: 8px; margin-block: 1em; }
.cgr-box-green              { background: #ECFDF5; border-left: 4px solid #10B981; padding: 14px 18px; border-radius: 8px; margin-block: 1em; }

/* ---------- .attention 再設計 (2026-05-19) — 「役立つ操作TIP」を表現 ---------- */
/* 旧: 赤×padding無しで「エラー」に誤解されていた → 金×角丸×padding で雑誌調TIPカードに */
.attention {
  background: linear-gradient(135deg, var(--paper) 0%, var(--gold-100) 100%);
  border-left: 4px solid var(--gold-700);
  border-radius: 10px;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.5vw, 26px);
  margin-block: clamp(1em, 2.2vw, 1.6em);
  position: relative;
  box-shadow: 0 2px 8px -2px rgba(186, 117, 23, 0.08);
}
.attention::before {
  content: "💡 TIP";
  position: absolute;
  top: -10px;
  left: clamp(14px, 2vw, 18px);
  padding: 3px 10px;
  background: var(--gold-700);
  color: var(--paper);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  border-radius: 999px;
}
.attention p {
  margin: 0 0 0.7em;
  line-height: 1.85;
}
.attention p:first-of-type { margin-top: 0.4em; } /* TIPバッジとの余白 */
.attention p:last-child { margin-bottom: 0; }

/* Cgr lead / matome / step / check / point */
.cgr-lead {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-700);
  margin-bottom: 1.4em;
}
/* PR-7 (2026-05-20): .cgr-matome を削除（全28HTML で使用ゼロを確認） */
.cgr-step-list, .cgr-check-list {
  margin: 1em 0 1.4em;
  padding-left: 0;
  list-style: none;
}
.cgr-step-list li {
  counter-increment: step;
  position: relative;
  padding: 8px 8px 8px 40px;
  margin-bottom: 6px;
  border-radius: var(--radius);
  background: var(--ink-50);
  line-height: 1.8;
}
.cgr-step-list { counter-reset: step; }
/* fix: .article-body ol/ul (詳細度0,1,1) が .cgr-step-list/.cgr-check-list (0,1,0) の list-style:none を
   上書きしてしまい、標準マーカー「1. 2. 3.」が①②③バッジと二重表示されるのを防ぐ。
   同スコープ＋要素型セレクタ(0,2,1)で打ち消す（!important不使用）。 */
.article-body ol.cgr-step-list { list-style: none; margin: 1em 0 1.4em; padding-left: 0; }
.article-body .cgr-check-list ul { list-style: none; margin: 0; padding-left: 0; }
.cgr-step-list li::before {
  content: counter(step);
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  background: var(--ink-900);
  color: var(--gold-500);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 12px;
}
.cgr-check-list li {
  position: relative;
  padding: 4px 4px 4px 26px;
  line-height: 1.85;
}
.cgr-check-list li::before {
  content: "✓";
  position: absolute;
  left: 4px; top: 4px;
  color: var(--gold-600);
  font-weight: 800;
}

/* ---------- 20. Legacy "rank.rankN" markup compatibility ----------- */
.rank[data-rank] {
  position: relative;
  padding: 14px 16px 14px 78px;
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  margin: 14px 0;
  font-weight: 700;
  line-height: 1.55;
  min-height: 68px;
  display: flex;
  align-items: center;
}
.rank[data-rank]::before {
  content: attr(data-rank);
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-family: "Bodoni Moda", "Didot", serif;
  font-size: 38px;
  font-weight: 800;
  color: var(--gold-600);
  line-height: 1;
  width: 48px;
  text-align: center;
}
.rank[data-rank="1"] { border-color: var(--gold-500); background: var(--cream-50); }
.rank[data-rank="2"] { border-color: #C0C0C0; background: #F9FAFB; }
.rank[data-rank="3"] { border-color: #CD9B6B; background: #FDF6F0; }
.rank[data-rank="1"]::before { color: var(--gold-700); }
.rank[data-rank="2"]::before { color: var(--ink-400); }
.rank[data-rank="3"]::before { color: #B17350; }

/* ---------- 21. Legacy category list (catbox) ---------------------- */
/* (旧 Sec21 "Legacy voice/speech bubbles" は PR-7/8 で空化、PR-9 で削除済み) */
#categorylist, .catbox {
  margin: 1.4em 0;
}
.catbox {
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--paper);
  margin-bottom: 14px;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.catbox:hover { border-color: var(--gold-500); box-shadow: var(--shadow-2); }
.catbox .title {
  font-weight: 700;
  font-size: var(--fs-h4);
  margin-bottom: 8px;
  line-height: 1.45;
}
.catbox .title a { color: var(--ink-900); }
.catbox .title a:hover { color: var(--navy-700); }
.catbox p {
  color: var(--ink-600);
  font-size: 14px;
  line-height: 1.85;
  margin: 0 0 8px;
}
.catbox .more a {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 13px;
  color: var(--navy-700);
}
.catbox .more a::after { content: "→"; }
/* ============================================================
   PR-53 (2026-05-21): カテゴリ一覧の並べ替えツールバー
   #categorylist[data-sort-list] 内の .catbox を JS で並べ替え。
   トークンのみ使用・!important なし・BP は flex-wrap で吸収。
   ============================================================ */
.catlist-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.catlist-sort__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-600);
  margin-right: 2px;
}
.catlist-sort__btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 8px 14px;
  border: 1px solid var(--gold-400);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--gold-800);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.catlist-sort__btn:hover { background: var(--gold-50); }
.catlist-sort__btn:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }
.catlist-sort__btn.is-active {
  background: var(--gold-700);
  border-color: var(--gold-700);
  color: var(--paper);
}
/* PR-7 (2026-05-20): .entry_title を削除（全28HTML で使用ゼロを確認） */

/* point box */
.point {
  display: inline-block;
  background: var(--gold-600);
  color: var(--paper);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  margin: 8px 0;
}

/* "Sm-list" sidebar / related */
.sm-list { display: grid; gap: 8px; margin: 1em 0; }
.sm-list__cat {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-600);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Index TOC (このページの目次) */
/* ============================================
   Article Footer Navigation — back-to-category + pagetop
   記事末尾の2つのナビを統合デザインで揃える
   2026-05 — 編集サイト統一デザイン
   ============================================ */
.back-to-category {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}
.back-to-category a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.1rem 0.45rem;
  color: var(--gold-800);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  letter-spacing: 0.02em;
  transition: gap 0.25s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.back-to-category a:hover,
.back-to-category a:focus-visible {
  color: var(--gold-900);
  gap: 0.65rem;
  border-bottom-color: var(--gold-700);
  text-decoration: none;
}
/* .article-body 内での下線override
   PR-10 (2026-05-20): .article-body .back-to-category a (特異度 0,2,1) は
   .article-body a (特異度 0,1,1) より高いため !important 不要 */
.article-body .back-to-category a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.article-body .back-to-category a:hover,
.article-body .back-to-category a:focus-visible {
  text-decoration: none;
  border-bottom-color: var(--gold-700);
  color: var(--gold-900);
}

#pagetop {
  text-align: right;
  margin: 0.5rem 0 1.2rem;
  padding-top: clamp(0.6rem, 1.2vw, 0.85rem);
  border-top: 1px solid var(--color-line);
  font-size: 0.78rem;
}
#pagetop a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.95rem 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--ink-700);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.18s var(--ease);
}
#pagetop a::before {
  content: "↑";
  font-size: 0.95rem;
  color: var(--gold-800);
  transition: transform 0.25s var(--ease);
}
#pagetop a:hover,
#pagetop a:focus-visible {
  background: var(--gold-100);
  border-color: var(--gold-700);
  color: var(--gold-800);
  transform: translateY(-1px);
  text-decoration: none;
}
#pagetop a:hover::before {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-category a,
  #pagetop a,
  #pagetop a::before {
    transition: none;
  }
  #pagetop a:hover,
  #pagetop a:hover::before {
    transform: none;
  }
}

/* ---------- 23. 404 page styles (err-*) ---------------------------- */
.err-hero {
  padding-block: clamp(60px, 8vw, 100px);
  background:
    radial-gradient(60% 80% at 90% 10%, rgba(245,91,60,.10), transparent 60%),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-200) 100%);
}
.err-hero__inner {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.err-headline {
  font-family: "Bodoni Moda", serif;
  font-size: clamp(80px, 14vw, 180px);
  line-height: 1;
  color: var(--vermilion-600);
  font-weight: 800;
  letter-spacing: -.04em;
  margin: 0;
}
.err-lead {
  margin-top: 20px;
  font-size: clamp(16px, 2vw, 18px);
  color: var(--ink-700);
  line-height: 1.85;
}
.err-cta {
  margin-top: 28px;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.err-search {
  margin-top: 24px;
  max-width: 420px;
  margin-inline: auto;
}
.err-suggest {
  padding-block: clamp(40px, 6vw, 72px);
}
.err-suggest__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .err-suggest__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .err-suggest__grid { grid-template-columns: repeat(3, 1fr); }
}
.err-suggest__item {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.err-suggest__item:hover {
  border-color: var(--gold-500);
  transform: translateY(-2px);
}

/* ---------- 24. Reduce motion (global override) -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- 25. Sitemap (sm-card grid) ----------------------------- */
.sm-section { padding-block: clamp(40px, 6vw, 72px); }
.sm-section > .container > h2,
.sm-section > .container > h1 {
  font-size: var(--fs-h2);
  margin-bottom: 24px;
  padding-bottom: .3em;
  border-bottom: 2px solid var(--ink-900);
  line-height: 1.4;
}
.sm-section .grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .sm-section .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .sm-section .grid { grid-template-columns: repeat(3, 1fr); } }

.sm-card {
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.sm-card:hover {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.sm-card__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
}
.sm-card__no {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--gold-600);
  font-weight: 800;
  flex: 0 0 auto;
}
.sm-card__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0;
  flex: 1;
  line-height: 1.4;
}
.sm-card__count {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--color-faint);
  text-transform: uppercase;
  font-weight: 700;
  flex: 0 0 auto;
}
.sm-card .sm-list { display: grid; gap: 6px; margin: 0; padding: 0; }
.sm-card .sm-list li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 13px;
  line-height: 1.55;
}
.sm-card .sm-list li:last-child { border-bottom: 0; }
.sm-card .sm-list a { color: var(--ink-800); }
.sm-card .sm-list a:hover { color: var(--navy-700); }
.sm-list__cat {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-faint);
  text-transform: uppercase;
  background: var(--ink-50);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* ---------- 26. 404 page details ----------------------------------- */
.err-suggest__num {
  display: inline-block;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--gold-600);
  font-weight: 800;
  margin-right: 8px;
}
.err-tape {
  display: inline-block;
  padding: 4px 12px;
  background: var(--gold-100);
  color: var(--gold-800);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px dashed var(--gold-400);
  transform: rotate(-2deg);
  margin-bottom: 12px;
}

/* ---------- 27. backdrop-filter fallback (Safari iOS edge cases) -- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(254, 244, 222, 0.98);
  }
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* (旧 Sec28 "Selection guide" / Sec29 "Mobile card view" は空ルールのため PR-9 で削除) */

/* ---------- 28. Print stylesheet ----------------------------------- */
@media print {
  /* Hide navigation, search, CTA buttons, mobile drawer, footer ad-like areas */
  .site-header,
  .mobile-nav,
  .header-actions,
  .nav,
  .skip,
  .footer-search,
  .footer-bottom__links,
  #pagetop,
  .cgr-recommend,
  .menu-toggle {
    display: none !important;
  }

  /* Reset background & shadows */
  *, *::before, *::after {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000 !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.6;
    background: var(--paper);
    color: #000;
    font-feature-settings: normal;
  }

  /* Keep typography hierarchy */
  h1, h2, h3, h4 {
    page-break-after: avoid;
    color: #000 !important;
    border-color: #000 !important;
  }
  h2 { font-size: 16pt; margin-top: 1.4em; }
  h3 { font-size: 14pt; margin-top: 1.2em; }
  h4 { font-size: 12pt; margin-top: 1em; }

  /* Article body: full width when printing */

  /* Show full URL after external links */
  .article-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
    word-break: break-all;
  }
  /* Don't print URLs for internal anchors */
  .article-body a[href^="#"]::after,
  .article-body a[href^="./"]::after,
  .article-body a[href^="../"]::after {
    content: "";
  }

  /* Avoid orphan/widow lines in cards */

  /* Tables retain borders */
  table, th, td {
    border: 1px solid #888 !important;
    border-collapse: collapse;
  }
  th { background: #eee !important; -webkit-print-color-adjust: exact; }

  /* Skip ribbons and decorative elements */
  .feature-card__cta,
  .rank-card[data-rank]::before,
  .ticker,
  .trust-strip,
  .reading-progress,
  .float-top,
  .mini-toc,
  .article-meta__share,
  .toc-pills {
    display: none !important;
  }

  /* 印刷用URL付記: canonical URLを title 下に表示 */
  .page-hero__title::after {
    content: " — " attr(data-print-url);
    font-size: 10pt;
    color: #666;
    font-weight: normal;
  }

  /* score-card 印刷時の整形 */
  .score-card,
  .medal-strip,
  .tip-card,
  .use-case-card,
  .intro-feature,
  .guide-flow,
  .cta-block {
    page-break-inside: avoid;
    border: 1px solid #888 !important;
    border-radius: 0 !important;
    margin-block: 0.6em;
  }

  /* article-meta は日付情報だけ残して印刷 */
  .article-meta {
    border: 1px solid #888 !important;
    border-radius: 0 !important;
    padding: 8pt !important;
  }
  .article-meta__date-label {
    color: #444 !important;
  }

  /* 見出しの装飾線は黒で印字 */
  .article-body > h2 {
    border-left-color: #000 !important;
    padding-left: 8pt;
  }
  .article-body > h3 {
    border-left-color: #555 !important;
    padding-left: 6pt;
  }

  /* リンクは下線で */
  .article-body a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  /* メダル番号は強調表示 */
  .medal__num {
    font-weight: 900;
    color: #000 !important;
  }

  /* score-card__rank の大きな番号は確実に印刷 */
  .score-card__rank {
    color: #000 !important;
    font-weight: 900;
  }

  /* タップ非対応の動的アニメーションは無効化 */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* 改ページヒント */
  h1, h2 { page-break-before: auto; }
  h2 + p { page-break-after: avoid; }
  p { orphans: 3; widows: 3; }

  /* フッターは shortcut のみ表示 */
  .site-footer {
    border-top: 1px solid #888 !important;
    padding: 8pt !important;
  }
  .footer__brand p,
  .footer-grid > nav:not(:first-child),
  .footer-bottom {
    display: none !important;
  }
}

/* ==========================================================================
   ADDED 2026-05  ―  Magazine cover decorations (restored index.html)
   ========================================================================== */

/* ---------- 31. Stickers ------------------------------------------- */
.sticker--new {
  top: clamp(72px, 8vw, 100px);
  right: clamp(8px, 2vw, 28px);
  width: clamp(84px, 11vw, 132px);
  height: clamp(84px, 11vw, 132px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 45%),
    var(--vermilion-600);
  color: var(--paper);
  border: 3px solid var(--cream-100);
  box-shadow:
    4px 4px 0 var(--editorial-ink),
    0 14px 32px rgba(229,57,46,.4);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  transform: rotate(-12deg);
  animation:
    sticker-pop .6s cubic-bezier(.34,1.56,.64,1) 1.0s both,
    wiggle 5s ease-in-out 1.6s infinite;
}
.sticker--new small {
  display: block;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .26em;
  margin-top: 3px;
  opacity: .92;
}
.sticker--new::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.45);
}

.sticker--free {
  position: relative;
  display: inline-flex;
  margin-left: 10px;
  padding: 5px 10px;
  background: var(--magenta-600);
  color: var(--cream-100);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .2em;
  font-weight: 800;
  transform: rotate(4deg);
  border: 1.5px solid var(--editorial-ink);
  box-shadow: 2px 2px 0 var(--editorial-ink);
  vertical-align: middle;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  20%      { transform: rotate(-15deg) scale(1.03); }
  40%      { transform: rotate(-9deg)  scale(1.05); }
  60%      { transform: rotate(-13deg) scale(1.02); }
  80%      { transform: rotate(-11deg) scale(1.04); }
}
@keyframes sticker-pop {
  0%   { opacity: 0; transform: rotate(-30deg) scale(0); }
  60%  { opacity: 1; transform: rotate(-8deg) scale(1.15); }
  100% { opacity: 1; transform: rotate(-12deg) scale(1); }
}

/* ---------- 32. Wax seal ------------------------------------------- */
.wax-seal {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, var(--gold-400) 0%, var(--gold-600) 35%, var(--gold-700) 70%, var(--gold-800));
  color: var(--editorial-ink);
  border: 3px solid var(--editorial-ink);
  box-shadow:
    0 10px 22px rgba(176,122,31,.45),
    inset 0 2px 4px rgba(255,255,255,.4),
    inset 0 -3px 6px rgba(0,0,0,.25);
  font-family: "Bodoni Moda", serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-14deg);
  z-index: 5;
  pointer-events: none;
  animation:
    seal-drop .7s var(--ease) 1.15s both,
    seal-press 6s ease-in-out 2s infinite;
}
.wax-seal__inner {
  position: relative;
  z-index: 2;
  line-height: 1.15;
  letter-spacing: .12em;
}
.wax-seal__inner em {
  display: block;
  font-style: normal;
  font-size: 18px;
  font-family: "Bodoni Moda", serif;
  color: var(--editorial-ink);
  margin: 1px 0;
}
.wax-seal::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px dashed rgba(26,20,16,.45);
}
@keyframes seal-drop {
  0%   { opacity: 0; transform: rotate(15deg) scale(0) translateY(-40px); }
  70%  { opacity: 1; transform: rotate(-18deg) scale(1.1) translateY(0); }
  100% { opacity: 1; transform: rotate(-14deg) scale(1) translateY(0); }
}
@keyframes seal-press {
  0%, 100% { transform: rotate(-14deg) scale(1); }
  50%      { transform: rotate(-16deg) scale(1.04); }
}

/* ---------- 33. Squiggle underline --------------------------------- */
.squiggle {
  display: block;
  margin: -.18em 0 0 4px;
  width: clamp(180px, 24vw, 320px);
  height: 18px;
  color: var(--vermilion-600);
  overflow: visible;
}
.squiggle path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw-line 1.6s ease-out .8s forwards;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* ---------- 34. Sparkles (キラキラ) -------------------------------- */
/* PR-37 (2026-05-20): 旧 Sec56 CRITICAL FIX (L3267 付近) のサイズ暴走防止プロパティを
   ここに統合。span 要素は display: inline がデフォルトで width/height が効かないため
   display: block と max-* で保険をかける。これにより .sparkle 系の重複セレクタ
   ( .sparkle / .sparkle--1〜5 計 6件) を解消。 */
.sparkle {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  max-width: 32px;
  max-height: 32px;
  pointer-events: none;
  z-index: 2;
  color: var(--vermilion-600);
  animation: float-sparkle 5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(229,57,46,.25));
}
.sparkle svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; }
.sparkle--1 { top: 14%; left: 42%; width: 22px; height: 22px; color: var(--vermilion-500); animation-delay: 0s;   animation-duration: 4.2s; }
.sparkle--2 { top: 70%; left: 4%;  width: 28px; height: 28px; color: var(--gold-600);      animation-delay: 1.2s; animation-duration: 6.8s; }
.sparkle--3 { top: 35%; right: 38%; width: 18px; height: 18px; color: var(--magenta-500);  animation-delay: 2.4s; animation-duration: 3.2s; }
.sparkle--4 { bottom: 18%; right: 8%; width: 32px; height: 32px; color: var(--vermilion-600); animation-delay: 3.6s; animation-duration: 5.6s; }
.sparkle--5 { top: 6%; left: 8%; width: 14px; height: 14px; color: var(--gold-700);        animation-delay: .6s;  animation-duration: 7.4s; }
@keyframes float-sparkle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1);    opacity: .55; }
  25%      { transform: translateY(-8px) rotate(45deg) scale(1.1); opacity: 1; }
  50%      { transform: translateY(-14px) rotate(180deg) scale(.9); opacity: .85; }
  75%      { transform: translateY(-6px) rotate(270deg) scale(1.05); opacity: 1; }
}

/* ---------- 35. Confetti (紙吹雪) ---------------------------------- */
.confetti {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.confetti svg { width: 100%; height: 100%; }

/* ---------- 36. Peek arrow (まずはココから手描き矢印) -------------- */
.peek-arrow {
  position: absolute;
  top: -46px;
  left: -8px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-family: "Bodoni Moda", "Caveat", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 16px;
  color: var(--vermilion-800);
  transform: rotate(-8deg);
  z-index: 3;
  pointer-events: none;
  animation:
    hero-enter .8s var(--ease) 1.3s both,
    bob 2.4s ease-in-out 2.1s infinite;
}
@media (min-width: 640px) {
  .peek-arrow { display: inline-flex; top: -58px; left: -30px; }
}
.peek-arrow svg {
  margin-top: -2px;
  width: 70px;
  height: 50px;
  color: var(--vermilion-700);
  overflow: visible;
}
.peek-arrow svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw-line 1.4s ease-out 1.2s forwards;
}
@keyframes bob {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-8deg) translateY(-5px); }
}
@keyframes hero-enter {
  to { opacity: 1; transform: translateY(0) translateX(0); }
}

/* ---------- 37. Coverline hover arrow ------------------------------ */
.hero__coverline { position: relative; }
.hero__coverline::after {
  content: "→";
  position: absolute;
  right: 4px; top: 50%;
  transform: translate(20px, -50%);
  opacity: 0;
  color: var(--vermilion-600);
  font-weight: 800;
  font-size: 20px;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.hero__coverline:hover::after {
  transform: translate(0, -50%);
  opacity: 1;
}

/* ---------- 38. Star rating sparkle pulse -------------------------- */
.feature-card__rating .stars { position: relative; }
.feature-card__rating .stars::after {
  content: "✨";
  position: absolute;
  top: -12px;
  right: -14px;
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(212,162,76,.7));
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0;  transform: scale(.5) rotate(0deg); }
  40%      { opacity: 1;  transform: scale(1.2) rotate(20deg); }
  60%      { opacity: .9; transform: scale(1)   rotate(-12deg); }
}

/* ---------- 39. Trust strip (media badges) ------------------------- */
.trust-strip {
  background: var(--paper);
  border-block: 1px solid var(--color-line);
  padding-block: 28px;
}
.trust-strip__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  flex-wrap: wrap;
  justify-content: center;
}
.trust-strip__label {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-600);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.trust-strip__label::after {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--ink-300);
}
.trust-strip__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 40px);
}
.trust-strip__item {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 22px);
  color: var(--ink-400);
  letter-spacing: .04em;
  transition: color var(--t-base) var(--ease);
}
.trust-strip__item.is-jp {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(14px, 1.8vw, 17px);
}
.trust-strip__item:hover { color: var(--navy-900); }

/* ---------- 40. Ticker (marquee) ----------------------------------- */
.ticker {
  background: var(--navy-950);
  color: var(--paper);
  padding: 14px 0;
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.08);
}
.ticker__track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
  width: max-content;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .12em;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
}
.ticker__item .pip {
  color: var(--gold-500);
  font-family: "Bodoni Moda", serif;
  font-weight: 800;
  font-size: 16px;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ---------- 41. Hero entrance choreography ------------------------- */
.hero__masthead, .hero__subtitle, .hero__title,
.hero__lead, .hero__cta, .hero__coverlines, .feature-card {
  opacity: 0;
  animation: hero-enter .9s var(--ease) forwards;
}
.hero__masthead   { animation-delay: .05s; }
.hero__subtitle   { animation-delay: .15s; }
.hero__title      { animation-delay: .25s; transform: translateY(20px); }
.hero__lead       { animation-delay: .55s; }
.hero__cta        { animation-delay: .70s; }
.hero__coverlines { animation-delay: .85s; }
.feature-card     { animation-delay: .40s; transform: translateY(20px); }
.hero__cta .btn { will-change: transform; }
.hero__cta .btn:active { transform: scale(.96); }

/* ---------- 42. Reduce motion override for magazine ---------------- */
@media (prefers-reduced-motion: reduce) {
  .sticker--new, .wax-seal, .sparkle, .peek-arrow, .squiggle path,
  .feature-card__rating .stars::after,
  .hero__masthead, .hero__subtitle, .hero__title,
  .hero__lead, .hero__cta, .hero__coverlines, .feature-card,
  .ticker__track {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .sticker--new { transform: rotate(-12deg) !important; }
  .wax-seal     { transform: rotate(-14deg) !important; }
  .peek-arrow   { transform: rotate(-8deg) !important; }
  .sticker--free{ transform: rotate(4deg) !important; }
}

/* ---------- 43. Legacy ranking number classes (.rank1〜.rank10) ----- */
/* These are commonly used with data-rank attributes too. Keep silent
   styling when used alone (without data-rank) — visually identical to
   .rank[data-rank] but ranks 4+ are subtle. */
/* PR-7 (2026-05-20): .rank4〜.rank10 を削除（全28HTML で使用ゼロを確認）。
   .rank1/2/3 は flashmob/index.html と letitgo/cover-man.html で現役のため維持。 */
.rank1, .rank2, .rank3 {
  position: relative;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  margin: 14px 0;
  font-weight: 700;
  line-height: 1.55;
}
.rank1 { border-color: var(--gold-500); background: var(--cream-50); }
.rank2 { border-color: #C0C0C0; background: #F9FAFB; }
.rank3 { border-color: #CD9B6B; background: #FDF6F0; }

/* ---------- 44. Legacy decoration classes (carry-over) ------------- */
.accent {
  color: var(--vermilion-700);
  font-weight: 700;
}

/* Image-with-text response box used in letitgo / music pages */
.rbox1 {
  background: var(--ink-50);
  border-left: 4px solid var(--ink-300);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 1em 0 1.4em;
  font-size: 14px;
  line-height: 1.85;
}
.rbox1 p { margin: 0 0 .6em; }
.rbox1 p:last-child { margin-bottom: 0; }

/* Large-background label for ranking numbers in youtube-views-ranking */
.lbg {
  background: linear-gradient(180deg, transparent 55%, var(--gold-100) 55%);
  display: inline-block;
  padding: 2px 6px;
  font-weight: 700;
  letter-spacing: .02em;
}
.lbg--lg { font-size: 20px; }   /* 大サイズ修飾（ランキング再生回数表示など） */

.firstnode { list-style: none; padding: 0; margin: 0; }
.pd1 { padding-left: 1.2em; }

/* Shadow utility classes (legacy) */
.shadow1 { box-shadow: 0 2px 8px rgba(11,18,32,.06); }
.shadow3 { box-shadow: var(--shadow-3); }

/* Small hint text (legacy) */
.thint {
  font-size: 12px;
  color: var(--color-faint);
  letter-spacing: .02em;
}

/* ---------- 45. Page hero (compact magazine hero for subpages) ----- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--editorial-ink);
  padding-block: clamp(20px, 4vw, 48px) clamp(28px, 5vw, 60px);
  background:
    radial-gradient(60% 80% at 90% 10%, rgba(245,91,60,.07), transparent 60%),
    radial-gradient(50% 60% at 5% 90%,  rgba(217,53,90,.05), transparent 60%),
    linear-gradient(180deg, var(--cream-100) 0%, var(--cream-200) 100%);
  border-bottom: 1px solid rgba(26,20,16,.08);
}
/* Paper grain */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0 0.1 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .25;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.page-hero > * { position: relative; z-index: 1; }

.page-hero__masthead {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  background: var(--editorial-ink);
  color: var(--cream-100);
  border-radius: 0;
  font-family: "Bodoni Moda", serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
}
.page-hero__masthead .vol-no { color: var(--vermilion-500); }
.page-hero__masthead .sep {
  width: 1px; height: 12px;
  background: var(--cream-300);
  display: inline-block;
}

.page-hero .eyebrow {
  margin-top: 14px;
  display: inline-flex;
}

.page-hero__title {
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1.25;
  font-weight: 900;
  margin-top: 10px;
  letter-spacing: .005em;
  color: var(--editorial-ink);
  text-wrap: balance;
  font-feature-settings: "palt";
}
.page-hero__title .serif {
  font-family: "Bodoni Moda", "Noto Serif JP", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--magenta-600);
  letter-spacing: .01em;
}
.page-hero__title .mark {
  color: var(--vermilion-600);
  font-style: normal;
}

.page-hero__lead {
  margin-top: 14px;
  color: var(--ink-700);
  max-width: 640px;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.85;
}

/* PR-30 (2026-05-20): 記事冒頭の読了時間表示 (page-hero 内) */
.page-hero__readtime {
  display: inline-block;
  margin-top: clamp(8px, 1.5vw, 12px);
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-700);
  background: var(--gold-50);
  border: 1px solid var(--gold-300);
  border-radius: 999px;
}
.page-hero__readtime::before {
  content: "⏱ ";
  margin-right: 4px;
}

/* Decorative sparkle in page-hero (subtle) */
/* PR-35 (2026-05-20): L3286-3290 にあった重複定義（opacity:.5 + display:none !important）を
   統合。後勝ち順序で opacity:.5 が勝者だったためそちらを採用し、!important も不要に。 */
.page-hero .sparkle {
  z-index: 1;
  opacity: .5;
}
@media (max-width: 640px) {
  .page-hero .sparkle { display: none; }
}

/* Compact issue number at the corner (similar to .hero::after but smaller) */
.page-hero::after {
  content: attr(data-issue);
  position: absolute;
  right: -10px;
  bottom: -48px;
  font-family: "Bodoni Moda", "Didot", serif;
  font-weight: 800;
  font-size: clamp(140px, 22vw, 260px);
  line-height: 1;
  color: var(--vermilion-600);
  opacity: .05;
  letter-spacing: -.05em;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* Entrance animation parity with hero */
.page-hero__masthead, .page-hero .eyebrow,
.page-hero__title, .page-hero__lead {
  opacity: 0;
  animation: hero-enter .7s var(--ease) forwards;
}
.page-hero__masthead { animation-delay: .05s; }
.page-hero .eyebrow  { animation-delay: .15s; }
.page-hero__title    { animation-delay: .25s; transform: translateY(12px); }
.page-hero__lead     { animation-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  .page-hero__masthead, .page-hero .eyebrow,
  .page-hero__title, .page-hero__lead {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   ADDED 2026-05 ― Layout patches (PR-4: 2026-05-20 cleanup)
   旧「Fix: ...」セクションを整理。各ルールは引き続き有効で、コメントだけ
   コンポーネント帰属を明示する形に改めた。
   ========================================================================== */

/* ---------- A. .article-body 内の幅制約解除 (旧 Sec46) -------------
   article-body は本文（読み物）に対して --maxw-prose 制約だが、
   比較表・iframe など「広く見せる」要素は制約を外して container 幅いっぱいで表示させる。
   ★ PR-4 BUGFIX: 旧コードはセレクタリスト終端漏れで Sec48 ルールと結合し、
      本来の max-width 解除が実装されていなかった。本PRで修正。
   ★ PR-8 (2026-05-20): .cgr-guide/.voice-left/.vbox は全HTMLで使用ゼロのため削除。
      現役 (.table-wrap=3ファイル, iframe=13ファイル) のみ残置。 */
.article-body .table-wrap,
.article-body iframe {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

/* ---------- B. .page-hero + section の上余白調整 (旧 Sec48) -------- */
.page-hero + .section,
.page-hero + .section--tight,
.page-hero + article.section,
.page-hero + article.section--tight {
  padding-block-start: clamp(16px, 2.5vw, 28px);
}

/* ---------- C. 連続 .section の余白二重計上を防ぐ (旧 Sec49) ------- */
/* "Article + Article + Article" のような構成で縦余白が積み上がるのを防ぐ */
.section + .section,
.section + article.section,
article.section + .section,
article.section + article.section,
.section--tight + .section--tight,
.section--tight + article.section--tight,
article.section--tight + .section--tight,
article.section--tight + article.section--tight {
  padding-block-start: 0;
}
/* 同じく、article.section が section.section の直後に来るケースも */
.section--tight + section.section--tight,
section.section--tight + .section--tight {
  padding-block-start: 0;
}
/* section--tight の container 内に tldr / toc-pills が単独で置かれた場合、
   セクション padding と内部 margin の二重計上を解消 */
.section--tight > .container > .tldr:first-child,
.section--tight > .container > .toc-pills:first-child {
  margin-block-start: 0;
}
.section--tight > .container > .tldr:last-child,
.section--tight > .container > .toc-pills:last-child {
  margin-block-end: 0;
}

/* ---------- D. .page-hero 内の breadcrumb 詰め (旧 Sec50) ---------- */
.page-hero .breadcrumb {
  margin-block: 0 12px;
  font-size: 11px;
}

/* ---------- E. .article-body 内の画像レスポンシブ化 (旧 Sec51) ----- */
/* width/height属性つきの画像も常にレスポンシブに */
.article-body img,
.article-body picture > img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin-inline: auto;
}
/* Force aspect-ratio preservation for legacy width/height-attributed images */
.article-body img[width][height] {
  height: auto;
}

/* 旧 Sec52 (voice-left visual hierarchy): 実体ルールなしのため PR-4 で削除。
   旧 Sec54 (cgr-guide spacing inside article-body): 同上、PR-4 で削除。 */

/* ---------- F. .sparkle のサイズ暴走防止 (旧 Sec56 CRITICAL FIX) ---
   PR-37 (2026-05-20): 上の Section 34 (.sparkle 本体ブロック) に統合済み。
   ここにあった重複ルール (.sparkle / .sparkle--1〜5 各サイズ) は全て削除した。
   重複セレクタ 6 件解消。 */

/* PR-35 (2026-05-20): ここにあった .page-hero .sparkle の opacity と display 設定は
   上部の Decorative sparkle ブロック（L3134-3142 付近）に統合した。
   重複定義 + !important なしで実現できるためこのブロックは削除。 */

/* ============================================================================
   CTA Block - 別ページ誘導用の汎用ブロック
   ADDED 2026-05  ―  記事内から関連ページへ送客するためのコンポーネント
   使用方法：
   <aside class="cta-block" aria-labelledby="cta-id">
     <p class="cta-block__eyebrow">関連ランキング</p>
     <h3 id="cta-id" class="cta-block__title"><a href="...">タイトル →</a></h3>
     <p>説明文</p>
     <ul class="cta-block__list"><li>...</li></ul>
     <p class="cta-block__action"><a href="..." class="cta-block__btn">ボタン →</a></p>
   </aside>
   ============================================================================ */
/* 新案1: 横長エディトリアルバナー（マガジン推薦記事風）
   上下罫線型のミニマルな雑誌風レイアウト
   全16ファイル横展開 — 2026-05 抜本刷新 */
.cta-block {
  display: block;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto;
  max-width: var(--maxw-prose); /* 本文(article-body)と同じ列幅に揃える */
  padding: clamp(16px, 2.5vw, 22px) clamp(4px, 1vw, 8px);
  background: transparent;
  border: none;
  border-top: 1px solid var(--gold-700);
  border-bottom: 1px solid var(--gold-700);
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
  transition: border-color 0.25s var(--ease);
}

/* あわせて読みたい(cta-block)が .container 外（main直下）に置かれたページでも
   コンテナ中身と同じ幅で中央寄せにする。コンテナ内のcta-blockはmain直下でないため無影響。
   2026-05 追加（左寄れ崩れの構造修正） */
main > .cta-block,
.section > .cta-block {
  width: min(100% - 2 * var(--gutter), var(--maxw-prose));
  margin-inline: auto;
}

.cta-block:hover {
  border-top-color: var(--gold-800);
  border-bottom-color: var(--gold-800);
  box-shadow: none;
  transform: none;
}

/* eyebrow: "RECOMMENDED · あわせて読みたい" */
.cta-block__eyebrow {
  display: block;
  margin: 0 0 0.7rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color: var(--gold-800);
  background: none;
  text-transform: none;
  writing-mode: horizontal-tb;
  text-align: left;
  white-space: normal;
}
.cta-block__eyebrow::before {
  content: "RECOMMENDED";
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold-700);
  margin-right: 0.45em;
}
.cta-block__eyebrow::after {
  content: " ·";
  margin-left: -0.35em;
  margin-right: 0.35em;
  color: var(--gold-700);
  opacity: 0.7;
}
/* Hover 時の eyebrow 色変化を解除 */
.cta-block:hover .cta-block__eyebrow {
  background: none;
}

/* タイトル: 大きく雑誌的に */
.cta-block__title {
  margin: 0 0 0.55rem;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: 0.005em;
}
.cta-block__title a {
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s var(--ease);
}
.cta-block__title a:hover,
.cta-block__title a:focus-visible {
  color: var(--gold-800);
  border-bottom: none;
}

/* 説明文 */
.cta-block p {
  margin: 0.4rem 0 0;
  color: var(--ink-700);
  line-height: 1.65;
  font-size: 0.88rem;
}
.cta-block__list {
  margin: 0.3rem 0 0.4rem 1.1rem;
  padding: 0;
}
.cta-block__list li {
  margin: 0.4rem 0;
  line-height: 1.65;
  font-size: 0.88rem;
}
.cta-block__list li > a {
  display: inline-block;
  font-weight: 700;
  color: var(--gold-800);
  text-decoration: none;
  border-bottom: 1px dashed var(--gold-300);
  transition: color 0.18s, border-color 0.18s;
}
.cta-block__list li > a:hover,
.cta-block__list li > a:focus-visible {
  color: var(--vermilion-700);
  border-bottom-style: solid;
  border-bottom-color: var(--vermilion-700);
  outline: none;
}
/* 関連記事の説明文（cta-block__list 内）*/
.cta-block__list-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--ink-700);
  line-height: 1.6;
  font-weight: 400;
}

/* アクション：黒ボタンを廃止して上品なテキストリンク化
   PR-9 (2026-05-20): .article-body p の特異度(0,1,1)に勝つよう
   .article-body .cta-block__action とすることで !important を不要化 */
.cta-block__action,
.article-body .cta-block__action {
  margin: 0.85rem 0 0;
}
/* PR-39 (2026-05-20): 「あわせて読みたい」ブロック内のリンク装飾を
   `.cta-block__list li > a` と統一。ユーザー指摘により、上 2 つ (点線下線)
   と 3 つ目 (下線なし) でデザインが揃わず「レイアウト崩れ」に見えていたため、
   .cta-block__btn にも同じ dashed underline を適用して共通仕様化。 */
.cta-block__btn {
  /* PR-40 (2026-05-20): .cta-block__list li > a と完全に同じ box モデル
     (display: inline-block) に揃えて border-bottom が同じ位置に効くようにする。
     inline-flex + gap 0.35rem は矢印との余白用だったが、HTML 側で半角スペースか
     margin-left で代替可能なため inline-block にシンプル化。 */
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--gold-800);
  border-radius: 0;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.65;
  letter-spacing: 0.05em;
  box-shadow: none;
  border-bottom: 1px dashed var(--gold-300);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), border-bottom-style 0.2s var(--ease);
}
.cta-block__btn:hover,
.cta-block__btn:focus-visible {
  color: var(--vermilion-700);
  background: transparent;
  transform: none;
  box-shadow: none;
  gap: 0.65rem;
  border-bottom-style: solid;
  border-bottom-color: var(--vermilion-700);
}
.cta-block__btn:active {
  transform: none;
  box-shadow: none;
}

@media (max-width: 480px) {
  .cta-block {
    margin: 1.5rem auto;
    padding: 14px 0;
  }
  .cta-block__title {
    font-size: 1rem;
  }
  .cta-block p {
    font-size: 0.85rem;
  }
}

/* CTA Block - prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .cta-block,
  .cta-block__eyebrow,
  .cta-block__btn,
  .cta-block__title a {
    transition: none !important;
  }
  .cta-block:hover,
  .cta-block__btn:hover,
  .cta-block__btn:focus-visible,
  .cta-block__btn:active {
    transform: none !important;
  }
}

/* ============================================================================
   日本語タイポグラフィ強化（Japanese Typography）
   ADDED 2026-05  ―  日本語特有の禁則処理・英単語混在の折り返し最適化
   ・line-break: strict で句読点の行頭・行末禁則を厳密化
   ・見出しは word-break: keep-all で英単語を分割せず可読性UP
   ・本文内リンク（長URL）は break-all で枠外はみ出し防止
   ============================================================================ */
.article-body,
.article-body p,
.article-body li,
.article-body td,
.article-body th,
.article-body dd {
  line-break: strict;
}

/* 見出しは英単語を切らず日本語のみで折り返し（可読性優先） */
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.page-hero__title {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

/* 長URLや極端な英単語が枠外にはみ出すのを防止 */
.article-body a,
.article-body code,
.cta-block__title a {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* テーブルセル内の数値・英単語は折り返さない */

/* 全角約物（句読点・かっこ）の前後アキ調整（対応ブラウザのみ） */
@supports (text-spacing: auto) {
  .article-body {
    text-spacing: auto;
  }
}

/* ============================================================================
   Section Header - 記事先頭のヘッダーブロック
   ADDED 2026-05  ―  privacy.html / media.html等の小規模ページで利用
   ============================================================================ */
.section-header {
  margin-bottom: clamp(20px, 4vw, 32px);
}
.section-header .section-title {
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.35;
}

/* ============================================================================
   ユーティリティクラス（utility classes 2026-05）
   ADDED 2026-05  ―  インラインstyle排除のため、よく使うspacing/colorをクラス化
   ============================================================================ */
.u-mt-0 { margin-top: 0 !important; }
.u-mb-lg { margin-bottom: 32px; }
.u-mb-xl { margin-bottom: 48px; }
.u-mx-auto { margin-inline: auto; }
.u-text-center { text-align: center; }
.u-text-accent { color: var(--vermilion-600); }   /* マゼンタ系強調（旧#FF0A7A相当） */

/* ============================================================================
   .catbox の表示改善（カテゴリTOPの記事カード）
   ADDED 2026-05  ―  記事リストでタイトルが大きすぎ・下線が重い・英単語が
   変な位置で折り返す問題を解消
   ============================================================================ */
.catbox {
  padding: clamp(16px, 2.5vw, 24px);
}
.catbox .title {
  /* 見出しサイズ最適化（h4より控えめに、Sansタイプの記事リスト用） */
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
  /* 英単語を文中で切らない、日本語のみで折り返す（可読性UP） */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  /* バランスの良い改行（対応ブラウザのみ） */
  text-wrap: balance;
}
.catbox .title a {
  /* 重い下線を除去し、ホバー時のみアンダーラインで強調 */
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  color: var(--ink-900);
}
.catbox .title a:hover,
.catbox .title a:focus-visible {
  color: var(--navy-700);
  border-bottom-color: var(--gold-500);
}
/* article-body内に置かれる場合も継承で下線が出ないよう明示 */
.article-body .catbox .title a {
  text-decoration: none;
}

/* ============================================================================
   CTA Block - 特異度修正（.article-body a の継承を確実に上書き）
   UPDATED 2026-05  ―  横長エディトリアルバナー版に合わせて再調整
   ============================================================================ */
/* PR-11 (2026-05-20): .article-body .cta-block__btn (特異度 0,2,0=20) と
   .article-body a.cta-block__btn (0,2,1=21) は .article-body a (0,1,1=11) より
   高い特異度のため !important 不要。.cta-block__title a も同様 (0,2,1=21)。
   PR-40 (2026-05-20): PR-39 で .cta-block__btn 単独ルールを点線下線に変更したが、
   このスコープ版が特異度 0,2,0 で上書きしていたため効果が出ていなかった。
   feedback_specificity_modifier_rule メモリ規約に従い、スコープ版にも同じ
   点線下線スタイルを反映して完全統一する。 */
.article-body .cta-block__btn,
.article-body a.cta-block__btn {
  text-decoration: none;
  color: var(--gold-800);
  border-bottom: 1px dashed var(--gold-300);
  background: transparent;
}
.article-body .cta-block__btn:hover,
.article-body .cta-block__btn:focus-visible,
.article-body a.cta-block__btn:hover,
.article-body a.cta-block__btn:focus-visible {
  text-decoration: none;
  color: var(--vermilion-700);
  background: transparent;
  border-bottom-style: solid;
  border-bottom-color: var(--vermilion-700);
}
.article-body .cta-block__title a {
  text-decoration: none;
  border-bottom: none;
}
.article-body .cta-block__title a:hover,
.article-body .cta-block__title a:focus-visible {
  text-decoration: none;
  color: var(--gold-800);
  border-bottom: none;
}

/* PR-7 (2026-05-20): #entrylist + .entry_title 関連ブロック (約80行) を削除
   全28HTMLで使用ゼロを確認済み。関連リンク機能は別コンポーネント (.catbox 等) に統合済み。 */

/* ============================================================================
   .quick-view - 案B クイック比較セクション（記事冒頭のデータ中心ブロック）
   ADDED 2026-05  ―  上位3カード + 全10バーチャートで「1分で結論」体験
   ============================================================================ */
.quick-view {
  margin: clamp(2em, 4vw, 3em) 0;
  padding: clamp(20px, 3vw, 32px);
  background: linear-gradient(180deg, var(--cream-100) 0%, var(--paper) 100%);
  border: 1px solid var(--color-line);
  border-radius: 16px;
}
.quick-view > h2 {
  margin-top: 0;
}
.quick-view .section-num {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  color: var(--vermilion-600);
  font-size: 0.75em;
  margin-right: 0.5em;
  letter-spacing: 0.1em;
}

/* 上位3カードのグリッド */
.quick-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.5vw, 16px);
  margin: 1.5em 0;
}
@media (max-width: 640px) {
  .quick-pick-grid {
    grid-template-columns: 1fr;
  }
}

.quick-pick-card {
  display: block;
  padding: clamp(14px, 2vw, 20px);
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink-900);
  transition: transform 0.15s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  position: relative;
  overflow: hidden;
}
.quick-pick-card:hover,
.quick-pick-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(11, 18, 32, 0.08);
}

.quick-pick-card__rank {
  display: inline-block;
  font-family: "Bodoni Moda", serif;
  font-weight: 800;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  background: var(--ink-900);
  color: var(--cream-100);
  border-radius: 4px;
  margin-bottom: 10px;
}

.quick-pick-card__title {
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 6px;
  color: var(--ink-900);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.quick-pick-card__catch {
  font-size: 13px;
  color: var(--ink-600);
  margin: 0 0 10px;
  line-height: 1.5;
}
.quick-pick-card__feat {
  display: inline-block;
  font-size: 12px;
  color: var(--navy-700);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============================================================================
   .bg-info (details) - 案B 背景情報の折りたたみブロック
   ADDED 2026-05  ―  「詳しく知りたい人向け」のサブコンテンツ収納
   ============================================================================ */
details.bg-info {
  margin: clamp(1.5em, 3vw, 2em) 0;
  background: var(--cream-100);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease);
}
details.bg-info[open] {
  box-shadow: 0 2px 12px rgba(11, 18, 32, 0.04);
}
details.bg-info > summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(14px, 2vw, 18px) clamp(18px, 2.5vw, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(15px, 1.8vw, 16px);
  color: var(--ink-900);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
details.bg-info > summary::-webkit-details-marker { display: none; }
details.bg-info > summary::after {
  content: "＋";
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--cream-100);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  transition: transform 0.2s, background 0.2s;
}
details.bg-info[open] > summary::after { content: "−"; background: var(--gold-600); }
details.bg-info > summary:hover { background: var(--cream-200); }
details.bg-info[open] > summary { border-bottom-color: var(--color-line); }
details.bg-info .bg-info__body {
  padding: clamp(16px, 2.5vw, 28px);
  background: var(--paper);
}
/* 内部のh2/h3はサイズを抑える（重複ヘッダー風味を避ける） */
details.bg-info .bg-info__body > h2 {
  font-size: clamp(20px, 2.6vw, 24px);
  border-left: 3px solid var(--gold-500);
  padding-left: 12px;
  margin-top: 0;
}

/* ============================================================================
   .ranking-grid - 案B 4〜10位コンパクトグリッド
   ============================================================================ */
.ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin: clamp(1.5em, 3vw, 2em) 0;
}

/* ============================================================================
   .use-case-grid / .use-case-card - 案B フィーチャーグリッド（用途別おすすめ表）
   ADDED 2026-05  ―  テーブルではなくカード型で「用途×おすすめ」を一覧化
   使用方法：
   <div class="use-case-grid">
     <article class="use-case-card use-case-card--bal">
       <p class="use-case-card__tag">USE CASE 01</p>
       <p class="use-case-card__purpose">バランス型・日常利用</p>
       <div class="use-case-card__rec"><span class="use-case-card__rec-no">1st</span>ChatGPT</div>
       <div class="use-case-card__rec"><span class="use-case-card__rec-no">2nd</span>Claude</div>
       <p class="use-case-card__reason">選定理由</p>
     </article>
   </div>
   ============================================================================ */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(10px, 1.5vw, 14px);
  margin: clamp(1.5em, 3vw, 2em) 0;
}
.use-case-card {
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: clamp(14px, 2vw, 18px);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.use-case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11, 18, 32, 0.06);
}
/* 上辺カラーアクセント */
.use-case-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-700));
}
/* カラーバリエーション（上辺＋reasonの左ボーダー色を統一） */
.use-case-card--bal::before { background: linear-gradient(90deg, var(--gold-700), var(--gold-800)); }
.use-case-card--writing::before { background: linear-gradient(90deg, #7F77DD, #3C3489); }
.use-case-card--code::before { background: linear-gradient(90deg, #1D9E75, #085041); }
.use-case-card--research::before { background: linear-gradient(90deg, #378ADD, #0C447C); }
.use-case-card--workspace::before { background: linear-gradient(90deg, #5DCAA5, #0F6E56); }
.use-case-card--ms365::before { background: linear-gradient(90deg, #ED93B1, #993556); }
.use-case-card--sns::before { background: linear-gradient(90deg, #D85A30, #712B13); }
.use-case-card--free::before { background: linear-gradient(90deg, #97C459, #3B6D11); }
.use-case-card--privacy::before { background: linear-gradient(90deg, var(--ink-500), #2C2C2A); }
.use-case-card--multi::before { background: linear-gradient(90deg, #F09595, #791F1F); }

.use-case-card__tag {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 11px;
  color: var(--ink-600);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 6px 0 4px;
  font-weight: 700;
}
.use-case-card__purpose {
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 800;
  margin: 0 0 12px;
  line-height: 1.4;
  color: var(--ink-900);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.use-case-card__rec {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 8px 12px;
  background: var(--cream-100);
  border-radius: 8px;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--ink-900);
}
.use-case-card__rec-no {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: 15px;
  color: var(--gold-800);
  min-width: 30px;
  flex: 0 0 auto;
}
.use-case-card--writing .use-case-card__rec-no { color: #3C3489; }
.use-case-card--code .use-case-card__rec-no { color: #085041; }
.use-case-card--research .use-case-card__rec-no { color: #0C447C; }
.use-case-card--workspace .use-case-card__rec-no { color: #0F6E56; }
.use-case-card--ms365 .use-case-card__rec-no { color: #993556; }
.use-case-card--sns .use-case-card__rec-no { color: #712B13; }
.use-case-card--free .use-case-card__rec-no { color: #3B6D11; }
.use-case-card--privacy .use-case-card__rec-no { color: #2C2C2A; }
.use-case-card--multi .use-case-card__rec-no { color: #791F1F; }

.use-case-card__reason {
  font-size: 12px;
  color: var(--ink-600);
  margin: 10px 0 0;
  line-height: 1.6;
  padding-top: 10px;
  border-top: 1px dashed var(--color-line);
}

@media (prefers-reduced-motion: reduce) {
  .use-case-card { transition: none; }
}

/* ============================================================================
   .medal-strip / .medal - 案C メダルストリップ（5位までを横並び表示）
   ADDED 2026-05  ―  指標×順位 の多次元データを効率良くカード一覧
   使用方法：
   <div class="medal-strip">
     <p class="medal-strip__head"><i class="ti ti-chart-pie"></i>指標タイトル</p>
     <div class="medals">
       <div class="medal medal--1"><p class="medal__num">1st</p><p class="medal__name">名称</p><p class="medal__val">値</p></div>
       <div class="medal medal--2">...</div>
       ...
     </div>
     <p class="medal-strip__source">出典</p>
   </div>
   ============================================================================ */
.medal-strip {
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2.5vw, 20px);
  margin: clamp(0.8em, 1.5vw, 1em) 0;
  transition: box-shadow 0.2s var(--ease);
}
.medal-strip:hover {
  box-shadow: 0 4px 14px rgba(11, 18, 32, 0.04);
}
.medal-strip__head {
  font-size: clamp(14px, 1.8vw, 15px);
  font-weight: 800;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-900);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.medal-strip__head-icon {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-800);
  font-size: 14px;
  flex: 0 0 auto;
}
.medals {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
@media (max-width: 640px) {
  .medals {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
}
@media (max-width: 480px) {
  .medals {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
}
.medal {
  padding: 10px 8px;
  border-radius: 8px;
  text-align: center;
  background: var(--cream-100);
  border: 1px solid var(--color-line);
  position: relative;
}
.medal--1 {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-100));
  border-color: var(--gold-700);
  border-width: 1.5px;
}
.medal--2 {
  background: linear-gradient(135deg, var(--ink-100), var(--ink-200));
  border-color: var(--ink-500);
}
.medal--3 {
  background: linear-gradient(135deg, var(--vermilion-100), var(--vermilion-200));
  border-color: var(--vermilion-700);
}
.medal__num {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-600);
  margin: 0;
  line-height: 1;
  letter-spacing: 0.04em;
}
.medal--1 .medal__num { color: var(--gold-800); }
.medal--2 .medal__num { color: var(--ink-700); }
.medal--3 .medal__num { color: var(--vermilion-800); }

.medal__name {
  font-size: clamp(11px, 1.4vw, 12px);
  font-weight: 700;
  margin: 4px 0 2px;
  line-height: 1.3;
  color: var(--ink-900);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.medal__val {
  font-size: 10.5px;
  color: var(--ink-600);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.medal-strip__source {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--ink-600);
  font-style: italic;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .medal-strip { transition: none; }
}

/* ============================================================================
   .score-card - 案A スコアカード型（1AI=1カード、複数指標を1行で表示）
   ADDED 2026-05  ―  ランキング表をスキャンしやすい縦並びカードに
   使用方法：
   <div class="score-card score-card--top1">
     <div class="score-card__rank">1</div>
     <div class="score-card__info">
       <h4>ChatGPT</h4>
       <p class="score-card__dev">OpenAI</p>
       <div class="score-card__metrics">
         <span class="score-card__chip">iOS <strong>★4.9</strong></span>
       </div>
     </div>
     <div class="score-card__strong">バランス型・エコシステム最大</div>
   </div>
   ============================================================================ */
/* ============================================================================
   .score-card — リファクタ完了版 v4 (2026-05-19)
   方針:
     - Grid廃止 → Flexbox column (縦スタック) に統一
     - !important 全廃 (特異度はBEM構造で管理)
     - max-width: 160px の右寄せ問題を廃止
     - 中間ビューポート (700-900px) でも崩れない
   構造:
     .score-card
       └ .score-card__top    (横並び: rank + info + strong)
       └ .score-card__rate   (横並び: 星評価 + 👍ボタン)
   既存HTMLとの互換: .score-card__rank/info/strong/rate を直接の子としても受ける
   ============================================================================ */
/* --- .score-card 基本 (CLEAN v5 — 2026-05-20 PR-2 統合版) ---
   grid-template-areas で順序固定。
   - 1行目: rank + info
   - 2行目: strong (全幅)
   - 3行目: rate (全幅)
   - 4行目: details (全幅、is-expanded時のみ表示)
   PR-2 で 3 箇所に分散していた .score-card 定義を本ブロック1箇所に集約:
     - 旧 Def#1 (基本)
     - 旧 Def#2 (position: relative) ← お気に入り星バッジ等の絶対配置の基準点
     - 旧 Def#3 (details行付き grid-template-areas)  */
.score-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "rank info"
    "strong strong"
    "rate rate"
    "details details";
  column-gap: 14px;
  row-gap: 10px;
  padding: clamp(14px, 2vw, 18px);
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.score-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(11, 18, 32, 0.05);
}
.score-card--top1 {
  border: 1.5px solid var(--gold-700);
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--paper) 30%);
}
.score-card--top2 { border-color: var(--ink-500); }
.score-card--top3 { border-color: var(--vermilion-700); }

/* 子要素を grid-area に配置 */
.score-card > .score-card__rank { grid-area: rank; }
.score-card > .score-card__info { grid-area: info; min-width: 0; }
.score-card > .score-card__strong { grid-area: strong; }
.score-card > .score-card__rate { grid-area: rate; }

/* rank: 大きな数字を左に */
.score-card__rank {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 44px);
  color: var(--ink-600);
  line-height: 1;
  align-self: center;
  margin: 0;
}
.score-card--top1 .score-card__rank { color: var(--gold-800); }
.score-card--top2 .score-card__rank { color: var(--ink-700); }
.score-card--top3 .score-card__rank { color: var(--vermilion-800); }

/* info内: タイトル / dev / metrics / badges
   2026-05-20: h3 も対象に追加（h4スキップ問題の修正） */
.score-card__info h3,
.score-card__info h4 {
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 800;
  margin: 0 0 2px;
  line-height: 1.3;
  color: var(--ink-900);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.score-card__dev {
  font-size: 11px;
  color: var(--ink-600);
  margin: 0 0 6px;
  letter-spacing: 0.02em;
}
.score-card__metrics {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.score-card__chip {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--cream-100);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--ink-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.score-card__chip strong {
  color: var(--ink-900);
  font-weight: 700;
  margin-left: 3px;
}
.score-card--top1 .score-card__chip {
  background: var(--paper);
  border-color: var(--gold-300);
}

/* strong: 強み (右寄せ廃止、左寄せ全幅) */
.score-card__strong {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--ink-700);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  padding-top: 8px;
  border-top: 1px dashed var(--color-line);
}

@media (prefers-reduced-motion: reduce) {
  .score-card { transition: none; }
}

/* ============================================================================
   .guide-flow - 案C フローチャート風ステップガイド
   ADDED 2026-05  ―  下矢印でつながる順序立てた案内（記事まとめのフロー）
   使用方法：
   <div class="guide-flow">
     <div class="guide-flow__step">
       <div class="guide-flow__head">
         <span class="guide-flow__num">1</span>
         <span class="guide-flow__title">ステップタイトル</span>
         <span class="guide-flow__chip">START</span>
       </div>
       <p class="guide-flow__detail">補足説明</p>
     </div>
     ...
     <div class="guide-flow__step guide-flow__step--end">
       <div class="guide-flow__head">
         <span class="guide-flow__num">5</span>
         <span class="guide-flow__title">ゴールタイトル</span>
         <span class="guide-flow__chip guide-flow__chip--goal">GOAL</span>
       </div>
     </div>
   </div>
   ============================================================================ */
.guide-flow {
  background: var(--cream-100);
  padding: clamp(16px, 2.5vw, 24px);
  border-radius: 16px;
  border: 1px solid var(--color-line);
  margin: clamp(1.5em, 3vw, 2em) 0;
}
.guide-flow__step {
  background: var(--paper);
  border-radius: 10px;
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2.5vw, 18px);
  margin-bottom: 24px;
  position: relative;
  border: 1px solid var(--color-line);
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.guide-flow__step:last-child {
  margin-bottom: 0;
}
.guide-flow__step:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(11, 18, 32, 0.05);
}
/* 下矢印（次のステップへ） */
.guide-flow__step:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold-700);
  background: var(--cream-100);
  padding: 0 8px;
  z-index: 2;
  line-height: 1;
}
.guide-flow__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.guide-flow__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gold-700);
  color: var(--gold-100);
  display: grid;
  place-items: center;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 auto;
}
.guide-flow__title {
  font-size: clamp(14px, 1.8vw, 15px);
  font-weight: 700;
  flex: 1;
  line-height: 1.4;
  color: var(--ink-900);
  min-width: 60%;
}
.guide-flow__chip {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10px;
  padding: 3px 10px;
  background: var(--teal-100);
  color: var(--teal-800);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.guide-flow__chip--goal {
  background: var(--gold-100);
  color: var(--gold-800);
}
.guide-flow__detail {
  font-size: 12.5px;
  color: var(--ink-600);
  margin: 0;
  padding-left: 38px;
  line-height: 1.6;
}

/* 最終ステップは差別化 */
.guide-flow__step--end {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-100));
  border: 1.5px solid var(--gold-700);
}
.guide-flow__step--end .guide-flow__num {
  background: var(--gold-800);
  color: var(--gold-100);
}
.guide-flow__step--end .guide-flow__detail {
  color: var(--gold-800);
}

@media (prefers-reduced-motion: reduce) {
  .guide-flow__step { transition: none; }
}

/* ============================================================================
   .intro-feature - 案A 導入ブロック（記事冒頭のH2＋リード＋3視点ピラー）
   ADDED 2026-05  ―  ランキング系記事の「3視点で見ます」を視覚化
   使用方法：
   <div class="intro-feature">
     <p class="intro-feature__masthead">FEATURE — RANKING</p>
     <h2 class="intro-feature__h2">タイトル</h2>
     <p class="intro-feature__lead">リード文。<strong>重要部分</strong>はマーカー表現。</p>
     <div class="intro-feature__pillars">
       <div class="intro-feature__pillar">
         <span class="intro-feature__pillar-icon"><i class="ti ti-..."></i></span>
         <p class="intro-feature__pillar-label">VIEW 01</p>
         <p class="intro-feature__pillar-name">視点名</p>
       </div>
       ...
     </div>
   </div>
   ============================================================================ */
.intro-feature {
  background: linear-gradient(135deg, var(--cream-100) 0%, var(--paper) 100%);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px) clamp(22px, 3.5vw, 32px);
  border: 1px solid var(--color-line);
  position: relative;
  overflow: hidden;
  margin: clamp(1.5em, 3vw, 2.5em) 0;
}
.intro-feature::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-700), var(--gold-100));
}
.intro-feature__masthead {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 11px;
  color: var(--gold-800);
  letter-spacing: 0.14em;
  margin: 0 0 4px;
  font-weight: 700;
}
.intro-feature__h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.35;
  color: var(--ink-900);
  border-left: 0;
  padding-left: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.intro-feature__meta {
  font-size: 11px;
  color: var(--ink-600);
  margin: 0 0 14px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  letter-spacing: 0.08em;
}
.intro-feature__lead {
  font-size: clamp(14px, 1.7vw, 15px);
  color: var(--ink-900);
  line-height: 1.85;
  margin: 0 0 18px;
}
.intro-feature__lead strong {
  background: linear-gradient(180deg, transparent 60%, var(--gold-100) 60% 90%, transparent 90%);
  padding: 0 3px;
  font-weight: 800;
}
.intro-feature__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.5vw, 12px);
  padding-top: 16px;
  border-top: 0.5px dashed var(--color-line);
}
@media (max-width: 640px) {
  .intro-feature__pillars { grid-template-columns: 1fr; gap: 8px; }
}
.intro-feature__pillar {
  text-align: center;
  padding: clamp(10px, 2vw, 14px) 6px;
  background: var(--paper);
  border-radius: 10px;
  border: 0.5px solid var(--color-line);
  transition: transform 0.15s var(--ease), border-color 0.2s var(--ease);
}
.intro-feature__pillar:hover {
  transform: translateY(-2px);
  border-color: var(--gold-500);
}
.intro-feature__pillar-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-800);
  font-size: 18px;
  margin: 0 auto 6px;
}
.intro-feature__pillar-label {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10px;
  color: var(--ink-600);
  letter-spacing: 0.12em;
  margin: 0;
  font-weight: 700;
}
.intro-feature__pillar-name {
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 800;
  margin: 2px 0 0;
  color: var(--ink-900);
}

@media (prefers-reduced-motion: reduce) {
  .intro-feature__pillar { transition: none; }
}

/* ============================================
   TOC Pills (案D) — 目次ピル横並びコンポーネント
   ハッシュタグ風・編集マガジン調
   ============================================ */
.toc-pills {
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 24px) clamp(20px, 3vw, 28px);
  margin-block: clamp(20px, 3vw, 32px);
  position: relative;
  overflow: hidden;
}
.toc-pills::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-700), var(--gold-100));
}
.toc-pills__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 0.5px dashed var(--color-line);
}
.toc-pills__heading-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc-pills__eyebrow {
  font-family: "Bodoni Moda", serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--gold-800);
  margin: 0;
}
.toc-pills__title {
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 800;
  margin: 0;
  color: var(--ink-900);
  border: none;
  padding: 0;
  line-height: 1.3;
}
.toc-pills__meta {
  font-family: "Bodoni Moda", serif;
  font-size: 11.5px;
  color: var(--ink-600);
  margin: 0;
  letter-spacing: 0.08em;
  font-style: italic;
}
.toc-pills__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* PR-28 (2026-05-20): .article-body .toc-pill (特異度 0,2,0) で
   .article-body a (0,1,1) を上回り、!important 不要に */
.toc-pill,
.article-body .toc-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 16px 9px 14px;
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--ink-900);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  position: relative;
  white-space: nowrap;
}
.toc-pill__num {
  font-family: "Bodoni Moda", serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-800);
  letter-spacing: 0.08em;
  font-style: italic;
}
.toc-pill__hash {
  color: var(--gold-800);
  font-weight: 700;
  font-size: 14px;
  opacity: 0.85;
}
.toc-pill__text {
  color: var(--ink-900);
  transition: color 0.2s var(--ease);
}
.toc-pill:hover {
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--paper) 100%);
  border-color: var(--gold-700);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -4px rgba(186, 117, 23, 0.25);
}
.toc-pill:hover .toc-pill__text {
  color: var(--gold-800);
}
.toc-pill:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: 2px;
}
/* PR-32 (2026-05-20): .article-body .toc-pill (0,2,0) が .toc-pill--featured (0,1,0)
   の背景を上書きして白背景・白テキストになる事象を修正。featured 側にも
   .article-body スコープを追加して特異度を揃える。 */
.toc-pill--featured,
.article-body .toc-pill--featured {
  background: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-bright) 100%);
  border-color: var(--gold-700);
  box-shadow: 0 4px 10px -2px rgba(186, 117, 23, 0.35);
}
.toc-pill--featured .toc-pill__num,
.toc-pill--featured .toc-pill__hash,
.toc-pill--featured .toc-pill__text {
  color: var(--paper);
}
.toc-pill--featured .toc-pill__num {
  opacity: 0.85;
}
.toc-pill--featured:hover,
.article-body .toc-pill--featured:hover {
  background: linear-gradient(135deg, #A6691A 0%, var(--gold-700) 100%);
  border-color: var(--gold-800);
}
.toc-pill--featured:hover .toc-pill__text {
  color: var(--paper);
}

/* スマホ調整 */
@media (max-width: 640px) {
  .toc-pills__head {
    align-items: flex-start;
  }
  .toc-pills__list {
    gap: 6px;
  }
  .toc-pill {
    padding: 8px 12px 8px 11px;
    font-size: 12px;
    white-space: normal;
  }
  .toc-pill__hash {
    font-size: 13px;
  }
}

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce) {
  .toc-pill {
    transition: none;
  }
  .toc-pill:hover {
    transform: none;
  }
}

/* ============================================
   Tip Cards — ヒント／比較カード（編集マガジン調）
   table-w100 を視覚的にリッチなカードグリッドに置換
   2026-05 追加 — 「選び方の3つのヒント」用
   ============================================ */
.tip-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(10px, 1.5vw, 14px);
  margin: clamp(0.75rem, 2vw, 1.25rem) 0;
  list-style: none;
  padding: 0;
}
.tip-cards--two {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tip-cards--pricing {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.tip-card {
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 20px);
  position: relative;
  transition: transform 0.18s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
  overflow: hidden;
}
.tip-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-700), var(--gold-100));
  border-radius: 0 2px 2px 0;
}
.tip-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-500);
  box-shadow: 0 6px 16px -4px rgba(186, 117, 23, 0.18);
}
.tip-card__scenario {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--gold-800);
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.45;
  text-transform: none;
}
.tip-card__app {
  font-size: clamp(0.98rem, 1.7vw, 1.08rem);
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.4;
  color: var(--ink-900);
  letter-spacing: 0.005em;
}
.tip-card__reason {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-700);
}
.tip-card__reason strong {
  color: var(--gold-800);
  font-weight: 700;
}

/* Pricing variant — 無料/有料の2段構造 */
.tip-card--pricing {
  padding-block: clamp(14px, 2vw, 16px);
}
.tip-card--pricing .tip-card__app {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tip-card__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.tip-card__plan {
  padding: 8px 10px;
  background: rgba(250, 238, 218, 0.25);
  border-radius: 6px;
  border-left: 2px solid var(--color-line);
}
/* ============================================
   Tip Cards — vs / spec / pricing バリアント
   2026-05 — 再追加（dead code除去で誤削除された分）
   ============================================ */
.tip-cards--vs {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}
.tip-cards--spec {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tip-cards--pricing {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.tip-card__vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.tip-card__vs-col {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(250, 238, 218, 0.25);
  border-left: 2px solid var(--color-line);
}
.tip-card__vs-col--a {
  background: rgba(250, 238, 218, 0.55);
  border-left-color: var(--gold-700);
}
.tip-card__vs-label {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-600);
  font-weight: 700;
  margin: 0 0 3px;
}
.tip-card__vs-col--a .tip-card__vs-label {
  color: var(--gold-800);
}
.tip-card__vs-value {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-900);
  font-weight: 600;
}
.tip-card--spec .tip-card__app {
  margin-bottom: 4px;
}
.tip-card--spec .tip-card__reason {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-600);
  margin-bottom: 10px;
}
.tip-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.tip-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-700);
  line-height: 1.4;
}
.tip-card__chip--ok {
  background: var(--gold-100);
  border-color: var(--gold-500);
  color: var(--gold-800);
}
.tip-card__chip--ok strong {
  font-weight: 800;
  color: var(--gold-800);
}
.tip-card__chip--mid {
  background: #FFF8E8;
  border-color: var(--gold-300);
  color: var(--ink-700);
}
.tip-card__chip--no {
  background: #F5F5F5;
  border-color: var(--color-line);
  color: var(--ink-400);
  opacity: 0.75;
}
.tip-card--pricing .tip-card__app {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tip-card__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.tip-card__plan-tag {
  display: inline-block;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-600);
  font-weight: 700;
  margin-bottom: 3px;
}
.tip-card__plan--paid {
  background: rgba(250, 238, 218, 0.55);
  border-left-color: var(--gold-700);
}
.tip-card__plan--paid .tip-card__plan-tag {
  color: var(--gold-800);
}

/* guide-flow body/desc - 不足分追加 */
.guide-flow__body {
  flex: 1;
}
.guide-flow__desc {
  margin: 4px 0 0;
  color: var(--ink-700);
  line-height: 1.55;
  font-size: 0.85rem;
}

/* meta-list — administrator.html 等向け */
.meta-list {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 16px;
  margin: 1rem 0;
  padding: clamp(12px, 2vw, 16px);
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 8px;
}
.meta-list dt {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-800);
  letter-spacing: 0.05em;
}
.meta-list dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-900);
  font-weight: 600;
}
@media (max-width: 480px) {
  .meta-list { grid-template-columns: 1fr; gap: 2px; }
  .meta-list dt { margin-top: 6px; }
  .tip-card__vs { grid-template-columns: 1fr; }
}

/* Utility — マージン補助 */
.u-mt-small { margin-top: 0.75rem !important; }
.u-mt-medium { margin-top: 1.5rem !important; }
.u-mt-large { margin-top: 2.5rem !important; }
.u-mb-small { margin-bottom: 0.75rem !important; }
.u-mb-medium { margin-bottom: 1.5rem !important; }

/* ============================================
   Score Card - Detail variant
   詳細な記事用カード（catch + 説明 + メリ/デメ + 推薦）
   2026-05 追加 — chatgpt-app-ranking.html等向け
   ============================================ */
.score-card--detail {
  display: block;
  padding: 0;
  margin-block: clamp(14px, 2vw, 20px);
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.score-card--detail:hover {
  transform: translateY(-2px);
  border-color: var(--gold-500);
  box-shadow: 0 6px 16px -4px rgba(186, 117, 23, 0.18);
}
.score-card--detail .score-card__head {
  display: grid;
  grid-template-columns: clamp(60px, 8vw, 80px) 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(16px, 2.5vw, 22px) clamp(18px, 2.5vw, 24px) clamp(12px, 2vw, 16px);
  position: relative;
}
.score-card--detail .score-card__head::after {
  content: "";
  position: absolute;
  left: clamp(18px, 2.5vw, 24px);
  right: clamp(18px, 2.5vw, 24px);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-line), transparent);
}
.score-card--detail .score-card__rank {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  color: var(--gold-700);
  line-height: 1;
  text-align: center;
}
.score-card--detail.score-card--top1 .score-card__rank { color: var(--gold-700); }
.score-card--detail.score-card--top2 .score-card__rank { color: #8E8E8E; }
.score-card--detail.score-card--top3 .score-card__rank { color: var(--bronze); }
.score-card--detail .score-card__info {
  min-width: 0;
}
.score-card--detail .score-card__info h3,
.score-card--detail .score-card__info h4 {
  margin: 0 0 4px;
  padding: 0 0 0 12px;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink-900);
  border: none;
  border-left: 3px solid var(--gold-700);
}
.score-card--detail .score-card__catch {
  font-size: 0.85rem;
  color: var(--gold-800);
  font-weight: 600;
  margin: 0 0 0 12px;
  font-style: italic;
}
.score-card--detail .score-card__body {
  padding: clamp(14px, 2vw, 18px) clamp(18px, 2.5vw, 24px) clamp(16px, 2.5vw, 22px);
}
.score-card--detail .score-card__body > p {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-800);
}
.score-card--detail .score-card__body > p:last-of-type {
  margin-bottom: 0.85rem;
}
.score-card--detail .score-card__pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
@media (max-width: 640px) {
  .score-card--detail .score-card__pros-cons {
    grid-template-columns: 1fr;
  }
  .score-card--detail .score-card__head {
    grid-template-columns: 56px 1fr;
  }
}
.score-card--detail .score-card__pros,
.score-card--detail .score-card__cons {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.55;
}
.score-card--detail .score-card__pros {
  background: rgba(250, 238, 218, 0.45);
  border-left: 3px solid var(--gold-700);
}
.score-card--detail .score-card__cons {
  background: rgba(245, 245, 245, 0.6);
  border-left: 3px solid #B0B0AC;
}
.score-card--detail .score-card__pros strong,
.score-card--detail .score-card__cons strong {
  display: block;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--gold-800);
}
.score-card--detail .score-card__cons strong {
  color: var(--ink-700);
}
.score-card--detail .score-card__recommend {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--gold-100) 0%, #FFF8E8 100%);
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-900);
}
.score-card--detail .score-card__recommend strong {
  color: var(--gold-800);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .score-card--detail { transition: none; }
  .score-card--detail:hover { transform: none; }
}

/* ============================================
   Score Card - Video variant
   動画ランキング用カード（順位 + iframe + メタ情報）
   2026-05 追加 — youtube-views-ranking 等向け
   ============================================ */
.score-card--video {
  display: block;
  padding: 0;
  margin-block: clamp(14px, 2vw, 20px);
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.score-card--video:hover {
  transform: translateY(-2px);
  border-color: var(--gold-500);
  box-shadow: 0 6px 16px -4px rgba(186, 117, 23, 0.18);
}
.score-card--video .score-card__head {
  display: grid;
  grid-template-columns: clamp(60px, 8vw, 80px) 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding: clamp(14px, 2vw, 18px) clamp(18px, 2.5vw, 22px) clamp(10px, 1.5vw, 14px);
  border-bottom: 1px solid var(--color-line);
}
.score-card--video.score-card--top1 .score-card__rank { color: var(--gold-700); }
.score-card--video.score-card--top2 .score-card__rank { color: #8E8E8E; }
.score-card--video.score-card--top3 .score-card__rank { color: var(--bronze); }
.score-card--video .score-card__rank {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(36px, 4.5vw, 48px);
  font-weight: 800;
  color: var(--gold-700);
  line-height: 1;
  text-align: center;
}
.score-card--video .score-card__metric {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 12px;
  background: var(--gold-100);
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-800);
  margin-top: 2px;
}
.score-card--video .score-card__metric-label {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
}
.score-card--video .score-card__metric-value {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
}
/* ============================================================================
   動画埋め込み 共通基底（PR-49, 2026-05-20）
   16:9 レスポンシブ動画ラッパーの共通スタイル。score-card / media-card /
   feature-video / video-frame の4コンポーネントで再利用し、同一記述の重複
   （旧: 4〜5箇所に分散）を1箇所に集約。各コンポーネント固有の
   margin / border-radius / padding のみ各クラス側で上書きする。
   ============================================================================ */
.score-card--video .score-card__video,
.media-card__video,
.feature-video__media,
.video-frame {
  position: relative;
  background: #000;
  aspect-ratio: 16 / 9;
  overflow: hidden; /* iframe はみ出し防止 */
}
.score-card--video .score-card__video iframe,
.media-card__video iframe,
.feature-video__media iframe,
.video-frame iframe {
  position: absolute; /* 親に確実に収める */
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* 各動画ラッパーの個別差分のみ */
.score-card--video .score-card__video { padding: 0; }
.score-card--video .score-card__meta {
  padding: clamp(10px, 1.5vw, 14px) clamp(18px, 2.5vw, 22px) clamp(14px, 2vw, 18px);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-700);
}
.score-card--video .score-card__meta p {
  margin: 4px 0 0;
}
.score-card--video .score-card__meta p:first-child {
  margin-top: 0;
  font-weight: 600;
  color: var(--ink-900);
}

@media (prefers-reduced-motion: reduce) {
  .score-card--video { transition: none; }
  .score-card--video:hover { transform: none; }
}

/* ============================================
   Reading Progress Bar
   ページ上部に固定表示される読書進捗バー
   2026-05 追加 — 記事ページのUX向上
   ============================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--z-overlay);
  background: rgba(0,0,0,0.04);
  pointer-events: none;
  transform: translateZ(0);
}
.reading-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold-700) 0%, var(--gold-bright) 50%, #E8A845 100%);
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(186, 117, 23, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress__bar { transition: none; }
}

/* ============================================
   Floating Back-to-Top Button
   右下に固定表示される金色丸ボタン
   2026-05 追加 — スクロール時に表示
   ============================================ */
.float-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-700) 0%, var(--gold-bright) 100%);
  color: var(--paper);
  text-decoration: none;
  box-shadow: 0 4px 16px -2px rgba(186, 117, 23, 0.45), 0 2px 4px rgba(0,0,0,0.15);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.25s var(--ease);
  z-index: var(--z-overlay);
  border: none;
}
.float-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.float-top:hover,
.float-top:focus-visible {
  background: linear-gradient(160deg, var(--gold-800) 0%, var(--gold-700) 100%);
  box-shadow: 0 6px 22px -2px rgba(186, 117, 23, 0.55), 0 2px 6px rgba(0,0,0,0.2);
  transform: translateY(-2px) scale(1);
  outline: none;
}
.float-top svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.float-top__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .float-top { transition: opacity 0.15s; }
  .float-top:hover, .float-top:focus-visible { transform: none; }
}

/* スマホでは少し小さく */
@media (max-width: 480px) {
  .float-top {
    width: 42px;
    height: 42px;
    right: 14px;
    bottom: 14px;
  }
  .float-top svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================
   Scroll Reveal — フェードイン演出
   data-reveal 属性のついた要素がスクロールで現れる
   2026-05 追加
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   見出し装飾強化（ワクワク感UP）
   article-body内の h2/h3 を編集マガジン風に
   2026-05 追加
   ============================================ */

/* article-body内の H2: 大きめ + 左金線 + Bodoni Moda 番号風 */
.article-body > h2,
.article-body h2:not([class]):not(.toc-pills__title):not(.intro-feature__h2):not(.section-title) {
  position: relative;
  margin-block: clamp(1.75rem, 3vw, 2.5rem) clamp(0.75rem, 1.5vw, 1.25rem);
  padding: 0.2em 0 0.2em 1em;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink-900);
  border-left: 5px solid var(--gold-700);
  letter-spacing: 0.005em;
}
.article-body > h2::before,
.article-body h2:not([class]):not(.toc-pills__title):not(.intro-feature__h2):not(.section-title)::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 5px;
  height: 0;
  background: linear-gradient(180deg, var(--gold-700), var(--gold-bright));
  transform: translateY(-50%);
  border-radius: 2px;
  transition: height 0.4s var(--ease);
}
.article-body > h2.is-visible::before,
.article-body h2:not([class]):not(.toc-pills__title):not(.intro-feature__h2):not(.section-title).is-visible::before {
  height: 100%;
}

/* article-body内の H3: 小さめ + 細金線 */
.article-body > h3,
.article-body h3:not([class]):not(.score-card__info > h3) {
  position: relative;
  margin-block: clamp(1.25rem, 2vw, 1.75rem) 0.75rem;
  padding-left: 0.7em;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-900);
  border-left: 3px solid var(--gold-500);
}

/* article-body内の H4: 番号付きフロー風 */
.article-body > h4 {
  margin-block: clamp(1rem, 1.5vw, 1.4rem) 0.5rem;
  padding-left: 0.5em;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--gold-800);
  border-left: 2px solid var(--gold-300);
}

@media (prefers-reduced-motion: reduce) {
  .article-body > h2::before { transition: none; height: 100%; }
}

/* ============================================
   記事内画像のホバー演出（ワクワク感UP）
   article-body 内の picture/img を対象に
   2026-05 追加
   ============================================ */
.article-body picture,
.article-body > p > img,
.article-body > p > picture {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  background: var(--ink-50);
  transition: box-shadow 0.3s var(--ease);
}
.article-body picture img {
  transition: transform 0.4s var(--ease);
  display: block;
}
.article-body picture:hover {
  box-shadow: 0 8px 24px -4px rgba(186, 117, 23, 0.18);
}
.article-body picture:hover img {
  transform: scale(1.03);
}
/* rank画像等の小サイズはそのまま */
.article-body picture img[width="60"],
.article-body picture img[height="60"] {
  border-radius: 50%;
}

/* iframe にもホバー */
.article-body iframe,
.score-card__video iframe {
  border-radius: 8px;
  transition: box-shadow 0.3s var(--ease);
}
.article-body iframe:hover,
.score-card__video iframe:hover {
  box-shadow: 0 6px 18px -4px rgba(186, 117, 23, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .article-body picture,
  .article-body picture img,
  .article-body iframe,
  .score-card__video iframe {
    transition: none;
  }
  .article-body picture:hover img { transform: none; }
}

/* ============================================
   ボタン/リンクの軽量マイクロインタラクション
   2026-05 追加 — ボタン押下時のフィードバック
   ============================================ */
button:not(:disabled):active,
.iconbtn:active,
.menu-toggle:active {
  transform: scale(0.97);
}
.cta-block__btn:active {
  transform: scale(0.98);
}

/* リンクのフォーカス時の視認性向上（金色アウトライン） */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-700);
  outline-offset: 3px;
  border-radius: 4px;
}

/* selection色を金色に */
::selection {
  background: var(--gold-100);
  color: var(--ink-900);
}

/* ============================================
   Article Meta Footer
   記事末尾の投稿日・更新日・SNSシェア
   2026-05 追加
   ============================================ */
.article-meta {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 22px);
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(12px, 2vw, 20px);
  align-items: center;
}
.article-meta__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--ink-700);
  line-height: 1.4;
}
.article-meta__date-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.article-meta__date-label {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--gold-800);
  font-weight: 700;
  text-transform: uppercase;
}
.article-meta__date-value {
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.article-meta__share {
  display: flex;
  gap: 6px;
}
.article-meta__share-label {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--ink-600);
  font-weight: 700;
  margin-right: 4px;
  align-self: center;
}
.article-meta__share-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--color-line);
  color: var(--ink-700);
  text-decoration: none;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.article-meta__share-btn:hover,
.article-meta__share-btn:focus-visible {
  background: var(--gold-100);
  border-color: var(--gold-700);
  color: var(--gold-800);
  transform: translateY(-2px);
  text-decoration: none;
}
.article-meta__share-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .article-meta {
    grid-template-columns: 1fr;
  }
  .article-meta__share {
    justify-content: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .article-meta__share-btn { transition: none; }
  .article-meta__share-btn:hover { transform: none; }
}

/* ============================================
   Footer Enhancement — リンクのホバー演出
   2026-05 追加 — フッターリンクの視認性向上
   ============================================ */
.footer-list a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s var(--ease), padding-left 0.25s var(--ease);
}
.footer-list a::before {
  content: "→";
  color: var(--gold-500);
  opacity: 0;
  margin-right: -8px;
  transition: opacity 0.25s var(--ease), margin-right 0.25s var(--ease);
}
.footer-list a:hover,
.footer-list a:focus-visible {
  color: var(--gold-300);
  padding-left: 4px;
}
.footer-list a:hover::before,
.footer-list a:focus-visible::before {
  opacity: 1;
  margin-right: 0;
}

/* ブランドマークの軽いホバー */
.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  transform: scale(1.08) rotate(-5deg);
}
.brand__mark {
  transition: transform 0.3s var(--ease);
}

/* footer 全体に上罫線アクセント → PR-3 で .site-footer 本体定義に position:relative を統合済み。
   かつての ::before 金色グラデ罫線は ::after MAGAZINE リボンに役割を譲ったため削除。 */

@media (prefers-reduced-motion: reduce) {
  .footer-list a,
  .footer-list a::before,
  .brand__mark {
    transition: none;
  }
  .brand:hover .brand__mark { transform: none; }
}

/* ============================================
   Sticky Mini TOC
   スクロール時に右下に表示される折りたたみ目次
   toc-pillsのリンクを再利用、長文記事のナビ補助
   2026-05 追加
   ============================================ */
.mini-toc {
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(70px, 8vw, 84px); /* float-topの上に */
  /* 2026-05-19: 幅を25%圧縮（旧 clamp(260px, 26vw, 320px)） */
  width: clamp(195px, 19.5vw, 240px);
  max-height: min(60vh, 480px);
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: 0 6px 20px -4px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.mini-toc.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.mini-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(160deg, var(--gold-700) 0%, var(--gold-bright) 100%);
  color: var(--paper);
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  transition: background 0.2s var(--ease);
}
.mini-toc__toggle:hover {
  background: linear-gradient(160deg, #854F0B 0%, var(--gold-700) 100%);
}
.mini-toc__toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-toc__toggle-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}
.mini-toc[data-open="true"] .mini-toc__toggle-icon {
  transform: rotate(180deg);
}
.mini-toc__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.mini-toc[data-open="true"] .mini-toc__body {
  max-height: 380px;
  overflow-y: auto;
}
.mini-toc__list {
  list-style: none;
  margin: 0;
  padding: 6px 4px;
}
.mini-toc__list li {
  margin: 0;
}
.mini-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  color: var(--ink-800);
  text-decoration: none;
  font-size: 0.78rem;
  line-height: 1.4;
  border-radius: 6px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.mini-toc__list a:hover,
.mini-toc__list a:focus-visible {
  background: var(--gold-100);
  color: var(--gold-800);
  text-decoration: none;
}
.mini-toc__num {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-800);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.mini-toc__text {
  flex: 1;
}

/* スマホでは隠す（フッターとフローティング戻るボタンで対応） */
@media (max-width: 640px) {
  .mini-toc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-toc,
  .mini-toc__toggle-icon,
  .mini-toc__body,
  .mini-toc__list a {
    transition: none;
  }
}

/* ============================================
   Feature Cards — 番号付き機能カード（メリット用）
   2026-05 追加 — 無機質テキストブロックを視覚的にリッチに
   ============================================ */
/* ============================================================================
   .feature-card — CLEAN v5 (2026-05-19)
   方針: grid-template-areas で構造化、絶対配置廃止、overflow:hidden廃止、
        日本語テキストの折り返しを完全保証、min-width:0でgridセルの溢れ防止
   ============================================================================ */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(10px, 1.5vw, 14px);
  margin: clamp(1rem, 2vw, 1.5rem) 0;
  list-style: none;
  padding: 0;
}
.feature-card {
  /* grid-areas: 番号 タイトル / 番号 本文 */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num body";
  column-gap: 14px;
  row-gap: 6px;
  align-items: start;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.2vw, 22px);
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  position: relative;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.feature-card::before {
  /* 番号は通常フローのgrid-area, no absolute positioning */
  content: attr(data-num);
  grid-area: num;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 800;
  color: var(--gold-700);
  line-height: 1;
  opacity: 0.95;
  padding-top: 2px;
  flex-shrink: 0;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-500);
  box-shadow: 0 6px 16px -4px rgba(186, 117, 23, 0.18);
}
.feature-card__title {
  grid-area: title;
  margin: 0 0 4px;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.4;
  padding: 0;
  border: none;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.feature-card__body {
  grid-area: body;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ink-700);
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.feature-card__body p {
  margin: 0 0 0.45em;
}
.feature-card__body p:last-child {
  margin-bottom: 0;
}
/* スマホでは1列にしてタイトルが詰まらないように */
@media (max-width: 640px) {
  .feature-card {
    column-gap: 10px;
    padding: 14px;
  }
  .feature-card::before {
    font-size: 28px;
  }
}

/* Concern variant — 気になる点用（コーラル/赤系アクセント） */
.feature-card--concern::before {
  color: var(--bronze);
}
.feature-card--concern::after {
  background: linear-gradient(180deg, rgba(201, 125, 77, 0.5), transparent);
}
.feature-card--concern:hover {
  border-color: var(--bronze);
  box-shadow: 0 6px 16px -4px rgba(201, 125, 77, 0.18);
}

/* ============================================
   Highlight Cards — カテゴリ別大型カード（利用目的用）
   2026-05 追加
   ============================================ */
.highlight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(12px, 2vw, 18px);
  margin: clamp(1rem, 2vw, 1.5rem) 0;
  list-style: none;
  padding: 0;
}
.highlight-card {
  position: relative;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 2.5vw, 24px);
  background: linear-gradient(160deg, var(--gold-100) 0%, var(--paper) 60%);
  border: 1px solid var(--gold-300);
  border-radius: 14px;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
  overflow: hidden;
}
.highlight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px -4px rgba(186, 117, 23, 0.28);
}
.highlight-card__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--gold-500);
}
.highlight-card__num {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  color: var(--gold-700);
  line-height: 1;
}
.highlight-card__title {
  flex: 1;
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.35;
  padding: 0;
  border: none;
}
.highlight-card__pct {
  display: inline-block;
  padding: 3px 10px;
  background: var(--gold-700);
  color: var(--paper);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
}
.highlight-card__body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-800);
}
.highlight-card__body p {
  margin: 0 0 0.5em;
}
.highlight-card__body p:last-child {
  margin-bottom: 0;
}
.highlight-card__body ul {
  margin: 8px 0 0 1em;
  padding: 0;
  font-size: 0.82rem;
}
.highlight-card__body li {
  margin: 4px 0;
}

/* ============================================
   Highlight Quote — 大型引用風まとめカード
   2026-05 追加 — 「まとめ」セクション用
   ============================================ */
.highlight-quote {
  position: relative;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0;
  padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 40px);
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 60%, var(--gold-100) 100%);
  border: 1px solid var(--gold-300);
  border-radius: 16px;
  overflow: hidden;
}
.highlight-quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, var(--gold-700), var(--gold-bright), var(--gold-100));
}
.highlight-quote::after {
  content: "\201D";
  position: absolute;
  top: 8px;
  right: 16px;
  font-family: "Bodoni Moda", serif;
  font-size: clamp(70px, 10vw, 110px);
  font-weight: 700;
  color: var(--gold-300);
  opacity: 0.35;
  line-height: 1;
  pointer-events: none;
}
.highlight-quote__eyebrow {
  display: inline-block;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--gold-800);
  margin: 0 0 12px;
  padding: 3px 12px;
  background: var(--gold-100);
  border-radius: 999px;
  text-transform: uppercase;
}
.highlight-quote__body {
  font-size: clamp(0.95rem, 1.7vw, 1.05rem);
  line-height: 1.8;
  color: var(--ink-900);
}
.highlight-quote__body p {
  margin: 0 0 0.8em;
}
.highlight-quote__body p:last-child {
  margin-bottom: 0;
}
.highlight-quote__body strong {
  color: var(--gold-800);
  font-weight: 800;
}

/* ============================================
   Info Callout — 小型インフォボックス
   2026-05 追加 — 「活用シーン」短文ハイライト用
   ============================================ */
.info-callout {
  margin: clamp(1rem, 2vw, 1.5rem) 0;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 22px);
  background: linear-gradient(135deg, rgba(250, 238, 218, 0.4) 0%, var(--paper) 100%);
  border-left: 4px solid var(--gold-700);
  border-radius: 0 10px 10px 0;
  position: relative;
}
.info-callout__icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  background: var(--gold-700);
  color: var(--paper);
  border-radius: 50%;
  vertical-align: middle;
  font-weight: 800;
  font-size: 14px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
}
.info-callout p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .highlight-card {
    transition: none;
  }
  .feature-card:hover,
  .highlight-card:hover {
    transform: none;
  }
}

/* ============================================
   Hero Metrics — page-hero下に数値バッジ
   ユーザー引き込み強化のためのキー数値表示
   2026-05 追加
   ============================================ */
.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.5vw, 14px);
  margin-top: clamp(14px, 2vw, 20px);
  padding: 0;
  list-style: none;
}
.hero-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px;
  background: rgba(250, 238, 218, 0.9);
  border: 1px solid var(--gold-500);
  border-radius: 10px;
  min-width: 110px;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.hero-metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -4px rgba(186, 117, 23, 0.25);
}
.hero-metric__label {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--gold-800);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.hero-metric__value {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.hero-metric__sub {
  font-size: 11px;
  color: var(--ink-600);
  font-weight: 600;
  margin-top: 1px;
}

/* ============================================
   TL;DR Highlight — 記事上部の要点ハイライト
   読者が「これは読む価値あり」を3秒で判断できる
   2026-05 追加
   ============================================ */
.tldr {
  margin: clamp(1.25rem, 2.5vw, 2rem) 0;
  padding: clamp(16px, 2.5vw, 22px) clamp(18px, 2.5vw, 26px);
  background: linear-gradient(135deg, var(--paper) 0%, var(--gold-100) 100%);
  border: 1.5px solid var(--gold-500);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.tldr::before {
  content: "TL;DR";
  position: absolute;
  top: -1px;
  left: clamp(14px, 2vw, 20px);
  padding: 4px 12px;
  background: var(--gold-700);
  color: var(--paper);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  border-radius: 0 0 8px 8px;
}
.tldr__title {
  margin: 14px 0 12px;
  font-size: clamp(0.92rem, 1.7vw, 1.05rem);
  font-weight: 800;
  color: var(--ink-900);
  padding: 0;
  border: none;
  line-height: 1.4;
}
.tldr__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tldr__point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-800);
}
.tldr__point::before {
  content: counter(tldr-counter);
  counter-increment: tldr-counter;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--gold-700);
  color: var(--paper);
  border-radius: 50%;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
}
.tldr__points { counter-reset: tldr-counter; }
.tldr__point strong {
  color: var(--gold-800);
  font-weight: 700;
}

/* ============================================
   Section Number Badge — H2前に章番号バッジ
   進捗感UP & 読み疲れ軽減
   2026-05 追加
   ============================================ */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding: 0;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-800);
  font-weight: 700;
  text-transform: uppercase;
}
.section-badge::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold-700), transparent);
}
.section-badge__num {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold-800);
}

/* ============================================
   FAQ Enhanced — details の装飾強化
   2026-05 追加
   ============================================ */
.faq details,
details.bg-info {
  margin-block: 8px;
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.25s var(--ease);
}
.faq details[open],
details.bg-info[open] {
  border-color: var(--gold-500);
  box-shadow: 0 4px 12px -4px rgba(186, 117, 23, 0.15);
}
.faq details summary,
details.bg-info summary {
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2vw, 18px) clamp(12px, 2vw, 16px) clamp(38px, 5vw, 48px);
  font-size: clamp(0.93rem, 1.7vw, 1rem);
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
  position: relative;
  list-style: none;
  transition: background 0.2s var(--ease);
}
.faq details summary::-webkit-details-marker,
details.bg-info summary::-webkit-details-marker { display: none; }
.faq details summary::before,
details.bg-info summary::before {
  content: "Q";
  position: absolute;
  left: clamp(10px, 1.5vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--gold-700);
  color: var(--paper);
  border-radius: 50%;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: 12px;
}
.faq details summary::after,
details.bg-info summary::after {
  content: "+";
  position: absolute;
  right: clamp(14px, 2vw, 18px);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--gold-700);
  font-size: 18px;
  font-weight: 700;
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after,
details.bg-info[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq details summary:hover,
details.bg-info summary:hover {
  background: rgba(250, 238, 218, 0.5);
}
.faq details > *:not(summary),
details.bg-info > *:not(summary),
details.bg-info .bg-info__body {
  padding: 4px clamp(14px, 2vw, 18px) clamp(14px, 2vw, 18px) clamp(38px, 5vw, 48px);
  position: relative;
}
.faq details > *:not(summary)::before,
details.bg-info > *:not(summary)::before {
  content: "A";
  position: absolute;
  left: clamp(10px, 1.5vw, 14px);
  top: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--gold-100);
  color: var(--gold-800);
  border-radius: 50%;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: 12px;
}
.faq details p,
details.bg-info p {
  margin: 4px 0;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--ink-700);
}

@media (prefers-reduced-motion: reduce) {
  .hero-metric, .faq details summary::after, details.bg-info summary::after {
    transition: none;
  }
}

/* ============================================
   Editor Badge — 編集部独自視点バッジ
   差別化のためのユニーク要素 — 2026-05 追加
   ============================================ */
.editor-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.3;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  text-transform: uppercase;
  margin: 0;
}
.editor-badge::before {
  content: "★";
  font-style: normal;
  font-size: 11px;
  line-height: 1;
}
/* バリアント */
.editor-badge--pick {
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  color: var(--paper);
  box-shadow: 0 2px 6px rgba(186, 117, 23, 0.3);
}
.editor-badge--pick::before { content: "★"; }
.editor-badge--beginner {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid #86EFAC;
}
.editor-badge--beginner::before { content: "○"; color: #16A34A; }
.editor-badge--pro {
  background: rgba(11, 18, 32, 0.92);
  color: var(--paper);
}
.editor-badge--pro::before { content: "▲"; color: var(--gold-bright); }
.editor-badge--value {
  background: rgba(250, 238, 218, 0.85);
  color: var(--gold-800);
  border: 1px solid var(--gold-500);
}
.editor-badge--value::before { content: "¥"; font-style: italic; color: var(--gold-700); }
.editor-badge--secure {
  background: rgba(59, 130, 246, 0.12);
  color: #1E40AF;
  border: 1px solid #93C5FD;
}
.editor-badge--secure::before { content: "◆"; color: #2563EB; }
.editor-badge--japanese {
  background: linear-gradient(135deg, #FFE4E6 0%, #FCE7F3 100%);
  color: #BE185D;
  border: 1px solid #F9A8D4;
}
.editor-badge--japanese::before { content: "JP"; font-family: "Bodoni Moda", serif; }

/* editor-badges グループ */
.editor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 0;
}

/* score-card 内 editor-badges */
.score-card .editor-badges {
  margin-top: 8px;
}

/* ============================================
   Data Source Strip — データ透明化ブロック
   信頼性訴求のため記事先頭で出典明示
   ============================================ */
.source-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: clamp(0.75rem, 1.5vw, 1.25rem) 0 clamp(1rem, 2vw, 1.5rem);
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--paper) 0%, rgba(250, 238, 218, 0.4) 100%);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--gold-700);
  border-radius: 0 10px 10px 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-700);
}

/* article-meta 内の読了時間表示 */
.article-meta__readtime {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 12px;
  background: var(--gold-100);
  border: 1px solid var(--gold-500);
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}
.article-meta__readtime-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--gold-700);
  border-radius: 50%;
  flex-shrink: 0;
}
.article-meta__readtime-value {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--gold-800);
  font-size: 0.85rem;
}
.article-meta__readtime-label {
  font-size: 0.72rem;
  color: var(--ink-700);
  font-weight: 600;
}



/* ============================================
   Good Button + Star Rating（Amazon/YouTube風）
   ランキング項目の右側に inline 配置
   2026-05 再設計
   ============================================ */
/* score-card__rate: 星評価 + 👍ボタンの横並びエリア
   .score-card は grid-template-areas で配置。flexで内部を横並びに */
.score-card__rate {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 16px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-line);
}
.score-card--detail .score-card__rate,
.score-card--video .score-card__rate {
  margin: 0;
  padding: 10px clamp(18px, 2.5vw, 24px) 14px;
  border-top: 1px dashed var(--color-line);
  background: rgba(250, 238, 218, 0.15);
}

/* 星評価表示 (Amazon風) */
.star-rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-700);
  white-space: nowrap;
}
.star-rate__stars {
  display: inline-flex;
  gap: 1px;
  color: var(--star-fill);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.5px;
}
.star-rate__stars::before {
  content: "★★★★★";
  background: linear-gradient(90deg, var(--star-fill) var(--rate, 0%), #DDD var(--rate, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.star-rate__num {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  color: var(--ink-900);
  font-size: 0.9rem;
}
/* グッドボタン (YouTube風) */
.good-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  background: #F4F4F1;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-800);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease);
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.good-btn:hover,
.good-btn:focus-visible {
  background: var(--gold-100);
  color: var(--gold-800);
  outline: none;
}
.good-btn:active {
  transform: scale(0.96);
}
.good-btn__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 1;
  font-size: 16px;
  transition: transform 0.3s var(--ease);
}
.good-btn__count {
  font-variant-numeric: tabular-nums;
}
.good-btn__label {
  display: none; /* テキストは tooltip で代用 */
}

/* tooltip on hover */
.good-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  background: var(--ink-900);
  color: var(--paper);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 10;
}
.good-btn::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 4px solid transparent;
  border-top-color: var(--ink-900);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.good-btn:hover::after,
.good-btn:focus-visible::after,
.good-btn:hover::before,
.good-btn:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 投票済み状態 */
.good-btn.is-voted {
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  color: var(--paper);
}
.good-btn.is-voted .good-btn__icon {
  animation: good-pulse 0.5s var(--ease);
}

@keyframes good-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.3) rotate(-8deg); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .good-btn, .good-btn__icon, .good-btn::after, .good-btn::before {
    transition: none;
  }
  .good-btn:active { transform: none; }
  .good-btn.is-voted .good-btn__icon { animation: none; }
}

/* ============================================
   .score-card 補助ルール (CLEAN v4 — 2026-05-19)
   !important全廃 / 単純なBEM特異度のみ
   ============================================ */

/* editor-badges (info内) */
.score-card .editor-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* --- .score-card--detail / --video バリアント上書き ---
   detail/video は中身が複雑なため block レイアウトに切り替え。
   特異度を .score-card--detail (0,1,0) より高くするため二重クラスで指定。 */
.score-card.score-card--detail,
.score-card.score-card--video {
  display: flex;
  flex-direction: column;
  grid-template-areas: none;
  grid-template-columns: none;
  padding: 0;
  gap: 0;
}
.score-card.score-card--detail > .score-card__head,
.score-card.score-card--video > .score-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 2vw, 20px) clamp(16px, 2.5vw, 22px) clamp(10px, 1.5vw, 14px);
  border-bottom: 1px dashed var(--color-line);
  order: 1;
}
/* video variant では動画 → 評価 → meta の順 */
.score-card.score-card--video > .score-card__video {
  order: 2;
}
.score-card.score-card--video > .score-card__rate {
  order: 3;
}
.score-card.score-card--video > .score-card__meta {
  order: 4;
}
.score-card.score-card--detail > .score-card__body {
  display: block;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 22px) clamp(16px, 2vw, 20px);
  order: 2;
}
/* detail variant では body → rate の順（既存仕様維持） */
.score-card.score-card--detail > .score-card__rate {
  order: 3;
}
.score-card.score-card--detail > .score-card__rate,
.score-card.score-card--video > .score-card__rate {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 0;
  padding: 12px clamp(16px, 2.5vw, 22px) 14px;
  border-top: 1px dashed var(--color-line);
  background: rgba(250, 238, 218, 0.18);
}
/* video variant の rate は動画直下、上下に区切り線 */
.score-card.score-card--video > .score-card__rate {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px dashed var(--color-line);
  background: linear-gradient(135deg, rgba(250, 238, 218, 0.35), rgba(255, 255, 255, 0.5));
}
/* video variant の meta は最後に表示、上に余白 */
.score-card.score-card--video > .score-card__meta {
  padding: clamp(12px, 1.8vw, 16px) clamp(16px, 2.5vw, 22px) clamp(14px, 2vw, 18px);
}

/* --- 共通 .star-rate (シンプル化、!important全廃) --- */
.star-rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--ink-700);
  white-space: nowrap;
  flex-shrink: 0;
}
.star-rate__stars {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  position: relative;
}
.star-rate__stars::before {
  content: "★★★★★";
  background: linear-gradient(90deg, var(--star-fill) var(--rate, 0%), rgba(180,180,180,0.45) var(--rate, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.star-rate__num {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--ink-900);
  font-size: 0.95rem;
}

/* --- スマホ専用調整 --- */
@media (max-width: 640px) {
  .score-card {
    column-gap: 10px;
    padding: 14px;
  }
  .score-card__rank { font-size: 32px; }
  .score-card__info h4 { font-size: 15px; }
}

/* ============================================================================
   ▼ INTERACTIVE FEATURES v5 — 2026-05-19
   雑誌調の高級感を保ちながら4機能を追加
   ① Count-up animation
   ② Favorite button + filter UI
   ③ Compare cart (sticky bar + modal)
   ④ Hover flip card
   + 高級感micro-animation
   ============================================================================ */

/* =========================
   ① Count-up animation 用クラス
   ========================= */
[data-count-up] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
[data-count-up]::after {
  /* 数字の右下に小さなドット（カウント中のアクセント） */
  content: "";
  display: inline-block;
  width: 0;
}

/* =========================
   ② Favorite button (heart-like)
   ========================= */
.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-600);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.fav-btn:hover {
  background: var(--gold-100);
  border-color: var(--gold-700);
  transform: scale(1.08);
}
.fav-btn.is-favorited {
  background: linear-gradient(135deg, #FF6B6B, #E63946);
  border-color: #C92A2A;
  color: var(--paper);
}
.fav-btn.is-favorited:hover {
  background: linear-gradient(135deg, #FF8888, #E63946);
}
.fav-btn::before {
  content: "♡";
  display: inline-block;
  line-height: 1;
  font-size: 18px;
}
.fav-btn.is-favorited::before {
  content: "♥";
}
.fav-btn.fav-pulse {
  animation: fav-pulse 0.5s ease;
}
@keyframes fav-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
/* score-card 内では position: relative が必要 → PR-2 で .score-card 本体定義に統合済み（4108行）。
   tip-card / feature-card / medal-strip__row はここで継続して指定。 */
.tip-card, .feature-card, .medal-strip__row { position: relative; }

/* =========================
   ② Filter bar
   ========================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(1rem, 2vw, 1.5rem) 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--paper) 0%, rgba(250, 238, 218, 0.3) 100%);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  align-items: center;
}
.filter-bar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-600);
  text-transform: uppercase;
  margin-right: 4px;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--ink-700);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.filter-btn:hover {
  background: var(--gold-100);
  border-color: var(--gold-700);
  color: var(--gold-800);
}
.filter-btn.is-active {
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  color: var(--paper);
  border-color: var(--gold-700);
  box-shadow: 0 2px 8px -2px rgba(186, 117, 23, 0.4);
}
.filter-btn__icon {
  font-size: 14px;
}

/* hidden items fade out smoothly */
[data-filter-item] {
  transition: opacity 0.3s var(--ease);
}
[data-filter-item][hidden] {
  display: none;
}

/* =========================
   ③ Compare cart sticky bar
   ========================= */
.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(140%);
  width: min(960px, calc(100% - 24px));
  background: linear-gradient(135deg, var(--ink-900) 0%, #1A2332 100%);
  color: var(--paper);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s;
}
.compare-bar.is-active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.compare-bar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.compare-bar__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.compare-bar__icon {
  font-size: 18px;
  color: var(--gold-bright);
}
.compare-bar__title {
  letter-spacing: 0.06em;
}
.compare-bar__count {
  padding: 3px 9px;
  background: rgba(216, 149, 53, 0.25);
  color: #FAC775;
  border-radius: 999px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.compare-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  overflow: hidden;
}
.compare-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 12px;
  color: var(--paper);
  max-width: 180px;
}
.compare-bar__chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-bar__chip-x {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
}
.compare-bar__chip-x:hover { color: var(--paper); }
.compare-bar__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.compare-bar__clear,
.compare-bar__open {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
}
.compare-bar__clear {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.compare-bar__clear:hover {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.1);
}
.compare-bar__open {
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  color: var(--paper);
  border: 1px solid var(--gold-700);
}
.compare-bar__open:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
}
.compare-bar__open:not(:disabled):hover {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-700));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(216, 149, 53, 0.4);
}

@media (max-width: 640px) {
  .compare-bar__inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .compare-bar__chips { display: none; }
  .compare-bar__label { justify-content: center; }
  .compare-bar__actions { justify-content: stretch; }
  .compare-bar__open { flex: 1; }
}

/* Compare checkbox (visible on each card) */
.compare-check {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--gold-700);
}
.compare-check + .compare-check__label {
  position: absolute;
  top: 8px;
  left: 36px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-600);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.compare-check:checked + .compare-check__label,
.compare-check:hover + .compare-check__label {
  opacity: 1;
  transform: translateX(0);
}
.compare-check:checked + .compare-check__label {
  background: var(--gold-700);
  color: var(--paper);
  border-color: var(--gold-700);
}

/* Compare modal */
.compare-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: compare-fade-in 0.2s;
}
@keyframes compare-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.compare-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.compare-modal__panel {
  position: relative;
  background: var(--paper);
  border-radius: 16px;
  max-width: 960px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4);
  animation: compare-pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes compare-pop-in {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.compare-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-line);
}
.compare-modal__title {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  margin: 0;
  color: var(--ink-900);
}
.compare-modal__close {
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--ink-600);
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
}
.compare-modal__close:hover { color: var(--ink-900); }
.compare-modal__scroll {
  overflow: auto;
  padding: 8px 22px 22px;
}
.compare-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.compare-modal__table th,
.compare-modal__table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
.compare-modal__table thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  color: var(--gold-800);
  border-bottom: 2px solid var(--gold-700);
  font-size: 14px;
}
.compare-modal__table tbody th {
  font-weight: 700;
  color: var(--ink-700);
  background: var(--cream-100);
  white-space: nowrap;
  width: 25%;
}

/* =========================
   ④ Flip card
   ========================= */
.flip-card {
  perspective: 1000px;
}
.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card__inner,
.flip-card.is-flipped .flip-card__inner {
  transform: rotateY(180deg);
}
.flip-card__front,
.flip-card__back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card__back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--paper) 100%);
  padding: 16px;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* =========================
   ★高級感 micro-animation
   ========================= */

/* 数字に上品な揺らぎ */
@keyframes editorial-number-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.score-card__rank {
  animation: editorial-number-rise 0.6s ease-out backwards;
}
.score-card:nth-child(2) .score-card__rank { animation-delay: 0.08s; }
.score-card:nth-child(3) .score-card__rank { animation-delay: 0.16s; }
.score-card:nth-child(4) .score-card__rank { animation-delay: 0.24s; }
.score-card:nth-child(5) .score-card__rank { animation-delay: 0.32s; }

/* カードのhover弾性 */
.score-card,
.tip-card,
.feature-card,
.use-case-card,
.medal-strip__row {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.25s ease;
}
.score-card:hover,
.tip-card:hover,
.feature-card:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 8px 24px -6px rgba(186, 117, 23, 0.18);
  border-color: var(--gold-500);
}

/* 見出しに高級感の下線 */
h2.section-title,
.article-body h2 {
  position: relative;
}
h2.section-title::after,
.article-body h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-700), transparent);
  transition: width 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}
h2.section-title.is-visible::after,
.article-body h2.is-visible::after,
[data-reveal].is-visible h2::after {
  width: 60px;
}

/* CTAブロックに微妙なshimmer */
.cta-block,
.tldr {
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.7s ease;
  pointer-events: none;
}
.cta-block:hover::before {
  left: 100%;
}

/* ランキング1位の冠アニメ
   左上にはcompare-check (left:8px)、右上にはfav-btn (right:8px) があるため
   王冠は中央上部に配置。score-card は overflow: hidden ではないが、
   念のため上部マージンで完全に収まるよう top: 4px に配置 */
.score-card--top1 {
  /* 王冠が収まる余白を上部に確保 (PR-5: !important削除、ソース順序で十分上書き可能) */
  padding-top: clamp(28px, 4vw, 36px);
  overflow: visible;
}
.score-card--top1::before {
  content: "👑";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(186, 117, 23, 0.4));
  animation: crown-bounce 2.4s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
@keyframes crown-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); }
  50% { transform: translateX(-50%) translateY(-3px) rotate(4deg); }
}
/* video variant では padding-top が __head 内padding と二重になるため調整 (PR-5: !important削除、特異度で十分) */
.score-card--video.score-card--top1 {
  padding-top: 0;
}
.score-card--video.score-card--top1 > .score-card__head {
  padding-top: clamp(28px, 4vw, 36px);
  position: relative;
}
.score-card--video.score-card--top1::before {
  top: 4px;
}

/* グラスフィルター効果（hero画像など） */
.hero-metrics__value {
  background: linear-gradient(135deg, var(--gold-800), var(--gold-700) 50%, var(--gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* スクロール時の上品な数字回転 */
.score-card__rank:hover {
  transform: rotate(-4deg) scale(1.05);
  color: var(--gold-700);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* prefers-reduced-motion 全アニメ無効化 */
@media (prefers-reduced-motion: reduce) {
  .compare-bar,
  .compare-modal,
  .compare-modal__panel,
  .score-card,
  .score-card__rank,
  .score-card--top1::before,
  .fav-btn,
  .filter-btn,
  .cta-block::before,
  .flip-card__inner,
  h2.section-title::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================================
   ⑤ Score-card 詳細パネル — クリック/ホバーで展開
   2026-05-19 追加 — 各カード内の隠し情報をスマートに表示
   ============================================================================ */
.score-card__details {
  grid-area: details;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1),
              opacity 0.3s ease,
              padding 0.3s ease;
  padding: 0 8px;
  border-top: 1px dashed transparent;
}
.score-card.is-expanded .score-card__details {
  max-height: 320px;
  opacity: 1;
  padding: 12px 8px 6px;
  border-top: 1px dashed var(--color-line);
}
/* PR-2: details 行を含む grid-template-areas は .score-card 本体定義（4108行付近）に統合済み */
.score-card__details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 14px;
  font-size: 12px;
}
.score-card__details-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.score-card__details-key {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-800);
}
.score-card__details-val {
  font-size: 12px;
  color: var(--ink-800);
  font-weight: 500;
  line-height: 1.4;
}

/* 詳細トグルボタン */
.score-card__details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 12px 4px 10px;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--ink-700);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.score-card__details-toggle:hover,
.score-card__details-toggle:focus-visible {
  background: var(--gold-100);
  border-color: var(--gold-700);
  color: var(--gold-800);
  outline: none;
}
.score-card__details-toggle::before {
  content: "⌄";
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.3s var(--ease);
  font-weight: 700;
}
.score-card.is-expanded .score-card__details-toggle::before {
  transform: rotate(180deg);
}
.score-card__details-toggle__text::before {
  content: "詳細を見る";
}
.score-card.is-expanded .score-card__details-toggle__text::before {
  content: "詳細を閉じる";
}

/* details-summary 内のリンクは目立たせる */
.score-card__details a {
  color: var(--gold-700);
  text-decoration: none;
  border-bottom: 1px dashed var(--gold-300);
  transition: color 0.18s;
}
.score-card__details a:hover {
  color: var(--gold-800);
  border-bottom-style: solid;
}

@media (max-width: 640px) {
  .score-card__details-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .score-card__details,
  .score-card__details-toggle::before {
    transition: none !important;
  }
}

/* ============================================================================
   Compare Modal — 星評価とグッド数行の専用スタイル v6 (2026-05-19)
   ============================================================================ */
.compare-modal__row--highlight {
  background: linear-gradient(135deg, rgba(250, 238, 218, 0.45) 0%, rgba(255, 255, 255, 0.6) 100%);
}
.compare-modal__row--highlight th[scope="row"] {
  color: var(--gold-800);
  font-weight: 800;
  border-bottom: 1px solid var(--gold-300);
}
.compare-modal__row--highlight td {
  vertical-align: middle;
  padding: 12px 12px;
  border-bottom: 1px solid var(--gold-300);
}

/* ★スターバー — テキスト★を背景塗りつぶしで再現（既存.star-rateと同じ手法）*/
.compare-modal__star-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.compare-modal__stars {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  position: relative;
  --rate: 0%;
}
.compare-modal__stars::before {
  content: "★★★★★";
  background: linear-gradient(90deg, var(--star-fill) var(--rate, 0%), rgba(180,180,180,0.45) var(--rate, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.compare-modal__stars-fill {
  /* fill width set via --rate variable; no separate element needed */
  display: none;
}
.compare-modal__rating-num {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--gold-800);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* グッド数セル */
.compare-modal__vote-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  border-radius: 999px;
  color: var(--paper);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}
.compare-modal__vote-icon {
  font-size: 14px;
  line-height: 1;
}
.compare-modal__vote-num {
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Compare Modal v7 — リンク化+グッド投票化 (2026-05-19)
   ============================================================================ */
/* 項目名リンク（モーダル上部の th 内） */
.compare-modal__item-link {
  color: var(--gold-800);
  text-decoration: none;
  border-bottom: 1px dashed var(--gold-300);
  transition: color 0.18s, border-color 0.18s;
  cursor: pointer;
  font-family: inherit;
}
.compare-modal__item-link:hover,
.compare-modal__item-link:focus-visible {
  color: var(--gold-700);
  border-bottom-style: solid;
  border-bottom-color: var(--gold-700);
  outline: none;
}
.compare-modal__item-link::after {
  content: " →";
  font-size: 0.85em;
  opacity: 0.7;
  transition: transform 0.18s, opacity 0.18s;
  display: inline-block;
}
.compare-modal__item-link:hover::after {
  transform: translateX(3px);
  opacity: 1;
}

/* グッド数セル（button化） */
button.compare-modal__vote-cell {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 4px 14px 4px 12px;
  transition: transform 0.15s var(--ease), box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
button.compare-modal__vote-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(186, 117, 23, 0.4);
}
button.compare-modal__vote-cell:active {
  transform: translateY(0) scale(0.96);
}
button.compare-modal__vote-cell.is-voted {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-700));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
button.compare-modal__vote-cell.vote-bounce {
  animation: vote-bounce 0.5s var(--ease);
}
@keyframes vote-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* 該当カードへ移動時の金色アウトライン演出 */
.score-card.is-highlighted {
  animation: card-highlight 1.6s ease-out;
}
@keyframes card-highlight {
  0% {
    box-shadow: 0 0 0 0 rgba(186, 117, 23, 0.6),
                0 0 0 0 rgba(216, 149, 53, 0.3);
  }
  30% {
    box-shadow: 0 0 0 4px rgba(186, 117, 23, 0.6),
                0 0 0 12px rgba(216, 149, 53, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(186, 117, 23, 0),
                0 0 0 0 rgba(216, 149, 53, 0);
  }
}


@media (prefers-reduced-motion: reduce) {
  button.compare-modal__vote-cell,
  button.compare-modal__vote-cell.vote-bounce,
  .score-card.is-highlighted {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================
   v6.1 (2026-05-19): カテゴリTOP用追加コンポーネント
   .hero-bullets / .toc-grid / .section-lead
   ============================================ */

/* --- Hero Bullets (page-hero 内に統合する3点要点) --- */
.hero-bullets {
  list-style: none;
  margin: clamp(18px, 3vw, 26px) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 720px;
}
.hero-bullets li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid var(--gold-500);
  border-radius: 4px;
  font-size: clamp(13px, 1.5vw, 14.5px);
  line-height: 1.7;
  color: var(--ink-800);
}
.hero-bullets__no {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--gold-700);
  font-size: 18px;
  min-width: 26px;
  flex-shrink: 0;
}
.hero-bullets li b {
  color: var(--editorial-ink);
  font-weight: 700;
}

/* --- TOC Grid (2列番号付き目次) --- */
.toc-grid {
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: clamp(18px, 2.5vw, 26px);
  margin-block: 0;
  position: relative;
}

/* v6.1 toc-grid + その他 (再付与: 2026-05-19) */
.toc-grid {
  background: linear-gradient(135deg, var(--paper) 0%, var(--canvas) 100%);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: clamp(18px, 2.5vw, 26px);
  margin-block: 0;
  position: relative;
}
.toc-grid::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-700), var(--gold-100));
  border-radius: 14px 0 0 14px;
}
.toc-grid__label {
  display: block;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-800);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 12px;
  padding-left: 6px;
}
.toc-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 14px;
}
.toc-grid__list li { margin: 0; }
.toc-grid__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--editorial-ink);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}
.toc-grid__list a:hover {
  background: rgba(186, 117, 23, 0.08);
  transform: translateX(4px);
}
.toc-grid__no {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--gold-800);
  font-size: 15px;
  min-width: 26px;
}

/* hero-bullets (page-hero内3点要点) */
.hero-bullets {
  list-style: none;
  margin: clamp(18px, 3vw, 26px) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  max-width: 720px;
}
.hero-bullets li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.55);
  border-left: 3px solid var(--gold-500);
  border-radius: 4px;
  font-size: clamp(13px, 1.5vw, 14.5px);
  line-height: 1.7;
  color: var(--ink-800);
}
.hero-bullets__no {
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  color: var(--gold-700);
  font-size: 18px;
  min-width: 26px;
  flex-shrink: 0;
}
.hero-bullets li b {
  color: var(--editorial-ink);
  font-weight: 700;
}

/* section-lead */
.section-lead {
  margin: 6px 0 clamp(14px, 2vw, 20px);
  color: var(--ink-700);
  font-size: clamp(13.5px, 1.5vw, 15px);
  line-height: 1.8;
  max-width: 64em;
}

/* compact section-badge in article-body */
.article-body > .section-badge,
article.section--tight .section-badge {
  margin-top: 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  opacity: 0.85;
}

/* ============================================
   .quick-pick-card 金銀銅モディファイア (2026-05-20)
   chatgpt-app-ranking.html の TOP3 視覚差別化
   ============================================ */
.quick-pick-card--top1 {
  background: linear-gradient(135deg, #FFF7E6 0%, var(--gold-100) 100%);
  border: 1.5px solid var(--gold-700);
  box-shadow: 0 6px 16px -4px rgba(186, 117, 23, 0.18);
}
.quick-pick-card--top1 .quick-pick-card__rank {
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  color: var(--paper);
}
.quick-pick-card--top2 {
  background: linear-gradient(135deg, var(--canvas) 0%, #ECECE7 100%);
  border: 1.5px solid var(--ink-500);
  box-shadow: 0 4px 12px -3px rgba(11, 18, 32, 0.12);
}
.quick-pick-card--top2 .quick-pick-card__rank {
  background: linear-gradient(135deg, var(--ink-500), #ACABA4);
  color: var(--paper);
}
.quick-pick-card--top3 {
  background: linear-gradient(135deg, #FAECE7 0%, #F5C4B3 100%);
  border: 1.5px solid var(--vermilion-700);
  box-shadow: 0 4px 12px -3px rgba(153, 60, 29, 0.12);
}
.quick-pick-card--top3 .quick-pick-card__rank {
  background: linear-gradient(135deg, var(--vermilion-700), #C56347);
  color: var(--paper);
}

/* ============================================
   .diagnosis 診断widget スタイル (2026-05-20)
   chatgpt.html / chatgpt-app-ranking.html / global-ai-app-ranking.html で使用
   ユーザーが3問選んでおすすめAIを判定するインタラクティブ要素
   ============================================ */
.diagnosis {
  background: linear-gradient(135deg, var(--paper) 0%, var(--cream-100) 100%);
  border: 1.5px solid var(--gold-500);
  border-radius: 14px;
  padding: clamp(20px, 3vw, 28px) clamp(22px, 3vw, 32px);
  margin: clamp(1.5em, 3vw, 2.4em) 0;
  position: relative;
  overflow: hidden;
}
.diagnosis::before {
  content: "🎯 DIAGNOSIS";
  position: absolute;
  top: -1px;
  left: clamp(16px, 2.5vw, 24px);
  padding: 4px 14px;
  background: var(--gold-700);
  color: var(--paper);
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.18em;
  border-radius: 0 0 8px 8px;
}
.diagnosis__title {
  margin: 16px 0 6px;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.4;
}
.diagnosis__desc {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-size: clamp(13px, 1.5vw, 14.5px);
  color: var(--ink-700);
  line-height: 1.7;
}
.diagnosis__questions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}
.diagnosis__q {
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 14px 16px;
}
.diagnosis__q-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-900);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--color-line);
}
.diagnosis__options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.diagnosis__options li { margin: 0; }
.diagnosis__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--cream-100);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  user-select: none;
}
.diagnosis__option:hover {
  background: var(--gold-100);
  border-color: var(--gold-500);
}
.diagnosis__option input[type="radio"] {
  accent-color: var(--gold-700);
  cursor: pointer;
}
.diagnosis__option:has(input:checked) {
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  border-color: var(--gold-700);
  color: var(--paper);
  font-weight: 700;
}
.diagnosis__option:has(input:checked) input[type="radio"] {
  accent-color: var(--paper);
}
.diagnosis__cta {
  margin-top: clamp(14px, 2vw, 20px);
  text-align: center;
}
.diagnosis__result {
  margin-top: clamp(14px, 2vw, 20px);
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--paper) 100%);
  border-left: 4px solid var(--gold-700);
  border-radius: 0 10px 10px 0;
  font-weight: 600;
  color: var(--gold-800);
}

/* PR-55 (2026-05-21): 診断フィルターのタップ反応を可視化（選択echo／進捗／おすすめ） */
.diagnosis__option.is-selected {
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  border-color: var(--gold-700);
  color: var(--paper);
  font-weight: 700;
}
.diagnosis__option.is-selected input[type="radio"] { accent-color: var(--paper); }
.diagnosis__live {
  margin-top: clamp(14px, 2vw, 20px);
  padding: 14px 18px;
  background: var(--cream-50);
  border: 1px dashed var(--gold-400);
  border-radius: 12px;
}
.diagnosis__live.is-done {
  background: linear-gradient(135deg, var(--gold-100) 0%, var(--paper) 100%);
  border: 1px solid var(--gold-500);
}
.diagnosis__guide { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-600); }
.diagnosis__chosen-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-800);
}
.diagnosis__chips { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.diagnosis__chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  background: var(--gold-700);
  color: var(--paper);
  border-radius: 999px;
}
.diagnosis__progress { margin: 0; font-size: 13px; color: var(--ink-700); }
.diagnosis__pick { margin: 0; font-size: 14px; line-height: 1.7; color: var(--gold-900); }
/* PR-61 (2026-05-21): 結果・ヒントのCTAをリンク→押しやすいボタンに */
.diagnosis__pick-link {
  display: inline-block;
  margin: 6px 4px 0;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 13px;
  color: var(--paper);
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.diagnosis__pick-link:hover { color: var(--paper); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.diagnosis__cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.diagnosis__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 14px;
  color: var(--paper);
  background: linear-gradient(135deg, var(--gold-700), var(--gold-bright));
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .12s ease;
}
.diagnosis__cta a:hover { color: var(--paper); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
/* PR-61: 診断結果に該当するランキング項目を強調＋「あなたへのおすすめ」バッジ */
.score-card.is-recommended {
  border: 2px solid var(--gold-700);
  box-shadow: 0 0 0 4px rgba(216,149,53,.16);
}
.editor-badge--rec { background: var(--ink-900); color: var(--gold-500); }
.editor-badge--rec::before { content: "🎯"; color: inherit; }
/* PR-62 (2026-05-21): 「選んだ結果がどこに効いたか」の視認性を強化
   - CTA押下時に該当要素へスクロールし、一時フラッシュで注目を集める
   - 目的別(.use-case-card)も該当カードを強調＋「あなたの選択に近い」マーカー
   - prefers-reduced-motion では動かさず、静的なアウトラインで代替 */
@keyframes diag-flash {
  0%, 100% { box-shadow: 0 0 0 4px rgba(216, 149, 53, .16); }
  25%, 60% { box-shadow: 0 0 0 10px rgba(216, 149, 53, .5); }
}
.flash-target { animation: diag-flash 1.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .flash-target { animation: none; outline: 3px solid var(--gold-700); outline-offset: 3px; }
}
.use-case-card.is-recommended {
  border: 2px solid var(--gold-700);
  box-shadow: 0 0 0 4px rgba(216, 149, 53, .16);
}
.use-case-card__you {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold-500);
  background: var(--ink-900);
  border-radius: 999px;
}
.diagnosis__result--hint { font-weight: 500; font-size: 13px; }

/* PR-60 (2026-05-21): 「選んだ結果がどこに・どう出るか」を明確化
   - 結果欄に常時見出し(.diagnosis__live-head)を表示し、未回答でも置き場所が分かるようにする
   - 状態ごとに枠の見た目を変える（未回答=点線プレースホルダ／回答中／完了=実線で強調）
   - 静的な早見表(.diagnosis__result--hint)は「参考」ラベルを付け、パーソナル結果と区別 */
.diagnosis__live-head {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--gold-900);
}
.diagnosis__live.is-empty { background: var(--cream-50); border-style: dashed; }
.diagnosis__live.is-answering { background: var(--cream-100); border-style: solid; border-color: var(--gold-400); }
.diagnosis__result--hint::before {
  content: "参考：目的別の早見表（全タイプ）";
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold-700);
}

/* PR-56 (2026-05-21): モバイルのタップ領域を最低44pxに（押し間違い・ストレス低減）
   ※スマホ(≤640px)のみ。PC/タブレットの見た目は不変。!important不使用。
   対象は既に inline-flex + align-items:center のため高さ確保のみで安全に縦中央化。 */
@media (max-width: 640px) {
  .good-btn,
  .filter-btn,
  .diagnosis__option {
    min-height: 44px;
  }
  .catlist-sort__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .fav-btn {
    width: 44px;
    height: 44px;
  }
}

/* PR-57 (2026-05-21): スマホで「読ませたい極小文字(10px)」を12pxへ底上げ（可読性向上）
   ※装飾の小型ラベル（eyebrow / 順位バッジ / CHAPTER等）は意図的な意匠のため据え置き。
   同一セレクタで後勝ち上書き（特異度問題・!important 不使用）。 */
@media (max-width: 640px) {
  .compare-check + .compare-check__label,
  .score-card__details-key,
  .subscribe__channel small {
    font-size: 12px;
  }
}

/* PR-58 (2026-05-21): スマホでアイコンボタン（共有/検索/メニュー）のタップ領域を44pxに
   ※place-items:center のため中央寄せのまま安全に拡大。スマホ(≤640px)限定。 */
@media (max-width: 640px) {
  .article-meta__share-btn { width: 44px; height: 44px; }
  .iconbtn { width: 44px; height: 44px; }
}

/* PR-59 (2026-05-21): YouTube facade（サムネ＋▶。クリックで本体読込→高速化）
   既存の動画ラッパー共通基底（PR-49）に子要素として全面配置。
   JS無効時は <noscript> の通常iframeにフォールバック（動画が見られなくなることはない）。 */
.score-card--video .score-card__video .yt-facade,
.media-card__video .yt-facade,
.feature-video__media .yt-facade,
.video-frame .yt-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  display: block;
}
.yt-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.62);
  transition: background 0.2s ease, transform 0.2s ease;
}
.yt-facade__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent var(--paper);
}
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play {
  background: rgba(0, 0, 0, 0.82);
  transform: translate(-50%, -50%) scale(1.06);
}
.yt-facade:focus-visible {
  outline: 3px solid var(--gold-600);
  outline-offset: -3px;
}

/* ============================================
   v6.2 (2026-05-20): Footer 雑誌調エディトリアル刷新
   ----------------------------------------------
   ・上部に「RANKING MAGAZINE」リボン
   ・カテゴリリンクに章番号（01/02...）の Bodoni italic
   ・微細な金色ドットパターン背景
   ・section title 装飾強化
   ・footer-bottom に editorial signature
   ============================================ */

/* PR-3 (2026-05-20): .site-footer 本体の背景多層化と padding-block 調整は本体定義（1681行）に統合済み。 */

/* 上部 MAGAZINE リボン */
.site-footer::after {
  content: "RANKING MAGAZINE · VOL. 016 · 2026 MAY ISSUE · 人気ランキング.com";
  display: block;
  text-align: center;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: var(--gold-300);
  padding: 14px 16px;
  background:
    linear-gradient(110deg, transparent 38%, rgba(250, 199, 117, 0.22) 50%, transparent 62%),
    linear-gradient(90deg,
      rgba(186, 117, 23, 0.15) 0%,
      rgba(186, 117, 23, 0.28) 50%,
      rgba(186, 117, 23, 0.15) 100%);
  background-size: 220% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 220% 0, 0 0;
  border-top: 1px solid rgba(186, 117, 23, 0.45);
  border-bottom: 1px solid rgba(186, 117, 23, 0.3);
  margin: clamp(28px, 4vw, 44px) 0 0;
  animation: footer-ribbon-sheen 7s ease-in-out infinite;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PR-3 (2026-05-20): 旧 ::before 上罫線は完全削除済み（リボン ::after に役割移譲）。
   よって display:none 上書きも不要になった。 */

/* ブランド名下に金色の細い装飾線 */
.footer__brand-name {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}
.footer__brand-name::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
}

/* 「Since 2024」風の編集署名を brand lead 下に追加 */
.footer__lead::after {
  content: "📰 EDITORIAL · SINCE 2024 · 月次アップデート";
  display: block;
  margin-top: 10px;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--gold-500);
  opacity: 0.85;
}

/* セクションタイトル装飾強化（小さなトロフィー絵文字） */
.footer__title {
  position: relative;
  padding-left: 22px;
}
.footer__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), transparent);
}

/* カテゴリリンクに章番号（Bodoni italic） */
.footer-grid > nav .footer-list {
  counter-reset: footer-link-counter;
}
.footer-grid > nav .footer-list li {
  counter-increment: footer-link-counter;
  position: relative;
}
.footer-grid > nav .footer-list a::after {
  content: counter(footer-link-counter, decimal-leading-zero);
  position: absolute;
  right: 0;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  color: var(--gold-800);
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  transform: translateX(-4px);
}
.footer-grid > nav .footer-list a:hover::after,
.footer-grid > nav .footer-list a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}
.footer-grid > nav .footer-list a {
  justify-content: space-between;
  width: 100%;
  padding-right: 28px;
}

/* footer-bottom の装飾強化 */
.footer-bottom {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 24px;
  border-top: none;
  position: relative;
}
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.15) 0 8px,
    transparent 8px 12px);
}
.footer-bottom small {
  font-family: "Bodoni Moda", serif;
  letter-spacing: 0.08em;
}
/* 2026-05-20 修正: HTMLに既に「©」が含まれているため ::before の重複挿入を廃止 */
/* editorial signature 右下 */
.footer-bottom::after {
  content: "🏆 TYPESET IN TOKYO · 編集部より愛をこめて";
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.4);
  margin-top: 10px;
}

/* v6.3 (2026-05): フッターに上品な遊び心 */
@keyframes footer-ribbon-sheen {
  0%   { background-position: 220% 0, 0 0; }
  55%  { background-position: -120% 0, 0 0; }
  100% { background-position: -120% 0, 0 0; }
}
/* ブランド名の金下線がホバーで伸びる */
.footer__brand-name::after { transition: width 0.35s var(--ease); }
.site-footer .brand:hover .footer__brand-name::after,
.site-footer .brand:focus-visible .footer__brand-name::after { width: 100%; }
/* フッターのクラウンマークがホバーで金色に発光（拡大・回転は既存ルール） */
.site-footer .brand__mark { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.site-footer .brand:hover .brand__mark,
.site-footer .brand:focus-visible .brand__mark {
  box-shadow: 0 0 0 3px rgba(250, 199, 117, 0.22), 0 6px 18px rgba(186, 117, 23, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .site-footer::after { animation: none; background-position: 220% 0, 0 0; }
  .footer__brand-name::after { transition: none; }
}


/* ============================================================================
   Media Card — まとめページ用 動画カード（PR-42, 2026-05-20）
   ----------------------------------------------------------------------------
   一覧/まとめページの「お手本雛形」。順位ランキングではないページ
   （25言語一覧・アーティスト曲一覧 等）で、生 iframe ベタ書きを置き換える。
   - 順位番号なし（序列を付けない）
   - レスポンシブ動画（aspect-ratio 16/9、固定 width/height 不要）
   - 説明文 + メタ情報（言語・歌手・曲名など）
   - 比較チェック（compare-check）を任意で付与でき、まとめ内の項目を比較可能
   既存 .score-card のトーン（クリーム/金、角丸、影）と調和させている。
   ============================================================================ */
.media-list {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  margin: clamp(20px, 3vw, 32px) 0;
}
.media-card {
  position: relative;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 2px 12px -8px rgba(31, 26, 21, 0.18);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.media-card:hover {
  box-shadow: 0 8px 22px -12px rgba(186, 117, 23, 0.30);
  transform: translateY(-2px);
}
.media-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: clamp(14px, 2vw, 18px) clamp(18px, 2.5vw, 22px) 0;
}
.media-card__index {
  flex: 0 0 auto;
  font-family: "Bodoni Moda", serif;
  font-style: italic;
  font-weight: 700;
  /* PR-44 (2026-05-20): 番号が小さく目立たなかったため、タイトルより一回り大きくして
     一覧の通し番号として視認しやすくする。 */
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1;
  color: var(--gold-700);
  letter-spacing: 0.02em;
}
.media-card__title {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-900);
}
.media-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px clamp(18px, 2.5vw, 22px) 0;
}
.media-card__video { margin: clamp(12px, 1.8vw, 16px) 0 0; } /* 共通基底 + 上余白 */
.media-card__body {
  padding: clamp(12px, 1.8vw, 16px) clamp(18px, 2.5vw, 22px) clamp(16px, 2.2vw, 20px);
}
.media-card__desc,
.article-body .media-card__desc {
  /* PR-45/46/47 (2026-05-20): 感想文の段落間余白をゼロに（ユーザー「行間をなくして」）。
     .article-body p (0,1,1) の margin:1.4em に負けないよう .article-body スコープを併記して
     特異度を 0,2,0 に揃える（feedback_specificity_modifier_rule 規約）。
     行内の line-height は可読性のため 1.5 を維持。 */
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-700);
}
.media-card__desc:last-child {
  margin-bottom: 0;
}
.media-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--color-line);
  font-size: 0.82rem;
  line-height: 1.7;
}
.media-card__meta div {
  display: flex;
  gap: 6px;
}
.media-card__meta dt {
  font-weight: 700;
  color: var(--ink-900);
}
.media-card__meta dd {
  margin: 0;
  color: var(--ink-700);
}
.media-card__meta a {
  color: var(--gold-700);
  text-decoration: none;
  border-bottom: 1px dashed var(--gold-300);
}
.media-card__meta a:hover {
  color: var(--vermilion-700);
  border-bottom-style: solid;
  border-bottom-color: var(--vermilion-700);
}

/* 汎用レスポンシブ動画フレーム（PR-43, 2026-05-20）
   まとめページ等で単独の解説動画を埋め込む際、固定 width/height の生 iframe を
   置き換えてモバイル崩れを防ぐ。media-card を使わない文中動画向け。 */
.video-frame { margin: clamp(12px, 2vw, 18px) 0; border-radius: 10px; } /* 共通基底 + 余白/角丸 */


/* ============================================================================
   まとめページ導入ブロック（PR-48, 2026-05-20）
   ----------------------------------------------------------------------------
   25言語まとめ等の冒頭で「ワクワク感」を出すための華やかな導入コンポーネント。
   - .intro-hero        : 大きな数字＋キャッチコピーのヒーローバナー
   - .feature-video     : 目玉動画をバッジ付きで大きく見せるカード
   - .lyrics-showcase   : 多言語の歌い出しをグリッドで魅せる
   既存の暖色トーン（クリーム/金）と雪の結晶モチーフで統一。
   ============================================================================ */
.intro-hero {
  position: relative;
  margin: clamp(20px, 3vw, 32px) 0;
  padding: clamp(28px, 4.5vw, 48px) clamp(20px, 3vw, 36px);
  background:
    radial-gradient(circle at 85% 15%, rgba(250, 199, 117, 0.28), transparent 45%),
    radial-gradient(circle at 12% 80%, rgba(229, 57, 46, 0.10), transparent 40%),
    linear-gradient(135deg, var(--cream-100) 0%, var(--gold-50) 55%, #FFFCF6 100%);
  border: 1px solid var(--gold-300);
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
}
.intro-hero::before,
.intro-hero::after {
  content: "❄";
  position: absolute;
  color: var(--gold-300);
  opacity: 0.55;
  pointer-events: none;
}

/* ==========================================================================
   サイト内検索 結果ページ  (search.php / sdata.tmp)   ※2026-05-23 追加
   - ヒーロー(濃紺×金) + サムネ付きカードグリッド + 結果なし案内
   - ブレイクポイントは規約どおり 640 / 960 のみ使用
   ========================================================================== */

/* --- 検索ヒーロー --- */
.search-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 72px) 0 clamp(26px, 4vw, 44px);
  background:
    radial-gradient(circle at 88% 12%, rgba(250, 199, 117, 0.28), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(229, 57, 46, 0.08), transparent 42%),
    linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 48%, var(--navy-950) 100%);
  color: #fff;
  text-align: center;
}
.search-hero__eyebrow {
  font-family: "Bodoni Moda", serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 12px;
}
.search-hero__title {
  font-size: clamp(24px, 4.4vw, 40px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.search-hero__kw { color: var(--gold-300); }
.search-hero__count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: clamp(18px, 3vw, 26px);
}
.search-hero__count strong {
  color: var(--gold-300);
  font-size: 1.25em;
  font-variant-numeric: tabular-nums;
}
.search-hero__form {
  display: flex;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto;
  padding: 6px;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 40px -16px rgba(5, 12, 42, 0.6);
}
.search-hero__form input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  font-size: 16px; /* iOSの自動ズーム防止のため16px以上 */
  color: var(--ink-900);
}
.search-hero__form input::placeholder { color: var(--ink-400); }
.search-hero__form button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--gold-700), var(--gold-600));
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search-hero__form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(186, 117, 23, 0.7);
}
.search-hero__suggests {
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.search-hero__suggests a {
  display: inline-block;
  margin: 4px 4px 0;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(250, 199, 117, 0.45);
  color: var(--gold-300);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.search-hero__suggests a:hover { background: var(--gold-300); color: var(--navy-900); }

/* --- 結果リスト(カードグリッド) --- */
.search-body { padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); }
.search-results { display: grid; gap: clamp(14px, 2vw, 20px); }
@media (min-width: 640px) {
  .search-results { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .search-results { grid-template-columns: repeat(3, 1fr); }
}
.search-card {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--paper);
  border: 1px solid var(--color-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.search-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(11, 18, 32, 0.5);
  border-color: var(--gold-300);
}
.search-card__thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream-100), var(--gold-50));
}
.search-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.search-card:hover .search-card__thumb img { transform: scale(1.06); }
.search-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}
.search-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
.search-card__title a { color: var(--ink-900); }
.search-card__title a:hover { color: var(--gold-800); }
.search-card__title b,
.search-card__desc b {
  font-weight: 800;
  color: var(--gold-800);
  background: linear-gradient(transparent 62%, var(--gold-100) 62%);
}
.search-card__desc {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-700);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-card__more {
  margin-top: auto;
  padding-top: 4px;
  font-size: 13px;
  font-weight: 700;
}
.search-card__more a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-700);
}
.search-card__more em { transition: transform var(--t-base) var(--ease); }
.search-card__more a:hover em { transform: translateX(4px); }

/* --- 結果なし / 案内 --- */
.search-empty {
  text-align: center;
  padding: clamp(36px, 6vw, 64px) 20px;
  background: linear-gradient(135deg, var(--cream-100), var(--gold-50));
  border: 1px dashed var(--gold-300);
  border-radius: 18px;
}
.search-empty__lead {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 8px;
}
.search-empty__lead b { color: var(--gold-800); }
.search-empty__hint { font-size: 14px; line-height: 1.8; color: var(--ink-600); }

/* --- 補助リンク(ゴースト・ボタン) --- */
.search-backlinks {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--color-line);
  text-align: center;
}
.search-backlinks > p { font-size: 14px; color: var(--ink-600); margin-bottom: 14px; }
.search-backlinks__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn--ghost {
  --btn-bg: var(--paper);
  --btn-fg: var(--gold-800);
  --btn-bd: var(--gold-300);
}
.btn--ghost:hover { --btn-bg: var(--gold-50); --btn-bd: var(--gold-700); }

/* --- 検索結果の絞り込み・目的別ファインダー --- */
.search-filter { margin: 0 0 clamp(20px,3vw,28px); display: flex; flex-direction: column; gap: 14px; }
.search-filter__purpose { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.search-filter__plabel, .facet-group__title { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-500); }
.search-purpose { display: flex; flex-wrap: wrap; gap: 8px; }
.purpose-btn {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border: 1px solid var(--gold-300); border-radius: var(--radius-pill);
  background: var(--gold-50); color: var(--gold-800); font-weight: 700; font-size: 13px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.purpose-btn:hover { background: var(--gold-100); }
.purpose-btn.is-active { background: var(--gold-700); border-color: var(--gold-700); color: #fff; }
.search-facets {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; background: var(--cream-100);
  border: 1px solid var(--color-line); border-radius: 14px;
}
.facet-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.facet-group__title { flex: 0 0 auto; min-width: 52px; }
.facet-group__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.facet-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--ink-200); border-radius: var(--radius-pill);
  background: var(--paper); color: var(--ink-700); font-size: 13px; font-weight: 500;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.facet-chip:hover { border-color: var(--gold-400); background: var(--gold-50); }
.facet-chip[aria-pressed="true"] { background: var(--gold-700); border-color: var(--gold-700); color: #fff; }
.facet-chip__count { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .75; }
.facet-chip[aria-pressed="true"] .facet-chip__count { opacity: .9; }
.facet-chip:disabled { opacity: .38; cursor: not-allowed; }
.search-filter__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.search-filter__count { font-size: 13px; font-weight: 700; color: var(--ink-600); }
.search-filter__tools { display: flex; align-items: center; gap: 12px; }
.search-filter__clear { font-size: 13px; color: var(--gold-800); text-decoration: underline; text-underline-offset: 3px; }
.search-filter__clear:hover { color: var(--gold-700); }
.search-filter__sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-600); }
.search-filter__sort select {
  height: 38px; padding: 0 12px; border: 1px solid var(--ink-200); border-radius: 10px;
  background: var(--paper); color: var(--ink-900); font-size: 13px; font-weight: 700; cursor: pointer;
}
.search-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.search-card__cat { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-500); }
.search-card__type { font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 2px 8px; border-radius: var(--radius-pill); }
.search-card__type--ranking { background: var(--gold-100); color: var(--gold-800); }
.search-card__type--matome { background: var(--navy-100); color: var(--navy-700); }
.search-card__type--guide { background: var(--ink-50); color: var(--ink-600); }
.search-empty--filtered { margin-bottom: 0; }
/* --- 検索ハブ / ゼロ件レコメンド --- */
.search-hub { display: flex; flex-direction: column; gap: clamp(28px,4vw,44px); }
.hub-sec { margin-top: clamp(8px,2vw,16px); }
.hub-title {
  font-size: 16px; font-weight: 800; letter-spacing: .04em; color: var(--ink-900);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold-300);
}
.hub-tiles { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
@media (min-width: 640px) { .hub-tiles { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 960px) { .hub-tiles { grid-template-columns: repeat(4,1fr); } }
.hub-tile {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 60px; padding: 12px; border: 1px solid var(--color-line); border-radius: 12px;
  background: var(--paper); color: var(--ink-900); font-weight: 700; font-size: 14px;
  transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.hub-tile:hover { transform: translateY(-2px); border-color: var(--gold-400); background: var(--gold-50); color: var(--gold-800); }
.hub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--gold-300);
  background: var(--gold-50); color: var(--gold-800); font-weight: 700; font-size: 13px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hub-chip:hover { background: var(--gold-700); border-color: var(--gold-700); color: #fff; }
.hub-cards { display: grid; gap: clamp(14px,2vw,20px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .hub-cards { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px) { .hub-cards { grid-template-columns: repeat(3,1fr); } }