/* =============================================================
 * cv_improvements_v10.css (2026-05-11)
 * KPI ギャップ解消 第10弾。
 *
 * 背景 (tasks/daily_report_2026-05-11_opcon_lp.md):
 *   - 5/11 は GW明け1日目。GW特価終了に伴い 1年 1,980円→2,500円、
 *     2年 3,760円→5,000円 に値上げ。今日のPVは速報で **2** (壊滅的)。
 *   - 直近30日 LP PV 1,614 / Purchase 37 / cta_click 263 / purchase=1。
 *     LP→Purchase 遷移率 2.3% (KPI 40% 比 -37.7pt)。CVR 0.06%。
 *   - 直近7日 平均スクロール深度 **13.26%** (5/10時点 15.61% から -2.35pt と
 *     悪化が止まらない)。底面到達率 **5.35%**。
 *   - 直近7日 m.facebook.com 流入は 1セッション / アクティブ2.95秒 /
 *     bounce 100% — モバイルFB流入の救出は v8/v9 を経ても改善せず、
 *     ヒーロー上段で 3秒以内に価値訴求を完結させる必要がある。
 *   - Clarity ClickedText 上位に「他のセキュリティソフトとの違いは何ですか？」
 *     が 13クリック。差別化情報をユーザーは強く求めており、FAQ より上で
 *     1行で答える設計にした方が CV 効率が高い。
 *
 * 設計原則:
 *   - v9 までのスタイルは尊重。新規クラスは `lp-v10-*` プレフィックス。
 *   - スクロール深度悪化の主因は v8/v9 の追加要素による垂直長の増加と
 *     仮定し、v10 は基本「足し算ではなく差し替え」で軽量化する。
 *   - mobile-first。`@media (min-width: 768px)` で desktop だけ別スタイル。
 *
 * 主な追加:
 *   1. .lp-v10-postgw-hero      : 5/11以降 ヒーロー直下「ずっとお得」訴求
 *   2. .lp-v10-diff-strip       : 「他社との違い」を1行で答える ヒーロー直下バー
 *   3. .lp-v10-mfb-3sec-pitch   : モバイルFB流入向け 3秒で読める pitch
 *   4. .lp-v10-sticky-trial     : モバイル sticky 「14日無料」CTA (固定下部)
 *   5. .lp-v10-hero-compact     : モバイル ヒーロー高密度化 (画面占有率↓)
 *   6. .lp-v10-microcta-disable : v8 micro-CTA toast を mobile では無効化
 *                                 (スクロール深度悪化への直接対応)
 * ============================================================= */

/* ---------- 1. 5/11以降 ヒーロー直下「ずっとお得」訴求 ---------- */
.lp-v10-postgw-hero {
  display: none; /* 既定非表示。JSが body.lp-post-gw 時に表示 */
  margin: 12px auto 8px;
  max-width: 720px;
  padding: 10px 14px;
  background: linear-gradient(95deg, #fff7ed 0%, #fffbeb 100%);
  border: 1px solid #fdba74;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #7c2d12;
  text-align: center;
  box-shadow: 0 2px 6px rgba(251, 146, 60, .12);
}
body.lp-post-gw .lp-v10-postgw-hero { display: block; }
.lp-v10-postgw-hero strong {
  font-weight: 800;
  color: #c2410c;
}
.lp-v10-postgw-hero__price {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #fed7aa;
  font-weight: 800;
  color: #7c2d12;
}
.lp-v10-postgw-hero a {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 16px;
  background: #16a34a;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 13px;
}
.lp-v10-postgw-hero a:hover {
  background: #15803d;
}

/* ---------- 2. 「他社との違い」 1行回答ストリップ ---------- */
/* Clarity 「他のセキュリティソフトとの違いは何ですか？」 13click のFAQを
   ヒーロー直下で先回り回答。スクロール深度 13% でも見える位置に。 */
.lp-v10-diff-strip {
  margin: 8px auto 4px;
  max-width: 720px;
  padding: 8px 12px;
  background: #ecfdf5;
  border-left: 4px solid #16a34a;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #064e3b;
}
.lp-v10-diff-strip__q {
  font-weight: 700;
  color: #065f46;
  display: block;
  margin-bottom: 2px;
}
.lp-v10-diff-strip__a {
  font-size: 12px;
  color: #064e3b;
}
.lp-v10-diff-strip__a strong {
  color: #c2410c;
  font-weight: 800;
}

/* ---------- 3. m.facebook 流入向け 3秒で読める pitch ---------- */
/* JS が referrer に `facebook` を含むと判定したら body に `via-mfb` を付ける。
   v8 では帯バナーで邪魔になっていたため、v10 では trust-strip を上書きする
   形で「ヒーロー上段に直接 3秒で価値訴求」する。 */
body.via-mfb .mv-trust-strip { display: none !important; }
body.via-mfb .lp-v10-mfb-3sec-pitch {
  display: block;
  margin: 6px 0 8px;
  padding: 10px 12px;
  background: #1e293b;
  color: #f1f5f9;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
}
.lp-v10-mfb-3sec-pitch { display: none; }
.lp-v10-mfb-3sec-pitch__head {
  display: block;
  font-size: 11px;
  color: #fbbf24;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: .03em;
}
.lp-v10-mfb-3sec-pitch__main {
  font-weight: 800;
  font-size: 14px;
  color: #fff;
}
.lp-v10-mfb-3sec-pitch__price {
  color: #4ade80;
  font-weight: 800;
}
.lp-v10-mfb-3sec-pitch__sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #cbd5e1;
}
.lp-v10-mfb-3sec-pitch a {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 18px;
  background: #16a34a;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 13px;
}

