/*
 * Theme Name:  Cocoon Child - 恋活ラボ
 * Theme URI:   https://dream-coaching.conohawing.com
 * Description: Cocoonチャイルドテーマ - マッチングアプリアフィリエイトサイト用カスタムスタイル
 * Author:      恋活ラボ
 * Template:    cocoon-master
 * Version:     1.0.0
 * License:     GNU General Public License v2 or later
 */

/* ============================================================
   CSS カスタムプロパティ（ブランドカラー変数）
   サイト全体の色はここを変更するだけでOK
   ============================================================ */
:root {
  --color-primary:    #E8536C; /* メイン：温かみのあるローズピンク */
  --color-secondary:  #2D4A6E; /* サブ：落ち着いたネイビー */
  --color-accent:     #F5A623; /* アクセント：信頼感のあるゴールド */
  --color-bg:         #FAFAF9; /* 背景：わずかにウォーム */
  --color-text:       #333333; /* 本文テキスト */
  --color-text-light: #666666; /* 補足テキスト */
  --color-border:     #E5E5E5; /* 罫線 */
  --color-white:      #FFFFFF;

  /* ランキングカラー */
  --color-rank1: #E8536C; /* 1位：ローズピンク */
  --color-rank2: #2D4A6E; /* 2位：ネイビー */
  --color-rank3: #F5A623; /* 3位：ゴールド */

  /* タイポグラフィ */
  --font-base: 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴ ProN W3', sans-serif;
  --font-size-base: 15px;
  --line-height-base: 1.9;

  /* スペーシング */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* 角丸 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* シャドウ */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   ベーススタイル
   ============================================================ */
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  opacity: 0.75;
}

img {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   ヘッダー
   シンプルにサイト名を中央に大きく見せるデザイン
   ============================================================ */
#header {
  background: var(--color-white);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-md);
}

/* サイトロゴ・タイトル */
#header .site-name-text,
#header .header-logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

/* キャッチフレーズ */
#header .site-description,
#header .header-logo-sub-text {
  font-size: 11px;
  color: var(--color-text-light);
  letter-spacing: 0.03em;
  margin-top: 2px;
}

/* ヘッダーPC表示 */
@media (min-width: 768px) {
  #header {
    padding: var(--space-lg) var(--space-xl);
  }
  #header .site-name-text,
  #header .header-logo-text {
    font-size: 28px;
  }
  #header .site-description,
  #header .header-logo-sub-text {
    font-size: 13px;
  }
}


/* ============================================================
   グローバルナビゲーション
   ============================================================ */
#navi {
  background: var(--color-secondary);
}

#navi .navi-in > ul > li > a {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 16px;
  transition: background 0.2s ease;
}

#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li.current-menu-item > a {
  background: var(--color-primary);
  opacity: 1;
}


/* ============================================================
   記事エリア
   ============================================================ */
.entry-content {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* ============================================================
   見出しスタイル（h2・h3）
   左ボーダーアクセント + 視認性重視
   ============================================================ */

/* h2：メインセクション見出し */
.entry-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-secondary);
  border-left: 5px solid var(--color-primary);
  background: linear-gradient(to right, rgba(232, 83, 108, 0.07), transparent);
  padding: 10px 14px;
  margin: var(--space-xl) 0 var(--space-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.5;
}

/* h3：サブセクション見出し */
.entry-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  border-left: 4px solid var(--color-accent);
  padding: 6px 12px;
  margin: var(--space-lg) 0 var(--space-sm);
  line-height: 1.5;
}

/* h4：小見出し */
.entry-content h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-secondary);
  padding-bottom: 4px;
  border-bottom: 2px dotted var(--color-border);
  margin: var(--space-md) 0 var(--space-sm);
}

/* PC用見出しサイズ調整 */
@media (min-width: 768px) {
  .entry-content h2 { font-size: 22px; }
  .entry-content h3 { font-size: 18px; }
  .entry-content h4 { font-size: 16px; }
}


