/* ===================================================
   カードレイアウト統一 – digital-hikaku.com
   新着・カテゴリーページの article-card グリッド＋
   Cocoon entry-card-thumb の object-fit 修正
   =================================================== */

/* ══════════════════════════════════════════════════
   1. カードリスト：グリッド配置
   ══════════════════════════════════════════════════ */
#list.ect-entry-card {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  /* Cocoon の flex 上書きを防ぐ */
  flex-direction: unset !important;
  align-items: start !important;
}

/* ══════════════════════════════════════════════════
   2. カードラッパー（外枠）
   ══════════════════════════════════════════════════ */
#list.ect-entry-card .entry-card-wrap {
  width: 100% !important;
  display: block !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
  transition: transform .15s, box-shadow .15s !important;
  background: #fff !important;
}
#list.ect-entry-card .entry-card-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

/* ══════════════════════════════════════════════════
   3. article-card 内部レイアウト
   ══════════════════════════════════════════════════ */
.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* リンク要素はフレックス縦積み・装飾なし */
.entry-card-el,
.entry-card-el:hover,
.entry-card-el:visited {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}
/* リンク内の子要素すべてのアンダーラインを消す */
.entry-card-el * {
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════
   4. サムネイル：aspect-ratio 16/9 + object-fit cover
      → 画像と縦横比を一致させてトリミング最小化
   ══════════════════════════════════════════════════ */
.article-card .entry-card-thumb {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;  /* 固定px → 比率指定に変更 */
  height: auto !important;
  overflow: hidden !important;
  background: #e2e8f0;
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
}

.article-card .entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* ══════════════════════════════════════════════════
   5. テキストエリア
   ══════════════════════════════════════════════════ */

/* Cocoon テーマの @media(max-width:1255px) で
   .entry-card-content{margin-left:40%} が適用される問題を修正 */
.entry-card-content {
  margin-left: 0 !important;
}

.article-card .entry-card-content {
  padding: 12px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* タイトル */
.article-card .entry-title,
#list.ect-entry-card .entry-title {
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #1a1a2e !important;
  margin: 6px 0 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* 日付 */
.article-card .entry-date,
#list.ect-entry-card .entry-date {
  font-size: .75rem !important;
  color: #94a3b8 !important;
  margin-top: auto !important;
}

/* ══════════════════════════════════════════════════
   6. Cocoon 旧フォーマット（entry-card-thumb）の
      object-fit 修正（サイドバー・関連記事用）
   ══════════════════════════════════════════════════ */
.entry-card-thumb,
.card-thumb,
.e-card-thumb {
  overflow: hidden;
  background: #f1f5f9;
}
.entry-card-thumb img,
.card-thumb img,
.e-card-thumb img,
.entry-card-thumb-image,
.card-thumb-image,
.wp-post-image {
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ══════════════════════════════════════════════════
   7. レスポンシブ
   ══════════════════════════════════════════════════ */

/* スマホ：ヘッダーナビ非表示（底部ナビ・サイドバーで代替）*/
@media (max-width: 768px) {
  #navi,
  .navi,
  .navi-in {
    display: none !important;
  }
}
/* タブレット（2列）*/
@media (max-width: 900px) {
  #list.ect-entry-card {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* スマホ（1列）*/
@media (max-width: 599px) {
  #list.ect-entry-card {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* スマホ：アイキャッチは 16/9 自然比率のまま表示（潰し禁止） */
  .article-card .entry-card-thumb {
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
  }
  /* タイトル欄の余白を詰める */
  .article-card .entry-card-content,
  #list.ect-entry-card .entry-card-content {
    padding: 8px 12px 10px !important;
  }
  .article-card .entry-title,
  #list.ect-entry-card .entry-title {
    margin: 4px 0 6px !important;
    font-size: .85rem !important;
  }
}

/* ══════════════════════════════════════════════════
   スマホ スティッキー底部ナビバー
   全記事ページ・ホームページに共通適用
   dark-mode.js から body に自動インジェクト
   ══════════════════════════════════════════════════ */
.sp-btm-nav {
  display: none;
}
@media (max-width: 768px) {
  .sp-btm-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0f172a;
    border-top: 2px solid #1e293b;
    z-index: 9999;
    height: 58px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.25);
  }
  .sp-btm-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #94a3b8;
    font-size: 9.5px;
    font-weight: 700;
    gap: 3px;
    padding: 6px 2px 8px;
    transition: color .2s, background .2s;
    font-family: 'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
    -webkit-tap-highlight-color: transparent;
  }
  .sp-btm-nav a:hover,
  .sp-btm-nav a.sp-nav-active {
    color: #38bdf8;
    background: rgba(56,189,248,.08);
  }
  .sp-btm-nav-icon {
    font-size: 19px;
    line-height: 1;
  }
  /* ボトムナビ分の余白 */
  body {
    padding-bottom: 62px !important;
  }
  /* ダークモード */
  html[data-theme="dark"] .sp-btm-nav {
    background: #080c18 !important;
    border-top-color: #1e2a45 !important;
  }
  html[data-theme="dark"] .sp-btm-nav a {
    color: #64748b !important;
  }
  html[data-theme="dark"] .sp-btm-nav a:hover,
  html[data-theme="dark"] .sp-btm-nav a.sp-nav-active {
    color: #38bdf8 !important;
    background: rgba(56,189,248,.1) !important;
  }
}

/* ══════════════════════════════════════════════════
   記事内 中間CTA（ミッドCTAストリップ）
   2,000字ごとに挿入する共通コンポーネント
   ══════════════════════════════════════════════════ */
