.fv { position: relative; width: 100%; } .fv-sticky-wrap { /*height: 200vh;*//*←こっちでもいい スクロールとために必要*/ height: 100%;/*←こっちでもいい スクロールとために必要*/ position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: 0 20px; } .data-scan-text{ position: sticky; top: 40%; right: 59.6%; margin: 0px auto 0; width: fit-content; text-align: center; font-size: .50rem; /* ここから追加（文字をグラデ塗りにする） */ --split: 100%; /* 初期は全部黒 */ background: linear-gradient( to bottom, #fff 0%, #fff var(--split), #000 var(--split), #000 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; /* 文字色は透明にして背景を見せる */ -webkit-text-fill-color: transparent; /*stop-text__headingとセットで高さ(line-heightやフォントサイズなど*absoluteではない)を合わせる*/ } /* 初期状態を非表示にしてチラつき防止 */ .data-scan-text { opacity: 0; } /* JSの準備完了後に表示 */ .data-scan-text.is-ready { opacity: 1; } .fv1 { width: 100%; height: calc(100vh - 138px); margin-bottom: 40px; /*background-image: url(../images/top-slider04-pc.jpg);*/ background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; } .fv1 video { width: 80.5%; margin-left: auto; display: block; height: calc(100vh - 138px - 55px); object-fit: cover; } .fv-sticky-wrap img{ width: 420px; } /* FV2 pin area wrapper */ #fv2PinArea { margin-top: 123px; } .fv2 { width: 100%; height: 100vh; background-image: none; background-attachment: initial; display: flex; align-items: center; margin-top: 0; position: relative; overflow: hidden; } /* PC背景レイヤー */ #fv2BgLayer { position: absolute; inset: 0; background-image: url(../images/top/fv2-back.jpg); background-size: cover; background-position: center; will-change: transform; transform: scale(1.12); z-index: 0; } /* オーバーレイ */ #fv2OverlayLayer { position: absolute; inset: 0; background: #000; opacity: 0.55; will-change: opacity; z-index: 1; } /* SP: 背景レイヤーをパララックス用に拡大（yPercent:-20 の移動量を吸収）＋SP用画像に差し替え transform-origin: top center → 上端固定で下方向に拡大、画像の上端が最初から見える */ @media (max-width: 800px) { #fv2BgLayer { background-image: url(../images/top/fv2-back-sp.jpg); transform: scale(1.5); transform-origin: top center; } } /* SP: グラデーション帯をGSAPでスクロール追従させる --gp はGSAPが 100 → 0 にアニメーション（section enter → exit）*/ @media (max-width: 800px) { #fv2OverlayLayer { background: linear-gradient( to bottom, rgba(0, 0, 0, 0) calc(var(--gp, 100) * 1% - 65%), rgba(0, 0, 0, 0.45) calc(var(--gp, 100) * 1% - 30%), rgba(0, 0, 0, 0.45) calc(var(--gp, 100) * 1% + 30%), rgba(0, 0, 0, 0) calc(var(--gp, 100) * 1% + 65%) ); opacity: 1; } /* 帯の端で背景が明るくなる部分のテキスト補強 */ .stop-text__midashi, .stop-text__lead { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); } } .stop-text { width: 1100px; max-width: 100%; display: flex; margin: 0 auto; position: relative; z-index: 10; } /* 見出し文字の箱 */ .stop-text__heading { margin-top: 110px; /*data-scan-textの高さ(line-height)と合わせた方が調整しやすい*/ } .stop-text__box{ color: #fff; width: 45%; margin-left: auto; } .stop-text__midashi{ font-size: .36rem; display: block; margin-bottom: 15px; } .stop-text__lead { font-size: .18rem; line-height: 2.5; } .stop-text span{ } .data-scan-text.is-stop { position: absolute; top: 40%; right: 59.6%; width: fit-content; margin: auto; } .dummy-section { padding-bottom: 200px; background-color: #000; } /* ---- ページトランジション ------------------------------------------ */ /* TypeKit が で html.wf-loading を同期的に付与するため、 最初のペイント前から body を非表示にできる */ html.wf-loading body { opacity: 0; } /* JS 側で opacity をセットした際のフォールバック用ベース transition */ body { transition: opacity 0.5s ease; }