/* ============================================================
   アフィリエイトCTAボタン .cta-btn
   目立つ大型ボタン、クリック率を最大化するデザイン
   ============================================================ */
.cta-btn {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: var(--space-lg) auto;
  padding: 18px 24px;
  background: var(--color-primary);
  color: var(--color-white) !important;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 0 #b83a52, var(--shadow-md);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* 矢印アイコン */
.cta-btn::after {
  content: ' ▶';
  font-size: 12px;
  margin-left: var(--space-xs);
}

/* ホバー：少し浮かせる */
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #b83a52, var(--shadow-lg);
  opacity: 1;
}

/* クリック：押し込む */
.cta-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b83a52, var(--shadow-sm);
}

/* カラーバリエーション */
.cta-btn.cta-btn--navy {
  background: var(--color-secondary);
  box-shadow: 0 4px 0 #1a2d45, var(--shadow-md);
}
.cta-btn.cta-btn--navy:hover {
  box-shadow: 0 6px 0 #1a2d45, var(--shadow-lg);
}

.cta-btn.cta-btn--gold {
  background: var(--color-accent);
  color: var(--color-text) !important;
  box-shadow: 0 4px 0 #c07d0e, var(--shadow-md);
}
.cta-btn.cta-btn--gold:hover {
  box-shadow: 0 6px 0 #c07d0e, var(--shadow-lg);
}

/* サブテキスト（ボタン下の補足） */
.cta-btn-note {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: -12px;
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .cta-btn {
    font-size: 18px;
    padding: 20px 40px;
  }
}


/* ============================================================
   ランキングカード .ranking-card
   No.1〜3の各マッチングアプリ紹介カード
   ============================================================ */
.ranking-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin: var(--space-lg) 0;
  overflow: hidden;
  border: 2px solid var(--color-border);
  position: relative;
}

/* ランキングヘッダー部分 */
.ranking-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: #f8f8f8;
  border-bottom: 1px solid var(--color-border);
}

/* ランキングバッジ（番号） */
.ranking-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 900;
  color: var(--color-white);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

/* ランキングタイトル */
.ranking-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
}

.ranking-card__subtitle {
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 2px;
}

/* カード本文 */
.ranking-card__body {
  padding: var(--space-md);
}

