/* =============================================================
 * cv_improvements_v11.css (2026-05-12)
 * KPI ギャップ解消 第11弾。
 *
 * 背景 (tasks/daily_report_2026-05-12_opcon_lp.md):
 *   - 5/12 は GW明け2日目。当日午後速報で page_view=248 / session=230 と
 *     5/11 (PV=2) からは大幅回復。広告予算が戻った可能性。
 *   - 直近3日 平均スクロール深度は 12.02% → 14.61% に改善 (+2.59pt)。
 *     v10 の hero compact / sticky-trial が効きはじめている。
 *   - だが Bounce Rate 100% / cta_click=14 (CTR=5.6%) は据え置きで、
 *     CV を伸ばすには「ファーストビューでのアクション誘発」+
 *     「モーダル → form_start 4% リーク」の2点が引き続き最大ボトルネック。
 *   - Clarity ClickedText の上位は依然として装飾h2/decorative テキスト:
 *       * 「セキュリティ本場アメリカ発…」 105 dead clicks/30日
 *       * 「他のセキュリティソフトに奪われていたパフォーマンス」 84
 *       * 「ゲーマーのあるある VALORANTのピーク中にラ」 63
 *       * 「SecureAnywhereアンチウイルス for」 87
 *       * 「今この瞬間も狙われている。」 36
 *   - GA4 で gw_countdown_view が 5/12 当日に 138件発火。
 *     `is_gw_period=false` なので bar は描画されないはずだが、JSロジックの
 *     どこかで誤発火している可能性 → v11 で計測停止。
 *
 * 設計原則 (lessons.md 2026-05-11):
 *   - 「足し算ではなく差し替え/軽量化」を継続。
 *   - 高デッドクリック装飾要素は **新規DOMを追加せず** JS で `<a>` 化 or
 *     クリックハンドラ追加で救出 (lessons.md 2026-05-09)。
 *   - 投入後 24h で Clarity scroll depth を必ず前日比チェックする。
 *
 * 主な追加:
 *   1. .lp-v11-deadclick-rescue : 装飾h2/カード見出しのリンク化スタイル
 *      (現状ノースタイルでテキスト自体のクリック領域を拡大、focus-ring 追加)
 *   2. .lp-v11-may-campaign     : 5月後半「Norton比 3,980円OFF」訴求バー
 *      (GW countdown bar の置き換え)
 *   3. .lp-v11-modal-quickstart : モーダル冒頭の "クイック申し込み" 案内
 *      (まずモーダル→form_start 4% リーク対策の視覚誘導)
 *   4. .lp-v11-hero-cta-pulse   : ヒーロー主CTAボタンに微パルス。
 *      mobile bounce 92% を踏まえ「視線誘導」のための最小限の動き。
 *   5. body.lp-v11-postgw       : GW countdown bar が誤発火しないための
 *      最終フェイルセーフ (display:none)
 * ============================================================= */

/* ---------- 1. 装飾h2 リンク化救出 ---------- */
/* JS で `<h2>` 内テキストを `<a>` でラップする際の見た目調整。
   既存スタイルを壊さないよう、a の display:contents を基本にする。 */
.lp-v11-deadclick-rescue {
  display: contents;
  cursor: pointer;
  color: inherit !important;
  text-decoration: none !important;
}
/* キーボードフォーカス時にだけ視覚的リング (a11y) */
.lp-v11-deadclick-rescue:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 2px;
  border-radius: 4px;
}
/* タップフィードバック (mobile) */
.lp-v11-deadclick-rescue:active {
  opacity: .82;
}

/* ---------- 2. 5月後半キャンペーンバー ---------- */
/* GW countdown bar (post-GWでは描画されない) の代替として、上部に
   小さくスナップする「5月限定 値引き継続」訴求。スクロールしない
   ユーザーにも価格優位を3秒で伝える狙い。 */
