/* ============================================================ ab-fv-b.css — A/Bテスト B案(FV)の表示CSS【TOP・全店舗の共有ソース】 発動条件 = 。 ab-bready と背景画像URL(--fv-b-pc/--fv-b-sp)は /ab-active.php が描画前に 同期セット(CMSの data/ab-tests.json 由来)。未発動時はB非表示=A案表示。 ▼方式(2026-07-23 r5): FVは3枚ローテーション。 ・スライド1 = 指定画像(採用FV)を背景に敷き、元々のテキスト+CTAオーバーレイを表示。 ・スライド2,3 = 原状(元のfv-hero写真・元タイトル・元位置・グラデ有りで回転)。 ・回転を有効化するため index.html の回転ガード(data-ab=B時 return)は撤去済み。 ▼r5(2026-07-23): SPのスライド1を background-size:contain に(集合写真の両端の人が coverで切れる問題+iOSアドレスバー伸縮の拡大対策)。PCは従来どおり cover。 ※このCSSは Cache-Control 7日。更新時はファイル名を r6… に上げ、全HTMLの を差し替えること(でないと旧CSSが残る)。 ============================================================ */ /* 画像1枚リンク方式(.lp2026-fv__b)は不使用 */ .lp2026-fv__b { display: none; } /* スライド1: 背景を指定画像(採用FV)に。元のimg写真は隠す。スライド2,3は原状。 */ html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__slide[data-slide="1"] { background-image: var(--fv-b-pc); background-size: cover; background-position: center; background-repeat: no-repeat; } html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__slide[data-slide="1"] > picture { display: none; } @media (max-width: 900px) { html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__slide[data-slide="1"] { background-image: var(--fv-b-sp); /* SP: 縦構図の集合写真を全幅表示=両端の人の顔が切れない。cover だと縦長枠に対し左右が 切れる＋iOSのアドレスバー伸縮で拡大され更に切れるため contain に。 */ background-size: contain; background-color: #ececec; /* contain の上下余白をスタジオ背景(≒#f1f1f1/#e1e0e3)に馴染ませる */ } } /* SP: スライド1のグラデーションマスクを無くす(1枚目だけ)。スライド2,3は原状=グラデ有り。 (gradient は slide 群の後ろにある兄弟要素なので、slide1がactiveの時だけ ~ で選択) */ @media (max-width: 900px) { html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__slide[data-slide="1"].is-active ~ .lp2026-fv__gradient { opacity: 0; } } /* 見出し行の登場アニメ(GSAP:lp2026-motion.js)はB時に確定しない場合があるため、B時は 全スライドの見出しを確定表示。クロスフェードは title-slide の opacity で行うため両立。 */ html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__headline-line { opacity: 1 !important; transform: none !important; } /* SP: スライド1のタイトル文(勘や経験〜本気で変える。)を上部の白余白へ移動し、FV人物に 被らないように(縦構図の採用FV画像に合わせる)。スライド2,3の位置は原状のまま。 */ @media (max-width: 900px) { html[data-ab="B"].ab-bready #lp-fv .lp2026-fv__title-slide[data-slide="1"] { transform: translateY(-90px); } }