/* 評価スター */
.ranking-card__rating {
  font-size: 18px;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.ranking-card__rating-text {
  font-size: 13px;
  color: var(--color-text-light);
  margin-left: var(--space-xs);
  vertical-align: middle;
}

/* 特徴リスト */
.ranking-card__features {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 var(--space-md);
}

.ranking-card__features li {
  padding: 4px 0 4px 20px;
  position: relative;
  font-size: 14px;
  color: var(--color-text);
}

.ranking-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* 1位カード */
.ranking-card--1 {
  border-color: var(--color-rank1);
  border-width: 3px;
}
.ranking-card--1 .ranking-card__badge {
  background: var(--color-rank1);
  width: 56px;
  height: 56px;
  font-size: 24px;
}
.ranking-card--1 .ranking-card__header {
  background: linear-gradient(135deg, #fff0f2, #ffffff);
}
/* 1位：王冠マーク */
.ranking-card--1::before {
  content: '👑';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  line-height: 1;
}
.ranking-card--1 {
  margin-top: 28px;
}

/* 2位カード */
.ranking-card--2 .ranking-card__badge {
  background: var(--color-rank2);
}
.ranking-card--2 .ranking-card__header {
  background: linear-gradient(135deg, #eef2f8, #ffffff);
}

/* 3位カード */
.ranking-card--3 .ranking-card__badge {
  background: var(--color-rank3);
}
.ranking-card--3 .ranking-card__header {
  background: linear-gradient(135deg, #fef9ee, #ffffff);
}

@media (min-width: 768px) {
  .ranking-card__header {
    padding: var(--space-lg);
  }
  .ranking-card__body {
    padding: var(--space-lg);
  }
  .ranking-card__title {
    font-size: 18px;
  }
}


/* ============================================================
   比較表 .compare-table
   料金・機能比較用テーブル、スマホでも横スクロール対応
   ============================================================ */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-lg) 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* スマホでスクロール可能であることを示すヒント */
.compare-table-wrap::before {
  content: '← 横にスクロールできます →';
  display: block;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-light);
  padding: 4px 0;
  background: #f0f0f0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

@media (min-width: 768px) {
  .compare-table-wrap::before {
    display: none; /* PCでは非表示 */
  }
}

.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--color-white);
}

/* ヘッダー行 */
.compare-table thead th {
  background: var(--color-secondary);
  color: var(--color-white);
  font-weight: 700;
  padding: 12px 16px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #1a2d45;
}

/* 左端の項目名列 */
.compare-table tbody th {
  background: #f5f7fa;
  color: var(--color-secondary);
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

/* データセル */
.compare-table tbody td {
  padding: 12px 16px;
  text-align: center;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

/* 1行おきに背景色 */
.compare-table tbody tr:nth-child(even) td,
.compare-table tbody tr:nth-child(even) th {
  background: #fbfbfb;
}

/* おすすめ列のハイライト */
.compare-table .col-recommended {
  background: rgba(232, 83, 108, 0.06) !important;
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}
.compare-table thead .col-recommended {
  background: var(--color-primary) !important;
  border-color: #c23355;
}

/* ○ ✕ 表示 */
.compare-table .mark-yes  { color: var(--color-primary); font-weight: 700; font-size: 16px; }
.compare-table .mark-no   { color: #ccc; font-size: 16px; }
.compare-table .mark-tri  { color: var(--color-accent); font-weight: 700; }

@media (min-width: 768px) {
  .compare-table {
    font-size: 14px;
    min-width: auto;
  }
}


/* ============================================================
   警告ボックス .caution-box
   [caution] ショートコードで挿入
   ============================================================ */
.caution-box {
  background: #fff8f8;
  border: 1px solid #f5c6cb;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-md) var(--space-md) 48px;
  margin: var(--space-lg) 0;
  position: relative;
  font-size: 14px;
  line-height: 1.7;
}

.caution-box::before {
  content: '⚠️';
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 18px;
}

.caution-box-title {
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
  font-size: 14px;
}


/* ============================================================
   チェックリスト .checklist-box
   [checklist] ショートコードで挿入
   ============================================================ */
.checklist-box {
  background: #f8fff9;
  border: 1px solid #c3e6cb;
  border-left: 4px solid #28a745;
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-lg) 0;
}

.checklist-box ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.checklist-box ul li {
  padding: 6px 0 6px 28px;
  position: relative;
  font-size: 14px;
  border-bottom: 1px dotted #d4edda;
}

.checklist-box ul li:last-child {
  border-bottom: none;
}

.checklist-box ul li::before {
  content: '✅';
  position: absolute;
  left: 0;
  font-size: 15px;
}


/* ============================================================
   ランキングバッジ（インライン） .rank-badge
   [rank_badge num="1"] ショートコードで挿入
   ============================================================ */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-white);
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

.rank-badge--1 { background: var(--color-rank1); }
.rank-badge--2 { background: var(--color-rank2); }
.rank-badge--3 { background: var(--color-rank3); }
.rank-badge--other { background: #999; }


/* ============================================================
   サイドバー
   ============================================================ */
#sidebar .widget {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

#sidebar .widget_title,
#sidebar .widgettitle {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-secondary);
  padding: 8px 12px;
  margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}


/* ============================================================
   パンくずリスト
   ============================================================ */
.breadcrumb {
  font-size: 12px;
  color: var(--color-text-light);
  padding: 8px var(--space-md);
  background: #f0f0f0;
}

.breadcrumb a {
  color: var(--color-text-light);
}


/* ============================================================
   フッター
   ============================================================ */
#footer {
  background: var(--color-secondary);
  color: rgba(255, 255, 255, 0.8);
  padding: var(--space-xl) var(--space-md) var(--space-md);
  margin-top: var(--space-xl);
}

#footer a {
  color: rgba(255, 255, 255, 0.7);
}

