/*
 * 広告LP v8 — v3 との差分だけ。lp3.css の**あとに**読む。
 * ---------------------------------------------------------------------------
 * 2026-09-22 定例で決定: v3 に **v5 のCVR周りの要素だけ**を足した版（v3 と半々でA/B）。
 * v5 のキャンペーン訴求（FV・逓減表・注記）は**足さない**。v8 で変わるのは次の2つだけ。
 *   ① 申し込み数の追従トースト（左下）
 *   ② CTAの小さな跳ね
 * 正本は lp5.css の同名ブロック。**片方を直したらもう片方も見ること。**
 */

/* ── ① 申し込み数のトースト（lp5.css と同じ）。左下: 右下はページトップへ戻るボタンと重なる ── */
#proofToast{
  position:fixed;left:12px;right:auto;bottom:16px;z-index:55;
  max-width:min(270px,calc(100vw - 88px));background:var(--c-white);
  border:2px solid var(--c-accent2);border-radius:14px;
  box-shadow:0 4px 0 rgba(0,74,173,.18),0 10px 24px rgba(43,39,37,.16);
  padding:12px 34px 13px 14px;text-align:left;
  font-family:var(--font-body);font-size:13.5px;line-height:1.55;color:var(--c-ink);
  opacity:0;transform:translateX(-24px);pointer-events:none;transition:opacity .4s,transform .4s,bottom .3s;
}
#proofToast.show{opacity:1;transform:none;pointer-events:auto}
/* ⚠ 追従CTAの高さは文言で変わるので決め打ちにしない（128pxになって重なった・2026-09-05）。
   実寸を JS で --sticky-h に入れ、そこに 14px 足す */
body.sticky-on #proofToast{bottom:calc(var(--sticky-h, 118px) + 14px)}
#proofToast .cap{display:block;font-size:12px;color:var(--c-muted);line-height:1.45;margin-bottom:2px}
#proofToast .main{display:block;font-weight:700}
#proofToast .main b{font-family:var(--font-disp);font-weight:900;font-size:22px;color:var(--c-accent-text);letter-spacing:-.02em;margin:0 1px;font-variant-numeric:tabular-nums;vertical-align:-1px}
#proofToast .x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--c-line);background:#fff;color:var(--c-muted);font-size:15px;line-height:20px;text-align:center;cursor:pointer;padding:0}
#proofToast .x:focus-visible{outline:2px solid var(--c-accent2);outline-offset:2px}
@media (prefers-reduced-motion:reduce){#proofToast{transition:none}}

/* ── ② CTAの跳ね ── */
/* 2.8秒に1回だけ小さく跳ねる。動きを減らす設定の人には出さない */
@media (prefers-reduced-motion: no-preference){
  .cta-btn{animation:ctaNudge 2.8s ease-in-out infinite}
  @keyframes ctaNudge{0%,84%,100%{transform:translateY(0)}90%{transform:translateY(-4px)}95%{transform:translateY(0)}}
  .cta-btn:active{animation:none}
}

/* ── ③ 10秒後のポップアップ（E案）。中央カード・背景を暗くする ──
   ⚠ z-index は追従CTA(50)・トースト(55)より上。開いている間はこれが最前面。 */
#lp8Popup{position:fixed;inset:0;z-index:80;background:rgba(20,15,12,.55);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .3s}
#lp8Popup[hidden]{display:none}
#lp8Popup.show{opacity:1}
#lp8Popup .lp8-card{position:relative;width:100%;max-width:340px;background:#fff;border-radius:8px;padding:26px 18px 16px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#lp8Popup .lp8-x{position:absolute;top:-14px;right:-10px;width:34px;height:34px;border-radius:50%;border:2px solid var(--c-accent2);background:#fff;color:var(--c-accent2);font-size:19px;font-weight:900;line-height:30px;text-align:center;cursor:pointer;padding:0}
#lp8Popup .lp8-x:focus-visible{outline:3px solid var(--c-accent2);outline-offset:2px}
#lp8Popup .lp8-t{font-family:var(--font-disp);font-weight:900;font-size:17px;line-height:1.6;margin-bottom:14px}
#lp8Popup .lp8-t em{font-style:normal;color:var(--c-accent-text);font-size:24px}
/* ボタンは2段組み。⚠ .k/.m は block（inline だと1行に流れて「かんたん30秒無料体験を…」と読める） */
#lp8Popup .cta-btn{padding:12px 16px}
#lp8Popup .cta-btn .k{display:block;font-size:13px;line-height:1.1;letter-spacing:.04em;opacity:.85}
#lp8Popup .cta-btn .m{display:block;font-size:19px;line-height:1.2;white-space:nowrap}
#lp8Popup .lp8-s{font-size:12.5px;color:var(--c-muted);line-height:1.5;margin-top:10px}
@media (prefers-reduced-motion:reduce){#lp8Popup{transition:none}}
/* 見出しの出し分け: 通常は「限定」、残り3日以内（.near）は「期日」 */
#lp8Popup .t-near{display:none}
#lp8Popup.near .t-normal{display:none}
#lp8Popup.near .t-near{display:inline}
/* ポップアップが開いている間は、左下のトーストを隠す（暗い背景に浮かないように） */
body.lp8-pop-open #proofToast{opacity:0;pointer-events:none}