/* =============================================================
 * cv_improvements_v9.css (2026-05-10)
 * KPI ギャップ解消 第9弾。
 *
 * 背景 (tasks/daily_report_2026-05-10_opcon_lp.md):
 *   - 5/10 は GW特価キャンペーンの最終日。本日 24:00 で
 *       1年 1,980円 → 2,500円 / 2年 3,760円 → 5,000円 に値上げ。
 *   - Clarity デッドクリック 107 → 117 (+10)。v8救出後でも増加。
 *     新規発生源は mv-mini-compare__item と mv-rating の星アイコン。
 *   - 平均スクロール深度 15.81% → 15.61% (-0.20pt)、
 *     ボトム到達率 5.44% → 4.41% (-1.03pt) と微悪化。
 *     v8 の micro-CTA toast / m.facebook 専用バナーが視認性を
 *     下げた可能性 → v9 では UI 干渉を抑える方向に倒す。
 *   - m.facebook engagement 4.7% は引き続き致命的。
 *   - LP→Purchase = 18 / 1,503 = 1.20% (KPI 10% 比 -8.80pt)。
 *
 * 設計原則:
 *   - v3〜v8 のスタイルは尊重。新規クラスは `lp-v9-*` プレフィックス。
 *   - 既存 DOM への上書きは最小化し、ほぼ追加クラスのみで完結。
 *   - 5/11 以降は JS が `body` に `lp-post-gw` クラスを付け、
 *     `.lp-v9-postgw-*` の表示を制御する。
 *
 * 主な追加:
 *   1. .lp-v9-compare-link    : mv-mini-compare の各item をリンク化
 *   2. .lp-v9-rating-link     : mv-rating の星 → #voice リンク化
 *   3. .lp-v9-final12         : GW最終日12時間以内 赤色強調パルス
 *   4. .lp-v9-postgw-banner   : 5/11以降 値上げ後フォロー訴求バナー
 *   5. .lp-v9-trial-restore   : trial 復帰時 "お帰りなさい" メッセージ
 *   6. .lp-v9-purchase-trial  : Purchase ページ離脱救出 トライアル誘導
 *   7. .lp-v9-microcta-slim   : v8 micro-CTA toast の軽量版
 * ============================================================= */

/* ---------- 1. mv-mini-compare の各item リンク化 ---------- */
/* JSが各 .mv-mini-compare__item を <a> 化したときに視覚的に押せると分かる装飾 */
.lp-v9-compare-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.lp-v9-compare-link:hover,
.lp-v9-compare-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(22, 163, 74, .18);
}
.lp-v9-compare-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  pointer-events: none;
  transition: border-color .18s ease;
}
.lp-v9-compare-link:hover::after,
.lp-v9-compare-link:focus-visible::after {
  border-color: rgba(22, 163, 74, .35);
}
/* fix 2026-05-29:
   OPCONカード(.mv-mini-compare__item--ours)では v4 が定義する「最安」バッジ
   (::after with content "最安", background #ff6b35) を表示したいが、上で定義した
   .lp-v9-compare-link::after の content:'' / inset:0 が後勝ちで content だけを
   上書きし、v4 の background:#ff6b35 が継承されてカード全面が無テキストの
   オレンジ箱になっていた。OPCONカード専用の高詳細度ルールで ::after を
   v4 の「最安」バッジ仕様に戻す。 */
.mv-mini-compare__item--ours.lp-v9-compare-link::after,
.mv-mini-compare__item--ours.lp-v9-compare-link:hover::after,
.mv-mini-compare__item--ours.lp-v9-compare-link:focus-visible::after {
  content: "最安";
  position: absolute;
  inset: auto;
  top: -7px;
  right: -4px;
  background: #ff6b35;
  border: none;
  border-radius: 8px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}
.lp-v9-compare-saving {
  display: inline-block;
  margin-top: 4px;
  font-size: .82em;
  font-weight: 800;
  color: #b91c1c;
  letter-spacing: .02em;
}
.lp-v9-compare-saving::before {
  content: '▼ ';
  color: #b91c1c;
}

/* ---------- 2. mv-rating 星 → #voice リンク化 ---------- */
.lp-v9-rating-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .18s ease;
}
.lp-v9-rating-link:hover,
.lp-v9-rating-link:focus-visible {
  color: #16a34a;
  text-decoration: underline;
  text-decoration-color: rgba(22, 163, 74, .35);
  text-underline-offset: 3px;
}
.lp-v9-rating-link[role="link"] .mv-rating__stars {
  filter: drop-shadow(0 0 2px rgba(255, 200, 0, .5));
}

/* ---------- 3. GW最終日12時間以内 赤色強調 (gw-countdown-bar 拡張) ---------- */
.gw-countdown-bar.lp-v9-final12 {
  background: linear-gradient(90deg, #b91c1c 0%, #ef4444 50%, #b91c1c 100%);
  background-size: 200% 100%;
  animation: lp-v9-final12-shine 1.6s linear infinite, lp-v9-final12-pulse 1s ease-in-out infinite;
  font-size: 15px;
  letter-spacing: .03em;
  box-shadow: 0 4px 18px rgba(185, 28, 28, .55);
}
.gw-countdown-bar.lp-v9-final12 .gw-countdown-bar__time strong {
  background: rgba(255, 255, 255, .18);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 1.08em;
}
.gw-countdown-bar.lp-v9-final12 .gw-countdown-bar__cta {
  background: #fff;
  color: #b91c1c;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .04em;
  margin-left: 8px;
}
@keyframes lp-v9-final12-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes lp-v9-final12-pulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 18px rgba(185, 28, 28, .55); }
  50%      { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(239, 68, 68, .8); }
}