#footer a:hover {
  color: var(--color-white);
}

.footer-copy {
  font-size: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--space-lg);
}


/* ============================================================
   アフィリエイト開示（広告表記）
   ============================================================ */
.ad-disclosure {
  display: inline-block;
  font-size: 11px;
  color: var(--color-text-light);
  background: #f5f5f5;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  margin-bottom: var(--space-md);
  vertical-align: middle;
}

/* 記事上部の広告開示 */
.entry-ad-disclosure {
  font-size: 12px;
  color: var(--color-text-light);
  background: #f9f9f9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: var(--space-lg);
}


/* ============================================================
   SNSシェアボタン（Cocoonデフォルト上書き）
   ============================================================ */
.sns-share-buttons .sns-share-button {
  border-radius: var(--radius-md);
}


/* ============================================================
   ページネーション
   ============================================================ */
.pagination .page-numbers {
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}


/* ============================================================
   記事カード（一覧ページ）
   ============================================================ */
.card-wrap:hover .card {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


/* ============================================================
   ユーティリティクラス
   ============================================================ */
/* テキスト中央揃え */
.text-center { text-align: center; }

/* 強調テキスト */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }

/* スペーサー */
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

/* PCのみ表示 */
.pc-only { display: none; }
@media (min-width: 768px) {
  .pc-only  { display: block; }
  .sp-only  { display: none; }
}


/* ============================================================
   ビジュアル強化 v2.0 — 華やか・キャッチーデザイン
   ============================================================ */

/* ── ヘッダー：グラデーション＋ロゴ強化 ── */
#header {
  background: linear-gradient(135deg, #fff5f6 0%, #ffffff 50%, #f5f8ff 100%);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-primary), var(--color-secondary)) 1;
  box-shadow: 0 2px 12px rgba(232, 83, 108, 0.12);
}

#header .site-name-text,
#header .header-logo-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, #c0335a 50%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* ── ナビ：グラデーション背景 ── */
#navi {
  background: linear-gradient(90deg, var(--color-secondary) 0%, #3d5f8a 100%);
  box-shadow: 0 2px 8px rgba(45, 74, 110, 0.3);
}

/* ── CTAボタン：グラデーション＋シャイン＋パルスアニメ ── */
@keyframes btn-shine {
  0%   { left: -100%; }
  60%  { left: 120%; }
  100% { left: 120%; }
}

