@charset "utf-8"; /* ============================================================ page-transition.css ── ページ遷移（View Transitions API・ページ間）2026-10-20 読み込み：全ページの 、micro-interactions.css の直後 （js/page-transition.js と1組。JSが無くても既定の動きは出る） 対応ブラウザ：Chrome / Edge 126 以降、Safari 18.2 以降（iPhone も同じ） Firefox など非対応のブラウザでは何も起きず、今まで通りの普通のページ移動になる （出典：MDN browser-compat-data 8.1.6「css.at-rules.view-transition」2026-10-15） 動く条件（ブラウザの仕様） ・同じドメインの中のページどうし ・移動元と移動先の「両方」がこの CSS を読み込んでいる → WordPress（/cms/）など、この CSS を読んでいないページへの移動は普通の移動になる ・リンクのクリック、ブラウザの「戻る」「進む」 （再読み込み・アドレスバーへの入力・ブックマークでは動かない） このファイルにあるもの 1. スイッチ 2. 調整用の値 3. 共通：ヘッダーは動かさない 4. 既定の動き（fade） 5. 写真がヒーローへ広がる動き（モーフ） 6. 別の動き（slide / wipe）… js/page-transition.js の STYLE で切り替え 7. 動きを減らす設定の利用者 8. 主役の写真が遷移に間に合わなかった時（届いてからふわっと出す） ============================================================ */ /* ---------- 1. スイッチ（これを消すとページ遷移の演出がすべて止まる） ---------- */ @view-transition { navigation: auto; } /* ---------- 2. 調整用の値 ---------- ※時間・距離はデザイン上の設定値（根拠となる元資料なし）。体感で調整してください */ :root{ --vt-in: .42s; /* 新しいページが現れる時間 */ --vt-out: .18s; /* 前のページが消える時間（現れる時間より短くして、もたつかせない） */ --vt-photo: .52s; /* カードの写真が次のページのヒーローへ広がる時間 */ --vt-wipe: .62s; /* wipe：新しいページが横切って現れる時間 */ --vt-rise: 16px; /* fade：新しいページが下から浮き上がる距離 */ --vt-shift: 48px; /* slide：横に流れる距離 */ --vt-ease-in: cubic-bezier(.2,0,0,1); /* 現れる動き（style.css の --ease と同じ） */ --vt-ease-out: cubic-bezier(.4,0,1,1); /* 消える動き */ } /* ---------- 3. 共通：ヘッダーは動かさない ---------- ヘッダーには遷移中だけ js/page-transition.js が名前（site-header）を付ける。 名前の付いた要素はページ本体（root）から切り離されるので、本体が動いてもヘッダーは止まったまま。 開いていたメガメニューやスクロール後の白い帯は、その場で静かに切り替わる。 ※常に名前を付けておくと、メガメニューのすりガラス（backdrop-filter）が効かなくなるため CSS では付けない */ ::view-transition-group(site-header){ animation-duration: .2s; } ::view-transition-old(site-header), ::view-transition-new(site-header){ animation-duration: .2s; } /* ---------- 4. 既定の動き（fade） ---------- 前のページはすっと消え、新しいページが少し下から浮き上がる。 ブラウザの「戻る」の時は、逆に少し上から降りてくる */ ::view-transition-old(root){ animation: vt-fade-out var(--vt-out) var(--vt-ease-out) both; } ::view-transition-new(root){ animation: vt-fade-in var(--vt-in) var(--vt-ease-in) both, vt-rise var(--vt-in) var(--vt-ease-in) both; } html:active-view-transition-type(back)::view-transition-new(root){ animation: vt-fade-in var(--vt-in) var(--vt-ease-in) both, vt-fall var(--vt-in) var(--vt-ease-in) both; } /* ---------- 5. 写真がヒーローへ広がる動き（モーフ） ---------- 写真付きのカード（例：トップ「私たちについて」→ overview.html、 overview「CSR のとりくみ」→ csr/ の各ページ）を押した時だけ、 押したカードが次のページのヒーロー（ページ上部の帯）へ広がりながら入れ替わる。 名前（vt-photo）は js/page-transition.js が移動の直前・直後にだけ付ける。 縦横比が違うもの同士なので、どちらも枠いっぱいにトリミング（cover）して歪ませない */ ::view-transition-group(vt-photo){ animation-duration: var(--vt-photo); animation-timing-function: var(--vt-ease-in); } ::view-transition-old(vt-photo), ::view-transition-new(vt-photo){ width: 100%; height: 100%; object-fit: cover; overflow: clip; } ::view-transition-old(vt-photo){ animation: vt-fade-out calc(var(--vt-photo) * .55) var(--vt-ease-out) both; } ::view-transition-new(vt-photo){ animation: vt-fade-in calc(var(--vt-photo) * .7) var(--vt-ease-in) both; } /* ---------- 6. 別の動き（js/page-transition.js の STYLE で選ぶ） ---------- */ /* slide：横に流れる。進む時は右から、戻る時は左から */ html:active-view-transition-type(slide)::view-transition-old(root){ animation: vt-fade-out var(--vt-out) var(--vt-ease-out) both, vt-to-left var(--vt-in) var(--vt-ease-in) both; } html:active-view-transition-type(slide)::view-transition-new(root){ animation: vt-fade-in var(--vt-in) var(--vt-ease-in) both, vt-from-right var(--vt-in) var(--vt-ease-in) both; } html:active-view-transition-type(slide):active-view-transition-type(back)::view-transition-old(root){ animation: vt-fade-out var(--vt-out) var(--vt-ease-out) both, vt-to-right var(--vt-in) var(--vt-ease-in) both; } html:active-view-transition-type(slide):active-view-transition-type(back)::view-transition-new(root){ animation: vt-fade-in var(--vt-in) var(--vt-ease-in) both, vt-from-left var(--vt-in) var(--vt-ease-in) both; } /* wipe：前のページの上を、新しいページが左から右へ刷り上がるように現れる。戻る時は右から左へ */ html:active-view-transition-type(wipe)::view-transition-old(root){ animation: none; mix-blend-mode: normal; } html:active-view-transition-type(wipe)::view-transition-new(root){ animation: vt-wipe var(--vt-wipe) var(--vt-ease-in) both; mix-blend-mode: normal; } html:active-view-transition-type(wipe):active-view-transition-type(back)::view-transition-new(root){ animation-name: vt-wipe-back; } /* ---------- キーフレーム ---------- */ @keyframes vt-fade-in { from { opacity: 0; } } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-rise { from { transform: translateY(var(--vt-rise)); } } @keyframes vt-fall { from { transform: translateY(calc(var(--vt-rise) * -1)); } } @keyframes vt-from-right{ from { transform: translateX(var(--vt-shift)); } } @keyframes vt-from-left { from { transform: translateX(calc(var(--vt-shift) * -1)); } } @keyframes vt-to-left { to { transform: translateX(calc(var(--vt-shift) * -1)); } } @keyframes vt-to-right { to { transform: translateX(var(--vt-shift)); } } @keyframes vt-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } } @keyframes vt-wipe-back { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } } /* ---------- 7. 動きを減らす設定（OS の「視差効果を減らす」等）の利用者 ---------- 移動・拡大・横切る動きはすべて止め、0.2 秒の静かなクロスフェードだけにする。 （写真のモーフは js/page-transition.js 側でも行わない） ※0.2 秒はデザイン上の設定値（根拠となる元資料なし） */ @media (prefers-reduced-motion: reduce){ ::view-transition-group(*){ animation-duration: 0s !important; } ::view-transition-old(*){ animation: vt-fade-out .2s linear both !important; mix-blend-mode: plus-lighter !important; } ::view-transition-new(*){ animation: vt-fade-in .2s linear both !important; mix-blend-mode: plus-lighter !important; } } /* ---------- 8. 主役の写真が遷移に間に合わなかった時（2026-10-21） ---------- 初めて開くページでは写真が届く前にページが描かれ、切り替えの後で写真が突然現れる（＝ちらつき）。 js/page-transition.js が、最初に描かれる時点でまだ届いていない写真にだけ .vt-img-hold を付けて隠し、 届いたら .vt-img-in に替えてふわっと出す。届いている写真（2回目以降）には何も付かない。 ※0.5 秒はデザイン上の設定値（根拠となる元資料なし）。 ※動きを減らす設定の人には、style.css の安全網で一瞬で表示される */ .vt-img-hold{ opacity: 0; } .vt-img-in{ transition: opacity .5s var(--vt-ease-in); }