/* ---------- 4. モバイル Sticky 「14日無料」 CTA ---------- */
/* 下部固定。v8 の micro-CTA toast と異なり常時1ボタンのみで UI 干渉を最小化。 */
.lp-v10-sticky-trial {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 999; /* fixed-cta(1000)より下、toast(990)より上 */
  display: none;
  width: calc(100% - 24px);
  max-width: 360px;
  padding: 12px 16px;
  background: #16a34a;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(22, 163, 74, .35);
  animation: lp-v10-trial-pulse 2.6s ease-in-out infinite;
}
.lp-v10-sticky-trial small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-top: 2px;
  opacity: .9;
}
@keyframes lp-v10-trial-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.025); }
}
@media (max-width: 768px) {
  body.lp-v10-show-sticky .lp-v10-sticky-trial { display: block; }
  /* fixed-cta が下部にあるが v10 sticky は scroll 50% 以降のみ表示するため共存可能 */
  body.lp-v10-show-sticky .fixed-cta { padding-bottom: 78px; }
}

/* ---------- 5. モバイル ヒーロー高密度化 ---------- */
/* スクロール深度 13.26% に対する直接的なテコ入れ:
   モバイル時のみ MV の上下マージンを詰めて 1スクロールで価値訴求が
   全部見えるようにする。 */
@media (max-width: 768px) {
  body.lp-v10-hero-compact .mv-inner { padding-top: 8px; padding-bottom: 12px; }
  body.lp-v10-hero-compact .mv-title { margin-top: 6px; margin-bottom: 6px; font-size: 22px; line-height: 1.35; }
  body.lp-v10-hero-compact .mv-text { margin-top: 4px; margin-bottom: 8px; font-size: 13px; line-height: 1.6; }
  body.lp-v10-hero-compact .mv-trial-reassure { margin: 4px 0; font-size: 11.5px; }
  body.lp-v10-hero-compact .mv-btn__area { margin-top: 8px; gap: 6px; }
  body.lp-v10-hero-compact .mv-gw-banner { padding: 6px 10px; font-size: 11.5px; }
  body.lp-v10-hero-compact .mv-sub { margin: 4px 0; font-size: 11.5px; }
  body.lp-v10-hero-compact .mv-rating { margin-top: 6px; }
  body.lp-v10-hero-compact .mv-mini-compare { margin-top: 8px; padding: 6px 8px; }
}

/* ---------- 6. v8 micro-CTA toast を mobile で無効化 ---------- */
/* v8 デプロイ後にスクロール深度 -0.20pt → さらに -2.35pt と悪化継続。
   モバイル専用に v8 toast を非表示化し、v10 sticky-trial に役割を移譲。 */
@media (max-width: 768px) {
  body.lp-v10-microcta-disable .v8-microcta-toast,
  body.lp-v10-microcta-disable .lp-v8-microcta,
  body.lp-v10-microcta-disable [data-microcta] { display: none !important; }
}

/* ---------- 7. A8 セルフバック流入向け 専用感謝バッジ ---------- */
/* v8 から既出だが v10 で位置を mv-trust-strip 隣接に移動し、誤クリック誘発を回避。 */
body.via-a8 .lp-v10-a8-thanks {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
  padding: 4px 10px;
  background: #fef3c7;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #78350f;
  border: 1px solid #fde68a;
}
.lp-v10-a8-thanks { display: none; }
.lp-v10-a8-thanks::before { content: '🎁'; font-size: 12px; }