@keyframes btn-pulse {
  0%   { box-shadow: 0 4px 0 #b83a52, 0 0 0 0 rgba(232, 83, 108, 0.5); }
  70%  { box-shadow: 0 4px 0 #b83a52, 0 0 0 12px rgba(232, 83, 108, 0); }
  100% { box-shadow: 0 4px 0 #b83a52, 0 0 0 0 rgba(232, 83, 108, 0); }
}

.cta-btn {
  background: linear-gradient(135deg, #f0607a 0%, var(--color-primary) 40%, #d43f5f 100%);
  overflow: hidden;
  animation: btn-pulse 2.5s infinite;
  letter-spacing: 0.08em;
  font-size: 17px;
}

.cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: btn-shine 3s infinite 1s;
}

.cta-btn.cta-btn--navy {
  background: linear-gradient(135deg, #3d5f8a 0%, var(--color-secondary) 40%, #1e3456 100%);
  animation: none;
}

.cta-btn.cta-btn--gold {
  background: linear-gradient(135deg, #f7b733 0%, var(--color-accent) 40%, #d4870a 100%);
  animation: none;
}

/* ── ランキングカード：グラデーション＋ホバー演出 ── */
.ranking-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: var(--radius-lg);
}

.ranking-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.ranking-card--1 .ranking-card__header {
  background: linear-gradient(135deg, #ffe4ea 0%, #fff5f7 60%, #ffffff 100%);
}

.ranking-card--1 .ranking-card__badge {
  background: linear-gradient(135deg, #ff7090, var(--color-rank1), #c0335a);
  box-shadow: 0 4px 12px rgba(232, 83, 108, 0.5);
  font-size: 26px;
}

.ranking-card--2 .ranking-card__header {
  background: linear-gradient(135deg, #dde8f8 0%, #eef4ff 60%, #ffffff 100%);
}

.ranking-card--2 .ranking-card__badge {
  background: linear-gradient(135deg, #4a72a8, var(--color-rank2), #1a2d45);
  box-shadow: 0 4px 12px rgba(45, 74, 110, 0.4);
}

.ranking-card--3 .ranking-card__badge {
  background: linear-gradient(135deg, #ffc94a, var(--color-rank3), #c07d0e);
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.4);
}

/* ── 記事カード（一覧）：ホバー強化 ── */
.card-wrap {
  transition: transform 0.2s ease;
}

.card-wrap:hover {
  transform: translateY(-4px);
}

.card-wrap:hover .card {
  box-shadow: 0 8px 32px rgba(232, 83, 108, 0.15);
}

/* ── 見出し h2：グラデーション背景 ── */
.entry-content h2 {
  background: linear-gradient(to right, rgba(232, 83, 108, 0.10), rgba(232, 83, 108, 0.02), transparent);
  border-left: 5px solid var(--color-primary);
  position: relative;
}

/* ── トップページ：リード（PR）バナーボックス ── */
.koikatsu-lead-box {
  background: linear-gradient(135deg, #fff0f3 0%, #fff8f5 50%, #f0f5ff 100%);
  border: 2px solid rgba(232, 83, 108, 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.koikatsu-lead-box::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(232, 83, 108, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.koikatsu-lead-box__title {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
}

/* ── スコアメーター（総合評価） ── */
.score-box {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

.score-box__value {
  font-size: 40px;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  min-width: 64px;
  text-align: center;
}

.score-box__value span {
  font-size: 16px;
  color: var(--color-text-light);
  font-weight: 400;
}

.score-box__stars {
  color: var(--color-accent);
  font-size: 20px;
  letter-spacing: 2px;
}

.score-box__label {
  font-size: 13px;
  color: var(--color-text-light);
}

/* ── ラベルバッジ（おすすめ・PR表示） ── */
.label-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  vertical-align: middle;
  margin-left: var(--space-xs);
}

.label-badge--pr {
  background: var(--color-accent);
  color: #fff;
}

.label-badge--new {
  background: var(--color-primary);
  color: #fff;
}

.label-badge--best {
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: #fff;
  box-shadow: 0 2px 6px rgba(255, 165, 0, 0.4);
}

/* ── チェックリストボックス強化 ── */
.checklist-box {
  background: linear-gradient(135deg, #f0fff4 0%, #f8fff9 100%);
  border: 1px solid #a8d5b5;
  border-left: 5px solid #28a745;
  border-radius: var(--radius-md);
}

/* ── 注意ボックス強化 ── */
.caution-box {
  background: linear-gradient(135deg, #fff8f8 0%, #fffbfb 100%);
  border-left: 5px solid var(--color-primary);
  box-shadow: 0 2px 8px rgba(232, 83, 108, 0.08);
}

/* ── フッター：グラデーション強化 ── */
#footer {
  background: linear-gradient(135deg, #1e3456 0%, var(--color-secondary) 50%, #2a3f5f 100%);
  box-shadow: 0 -4px 20px rgba(45, 74, 110, 0.2);
}

/* ── 記事タイトルページ ── */
.entry-title {
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

/* ── 比較表ヘッダー強化 ── */
.compare-table thead th {
  background: linear-gradient(135deg, #3d5f8a, var(--color-secondary));
}

.compare-table thead .col-recommended {
  background: linear-gradient(135deg, #f0607a, var(--color-primary)) !important;
}

/* ── アニメーション：フェードイン ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ranking-card {
  animation: fadeInUp 0.5s ease both;
}

.ranking-card--1 { animation-delay: 0.1s; }
.ranking-card--2 { animation-delay: 0.2s; }
.ranking-card--3 { animation-delay: 0.3s; }

/* ── スマホ固定フッターCTA ── */
.sp-footer-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 10px 16px;
  background: rgba(30, 52, 86, 0.96);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}

.sp-footer-cta__btn {
  flex: 1;
  max-width: 320px;
  display: block;
  text-align: center;
  background: linear-gradient(135deg, #f0607a, var(--color-primary));
  color: #fff !important;
  padding: 14px 12px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none !important;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(232, 83, 108, 0.4);
  animation: btn-pulse 2.5s infinite;
}

@media (min-width: 768px) {
  .sp-footer-cta { display: none; }
}


/* ============================================================
   キャラクター「ハル」プロフィールボックス
   ============================================================ */

/* 記事下・サイドバーで使うプロフィールカード */
.haru-profile-box {
  background: linear-gradient(135deg, #fff5f7 0%, #fff0f8 40%, #f5f0ff 100%);
  border: 2px solid rgba(232, 83, 108, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  position: relative;
  overflow: hidden;
}

.haru-profile-box::before {
  content: '💘';
  position: absolute;
  top: -10px;
  right: 16px;
  font-size: 48px;
  opacity: 0.12;
  line-height: 1;
}

/* アバター＋名前エリア */
.haru-profile-box__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.haru-profile-box__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  box-shadow: 0 4px 12px rgba(232, 83, 108, 0.3);
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ffd6e0, #e8c7f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  overflow: hidden;
}

.haru-profile-box__avatar--emoji {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--color-primary);
  box-shadow: 0 4px 12px rgba(232, 83, 108, 0.3);
  background: linear-gradient(135deg, #ffd6e0, #e8c7f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  flex-shrink: 0;
  line-height: 1;
}

.haru-profile-box__name {
  font-size: 18px;
  font-weight: 900;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  margin: 0 0 2px;
}

.haru-profile-box__role {
  font-size: 12px;
  color: var(--color-text-light);
  background: rgba(232, 83, 108, 0.1);
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 500;
}

/* プロフィール本文 */
.haru-profile-box__bio {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  border-top: 1px dashed rgba(232, 83, 108, 0.2);
  padding-top: var(--space-md);
}

/* キャラクター吹き出しコメント */
.haru-speech {
  position: relative;
  background: #fff;
  border: 2px solid rgba(232, 83, 108, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-md) var(--space-md) 60px;
  margin: var(--space-lg) 0;
  font-size: 14px;
  line-height: 1.8;
  box-shadow: var(--shadow-sm);
}

.haru-speech::before {
  content: '🏹';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  line-height: 1;
}

/* 吹き出しの三角 */
.haru-speech::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: -12px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid rgba(232, 83, 108, 0.3);
}

.haru-speech-wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.haru-speech-wrap .haru-avatar-sm {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  background: linear-gradient(135deg, #ffd6e0, #e8c7f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(232, 83, 108, 0.25);
}

.haru-speech-wrap .haru-bubble {
  background: #fff;
  border: 2px solid rgba(232, 83, 108, 0.25);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: var(--space-md);
  font-size: 14px;
  line-height: 1.8;
  box-shadow: var(--shadow-sm);
  flex: 1;
}

.haru-speech-wrap .haru-bubble::before {
  content: 'ハルより 💘';
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}

/* 運営者情報ページ用プロフィールヘッダー */
.haru-hero {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  background: linear-gradient(135deg, #fff0f5 0%, #fdf5ff 50%, #f0f5ff 100%);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.haru-hero::before {
  content: '💘 💝 💖';
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  opacity: 0.2;
  letter-spacing: 8px;
}

.haru-hero__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto var(--space-md);
  border: 4px solid var(--color-primary);
  box-shadow: 0 8px 24px rgba(232, 83, 108, 0.35);
  background: linear-gradient(135deg, #ffd6e0 0%, #f7c6f0 50%, #d6c8f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  line-height: 1;
}

.haru-hero__name {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--color-primary), #9b59b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 var(--space-xs);
  letter-spacing: 0.1em;
}

.haru-hero__tagline {
  font-size: 14px;
  color: var(--color-text-light);
  margin: 0;
}