/* ============================================================ * cv_improvements_v13_mobile3scroll.css * 2026/05/14 — モバイル「3スクロール以内に主要訴求」最適化 * * 背景: * 5/12 定例で、モバイルが全セッションの 62.6% を占める一方で * 平均滞在 32 秒（PC の半分以下）／スクロール深度 16.83% と * ファーストビュー直後で離脱しているケースが大半であることが判明。 * モーダル開封 99件 → 購入 1件（CVR 約1%）の上流ボトルネック。 * * 方針: * 1. モバイル(<=767px)の Hero を「コピー1行 + 価格 + CTA」だけに圧縮 * 2. Hero と Plans のあいだを詰めて 2 スクロール目に必ず Plans が見える * 3. CTAは指の届く下半分にも追従ボタンを配置（既存 fixed-cta__btn を強化） * 4. フォントは 16px 以上を確保（iOS の自動ズーム回避） * 5. Norton / VB 両レイアウトに同時適用（data-lp-layout 属性で分岐） * * 影響範囲: / * それ以外は何も変えない（control レイアウト互換性） * ============================================================ */ @media (max-width: 767px) { /* --- 共通: スクロール深度を底上げするための余白圧縮 ----------------- */ html[data-lp-layout="norton"] .nt-section, html[data-lp-layout="vb"] .vb-section { padding-top: 28px !important; padding-bottom: 28px !important; } /* --- Hero (Norton) ------------------------------------------------- */ html[data-lp-layout="norton"] .nt-hero { min-height: auto !important; padding-top: 16px !important; padding-bottom: 20px !important; } html[data-lp-layout="norton"] .nt-hero__chips { display: none !important; /* チップは2スクロール目以降に登場 */ } html[data-lp-layout="norton"] .nt-hero__title { font-size: 28px !important; line-height: 1.25 !important; margin: 6px 0 12px !important; } html[data-lp-layout="norton"] .nt-hero__title em { color: #FF3B6B; /* 視線誘導アクセント */ font-style: normal; } html[data-lp-layout="norton"] .nt-hero__sub { font-size: 16px !important; line-height: 1.55 !important; margin-bottom: 14px !important; } html[data-lp-layout="norton"] .nt-hero__cta { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 8px !important; } html[data-lp-layout="norton"] .nt-hero__cta .nt-btn--primary { font-size: 18px !important; padding: 16px 12px !important; min-height: 56px !important; /* 指タップ最低 56px */ } html[data-lp-layout="norton"] .nt-hero__cta .nt-btn--ghost { font-size: 14px !important; padding: 10px 12px !important; } html[data-lp-layout="norton"] .nt-hero__note { font-size: 12px !important; opacity: 0.85 !important; } /* --- Hero (VB) ----------------------------------------------------- */ html[data-lp-layout="vb"] .vb-hero { min-height: auto !important; padding-top: 16px !important; padding-bottom: 20px !important; } html[data-lp-layout="vb"] .vb-hero__title { font-size: 26px !important; line-height: 1.25 !important; } html[data-lp-layout="vb"] .vb-hero__sub { font-size: 16px !important; line-height: 1.55 !important; } html[data-lp-layout="vb"] .vb-hero__cta .vb-btn--primary, html[data-lp-layout="vb"] .vb-btn--primary { font-size: 18px !important; padding: 16px 12px !important; min-height: 56px !important; } /* --- Plans を 2 スクロール目に固定 -------------------------------- */ html[data-lp-layout="norton"] #plans, html[data-lp-layout="vb"] #plans { scroll-margin-top: 64px; } html[data-lp-layout="norton"] .nt-plans, html[data-lp-layout="vb"] .vb-plans { gap: 12px !important; } html[data-lp-layout="norton"] .nt-plan, html[data-lp-layout="vb"] .vb-plan { padding: 16px !important; } html[data-lp-layout="norton"] .nt-plan__price-num, html[data-lp-layout="vb"] .vb-plan__price-num { font-size: 36px !important; } /* --- 入力フィールド: iOS の自動ズームを防ぐため 16px 以上 -------- */ .modal-form-group input, .modal-form-group select { font-size: 16px !important; } /* --- 追従 CTA を一回り大きく ------------------------------------- */ .fixed-cta, .nt-fixed-cta, .vb-fixed-cta { padding: 10px 12px !important; } /* fix 2026-05-29: .fixed-cta は 3 ボタン構成 (trial / price / buy) のため、 17px font + 14px padding だと iPhone 幅 390px で右にはみ出す。 flex:1 で均等割付し、内側 padding/font-size を縮めて 3 ボタンを横並びで 収める。各ボタンの span (テキスト) も折返し許容。 */ .fixed-cta__inner { display: flex !important; gap: 6px !important; width: 100% !important; } .fixed-cta__btn, .nt-fixed-cta__btn, .vb-fixed-cta__btn { flex: 1 1 0 !important; min-width: 0 !important; font-size: 13px !important; padding: 10px 6px !important; min-height: 52px !important; line-height: 1.2 !important; text-align: center !important; } .fixed-cta__btn span, .nt-fixed-cta__btn span, .vb-fixed-cta__btn span { font-size: inherit !important; white-space: normal !important; word-break: keep-all !important; } /* --- ヘッダーのナビをハンバーガーに寄せ、Hero に集中させる -------- */ html[data-lp-layout="norton"] .nt-header__nav, html[data-lp-layout="vb"] .vb-header__nav { display: none !important; } /* --- モーダルの認証セクションの説明文を控えめに ------------------ */ .modal-help-text { font-size: 12px; color: #666; margin-top: 4px; } .modal-required { color: #d12a2a; margin-left: 2px; } .modal-verified { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; border-radius: 6px; padding: 8px 12px; font-weight: 600; text-align: center; } } /* --- 認証セクションの汎用スタイル（PC含む） ------------------------ */ .modal-help-text { font-size: 12px; color: #666; margin-top: 4px; line-height: 1.5; } .modal-required { color: #d12a2a; font-weight: 700; margin-left: 2px; } .modal-verified { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; border-radius: 8px; padding: 10px 14px; font-weight: 600; text-align: center; }