/* モーション（2026-10-19 決定）。仕組みは js/motion.js。A・B・C の3案を見比べて、セクションごとに決めた 基本＝A（下からふわっと）／FV と 06＝B（見出しは左からスッと・写真は少し大きい状態から）／07・08＝カードごとに下からすっと 「動きを減らす」設定の端末では動かさない（motion.js が何も付けない） */ /* ---------- カルーセルの速さ ---------- */ /* 11/2：変数名の書き間違い（--car-dur）で、10/21に決めた0.35秒が0.6秒に上書きされていた。sections.css の --cr-dur を使う */ .carousel__track, .pj-card { transition-duration: var(--cr-dur, .9s); } /* ---------- 共通：出る前の状態 → .is-in で出る ---------- */ .rv-on { transition-property: opacity, transform, clip-path; transition-timing-function: cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 110ms); } /* 基本：下からふわっと（A） */ [data-motion] .rv-on { opacity: 0; transform: translateY(24px); transition-duration: .9s; } [data-motion] .rv-on.is-in { opacity: 1; transform: none; } /* ---------- セクションごとの決定 ---------- 02 introduction・03 SERVICE・04 事業（next01/02）・05 SHE PROJECTS：A（下からふわっと）に決定（本人 10/19。03は A と B の差が小さいので A） */ [data-motion] :is(.intro, .she, .next01, .next02, .project) .rv-on { opacity: 0; transform: translateY(24px); clip-path: none; transition-duration: .9s; } [data-motion] :is(.intro, .she, .next01, .next02, .project) .rv-on.is-in { opacity: 1; transform: none; } /* 06 エフィカシー経営：B に決定（本人 10/19）。タイトルは左からスッと／人物は少し大きい状態から／文字は下から */ [data-motion] .org .rv-on { opacity: 0; clip-path: none; transition-duration: .8s; } [data-motion] .org .rv-h { transform: translateX(-40px); } [data-motion] .org .rv-img { transform: scale(1.06); transition-duration: 1.2s; } [data-motion] .org .rv { transform: translateY(32px); } [data-motion] .org .rv-on.is-in { opacity: 1; transform: none; } /* 07 数字で見るSHE・08 チーム：カード・ブロックが1つずつ下からすっと（本人 10/19） */ [data-motion] :is(.numbers__top, .team__wrap) .rv-on { opacity: 0; transform: translateY(40px); clip-path: none; transition-duration: .7s; transition-delay: calc(var(--i, 0) * 80ms); } [data-motion] :is(.numbers__top, .team__wrap) .rv-on.is-in { opacity: 1; transform: none; } /* 08 のタイトルは左からスッと（06 と同じ） */ [data-motion] .team__part--title.rv-on { transform: translateX(-40px); } /* ---------- FV（読み込みが終わったら）：B に決定（本人 10/19）。A・C でも同じ出方 写真は少し大きい状態から縮みながら出る／コピーは左からスッと（0.4秒遅れて） ---------- */ .fv__bg img, .fv__copy img { transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.2, .7, .2, 1); } [data-motion] .fv__copy img { transition-delay: .4s; } [data-motion]:not(.is-loaded) .fv__bg img { transform: scale(1.1); opacity: 0; } [data-motion]:not(.is-loaded) .fv__copy img { opacity: 0; transform: translateX(-50px); } /* モーダルは開き方も中も動かさない＝ボタンのホバーだけ（本人 10/20。10/19のA案は取りやめ） motion.js がモーダルの中に印を付けない */