.mid-cta-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff7ed;
  border: 2px solid #f97316;
  border-radius: 14px;
  padding: 14px 18px;
  margin: 36px 0;
  box-shadow: 0 2px 10px rgba(249,115,22,.12);
}
.mid-cta-strip .mcs-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
  line-height: 1;
}
.mid-cta-strip .mcs-body {
  flex: 1;
  min-width: 0;
}
.mid-cta-strip .mcs-title {
  font-size: .9rem;
  font-weight: 800;
  color: #c2410c;
  margin: 0 0 4px;
}
.mid-cta-strip .mcs-desc {
  font-size: .8rem;
  color: #7c2d12;
  margin: 0;
  line-height: 1.6;
}
.mid-cta-strip .mcs-btn {
  display: inline-block;
  background: linear-gradient(135deg,#f59e0b,#f97316);
  color: #fff !important;
  font-size: .85rem;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(249,115,22,.35);
}
.mid-cta-strip .mcs-btn:hover { opacity: .88; }
@media (max-width: 600px) {
  .mid-cta-strip {
    flex-direction: column;
    text-align: center;
  }
  .mid-cta-strip .mcs-btn {
    width: 100%;
    text-align: center;
  }
}
html[data-theme="dark"] .mid-cta-strip {
  background-color: #2a1a00 !important;
  background-image: none !important;
  border-color: #f97316 !important;
}
html[data-theme="dark"] .mid-cta-strip .mcs-title {
  color: #fed7aa !important;
}
html[data-theme="dark"] .mid-cta-strip .mcs-desc {
  color: #fde68a !important;
}

/* ══════════════════════════════════════════════════
   ヘッダー 令和スタイル 2026 - Cocoon 共通
   (index.html / 全記事ページに適用)
   ══════════════════════════════════════════════════ */
#header-container{
  background:linear-gradient(135deg,rgba(6,9,20,.97) 0%,rgba(11,17,38,.96) 100%)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 4px 24px rgba(0,0,0,.3)!important;
  /* position・overflow は header-autohide.js に任せる（上書き禁止）*/
}
#header-container::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,#6366f1 0%,#3b82f6 45%,#06b6d4 80%,transparent 100%);
  z-index:9999;
  pointer-events:none;
}
#header{background:transparent!important;box-shadow:none!important;border:none!important;padding:0!important;margin:0!important;}
.header{padding:0!important;}
/* header-in 上下中央・余白最小化（全ページ共通） */
#header-in{
  padding:12px 20px!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
