/* ============================================================ 2026 全ページ共通:ページ遷移演出(幕＋開幕＋任意タイトル演出) ・幕/タイトルの隠し状態は のクラス(pt-cover / pt-reveal / pt-leave) でのみ発生する。JSが無効・失敗した場合はクラスが付かず、幕は出ず コンテンツは常に表示される(グレースフルデグラデーション)。 側に「1.5秒で必ず解除」する保険あり。 ・prefers-reduced-motion では幕を完全非表示。 ============================================================ */ :root { --pt-skew: 0deg; /* 幕の斜め角度。スマホは縦(0)。PCは下の media query で 16deg */ --pt-mar: 0px; /* 斜め縁のはみ出しを覆う上下マージン。skew時のみ必要(PCで付与) */ --pt-dur: 0.9s; /* 幕がせり上がる/抜ける速さ(ゆっくりめ) */ } /* PCだけ斜めエッジにする。スマホ(≦768px)は縦のまま。js の isMobile と同じ 768px 境界 */ @media (min-width: 769px) { :root { --pt-skew: 16deg; --pt-mar: 18vw; /* 16°で縁がはみ出す分(≒14.3vw)を余裕をもって覆う */ } } /* 幕。skewY で縁を斜めにし(0なら縦)、translateY で 下(隠れ)→中央(覆う)→上(抜ける)。 高さは viewport + 上下マージンぶんだけ大きくして、斜め時に縁がはみ出す分だけを覆う (大きくし過ぎないので、動きが最後まで等速に見える)。 既定は画面外(上)へ退避。JSが無効・失敗すればクラスが付かず、幕は出ずコンテンツは常に表示。 */ .pt-curtain { position: fixed; left: 0; top: calc(-1 * var(--pt-mar, 0px)); width: 100%; height: calc(100% + 2 * var(--pt-mar, 0px)); z-index: 99999; background: linear-gradient(180deg, #243b65 0%, #1b2c4d 100%); transform: translateY(-100%) skewY(var(--pt-skew, 0deg)); pointer-events: none; transition: transform var(--pt-dur, 0.9s) cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* 到着直後:覆った状態で即表示(アニメ無し) */ html.pt-cover .pt-curtain { transform: translateY(0) skewY(var(--pt-skew, 0deg)); transition: none; pointer-events: all; } /* 読み込み後:上へ抜けて開幕 */ html.pt-reveal .pt-curtain { transform: translateY(-100%) skewY(var(--pt-skew, 0deg)); } /* クリック時(PC):下からせり上がって覆う(PCは斜め、スマホは縦) */ html.pt-leave .pt-curtain { transform: translateY(0) skewY(var(--pt-skew, 0deg)); pointer-events: all; } /* ---- スマホ:メニュー(青)等からの遷移は「白幕 → 青幕」の二段ワイプ(縦) ---- 1) 白(生成り)の幕が下からせり上がる。青メニューの上でもはっきり見える。 2) 白のすぐ後を追って、青の幕がせり上がって覆う。 青は transition-delay(0.21s)で白の少し後に重ねる。速さは共通 --pt-dur。 発火/瞬間リセットは js/page-transition.js が行う。 */ .pt-curtain-w { position: fixed; left: 0; top: calc(-1 * var(--pt-mar, 0px)); width: 100%; height: calc(100% + 2 * var(--pt-mar, 0px)); z-index: 99998; /* 青幕(.pt-curtain=99999)の下。青が白の上に重なってワイプする */ background: linear-gradient(180deg, #f7f3ea 0%, #ece5d6 100%); transform: translateY(100%) skewY(var(--pt-skew, 0deg)); /* 既定は画面外(下)。白はクリック時だけ使う */ pointer-events: none; transition: transform var(--pt-dur, 0.9s) cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } html.pt-leave-w .pt-curtain-w { transform: translateY(0) skewY(var(--pt-skew, 0deg)); } html.pt-leave-b .pt-curtain { transform: translateY(0) skewY(var(--pt-skew, 0deg)); transition-delay: 0.21s; /* 白の少し後に追従(シュシュン)。js の BLUE_START_MS と一致 */ pointer-events: all; } /* クリック直後、幕を「下」へ瞬間移動(アニメ無し)。ここを起点に下→上へせり上げる */ html.pt-belowsnap .pt-curtain, html.pt-belowsnap .pt-curtain-w { transform: translateY(100%) skewY(var(--pt-skew, 0deg)); transition: none; } /* ============================================================ 到着演出(開幕と同時):ヘッダー画像 → 英語ラベル → タイトル文字送り ・全て html.pt-reveal が付いた時だけ発火する。 JSが無効・失敗すれば pt-reveal が付かず、下記の隠し(opacity:0 等)は 一切適用されず、帯もタイトルも通常どおり表示される (グレースフルデグラデーション)。 ・対象は下層ページ共通の .top-header(front / yakuzaishikai には無い)。 ============================================================ */ /* ---- ヘッダー画像(バナー背景)がふわっとズームインしながら現れる ---- */ html.pt-reveal .top-header__otr { animation: pt-banner 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.05s; will-change: transform, opacity; } @keyframes pt-banner { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } } /* ---- 主表示テキスト(英語ラベル or 日本語見出し)の文字送り ---- JSが各 .top-header の主表示(英語ラベルがあれば英語、無ければ日本語見出し)を 1文字ずつ に分解する。任意で [data-pt-title] も対象。 英語を大きく見せるページでは、この文字送りが英語ラベルに乗る。 */ html.pt-reveal .top-header__en .pt-ch, html.pt-reveal .top-header__h1 .pt-ch, html.pt-reveal [data-pt-title] .pt-ch { display: inline-block; animation: pt-char 0.72s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 0.055s + 0.32s); } @keyframes pt-char { from { opacity: 0; transform: translateY(0.9em) rotate(4deg); } to { opacity: 1; transform: none; } } /* ---- 英語ラベルの下の日本語見出し(小さめ)は、少し遅れて全体でふわっと ---- */ html.pt-reveal .top-header__en + .top-header__h1 { animation: pt-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.5s; } @keyframes pt-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pt-curtain, .pt-curtain-w { display: none; } html.pt-reveal .top-header__otr, html.pt-reveal .top-header__en .pt-ch, html.pt-reveal .top-header__h1 .pt-ch, html.pt-reveal .top-header__en + .top-header__h1, html.pt-reveal [data-pt-title] .pt-ch { animation: none; } }