/* =============================================================
 * cv_improvements_v8.css (2026-05-09)
 * KPI ギャップ解消 第8弾。
 *
 * 背景 (tasks/daily_report_2026-05-09_opcon_lp.md):
 *   - LP /lp/webroot/ PV=1,491 / 月 (KPI4,000 比 -2,509)
 *   - 平均スクロール深度 15.81% (一般LP 40〜60%)
 *   - LP→決済完了 CVR 0.053% (KPI 10% 比 -9.95pt)
 *   - cta_click/PV ≒ 14% (KPI 40% 比 -26pt)
 *   - モバイル直帰率 78.7% / m.facebook engagement 4.7% (致命的)
 *   - 「WEBROOT アンチウイルス for Gamer」(48クリック) と h1
 *      「SecureAnywhereアンチウイルス for」(15クリック) が
 *      装飾テキストのままクリック空振り中
 *   - GW特価は 2026-05-10 24:00 で終了 → 残り 24〜48時間の駆け込み
 *
 * 主な追加:
 *   1. .lp-v8-deadtext-link  : ヘッダー製品名 / h1 のクリック領域救出
 *   2. .lp-v8-gw-lastday     : GW特価ラストデー強調 (赤系強調 + 残時間)
 *   3. .lp-v8-mfb-banner     : モバイルFB流入専用CTAバナー
 *   4. .fixed-cta (拡張)      : iOS safe-area-inset-bottom 対応
 *   5. .lp-v8-microcta       : スクロール 25/50/75% で出る小CTA toast
 *   6. .lp-v8-a8-thanks      : A8 referrer 用ひっそりした感謝バナー
 *
 * 既存スタイルとの上書きは最小化し、すべて新規クラスで追加。
 * 既存 v7 のスタイルとは独立してロード可能。
 * ============================================================= */

/* ---------- 1. ヘッダー / h1 のクリック空振り救出 ---------- */
/* a タグ自体は webroot_lp.xhtml で増やすため、ここはスタイル微調整のみ */
.lp-v8-deadtext-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.lp-v8-deadtext-link:hover,
.lp-v8-deadtext-link:focus {
  text-decoration: underline;
  text-decoration-color: rgba(22, 163, 74, .35);
  text-underline-offset: 4px;
}

/* ---------- 2. GW特価ラストデー強調 (5/9〜5/10) ---------- */
.lp-v8-gw-lastday {
  display: none; /* JS が GW期間 + 残48時間以内にだけ追加 */
  position: relative;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  z-index: 1090;
  box-shadow: 0 6px 14px rgba(185, 28, 28, .28);
  animation: lp-v8-gw-pulse 2.4s ease-in-out infinite;
}

.lp-v8-gw-lastday.is-active { display: block; }

.lp-v8-gw-lastday strong { color: #fff59d; font-size: 1.05em; }

.lp-v8-gw-lastday a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 6px;
  font-weight: 800;
}

@keyframes lp-v8-gw-pulse {
  0%, 100% { box-shadow: 0 6px 14px rgba(185, 28, 28, .28); }
  50%      { box-shadow: 0 8px 22px rgba(239, 68, 68, .55); }
}

/* ---------- 3. モバイルFB流入専用 CTA バナー ---------- */
.lp-v8-mfb-banner {
  display: none; /* JS が m.facebook referrer のときだけ表示 */
  position: relative;
  margin: 12px 16px 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1d4ed8 0%, #6366f1 100%);
  color: #fff;
  text-align: left;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 8px 24px rgba(29, 78, 216, .3);
}

.lp-v8-mfb-banner.is-visible { display: block; }

.lp-v8-mfb-banner__title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 6px;
}

.lp-v8-mfb-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 18px;
  background: #fff;
  color: #1d4ed8;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.lp-v8-mfb-banner__cta::after {
  content: "›";
  font-size: 1.1em;
  margin-left: 2px;
}

@media (min-width: 769px) {
  .lp-v8-mfb-banner { display: none !important; }
}

/* ---------- 4. fixed-cta の iOS safe-area 対応 ---------- */
/* iPhone X 以降のホームインジケーター被り対策。
   既存 .fixed-cta の bottom と padding を計算で安全領域加算 */
.fixed-cta {
  bottom: max(0px, env(safe-area-inset-bottom, 0px));
}

.fixed-cta .fixed-cta__inner {
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}

/* キーボード表示時の被り防止: visualViewport 連動は JS 側で
   .fixed-cta--keyboard クラスを付与する */
.fixed-cta.fixed-cta--keyboard {
  transform: translateY(120%);
  transition: transform .2s ease;
}

/* ---------- 5. スクロール 25/50/75% micro-CTA toast ---------- */
.lp-v8-microcta {
  position: fixed;
  left: 50%;
  bottom: 96px; /* fixed-cta の上 */
  transform: translateX(-50%) translateY(20px);
  z-index: 1099;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lp-v8-microcta.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.lp-v8-microcta a {
  color: #fde68a;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lp-v8-microcta__close {
  background: transparent;
  border: 0;
  color: #cbd5e1;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
}

@media (min-width: 1280px) {
  .lp-v8-microcta {
    bottom: 24px; /* PC は fixed-cta が無いので画面下に */
  }
}

/* ---------- 6. A8 referrer 専用ひっそり感謝バナー ---------- */
.lp-v8-a8-thanks {
  display: none;
  margin: 8px 16px 0;
  padding: 8px 12px;
  border-left: 3px solid #16a34a;
  background: #f0fdf4;
  color: #14532d;
  font-size: 12px;
  border-radius: 4px;
}

.lp-v8-a8-thanks.is-visible { display: block; }

/* ---------- 7. h1 / ヘッダー製品名のクリック領域強化 ---------- */
/* webroot_lp.xhtml 側で a 要素を増やすため、
   レイアウトに影響しない focus/hover 強化のみここで対応 */
.mv-title.lp-v8-clickable {
  cursor: pointer;
  position: relative;
}

.mv-title.lp-v8-clickable::after {
  content: "▽ 料金プランを見る";
  display: block;
  margin-top: 8px;
  font-size: .42em;
  font-weight: 600;
  letter-spacing: .04em;
  color: #16a34a;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

.mv-title.lp-v8-clickable.is-hint-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.header-logo__text-link.lp-v8-clickable {
  position: relative;
}

.header-logo__text-link.lp-v8-clickable::after {
  content: "›";
  margin-left: 4px;
  color: #16a34a;
  font-weight: 700;
}