/* ============================================================ ABT: A/Bテストのバリアント出し分け バリアントの割当は header-lp.php のインラインJSが行い、 に `abt-<テストID>-<バリアント>` クラスが付く。 ここには対照群（a）からの「差分」だけを書く。 a は既存の見た目そのものなので、a 用のルールは書かない。 このファイルを lp.css と分けているのは、更新のたびに確実に ブラウザへ届ける必要があるため。lp.css は style.css の Version（固定値）でバージョンが振られており、内容を変えても ブラウザキャッシュが最大30日効いてしまう。それだと 「割当はbなのに見た目はa」という無音のデータ汚染が起きる。 このファイルは functions.php でファイルの更新時刻を バージョンに使っているため、更新すれば必ず再取得される。 画像を差し替えるときの鉄則: url() は必ず html.abt--b スコープの中に書く。 そうすればクラスが付かない対照群ではルール自体がマッチせず、 バリアント用の画像は一切ダウンロードされない。 を両案ぶん並べて display で切り替える方式は、 非表示でもブラウザが画像を取得するため対照群まで重くなり、 速度差がそのまま変換率の差として観測されてしまう。 バリアント用画像の重さを対照群と揃えること: ファーストビューの背景画像は現行 fv_back-pc.jpg が約2MB、fv_back.png が約286KB。 PC ではこれが LCP 要素になる。バリアント用の画像がこれと大きく違う重さだと、 表示速度の差がそのまま変換率の差として観測され、何を測ったのか分からなくなる。 素材を受け取ったらファイルサイズを確認し、圧縮率を揃えてから開始すること。 （現行画像そのものの最適化は、baseline が動いてしまうのでテスト終了後に行う） セレクタの詳細度に注意: html.abt--b .section-fv は詳細度 (0,2,1) で、 lp.css の PC 用 @media 内 .section-fv (0,1,0) より強い。 SP 用ルールを書いたら、必ずその後に min-width:768px の ブロックで PC 用を書いて後勝ちさせること。 ============================================================ */ /* ============================================================ fv-catch-0810 — ファーストビューの刷新案 変更点（発注元確定・2026-08-10） 1. メイン画像（.section-fv の背景。PC/SPで別画像） … 素材待ち 2. .fv_circle の背景色 … 色指定待ち 3. キャッチコピーの文言と色（+ サブコピー追加） … 実装済み 4. .appeal_list のバッジ3点 … 素材待ち ============================================================ */ /* --- 表示の切り替え ---------------------------------------- */ html.abt-fv-catch-0810-b .abt-fv-catch-0810-a { display: none; } html.abt-fv-catch-0810-b .abt-fv-catch-0810-b { display: block; } /* --- 3. キャッチコピー -------------------------------------- */ /* .fv_catch の基本スタイル（margin / font-size / font-weight）は lp.css から継承し、ここには差分だけを書く。 色は発注元指定（Slack #pj-associa 2026-08-10） */ html.abt-fv-catch-0810-b .fv_catch--b { color: #000000; text-shadow: none; /* メイン画像が差し替わると、lp.css の margin-top:153.4px（現行写真の 構図に合わせた値）が合わなくなる可能性がある。素材到着後に要確認 */ } /* バリアントのキャッチは対照群より1行が長く（「結婚式をまさかで」＝8文字＋ ハイライトの余白）、320px 幅では lp.css の 35px だと収まらず 「で」だけが3行目に落ちる。狭い端末でだけ少し縮める */ @media screen and (max-width: 359px) { html.abt-fv-catch-0810-b .fv_catch--b { font-size: 30px; } } /* 「まさか」のハイライト */ html.abt-fv-catch-0810-b .fv_catch_em { display: inline-block; margin: 0 0.1em; padding: 0 0.18em; background-color: #E31114; color: #fff; text-shadow: none; } /* サブコピー。現行に無い要素なので、このテーマにはリセットCSSが無いことを 踏まえて margin を明示する（省略するとブラウザ既定の余白が出る） */ html.abt-fv-catch-0810-b .fv_subcatch { margin: 10px 0 0 0; font-size: 14px; font-weight: 600; line-height: 160%; color: #1a1a1a; } /* vw 指定に切り替えるのは 1000px から。768px で 1.4vw を当てると 10.8px まで 縮んでしまい、バリアント側だけタブレット幅で読みにくくなる。 可読性の差がそのまま変換率の差として観測されるため、14px を下回らせない */ @media screen and (min-width: 1000px) { html.abt-fv-catch-0810-b .fv_subcatch { font-size: 1.4vw; } } /* --- 1. メイン画像 ------------------------------------------ */ /* SP が先、PC が後。この順序でないと詳細度の関係でPC幅にSP画像が出る */ html.abt-fv-catch-0810-b .section-fv { background-image: url("../../../assets/imgs/lp/fv_back_2.png"); } /* --- 2. 丸バッジの背景色 ------------------------------------ */ /* 現行は #E95377。バリアントは赤系に統一されているため、 キャッチのハイライトと同じ値を当てている。 TODO: 発注元に確認中。別の指定があれば差し替えること */ html.abt-fv-catch-0810-b .fv_circle { background-color: #E31114; } /* --- 4. バッジ3点 ------------------------------------------- */ /* 対照群は現行の のまま。バリアント側だけ background-image にすることで、 クラスが付かない対照群ではルールがマッチせず、B用画像は一切読み込まれない。 背景画像は高さを自前で確保しないと表示されない（高さ0になる）ため、 padding-top で元画像の縦横比を再現している */ html.abt-fv-catch-0810-b .appeal_list--b .appeal_img--b { width: 100%; height: 0; background-repeat: no-repeat; background-position: center; background-size: contain; } /* 比率は各SVGの viewBox から（86/111, 86/114, 86/110） */ html.abt-fv-catch-0810-b .appeal_img--b1 { padding-top: 77.48%; background-image: url("../../../assets/imgs/lp/appeal_img01_2.svg"); } html.abt-fv-catch-0810-b .appeal_img--b2 { padding-top: 75.44%; background-image: url("../../../assets/imgs/lp/appeal_img02_2.svg"); } html.abt-fv-catch-0810-b .appeal_img--b3 { padding-top: 78.18%; background-image: url("../../../assets/imgs/lp/appeal_img03_2.svg"); } @media screen and (min-width: 768px) { /* 1. メイン画像（PC）。上のSPルールと同詳細度・後勝ちで上書きする */ html.abt-fv-catch-0810-b .section-fv { background-image: url("../../../assets/imgs/lp/fv_back-pc_2.jpg"); } /* 4. PC では現行の と同じく li 幅いっぱいに広がる。 lp.css の .appeal_list .appeal_img の margin 指定はそのまま効く */ html.abt-fv-catch-0810-b .appeal_list--b .appeal_img--b { width: auto; } }