@media(max-width:767px){
  #header-in{padding:10px 12px!important;}
}
/* ロゴ文字色 */
.header .site-name-text,
.site-name-text{color:#f1f5f9!important;}
/* ナビバー */
#navi{background:rgba(0,0,0,.18)!important;box-shadow:none!important;}
#navi .navi-in>ul>li>a,
.menu-top>li>a{
  color:rgba(148,163,184,.9)!important;
  font-weight:700!important;
  transition:color .2s,background .2s!important;
  letter-spacing:.02em!important;
}
#navi .navi-in>ul>li>a:hover,
.menu-top>li>a:hover{
  color:#fff!important;
  background:rgba(99,102,241,.1)!important;
}
/* ドロップダウン */
#navi .navi-in .sub-menu,
.navi-in .sub-menu{
  background:rgba(8,12,28,.96)!important;
  border-top:2px solid #6366f1!important;
  border-radius:0 0 10px 10px!important;
  box-shadow:0 12px 32px rgba(0,0,0,.5)!important;
}
#navi .navi-in .sub-menu a,
.navi-in .sub-menu a{
  color:rgba(148,163,184,.85)!important;
  transition:color .15s,background .15s,padding-left .15s!important;
}
#navi .navi-in .sub-menu a:hover,
.navi-in .sub-menu a:hover{
  color:#e2e8f0!important;
  background:rgba(99,102,241,.1)!important;
}
/* item-label / sub-caption（Cocoon カスタムキャプション） */
.item-label{color:inherit!important;}
.sub-caption{color:rgba(148,163,184,.65)!important;font-size:.7rem!important;}

/* ══════════════════════════════════════════════════
   スマホ ドロワーメニュー（引き出しナビ）
   背景・文字色・区切り線を明確に整備
   ══════════════════════════════════════════════════ */

/* ── ドロワー全体の背景 ── */
#navi-menu-content,
.navi-menu-content {
  background: #0c1020 !important;
  color: #e2e8f0 !important;
}

/* ── 閉じるボタン ── */
.navi-menu-close-button,
.menu-close-button {
  color: #94a3b8 !important;
}

/* ── メニューリスト ── */
.menu-drawer {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── 各項目のリンク ── */
.menu-drawer .menu-item a,
.menu-drawer li a {
  display: block !important;
  padding: 14px 20px !important;
  color: #e2e8f0 !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  letter-spacing: .02em !important;
  transition: background .15s, color .15s !important;
}

/* ── ホバー・タップ時 ── */
.menu-drawer .menu-item a:hover,
.menu-drawer li a:hover,
.menu-drawer .menu-item a:active,
.menu-drawer li a:active {
  background: rgba(99,102,241,.15) !important;
  color: #a5b4fc !important;
}

/* ── ダークモード（同系なので追加調整のみ）── */
html[data-theme="dark"] #navi-menu-content,
html[data-theme="dark"] .navi-menu-content {
  background: #080c18 !important;
}

html[data-theme="dark"] .menu-drawer .menu-item a,
html[data-theme="dark"] .menu-drawer li a {
  color: #c4cfe8 !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .menu-drawer .menu-item a:hover,
html[data-theme="dark"] .menu-drawer li a:hover {
  background: rgba(99,102,241,.2) !important;
  color: #a5b4fc !important;
}

/* ══════════════════════════════════════════════════
   dh-mini-header モバイル修正
   スマホでナビが overflow:hidden で見切れる問題を解消
   2026-05-09
   ══════════════════════════════════════════════════ */

/* ヘッダー内ナビを横スクロール可能に（overflow:hidden 上書き） */
#dh-mini-header nav {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}
#dh-mini-header nav::-webkit-scrollbar {
  display: none !important;
}

/* スマホではサイト名を短縮して nav スペースを確保 */
@media (max-width: 480px) {
  #dh-mini-header > div > a[href="/"] {
    font-size: .8rem !important;
    max-width: 130px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #dh-mini-header nav a {
    font-size: .75rem !important;
    padding: 0 7px !important;
    white-space: nowrap !important;
  }
}

/* ══════════════════════════════════════════════════
   カテゴリーページ サイドバー カテゴリーリスト修正
   card-fix.css をカテゴリーページに追加後の強化
   2026-05-09
   ══════════════════════════════════════════════════ */

/* カテゴリー見出し：文字化け・見切れ防止 */
.wp-block-categories-list,
.wp-block-categories {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* カテゴリーリンク：濃色テキストで確実に可読 */
.wp-block-categories-list li a,
.wp-block-categories li.cat-item a,
.cat-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  font-size: .93rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #fff !important;
  transition: background .15s, color .15s !important;
}
.wp-block-categories-list li a::after,
.wp-block-categories li.cat-item a::after,
.cat-item a::after {
  content: "›" !important;
  font-size: 1.2rem !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}
.wp-block-categories-list li a:hover,
.wp-block-categories li.cat-item a:hover,
.cat-item a:hover {
  color: #2563eb !important;
  background: #eff6ff !important;
}

/* list-item-caption span が白文字で見えない問題を修正 */
.cat-item a .list-item-caption,
.wp-block-categories-list li a span {
  color: inherit !important;
}

/* カテゴリー見出し h2「Categories」→ 日本語表示 */
.widget_block:has(.wp-block-categories) h2.wp-block-heading,
.sidebar .wp-block-group > h2.wp-block-heading {
  font-size: 0 !important;
  background: linear-gradient(135deg, #111c3d, #1e40af) !important;
  padding: 12px 16px !important;
  position: relative !important;
  display: block !important;
}
.widget_block:has(.wp-block-categories) h2.wp-block-heading::before,
.sidebar .wp-block-group > h2.wp-block-heading::before {
  content: "📁 カテゴリー" !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #f0f6ff !important;
  display: block !important;
}

/* ダークモード */
html[data-theme="dark"] .wp-block-categories-list li a,
html[data-theme="dark"] .cat-item a {
  background: #1e2030 !important;
  color: #cbd5e1 !important;
  border-bottom-color: #2d3748 !important;
}
html[data-theme="dark"] .wp-block-categories-list li a:hover,
html[data-theme="dark"] .cat-item a:hover {
  background: #252840 !important;
  color: #93c5fd !important;
}
html[data-theme="dark"] .cat-item a .list-item-caption,
html[data-theme="dark"] .wp-block-categories-list li a span {
  color: inherit !important;
}

/* ══════════════════════════════════════════════════
   コメントフォーム非表示（静的HTML化後は機能しないため）
   SiteGuard CAPTCHA壊れ画像を合わせて非表示
   2026-05-09
   ══════════════════════════════════════════════════ */
.comment-form-wrap,
.comment-respond,
#respond,
h2#comments,
h2.comment-title,
img[src*="siteguard"],
label[for="siteguard_captcha"],
#siteguard_captcha,
input[name="siteguard_captcha"],
input[name="siteguard_captcha_prefix"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════
   カテゴリーページ ヒーロー（archive-title置換）
   ══════════════════════════════════════════════════ */
.dh-cat-hero {
  background: linear-gradient(135deg, rgba(6,9,20,.97) 0%, rgba(11,17,38,.96) 100%);
  margin: -36px -29px 32px;
  padding: 58px 28px 52px;
  border-radius: 8px 8px 0 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dh-cat-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #6366f1 0%, #3b82f6 45%, #06b6d4 80%, transparent 100%);
}
.dh-cat-hero::after {
  content: '';
  position: absolute;
  top: -40px; right: -30px;
  width: 280px; height: 200px;
  background: radial-gradient(ellipse, rgba(99,102,241,.12) 0%, transparent 65%);
  pointer-events: none;
}
.dh-cat-hero-inner {
  position: relative;
  z-index: 1;
}
.dh-cat-icon {
  font-size: 2.4rem;
  margin-bottom: 20px;
  display: block;
}
/* シンボルマーク＋タイトルの横並びヘッド */
.dh-cat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 4px;
}
.dh-cat-head .dh-cat-title { margin: 0; }
/* ブランドシンボルマーク（絵文字アイコンの代替） */
.dh-cat-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 22px rgba(0,0,0,.35), 0 0 0 6px rgba(99,102,241,.06);
}
.dh-cat-symbol img {
  width: 54px;
  height: 54px;
  border-radius: 11px;
  display: block;
}
/* 記事数カウント（大きく・オレンジ・光る演出） */
.dh-hero-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 2px;
}
.dh-count-num {
  font-size: 4.2rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 55%, #fb7185 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(249,115,22,.55)) drop-shadow(0 0 30px rgba(249,115,22,.3));
  animation: dh-count-glow 2.4s ease-in-out infinite;
}
@keyframes dh-count-glow {
  0%,100% { filter: drop-shadow(0 0 12px rgba(249,115,22,.45)) drop-shadow(0 0 26px rgba(249,115,22,.25)); }
  50%     { filter: drop-shadow(0 0 20px rgba(251,146,60,.75)) drop-shadow(0 0 40px rgba(249,115,22,.45)); }
}
.dh-count-unit {
  font-size: 1.05rem;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
}
.dh-count-sub {
  font-size: .76rem;
  color: rgba(255,255,255,.55);
  margin: 6px 0 0;
  letter-spacing: .05em;
}
/* ハル編集長の吹き出し＋ランダムおすすめボタン */
.dh-hero-haru {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 520px;
  margin: 26px auto 2px;
  text-align: left;
}
.dh-haru-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
.dh-haru-balloon {
  position: relative;
  flex: 1;
  background: rgba(255,255,255,.95);
  color: #1f2937;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .85rem;
  line-height: 1.75;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.dh-haru-balloon::before {
  content: '';
  position: absolute;
  left: -8px; top: 18px;
  border-style: solid;
  border-width: 7px 9px 7px 0;
  border-color: transparent rgba(255,255,255,.95) transparent transparent;
}
.dh-haru-name {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: #f97316;
  margin-bottom: 3px;
  letter-spacing: .03em;
}
.dh-haru-catch {
  display: block;
  font-size: 1.06rem;
  font-weight: 900;
  color: #1f2937;
  line-height: 1.4;
  letter-spacing: .01em;
}
.dh-random-btn {
  display: inline-block;
  margin-top: 12px;
  font-size: .86rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #f97316, #fb923c);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(249,115,22,.4);
  transition: transform .15s, box-shadow .2s, filter .2s;
  letter-spacing: .02em;
}
.dh-random-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 7px 20px rgba(249,115,22,.5);
}
.dh-random-btn:active { transform: translateY(0); }
@media (max-width: 767px) {
  .dh-cat-head { gap: 11px; }
  .dh-cat-symbol { width: 50px; height: 50px; border-radius: 12px; }
  .dh-cat-symbol img { width: 40px; height: 40px; border-radius: 9px; }
  .dh-count-num { font-size: 3.1rem; }
  .dh-hero-haru { gap: 9px; }
  .dh-haru-icon { width: 46px; height: 46px; }
  .dh-haru-balloon { font-size: .8rem; padding: 12px 13px; }
  .dh-random-btn { font-size: .82rem; padding: 10px 18px; }
}
.dh-cat-title {
  font-size: 2.05rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: .06em;
  line-height: 1.45;
  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}
