/* ============================================================ ab-fv-b.css — A/Bテスト B案(FV画像1枚)の表示CSS【TOP・全店舗の共有ソース】 発動条件 = 。 ab-bready と背景画像URL(--fv-b-pc/--fv-b-sp)は /ab-active.php が描画前に 同期セット(CMSの data/ab-tests.json 由来)。未発動時はB非表示=A案表示。 ※このファイルを更新すると TOP と全店舗のFV-B表示に反映されます。 ============================================================ */ .lp2026-fv__b { display: none; } /* B発動時: 画像全体をピッタリ表示(見切れ防止)。要素を画像と同じ縦横比に固定し、 A案用のヘッダー下余白(cinematicの padding-top=header-h+8vh)と 100vh最低高さを解除。 */ html[data-ab="B"].ab-bready #lp-fv { padding-top: var(--header-h, 72px); padding-bottom: 0; min-height: 0; } html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__b { display: block; position: relative; z-index: 5; width: 100%; aspect-ratio: 3840 / 2160; /* PC creative=16:9。要素比=画像比に固定するので見切れ0 */ min-height: 0; background-image: var(--fv-b-pc); background-size: cover; /* 要素比=画像比のため cover でも切れずに全面表示 */ background-position: center; background-repeat: no-repeat; } @media (max-width: 900px) { html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__b { aspect-ratio: 1080 / 1920; /* SP creative=9:16(縦) */ background-image: var(--fv-b-sp); } } /* B発動時: A案オーバーレイ(見出しH1×3/Trust/CTA)・回転背景・インジケータ・スクロール誘導を非表示。 ※見出し等はDOMに残置=SEO保持。クローラは常にA案(data-ab=A)を見る。 */ html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__overlay, html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__bg, html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__indicator, html[data-ab="B"].ab-bready #lp-fv .lp2026-scroll-hint { display: none; }