@charset "UTF-8"; /* ========================================================================== WebCraft — motion.css モーション/インタラクション専用スタイル。 - :root の CSS 変数はデザイン担当（styles.css）が定義する。ここでは参照のみ。 参照は必ずフォールバック付き var(--wc-xxx, 既定値) で書く。 - アニメーションは transform / opacity のみ。 例外: アコーディオンの grid-template-rows（高さ表現の現実解）と 進捗線を SVG で組んだ場合の stroke-dashoffset のみ。 - 仕様の詳細は _design/motion-spec.md ========================================================================== */ /* -------------------------------------------------------------------------- 0. 共通 -------------------------------------------------------------------------- */ /* motion.js が実行されると が付く。 「JS が要素を隠す」系のスタイルはすべてこのクラス配下に置くか、 フェイルセーフ・アニメーションを併記して JS 不在でも本文が読めるようにする。 */ @keyframes wc-failsafe { to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 1. スクロール reveal -------------------------------------------------------------------------- */ [data-reveal], [data-stagger] > * { opacity: 0; transition-property: opacity, transform; transition-duration: 620ms; transition-timing-function: var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); /* JS が落ちた場合の保険: 2秒後に最終状態で固定する */ animation: wc-failsafe 0.01s linear 2s forwards; } html.wc-js [data-reveal], html.wc-js [data-stagger] > * { animation: none; } /* 既定（値なし）と up */ [data-reveal], [data-reveal=""], [data-reveal="up"], [data-stagger] > * { transform: translate3d(0, 20px, 0); } [data-reveal="fade"] { transform: none; transition-duration: 560ms; } [data-reveal="scale"] { transform: scale(0.965); transition-duration: 700ms; } /* 表示済み */ [data-reveal].is-visible, [data-stagger] > .is-visible { opacity: 1; transform: none; } /* 遅延（1 = 70ms） */ [data-reveal-delay="1"] { transition-delay: 70ms; } [data-reveal-delay="2"] { transition-delay: 140ms; } [data-reveal-delay="3"] { transition-delay: 210ms; } [data-reveal-delay="4"] { transition-delay: 280ms; } [data-reveal-delay="5"] { transition-delay: 350ms; } [data-reveal-delay="6"] { transition-delay: 420ms; } /* mask: JS が中身を .wc-mask-i で包み、親に .wc-mask を付ける。 transform だけで「下から帯状にせり上がる」を作る。 */ [data-reveal="mask"] { opacity: 1; transform: none; /* transition-delay は残す（内側の .wc-mask-i が inherit で受け取るため）。 ショートハンドの transition: none は使わないこと。 */ transition-property: none; } [data-reveal="mask"].wc-mask { display: block; overflow: hidden; /* ディセンダ（g, y など）が切れないよう下に逃がす */ padding-bottom: 0.14em; margin-bottom: -0.14em; } .wc-mask > .wc-mask-i { display: block; transform: translate3d(0, 110%, 0); transition: transform 760ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); transition-delay: inherit; } [data-reveal="mask"].is-visible > .wc-mask-i { transform: none; } /* -------------------------------------------------------------------------- 2. 3D チルト -------------------------------------------------------------------------- */ [data-tilt] { /* perspective は JS が transform: perspective(900px) ... で関数指定するため 親要素への perspective 指定は不要。 */ transform: perspective(900px) rotateX(0deg) rotateY(0deg); transition: transform 520ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); transform-style: preserve-3d; } [data-tilt].is-tilting { transition: transform 120ms linear; } /* 光沢。カード側に position: relative と border-radius が必要。 */ [data-tilt]::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 320ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); background: radial-gradient( 42% 42% at var(--wc-gx, 50%) var(--wc-gy, 0%), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 100% ); } [data-tilt].is-tilting::after { opacity: 0.55; } /* タッチ環境では 3D チルトも光沢も出さない */ @media (hover: none) { [data-tilt] { transform: none; transition: none; } [data-tilt]::after { display: none; } } /* -------------------------------------------------------------------------- 3. マグネティック -------------------------------------------------------------------------- */ [data-magnetic] { transition: transform 480ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } [data-magnetic].is-magnetic { transition: transform 180ms cubic-bezier(0.33, 1, 0.68, 1); } @media (hover: none) { [data-magnetic] { transform: none; } } /* -------------------------------------------------------------------------- 4. パララックス -------------------------------------------------------------------------- */ [data-parallax] { will-change: auto; } /* -------------------------------------------------------------------------- 5. ヒーロー Canvas -------------------------------------------------------------------------- */ /* 配置は :where() で詳細度 0 の「既定値」として置く。 styles.css 側で canvas の位置・大きさを指定していれば、必ずそちらが勝つ。 */ :where([data-hero-canvas]) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } [data-hero-canvas] { /* 上に乗るテキストの可読性を最優先 */ opacity: 0; pointer-events: none; transition: opacity 900ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } [data-hero-canvas].is-ready { opacity: 0.9; } /* getContext に失敗した / 描画中に例外が出た場合は完全に引っ込める */ [data-hero-canvas].is-canvas-failed { display: none; } /* HTML 側の静的代替ビジュアル。canvas が動いたら消える。 */ .hero-visual-fallback { opacity: 1; visibility: visible; transition: opacity 600ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s linear 600ms; } .is-canvas-ready .hero-visual-fallback { opacity: 0; visibility: hidden; } /* -------------------------------------------------------------------------- 6. ヘッダー -------------------------------------------------------------------------- */ /* いずれも :where() で詳細度 0。styles.css がヘッダーの見た目を定義していれば そちらが勝ち、定義が無い場合だけこの既定値が効く。 */ :where(header, .site-header, [data-header]) { transition: background-color 280ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 280ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), backdrop-filter 280ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } :where(header, .site-header, [data-header]).is-scrolled { background-color: color-mix(in srgb, var(--wc-bg, #fff) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: var(--wc-shadow-1, 0 1px 0 rgba(16, 24, 40, 0.08)); } /* 「縮む」表現（padding / height のアニメーション）は transform 以外を動かすため ここでは行わない。必要ならデザイン担当が .is-scrolled に対して指定すること。 */ /* -------------------------------------------------------------------------- 7. ハンバーガーメニュー -------------------------------------------------------------------------- */ .menu-toggle { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* span × 3 のバー構成なら transform だけで X 字に変形する */ .menu-toggle > span { display: block; transition: transform 240ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), opacity 160ms linear; transform-origin: center; } .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translate3d(0, 0.45em, 0) rotate(45deg); } .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; transform: scaleX(0.4); } .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translate3d(0, -0.45em, 0) rotate(-45deg); } /* パネル本体。位置・レイアウト・色は styles.css の担当。 ここは opacity / transform / visibility のみを扱う。 ★ 899px 以下でのみ「閉じる」状態を作る。デスクトップのナビを消さないため。 モバイルメニューの境界は 900px。JS 側の自動クローズ判定も 900px で揃えてある。 */ @media (max-width: 899px) { html.wc-js #header-menu { opacity: 0; visibility: hidden; transform: translate3d(0, -10px, 0); pointer-events: none; transition: opacity 320ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform 320ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), visibility 0s linear 320ms; } html.wc-js #header-menu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; } /* メニュー内リンクの軽いスタガー */ html.wc-js #header-menu a { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 260ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform 260ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } html.wc-js #header-menu.is-open a { opacity: 1; transform: none; } html.wc-js #header-menu.is-open a:nth-child(1) { transition-delay: 60ms; } html.wc-js #header-menu.is-open a:nth-child(2) { transition-delay: 100ms; } html.wc-js #header-menu.is-open a:nth-child(3) { transition-delay: 140ms; } html.wc-js #header-menu.is-open a:nth-child(4) { transition-delay: 180ms; } html.wc-js #header-menu.is-open a:nth-child(5) { transition-delay: 220ms; } html.wc-js #header-menu.is-open a:nth-child(6) { transition-delay: 260ms; } html.wc-js #header-menu.is-open a:nth-child(7) { transition-delay: 300ms; } html.wc-js #header-menu.is-open a:nth-child(n + 8) { transition-delay: 340ms; } } /* 背景スクロール固定（top は JS が inline で入れる） */ body.is-menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* -------------------------------------------------------------------------- 8. 固定 CTA -------------------------------------------------------------------------- */ html.wc-js .fixed-cta { transform: translate3d(0, 130%, 0); opacity: 0; pointer-events: none; transition: transform 360ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), opacity 240ms linear; } html.wc-js .fixed-cta.is-visible { transform: none; opacity: 1; pointer-events: auto; } /* -------------------------------------------------------------------------- 9. アコーディオン -------------------------------------------------------------------------- */ @keyframes wc-acc-failsafe { to { grid-template-rows: 1fr; } } [data-accordion-panel] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--wc-ease-inout, cubic-bezier(0.65, 0, 0.35, 1)); /* JS が落ちた場合、2秒後に全パネルを開いた状態で固定する */ animation: wc-acc-failsafe 0.01s linear 2s forwards; } html.wc-js [data-accordion-panel] { animation: none; } [data-accordion-panel] > .wc-acc-inner { overflow: hidden; min-height: 0; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 240ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform 320ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } [data-accordion-item].is-open > [data-accordion-panel], [data-accordion-item].is-open [data-accordion-panel] { grid-template-rows: 1fr; } [data-accordion-item].is-open [data-accordion-panel] > .wc-acc-inner { opacity: 1; transform: none; transition-delay: 60ms; } [data-accordion-trigger] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; } [data-accordion-trigger] .wc-acc-icon, [data-accordion-trigger] > svg { transition: transform 420ms var(--wc-ease-inout, cubic-bezier(0.65, 0, 0.35, 1)); } [data-accordion-item].is-open [data-accordion-trigger] .wc-acc-icon, [data-accordion-item].is-open [data-accordion-trigger] > svg { transform: rotate(180deg); } /* -------------------------------------------------------------------------- 10. タブ -------------------------------------------------------------------------- */ [data-tab] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform 200ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), color 200ms linear, background-color 200ms linear; } [data-tab]:active { transform: scale(0.98); } [data-tab-panel][hidden] { display: none; } html.wc-js [data-tab-panel] { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 400ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform 400ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)); } html.wc-js [data-tab-panel].is-active { opacity: 1; transform: none; } html.wc-js [data-tab-panel].is-leaving { opacity: 0; transform: translate3d(0, -6px, 0); transition-duration: 160ms; } /* 真のクロスフェード（任意）: パネルの共通の親に data-tabs-stack を付ける。 コンテナの高さは常に最も背の高いパネルになる。 JS がある時だけ重ね置きにする（JS 無しで2枚が重なって潰れるのを防ぐ）。 */ html.wc-js [data-tabs-stack] { display: grid; } html.wc-js [data-tabs-stack] > [data-tab-panel] { grid-area: 1 / 1; transition-duration: 420ms; } html.wc-js [data-tabs-stack] > [data-tab-panel].is-leaving { transition-duration: 260ms; pointer-events: none; } /* -------------------------------------------------------------------------- 11. 進捗線 -------------------------------------------------------------------------- */ [data-progress-line]:not(svg) { transform-origin: top center; transform: scaleY(var(--wc-progress, 0)); will-change: transform; } /* SVG 実装時の stroke-dashoffset は JS が毎フレーム直接書き換えるため、 transition は掛けない（二重補間による遅れ・ジッタを避ける）。 */ /* -------------------------------------------------------------------------- 12. 横スクロール（スマホ） -------------------------------------------------------------------------- */ [data-scroller] { --wc-fade-l: 0px; --wc-fade-r: 0px; scrollbar-width: none; -ms-overflow-style: none; } [data-scroller]::-webkit-scrollbar { display: none; } @media (max-width: 767px) { [data-scroller] { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient( to right, transparent 0, #000 var(--wc-fade-l), #000 calc(100% - var(--wc-fade-r)), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 var(--wc-fade-l), #000 calc(100% - var(--wc-fade-r)), transparent 100% ); } [data-scroller] > * { flex: 0 0 auto; scroll-snap-align: start; } /* 「まだ先がある」ことだけを示す。端に着いたらその側のフェードは消す。 */ [data-scroller].wc-scrollable { --wc-fade-l: 28px; --wc-fade-r: 28px; } [data-scroller].wc-scrollable.is-at-start { --wc-fade-l: 0px; } [data-scroller].wc-scrollable.is-at-end { --wc-fade-r: 0px; } } /* -------------------------------------------------------------------------- 13. タップフィードバック -------------------------------------------------------------------------- */ .btn, [data-tap], [data-magnetic] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .btn, [data-tap] { transition: transform 240ms var(--wc-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), background-color 200ms linear, color 200ms linear, border-color 200ms linear; } .btn:active, [data-tap]:active { transform: scale(0.97); transition-duration: 120ms; } /* ポインタ環境ではホバーで気持ち浮かせる（transform のみ） */ @media (hover: hover) and (pointer: fine) { .btn:hover { transform: translate3d(0, -1px, 0); } .btn:active { transform: scale(0.97); } } /* -------------------------------------------------------------------------- 14. prefers-reduced-motion: すべての動きを止め、最終状態で固定する -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-stagger] > *, [data-tilt], [data-magnetic], [data-parallax], [data-hero-canvas], [data-accordion-panel], [data-accordion-panel] > .wc-acc-inner, [data-accordion-trigger] .wc-acc-icon, [data-accordion-trigger] > svg, [data-tab], [data-tab-panel], [data-progress-line], [data-progress-line] path, [data-progress-line] line, [data-progress-line] polyline, [data-scroller], .wc-mask > .wc-mask-i, .btn, [data-tap], .fixed-cta, .hero-visual-fallback, .menu-toggle > span, header, .site-header, [data-header], #header-menu, #header-menu a { transition-duration: 0.01ms !important; transition-delay: 0ms !important; animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; } /* 要素は最終状態（表示済み）で固定 */ [data-reveal], [data-stagger] > *, .wc-mask > .wc-mask-i, html.wc-js #header-menu a { opacity: 1 !important; transform: none !important; } [data-tilt], [data-magnetic], [data-parallax] { transform: none !important; } [data-tilt]::after { display: none !important; } [data-progress-line]:not(svg) { --wc-progress: 1; } .btn:hover, .btn:active, [data-tap]:active, [data-tab]:active { transform: none !important; } [data-scroller] { scroll-behavior: auto !important; } /* Canvas は JS 側で1フレームだけ描画して停止する。フェードインもしない。 */ [data-hero-canvas] { opacity: 0; } [data-hero-canvas].is-ready { opacity: 0.9; } }