/* ===================================================================== * cv_improvements_v37.css (2026/09/16) * ヒーロー内 月額/1年/2年 ミニ価格ストリップ（東京ゲームショー/シルバーウィーク * 期間限定価格キャンペーンの訴求）。追加のみ・既存クラスへ非干渉。 * .lp-hero-plans コンテナ * .lp-hero-plans__label キャンペーン名/見出し * .lp-hero-plans__row 3プランのグリッド行 * .lp-hero-plan 各プランカード * .lp-hero-plan--featured 主推奨プラン（1年）の強調 * .lp-hero-plan__was 値引き前価格（取り消し線） * .lp-hero-plan__price 現在価格（税込・主表示） * モバイルファースト: デフォルトをスマホ3カラム(コンパクト)、 * min-width:560px でPC向けに余白・フォントサイズを拡大。 * ===================================================================== */ .lp-hero-plans { max-width: 640px; margin: 14px auto 0; padding: 0 8px; box-sizing: border-box; } .lp-hero-plans__label { text-align: center; font-size: 12px; font-weight: 700; color: #ffe08a; margin: 0 0 6px; letter-spacing: .01em; } .lp-hero-plans__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .lp-hero-plan { background: rgba(15, 23, 42, .72); border-radius: 12px; padding: 8px 4px; text-align: center; color: #fff; box-sizing: border-box; } .lp-hero-plan--featured { background: rgba(15, 23, 42, .9); outline: 2px solid #ffd54a; } .lp-hero-plan__name { margin: 0; font-size: 11px; font-weight: 700; opacity: .85; } .lp-hero-plan__was { margin: 2px 0 0; font-size: 11px; text-decoration: line-through; opacity: .6; } .lp-hero-plan__price { margin: 2px 0 0; font-size: 15px; font-weight: 800; color: #ffd54a; line-height: 1.2; } .lp-hero-plan__price small { display: block; font-size: 10px; font-weight: 600; color: #fff; opacity: .85; } @media (min-width: 560px) { .lp-hero-plans { max-width: 720px; padding: 0 12px; } .lp-hero-plans__label { font-size: 13px; } .lp-hero-plans__row { gap: 10px; } .lp-hero-plan { padding: 12px 8px; border-radius: 14px; } .lp-hero-plan__name { font-size: 12px; } .lp-hero-plan__was { font-size: 12px; } .lp-hero-plan__price { font-size: 19px; } .lp-hero-plan__price small { font-size: 11px; } } /* ===================================================================== * 2026/09/16 追加: 「詐欺っぽい／チープ」訴求の抑制。 * ユーザーフィードバック「離脱防止モーダルやチープなセクションを出さず、 * Norton公式サイトのようなスタイリッシュな落ち着いたトーンにしたい」に対応。 * - cv_improvements_v17.js の離脱防止ボトムシート（.opcon-exit-rescue）を非表示化。 * v17にはURLクエリ式のkill-switchが無いため、CSSで直接抑止する。 * - sticky CTAの「点滅（pulse）」演出のみ無効化。CTAバー自体（.nt-sticky-cta等）は * Norton公式サイトにもある一般的な追従ナビとして残し、演出だけ落ち着かせる。 * aggressive版の「買う前に、まず90日無料〜」ボックス／期限切れの春キャンペーン * カウントダウン／中央離脱モーダルは、cv_improvements_v30.js 由来のため * webroot_lp_aggressive.xhtml の （既存kill-switch）で対応済み。 * ===================================================================== */ .opcon-exit-rescue { display: none !important; } .vb-sticky-cta.is-pulsing .vb-btn, .nt-sticky-cta.is-pulsing .nt-btn, [data-sticky-cta].is-pulsing > a { animation: none !important; } /* ===================================================================== * 2026/09/16 追加: control版（webroot_lp.xhtml、data-lp-layout属性を持たない * 唯一のレイアウト）専用の修正。
が半透明のposition:fixedのままの * ため、スクロール後にヒーロー以降のコンテンツと二重写りして見える。 * norton/vb/aggressiveは data-lp-layout 属性を持つため、このセレクタは * control版にのみ適用される（他レイアウトへの影響なし）。 * ===================================================================== */ html:not([data-lp-layout]) header { background-color: rgba(18, 18, 24, 0.94); } /* ===================================================================== * 2026/09/16 追加: 上部バー(.lp-soft-landing)を
内側に統合したことで * headerの固定ボックス自体の高さが増えたため、.mv の上部余白をその分拡張する * （既存の .mv padding は旧headerの高さのみを想定していたため、そのままでは * バーとヒーロー本文が重なる／モバイルでは逆に開きすぎて見える）。 * ===================================================================== */ html:not([data-lp-layout]) .mv { padding-top: calc(17.375rem + 84px); } @media screen and (min-width: 768px) { html:not([data-lp-layout]) .mv { padding-top: calc(19.0625rem + 44px); } } /* ===================================================================== * 2026/09/17 追加: 東京ゲームショー/シルバーウィーク期間限定価格キャンペーン * バナー。position:fixed/JS依存の要素を一切使わない単純なレスポンシブ画像1枚 * のみとし、既存レイアウトとの重なり・崩れのリスクを避ける。 * ===================================================================== */ .tgs-banner { width: 100%; overflow: hidden; line-height: 0; } .tgs-banner a { display: block; } .tgs-banner img { display: block; width: 100%; height: auto; } /* ===================================================================== * style.css 内の無条件 display:flex ルール（.mv-btn__area .btn, .contact-btn 等、 * テキスト中央配置目的でメディアクエリなしに定義）が、同ファイル内の * モバイル用 .contact-btn{display:none} を後勝ちで上書きしてしまうバグへの対処。 * 本ファイルは読み込み順が最後のため、ここで再度非表示を強制する。 * ===================================================================== */ @media screen and (max-width: 767px) { .contact-btn { display: none !important; } }