/* ---------- 4. 5/11以降 値上げ後フォロー訴求バナー ---------- */
/* webroot_lp.xhtml 側が is_gw_period=false のときレンダリングする想定 */
.lp-v9-postgw-banner {
  display: none;
  margin: 12px 0 16px;
  padding: 14px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1.5px solid #fb923c;
  color: #9a3412;
  font-weight: 700;
  line-height: 1.55;
  position: relative;
  text-align: left;
}
body.lp-post-gw .lp-v9-postgw-banner { display: block; }
.lp-v9-postgw-banner__head {
  font-size: 1.05em;
  font-weight: 900;
  display: block;
  margin-bottom: 4px;
  color: #c2410c;
}
.lp-v9-postgw-banner__head::before {
  content: '🎁 ';
}
.lp-v9-postgw-banner__body {
  font-size: .92em;
  font-weight: 600;
  color: #7c2d12;
}
.lp-v9-postgw-banner__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 16px;
  background: #c2410c;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: .94em;
  font-weight: 800;
}
.lp-v9-postgw-banner__cta:hover,
.lp-v9-postgw-banner__cta:focus-visible {
  background: #9a3412;
  color: #fff;
}
.lp-v9-postgw-banner__small {
  font-size: .78em;
  font-weight: 500;
  color: #9a3412;
  display: block;
  margin-top: 6px;
  opacity: .85;
}

/* ---------- 5. trial 復帰時 "お帰りなさい" メッセージ ---------- */
.lp-v9-trial-restore {
  display: none;
  margin: 8px 0;
  padding: 8px 14px;
  background: #ecfdf5;
  border-left: 4px solid #16a34a;
  color: #14532d;
  font-size: .92em;
  font-weight: 600;
  border-radius: 6px;
  animation: lp-v9-trial-restore-in .35s ease-out;
}
.lp-v9-trial-restore.is-visible { display: block; }
.lp-v9-trial-restore__icon { margin-right: 4px; }
@keyframes lp-v9-trial-restore-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 6. Purchase ページ離脱救出 トライアル誘導 ---------- */
/* purchase ページ用。LP からは見えない。但し v9 ロジックで誘導用バナーを
 * 表示する場合を想定して LP CSS に同梱（将来的な再利用容易化）。 */
.lp-v9-purchase-trial-rescue {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f0f9ff;
  border: 1px solid #38bdf8;
  color: #0c4a6e;
  font-size: .92em;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.lp-v9-purchase-trial-rescue__msg { font-weight: 700; flex: 1 1 200px; }
.lp-v9-purchase-trial-rescue__cta {
  display: inline-block;
  padding: 8px 14px;
  background: #0284c7;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}
.lp-v9-purchase-trial-rescue__cta:hover { background: #0369a1; color: #fff; }

/* ---------- 7. micro-CTA toast 軽量版 (v8 → v9 で UI 干渉を低減) ---------- */
.lp-v9-microcta-slim {
  position: fixed;
  left: 50%;
  bottom: 92px; /* fixed-cta の上に重ねる */
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 83, 45, .95);
  color: #ecfdf5;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  z-index: 990; /* fixed-cta(1000)より低くして競合避ける */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: 90vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-v9-microcta-slim.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.lp-v9-microcta-slim a {
  color: #fde68a;
  text-decoration: underline;
  margin-left: 6px;
}
.lp-v9-microcta-slim__close {
  background: none;
  border: 0;
  color: #d1fae5;
  margin-left: 6px;
  cursor: pointer;
  font-size: 12px;
}

/* スクロール深度 25/50/75% でそれぞれ違うコピーを表示するためのバリアント */
.lp-v9-microcta-slim[data-variant="25"] { background: rgba(22, 78, 99, .95); }
.lp-v9-microcta-slim[data-variant="50"] { background: rgba(20, 83, 45, .95); }
.lp-v9-microcta-slim[data-variant="75"] { background: rgba(120, 53, 15, .95); }

/* ---------- 8. ノートン比較 数値強調 ---------- */
.lp-v9-norton-saving {
  display: inline-block;
  background: #fef2f2;
  border: 1px dashed #ef4444;
  color: #b91c1c;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 800;
  font-size: .9em;
  letter-spacing: .02em;
  white-space: nowrap;
}
.lp-v9-norton-saving::before {
  content: '−';
  margin-right: 1px;
}

/* ---------- 9. モバイル微調整 ---------- */
@media (max-width: 640px) {
  .gw-countdown-bar.lp-v9-final12 {
    font-size: 13px;
    padding: 8px 10px;
  }
  .gw-countdown-bar.lp-v9-final12 .gw-countdown-bar__cta {
    padding: 3px 8px;
    font-size: 12px;
  }
  .lp-v9-microcta-slim {
    bottom: 76px;
    font-size: 11px;
    padding: 6px 12px;
    max-width: 92vw;
  }
  .lp-v9-postgw-banner {
    padding: 12px 14px;
    font-size: .92em;
  }
}

/* ---------- 10. アクセシビリティ ---------- */
@media (prefers-reduced-motion: reduce) {
  .gw-countdown-bar.lp-v9-final12,
  .lp-v9-microcta-slim,
  .lp-v9-trial-restore {
    animation: none !important;
    transition: none !important;
  }
}