/* ========================================================= LP A/B テスト用スタイル で切り替える。 バリアント専用要素には .lp-only-a / .lp-only-b を付ける。 ========================================================= */ /* 割り当て前（JS 無効など）は A 扱い */ .lp-only-b { display: none !important; } html[data-lp-variant="B"] .lp-only-b { display: block !important; } html[data-lp-variant="B"] .lp-only-a { display: none !important; } /* ---------- B: ファーストビュー直下の無料相談 CTA ---------- */ .hero-cta { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: 0 16px; font-family: "Noto Sans JP", sans-serif; } .hero-cta__points { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; padding: 0; } .hero-cta__points li { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #0f3f8a; font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; } .hero-cta__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; padding: 10px 20px; border-radius: 60px; border: 5px solid #ffd84d; background: linear-gradient(180deg, #ff9a4a 0%, #ff6a1f 55%, #f2500e 100%); color: #fff; text-decoration: none; box-shadow: 0 10px 22px rgba(255, 106, 31, 0.35), inset 0 -6px 0 rgba(0, 0, 0, 0.14); } .hero-cta__kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; } .hero-cta__label { font-size: 26px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.2; } .hero-cta__note { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: #fff; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } @media screen and (max-width: 767px) { /* B は CTA ぶん（約 25rem）ヒーローの固定高さを広げる（sp.css: #top 173rem / .top-cntent 140rem） */ html[data-lp-variant="B"] #top { height: 198rem; } html[data-lp-variant="B"] #top .top-cntent { height: 165rem; } .hero-cta { margin: 0 auto 1.5rem; } .hero-cta__points li { font-size: 3.1vw; padding: 0.4em 1em; } .hero-cta__main { min-height: 18vw; border-radius: 12vw; padding: 2vw 5vw; } .hero-cta__kicker { font-size: 3.3vw; white-space: nowrap; } .hero-cta__label { font-size: 6.4vw; white-space: nowrap; } .hero-cta__note { font-size: 3vw; } } @media screen and (min-width: 768px) { /* PC は右側の固定バナー（#banner）に CTA があるため、B でもヒーロー CTA は出さない（文言差のみ） */ html[data-lp-variant="B"] .hero-cta.lp-only-b { display: none !important; } }