.dh-cat-title .hl {
  background: linear-gradient(135deg, #f97316, #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dh-cat-sub {
  font-size: .95rem;
  color: rgba(255,255,255,.62);
  margin: 0;
  letter-spacing: .08em;
  line-height: 1.85;
}
@media (max-width: 767px) {
  .dh-cat-hero {
    margin: -36px -16px 24px;
    padding: 42px 18px 38px;
  }
  .dh-cat-title { font-size: 1.5rem; line-height: 1.5; }
  .dh-cat-icon { font-size: 1.9rem; margin-bottom: 16px; }
  .dh-cat-sub { font-size: .86rem; }
}

/* ══ 記事ページのCocoonデフォルトナビを非表示 ══ */
#navi .navi-in .menu-top { display: none !important; }
.navi-menu-button { display: none !important; }

/* ══════════════════════════════════════════════════
   カードテキスト：行数制限・見切れ防止
   ══════════════════════════════════════════════════ */
.article-card .card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.article-card .card-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* カード画像：16/9固定でoverflow防止 */
.article-card .card-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
}
/* カード幅：最小幅で見切れ防止 */
.card-grid, .cards-grid, .article-cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
@media (max-width: 600px) {
  .card-grid, .cards-grid, .article-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .article-card .card-img {
    height: auto !important;
  }
}


/* ============================================================
   モバイル対応グローバル修正（2026-05-21 追加）
   ============================================================ */

/* ── テーブル横スクロール ── */
.comparison-table,
.data-table,
.spec-table,
.hikaku-table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* 記事内の汎用テーブルにも適用 */
.wrap table,
.entry-content table,
.article-body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── スマホ：テーブル文字・余白を縮小 ── */
@media(max-width:600px) {
  .comparison-table th,
  .comparison-table td,
  .data-table th,
  .data-table td {
    font-size: .78rem !important;
    padding: 7px 8px !important;
  }
  .spec-table th,
  .spec-table td,
  .hikaku-table th,
  .hikaku-table td {
    font-size: .78rem !important;
    padding: 7px 8px !important;
  }
}