.lp-v11-may-campaign {
  display: none;
  position: relative;
  margin: 0;
  padding: 8px 14px;
  background: linear-gradient(95deg, #fb923c 0%, #f97316 100%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(249, 115, 22, .22);
}
body.lp-post-gw .lp-v11-may-campaign { display: block; }
/* via-mfb 流入時は 3秒pitch (v10) の邪魔をしないため非表示 */
body.via-mfb .lp-v11-may-campaign { display: none !important; }

.lp-v11-may-campaign:hover {
  background: linear-gradient(95deg, #f97316 0%, #ea580c 100%);
}
.lp-v11-may-campaign:active { opacity: .92; }
.lp-v11-may-campaign__tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  vertical-align: 1px;
}
.lp-v11-may-campaign__main strong {
  font-weight: 800;
  font-size: 1.05em;
}
.lp-v11-may-campaign__cta {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #fff;
  color: #c2410c !important;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
}
@media (min-width: 768px) {
  .lp-v11-may-campaign { font-size: 13.5px; padding: 10px 18px; }
}

/* ---------- 3. ヒーローCTA微パルス (mobile) ---------- */
/* タップ可能性を視覚的に強調するための最小アニメ。
   既存 .btn-trial--lg を壊さないよう :not(:hover):not(:focus) で限定。 */
@keyframes lp-v11-hero-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(22,163,74,.32); }
  50%      { box-shadow: 0 6px 18px rgba(22,163,74,.55); }
}
@media (max-width: 768px) {
  body.lp-v11-on .mv-btn__area--three .btn-trial--lg a:not(:hover):not(:focus) {
    animation: lp-v11-hero-pulse 2.8s ease-in-out infinite;
  }
}

/* ---------- 4. モーダル冒頭「クイック申し込み案内」 ---------- */
/* 別ファイル lp_purchase.xhtml 側で .lp-v11-modal-quickstart 要素を
   表示する。モーダル/購入ページ冒頭で「1年プラン推奨/30秒で完了」を
   提示し、modal_open→form_start 4%リーク対策の入口にする。 */
.lp-v11-modal-quickstart {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%);
  border: 1px solid #6ee7b7;
  border-left: 4px solid #16a34a;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #064e3b;
}
.lp-v11-modal-quickstart__title {
  display: block;
  font-weight: 800;
  font-size: 14px;
  color: #065f46;
  margin-bottom: 4px;
}
.lp-v11-modal-quickstart__steps {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.lp-v11-modal-quickstart__steps li {
  flex: 1 1 0;
  min-width: 90px;
  padding: 6px 8px;
  background: #fff;
  border-radius: 6px;
  font-size: 11.5px;
  text-align: center;
  font-weight: 600;
  color: #064e3b;
  border: 1px solid #d1fae5;
}
.lp-v11-modal-quickstart__steps li strong {
  display: block;
  font-size: 14px;
  color: #16a34a;
  margin-bottom: 2px;
}

/* ---------- 5. GW countdown 誤発火フェイルセーフ ---------- */
/* GW期間外で何らかの理由で .gw-countdown-bar が描画されてもユーザー視野から隠す。
   GA4 イベント `gw_countdown_view` は JS 側で発火条件を絞り直す (cv_improvements_v11.js)。 */
body.lp-post-gw .gw-countdown-bar { display: none !important; }

/* ---------- 6. 高デッドクリック h2 の「これ押せます」ヒント ---------- */
/* ホバー/フォーカス時に小さくアイコンを出す。スクロールユーザーに
   「クリック可能なんだ」と気づかせるだけが目的、視覚ノイズを増やさない。 */
.lp-v11-deadclick-rescue::after {
  content: ' ›';
  display: none;
  margin-left: 6px;
  color: #16a34a;
  font-weight: 700;
}
.lp-v11-deadclick-rescue:hover::after,
.lp-v11-deadclick-rescue:focus-visible::after {
  display: inline;
}

/* ---------- 7. 既存 cta-pre-price セクション最適化 (mobile compact) ---------- */
/* スクロール深度 14.61% という現状を踏まえ、cta--pre-price の縦長を圧縮。 */
@media (max-width: 768px) {
  body.lp-v11-on .cta--pre-price .inner {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  body.lp-v11-on .cta--pre-price .cta-title {
    font-size: 18px;
    line-height: 1.45;
  }
  body.lp-v11-on .cta--pre-price .cta-sub {
    font-size: 12.5px;
  }
}

/* ---------- 8. KPI トースト (mobile) — 視認時の小通知 ---------- */
/* 既存 v8 micro-CTA は mobile で無効化済 (v10)。代わりに v11 では
   ヒーロー直下に「Norton比 3,980円OFF」だけを一行で。 */
.lp-v11-saving-banner {
  display: none;
  margin: 6px auto 4px;
  max-width: 720px;
  padding: 6px 12px;
  background: #fef2f2;
  border-left: 4px solid #dc2626;
  border-radius: 4px;
  font-size: 12px;
  color: #7f1d1d;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
body.lp-post-gw .lp-v11-saving-banner { display: block; }
body.via-mfb .lp-v11-saving-banner { display: none !important; }
.lp-v11-saving-banner strong { color: #b91c1c; font-weight: 800; }