/* セクション共通スタイル / 個別セクションのスタイルはここに追記していく */ .lp { /* sticky を子孫で使うため overflow-x: hidden ではなく clip を使う。 hidden は祖先を sticky の基準にしてしまい、position: sticky を無効化する。 clip は単に視覚的にクリップするだけで sticky を壊さない。 非対応ブラウザ向けに hidden をフォールバックで残してある。 */ overflow-x: hidden; overflow-x: clip; } .section { position: relative; width: 100%; } .section__side-label { position: absolute; top: 0; left: 32px; width: 144px; display: flex; align-items: flex-start; gap: 18px; pointer-events: none; } .section__side-label-line { display: block; width: 72px; height: 1px; background-color: var(--c-black); margin-top: 8px; flex-shrink: 0; } .section__side-label-text { font-family: var(--ff-en); font-weight: var(--fw-medium); font-size: var(--fs-section-label); letter-spacing: var(--ls-small); line-height: 1; color: var(--c-black); writing-mode: vertical-rl; text-orientation: mixed; } @media (max-width: 1023px) { .section__side-label { left: 16px; width: auto; } } /* ========================================================= スクロール連動の出現演出（reveal） --------------------------------------------------------- JS（MonolithReveal）が要素に is-revealed を付与して再生。 .js-reveal-ready は に JS から付与。 付かないとき（JS無効）は初期スタイルが効かず通常表示。 制約: - 既存カルーセル要素（.hero__slide, .scene__slide）の opacity transition と衝突するため、それらには data-reveal を付与しない。 - sticky を子孫に持つ祖先には overflow を新規付与しない。 - hover で transform を使う要素（features__details, scene__details） には付与しない。 ========================================================= */ .js-reveal-ready [data-reveal] { opacity: 0; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms), clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms); will-change: opacity, transform; } .js-reveal-ready [data-reveal="fade-up"] { transform: translate3d(0, 24px, 0); } .js-reveal-ready [data-reveal="fade"] { transform: none; } /* マスク：下からめくれて現れる（主役画像向け） */ .js-reveal-ready [data-reveal="mask"] { clip-path: inset(100% 0 0 0); transform: none; } /* 表示状態（共通） */ .js-reveal-ready [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0); clip-path: inset(0 0 0 0); } /* アクセシビリティ：モーション控えめ設定では即時表示 */ @media (prefers-reduced-motion: reduce) { .js-reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } } /* ========================================================= パララックス（背景画像向け） --------------------------------------------------------- JS が translate3d を inline style で書き込む。 親セクションが overflow: hidden を持つ前提。SP/reduced は無効。 ========================================================= */ .js-reveal-ready [data-parallax] { will-change: transform; } @media (prefers-reduced-motion: reduce) { .js-reveal-ready [data-parallax] { transform: none !important; } }