/* ============================================================ キャンペーンLP（travelgift-202608）演出スタイルクライアント支給の style.css とは分離した AQ 追加分。支給資材が差し替わっても、このファイルは影響を受けない。・style.css より後に読み込むこと（カスケード順で上書きするため）・script.js と対で動作する - .uds-js-anim : script.js がに付与するゲートクラス - .uds-fadein / .is-visible : スクロールフェードイン - .is-closing : アコーディオンを閉じている最中の目印 ============================================================ */ /* ------------------------------------------------------------ アコーディオンの高さアニメーション用の下地 height は script.js がインラインで実測値を入れる。そのために2点だけ土台を整える： 1) box-sizing 支給CSSには全体リセットが無く、

は content-box。 .uds-accordion は border-top: 1px を持つため、 offsetHeight（境界含む）をそのまま height に入れると 1px 分ずれる。border-box に揃えて実測値と一致させる。 2) min-height 親 .uds-terms-bg が column flex のため、フレックスアイテムの既定 min-height:auto がコンテンツ高さを下限として効き、閉じるアニメーションで縮まなくなる。0 に落として解除する。 ------------------------------------------------------------ */ .uds-accordion { box-sizing: border-box; min-height: 0; } /* 閉じるアニメーション中は open を維持して中身を見せ続けるため、 [open] のままでも矢印だけ先に「＋」へ戻す。これで開く／閉じるのどちらも、矢印の切り替えと高さの変化が同じタイミング（動きの開始時）で始まる。 */ .uds-accordion.is-closing[open] .uds-accordion-summary::after { content: "＋"; } /* ------------------------------------------------------------ スクロールフェードインテーマ側 .fadein-scroll（wp-content/themes/uds-theme/styles/style.css）と同じ opacity 0 -> 1 / 0.8s ease-out。テーマ側に移動量（transform）の指定は無いため本LPでも付けない。 .uds-js-anim は script.js がに付与する。 JS が動かない環境ではクラスが付かず、最初から可視のまま（テーマ側はCSSに直接 opacity:0 を書いているため、この点だけ挙動が異なる）。 ------------------------------------------------------------ */ .uds-js-anim .uds-fadein { opacity: 0; transition: opacity 0.8s ease-out; } .uds-js-anim .uds-fadein.is-visible { opacity: 1; } /* ------------------------------------------------------------ 複製したサイトヘッダー分のオフセット .Header は position:fixed（テーマCSS main.css:787）。本体サイトは 1枚目がフルスクリーンのヒーローで、ヘッダーが上に重なる前提のため本文をオフセットしていないが、LPはその前提で作られていないため、支給CSSの上余白がヘッダーに食われてしまう。支給の余白を維持する形でヘッダー高を足す。 ★ヘッダー高は固定pxではなく vw であること★ テーマは html { font-size: ...vw } で root をビューポート幅に比例させており（theme-known-bugs.md C-2）、**上限が無い**ためヘッダー高もビューポート幅に比例して伸び続ける。固定pxでオフセットすると、その値がぴったり合う1点の幅以外では必ずズレ、広い側では本文がヘッダーに潜り込む。本体サイトも同じ考え方で、下層ページの先頭ブロックをヘッダー高と同じ単位（rem）でオフセットしている: .Header { height: 6.25rem } （PC） .LowerHead{ margin-top: 6.25rem } （PC / main.css:2655） .LowerHead{ margin-top: 2.125rem } （SP / ヘッダー1.8125rem＋余白） LPでは rem がテーマのvwスケーリングに巻き込まれて使えないため、等価な vw に変換した値を使う（変換係数は build_header_footer_css.py の REGIMES と同じ: PC 1rem=1.1111111111vw / SP 1rem=8.5333333333vw）。ヘッダー高の内訳（header-footer.css の生成結果と一致・実測で裏取り済み） PC (>=768px) .Header { height: 6.94444vw } … 6.25rem SP (<=767px) .Header-upperLine { height: 15.4667vw } … 1.8125rem + .Header の border-bottom 1px 実測一致: 375px→59.00 / 390px→61.31 / 767px→119.63 768px→53.33 / 1440px→99.98 / 1920px→133.33 / 2560px→177.77 支給CSSの上余白（.uds-lp-container の padding-top）は PC 40px / SP 24px で、こちらは固定px設計（inner が max-width:640px の固定幅レイアウト）のため vw 化せずそのまま足す。ブレークポイント 768px はテーマCSS・支給CSS双方のメディアクエリと一致している（支給は max-width:767px / テーマも 767|768 境界）。 ※ header-footer.css を再生成したときは、上記2つの vw 定数が生成結果と食い違っていないか確認すること（再同期チェックリスト §1-5）。 ------------------------------------------------------------ */ :root { --uds-header-height: calc(15.4667vw + 1px); } @media screen and (min-width: 768px) { :root { --uds-header-height: 6.94444vw; } } .uds-lp-container { padding-top: calc(var(--uds-header-height) + 24px); /* 支給SPの上余白 24px */ } @media screen and (min-width: 768px) { .uds-lp-container { padding-top: calc(var(--uds-header-height) + 40px); /* 支給PCの上余白 40px */ } } /* ------------------------------------------------------------ body のマージンリセットブラウザ既定の `body { margin: 8px }` が残っていると、ページ全体が8px内側に寄り、**フッターの下に8pxの隙間**ができる。本体サイトはテーマのリセット（body,h1..p,ul,ol { margin:0 }）で 0 にしているが、そのリセットは header-footer.css 側では :where(.Header,.Menu,.Footer) にスコープされるため、実際のには効かない。ここで明示的に落とす。 LP本文（.uds-lp-container）は width:100% ＋自前の背景色を持つフルブリード設計なので、8px の余白が無くなるのが本来の姿。 ------------------------------------------------------------ */ body { margin: 0; } /* ------------------------------------------------------------ メニューパネルの暗幕（backdrop）テーマCSSは `.Menu .backdrop { opacity: 0 }` で伏せたまま、開いたときの `opacity: 1` を GSAP のインラインstyleで当てている。 CSS側のフォールバックは存在するものの .Menu.-show .Menu .backdrop { opacity: 1 } と自己入れ子になっており（.Menu の中の .Menu を指す）、 **永久に成立しない**。テーマ側の既存バグ。 → theme-known-bugs.md C-3 GSAPを移植しない本LPでは暗幕が出ないままになるため、 `-open`（script.js が付与）で opacity を戻す。 duration は本家の GSAP と同じ 0.4s に合わせている。ここは自動生成の header-footer.css ではなく enhance.css に置くこと。生成CSSは main.css から作り直されるため、手書きの補正は消える。 ------------------------------------------------------------ */ .Menu .backdrop { transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .Menu .backdrop.-open { opacity: 1; } /* ------------------------------------------------------------ LP本文のフォント支給CSSは `font-family: inherit` としか書いておらず（style.css:7, :345）、実体のフォントスタックを一度も宣言していない。WordPressページに埋め込む前提で「サイトのbodyフォントを継承する」意図だったが、静的HTMLとして単体配信すると継承元が無く、UA既定にフォールバックして **LP本文が明朝体（Times / Hiragino Mincho ProN）になる**。クライアント（林様）確認済み: 「本体サイトのフォントを継承する想定で inherit としていたため、サイト本文と同じゴシック体に揃える形でお願いします」スタックは本体サイトのに実際に効いている宣言をそのまま使う（テーマ assets/css/main.css:284-290 の body ルール。 local の本体トップで computed 値も実測して一致を確認済み）。 ※ `YuGothic`（スペース無し）を使っている宣言がテーマ内に別途あるが、 body に効いているのは `"Yu Gothic"`（スペース有り）の方。別フォント名なので取り違えないこと。適用先を .uds-lp-container と .uds-closed-overlay の2つに限定している理由: ・この2つが支給LPのルート（どちらも直下の兄弟）・オーバーレイは配下に font-family 指定を持たず継承のみなので、ルートに当てれば中身まで行き渡る・に当てるとヘッダー・フッター（複製部分）にも波及するため避ける（複製部分は header-footer.css が :where(.Header,.Menu,.Footer) で同じスタックを当てており、既に正しく描画されている）支給CSSの `.uds-lp-container { font-family: inherit }` と詳細度は同じ (0,1,0) だが、 enhance.css は style.css より後に読み込むためカスケード順で上書きされる。 body の `font-feature-settings: "palt"` は**あえて持ち込まない**。字面の詰めが変わり、支給CSSが持つ letter-spacing: 0.08em の設計と衝突するため。依頼は「同じゴシック体に揃える」であり、書体のみを合わせる。 ------------------------------------------------------------ */ .uds-lp-container, .uds-closed-overlay { font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } /* ------------------------------------------------------------ 終了オーバーレイ: 画面が低いときにカードが見切れる問題支給CSSの .uds-closed-overlay は position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; で overflow の指定が無い（computed overflow-y: visible）。カード高（実測 632.19px）がビューポート高を上回ると、 align-items: center のせいで**上下対称にはみ出す**。 flex の中央寄せではみ出した「上側」はスクロールでは到達できないため、 CTA「ROOMSの詳細を見る」に**ポインタ／タッチで永久に届かなくなる**。実測（修正前）: iPhone 12/13/14 横向き 844×390 … カード top -121.09 / CTA下端 470.09（画面外） Pro Max 横向き 926×428 … カード top -102.09 / CTA下端 489.09（画面外） overlay.scrollTop / window.scrollTo / ホイール / タッチドラッグ / scrollIntoView の5経路すべてでカードは 1px も動かない。修正方針: ・align-items を flex-start にして「はみ出すなら上端基準」にする・中央寄せはカード側の margin: auto が担う（flex の auto マージンは、余白があれば中央寄せ、余白が無ければ 0 になる。＝縦向き・PC の見た目は変わらない）・overflow-y はオーバーレイが出ている間だけ有効にする。非表示時（キャンペーン実施中）は素の状態を一切変えない。・overscroll-behavior: contain で、オーバーレイ内のスクロールが背景ページへ連鎖しないようにする。 ※ 背景のスクロールロックについて支給スクリプトは `document.body.style.overflow = "hidden"` を **コメントアウトしたまま**にしており、現状は背景がスクロールできる。ここではその既存挙動を変えていない（overscroll-behavior によりオーバーレイ内スクロールが背景へ波及することは防いでいる）。 ------------------------------------------------------------ */ .uds-closed-overlay { align-items: flex-start; } .uds-closed-overlay.is-active { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .uds-closed-card { margin: auto; } /* ------------------------------------------------------------ モーション低減設定への対応 script.js 側でも演出自体を止めているが、 CSSだけが適用される状況でも取り残されないよう二重で担保する。 ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .uds-js-anim .uds-fadein, .uds-js-anim .uds-fadein.is-visible { opacity: 1; transition: none; } .uds-accordion-summary::after { transition: none; } }