/* ============================================================
 * cv_improvements_v16.css
 * 2026/05/19 — FV安心訴求ストリップ + PCトップバーのパルス
 *
 * 目的:
 *   1. FV直下に挿入する .opcon-v16-assurance を VB/Norton 両対応で見せる
 *   2. PCトップバー(.pc-top-bar) の認知率向上のため初回ロード時に1回パルス
 *   3. Dead Click Rescue v3 で role=button 化した要素に「クリック感」を付与
 *
 * モバイル優先: 360px〜414px で破綻しないよう調整
 * ============================================================ */

/* --- 1. 安心訴求ストリップ ----------------------------------- */
.opcon-v16-assurance {
  list-style: none;
  margin: 12px 0 0;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #1d1d1f;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.opcon-v16-assurance li {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}
.opcon-v16-assurance__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  margin-right: 6px;
}

/* VB レイアウト: 赤系基調なので背景は白寄りにする */
[data-lp-layout="vb"] .opcon-v16-assurance {
  border-left: 4px solid #ED0007;
}

/* Norton レイアウト: 黄色強調 */
[data-lp-layout="norton"] .opcon-v16-assurance {
  border-left: 4px solid #FFE000;
  background: #ffffff;
}

@media (max-width: 480px) {
  .opcon-v16-assurance {
    font-size: 12px;
    gap: 4px 10px;
    padding: 8px 10px;
  }
  .opcon-v16-assurance__check {
    width: 16px;
    height: 16px;
    font-size: 11px;
  }
}

/* --- 2. PCトップバー pulse ---------------------------------- */
@keyframes opcon-v16-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0.65); }
  50%  { box-shadow: 0 0 0 8px rgba(255, 196, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 196, 0, 0); }
}
.opcon-v16-pulse {
  animation: opcon-v16-pulse 1.4s ease-out 0s 2;
}

/* --- 3. Dead Click Rescue v3 — クリック感 ------------------ */
[data-cta-id="dead-click-rescue-v16"] {
  transition: transform 0.12s ease-out, filter 0.12s ease-out;
}
[data-cta-id="dead-click-rescue-v16"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
[data-cta-id="dead-click-rescue-v16"]:active {
  transform: translateY(0);
  filter: brightness(0.96);
}
[data-cta-id="dead-click-rescue-v16"]:focus-visible {
  outline: 2px solid #1366ff;
  outline-offset: 2px;
}

/* --- 4. Mobile FV 補強 — 3スクロール内のCTR向上策 --------- */
@media (max-width: 480px) {
  /* VB レイアウトのヒーローボタンを画面幅の95%にしてタップ精度を上げる */
  [data-lp-layout="vb"] .vb-hero__cta .vb-btn--primary,
  [data-lp-layout="norton"] .norton-hero__cta .norton-btn--primary {
    width: 95%;
    max-width: 360px;
    min-height: 56px;
    font-size: 17px;
    line-height: 1.2;
  }
  /* sticky CTA を強化 (タップ範囲拡大) */
  .vb-sticky-cta .vb-btn,
  .norton-sticky-cta .norton-btn,
  .fixed-cta .fixed-cta__btn {
    min-height: 56px;
    font-size: 16px;
  }
}