/* ── char-balloon：スマホでアイコン縮小 ── */
@media(max-width:480px) {
  .char-balloon .char-icon,
  .char-icon {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }
  .char-balloon {
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .char-balloon .balloon-text {
    font-size: .86rem !important;
  }
}

/* ── 購入ボタン：スマホで縦並び・全幅 ── */
@media(max-width:480px) {
  .buy-buttons {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .btn-amazon,
  .btn-rakuten {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
  }
}

/* ── product-header：スマホで縦積み ── */
@media(max-width:480px) {
  .product-header {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .product-num-badge {
    align-self: flex-start !important;
  }
  .product-card {
    padding: 16px !important;
  }
}

/* ── verdict-box：スマホで余白縮小 ── */
@media(max-width:480px) {
  .verdict-box {
    padding: 18px 14px !important;
  }
  .verdict-item {
    padding: 14px !important;
  }
  .verdict-product {
    font-size: .9rem !important;
  }
}

/* ── h1 スマホ縮小 ── */
@media(max-width:480px) {
  h1 {
    font-size: 1.22rem !important;
    line-height: 1.5 !important;
  }
}

/* ── hook-box：スマホで余白縮小 ── */
@media(max-width:480px) {
  .hook-box {
    padding: 16px 14px !important;
  }
}

/* ── point-card / for-who：スマホ余白 ── */
@media(max-width:480px) {
  .point-card {
    padding: 16px !important;
  }
  .for-who {
    padding: 12px 14px !important;
    font-size: .84rem !important;
  }
}

/* ── md-grid（メリット/デメリット）：スマホ1列は既存で対応済み ── */

/* ── kaiyuu2-grid：スマホ1列（既存480px対応を480→560に拡張） ── */
@media(max-width:560px) {
  .kaiyuu2-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── step-box-scene（VPNテレワーク記事など）：スマホ余白縮小 ── */
@media(max-width:480px) {
  .step-box-scene {
    padding: 16px 14px !important;
  }
}

/* ===================================================
   SWELL × Jin デザインシステム
   全記事統一アップデート（2026-05-22）
   h2/h3/h4・リスト・引用・TOC・テーブル・汎用ボックスを刷新
   =================================================== */

/* ── 記事本文 行間・文字間 ── */
.entry-content {
  line-height: 1.9;
  letter-spacing: .02em;
}

/* ── h2 見出し（SWELL風：青グラデーション帯） ── */
.article .entry-content h2 {
  font-size: 1.22rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border-left: 5px solid #0369a1 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 14px 18px 14px 20px !important;
  margin: 40px 0 18px !important;
  line-height: 1.5 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 2px 10px rgba(3,105,161,.08) !important;
}

/* ── h3 見出し（Jin風：オレンジ左ボーダー＋破線） ── */
.article .entry-content h3 {
  font-size: 1.06rem !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  background: none !important;
  border-left: 4px solid #f97316 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1.5px dashed #e2e8f0 !important;
  padding: 8px 14px 10px !important;
  margin: 30px 0 14px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
}

/* ── h4 見出し（シンプルグレー左線） ── */
.article .entry-content h4 {
  font-size: .98rem !important;
  font-weight: 800 !important;
  color: #334155 !important;
  background: none !important;
  border-left: 3px solid #94a3b8 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 5px 0 5px 12px !important;
  margin: 22px 0 10px !important;
  box-shadow: none !important;
}

/* ── ul li チェックアイコン自動付与（SWELL風） ── */
/* nav・toc・class付きulは対象外 */
.entry-content ul:not([class]) li,
.entry-content .wp-block-list li {
  list-style: none !important;
  padding-left: 1.8em !important;
  position: relative !important;
  margin-bottom: .5em !important;
  line-height: 1.85 !important;
}
.entry-content ul:not([class]) li::before,
.entry-content .wp-block-list li::before {
  content: '✅' !important;
  position: absolute !important;
  left: 0 !important;
  top: .15em !important;
  font-size: .82em !important;
  line-height: 1 !important;
}

/* ── ol li ── */
.entry-content ol li {
  margin-bottom: .5em !important;
  line-height: 1.85 !important;
  padding-left: .3em !important;
}

/* ── blockquote（Jin風：インディゴ左線） ── */
.article .entry-content blockquote {
  background: #f8fafc !important;
  border-left: 5px solid #6366f1 !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  color: #475569 !important;
  font-style: normal !important;
  font-size: .95rem !important;
  box-shadow: none !important;
}
.article .entry-content blockquote p {
  margin: 0 !important;
  line-height: 1.8 !important;
}

/* ── 一般テーブル改善（.hikaku-table は既存スタイル維持） ── */
.entry-content table:not(.hikaku-table) {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.07) !important;
  font-size: .88rem !important;
  margin: 24px 0 !important;
}
.entry-content table:not(.hikaku-table) th {
  background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 11px 14px !important;
  text-align: center !important;
  border: none !important;
}
.entry-content table:not(.hikaku-table) td {
  padding: 10px 14px !important;
  border: 1px solid #e2e8f0 !important;
  vertical-align: middle !important;
}
.entry-content table:not(.hikaku-table) tr:nth-child(even) td {
  background: #f8fafc !important;
}
.entry-content table:not(.hikaku-table) tbody tr:first-child td {
  background: #fffbeb !important;
  font-weight: 700 !important;
}

/* ── TOC（目次）スタイル刷新（SWELL風） ── */
.article .toc {
  background: linear-gradient(135deg, #f8faff, #eff6ff) !important;
  border: 1.5px solid #c7d2fe !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin: 32px 0 !important;
  box-shadow: 0 2px 12px rgba(99,102,241,.08) !important;
}
.article .toc-title {
  font-size: .95rem !important;
  font-weight: 900 !important;
  color: #3730a3 !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.article .toc-title::before {
  content: '📋' !important;
  font-size: 1rem !important;
}
.article .toc ol,
.article .toc ul {
  padding-left: 1.4em !important;
  margin: 0 !important;
}
.article .toc li {
  list-style: decimal !important;
  padding-left: .3em !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
}
.article .toc li::before {
  content: none !important;
}
.article .toc a {
  color: #3b82f6 !important;
  text-decoration: none !important;
  font-size: .87rem !important;
  font-weight: 600 !important;
  display: block !important;
  padding: 5px 0 !important;
  border-bottom: 1px dashed #c7d2fe !important;
  transition: color .15s, padding-left .15s !important;
  line-height: 1.5 !important;
}
.article .toc li:last-child > a {
  border-bottom: none !important;
}
.article .toc a:hover {
  color: #2563eb !important;
  padding-left: 4px !important;
}

/* ── 汎用ボックスクラス（記事執筆時に使える） ── */
/* ポイントボックス */
.box-point {
  background: #eff6ff;
  border: 1.5px solid #93c5fd;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: .92rem;
  line-height: 1.8;
}
.box-point::before { content: none; }

/* 注意ボックス */
.box-warn {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-left: 5px solid #dc2626;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: .92rem;
  line-height: 1.85;
}
.box-warn::before { content: none; }
.box-warn p { margin: 0; color: #334155; }

/* まとめボックス */
.box-summary {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 24px 0;
  font-size: .92rem;
  line-height: 1.8;
}
.box-summary::before { content: '✅ まとめ'; display: block; font-weight: 900; color: #15803d; margin-bottom: 8px; font-size: .88rem; }

/* ── ダークモード対応 ── */
html[data-theme="dark"] .article .entry-content h2 {
  background: linear-gradient(135deg, #0c2340, #0f3060) !important;
  color: #e2e8f0 !important;
  border-left-color: #38bdf8 !important;
  box-shadow: 0 2px 10px rgba(56,189,248,.08) !important;
}
html[data-theme="dark"] .article .entry-content h3 {
  color: #d0d8f0 !important;
  border-left-color: #f97316 !important;
  border-bottom-color: #2d3748 !important;
}
html[data-theme="dark"] .article .entry-content h4 {
  color: #94a3b8 !important;
  border-left-color: #475569 !important;
}
html[data-theme="dark"] .article .entry-content blockquote {
  background: #1e2d40 !important;
  color: #94a3b8 !important;
  border-left-color: #818cf8 !important;
}
html[data-theme="dark"] .entry-content table:not(.hikaku-table) th {
  background: linear-gradient(135deg, #1e3060, #1e40af) !important;
}
html[data-theme="dark"] .entry-content table:not(.hikaku-table) td {
  border-color: #2d3748 !important;
  color: #d1d5db !important;
}
html[data-theme="dark"] .entry-content table:not(.hikaku-table) tr:nth-child(even) td {
  background: #1a2035 !important;
}
html[data-theme="dark"] .entry-content table:not(.hikaku-table) tbody tr:first-child td {
  background: #1f1a00 !important;
}
html[data-theme="dark"] .article .toc {
  background: linear-gradient(135deg, #0f1728, #131e40) !important;
  border-color: #2d3560 !important;
}
html[data-theme="dark"] .article .toc-title {
  color: #93c5fd !important;
}
html[data-theme="dark"] .article .toc a {
  color: #60a5fa !important;
  border-bottom-color: #1e2a50 !important;
}
html[data-theme="dark"] .box-point { background: #0f1e3a; border-color: #3b5998; }
html[data-theme="dark"] .box-warn  { background: #2a1500; border-color: #b45309; }
html[data-theme="dark"] .box-summary { background: #0a1f14; border-color: #166534; }

/* ── モバイル対応 ── */
@media(max-width:640px) {
  .article .entry-content h2 {
    font-size: 1.06rem !important;
    padding: 12px 14px 12px 16px !important;
    margin: 30px 0 14px !important;
  }
  .article .entry-content h3 {
    font-size: .96rem !important;
    margin: 22px 0 10px !important;
  }
  .article .toc {
    padding: 16px !important;
  }
  .entry-content table:not(.hikaku-table) th,
  .entry-content table:not(.hikaku-table) td {
    font-size: .8rem !important;
    padding: 8px 10px !important;
  }
}

/* =====================================================
   📱 セキュリティ記事 モバイル最適化（共通）
   対象: sns-investment / romance / youtube / line /
         crypto / sterling-house
   ===================================================== */

/* ── fact-table: 横スクロール対応 ── */
@media(max-width:640px){
  .fact-table{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;border-radius:10px}
  .fact-table th{white-space:normal!important;min-width:90px!important;width:auto!important;font-size:.82rem!important;padding:9px 11px!important}
  .fact-table td{font-size:.84rem!important;padding:9px 11px!important;line-height:1.7!important}

  /* ── hero-stats: 2列グリッドに ── */
  .hero-stats{gap:10px!important;margin-top:14px!important}
  .hero-stat{min-width:calc(50% - 5px)!important;padding:10px 8px!important;flex:1 1 calc(50% - 5px)!important}
  .hero-stat-n{font-size:1.2rem!important}
  .hero-stat-l{font-size:.65rem!important}

  /* ── icon-balloon: アイコン小さく ── */
  .icon-balloon{gap:10px!important}
  .icon-balloon-left{width:48px!important}
  .icon-balloon-left img{width:42px!important;height:42px!important}
  .icon-balloon-body{font-size:.84rem!important;padding:11px 13px!important}
  .icon-balloon-body::before{left:-8px!important}
  .icon-balloon.right .icon-balloon-body::before{right:-8px!important}

  /* ── quiz: モバイル対応 ── */
  .quiz-check{padding:16px!important}
  .quiz-check-hd{flex-direction:column!important;align-items:flex-start!important;gap:6px!important}
  .quiz-check-title{font-size:.92rem!important}
  .quiz-item{padding:10px 12px 10px 44px!important;font-size:.84rem!important}
  .quiz-item .q-box{left:11px!important;top:11px!important;width:22px!important;height:22px!important;font-size:.85rem!important}

  /* ── ボックス系: padding圧縮 ── */
  .case-card,.trick-card,.route-card{padding:14px 15px!important}
  .consult-box{padding:16px 15px!important}
  .hijack-flow{padding:16px!important}
  .conv-box{padding:14px 15px!important}
  .sec{padding:26px 0 10px}

  /* ── 見出しh2/h3 ── */
  .sec h3{font-size:.98rem!important}

  /* ── trick-grid: 1列 ── */
  .trick-grid{grid-template-columns:1fr!important}

  /* ── step-d-item: 縦積み ── */
  .step-d-item{flex-direction:column!important;gap:10px!important;padding:16px!important}

  /* ── hijack-step ── */
  .hijack-step{padding:10px 12px!important;font-size:.84rem!important}

  /* ── check-list ── */
  .check-list li{font-size:.84rem!important;padding:8px 0 8px 28px!important}

  /* ── consult-list ── */
  .consult-list li{font-size:.84rem!important;padding:7px 0 7px 28px!important}

  /* ── hero h1 ── */
  .hero h1{font-size:clamp(1.15rem,5vw,1.55rem)!important}

  /* ── hero-tag ── */
  .hero-tag{font-size:.72rem!important;padding:4px 12px!important}

  /* ── crumb: 省スペース ── */
  .crumb{font-size:.73rem!important}

  /* ── sec h2 補強 ── */
  .sec h2{padding:12px 14px!important;font-size:1rem!important}
  .sec h2 .n{font-size:1rem!important;width:34px!important;height:34px!important;line-height:34px!important}

  /* ── container 横padding ── */
  .container{padding-left:14px!important;padding-right:14px!important}
}

/* ===================================================
   ハブカード（hub-card）グローバル定義
   hikaku/ など全ページで使用可能
   カテゴリ追加時はここに色を追記する
   =================================================== */
.hub-intro-section{margin:32px 0 40px;padding:28px 20px;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);border-radius:16px;border:1px solid rgba(251,191,36,.25)}
.hub-intro-title{text-align:center;font-size:1rem;font-weight:700;color:#fbbf24;letter-spacing:.06em;margin:0 0 20px;display:flex;align-items:center;justify-content:center;gap:8px}
.hub-intro-title::before,.hub-intro-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(251,191,36,.4),transparent)}
.hub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:700px){.hub-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:380px){.hub-grid{grid-template-columns:1fr 1fr;gap:8px}}
.hub-card{display:block;border-radius:10px;overflow:hidden;background:#0f172a;border:2px solid rgba(255,255,255,.15);text-decoration:none;transition:transform .2s,box-shadow .2s}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.4);filter:brightness(1.08)}
.hub-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.hub-card-body{padding:10px 10px 12px}
.hub-card-badge{display:inline-block;font-size:.6rem;font-weight:700;border-radius:4px;padding:2px 6px;margin-bottom:6px;letter-spacing:.04em;color:#fff}
.hub-card-title{font-size:.82rem;font-weight:800;color:#f1f5f9;line-height:1.45;word-break:keep-all;overflow-wrap:break-word}
.hub-card-sub{font-size:.65rem;color:#94a3b8;margin-top:4px;line-height:1.4}
/* カテゴリ別カラー（新カテゴリ追加時はここに追記） */
.hub-card--vpn     {border-color:#6366f1}
.hub-card--vpn     .hub-card-badge{background:#6366f1}
.hub-card--sec     {border-color:#dc2626}
.hub-card--sec     .hub-card-badge{background:#dc2626}
.hub-card--sim     {border-color:#16a34a}
.hub-card--sim     .hub-card-badge{background:#16a34a}
.hub-card--fukugyo {border-color:#f97316}
.hub-card--fukugyo .hub-card-badge{background:#f97316}
.hub-card--ai      {border-color:#7c3aed}
.hub-card--ai      .hub-card-badge{background:#7c3aed}
.hub-card--kaden   {border-color:#0891b2}
.hub-card--kaden   .hub-card-badge{background:#0891b2}
.hub-card--pc      {border-color:#2563eb}
.hub-card--pc      .hub-card-badge{background:#2563eb}

/* ===================================================
   編集部コメント（ed-note）
   被害者バルーンとの「会話」に見えないよう
   解説インサートとして表示する
   =================================================== */
.ed-note{margin:22px 0 28px;background:#f0f9ff;border-left:4px solid #0369a1;border-radius:0 12px 12px 0;padding:16px 20px}
.ed-note-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ed-note-head img{width:28px!important;height:28px!important;max-width:28px!important;border-radius:50%;object-fit:cover;border:2px solid #bae6fd;flex-shrink:0}
.ed-note-head span{font-size:.78rem;font-weight:800;color:#0369a1;letter-spacing:.04em;text-transform:uppercase}
.ed-note-body{font-size:.88rem;line-height:1.85;color:#1e293b}
.ed-note-body strong{color:#0c4a6e}
.ed-note-body a{color:#0369a1}

/* ══════════════════════════════════════════════════
   関連記事セクション 刷新デザイン（2026-05-24）
   .related-hub（総合ガイド）+ .related-sub（サブ記事）
   ══════════════════════════════════════════════════ */

/* ── ラッパー共通 ── */
.related-wrap{margin-top:40px;border-top:2px solid #e2e8f0;padding-top:28px}
.related-wrap h3{font-size:1rem!important;font-weight:800!important;color:#1e293b!important;margin-bottom:6px!important;border:none!important;padding:0!important;background:none!important;box-shadow:none!important}
.related-list{display:flex;flex-direction:column;gap:12px}

/* ── 総合ガイド（ハブ）カード ── */
.related-hub{display:flex;align-items:flex-start;gap:14px;background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);border:none;border-radius:14px;padding:18px 20px;text-decoration:none;color:#fff!important;font-size:.9rem;font-weight:700;transition:transform .22s,box-shadow .22s;position:relative;overflow:hidden}
.related-hub::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.15),transparent 60%);pointer-events:none}
.related-hub:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(79,70,229,.35);color:#fff!important}
.related-hub-icon{font-size:1.6rem;flex-shrink:0;margin-top:2px;line-height:1}
.related-hub-body{flex:1;min-width:0}
.related-hub-badge{display:inline-block;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:.64rem;font-weight:800;padding:2px 10px;border-radius:20px;letter-spacing:.06em;margin-bottom:6px}
.related-hub-title{font-size:1rem;font-weight:900;line-height:1.4;margin-bottom:4px;color:#fff}
.related-hub-desc{font-size:.8rem;color:rgba(255,255,255,.85);font-weight:500;line-height:1.55}
.related-hub-arrow{flex-shrink:0;font-size:1.3rem;color:rgba(255,255,255,.65);transition:transform .2s,color .2s;align-self:center;font-weight:900}
.related-hub:hover .related-hub-arrow{transform:translateX(5px);color:#fff}

/* ── サブ記事カード ── */
.related-sub{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid #e2e8f0;border-left:4px solid #e2e8f0;border-radius:12px;padding:14px 16px;text-decoration:none;color:#1e293b!important;transition:transform .2s,box-shadow .2s,border-left-color .2s}
.related-sub:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-left-color:#6366f1;color:#1e293b!important}
.related-sub-emoji{font-size:1.2rem;flex-shrink:0;line-height:1}
.related-sub-body{flex:1;min-width:0}
.related-sub-title{font-weight:800;font-size:.9rem;color:#1e293b;margin-bottom:2px}
.related-sub-desc{font-size:.78rem;color:#64748b;font-weight:500;line-height:1.5}
.related-sub-arrow{flex-shrink:0;color:#cbd5e1;font-size:1.1rem;font-weight:900;transition:color .2s,transform .2s}
.related-sub:hover .related-sub-arrow{color:#6366f1;transform:translateX(3px)}

/* ── ダークモード ── */
html[data-theme="dark"] .related-hub{background:linear-gradient(135deg,#3730a3,#5b21b6)!important}
html[data-theme="dark"] .related-sub{background:#1e2030!important;border-color:#2d3748!important;color:#d0d8f0!important}
html[data-theme="dark"] .related-sub:hover{border-left-color:#818cf8!important;box-shadow:0 8px 24px rgba(0,0,0,.3)!important}
html[data-theme="dark"] .related-sub-title{color:#e2e8f0!important}
html[data-theme="dark"] .related-sub-desc{color:#8892a4!important}

/* ── スマホ ── */
@media(max-width:600px){
  .related-hub{padding:14px 16px;gap:10px}
  .related-hub-icon{font-size:1.3rem}
  .related-hub-title{font-size:.92rem}
  .related-hub-desc{font-size:.76rem}
  .related-sub{padding:12px 13px;gap:10px}
}

/* =====================================================================
   ★ 共通比較表テンプレ「cx-」（2026-06-08 競合研究より標準化）
   横スクロール明示＋1列目固定／stickyヘッダー／順位バッジ金銀銅／
   最安セル強調／行末CTA／独自A:3秒診断で該当行が光る／
   独自B:「ここが惜しい」列／独自C:鮮度スタンプ。ダークモード対応込み。
   アクセント色は .cx-block の --cx-acc で記事ごとに上書き可。
   ===================================================================== */
.cx-block{--cx-acc:#1f3a5f;margin:22px 0}
.cx-block > input.cx-vh{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.cx-diag{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;padding:12px 14px;margin-bottom:12px}
.cx-diag-q{font-size:.82rem;font-weight:900;color:#0f172a;margin-right:4px}
.cx-diag label{font-size:.82rem;font-weight:700;color:#475569;background:#fff;border:1.5px solid #cbd5e1;border-radius:50px;padding:6px 14px;cursor:pointer;transition:all .15s;user-select:none}
.cx-diag label:hover{border-color:var(--cx-acc);color:var(--cx-acc)}
.cx-diag-hint{font-size:.72rem;color:#94a3b8;width:100%;margin-top:2px}
.cx-hint{display:none;font-size:.8rem;color:var(--cx-acc);text-align:center;font-weight:700;margin:0 0 6px}
.cx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;box-shadow:0 2px 12px rgba(15,23,42,.06)}
.cx-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem;min-width:600px;background:#fff}
.cx-table th,.cx-table td{padding:11px 12px;border-bottom:1px solid #e8edf3;text-align:center;vertical-align:middle}
.cx-table thead th{position:sticky;top:0;background:var(--cx-acc);color:#fff;font-weight:800;font-size:.8rem;z-index:3}
.cx-table th:first-child,.cx-table td:first-child{position:sticky;left:0;background:#fff;text-align:left;font-weight:800;color:#0f172a;z-index:2;box-shadow:2px 0 5px rgba(0,0,0,.05)}
.cx-table thead th:first-child{background:var(--cx-acc);color:#fff;z-index:4}
.cx-table tbody tr:hover td{background:#f5f9ff}
.cx-table tbody tr:hover td:first-child{background:#eef5ff}
.cx-rank{display:inline-flex;width:1.9em;height:1.9em;border-radius:50%;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:.74rem;margin-right:6px;vertical-align:middle;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.cx-r1{background:linear-gradient(135deg,#fbbf24,#d97706)}
.cx-r2{background:linear-gradient(135deg,#cbd5e1,#94a3b8)}
.cx-r3{background:linear-gradient(135deg,#e0a875,#b5813f)}
.cx-yen{font-weight:900;color:var(--cx-acc);font-size:1.02rem}
.cx-table td.cx-best{background:#ecfdf5;font-weight:800;color:#047857}
.cx-table td.cx-best::after{content:"最安";font-size:.58rem;margin-left:4px;border:1px solid #047857;border-radius:3px;padding:0 4px;color:#047857;vertical-align:middle;white-space:nowrap}
.cx-oshii{font-size:.78rem;color:#334155;background:#f1f5f9;border-radius:6px;padding:6px 8px;text-align:left;line-height:1.55}
.cx-cta{display:inline-block;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff!important;font-weight:800;font-size:.78rem;padding:8px 15px;border-radius:50px;text-decoration:none;white-space:nowrap;box-shadow:0 3px 10px rgba(234,88,12,.32);transition:transform .15s,box-shadow .15s}
.cx-cta:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(234,88,12,.45);opacity:1!important}
.cx-cta.sub{background:#0f172a;box-shadow:none}
.cx-stamp{font-size:.72rem;color:#94a3b8;text-align:right;margin:6px 2px 0}
.cx-stamp::before{content:"🕒 "}
.cx-block input.cx-vh:checked ~ .cx-diag label{opacity:.55}
#cxq-1:checked ~ .cx-diag label[for="cxq-1"],#cxq-2:checked ~ .cx-diag label[for="cxq-2"],#cxq-3:checked ~ .cx-diag label[for="cxq-3"],#cxq-4:checked ~ .cx-diag label[for="cxq-4"]{opacity:1;background:var(--cx-acc);color:#fff;border-color:var(--cx-acc)}
#cxq-1:checked ~ .cx-wrap .cx-pick-1 td,#cxq-2:checked ~ .cx-wrap .cx-pick-2 td,#cxq-3:checked ~ .cx-wrap .cx-pick-3 td,#cxq-4:checked ~ .cx-wrap .cx-pick-4 td{background:#fffbeb!important;box-shadow:inset 0 0 0 2px #f59e0b}
#cxq-1:checked ~ .cx-wrap .cx-pick-1 td:first-child::before,#cxq-2:checked ~ .cx-wrap .cx-pick-2 td:first-child::before,#cxq-3:checked ~ .cx-wrap .cx-pick-3 td:first-child::before,#cxq-4:checked ~ .cx-wrap .cx-pick-4 td:first-child::before{content:"👉 あなた向け";display:block;font-size:.6rem;font-weight:900;color:#b45309;margin-bottom:3px}
@media(max-width:680px){.cx-hint{display:block}}
html[data-theme="dark"] .cx-diag{background-color:#262840!important;border-color:#3e4268!important}
html[data-theme="dark"] .cx-diag-q{color:#e8ecf8!important}
html[data-theme="dark"] .cx-diag label{background-color:#1e2030!important;color:#c0c8e0!important;border-color:#3e4268!important}
html[data-theme="dark"] .cx-table,html[data-theme="dark"] .cx-table td:first-child{background-color:#262840!important}
html[data-theme="dark"] .cx-table td{color:#d0d8f0!important;border-bottom-color:#3e4268!important}
html[data-theme="dark"] .cx-table td:first-child{color:#e8ecf8!important}
html[data-theme="dark"] .cx-table tbody tr:hover td,html[data-theme="dark"] .cx-table tbody tr:hover td:first-child{background-color:#2f3556!important}
html[data-theme="dark"] .cx-table td.cx-best{background-color:#10322a!important;color:#6ee7b7!important}
html[data-theme="dark"] .cx-oshii{background-color:#2b2f44!important;color:#cdd5ea!important}
html[data-theme="dark"] #cxq-1:checked ~ .cx-wrap .cx-pick-1 td,html[data-theme="dark"] #cxq-2:checked ~ .cx-wrap .cx-pick-2 td,html[data-theme="dark"] #cxq-3:checked ~ .cx-wrap .cx-pick-3 td,html[data-theme="dark"] #cxq-4:checked ~ .cx-wrap .cx-pick-4 td{background-color:#3a2f10!important}