/* motion-system-v2.css — VAPOR-8 サイト共通のモーション層 v2（2026-09-29。v1 からの変更は節の入場だけ） * 対になるスクリプト：motion-system-v2.js（ で defer なし）。説明書：motion-system-v2.md（差分）と motion-system-v1.md。 * 色は契約 §2 の値だけ：紙 rgba(243,236,220,.78)（線・下線）、和の線の紫 #8c6be0・#6e50c6・#5a3fb0（幕の和紋）、 * 金 #d8b66a（幕の和紋の金の一筆だけ）、夜空 #0d0724、黒の帯 #08090e。 * 帯の幕の色は、各帯の地の値そのもの（PRODUCTS の例外 §2）。 */ /* ============ 1. 時間と曲線（一か所で調整する） ============ */ :root { --vp-slow: 1; /* 検証用の倍率（JS が sessionStorage から入れる） */ /* 節の入場「一筆と幕」 */ --vp-jo: 360ms; /* 序：見出しの行と下線の一筆 */ --vp-ha-at: 180ms; /* 破の始まり（一筆の途中から重ねる。本文は 250ms 以内に出始める。実測） */ --vp-ha: 640ms; /* 破：下線が幕の裾になって降り、本文を上から開く */ --vp-item: 520ms; /* 急：中身の単位が、裾が通り過ぎた順に 16u 下から浮き上がる */ --vp-sweep: 120ms; /* 急の左右のずれ（列の左端 0 → 右端 120ms。筆の向き） */ --vp-rise: 16px; /* 本文の戻り 16u（8u×2） */ --vp-feather: 24px; /* 見出しの書き始めのにじみ 24u */ --vp-bleed: 4px; /* 幕が本文の箱より左右に広い分（にじみを覆う。微調整の上限 4u） */ --vp-ease-stroke: cubic-bezier(.65, 0, .35, 1); /* 筆：入り（遅）→送り（速）→止め（柔） */ --vp-ease-curtain: cubic-bezier(.45, .05, .55, 1); /* 幕：すぐ動き出し（2コマで本文が出る）、画面の中を長く渡り、静かに着く。v1 の長い「ため」は空の帯に見えた */ --vp-ease-settle: cubic-bezier(.2, .7, .2, 1); /* 反応：すぐ応え、静かに止まる */ --vp-line: rgba(243, 236, 220, .78); /* 下線（操作リンクと同じ控えめな紙色）。節の線に金は使わない */ --vp-veil: #08090e; /* 幕の色 = その帯の地（既定は黒の帯） */ /* ページ遷移「和紋の幕」 */ --vp-vt: 800ms; /* 全体。序 0–36%（288ms）、破 36–64%（512ms まで）、急 64–100% */ --vp-vt-kyu-at: 512ms; /* 急の始まり＝次のページが見え始める（JS がイベントに使う） */ --vp-crest-bottom: 96px; /* 幕の和紋のインクの下端 ↔ 画面の下端（帯の端の規則 96／スマホ 64） */ --vp-site-pad: 40px; /* site-width-v1.css の --site-pad の写し（変数が届く前だけ使う） */ } @media (max-width: 767px) { :root { --vp-jo: 300ms; /* 幅が約1/3なので、筆の速さを近づける */ --vp-ha-at: 160ms; --vp-ha: 600ms; /* 縦に長い帯（HUB）でも、裾が本文の上を 300ms 以上渡るように（実測） */ --vp-crest-bottom: 64px; } } @media (max-width: 1100px) { :root { --vp-site-pad: 24px; } } @media (max-width: 760px) { :root { --vp-site-pad: 20px; } } @media (max-width: 360px) { :root { --vp-site-pad: 16px; } } /* ============ 2. ページ遷移「和紋の幕」 ============ */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* ヘッダーは固定：遷移の間も動かさない（新しいページのヘッダーがそのまま出る）。 名前は遷移の間だけ付ける（常に付けると別の層になり、静止時の文字のにじみ方が変わるため。実測で確認） */ html[data-vp-vt] :is(.s55-masthead, [data-vp-header]) { view-transition-name: vp-header; } ::view-transition-group(vp-header) { animation: none; z-index: 3; } /* 幕より上（ヘッダーの重なり順はページ側の文脈に左右されるため明示） */ ::view-transition-old(vp-header) { display: none; } ::view-transition-new(vp-header) { animation: none; } /* ページの本体：幕が覆いきった瞬間（36%）に前のページから次のページへ入れ替える。 次のページは急の間に 16u 上から幕に引かれて落ち着く（戻るときは下から） */ :root::view-transition-image-pair(root) { isolation: auto; } :root::view-transition-old(root), :root::view-transition-new(root) { mix-blend-mode: normal; animation-duration: calc(var(--vp-vt) * var(--vp-slow)); animation-fill-mode: both; } /* :root を付けるのは、members47-motion.css（::view-transition-old(root){display:none} ほか）と同時に読み込まれても、 読み込み順にかかわらずこちらが勝つようにするため（遷移の前半で前のページが消える不具合を防ぐ） */ :root::view-transition-old(root) { display: block; animation-name: vp-vt-old; animation-timing-function: linear; } :root::view-transition-new(root) { animation-name: vp-vt-new; animation-timing-function: linear; } :root:active-view-transition-type(vp-back)::view-transition-new(root) { animation-name: vp-vt-new-back; } @keyframes vp-vt-old { 0%, 35.9% { opacity: 1; } 36%, 100% { opacity: 0; } } @keyframes vp-vt-new { 0%, 35.9% { opacity: 0; transform: translateY(-16px); } 36% { opacity: 1; transform: translateY(-16px); } 64% { opacity: 1; transform: translateY(-16px); animation-timing-function: var(--vp-ease-settle); } 100% { opacity: 1; transform: none; } } @keyframes vp-vt-new-back { 0%, 35.9% { opacity: 0; transform: translateY(16px); } 36% { opacity: 1; transform: translateY(16px); } 64% { opacity: 1; transform: translateY(16px); animation-timing-function: var(--vp-ease-settle); } 100% { opacity: 1; transform: none; } } /* 幕（JS が行き先のページにだけ作る）。遷移の中では、実物の描画をそのまま映す */ ::view-transition-group(vp-curtain), ::view-transition-new(vp-curtain) { animation: none; } ::view-transition-group(vp-curtain) { z-index: 2; } ::view-transition-old(vp-curtain) { display: none; } .vp-curtain { --vp-ground: #08090e; /* 下層ページの地（黒の帯） */ --vp-edge: 1px; /* 幕の上下の縁は 1px の線（節の裾と同じ） */ position: fixed; inset: 0; z-index: 850; /* ヘッダー（900）の下、ページの上 */ overflow: hidden; pointer-events: none; contain: strict; view-transition-name: vp-curtain; } .vp-curtain[data-ground="home"] { --vp-ground: #0d0724; } /* ホームの地（夜空） */ .vp-curtain__panel { position: absolute; left: 0; right: 0; top: calc(-1 * var(--vp-edge)); height: calc(100% + 2 * var(--vp-edge)); display: grid; grid-template-rows: var(--vp-edge) minmax(0, 1fr) var(--vp-edge); transform: translateY(-100%); /* 最初は画面の上に隠れている */ will-change: transform; } .vp-curtain[data-dir="back"] .vp-curtain__panel { transform: translateY(100%); } .vp-curtain.is-run .vp-curtain__panel { animation: vp-curtain-fwd calc(var(--vp-vt) * var(--vp-slow)) linear both; } .vp-curtain[data-dir="back"].is-run .vp-curtain__panel { animation-name: vp-curtain-back; } /* 序：下りて覆う（先の縁の線が一筆で画面を渡る）／破：留まる（和紋が描かれる）／急：加速して抜ける（後の縁の線が次のページを開く）。 急の曲線は、次のページが見え始めてから抜けきるまでを急の時間の約6割確保する値（800ms で約180ms。きつい加速では1/3しか見えなかった） */ @keyframes vp-curtain-fwd { 0% { transform: translateY(-100%); animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 36% { transform: translateY(0); } 64% { transform: translateY(0); animation-timing-function: cubic-bezier(.4, 0, .6, .4); } 100% { transform: translateY(100%); } } @keyframes vp-curtain-back { 0% { transform: translateY(100%); animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 36% { transform: translateY(0); } 64% { transform: translateY(0); animation-timing-function: cubic-bezier(.4, 0, .6, .4); } 100% { transform: translateY(-100%); } } .vp-curtain__body { position: relative; background: var(--vp-ground); } /* 幕の上下の縁：1px の線（節の入場の「裾」と同じ語彙。操作リンクの下線と同じ控えめな紙色）。 留まっている間は画面の外（上下 1px の外）にあり、動いている間だけ見える */ .vp-curtain__edge { background: var(--vp-line); } /* 行き先の和紋（本番の patch と同じ幾何、柄の割り当ては主指揮 2026-09-28）。 置き場所：線のインクの左端を列の左端（--site-gutter）に、インクの下端を画面の下から 96u（スマホ 64u）に。 JS が描いた線の外接枠を測り、patch の中の余白を --vp-crest-dx・--vp-crest-dy で打ち消す（光学補正）。 時間：紫の線は 128–448ms、金の一筆は 368–512ms で 1.0 まで書き切る（破の終わり）。 全ページ共通の金の規則「1.0 で書き切る → 200ms 保つ → 800ms で 0.5」のうち、幕は 512ms で抜け始めるので、書き切るところまで */ .vp-curtain__crest { position: absolute; /* site-width-v1.css が遅れて読まれるページ（news.html・live.html は body の中で読む）でも最初のコマから列に合うよう、 変数がまだないときは site-width-v1.css と同じ値（余白 40／24／20／16、列の最大幅の式）で求める */ left: calc(var(--site-gutter, max(var(--vp-site-pad), calc((100% - var(--site-max, clamp(1168px, calc(100vw * 1168 / 1440), 1752px))) / 2))) + var(--vp-crest-dx, 0px)); bottom: calc(var(--vp-crest-bottom) - var(--vp-crest-dy, 0px)); display: block; height: auto; overflow: visible; } .vp-curtain__crest path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.06; /* 本番と同じ書き切りの余白。non-scaling-stroke は使わない */ stroke-dashoffset: 1.06; opacity: 0; } .vp-curtain__crest .vp-crest-outer { stroke: #8c6be0; } /* 外 1.5（太さは JS が patch の縮尺で割って置く） */ .vp-curtain__crest .vp-crest-mid { stroke: #6e50c6; } /* 中 1.2 */ .vp-curtain__crest .vp-crest-inner { stroke: #5a3fb0; } /* 内 1.0 */ .vp-curtain__crest .vp-crest-gold { stroke: #d8b66a; } /* 契約 §2 の例外：和紋の金の一筆（書き切るときは 1.0） */ .vp-curtain__crest path[data-vp-window="ink"] { --vp-w0: 128ms; --vp-wl: 320ms; } .vp-curtain__crest path[data-vp-window="gold"] { --vp-w0: 368ms; --vp-wl: 144ms; } .vp-curtain.is-run .vp-curtain__crest path { animation: vp-crest-draw calc(var(--vp-s1) * var(--vp-wl) * var(--vp-slow)) cubic-bezier(.45, 0, .2, 1) calc((var(--vp-w0) + var(--vp-s0) * var(--vp-wl)) * var(--vp-slow)) forwards, vp-crest-in calc(120ms * var(--vp-slow)) ease-out calc((var(--vp-w0) + var(--vp-s0) * var(--vp-wl)) * var(--vp-slow)) forwards; } @keyframes vp-crest-draw { to { stroke-dashoffset: 0; } } @keyframes vp-crest-in { to { opacity: 1; } } /* 共有要素（メンバーの絵など）：幕は出さず、絵だけが移る */ :root:active-view-transition-type(vp-shared)::view-transition-old(root) { animation: vp-fade-out calc(240ms * var(--vp-slow)) ease both; } :root:active-view-transition-type(vp-shared)::view-transition-new(root) { animation: vp-fade-in calc(240ms * var(--vp-slow)) ease both; } ::view-transition-group(vp-shared) { animation-duration: calc(460ms * var(--vp-slow)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); } ::view-transition-image-pair(vp-shared) { isolation: isolate; } ::view-transition-old(vp-shared) { display: none; } ::view-transition-new(vp-shared) { animation: none; mix-blend-mode: normal; object-fit: contain; } @keyframes vp-fade-out { to { opacity: 0; } } @keyframes vp-fade-in { from { opacity: 0; } } /* ============ 3. 節の入場「一筆と幕」 ============ */ @property --vp-p { syntax: ""; inherits: false; initial-value: 1; /* 何も指定がなければ「開いた状態」 */ } /* 見出しの行：左から書かれる（筆のにじみ 24u） */ [data-vp-head]:is([data-vp-phase="armed"], [data-vp-phase="play"]) { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--vp-p) * (100% + var(--vp-feather)) - var(--vp-feather)), transparent calc(var(--vp-p) * (100% + var(--vp-feather)))); mask-image: linear-gradient(90deg, #000 calc(var(--vp-p) * (100% + var(--vp-feather)) - var(--vp-feather)), transparent calc(var(--vp-p) * (100% + var(--vp-feather)))); } [data-vp-head][data-vp-phase="armed"] { --vp-p: 0; } [data-vp-head][data-vp-phase="play"] { animation: vp-p calc(var(--vp-jo) * var(--vp-slow)) var(--vp-ease-stroke) both; } @keyframes vp-p { from { --vp-p: 0; } to { --vp-p: 1; } } /* 急：中身の単位が、幕の裾が通り過ぎた瞬間から 16u 下から浮き上がる（JS が単位ごとの時刻 --vp-idelay を置く） */ [data-vp-item][data-vp-iphase="play"] { animation: vp-rise calc(var(--vp-item) * var(--vp-slow)) var(--vp-ease-settle) calc(var(--vp-idelay, 0ms) * var(--vp-slow)) both; } @keyframes vp-rise { from { translate: 0 var(--vp-rise); } to { translate: 0 0; } } /* 幕：本文を覆う、その帯の地の板。上端の1本の線が裾。 板（panel）は下へ動き、地（ground）は逆向きに打ち消して止まって見える（帯の格子や色がずれない） */ .vp-veil { position: absolute; z-index: 10; overflow: hidden; pointer-events: none; } .vp-veil__panel { position: absolute; inset: 0; overflow: hidden; } .vp-veil__ground { position: absolute; inset: 0; background: var(--vp-veil); } .vp-veil__band { /* 帯の ::before / ::after を写した層（JS が値を写す） */ position: absolute; display: block; pointer-events: none; } .vp-veil__hem { position: absolute; left: var(--vp-bleed); /* 線はガターからガターまで（JS が --site-max・--site-gutter の列に合わせて上書き） */ right: var(--vp-bleed); top: 0; height: 1px; overflow: hidden; } .vp-veil__run { position: absolute; inset: 0; background: var(--vp-line); transform: translateX(-100%); } /* 待機中は線を描かない（列の端が端数の位置のとき、引っ込めた線の端が 1px にじんで見えた。1600・1920 で実測） */ .vp-veil[data-vp-phase="armed"] .vp-veil__hem { visibility: hidden; } .vp-veil[data-vp-phase="play"] .vp-veil__run { animation: vp-hem-draw calc(var(--vp-jo) * var(--vp-slow)) var(--vp-ease-stroke) both; } .vp-veil[data-vp-phase="play"] .vp-veil__panel { will-change: transform; animation: vp-veil-open calc(var(--vp-ha) * var(--vp-slow)) var(--vp-ease-curtain) calc(var(--vp-ha-at) * var(--vp-slow)) both; } .vp-veil[data-vp-phase="play"] .vp-veil__ground { will-change: transform; animation: vp-veil-hold calc(var(--vp-ha) * var(--vp-slow)) var(--vp-ease-curtain) calc(var(--vp-ha-at) * var(--vp-slow)) both; } .vp-veil[data-vp-phase="play"] .vp-veil__hem { animation: vp-hem-fade calc(var(--vp-ha) * var(--vp-slow)) linear calc(var(--vp-ha-at) * var(--vp-slow)) both; } @keyframes vp-hem-draw { from { transform: translateX(-100%); } to { transform: none; } } @keyframes vp-veil-open { from { transform: none; } to { transform: translateY(100%); } } @keyframes vp-veil-hold { from { transform: none; } to { transform: translateY(-100%); } } @keyframes vp-hem-fade { 0%, 90% { opacity: 1; } 100% { opacity: 0; } } /* 裾は本文の上を渡りきってから消える */ /* 帯の地が黒の帯でない節は、data-vp-veil-from で帯を写す（ホームの PRODUCTS・HUB は JS の既定で写す）。 写せない地のときだけ、節に --vp-veil で色を書く */ /* 幕の遷移で着いた直後、幕が覆っている間（data-vp-arrival="curtain"）は、ページ固有の入場の CSS アニメーション （[data-vp-hold]）を止めておく。「急」で data-vp-arrival="revealing" に変わると動き出し、幕が抜けるのと一続きになる。 JS で動かす入場は __vpMotion.whenRevealed() か vp:transition-reveal を待って始める（説明書 §5） */ html[data-vp-arrival="curtain"] [data-vp-hold], html[data-vp-arrival="curtain"] [data-vp-hold] *, html[data-vp-arrival="curtain"] [data-vp-hold] *::before, html[data-vp-arrival="curtain"] [data-vp-hold] *::after { animation-play-state: paused !important; } /* 節の中の見せ場の CSS アニメーション（PRODUCTS の products-motion-v1 の .pv-play、ほかの班は [data-vp-hold]）は、 その節の「一筆と幕」が開くまで止めておく。止めている間は最初のコマのまま（fill: both）なので、幕が開いてから 見せ場が最初から流れ、節の中で動きが重ならない（幕の下で見せ場が終わってしまうのを防ぐ） */ :is([data-vp-state="armed"], [data-vp-state="play"]) :is(.pv-play, [data-vp-hold]), :is([data-vp-state="armed"], [data-vp-state="play"]) :is(.pv-play, [data-vp-hold]) *, :is([data-vp-state="armed"], [data-vp-state="play"]) :is(.pv-play, [data-vp-hold]) *::before, :is([data-vp-state="armed"], [data-vp-state="play"]) :is(.pv-play, [data-vp-hold]) *::after { animation-play-state: paused !important; } /* ============ 4. 操作の反応 ============ */ /* 4-1. 操作リンク：下線を「描ける1本の線」にそろえる（見た目は元の下線と同じ位置・太さ・色） */ .ensemble-stage .u, #products#products .s55-studio-link, #products#products .s55-hub-banner .action, .pv-u.pv-u, [data-vp-link]:not(.edition-news-all, .edition-works__all, .edition-contact-all) { position: relative; border-bottom-color: transparent; } .ensemble-stage .u::after, #products#products .s55-studio-link::after, #products#products .s55-hub-banner .action::after, .pv-u.pv-u::after, [data-vp-link]:not(.edition-news-all, .edition-works__all, .edition-contact-all)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; /* 元の border-bottom と同じ1行 */ height: 1px; background: currentColor; pointer-events: none; } /* 引き直し：右へ払って消え、左から書き直す（入り・送り・払い）。ホバーで一回だけ */ @media (hover: hover) { :is(.ensemble-stage .u, .edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, .v8-live-empty-link, [data-vp-link]):hover::after, #on-air .v8-live-watch:hover .v8-live-watch-main::after { animation: vp-restroke calc(480ms * var(--vp-slow)) both; } } :is(.ensemble-stage .u, .edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, .v8-live-empty-link, [data-vp-link]):focus-visible::after, #on-air .v8-live-watch:focus-visible .v8-live-watch-main::after { animation: vp-restroke calc(480ms * var(--vp-slow)) both; height: 2px; /* フォーカス中は線が 2px（枠の箱を作らずに示す） */ } :is(.ensemble-stage .u, .edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, .v8-live-empty-link, [data-vp-link]):active::after, #on-air .v8-live-watch:active .v8-live-watch-main::after { height: 2px; /* 押した瞬間：線が太る（上へ 1px） */ } @keyframes vp-restroke { 0% { transform: scaleX(1); transform-origin: right center; animation-timing-function: cubic-bezier(.5, 0, .75, 0); } 33% { transform: scaleX(0); transform-origin: right center; } 33.01% { transform: scaleX(0); transform-origin: left center; animation-timing-function: cubic-bezier(.25, 1, .5, 1); } 100% { transform: scaleX(1); transform-origin: left center; } } /* 矢印：行き先へ 4u 送る（微調整の上限 4u。右上向きは右上へ） */ :is(.ensemble-stage .u, .edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, .v8-live-empty-link, [data-vp-link]) > :is(svg, .ui-icon):last-child, #on-air .v8-live-watch-main > .ui-icon:last-child, .ensemble-stage .tag a svg, .edition-news-title-row > .ui-icon, .edition-works__author-name > svg { transition: transform calc(320ms * var(--vp-slow)) var(--vp-ease-settle); } @media (hover: hover) { :is(.ensemble-stage .u, .edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, .v8-live-empty-link, [data-vp-link]):hover > :is(svg, .ui-icon):last-child, .ensemble-stage .tag a:hover svg { transform: translateX(4px); } :is(.edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, [data-vp-arrow="ne"]):hover > :is(svg, .ui-icon):last-child, #on-air .v8-live-watch:hover .v8-live-watch-main > .ui-icon:last-child, .edition-news-link:hover .edition-news-title-row > .ui-icon, .edition-works__author:hover .edition-works__author-name > svg { transform: translate(4px, -4px); } } :is(.ensemble-stage .u, [data-vp-link]):focus-visible > :is(svg, .ui-icon):last-child { transform: translateX(4px); } :is(.edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, [data-vp-arrow="ne"]):focus-visible > :is(svg, .ui-icon):last-child, .edition-news-link:focus-visible .edition-news-title-row > .ui-icon { transform: translate(4px, -4px); } /* 4-1b. ホバーの色：操作リンクとカードの題は紙色へ明るくするだけ（古い規則が金 var(--action)・var(--news-accent) にしていた） */ .edition-contact .edition-contact-all:is(:hover, :focus-visible, :active) { color: #f3ecdc; } .edition-news .edition-news-link.edition-news-link:is(:hover, :focus-visible) h3 { color: #f3ecdc; text-decoration: none; } /* 4-2. カード：画像が静かに寄る（1440 の主カード幅 568px で各辺 8u = 1.03）。押すと少し戻る */ .edition-news-image, .edition-works__image-link, #on-air a.v8-live-picture, [data-vp-card-media] { overflow: hidden; } :is(.edition-news-image, .edition-works__image-link, #on-air .lia-thumb, #on-air a.v8-live-picture, [data-vp-card-media]) img { transition: transform calc(720ms * var(--vp-slow)) var(--vp-ease-settle); } @media (hover: hover) { :is(.edition-news-link, .edition-works__image-link, #on-air .lia-link, #on-air a.v8-live-picture, [data-vp-card]):hover :is(.edition-news-image, .lia-thumb, [data-vp-card-media]) img, :is(.edition-works__image-link, #on-air a.v8-live-picture):hover > img { transform: scale(1.03); } } :is(.edition-news-link, #on-air .lia-link, [data-vp-card]):focus-visible :is(.edition-news-image, .lia-thumb, [data-vp-card-media]) img, :is(.edition-works__image-link, #on-air a.v8-live-picture):focus-visible > img { transform: scale(1.03); } :is(.edition-news-link, #on-air .lia-link, [data-vp-card]):active :is(.edition-news-image, .lia-thumb, [data-vp-card-media]) img, :is(.edition-works__image-link, #on-air a.v8-live-picture):active > img { transform: scale(1.015); transition-duration: calc(120ms * var(--vp-slow)); } /* 4-3. メニュー：ラベルの下に左から一筆、離れると右へ払う。今いるページは引いたまま */ #s14-nav#s14-nav a::after { opacity: 1; transform: scaleX(0); transform-origin: right center; transition: transform calc(320ms * var(--vp-slow)) var(--vp-ease-stroke); } @media (hover: hover) { #s14-nav#s14-nav a:hover::after { transform: scaleX(1); transform-origin: left center; } } #s14-nav#s14-nav a:focus-visible::after, #s14-nav#s14-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; } #s14-nav#s14-nav a:active::after { transform: scaleX(1); transform-origin: left center; height: 2px; } /* ============ 5. 動きを減らす設定・印刷：完成形を静止で出す ============ */ @media (prefers-reduced-motion: reduce) { .vp-veil, .vp-curtain { display: none !important; } [data-vp-head] { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; } [data-vp-body], [data-vp-item] { animation: none !important; translate: none !important; } :is(.ensemble-stage .u, .edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, .v8-live-empty-link, [data-vp-link], #on-air .v8-live-watch-main)::after { animation: none !important; } :is(.ensemble-stage .u, .edition-news-all, .edition-works__all, .edition-contact-all, #products .s55-studio-link, #products .s55-hub-banner .action, .pv-u, .v8-live-empty-link, [data-vp-link]) > :is(svg, .ui-icon), #on-air .v8-live-watch-main > .ui-icon, .ensemble-stage .tag a svg, .edition-news-title-row > .ui-icon, .edition-works__author-name > svg, :is(.edition-news-image, .edition-works__image-link, #on-air .lia-thumb, #on-air a.v8-live-picture, [data-vp-card-media]) img { transition: none !important; transform: none !important; } #s14-nav#s14-nav a::after { transition: none !important; } } @media print { .vp-veil, .vp-curtain { display: none !important; } [data-vp-head] { -webkit-mask-image: none !important; mask-image: none !important; } [data-vp-body], [data-vp-item] { translate: none !important; } }