/* =====================================================================
   動きの部品（シスラボで作ったサイトの動きを、React なしで使えるようにしたもの）
   版：1.9（2026年11月）　元のサイト：InsightOne、FY2026下期経営説明会、段取りと予定変更、マネジメントは、面白い。、NowTech、
         確認する人が増えるほど、安心できる？、技術的に正しい。でも選ばれない、シスラボのコーポレートサイト

   入れ方（<head> の中。サイトの CSS の後ろに置く）
     <script>document.documentElement.classList.add('motion-js');setTimeout(function(){if(!window.MotionKit)document.documentElement.classList.remove('motion-js')},3000)</script>
     <link rel="stylesheet" href="/assets/css/motion-kit.css">
     <script src="/assets/js/motion-kit.js" defer></script>

   使い方：動かしたい要素に data-motion="種類" を付ける。種類は下の見出しのとおり。
   決まりごと
   ・時間や色を変えるときは、このファイルの :root の値を書き換える。ほかのファイルで上書きしない
   ・動きを減らす設定の端末では、すべて最初から表示し、動かさない
   ・JavaScript が動かないときも、すべて表示する（隠すのは html に motion-js がある時だけ）
   ・サイトの CSS でレイヤーの順番を決めるときは、motion-kit を部品より後ろに置く
       例）@layer reset, base, layout, components, motion-kit, pages;
   ===================================================================== */
@layer motion-kit {
  :root {
    /* 緩急 */
    --motion-ease-out: cubic-bezier(0, 0, 0.58, 1);         /* ふわっと表示・お問い合わせ・流れる文字が現れる */
    --motion-ease-rise: cubic-bezier(0.33, 1, 0.68, 1);     /* 幕・せり上がる文字（出だしが速く、静かに止まる） */
    --motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);   /* 線を描く・線が伸びる・開閉・入れ替わりをなめらかにする */
    --motion-ease-quick: cubic-bezier(0.25, 0.1, 0.35, 1);  /* 画面から出た線が消える・一覧の外枠が現れる */
    --motion-ease-pop: cubic-bezier(0.2, 0.76, 0.4, 1);     /* 浮かぶ図形が現れる */
    --motion-ease-hover: ease;                              /* 触れたとき */

    /* 時間 */
    --motion-time-quick: 0.3s;        /* 開閉・線が消える・一覧の外枠 */
    --motion-time-char: 0.6s;         /* 1文字が上がりきるまで */
    --motion-time-medium: 0.8s;       /* 幕・流れる文字が現れる */
    --motion-time-base: 1s;           /* ふわっと表示・線を描く */
    --motion-time-slow: 1.5s;         /* 線が伸びる */
    --motion-time-hold: 1.5s;         /* 幕：ロゴを見せておく時間 */
    --motion-time-fade: 0.2s;         /* 線：描き始めに濃くなるまで */
    --motion-time-smooth: 0.5s;       /* 入れ替わり：濃さの変化をなめらかにする */
    --motion-time-pop: 0.6s;          /* 浮かぶ図形が現れる */
    --motion-time-hover: 0.3s;        /* 触れたとき：矢印 */
    --motion-time-hover-quick: 0.2s;  /* 触れたとき：丸いボタン */
    --motion-time-loop: 70s;          /* 流れる文字：1周の時間 */
    --motion-time-loop-narrow: 50s;   /* 流れる文字：1周の時間（幅 768px 未満） */

    /* 間隔（順番に動かすときに、次が動き出すまでの時間） */
    --motion-stagger: 0.2s;
    --motion-stagger-char: 0.03s;

    /* 距離・大きさ */
    --motion-distance: 30px;          /* ふわっと表示：下からの距離 */
    --motion-rise-from: 110%;         /* せり上がる文字・幕：文字の高さに対する、隠れている位置 */
    --motion-nudge: 8px;              /* 触れたとき：矢印が右上へ動く距離 */
    --motion-grow-scale: 1.08;        /* 触れたとき：丸いボタンの大きさ */
    --motion-edge-width: 140px;       /* 横スクロール：右端のぼかしの幅 */
    --motion-float-perspective: 800px;/* 浮かぶ図形：奥行きの深さ */

    /* 色 */
    --motion-intro-bg: #f1f1f1;       /* 幕の色 */
    --motion-edge-color: #ffffff;     /* 横スクロール：右端のぼかしの色（背景の色に合わせる） */
    --motion-float-light: #ffffff;    /* 浮かぶ図形：明るい面 */
    --motion-float-shade: #cfd3da;    /* 浮かぶ図形：影の面 */

    /* ---- ここから：FY2026下期経営説明会のサイトの値 ---- */
    /* 緩急 */
    --motion-ease-bounce: cubic-bezier(0.3, 1.6, 0.5, 1);       /* ぽんと出る・跳ねる（少し行き過ぎて戻る） */
    --motion-ease-stamp: cubic-bezier(0.3, 1.5, 0.5, 1);        /* はんこが押される */
    --motion-ease-sheet: cubic-bezier(0.2, 0.8, 0.2, 1);        /* 下から出る説明 */
    --motion-ease-odometer: cubic-bezier(0.15, 0.85, 0.25, 1);  /* 数字が回って止まる */
    --motion-ease-zoom: cubic-bezier(0.3, 0, 0.2, 1);           /* オープニング：抜けるときに少し寄る */
    --motion-ease-copy: cubic-bezier(0.2, 0.7, 0.2, 1);         /* オープニング：文字が上がる */

    /* 時間 */
    --motion-time-bounce: 0.45s;          /* ぽんと出る */
    --motion-time-stamp: 0.35s;           /* はんこ */
    --motion-time-stamp-fade: 0.25s;      /* はんこ：濃くなるまで */
    --motion-time-press: 0.12s;           /* 押せるボタン：浮く・沈む */
    --motion-time-color: 0.25s;           /* 枠の色・ボタンの色が変わる */
    --motion-time-caption: 0.35s;         /* 場面の説明が入れ替わる */
    --motion-time-sheet: 0.35s;           /* 下から出る説明 */
    --motion-time-scrim: 0.3s;            /* 説明の後ろの幕 */
    --motion-time-odometer: 1.4s;         /* 数字が回って止まる */
    --motion-stagger-odometer: 0.14s;     /* 数字が回る：次の桁までの間隔 */
    --motion-time-flap: 0.1s;             /* パタパタ：1回めくる */
    --motion-time-flap-step: 58ms;        /* パタパタ：次の数字まで */
    --motion-time-count: 1.4s;            /* 数字が増える（画面に入ったら動くとき） */
    --motion-time-marker: 1s;             /* 蛍光ペン（data-motion-play）：線を引き終えるまで */
    --motion-time-flip: 0.6s;             /* 裏返るカード */
    --motion-time-deck: 0.6s;             /* 写真を重ねて切り替える */
    --motion-time-blink: 5.2s;            /* キャラクター：まばたきの周期 */
    --motion-time-toast: 0.25s;           /* お知らせ */
    --motion-time-opening-hold: 5s;       /* 写真のオープニング：見せておく時間 */
    --motion-time-opening-fade: 1s;       /* 写真のオープニング：消えるまで */
    --motion-time-opening-wait: 4s;       /* 写真のオープニング：画像を待つのはここまで */
    --motion-time-opening-image: 0.6s;    /* 写真のオープニング：写真が現れる */
    --motion-time-opening-copy: 1.2s;     /* 写真のオープニング：文字が上がる */
    --motion-time-opening-delay: 0.45s;   /* 写真のオープニング：文字が動き出すまで */

    /* 距離・大きさ */
    --motion-press-ledge: 3px;            /* 押せるボタン：下の影の厚み */
    --motion-press-lift: 2px;             /* 押せるボタン：浮く・沈む距離 */
    --motion-stamp-from: 1.8;             /* はんこ：押す前の大きさ */
    --motion-frame-corner: 18px;          /* 四隅の枠：角の長さ */
    --motion-frame-line: 2px;             /* 四隅の枠：線の太さ */
    --motion-ball-size: 24px;             /* キャラクターの大きさ */
    --motion-flip-depth: 1000px;          /* 裏返るカード：奥行き */
    --motion-deck-blur: 12px;             /* 写真の切り替え：ぼかし */
    --motion-deck-scale: 1.04;            /* 写真の切り替え：消える写真の大きさ */
    --motion-opening-zoom: 1.045;         /* 写真のオープニング：抜けるときの大きさ */
    --motion-scale-step: 128px;           /* 章のめもり：1章の幅 */

    /* 色 */
    --motion-accent: #ee5e1b;                         /* 枠が合ったとき・押されたボタン・紙吹雪の1色目 */
    --motion-marker-color: #ee5e1b;                   /* 蛍光ペン：線の色 */
    --motion-marker-top: 91%;                         /* 蛍光ペン：線の上の端（文字の下に細い線を引く。文字には重ねない） */
    --motion-marker-bottom: 100%;                     /* 蛍光ペン：線の下の端 */
    --motion-marker-gap: 3px;                         /* 蛍光ペン：文字と線の間 */
    --motion-frame-color: rgb(128 128 128 / 0.6);     /* 四隅の枠：合う前 */
    --motion-ink: #16191d;                            /* 背景の色が変わる：明るい背景の文字 */
    --motion-paper: #f1f2ef;                          /* 背景の色が変わる：暗い背景の文字 */
    --motion-ball-color: #f1f2ef;                     /* キャラクター */
    --motion-ball-line: rgb(10 13 16 / 0.9);          /* キャラクター：ふち */
    --motion-ball-eye: #15191c;                       /* キャラクター：目 */
    --motion-ball-me: #f2c4a0;                        /* キャラクター（自分）：はだの色 */
    --motion-ball-me-eye: #3a2a22;                    /* キャラクター（自分）：目 */
    --motion-ball-dark: #14123a;                      /* キャラクター（濃い色の自分。版 1.4） */
    --motion-ball-dark-eye: #ffffff;
    --motion-flap-top: #2c343d;                       /* パタパタ：板の上半分 */
    --motion-flap-bottom: #222930;                    /* パタパタ：板の下半分 */
    --motion-flap-ink: #f1f2ef;                       /* パタパタ：文字 */
    --motion-sheet-bg: #ffffff;                       /* 下から出る説明 */
    --motion-scrim-color: rgb(0 0 0 / 0.35);          /* 説明の後ろの幕 */
    --motion-opening-bg: #0a0c0f;                     /* 写真のオープニング：まわりの色 */
    --motion-toast-bg: rgb(15 19 24 / 0.92);          /* お知らせ */
    --motion-toast-ink: #f1f2ef;
    --motion-confetti-colors: #ee5e1b, #ffffff, #ffd60a, #6ee7df, #ff7aa8, #8fb4ff, #ffb380;  /* 紙吹雪（JavaScript が読む） */

    /* ---- ここから：段取りと予定変更のサイトの値（版 1.3）。地図は FY2026下期経営説明会の値 ---- */
    /* 緩急 */
    --motion-ease-spring: cubic-bezier(0.34, 1.45, 0.5, 1);   /* 吹き出し・お知らせ・チェック（少し行き過ぎて戻る） */
    --motion-ease-glide: cubic-bezier(0.22, 0.8, 0.24, 1);    /* カーソル・予定・タブ・目盛り・表示が動く */

    /* 時間 */
    --motion-time-type: 55ms;             /* 打たれる文字：1文字（英数字だけの文は 28ms） */
    --motion-time-type-latin: 28ms;
    --motion-time-caret: 1s;              /* 打たれる文字：カーソルの点滅 */
    --motion-time-chat-typing: 0.6s;      /* やりとり：入力中の点を見せる時間 */
    --motion-time-chat-read: 0.8s;        /* やりとり：既読が付くまで */
    --motion-time-chat-step: 0.4s;        /* やりとり：相手の吹き出しの後の間 */
    --motion-time-chat-step-me: 0.9s;     /* やりとり：自分の吹き出しの後の間 */
    --motion-time-chat-step-note: 0.7s;   /* やりとり：お知らせの後の間 */
    --motion-time-chat-step-date: 0.25s;  /* やりとり：日付の後の間 */
    --motion-time-chat-pop: 0.45s;        /* やりとり：吹き出しが出る */
    --motion-time-move: 0.9s;             /* 操作の再現：カーソル・予定が動く */
    --motion-time-show: 0.5s;             /* 操作の再現：部品が現れる・消える */
    --motion-time-ghost: 1s;              /* 操作の再現：前の位置の点線が消える */
    --motion-time-ghost-wait: 1.4s;       /* 操作の再現：点線を残しておく時間 */
    --motion-time-tab: 5.4s;              /* 自動で進むタブ：1つを見せる時間 */
    --motion-time-open: 0.45s;            /* タブの説明が開く */
    --motion-time-slide: 0.6s;            /* 目盛りが動く */
    --motion-time-count-step: 90ms;       /* 数字を1ずつ数え直す間隔 */
    --motion-time-check: 0.4s;            /* チェックが描かれる */
    --motion-time-ring: 0.8s;             /* 進み具合の輪 */
    --motion-time-assemble: 1.2s;         /* ばらばらの部品が集まる */
    --motion-time-assemble-fade: 0.8s;
    --motion-time-pulse: 2.4s;            /* 脈打つ点：1回 */
    --motion-time-alert: 1s;              /* 急ぎの枠が脈打つ：1回 */
    --motion-time-shine: 3.2s;            /* 光が走る：1回 */
    --motion-time-drift: 18s;             /* 背景の光：片道 */
    --motion-time-invite: 2.6s;           /* 押してほしい所が光る：1回 */
    --motion-stagger-invite: 0.3s;
    --motion-time-tilt: 1s;               /* 斜めの画面が、まっすぐになる */
    --motion-time-lift: 0.25s;            /* 触れると浮く・ずれる */
    --motion-time-bump: 0.35s;            /* 数字が弾む */
    --motion-time-answer: 0.45s;          /* 選ぶと答えが出る */
    --motion-time-map-leg: 3.2s;          /* 世界地図：1か所へ行く時間（画面を止めないとき） */

    /* 距離・大きさ */
    --motion-tilt-x: 2deg;                /* 斜めの画面：上下の傾き */
    --motion-tilt-y: -4deg;               /* 斜めの画面：左右の傾き */
    --motion-tilt-depth: 1600px;
    --motion-lift: 1px;                   /* 触れると浮く */
    --motion-slide: 3px;                  /* 触れると右へずれる */
    --motion-spotlight-size: 520px;       /* マウスの位置の光：大きさ */
    --motion-glow-blur: 60px;             /* 背景の光：ぼかし */
    --motion-glow-move: -40px 30px;       /* 背景の光：動く向き */
    --motion-chat-avatar: 30px;           /* やりとり：顔の丸 */
    --motion-chat-gap: 9px;
    --motion-cursor-size: 22px;           /* 操作の再現：カーソル */
    --motion-check-size: 26px;            /* チェックの四角 */
    --motion-check-radius: 8px;

    /* 色 */
    --motion-chat-bg: #e4ebe8;                        /* やりとり：地 */
    --motion-chat-me: #bdebc9;                        /* やりとり：自分の吹き出し */
    --motion-chat-other: #ffffff;                     /* やりとり：相手の吹き出し */
    --motion-chat-ink: #141917;
    --motion-chat-sub: #5f6966;                       /* やりとり：名前・時刻・既読・入力中の点 */
    --motion-chat-pill: rgb(255 255 255 / 0.75);      /* やりとり：日付・お知らせの地 */
    --motion-chat-on-avatar: #ffffff;
    --motion-on-accent: #ffffff;                      /* アクセント色の上の印（チェック） */
    --motion-ink-soft: rgb(20 25 23 / 0.45);          /* 操作の再現：前の位置の点線 */
    --motion-cursor-fill: #141917;                    /* 操作の再現：カーソル */
    --motion-cursor-line: #ffffff;
    --motion-spotlight-color: color-mix(in srgb, var(--motion-accent) 8%, transparent);
    --motion-pulse-ring: color-mix(in srgb, var(--motion-accent) 22%, transparent);
    --motion-alert-ring: rgb(188 76 66 / 0.15);
    --motion-shine-color: rgb(255 255 255 / 0.35);
    --motion-glow-1: #dceee6;                         /* 背景の光（3色） */
    --motion-glow-2: #f6dcd6;
    --motion-glow-3: #e3e9f5;
    --motion-glow-grid: rgb(20 25 23 / 0.07);         /* 背景の方眼 */
    --motion-invite-ring: color-mix(in srgb, var(--motion-accent) 14%, transparent);
    --motion-stuck-line: rgb(20 25 23 / 0.12);        /* スクロールしたときのヘッダーの線 */
    --motion-map-dot: rgb(223 227 230 / 0.28);        /* 地図：点 */
    --motion-map-lit: rgb(255 255 255 / 0.92);        /* 日本地図：色が広がった点 */
    --motion-map-hot: #2e8bff;                        /* 世界地図：着いた先の点・弧 */

    /* ---- ここから：マネジメントは、面白い。のサイトの値（版 1.4）。写真を止めて見せる部品は FY2026下期経営説明会の値 ---- */
    /* 緩急 */
    --motion-ease-step: cubic-bezier(0.2, 0.8, 0.2, 1);   /* 文を読み進める：横の線が伸びる・下線が走る */

    /* 時間 */
    --motion-time-step-in: 0.65s;         /* 図を止めて文を読み進める：図の部品が現れる */
    --motion-time-step-out: 0.36s;        /* 図を止めて文を読み進める：図の部品が消える（現れるときより速く） */
    --motion-time-step-bar: 0.45s;        /* 図を止めて文を読み進める：文の横の線が伸びる */
    --motion-time-step-mark: 0.5s;        /* 図を止めて文を読み進める：短い文に下線が走る */
    --motion-time-film: 3s;               /* 写真を止めて見せる：画面を止めないときの1枚の時間 */
    --motion-time-dots: 0.25s;            /* 章の点が大きくなる・塗られる */
    --motion-time-shake: 0.14s;           /* スクロールの勢い：揺れの1往復 */

    /* 距離・大きさ */
    --motion-lines-shift: 70%;            /* 見出しの行：寄ってくる前にずれている幅（行の幅に対する割合） */
    --motion-bubble-from: 0.82;           /* 吹き出し：ふくらむ前の大きさ */
    --motion-bubble-rise: 18px;           /* 吹き出し：ふくらむ前に下がっている距離 */
    --motion-film-width: min(56cqi, 520px);   /* 写真を止めて見せる：1枚の幅（並べる枠の幅に対する割合） */
    --motion-film-blur: 9px;              /* 写真を止めて見せる：真ん中以外の写真のぼかし（いちばん強いとき） */
    --motion-film-dim: 0.5;               /* 写真を止めて見せる：真ん中以外の写真の濃さ */
    --motion-steps-top: 0px;              /* 図を止めて文を読み進める：図を止める位置（上に固定のヘッダーがあるときは、その高さ） */
    --motion-step-bar: 5px;               /* 文の横の線の太さ */
    --motion-step-indent: 18px;           /* 文の横の線から、文までの幅 */
    --motion-step-mark: 0.6em;            /* 短い文の下線の太さ */
    --motion-dots-size: 7px;              /* 章の点 */
    --motion-dots-gap: 5px;
    --motion-dots-now: 1.7;               /* 今の章の点の大きさ（倍） */
    --motion-shake: 1.5px;                /* スクロールの勢い：揺れ幅（いちばん強いとき） */
    --motion-strain: 0.16;                /* スクロールの勢い：力を入れて縮む割合 */

    /* 色 */
    --motion-step-mark-color: rgb(255 255 255 / 0.82);   /* 短い文の下線 */
    --motion-step-figure-bg: #ffffff;     /* 止めておく図の地（文が下を通るので、ページの地と同じ色。背景の色が変わる部品があれば、その色になる） */

    /* ---- ここから：NowTech のサイトの値（版 1.5） ---- */
    /* 緩急 */
    --motion-ease-menu: cubic-bezier(0.2, 0.8, 0.2, 1);        /* カテゴリの一覧が開く・上の帯と下の帯・写真が現れる・絞り込み */
    --motion-ease-phrases: cubic-bezier(0.22, 0.78, 0.24, 1);  /* 文節ごとに浮かぶ */
    --motion-ease-pop-out: cubic-bezier(0.15, 0.7, 0.3, 1);    /* まわりへ飛ぶ紙吹雪 */
    --motion-ease-badge: cubic-bezier(0.3, 1.6, 0.5, 1);       /* 記念日の札（大きく行き過ぎて戻る） */

    /* 時間 */
    --motion-time-menu: 0.24s;            /* カテゴリの一覧が下りてくる・印が回る */
    --motion-time-menu-fade: 0.2s;        /* カテゴリの一覧が濃くなる */
    --motion-time-menu-leave: 150ms;      /* マウスを外してから、一覧を閉じるまで */
    --motion-time-menu-stack: 0.26s;      /* 縦に並べたメニューが開く */
    --motion-time-filter: 0.3s;           /* 絞り込み：合わないものが薄くなる・列の色 */
    --motion-time-filter-in: 0.45s;       /* 絞り込み：一覧が入れ替わって、現れ直す */
    --motion-stagger-filter: 0.05s;       /* 絞り込み：現れ直す間隔 */
    --motion-time-dock: 0.32s;            /* 上の帯・下の帯が出入りする */
    --motion-time-phrases-float: 70ms;    /* 文節ごとに浮かぶ：次の文節が動き出すまで（狭い画面は 50ms） */
    --motion-time-phrases-rise: 130ms;    /* 、。のまとまりごと（狭い画面は 90ms） */
    --motion-time-phrases-seq: 160ms;     /* 部分ごと（狭い画面は 110ms） */
    --motion-time-phrases-tint: 650ms;    /* 色が変わる言葉ごと */
    --motion-time-phrases-cap: 620ms;     /* 長い見出しでも、最後のまとまりがこの時間のうちに動き出す */
    --motion-time-phrases-move: 0.95s;    /* 文節が浮かぶ（濃くなるのは 0.7s、ピントが合うのは 0.75s） */
    --motion-time-phrases-fade: 0.7s;
    --motion-time-phrases-focus: 0.75s;
    --motion-time-phrases-rise-move: 0.7s;    /* 、。のまとまり・部分が上がる（濃くなるのは 0.5s） */
    --motion-time-phrases-rise-fade: 0.5s;
    --motion-time-phrases-color: 1.3s;    /* 言葉の色が変わる */
    --motion-time-phrases-fast: 0.3s;     /* 速くスクロールしてきたときは、短く動かす */
    --motion-time-gantt: 0.18s;           /* 予定表の棒（スクロールの段差をならす） */
    --motion-time-gantt-label: 0.25s;     /* 予定表の行の名前が濃くなる */
    --motion-time-thanks-wait: 200ms;     /* お礼：いちばん下に着いてから、もうひと押しを受け付けるまで */
    --motion-time-thanks-open: 0.9s;      /* お礼の行が広がる */
    --motion-time-thanks-fade: 0.8s;      /* お礼の文が濃くなる（0.25s 待ってから） */
    --motion-time-thanks-line: 1s;        /* お礼の上の線が伸びる（0.5s 待ってから） */
    --motion-time-moment: 1.2s;           /* 夜の言葉が現れる */
    --motion-time-badge: 0.7s;            /* 記念日の札が出る（0.5s 待ってから） */
    --motion-time-pop-out: 1.3s;          /* まわりへ飛ぶ紙吹雪 */
    --motion-time-pop-again: 1800ms;      /* マウスを重ねて、もう一度飛ばせるまで */
    --motion-time-wiggle: 1s;             /* 記念日のロゴが揺れる */
    --motion-time-photo: 1s;              /* 写真が現れる */
    --motion-time-photo-zoom: 1.4s;       /* 中の写真が、少し寄った大きさから戻る */
    --motion-time-photo-wait: 6000ms;     /* 写真が届くのを待つ、いちばん長い時間 */
    --motion-time-same: 0.2s;             /* 同じものが点く */
    --motion-time-flap-again: 2500ms;     /* パタパタ：マウスを重ねて、もう一度めくれるまで */
    --motion-time-chat-read-base: 1200ms; /* やりとり（pace="read"）：吹き出しの後の間。これに1文字ごとの間を足す */
    --motion-time-chat-read-char: 20ms;
    --motion-time-chat-read-max: 3000ms;  /* やりとり（pace="read"）：いちばん長い間 */
    --motion-time-dots-dot: 0.25s;        /* 横に動かせる一覧の点が伸びる */

    /* 距離・大きさ */
    --motion-menu-gap: 6px;               /* カテゴリと一覧の間 */
    --motion-menu-rise: 6px;              /* 一覧が上から下りてくる距離 */
    --motion-menu-width: 232px;           /* 一覧のいちばん狭い幅 */
    --motion-menu-mark: 9px;              /* 印（下に開くときは「⌄」、縦に並べたときは「＋・－」） */
    --motion-filter-dim: 0.32;            /* 絞り込み：合わないものの濃さ */
    --motion-filter-rise: 8px;            /* 絞り込み：現れ直す距離 */
    --motion-filter-required: 0;          /* 絞り込み：1 で、いつも1つを選び、合わないものを隠す（狭い画面は 1） */
    --motion-phrases-rise: 0.42em;        /* 文節が浮かぶ距離（、。のまとまりは 0.34em、部分は 8px） */
    --motion-phrases-rise-clause: 0.34em;
    --motion-phrases-rise-part: 8px;
    --motion-phrases-tilt: 1.2deg;        /* 文節が浮かぶ前の傾き */
    --motion-phrases-blur: 4px;           /* 文節が浮かぶ前のぼかし */
    --motion-frames-pan-height: 56svh;    /* 連番の画像：狭い画面で横に動かすときの高さ（motion-frames--pan） */
    --motion-gantt-bar: 30px;             /* 予定表の棒の太さ */
    --motion-gantt-wait: 0.45;            /* 予定表：まだ始まっていない行の名前の濃さ */
    --motion-thanks-height: 260px;        /* お礼の行が広がる、いちばん大きな高さ */
    --motion-thanks-line: 56px;           /* お礼の上の線の長さ */
    --motion-photo-rise: 18px;            /* 写真が現れる距離 */
    --motion-photo-zoom: 1.06;            /* 中の写真が、寄ってくる前の大きさ */
    --motion-dots-dot: 8px;               /* 横に動かせる一覧の点（今の点は伸びる） */
    --motion-dots-dot-now: 22px;
    --motion-chat-follow: 260px;          /* やりとり：これより上へ戻って読んでいたら、下へ送らない（枠の高さの半分の方が小さいときは、そちら） */

    /* 色 */
    --motion-menu-bg: #0c2932;            /* カテゴリの一覧 */
    --motion-menu-line: rgb(217 244 242 / 0.2);
    --motion-menu-ink: #f1f7f5;
    --motion-menu-hover: #b8f59b;         /* 一覧のリンクに触れたとき・キーボードで選んだとき */
    --motion-menu-shadow: 0 22px 44px -22px rgb(0 0 0 / 0.8);
    --motion-filter-hl: rgb(184 245 155 / 0.12);  /* 絞り込み：選んだ入口の列（.is-key） */
    --motion-dock-bg: rgb(8 44 57 / 0.84);   /* 上の帯・下の帯（後ろをぼかして透かす） */
    --motion-dock-blur: 14px;
    --motion-phrases-key: #1f9e6e;        /* 色が変わる言葉 */
    --motion-gantt-track: rgb(31 158 110 / 0.16);  /* 予定表の棒の地 */
    --motion-gantt-fill: #1f9e6e;         /* 予定表の棒（行ごとに style="--gantt-color: …" でも変えられる） */
    --motion-thanks-color: #b8f59b;       /* お礼の上の線 */
    --motion-same-bg: rgb(184 245 155 / 0.16);   /* 同じものが点く */
    --motion-same-line: #b8f59b;
    --motion-dots-color: currentColor;    /* 横に動かせる一覧の点 */
    --motion-chat-result: #1f9e6e;        /* やりとり：その段階で分かること（左の線） */
    /* ---- ここから：確認する人が増えるほど、安心できる？ のサイトの値（版 1.6） ---- */
    --motion-ease-ink: cubic-bezier(0.22, 1, 0.36, 1);          /* 手書きの文字・つまみの伸び縮み（すっと止まる） */
    --motion-ease-pop-soft: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 写真の吹き出し・レンズ・つまみ・押した場所から開く（少し行き過ぎて戻る） */
    /* 手書きの字体。字体のファイルは自社のサーバーに置いて @font-face で読む（ない端末では、後ろの字体で表示する） */
    --motion-font-hand: "Zen Kurenaido", "Klee One", "Klee", "UD Digi Kyokasho NK-R", "UD デジタル 教科書体 NK-R", "Hiragino Maru Gothic ProN", "Yu Gothic", cursive;
    --motion-font-hand-en: "Caveat", "Segoe Print", "Bradley Hand", "Noteworthy", "Zen Kurenaido", cursive;
    --motion-hand-ink: #2453c2;            /* 手書きの文字：ペンの色 */
    --motion-time-hand: 0.5s;              /* 手書きの文字：1文字が書かれる時間 */
    --motion-time-hand-char: 45ms;         /* 手書きの文字：次の文字までの間隔 */
    --motion-time-talk: 0.7s;              /* 写真の吹き出し：ふくらむ時間 */
    --motion-time-talk-step: 0.26s;        /* 写真の吹き出し：次の吹き出しまでの間隔 */
    --motion-time-talk-first: 0.15s;       /* 写真の吹き出し：最初の吹き出しまでの待ち */
    --motion-time-breathe: 18s;            /* 写真がゆっくり呼吸する（寄って戻る1回の時間） */
    --motion-talk-max: min(23em, 64%);     /* 写真の吹き出し：いちばん広い幅 */
    --motion-talk-radius: 18px;
    --motion-talk-tail: 5px;               /* 写真の吹き出し：根元の角だけ丸みを小さくする */
    --motion-talk-bg: linear-gradient(160deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.72));
    --motion-talk-think-bg: linear-gradient(160deg, rgb(255 255 255 / 0.88), rgb(240 248 255 / 0.7));
    --motion-talk-ink: #0f2638;
    --motion-talk-think-ink: #3f5766;
    --motion-talk-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 10px 24px -10px rgb(10 50 90 / 0.45);
    --motion-talk-dot: rgb(255 255 255 / 0.85);    /* 考えている吹き出し：小さな丸 */
    --motion-talk-ok: #10a285;             /* 写真の吹き出し：チェックの丸 */
    /* すりガラス：後ろをぼかして色を濃くする量・縁の光・マウスの位置に映る光 */
    --motion-glass-blur: 22px;
    --motion-glass-saturate: 185%;
    --motion-glass-rim: 1.3px;
    --motion-glass-fill: linear-gradient(155deg, rgb(255 255 255 / 0.66), rgb(255 255 255 / 0.3) 52%, rgb(255 255 255 / 0.46));
    --motion-glass-rim-color: linear-gradient(135deg, #ffffff, rgb(255 255 255 / 0.15) 38%, rgb(150 205 255 / 0.15) 62%, rgb(255 255 255 / 0.85));
    --motion-glass-edge: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 -1px 1px rgb(255 255 255 / 0.35), inset 0 0 0 1px rgb(255 255 255 / 0.5);
    --motion-glass-shadow: 0 22px 60px -18px rgb(18 78 130 / 0.28), 0 2px 8px rgb(18 78 130 / 0.06);
    --motion-glass-sheen: rgb(255 255 255 / 0.75);
    --motion-glass-sheen-size: 260px;
    --motion-glass-solid: rgb(255 255 255 / 0.92);    /* すりガラス：ぼかしが使えない・透明を減らす設定の端末の地 */
    --motion-glass-dark-fill: linear-gradient(155deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.06) 55%, rgb(255 255 255 / 0.12));
    --motion-glass-dark-rim: linear-gradient(135deg, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.06) 40%, rgb(255 255 255 / 0.4));
    --motion-glass-dark-edge: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 0 0 1px rgb(255 255 255 / 0.14);
    --motion-glass-dark-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45);
    --motion-glass-dark-sheen: rgb(255 255 255 / 0.22);
    --motion-glass-dark-ink: #eaf4fb;
    --motion-glass-dark-solid: rgb(16 40 62 / 0.94);
    --motion-glass-warn-fill: linear-gradient(155deg, rgb(255 226 226 / 0.84), rgb(255 241 239 / 0.55) 50%, rgb(255 220 225 / 0.72));
    --motion-glass-warn-rim: linear-gradient(135deg, #ffffff, rgb(255 255 255 / 0.15) 38%, rgb(255 180 185 / 0.25) 62%, rgb(255 255 255 / 0.85));
    --motion-glass-warn-shadow: 0 26px 60px -26px rgb(200 60 70 / 0.38);
    --motion-glass-warn-solid: #fde8e8;
    --motion-glass-good-fill: linear-gradient(155deg, rgb(222 247 238 / 0.82), rgb(241 251 247 / 0.52) 50%, rgb(212 242 232 / 0.68));
    --motion-glass-good-rim: linear-gradient(135deg, #ffffff, rgb(255 255 255 / 0.15) 38%, rgb(150 225 200 / 0.25) 62%, rgb(255 255 255 / 0.85));
    --motion-glass-good-shadow: 0 26px 60px -26px rgb(16 140 110 / 0.26);
    --motion-glass-good-solid: #e3f6ef;
    --motion-glass-drop: radial-gradient(circle at 32% 28%, #ffffff 0 12%, rgb(255 255 255 / 0.4) 26%, rgb(160 215 255 / 0.35) 60%, rgb(120 190 245 / 0.55) 100%);
    --motion-glass-drop-shadow: inset 0 -8px 18px rgb(27 116 211 / 0.25), inset 0 4px 10px rgb(255 255 255 / 0.9), 0 14px 30px -12px rgb(27 116 211 / 0.5);
    --motion-time-wobble: 9s;              /* しずくの形がゆらぐ1回の時間 */
    /* レンズ */
    --motion-lens-color: #1b74d3;          /* レンズの縁と札（ボタンごとに style="--lens-color: …" で変える） */
    --motion-lens-on: #ffffff;             /* レンズの札の文字 */
    --motion-lens-fill: linear-gradient(160deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.05));
    --motion-lens-radius: 22px;
    --motion-time-lens: 0.7s;
    --motion-time-label: 0.45s;            /* 場面の札が替わる */
    /* やりとりの書き足し */
    --motion-chat-head-bg: rgb(255 255 255 / 0.55);
    --motion-chat-head-line: rgb(15 38 56 / 0.08);
    --motion-chat-count-bg: rgb(27 116 211 / 0.1);
    --motion-chat-count-ink: #0c4785;
    --motion-chat-replay-bg: rgb(255 255 255 / 0.7);
    --motion-chat-badge-bg: #ffffff;
    --motion-chat-me-gloss: linear-gradient(160deg, #9be8c9, #6fd8b3);   /* 光沢のある形：自分の吹き出し */
    --motion-chat-me-gloss-ink: #073a2e;
    --motion-chat-warn-bg: #fff1d9;
    --motion-chat-warn-ink: #7a4405;
    --motion-chat-warn-line: rgb(221 132 22 / 0.4);
    --motion-chat-good-bg: rgb(16 162 133 / 0.14);
    --motion-chat-good-ink: #08624f;
    /* 押した場所から開く */
    --motion-sheet-pop-width: 720px;
    --motion-sheet-pop-radius: 28px;
    --motion-sheet-pop-from: 0.55;        /* 開き始めの大きさ */
    --motion-sheet-pop-shadow: 0 30px 80px -20px rgb(10 30 50 / 0.45);
    --motion-time-sheet-pop: 0.6s;
    --motion-time-sheet-pop-out: 0.26s;
    --motion-scrim-blur: 8px;
    /* つまみ（言語の切り替えと、押した所へ滑る切り替えで同じ見た目） */
    --motion-lang-knob-inset: 3px;        /* 言語の切り替え：ボタンの上下とのあき */
    --motion-knob-radius: 999px;
    --motion-knob-bg: linear-gradient(160deg, #ffffff, rgb(255 255 255 / 0.78));
    --motion-knob-shadow: 0 4px 14px rgb(18 78 130 / 0.18), inset 0 0 0 1px rgb(255 255 255 / 0.9);
    --motion-time-knob: 0.55s;
    /* アイコンの小さな動き */
    --motion-time-icon-blink: 3.6s;
    --motion-time-icon-sweep: 3s;
    --motion-time-icon-press: 2.8s;
    /* ---- ここから：技術的に正しい。でも選ばれない のサイトの値（版 1.7） ---- */
    /* 押した所へ、つまみが滑る切り替え（見た目は、言語の切り替えのつまみと同じ値を使う） */
    --motion-time-seg: 0.5s;
    --motion-seg-squish-a: 1.1;           /* 動く向きに伸びる */
    --motion-seg-squish-b: 0.9;
    --motion-seg-rebound-a: 0.98;         /* 少し戻って止まる */
    --motion-seg-rebound-b: 1.03;
    /* 虫めがね */
    --motion-magnify-size: 180px;         /* レンズの直径（幅 767px まではスマホの値） */
    --motion-magnify-color: #1f74f0;      /* レンズの中で、選んだ所の線（箱に style="--magnify-color: …" で変える） */
    --motion-magnify-lit-width: 2;
    --motion-magnify-note-width: 250px;   /* レンズの横に出る札の幅（箱の幅の46%まで） */
    --motion-magnify-shadow: 0 22px 44px -14px rgb(16 40 70 / 0.42), 0 0 0 1px rgb(255 255 255 / 0.75), inset 0 0 0 1.5px rgb(140 185 255 / 0.45);
    --motion-magnify-shine: radial-gradient(ellipse 60% 42% at 32% 20%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0) 60%), radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0) 58%, rgb(255 255 255 / 0.55) 72%, rgb(200 225 255 / 0.35) 86%, rgb(255 255 255 / 0.75) 100%);
    --motion-magnify-inner: inset 0 -14px 26px rgb(31 116 240 / 0.14), inset 0 10px 18px rgb(255 255 255 / 0.5);
    --motion-time-magnify: 1.25s;         /* レンズが次の所へ移る */
    --motion-time-magnify-note: 0.35s;    /* 札の言葉が入れ替わる */
    /* はみ出した所（グラフと予定表で同じ動き） */
    --motion-over-color: #e0525c;         /* 箱に style="--over-color: …" で変える */
    --motion-over-dim: 0.55;              /* 点滅で、いちばん薄くなるとき */
    --motion-time-over-in: 0.4s;
    --motion-time-over-pulse: 1.6s;
    /* グラフを、順に組み立てる */
    --motion-chart-step: 0.12s;           /* 棒や線を、書いた順にずらす間 */
    --motion-chart-wait: 0.4s;            /* 組み立て → 越えた所 → ひとこと の間 */
    --motion-chart-drop: 46px;            /* 上から落ちてくる距離 */
    --motion-chart-mark-pulse: 1.18;
    --motion-time-chart-bar: 0.7s;
    --motion-time-chart-line: 1.8s;
    --motion-time-chart-note: 0.6s;
    --motion-time-chart-mark: 0.5s;
    --motion-time-chart-mark-pulse: 1.8s;
    /* 予定表：順に伸びる・動かせない日 */
    --motion-gantt-step: 0.32s;
    --motion-time-gantt-wait: 0.4s;      /* 全部伸びてから、越えた所を出すまで */
    --motion-time-gantt-grow: 0.7s;
    --motion-gantt-due-space: 40px;       /* 鍵の札を置く、表の上のあき */
    --motion-gantt-due-line: #0f2638;     /* 動かせない日の線と鍵の地（箱に style="--due-color: …" で変える） */
    --motion-gantt-lock: 22px;
    --motion-gantt-lock-ink: #ffffff;
    /* 下から出る説明：つまみ・下のボタン */
    --motion-sheet-grab: rgb(15 38 56 / 0.22);
    --motion-sheet-grab-width: 44px;
    --motion-sheet-drag-close: 110px;     /* これより下へ引いたら閉じる */
    /* アイコンの小さな動き */
    --motion-time-icon-bob: 2.6s;
    --motion-time-icon-beat: 2.4s;
    --motion-time-icon-rise: 2.8s;
    --motion-time-icon-tilt: 3s;
    /* ---- ここから：コーポレートサイトの値（版 1.9） ---- */
    /* 色が左から満ちて、矢印が進むボタン（ボタンに style="--sweep-fill: …" などで変える） */
    --motion-time-sweep: 0.35s;
    --motion-ease-sweep: cubic-bezier(0.2, 0.7, 0.2, 1);
    --motion-sweep-fill: linear-gradient(to right, #d9332c, #f0544d 70%);
    --motion-sweep-line: #f0544d;         /* 枠 */
    --motion-sweep-dot: #f0544d;          /* 丸い矢印の地（重ねると、矢印の色になる） */
    --motion-sweep-shadow: 0 10px 24px rgb(240 84 77 / 0.28);
    --motion-sweep-bg: #ffffff;
    --motion-sweep-text: #4b5057;
    --motion-sweep-text-on: #ffffff;
    --motion-sweep-arrow-ink: #ffffff;
    --motion-sweep-mark: 24px;
    --motion-sweep-pad-y: 1.25em;
    --motion-sweep-lift: -2px;
    --motion-sweep-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* 矢印の丸が1回転する・写真が少し寄る */
    --motion-time-spin: 0.6s;
    --motion-zoom: 1.04;
    --motion-time-zoom: 0.8s;
    --motion-ease-hover-zoom: cubic-bezier(0.2, 0.7, 0.2, 1);
    /* タブを、スクロールで切り替える */
    --motion-tabs-step: 0.3;              /* 1つ切り替えるのに、画面の高さのこの割合だけスクロールする */
    --motion-tabs-gap: 24px;              /* 横に並べたときの間 */
    /* 長い題を収める：「…」の濃さ */
    --motion-fit-more: 0.4;
    /* 横に続きがあると、端を薄くする幅（枠に style="--edge-fade: …" で変える） */
    --motion-edge-fade: 40px;
    /* 押すと、下の階層が横に開く図 */
    --motion-time-branch: 0.45s;
    --motion-ease-branch: cubic-bezier(0.2, 0.7, 0.2, 1);
    --motion-branch-step: 0.05s;          /* 行を順に出す間 */
    --motion-branch-gap: 32px;            /* 押した所と、開いた箱の間（つなぐ線の長さ） */
    --motion-branch-line: #eeb6b0;
    --motion-branch-line-top: 28px;       /* つなぐ線の高さ（箱の上から） */
    --motion-branch-line-width: 2px;
    --motion-branch-pm: 10px;             /* ＋・－の印 */
    --motion-time-branch-pm: 0.26s;
    /* 写真を見せてから、言葉を読ませる */
    --motion-blur-bg-blur: 20px;
    --motion-blur-bg-veil: linear-gradient(rgb(15 25 40 / 0.68), rgb(15 25 40 / 0.35) 60%);
    --motion-time-blur-bg: 0.3s;
    /* 章が、角を丸めて前の章に重なる */
    --motion-overlap: 100px;
    --motion-overlap-radius: 100px;
  }
  @media (max-width: 767px) {
    :root {
      --motion-film-width: min(86cqi, 420px);
      --motion-filter-required: 1;
      --motion-time-phrases-float: 50ms;
      --motion-time-phrases-rise: 90ms;
      --motion-time-phrases-seq: 110ms;
      --motion-talk-max: min(14em, 62%);
      --motion-magnify-size: 112px;
      --motion-blur-bg-blur: 15px;
      --motion-overlap-radius: 40px;
    }
  }

  /* 読み上げと検索のために元の文章を残す（画面には出さない） */
  .motion-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ---------------------------------------------------------------
     幕が上がるオープニング（data-motion="intro"）
     --------------------------------------------------------------- */
  .motion-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--motion-intro-bg);
    transition: translate var(--motion-time-medium) var(--motion-ease-rise);
  }
  .motion-intro--contained {
    position: absolute;
    z-index: 1;
  }
  .motion-intro__mask {
    display: flex;
    justify-content: center;
    overflow: hidden;
  }
  .motion-intro__item {
    display: block;
    transition: translate var(--motion-time-medium) var(--motion-ease-rise);
  }
  .motion-intro.is-out {
    translate: 0 -100%;
  }
  .motion-intro.is-done,
  html:not(.motion-js) .motion-intro {
    display: none;
  }

  /* ---------------------------------------------------------------
     1文字ずつせり上がる文字（data-motion="chars"）
     改行は、句読点の後ろと <wbr> の位置だけで起こる
     --------------------------------------------------------------- */
  .motion-chars__phrase {
    display: inline-block;
    white-space: nowrap;
  }
  .motion-chars__mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }
  .motion-chars__char {
    display: inline-block;
    white-space: pre;
  }
  .motion-chars__char::before {
    content: attr(data-char);
  }

  /* ---------------------------------------------------------------
     横に流れ続ける文字（data-motion="marquee"）
     --------------------------------------------------------------- */
  .motion-marquee {
    display: flex;
    overflow: hidden;
  }
  .motion-marquee__track {
    display: flex;
    flex-shrink: 0;
  }
  @keyframes motion-marquee {
    from { translate: 0 0; }
    to { translate: -100% 0; }
  }

  /* ---------------------------------------------------------------
     スクロールで入れ替わる（data-motion="scrub"）
     --------------------------------------------------------------- */
  .motion-scrub__stage {
    position: sticky;
    top: 0;
  }
  [data-motion-scrub-smooth] {
    transition: opacity var(--motion-time-smooth) var(--motion-ease-in-out);
  }

  /* ---------------------------------------------------------------
     開閉する質問（data-motion="accordion"）
     --------------------------------------------------------------- */
  .motion-accordion__item > summary {
    cursor: pointer;
    list-style: none;
  }
  .motion-accordion__item > summary::-webkit-details-marker {
    display: none;
  }
  .motion-accordion__icon::before {
    content: "＋";
  }
  .motion-accordion__item[open]:not(.is-closing) .motion-accordion__icon::before {
    content: "－";
  }

  /* ---------------------------------------------------------------
     横スクロールの一覧・カード送り（data-motion="hscroll"）
     --------------------------------------------------------------- */
  .motion-hscroll {
    position: relative;
  }
  .motion-hscroll__viewport {
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .motion-hscroll__viewport::-webkit-scrollbar {
    display: none;
  }
  .motion-hscroll__viewport img {
    -webkit-user-drag: none;
    user-select: none;
  }
  .motion-hscroll::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--motion-edge-width);
    background: linear-gradient(to right, transparent, var(--motion-edge-color));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-time-quick) var(--motion-ease-hover);
  }
  .motion-hscroll.has-more::after {
    opacity: 1;
  }
  .motion-hscroll--snap::after {
    content: none;
  }
  .motion-hscroll--snap .motion-hscroll__viewport {
    scroll-snap-type: x mandatory;
  }
  .motion-hscroll--snap .motion-hscroll__item {
    scroll-snap-align: center;
  }
  @media (pointer: fine) {
    .motion-js .motion-hscroll__viewport {
      cursor: grab;
    }
  }
  /* つかんで動かしている間（スナップも止める） */
  .motion-hscroll__viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
  }
  .motion-hscroll__button[hidden],
  html:not(.motion-js) .motion-hscroll__button {
    display: none;
  }
  .motion-hscroll__button:disabled {
    cursor: default;
  }

  /* ---------------------------------------------------------------
     浮かぶ図形（data-motion="float"）
     --------------------------------------------------------------- */
  .motion-float {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .motion-float--contained {
    position: absolute;
  }
  /* ページの区切りの中に置く（区切りが画面にあるあいだ、画面に止まって見える。後ろの中身は上に重なる） */
  .motion-float--sticky {
    position: sticky;
    inset: auto;
    top: 0;
    height: 100vh;
    height: 100svh;
    margin-bottom: -100vh;
    margin-bottom: -100svh;
  }
  .motion-float__track {
    position: absolute;
    inset: 0;
  }
  .motion-float__item {
    position: absolute;
    left: var(--float-x, 0);
    top: var(--float-y, 0);
    width: var(--float-size, 200px);
    aspect-ratio: 1;
    perspective: var(--motion-float-perspective);
  }
  .motion-float__shape {
    display: block;
    width: 100%;
    height: 100%;
  }
  .motion-float__shape--ring {
    border-radius: 50%;
    background:
      radial-gradient(closest-side, transparent 50%, var(--motion-float-shade) 52%, var(--motion-float-light) 66%, var(--motion-float-light) 74%, var(--motion-float-shade) 96%, transparent 98%);
  }
  .motion-float__shape--ball {
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, var(--motion-float-light) 0 18%, var(--motion-float-shade) 100%);
  }
  .motion-float__shape--gem {
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background:
      linear-gradient(150deg, var(--motion-float-light) 0 48%, transparent 48%),
      linear-gradient(30deg, var(--motion-float-shade), var(--motion-float-light));
  }

  /* ---------------------------------------------------------------
     触れたときの動き（data-motion="hover-nudge" / "hover-grow"）
     --------------------------------------------------------------- */
  [data-motion~="hover-nudge"] [data-motion-nudge] {
    transition: translate var(--motion-time-hover) var(--motion-ease-hover);
  }
  [data-motion~="hover-grow"] {
    transition: scale var(--motion-time-hover-quick) var(--motion-ease-hover);
  }

  /* ---------------------------------------------------------------
     動く前の状態と、動いた後の状態（動きを減らす設定の端末では使わない）
     --------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    /* 幕 */
    .motion-js .motion-intro__item {
      translate: 0 var(--motion-rise-from);
    }
    .motion-js .motion-intro.is-in .motion-intro__item {
      translate: 0 0;
    }

    /* 1文字ずつ */
    .motion-js [data-motion~="chars"] .motion-chars__char {
      translate: 0 var(--m-from, var(--motion-rise-from));
      transition: translate var(--m-duration, var(--motion-time-char)) var(--motion-ease-rise)
        calc(var(--m-delay, 0s) + var(--m-index, 0) * var(--m-stagger, var(--motion-stagger-char)));
    }
    .motion-js [data-motion~="chars"].is-inview .motion-chars__char {
      translate: 0 0;
    }
    .motion-js [data-motion~="chars"]:not(.is-inview) .motion-chars__char {
      transition-delay: 0s;
    }

    /* 流れる文字 */
    .motion-js .motion-marquee__track {
      animation: motion-marquee var(--m-loop, var(--motion-time-loop)) linear infinite;
    }
    .motion-js .motion-marquee.is-paused .motion-marquee__track {
      animation-play-state: paused;
    }

    /* ふわっと表示（1つ・順番に・出入りのたびに） */
    .motion-js [data-motion~="fade-up"],
    .motion-js [data-motion~="stagger"] > * {
      opacity: 0;
      translate: 0 var(--m-distance, var(--motion-distance));
      transition-property: opacity, translate;
      transition-duration: var(--m-duration, var(--motion-time-base));
      transition-timing-function: var(--motion-ease-out);
      transition-delay: var(--m-delay, 0s);
    }
    .motion-js [data-motion~="stagger"] {
      opacity: 0;
      transition: opacity var(--motion-time-quick) var(--motion-ease-quick);
    }
    .motion-js [data-motion~="stagger"] > * {
      transition-delay: calc(var(--m-delay, 0s) + var(--m-index, 0) * var(--m-stagger, var(--motion-stagger)));
    }
    .motion-js [data-motion~="fade-up"].is-inview,
    .motion-js [data-motion~="stagger"].is-inview,
    .motion-js [data-motion~="stagger"].is-inview > * {
      opacity: 1;
      translate: 0 0;
    }
    .motion-js [data-motion~="fade-up"]:not(.is-inview),
    .motion-js [data-motion~="stagger"]:not(.is-inview) > * {
      transition-delay: 0s;
    }

    /* 線を描く */
    .motion-js [data-motion~="draw"] .motion-draw__line {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 1;
      opacity: 0;
      transition:
        stroke-dashoffset var(--motion-time-quick) var(--motion-ease-quick),
        opacity var(--motion-time-quick) var(--motion-ease-quick);
    }
    .motion-js [data-motion~="draw"].is-inview .motion-draw__line {
      stroke-dashoffset: 0;
      opacity: 1;
      transition:
        stroke-dashoffset var(--m-duration, var(--motion-time-base)) var(--motion-ease-in-out) var(--m-delay, 0s),
        opacity var(--motion-time-fade) var(--motion-ease-in-out) var(--m-delay, 0s);
    }

    /* 線が伸びる */
    .motion-js [data-motion~="grow"] {
      scale: 1 0;
      transform-origin: 50% 0;
      transition: scale var(--m-duration, var(--motion-time-slow)) var(--motion-ease-in-out) var(--m-delay, 0s);
    }
    .motion-js [data-motion~="grow"][data-motion-axis="x"] {
      scale: 0 1;
      transform-origin: 0 50%;
    }
    .motion-js [data-motion~="grow"].is-inview {
      scale: 1 1;
    }

    /* 浮かぶ図形 */
    .motion-js [data-motion~="float"] .motion-float__item {
      scale: 0;
      transition: scale var(--motion-time-pop) var(--motion-ease-pop) var(--m-delay, 0s);
    }
    .motion-js [data-motion~="float"].is-inview .motion-float__item {
      scale: 1;
    }

    /* 触れたとき */
    [data-motion~="hover-nudge"]:focus-visible [data-motion-nudge] {
      translate: var(--motion-nudge) calc(var(--motion-nudge) * -1);
    }
    [data-motion~="hover-grow"]:focus-visible {
      scale: var(--motion-grow-scale);
    }
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    [data-motion~="hover-nudge"]:hover [data-motion-nudge] {
      translate: var(--motion-nudge) calc(var(--motion-nudge) * -1);
    }
    [data-motion~="hover-grow"]:hover {
      scale: var(--motion-grow-scale);
    }
  }

  /* 幅 768px 未満 */
  @media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    .motion-js .motion-marquee__track {
      animation-duration: var(--m-loop-narrow, var(--motion-time-loop-narrow));
    }
  }

  /* 動きを減らす設定の端末：幕は出さない */
  @media (prefers-reduced-motion: reduce) {
    .motion-intro {
      display: none;
    }
  }

  /* =================================================================
     ここから：FY2026下期経営説明会のサイトから足した部品（版 1.2）
     ================================================================= */

  /* ---------------------------------------------------------------
     写真のオープニング（data-motion="opening"）
     写真と一言を見せ、スキップの下の線が伸びきったら、少し寄りながら消える
     --------------------------------------------------------------- */
  .motion-opening {
    display: none;
  }
  .motion-js .motion-opening {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    overflow: hidden;
    background: var(--motion-opening-bg);
    /* JavaScript が止まっても、決めた時間がたったら消える */
    animation: motion-opening-failsafe var(--motion-time-opening-fade) ease var(--m-failsafe, 12s) forwards;
  }
  .motion-js .motion-opening--contained {
    position: absolute;
    z-index: 1;
  }
  @keyframes motion-opening-failsafe {
    to { opacity: 0; visibility: hidden; }
  }
  .motion-opening.is-done {
    display: none;
  }
  .motion-opening__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--motion-time-opening-image) ease;
  }
  .motion-opening.is-ready .motion-opening__frame {
    opacity: 1;
  }
  .motion-opening__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    /* 写真の端を、まわりの色になじませる */
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 92%, transparent);
    mask-composite: intersect;
  }
  .motion-opening__copy {
    position: absolute;
    inset-inline: 0;
    top: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: 6%;
    text-align: center;
    opacity: 0;
    translate: 0 12px;
    transition:
      opacity var(--motion-time-base) ease var(--motion-time-opening-delay),
      translate var(--motion-time-opening-copy) var(--motion-ease-copy) var(--motion-time-opening-delay);
  }
  .motion-opening.is-ready .motion-opening__copy {
    opacity: 1;
    translate: 0 0;
  }
  .motion-opening.is-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-time-opening-fade) ease;
  }
  .motion-opening.is-out .motion-opening__frame {
    scale: var(--motion-opening-zoom);
    transition: scale var(--motion-time-opening-fade) var(--motion-ease-zoom), opacity var(--motion-time-opening-image) ease;
  }
  .motion-opening__skip {
    position: absolute;
    right: calc(env(safe-area-inset-right, 0px) + 20px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 20px;
    overflow: hidden;
    border: 1px solid rgb(241 242 239 / 0.32);
    border-radius: 999px;
    background: rgb(12 15 19 / 0.66);
    backdrop-filter: blur(8px);
    color: #f1f2ef;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: background-color var(--motion-time-color), border-color var(--motion-time-color);
  }
  @media (hover: hover) {
    .motion-opening__skip:hover {
      border-color: rgb(241 242 239 / 0.55);
      background: rgb(30 36 43 / 0.85);
    }
  }
  /* スキップの下の線：見せておく時間で、左から右へ伸びる */
  .motion-opening__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--motion-accent);
  }
  .motion-opening.is-ready .motion-opening__bar {
    animation: motion-opening-bar var(--m-hold, var(--motion-time-opening-hold)) linear forwards;
  }
  @keyframes motion-opening-bar {
    to { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .motion-js .motion-opening {
      display: none;
    }
  }
  @media print {
    .motion-js .motion-opening {
      display: none;
    }
  }

  /* ---------------------------------------------------------------
     1文字ずつピントが合う（data-motion="chars-focus"）
     文字の分け方は「1文字ずつせり上がる文字」と同じ。ぼかしが切れないよう、枠で隠さない
     --------------------------------------------------------------- */
  [data-motion~="chars-focus"] .motion-chars__mask {
    overflow: visible;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="chars-focus"] .motion-chars__char {
      opacity: 0.08;
      filter: blur(10px);
    }
  }

  /* ---------------------------------------------------------------
     蛍光ペン（data-motion="marker"。<mark> に付ける）
     --------------------------------------------------------------- */
  [data-motion~="marker"] {
    margin: 0 -2px;
    padding: 0 2px var(--motion-marker-gap);
    border-radius: 2px;
    background: linear-gradient(transparent var(--motion-marker-top), var(--marker-color, var(--motion-marker-color)) var(--motion-marker-top), var(--marker-color, var(--motion-marker-color)) var(--motion-marker-bottom), transparent var(--motion-marker-bottom)) no-repeat 0 0 / var(--m-marker, 100%) 100%;
    color: inherit;
    /* 複数の行にまたがるときも、1本の線として1行目の左から順に引く（各行に同時に引かない） */
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="marker"] {
      --m-marker: 0%;
    }
    /* data-motion-play：一節が画面の決まった高さまで来たら、時間をかけて一度だけ引く（スクロールの量では伸ばさない） */
    .motion-js [data-motion~="marker"][data-motion-play] {
      transition: background-size var(--motion-time-marker) var(--motion-ease-in-out);
    }
    .motion-js [data-motion~="marker"][data-motion-play].is-played {
      --m-marker: 100%;
    }
  }

  /* ---------------------------------------------------------------
     最後の行に1文字だけ残さない（data-motion="keep-tail"）
     --------------------------------------------------------------- */
  .motion-keep {
    white-space: nowrap;
  }

  /* ---------------------------------------------------------------
     数字が増える（data-motion="count"）・回って止まる（"odometer"）・パタパタ（"flap"）
     --------------------------------------------------------------- */
  [data-motion~="count"],
  [data-motion~="odometer"] {
    font-variant-numeric: tabular-nums;
  }
  .motion-odometer__digit {
    display: inline-block;
    height: 1.12em;
    overflow: hidden;
    line-height: 1.12em;
    vertical-align: bottom;
  }
  .motion-odometer__strip {
    display: block;
  }
  .motion-odometer__strip > span {
    display: block;
  }
  .motion-js [data-motion~="odometer"].is-inview .motion-odometer__strip {
    translate: 0 calc(var(--m-digit, 0) * -1.12em);
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js .motion-odometer__strip {
      transition: translate var(--motion-time-odometer) var(--motion-ease-odometer) calc(var(--m-order, 0) * var(--motion-stagger-odometer));
    }
  }
  .motion-flap__tile {
    position: relative;
    display: inline-block;
    min-width: 0.64em;
    margin: 0 0.03em;
    padding: 0.02em 0.06em;
    border-radius: 0.12em;
    background: linear-gradient(var(--motion-flap-top) 0 50%, var(--motion-flap-bottom) 50% 100%);
    box-shadow: 0 0.06em 0.18em rgb(0 0 0 / 0.45);
    color: var(--motion-flap-ink);
    text-align: center;
  }
  /* 板の真ん中の割れ目 */
  .motion-flap__tile::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    background: rgb(0 0 0 / 0.6);
  }
  .motion-flap__gap {
    display: inline-block;
    margin: 0 0.06em;
  }
  .motion-flap__tile.is-flipping {
    animation: motion-flap var(--motion-time-flap) ease-out;
  }
  @keyframes motion-flap {
    from { transform: perspective(200px) rotateX(-75deg); }
    to { transform: perspective(200px) rotateX(0); }
  }

  /* ---------------------------------------------------------------
     スクロールに合わせて現れる（data-motion="scroll-rise" / "focus-in" / "image-focus"）
     動いている間の値は JavaScript が書く。ここは、動き出す前の状態
     --------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="scroll-rise"] {
      opacity: 0;
    }
    .motion-js [data-motion~="focus-in"] {
      opacity: 0.15;
      filter: blur(9px);
    }
    .motion-js [data-motion~="image-focus"] {
      filter: blur(11px);
      scale: 1.05;
    }
  }

  /* ---------------------------------------------------------------
     ぽんと出る（data-motion="pop"）・はんこが押される（data-motion="stamp"）
     はんこの傾きは、サイトの CSS で rotate を付ける
     --------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="pop"] {
      scale: 0;
      transition: scale var(--m-duration, var(--motion-time-bounce)) var(--motion-ease-bounce) var(--m-delay, 0s);
    }
    .motion-js [data-motion~="stamp"] {
      opacity: 0;
      scale: var(--motion-stamp-from);
      transition:
        opacity var(--motion-time-stamp-fade) ease var(--m-delay, 0s),
        scale var(--m-duration, var(--motion-time-stamp)) var(--motion-ease-stamp) var(--m-delay, 0s);
    }
    .motion-js [data-motion~="pop"].is-inview,
    .motion-js [data-motion~="stamp"].is-inview {
      opacity: 1;
      scale: 1;
    }
    .motion-js [data-motion~="pop"]:not(.is-inview),
    .motion-js [data-motion~="stamp"]:not(.is-inview) {
      transition-delay: 0s;
    }
  }

  /* ---------------------------------------------------------------
     四隅の枠（data-motion="focus-frame" の中の .motion-frame）
     角は JavaScript が足す（<i> が4つ）。合うと .is-locked で色が変わる
     --------------------------------------------------------------- */
  .motion-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .motion-frame > i {
    position: absolute;
    width: var(--motion-frame-corner);
    height: var(--motion-frame-corner);
    border: 0 solid var(--motion-frame-color);
    transition: border-color var(--motion-time-color);
  }
  .motion-frame > i:nth-child(1) { left: 0; top: 0; border-left-width: var(--motion-frame-line); border-top-width: var(--motion-frame-line); }
  .motion-frame > i:nth-child(2) { right: 0; top: 0; border-right-width: var(--motion-frame-line); border-top-width: var(--motion-frame-line); }
  .motion-frame > i:nth-child(3) { left: 0; bottom: 0; border-left-width: var(--motion-frame-line); border-bottom-width: var(--motion-frame-line); }
  .motion-frame > i:nth-child(4) { right: 0; bottom: 0; border-right-width: var(--motion-frame-line); border-bottom-width: var(--motion-frame-line); }
  .motion-frame.is-locked > i {
    border-color: var(--motion-accent);
  }

  /* ---------------------------------------------------------------
     画面を止めて、段階ごとに進める（data-motion="pin"）
     長さは style="--pin-length: 280"（画面の高さの何％分スクロールするか）
     --------------------------------------------------------------- */
  .motion-js .motion-pin {
    position: relative;
    height: calc((var(--pin-length, 280) + 40) * 1vh);
    height: calc((var(--pin-length, 280) + 40) * 1svh);
  }
  .motion-js .motion-pin__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
  }
  .motion-js .motion-pin__caps {
    display: grid;
  }
  .motion-js .motion-pin__caps > * {
    grid-area: 1 / 1;
    opacity: 0;
    translate: 0 6px;
    pointer-events: none;
  }
  .motion-js .motion-pin__caps > .is-current {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js .motion-pin__caps > * {
      transition: opacity var(--motion-time-caption), translate var(--motion-time-caption);
    }
  }
  html:not(.motion-js) .motion-pin__steps {
    display: none;
  }

  /* ---------------------------------------------------------------
     跳ねながら道のりを進む（data-motion="track"）
     線と目印の位置は JavaScript が決める。駅の並べ方（横・縦）はサイトの CSS で決める
     --------------------------------------------------------------- */
  .motion-track {
    position: relative;
  }
  .motion-track__line {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--motion-frame-color);
  }
  .motion-track__fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--motion-accent);
    transform-origin: 0 0;
  }
  /* キャラクター（.motion-ball）を目印にしても、ここで置き場所を決める */
  .motion-track .motion-track__marker {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }
  html:not(.motion-js) .motion-track__line,
  html:not(.motion-js) .motion-track .motion-track__marker {
    display: none;
  }

  /* ---------------------------------------------------------------
     押せるボタン（data-motion="press"）：触れると浮き、押すと沈む。選ばれていると下の影がアクセント色
     --------------------------------------------------------------- */
  [data-motion~="press"] {
    box-shadow: 0 var(--motion-press-ledge) 0 color-mix(in srgb, currentColor 18%, transparent);
    transition:
      translate var(--motion-time-press),
      box-shadow var(--motion-time-press),
      background-color var(--motion-time-color),
      border-color var(--motion-time-color),
      color var(--motion-time-color);
  }
  [data-motion~="press"]:is([aria-pressed="true"], [aria-current], .is-current) {
    box-shadow: 0 var(--motion-press-ledge) 0 color-mix(in srgb, var(--motion-accent) 60%, transparent);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    [data-motion~="press"]:hover {
      translate: 0 calc(var(--motion-press-lift) * -1);
      box-shadow: 0 calc(var(--motion-press-ledge) + var(--motion-press-lift)) 0 color-mix(in srgb, currentColor 22%, transparent);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="press"]:active {
      translate: 0 var(--motion-press-lift);
      box-shadow: 0 calc(var(--motion-press-ledge) - var(--motion-press-lift)) 0 color-mix(in srgb, currentColor 22%, transparent);
    }
  }

  /* ---------------------------------------------------------------
     裏返るカード（data-motion="flip"。ボタンに付ける）
     --------------------------------------------------------------- */
  [data-motion~="flip"] {
    perspective: var(--motion-flip-depth);
    cursor: pointer;
  }
  .motion-flip__inner {
    display: grid;
    height: 100%;
    transform-style: preserve-3d;
  }
  .motion-flip__face {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .motion-flip__face--back {
    rotate: y 180deg;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js .motion-flip__inner {
      transition: rotate var(--motion-time-flip) var(--motion-ease-in-out);
    }
  }
  /* JavaScript が動かないときは、表と裏を上下に並べて見せる */
  html:not(.motion-js) .motion-flip__face {
    grid-area: auto;
    backface-visibility: visible;
    rotate: none;
  }

  /* ---------------------------------------------------------------
     下から出る説明（data-motion="sheet"）。開くボタンは <a href="#シートのid" data-motion-open>
     --------------------------------------------------------------- */
  .motion-sheet {
    border-radius: 16px;
    background: var(--motion-sheet-bg);
  }
  .motion-js .motion-sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 9001;
    max-height: 84vh;
    max-height: 84svh;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgb(0 0 0 / 0.25);
    translate: 0 105%;
    visibility: hidden;
    transition: translate var(--motion-time-sheet) var(--motion-ease-sheet), visibility 0s linear var(--motion-time-sheet);
  }
  .motion-js .motion-sheet.is-open {
    translate: 0 0;
    visibility: visible;
    transition-delay: 0s;
  }
  .motion-scrim {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--motion-scrim-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-time-scrim), visibility 0s linear var(--motion-time-scrim);
  }
  .motion-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .motion-js .motion-sheet--contained,
  .motion-scrim--contained {
    position: absolute;
  }
  /* 枠の中に置くときは、枠の高さを超えない */
  .motion-js .motion-sheet--contained {
    max-height: 92%;
  }
  html:not(.motion-js) .motion-sheet__close {
    display: none;
  }

  /* ---------------------------------------------------------------
     写真を重ねて切り替える（data-motion="deck"）
     --------------------------------------------------------------- */
  .motion-deck__stage {
    display: grid;
  }
  .motion-js .motion-deck__item {
    grid-area: 1 / 1;
    opacity: 0;
    filter: blur(var(--motion-deck-blur));
    scale: var(--motion-deck-scale);
    visibility: hidden;
  }
  .motion-js .motion-deck__item.is-current {
    opacity: 1;
    filter: none;
    scale: 1;
    visibility: visible;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js .motion-deck__item {
      transition: opacity var(--motion-time-deck), filter var(--motion-time-deck), scale var(--motion-time-deck), visibility 0s linear var(--motion-time-deck);
    }
    .motion-js .motion-deck__item.is-current {
      transition-delay: 0s;
    }
  }
  html:not(.motion-js) .motion-deck__controls {
    display: none;
  }

  /* ---------------------------------------------------------------
     表情のある丸いキャラクター（.motion-ball。中に <i></i><i></i>）
     表情は data-mood="happy" / "tired"、目の向きは style="--look-x: .8; --look-y: 0"（-1〜1）
     --------------------------------------------------------------- */
  .motion-ball {
    position: relative;
    display: inline-block;
    flex: none;
    width: var(--ball-size, var(--motion-ball-size));
    height: var(--ball-size, var(--motion-ball-size));
    border-radius: 50%;
    background: var(--motion-ball-color);
    box-shadow: 0 0 0 2px var(--motion-ball-line);
    vertical-align: middle;
  }
  .motion-ball > i {
    position: absolute;
    top: 38%;
    width: 14%;
    height: 14%;
    border-radius: 50%;
    background: var(--motion-ball-eye);
    translate: calc(var(--look-x, 0) * 70%) calc(var(--look-y, 0) * 50%);
  }
  .motion-ball > i:first-child {
    left: 25%;
  }
  .motion-ball > i:last-child {
    right: 25%;
  }
  .motion-ball--me {
    background: var(--motion-ball-me);
  }
  .motion-ball--me > i {
    background: var(--motion-ball-me-eye);
  }
  /* 濃い色の自分（マネジメントは、面白い。の図の自分）。ふちは付けない */
  .motion-ball--dark {
    background: var(--motion-ball-dark);
    box-shadow: none;
  }
  .motion-ball--dark > i {
    background: var(--motion-ball-dark-eye);
  }
  .motion-ball[data-mood="happy"] > i {
    top: 41%;
    width: 22%;
    height: 11%;
    border: 2px solid var(--motion-ball-eye);
    border-bottom: 0;
    border-radius: 99px 99px 0 0;
    background: none;
  }
  .motion-ball[data-mood="tired"] > i {
    top: 47%;
    width: 22%;
    height: 0;
    border-top: 2px solid var(--motion-ball-eye);
    border-radius: 0;
    background: none;
  }
  .motion-ball--me[data-mood] > i {
    border-color: var(--motion-ball-me-eye);
  }
  .motion-ball--dark[data-mood] > i {
    border-color: var(--motion-ball-dark-eye);
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-ball > i {
      animation: motion-blink var(--motion-time-blink) var(--m-blink, 0s) infinite;
    }
  }
  @keyframes motion-blink {
    0%, 93%, 100% { scale: 1 1; }
    96% { scale: 1 0.12; }
  }

  /* ---------------------------------------------------------------
     紙吹雪（data-motion="confetti"）を描く層
     --------------------------------------------------------------- */
  .motion-confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 9500;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* ---------------------------------------------------------------
     章のめもり（data-motion="chapter-scale"）
     --------------------------------------------------------------- */
  .motion-scale {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  }
  .motion-js .motion-scale {
    opacity: 0;
    transition: opacity var(--motion-time-medium);
  }
  .motion-js .motion-scale.is-shown {
    opacity: 1;
  }
  .motion-scale__track {
    display: flex;
  }
  .motion-js .motion-scale__track {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
  }
  .motion-scale__item {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: var(--motion-scale-step);
    padding-bottom: 9px;
    white-space: nowrap;
  }
  /* めもりの線（大きな線と、間の細かい線） */
  .motion-scale__item::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: 1px;
    height: 10px;
    background: currentColor;
    opacity: 0.4;
  }
  .motion-scale__item::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 9px;
    width: var(--motion-scale-step);
    height: 6px;
    background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px calc(var(--motion-scale-step) / 4));
    opacity: 0.3;
  }
  .motion-scale__item:last-child::after {
    display: none;
  }
  .motion-scale__item.is-current {
    font-weight: 700;
  }
  .motion-scale__index {
    position: absolute;
    left: 50%;
    top: 0;
    width: 0;
    height: 0;
    border-top: 8px solid var(--motion-accent);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    translate: -50% 0;
  }
  html:not(.motion-js) .motion-scale {
    overflow-x: auto;
    mask-image: none;
  }
  html:not(.motion-js) .motion-scale__index {
    display: none;
  }

  /* ---------------------------------------------------------------
     発表用モード（data-motion="keys"）とお知らせ
     発表用モードの間は html に .motion-present が付く（見出しを隠すのは、サイトの CSS で行う）
     --------------------------------------------------------------- */
  html.motion-present.is-idle,
  html.motion-present.is-idle * {
    cursor: none;
  }
  .motion-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 9600;
    padding: 8px 18px;
    border: 1px solid rgb(241 242 239 / 0.25);
    border-radius: 999px;
    background: var(--motion-toast-bg);
    color: var(--motion-toast-ink);
    font-weight: 700;
    opacity: 0;
    translate: -50% 12px;
    pointer-events: none;
    transition: opacity var(--motion-time-toast), translate var(--motion-time-toast);
  }
  .motion-toast.is-shown {
    opacity: 1;
    translate: -50% 0;
  }

  /* =================================================================
     ここから：段取りと予定変更のサイトから足した部品（版 1.3）
     地図の2つは、FY2026下期経営説明会のサイトから足した部品
     ================================================================= */

  /* ---------------------------------------------------------------
     1文字ずつ打たれる文字（data-motion="type"）
     打っている間も、打ち終わった後も、カーソルが点滅する（data-motion-caret="hide" で、打ち終わったら消す）
     --------------------------------------------------------------- */
  .motion-js [data-motion~="type"]:not(.is-ready) {
    visibility: hidden;
  }
  .motion-type__caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -0.15em;
    background: var(--motion-accent);
  }
  [data-motion~="type"][data-motion-caret="hide"].is-typed .motion-type__caret {
    display: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-type__caret {
      animation: motion-caret var(--motion-time-caret) steps(1) infinite;
    }
  }
  @keyframes motion-caret {
    50% { opacity: 0; }
  }

  /* ---------------------------------------------------------------
     LINE のようなやりとり（data-motion="chat"）
     吹き出しは HTML に全部書く。JavaScript が動かないときは、そのまま全部見える。
     動くときは、上から順に「入力中の点 → 吹き出し → 既読」と出す。顔の色は style="--chat-color: #5c7bb0"
     --------------------------------------------------------------- */
  [data-motion~="chat"] {
    display: flex;
    flex-direction: column;
    background: var(--motion-chat-bg);
    color: var(--motion-chat-ink);
  }
  .motion-chat__body {
    display: flex;
    flex-direction: column;
    gap: var(--motion-chat-gap);
    margin: 0;
    padding: 12px 10px 14px;
    list-style: none;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .motion-chat__body::-webkit-scrollbar {
    display: none;
  }
  .motion-chat__msg {
    display: grid;
    grid-template-columns: var(--motion-chat-avatar) fit-content(75%) minmax(0, 1fr);
    grid-template-areas:
      "avatar name name"
      "avatar bubble meta";
    gap: 2px 7px;
    align-items: end;
  }
  .motion-chat__msg--me {
    grid-template-columns: minmax(0, 1fr) fit-content(75%);
    grid-template-areas: "meta bubble";
  }
  .motion-chat__avatar {
    grid-area: avatar;
    align-self: start;
    display: grid;
    place-items: center;
    width: var(--motion-chat-avatar);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--chat-color, var(--motion-chat-sub));
    color: var(--motion-chat-on-avatar);
    font-weight: 700;
    line-height: 1;
  }
  .motion-chat__name {
    grid-area: name;
    margin: 0;
    padding-left: 4px;
    color: var(--motion-chat-sub);
    font-weight: 700;
    line-height: 1.4;
  }
  .motion-chat__bubble {
    grid-area: bubble;
    min-width: 0;
    margin: 0;
    padding: 8px 12px;
    border-radius: 5px 18px 18px 18px;
    background: var(--motion-chat-other);
    box-shadow: 0 1px 1px rgb(20 25 23 / 0.07);
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .motion-chat__msg--me .motion-chat__bubble {
    border-radius: 18px 5px 18px 18px;
    background: var(--motion-chat-me);
  }
  .motion-chat__meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--motion-chat-sub);
    line-height: 1.3;
    white-space: nowrap;
  }
  .motion-chat__msg--me .motion-chat__meta {
    align-items: flex-end;
  }
  .motion-chat__read {
    transition: opacity var(--motion-time-show);
  }
  .motion-chat__read.is-waiting {
    opacity: 0;
  }
  .motion-chat__date,
  .motion-chat__note {
    align-self: center;
    max-width: 90%;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--motion-chat-pill);
    color: var(--motion-chat-sub);
    line-height: 1.5;
    text-align: center;
  }
  .motion-chat__note {
    font-weight: 700;
  }
  /* 入力中の点（JavaScript が足して、吹き出しを出す前に消す） */
  .motion-chat__dots {
    display: flex;
    gap: 4px;
    padding: 12px 13px;
  }
  .motion-chat__dots > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--motion-chat-sub);
    opacity: 0.3;
  }
  /* 動いている間と動く前は、まだ出していない吹き出しを隠す */
  .motion-js [data-motion~="chat"]:not(.is-done) .motion-chat__body > :not(.is-shown) {
    display: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-chat__dots > i {
      animation: motion-typing 1s infinite;
    }
    .motion-chat__dots > i:nth-child(2) {
      animation-delay: 0.15s;
    }
    .motion-chat__dots > i:nth-child(3) {
      animation-delay: 0.3s;
    }
    .motion-chat__body > .is-pop {
      animation: motion-chat-pop var(--motion-time-chat-pop) var(--motion-ease-spring);
    }
  }
  @keyframes motion-typing {
    0%, 60%, 100% { opacity: 0.3; translate: 0 0; }
    30% { opacity: 1; translate: 0 -3px; }
  }
  @keyframes motion-chat-pop {
    from { opacity: 0; translate: 0 10px; scale: 0.96; }
  }

  /* 数字が弾む（MotionKit.bump(要素) で .motion-bump が付く） */
  @media (prefers-reduced-motion: no-preference) {
    .motion-bump {
      display: inline-block;
      animation: motion-bump var(--motion-time-bump) var(--motion-ease-spring);
    }
  }
  @keyframes motion-bump {
    50% { scale: 1.35; }
  }

  /* ---------------------------------------------------------------
     操作を自動で見せる（data-motion="play"）
     段階ごとに部品を出し入れし、カーソルを動かす。段階ごとの秒は data-motion-times="1.2, 1.2, 1, 4"
     中の要素：data-motion-in（現れる段階）・data-motion-out（消える段階）・data-motion-move（動く段階。.is-moved が付く）
     カーソル：<span class="motion-play__cursor" data-motion-path="2: #chip, 3: #slot press, 5: hide">
     --------------------------------------------------------------- */
  [data-motion~="play"] {
    position: relative;
  }
  .motion-js [data-motion~="play"] :is([data-motion-in], [data-motion-out]):not(.is-shown) {
    opacity: 0;
    translate: 0 8px;
    scale: 0.96;
    pointer-events: none;
  }
  html:not(.motion-js) [data-motion~="play"] [data-motion-out],
  html:not(.motion-js) .motion-play__cursor {
    display: none;
  }
  .motion-play__ghost {
    position: absolute;
    z-index: 1;
    border: 1.5px dashed var(--motion-ink-soft);
    pointer-events: none;
    transition: opacity var(--motion-time-ghost);
  }
  .motion-play__cursor {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    width: var(--motion-cursor-size);
    height: var(--motion-cursor-size);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.25));
  }
  .motion-play__cursor.is-shown {
    opacity: 1;
  }
  .motion-play__cursor > svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--motion-cursor-fill);
    stroke: var(--motion-cursor-line);
    transform-origin: 3px 3px;
  }
  .motion-play__cursor.is-pressed > svg {
    scale: 0.85;
  }
  /* 押している間だけ、カーソルが運ぶもの（カーソルの中に置く） */
  .motion-play__carry {
    position: absolute;
    left: 10px;
    top: 10px;
    width: max-content;
    opacity: 0;
    scale: 0.9;
  }
  .motion-play__cursor.is-pressed .motion-play__carry {
    opacity: 1;
    scale: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="play"] :is([data-motion-in], [data-motion-out]) {
      transition:
        opacity var(--motion-time-show),
        translate var(--motion-time-show) var(--motion-ease-spring),
        scale var(--motion-time-show) var(--motion-ease-spring);
    }
    .motion-js [data-motion~="play"] [data-motion-move] {
      transition:
        top var(--motion-time-move) var(--motion-ease-glide),
        left var(--motion-time-move) var(--motion-ease-glide),
        width var(--motion-time-move) var(--motion-ease-glide),
        height var(--motion-time-move) var(--motion-ease-glide),
        translate var(--motion-time-move) var(--motion-ease-glide);
    }
    .motion-js [data-motion~="play"] [data-motion-move]:is([data-motion-in], [data-motion-out]) {
      transition:
        opacity var(--motion-time-show),
        scale var(--motion-time-show) var(--motion-ease-spring),
        top var(--motion-time-move) var(--motion-ease-glide),
        left var(--motion-time-move) var(--motion-ease-glide),
        width var(--motion-time-move) var(--motion-ease-glide),
        height var(--motion-time-move) var(--motion-ease-glide),
        translate var(--motion-time-move) var(--motion-ease-glide);
    }
    .motion-js [data-motion~="play"] .is-flash {
      animation: motion-flash 1.3s ease-out 2;
    }
    .motion-play__cursor {
      transition:
        translate var(--motion-time-move) var(--motion-ease-glide),
        opacity 0.3s;
    }
    .motion-play__cursor > svg {
      transition: scale 0.15s;
    }
    .motion-play__carry {
      transition: opacity 0.25s, scale 0.25s var(--motion-ease-spring);
    }
  }
  @keyframes motion-flash {
    from { box-shadow: 0 0 0 0 var(--motion-ink-soft); }
    to { box-shadow: 0 0 0 10px transparent; }
  }

  /* ---------------------------------------------------------------
     自動で進むタブ（data-motion="tabs"）
     選んだタブの説明（.motion-tabs__more）が開き、下の線（.motion-tabs__bar）が伸びきると次へ進む。
     押したら、自動で進むのをやめる
     --------------------------------------------------------------- */
  .motion-tabs__list {
    display: flex;
    flex-direction: column;
  }
  .motion-tabs__more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
  }
  .motion-tabs__more > * {
    min-height: 0;
    overflow: hidden;
  }
  .motion-tabs__tab[aria-selected="true"] .motion-tabs__more {
    grid-template-rows: 1fr;
    opacity: 1;
  }
  .motion-tabs__bar {
    display: block;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--motion-frame-color);
    opacity: 0;
  }
  .motion-tabs__bar::before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    background: var(--motion-accent);
  }
  .motion-tabs__tab[aria-selected="true"] .motion-tabs__bar {
    opacity: 1;
  }
  [data-motion~="tabs"]:not(.is-auto) .motion-tabs__tab[aria-selected="true"] .motion-tabs__bar::before,
  .motion-tabs__tab.is-past .motion-tabs__bar::before {
    width: 100%;
  }
  .motion-tabs__panels {
    display: grid;
  }
  .motion-js .motion-tabs__panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
  }
  .motion-js .motion-tabs__panel.is-current {
    opacity: 1;
    visibility: visible;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-tabs__more {
      transition:
        grid-template-rows var(--motion-time-open) var(--motion-ease-glide),
        opacity var(--motion-time-open);
    }
    .motion-tabs__bar {
      transition: opacity 0.3s;
    }
    .motion-tabs__tab.is-running .motion-tabs__bar::before {
      animation: motion-tab-bar var(--m-interval, var(--motion-time-tab)) linear forwards;
    }
    .motion-js .motion-tabs__panel {
      transition: opacity var(--motion-time-open), visibility var(--motion-time-open);
    }
  }
  @keyframes motion-tab-bar {
    from { width: 0; }
    to { width: 100%; }
  }
  /* 幅 768px 未満：タブを横に並べ、はみ出した分は横にずらして見る */
  @media (max-width: 767.98px) {
    .motion-tabs__list {
      flex-direction: row;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .motion-tabs__list::-webkit-scrollbar {
      display: none;
    }
    .motion-tabs__tab {
      flex: none;
      scroll-snap-align: start;
    }
    .motion-tabs__more {
      display: none;
    }
  }

  /* ---------------------------------------------------------------
     つまんで動かす目盛り（data-motion="slider"）
     位置は JavaScript が --m-pos（0〜1。目盛りの左端）・--m-rest（残りの割合）・--m-value に書く
     --------------------------------------------------------------- */
  .motion-slider__track {
    position: relative;
    touch-action: pan-y;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .motion-slider__thumb {
    position: absolute;
    left: calc(var(--m-pos, 0) * 100%);
    z-index: 2;
    cursor: grab;
  }
  .motion-slider__fill {
    position: absolute;
    left: 0;
    width: calc(var(--m-pos, 0) * 100%);
  }
  .motion-slider__rest {
    position: absolute;
    left: calc(var(--m-pos, 0) * 100%);
    width: calc(var(--m-rest, 1) * 100%);
  }
  [data-motion~="slider"] .is-off {
    opacity: 0.5;
    scale: 0.97;
    text-decoration: line-through;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-slider__thumb {
      transition: left var(--motion-time-slide) var(--motion-ease-glide);
    }
    .motion-slider__fill {
      transition: width var(--motion-time-slide) var(--motion-ease-glide);
    }
    .motion-slider__rest {
      transition: left var(--motion-time-slide) var(--motion-ease-glide), width var(--motion-time-slide) var(--motion-ease-glide);
    }
    [data-motion~="slider"] [data-motion-on] {
      transition: opacity var(--motion-time-show), scale var(--motion-time-show) var(--motion-ease-glide);
    }
  }
  /* つかんで動かしている間は、指にすぐついてくる */
  [data-motion~="slider"].is-dragging :is(.motion-slider__thumb, .motion-slider__fill, .motion-slider__rest) {
    transition: none;
  }

  /* ---------------------------------------------------------------
     チェックと進み具合の輪（data-motion="checklist"）
     チェックの印と輪の線は、JavaScript が足す。全部そろうと紙吹雪が出る
     --------------------------------------------------------------- */
  .motion-checklist__box {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--motion-check-size);
    height: var(--motion-check-size);
    border: 1.5px solid var(--motion-frame-color);
    border-radius: var(--motion-check-radius);
  }
  .motion-checklist__box > svg {
    width: 58%;
    height: 58%;
    fill: none;
    stroke: var(--motion-on-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .motion-checklist__box path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  [aria-pressed="true"] > .motion-checklist__box {
    border-color: var(--motion-accent);
    background: var(--motion-accent);
    rotate: -8deg;
    scale: 1.05;
  }
  [aria-pressed="true"] > .motion-checklist__box path {
    stroke-dashoffset: 0;
  }
  .motion-checklist__ring > svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 12;
  }
  .motion-checklist__track {
    stroke: var(--motion-frame-color);
  }
  .motion-checklist__fill {
    stroke: var(--motion-accent);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-checklist__box {
      transition:
        background-color var(--motion-time-check),
        border-color var(--motion-time-check),
        rotate var(--motion-time-check) var(--motion-ease-spring),
        scale var(--motion-time-check) var(--motion-ease-spring);
    }
    .motion-checklist__box path {
      transition: stroke-dashoffset var(--motion-time-check) 0.1s;
    }
    .motion-checklist__fill {
      transition: stroke-dashoffset var(--motion-time-ring) var(--motion-ease-glide);
    }
  }

  /* ---------------------------------------------------------------
     選ぶと答えが出る（data-motion="choice"）
     答え（.motion-choice__answer）は選ぶまで隠す。選んだボタンと同じ順番の .motion-choice__verdict を出す
     --------------------------------------------------------------- */
  .motion-js [data-motion~="choice"]:not(.is-answered) .motion-choice__answer,
  .motion-js .motion-choice__verdict:not(.is-current) {
    display: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-choice__answer.is-flash {
      animation: motion-answer var(--motion-time-answer) var(--motion-ease-glide);
    }
  }
  @keyframes motion-answer {
    from { opacity: 0; translate: 0 6px; }
  }

  /* ---------------------------------------------------------------
     ばらばらの部品が集まる（data-motion="assemble"。中の要素が集まる）
     散らばり方は JavaScript が決める（data-motion-spread="140" で広さ、data-motion-seed で並びを変える）
     --------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="assemble"] > * {
      transition:
        translate var(--motion-time-assemble) var(--motion-ease-glide) var(--m-wait, 0s),
        rotate var(--motion-time-assemble) var(--motion-ease-glide) var(--m-wait, 0s),
        opacity var(--motion-time-assemble-fade) var(--m-wait, 0s);
    }
    .motion-js [data-motion~="assemble"]:not(.is-inview) > * {
      translate: var(--m-dx, 0) var(--m-dy, 0);
      rotate: var(--m-dr, 0deg);
      opacity: 0.4;
    }
  }

  /* ---------------------------------------------------------------
     マウスの位置に光が当たる（data-motion="spotlight"）
     付ける要素は、サイトの CSS で position: relative などにしておく
     --------------------------------------------------------------- */
  [data-motion~="spotlight"] {
    isolation: isolate;
  }
  [data-motion~="spotlight"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(var(--motion-spotlight-size) circle at var(--m-x, -9999px) var(--m-y, -9999px), var(--motion-spotlight-color), transparent 45%);
    pointer-events: none;
  }

  /* ---------------------------------------------------------------
     脈打つ点（data-motion="pulse"）・急ぎの枠が脈打つ（data-motion="alert"）
     --------------------------------------------------------------- */
  [data-motion~="pulse"] {
    box-shadow: 0 0 0 3px var(--motion-pulse-ring);
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="pulse"] {
      animation: motion-pulse var(--motion-time-pulse) ease-in-out infinite;
    }
    [data-motion~="alert"] {
      animation: motion-alert var(--motion-time-alert) ease-in-out infinite;
    }
  }
  @keyframes motion-pulse {
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--motion-pulse-ring) 45%, transparent); }
  }
  @keyframes motion-alert {
    50% { box-shadow: 0 0 0 6px var(--motion-alert-ring); }
  }

  /* ---------------------------------------------------------------
     光が走る（data-motion="shine"）
     付ける要素は、サイトの CSS で position: relative などにしておく（光は要素の中だけを通る）
     --------------------------------------------------------------- */
  [data-motion~="shine"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 35%, var(--motion-shine-color) 50%, transparent 65%) no-repeat;
    background-size: 300% 100%;
    background-position: 150% 0;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="shine"]::after {
      animation: motion-shine var(--motion-time-shine) ease-in-out infinite;
    }
  }
  @keyframes motion-shine {
    0% { background-position: 150% 0; }
    60%, 100% { background-position: -50% 0; }
  }

  /* ---------------------------------------------------------------
     背景の光がゆっくり漂う（data-motion="glow"。見えている間だけ動く）
     <div class="motion-glow" data-motion="glow" aria-hidden="true"> の中に、光（.motion-glow__light）を3つまで
     --------------------------------------------------------------- */
  .motion-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  /* 方眼（右上ほど濃く、外へ向かって消える） */
  .motion-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--glow-grid, var(--motion-glow-grid)) 1px, transparent 1px),
      linear-gradient(90deg, var(--glow-grid, var(--motion-glow-grid)) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 60% 30%, #000 10%, transparent 75%);
  }
  .motion-glow__light {
    position: absolute;
    border-radius: 50%;
    filter: blur(var(--motion-glow-blur));
    opacity: 0.55;
  }
  .motion-glow__light:nth-of-type(1) {
    right: 8%;
    top: -60px;
    width: 520px;
    height: 420px;
    background: var(--glow-1, var(--motion-glow-1));
  }
  .motion-glow__light:nth-of-type(2) {
    right: -80px;
    top: 220px;
    width: 380px;
    height: 320px;
    background: var(--glow-2, var(--motion-glow-2));
    opacity: 0.45;
  }
  .motion-glow__light:nth-of-type(3) {
    left: -140px;
    top: 60px;
    width: 420px;
    height: 300px;
    background: var(--glow-3, var(--motion-glow-3));
    opacity: 0.5;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-glow.is-playing .motion-glow__light {
      animation: motion-drift var(--motion-time-drift) ease-in-out infinite alternate;
    }
    .motion-glow.is-playing .motion-glow__light:nth-of-type(2) {
      animation-delay: -6s;
    }
    .motion-glow.is-playing .motion-glow__light:nth-of-type(3) {
      animation-delay: -11s;
    }
  }
  @keyframes motion-drift {
    to { translate: var(--motion-glow-move); scale: 1.08; }
  }

  /* ---------------------------------------------------------------
     押してほしい所を、ゆっくり光らせる（data-motion="invite"。中の要素が、少しずつずれて光る）
     どれかを押すと止まる
     --------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="invite"].is-idle > * {
      animation: motion-invite var(--motion-time-invite) ease-in-out infinite;
      animation-delay: calc(var(--m-index, 0) * var(--motion-stagger-invite));
    }
  }
  @keyframes motion-invite {
    50% { box-shadow: 0 0 0 3px var(--motion-invite-ring), 0 0 18px var(--motion-invite-ring); }
  }

  /* ---------------------------------------------------------------
     触れたときの動き：斜めの画面がまっすぐになる（"hover-tilt"）・浮く（"hover-lift"）・右へずれる（"hover-slide"）
     --------------------------------------------------------------- */
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    [data-motion~="hover-tilt"] {
      transform: perspective(var(--motion-tilt-depth)) rotateY(var(--motion-tilt-y)) rotateX(var(--motion-tilt-x));
      transform-origin: left center;
      transition: transform var(--motion-time-tilt) var(--motion-ease-glide);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="hover-lift"],
    [data-motion~="hover-slide"] {
      transition: translate var(--motion-time-lift) var(--motion-ease-glide), box-shadow var(--motion-time-lift);
    }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    [data-motion~="hover-tilt"]:hover {
      transform: none;
    }
    [data-motion~="hover-lift"]:hover {
      translate: 0 calc(var(--motion-lift) * -1);
    }
    [data-motion~="hover-slide"]:hover {
      translate: var(--motion-slide) 0;
    }
  }

  /* ---------------------------------------------------------------
     流れる文字の書き足し：逆向き（data-motion-reverse）・触れると止まる（data-motion-pause="hover"）・
     両端を薄くする（.motion-marquee--fade）
     --------------------------------------------------------------- */
  [data-motion-reverse] > .motion-marquee__track {
    animation-direction: reverse;
  }
  [data-motion-pause="hover"]:hover > .motion-marquee__track {
    animation-play-state: paused;
  }
  .motion-marquee--fade {
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  /* ---------------------------------------------------------------
     スクロールするとヘッダーに線が出る（data-motion="stuck"。.is-stuck が付く）
     --------------------------------------------------------------- */
  [data-motion~="stuck"] {
    transition: box-shadow var(--motion-time-color), background-color var(--motion-time-color);
  }
  [data-motion~="stuck"].is-stuck {
    box-shadow: 0 1px 0 var(--motion-stuck-line);
  }

  /* ---------------------------------------------------------------
     目次の今いる場所が点く（data-motion="spy"。今いる項目のリンクに .is-current と aria-current、それより前の項目に .is-done が付く）
     --------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="spy"] a {
      transition: background-color var(--motion-time-color), color var(--motion-time-color), box-shadow var(--motion-time-color), scale var(--motion-time-dots);
    }
  }

  /* ---------------------------------------------------------------
     地図（点で描いた日本地図 data-motion="map-japan"・世界地図 data-motion="map-world"）
     場所は <div class="motion-map__place" data-motion-ll="経度,緯度">。点は JavaScript が描く
     --------------------------------------------------------------- */
  .motion-map {
    position: relative;
  }
  .motion-map--japan {
    aspect-ratio: 10 / 9;
  }
  .motion-map--world {
    aspect-ratio: 360 / 130;
  }
  .motion-map__view {
    position: relative;
    overflow: hidden;
  }
  .motion-map__canvas,
  .motion-map__arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .motion-map__arcs path {
    fill: none;
    stroke: var(--motion-map-hot);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 6;
  }
  .motion-map__place {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
  }
  .motion-map__place::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--motion-map-hot);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--motion-map-hot) 30%, transparent);
  }
  .motion-map__place--home::before {
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    background: var(--motion-paper);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--motion-map-hot) 60%, transparent);
  }
  /* 幅を中身に合わせる（幅0の点に置いても、折り返さない） */
  .motion-map__label {
    position: absolute;
    left: 10px;
    top: 4px;
    width: max-content;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
  }
  /* 名前を点の左に置く */
  .motion-map__place--left .motion-map__label {
    left: auto;
    right: 10px;
  }
  .motion-map__friend {
    position: absolute;
    left: calc(var(--ball-size, var(--motion-ball-size)) / -2);
    top: calc(var(--ball-size, var(--motion-ball-size)) * -1.7);
    transform: scale(0);
  }
  .motion-map__bubble {
    position: absolute;
    left: 14px;
    width: max-content;
    bottom: calc(var(--ball-size, var(--motion-ball-size)) * 1.9);
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--motion-paper);
    color: var(--motion-ink);
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    box-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
    opacity: 0;
    pointer-events: none;
  }
  .motion-map__bubble::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -7px;
    border: 7px solid transparent;
    border-top-color: var(--motion-paper);
    border-bottom: 0;
  }
  .motion-map__place.is-flip .motion-map__bubble {
    left: auto;
    right: 14px;
  }
  .motion-map__place.is-flip .motion-map__bubble::after {
    left: auto;
    right: 10px;
  }
  .motion-map__traveler {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
  }
  /* 日本地図の場所：色が届いたら、点と名前が出る */
  .motion-map--japan .motion-map__place::before {
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    background: var(--motion-paper);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--motion-paper) 25%, transparent);
  }
  .motion-js .motion-map--japan .motion-map__place:not(.is-lit)::before {
    scale: 0;
  }
  .motion-js .motion-map--japan .motion-map__place:not(.is-lit) .motion-map__label {
    opacity: 0;
    translate: 0 4px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-map--japan .motion-map__place::before {
      transition: scale var(--motion-time-bounce) var(--motion-ease-bounce);
    }
    .motion-map--japan .motion-map__label {
      transition: opacity var(--motion-time-show), translate var(--motion-time-show);
    }
  }
  /* JavaScript が動かないときは、地図の代わりに、場所の名前を並べて見せる */
  html:not(.motion-js) .motion-map {
    aspect-ratio: auto;
  }
  html:not(.motion-js) :is(.motion-map__canvas, .motion-map__arcs, .motion-map__traveler, .motion-map__friend, .motion-map__bubble) {
    display: none;
  }
  html:not(.motion-js) .motion-map__place {
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 16px 8px 0;
  }
  html:not(.motion-js) .motion-map__place::before {
    display: none;
  }
  html:not(.motion-js) .motion-map__label {
    position: static;
  }

  /* =================================================================
     ここから：マネジメントは、面白い。のサイトから足した部品（版 1.4）
     写真を止めて、1枚ずつ見せる部品（data-motion="film"）は、FY2026下期経営説明会のサイトから足した部品
     ================================================================= */

  /* ---------------------------------------------------------------
     見出しの行が、左右から寄ってくる（data-motion="lines-in"。中の要素1つが1行）
     奇数行は右から、偶数行は左から。進み具合（--m-in：0〜1）は JavaScript が書く
     行は画面の横にはみ出して待つので、ページの外側（main など）に overflow-x: clip を付ける
     --------------------------------------------------------------- */
  [data-motion~="lines-in"] > * {
    display: block;
    translate: calc((1 - var(--m-in, 1)) * var(--motion-lines-shift)) 0;
  }
  [data-motion~="lines-in"] > :nth-child(even) {
    translate: calc((var(--m-in, 1) - 1) * var(--motion-lines-shift)) 0;
  }

  /* ---------------------------------------------------------------
     吹き出しが、根元からふくらむ（data-motion="bubble-in"。中の要素1つが1つの吹き出し）
     奇数番目は左、偶数番目は右に寄せ、それぞれ下の角からふくらむ。進み具合（--m-in）は1つずつ JavaScript が書く
     --------------------------------------------------------------- */
  [data-motion~="bubble-in"] {
    position: relative;
  }
  [data-motion~="bubble-in"] > * {
    width: fit-content;
    max-width: 100%;
    transform-origin: 0 100%;
    scale: calc(var(--motion-bubble-from) + (1 - var(--motion-bubble-from)) * var(--m-in, 1));
    translate: 0 calc((1 - var(--m-in, 1)) * var(--motion-bubble-rise));
  }
  [data-motion~="bubble-in"] > :nth-child(even) {
    margin-left: auto;
    transform-origin: 100% 100%;
  }

  /* ---------------------------------------------------------------
     写真を止めて、1枚ずつ見せる（data-motion="film"）
     画面を止めて進める部品（pin）の中に置き、段階の数を写真の枚数にそろえる。
     <div class="motion-film" data-motion="film"><div class="motion-film__strip"><figure class="motion-film__frame">…</figure>…</div></div>
     列の位置・写真のぼかしと濃さは JavaScript が書く。data-motion-stack で、同じ場所で入れ替える
     --------------------------------------------------------------- */
  .motion-film {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
  }
  .motion-film__strip {
    display: flex;
    width: max-content;
  }
  .motion-film__frame {
    flex: none;
    width: var(--motion-film-width);
  }
  .motion-film__frame img {
    display: block;
    width: 100%;
  }
  .motion-film--stack .motion-film__strip {
    display: grid;
    width: auto;
  }
  .motion-film--stack .motion-film__frame {
    grid-area: 1 / 1;
    justify-self: center;
  }
  /* JavaScript が動かないときは、指で横に送れる列にする */
  html:not(.motion-js) .motion-film {
    overflow-x: auto;
  }

  /* ---------------------------------------------------------------
     図を止めて、文を読み進める（data-motion="steps"）
     図（.motion-steps__figure）を上に止め、文（.motion-steps__step）が下を通る。
     読んだ文に .is-on、今の文に .is-current。図の中の要素は data-motion-in="文の番号" で現れる（.is-shown）
     --------------------------------------------------------------- */
  .motion-steps__figure {
    position: sticky;
    top: var(--steps-top, var(--motion-steps-top));
    z-index: 2;
    background: var(--m-bg, var(--motion-step-figure-bg));
  }
  .motion-steps__step {
    position: relative;
    padding-left: calc(var(--motion-step-bar) + var(--motion-step-indent));
  }
  .motion-steps__step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: var(--motion-step-bar);
    border-radius: var(--motion-step-bar);
    background: currentColor;
    transform-origin: 50% 0;
  }
  .motion-steps__mark {
    padding-inline: 0.08em;
    background: linear-gradient(var(--motion-step-mark-color), var(--motion-step-mark-color)) no-repeat 0 92% / 100% var(--motion-step-mark);
  }
  .motion-js .motion-steps__step:not(.is-on)::before {
    scale: 1 0;
  }
  /* 文の左の線を使わない（版 1.6） */
  .motion-steps--plain .motion-steps__step {
    padding-left: 0;
  }
  .motion-steps--plain .motion-steps__step::before {
    content: none;
  }
  .motion-js .motion-steps__step:not(.is-on) .motion-steps__mark {
    background-size: 0% var(--motion-step-mark);
  }
  .motion-js .motion-steps [data-motion-in]:not(.is-shown) {
    opacity: 0;
    visibility: hidden;
    translate: 0 8px;
    filter: blur(4px);
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-steps__step::before {
      transition: scale var(--motion-time-step-bar) var(--motion-ease-step);
    }
    .motion-steps__mark {
      transition: background-size var(--motion-time-step-mark) var(--motion-ease-step);
    }
    .motion-steps [data-motion-in] {
      transition:
        opacity var(--motion-time-step-in) var(--motion-ease-step),
        translate var(--motion-time-step-in) var(--motion-ease-step),
        filter var(--motion-time-step-in) var(--motion-ease-step),
        visibility 0s;
    }
    .motion-steps [data-motion-in]:not(.is-shown) {
      transition-duration: var(--motion-time-step-out), var(--motion-time-step-out), var(--motion-time-step-out), 0s;
      transition-delay: 0s, 0s, 0s, var(--motion-time-step-out);
    }
  }

  /* ---------------------------------------------------------------
     スクロールの勢いに反応する（data-motion="speed"）
     勢い（--m-speed：0〜1）と、段階（data-speed：0 止まっている・1 動いている・2 速い）が付く。
     中の .motion-speed__shake は勢いに合わせて震え、.motion-speed__strain は力を入れて縦に縮む
     --------------------------------------------------------------- */
  .motion-speed__strain {
    transform-origin: 50% 100%;
    scale: calc(1 - var(--m-speed, 0) * var(--motion-strain)) calc(1 + var(--m-speed, 0) * var(--motion-strain));
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-speed]:not([data-speed="0"]) .motion-speed__shake {
      animation: motion-shake var(--motion-time-shake) linear infinite;
    }
  }
  @keyframes motion-shake {
    0%, 100% { translate: calc(var(--m-speed, 0) * var(--motion-shake) * -1) 0; }
    50% { translate: calc(var(--m-speed, 0) * var(--motion-shake)) 0; }
  }

  /* ---------------------------------------------------------------
     章の点（.motion-dots に data-motion="spy"。中のリンク1つが1つの点）
     読み終えた章（.is-done）と今の章（.is-current）を塗り、今の章を大きくする
     --------------------------------------------------------------- */
  .motion-dots {
    display: flex;
    align-items: center;
    gap: var(--motion-dots-gap);
  }
  .motion-dots > a {
    position: relative;
    width: var(--motion-dots-size);
    height: var(--motion-dots-size);
    border: 1.5px solid currentColor;
    border-radius: 50%;
  }
  /* 押せる広さは、見た目より広くとる */
  .motion-dots > a::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .motion-dots > :is(.is-done, .is-current) {
    background: currentColor;
  }
  .motion-dots > .is-current {
    scale: var(--motion-dots-now);
  }

  /* ---------------------------------------------------------------
     日本語と英語を切り替える（data-motion="lang" をボタンに付ける。切り替える範囲に data-lang="ja" / "en" が付く）
     範囲の中に lang="ja" と lang="en" の要素を対にして書き、今の言語ではない方を隠す。
     別の言語の要素の中にあるもの（日本語の文の中の英単語など）と、ボタンの中は隠さない。範囲そのものには lang を付けない
     --------------------------------------------------------------- */
  [data-lang="ja"] [lang="en"]:not(body [lang] [lang], [data-motion~="lang"] *),
  [data-lang="en"] [lang="ja"]:not(body [lang] [lang], [data-motion~="lang"] *) {
    display: none;
  }

  /* =================================================================
     ここから：NowTech のサイトから足した部品（版 1.5）
     ================================================================= */

  /* ---------------------------------------------------------------
     ヘッダーのカテゴリに、マウスを重ねて開く（data-motion="menu"）
     <nav class="motion-menu" data-motion="menu">
       <div class="motion-menu__cat">
         <button class="motion-menu__button" type="button" aria-expanded="false" aria-controls="一覧の id">名前<span class="motion-menu__mark" aria-hidden="true"></span></button>
         <div class="motion-menu__panel" id="一覧の id" role="group" aria-label="名前"><div class="motion-menu__links"><a href="…">…</a></div></div>
       </div>
     </nav>
     開いているカテゴリに .is-open。右の端からはみ出すときは、一覧に .is-right（右にそろえる）。
     motion-menu--stack：縦に並べ、押すと、その下に開く（スマホのメニュー）。JavaScript が動かないときは、全部開いておく
     --------------------------------------------------------------- */
  .motion-menu__cat {
    position: relative;
  }
  .motion-menu__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .motion-menu__mark {
    position: relative;
    flex: none;
    width: var(--motion-menu-mark);
    height: var(--motion-menu-mark);
  }
  .motion-menu__mark::before,
  .motion-menu__mark::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    margin-top: -0.75px;
    border-radius: 1px;
    background: currentColor;
  }
  .motion-menu__links {
    display: grid;
    gap: 2px;
  }
  .motion-menu__panel a {
    display: block;
    padding: 10px 14px;
    border-radius: 9px;
    color: inherit;
    line-height: 1.5;
    text-decoration: none;
  }
  .motion-menu__panel a:focus-visible {
    outline: 2px solid var(--motion-menu-hover);
    outline-offset: -2px;
  }
  @media (hover: hover) {
    .motion-menu__panel a:hover {
      background: color-mix(in srgb, var(--motion-menu-hover) 10%, transparent);
      color: var(--motion-menu-hover);
    }
  }
  /* 下に開く一覧 */
  .motion-menu:not(.motion-menu--stack) .motion-menu__panel {
    position: absolute;
    top: calc(100% + var(--motion-menu-gap));
    left: -16px;
    z-index: 80;
    min-width: var(--motion-menu-width);
    padding: 8px;
    border: 1px solid var(--motion-menu-line);
    border-radius: 14px;
    background: var(--motion-menu-bg);
    box-shadow: var(--motion-menu-shadow);
    color: var(--motion-menu-ink);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    translate: 0 calc(var(--motion-menu-rise) * -1);
  }
  /* カテゴリと一覧の間のすき間でも、マウスが外れたことにしない */
  .motion-menu:not(.motion-menu--stack) .motion-menu__panel::before {
    content: "";
    position: absolute;
    inset: calc(var(--motion-menu-gap) * -1 - 2px) 0 100%;
  }
  .motion-menu:not(.motion-menu--stack) .motion-menu__panel.is-right {
    left: auto;
    right: -16px;
  }
  .motion-menu:not(.motion-menu--stack) .motion-menu__cat.is-open > .motion-menu__panel,
  html:not(.motion-js) .motion-menu:not(.motion-menu--stack) .motion-menu__cat:is(:hover, :focus-within) > .motion-menu__panel {
    opacity: 1;
    visibility: visible;
    translate: none;
  }
  .motion-menu:not(.motion-menu--stack) .motion-menu__mark::before {
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -4.5px 0 0 -3px;
    border-right: 1.5px solid;
    border-bottom: 1.5px solid;
    border-radius: 0;
    background: none;
    rotate: 45deg;
  }
  .motion-menu:not(.motion-menu--stack) .motion-menu__mark::after {
    display: none;
  }
  .motion-menu:not(.motion-menu--stack) [aria-expanded="true"] > .motion-menu__mark::before {
    margin-top: -1.5px;
    rotate: 225deg;
  }
  /* 縦に並べたメニュー：押したカテゴリの下に開き、後ろのカテゴリを押し下げる */
  .motion-menu--stack .motion-menu__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
  }
  .motion-menu--stack .motion-menu__panel > * {
    min-height: 0;
    overflow: hidden;
  }
  .motion-menu--stack .motion-menu__cat.is-open > .motion-menu__panel,
  html:not(.motion-js) .motion-menu--stack .motion-menu__panel {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .motion-menu--stack .motion-menu__mark::after {
    rotate: 90deg;
  }
  .motion-menu--stack [aria-expanded="true"] > .motion-menu__mark::after {
    rotate: 0deg;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-menu:not(.motion-menu--stack) .motion-menu__panel {
      transition: opacity var(--motion-time-menu-fade) ease, translate var(--motion-time-menu) var(--motion-ease-menu), visibility 0s linear var(--motion-time-menu);
    }
    .motion-menu:not(.motion-menu--stack) .motion-menu__cat.is-open > .motion-menu__panel {
      transition-delay: 0s;
    }
    .motion-menu--stack .motion-menu__panel {
      transition: grid-template-rows var(--motion-time-menu-stack) var(--motion-ease-in-out), visibility 0s linear var(--motion-time-menu-stack);
    }
    .motion-menu--stack .motion-menu__cat.is-open > .motion-menu__panel {
      transition-delay: 0s;
    }
    .motion-menu__mark::before,
    .motion-menu__mark::after {
      transition: rotate var(--motion-time-menu) ease, margin var(--motion-time-menu) ease;
    }
  }

  /* ---------------------------------------------------------------
     入口を選ぶと、合うものだけに絞り込む（data-motion="filter"）
     入口：.motion-filter__key（data-motion-key="1"。押すと aria-pressed）
     一覧：.motion-filter__list の中の .motion-filter__item（data-motion-main="1" data-motion-sub="2,3"）
     選ぶと、項目に .is-main（中心になる）・.is-sub（組み合わせる）・.is-out（合わない）が付き、
     data-motion-key を書いたほかの要素（表の列の升など）は、選んだ入口のものに .is-key が付く。
     広い画面：合わないものを薄くする。もう一度押すと、選ぶ前に戻る。
     狭い画面（--motion-filter-required が 1）：いつも1つを選び、合わないものを隠して、中心になるものを先に並べ、順に現れ直す
     --------------------------------------------------------------- */
  .motion-filter__list {
    display: grid;
  }
  .motion-filter__item.is-out {
    opacity: var(--motion-filter-dim);
  }
  .motion-filter [data-motion-key].is-key {
    background: var(--motion-filter-hl);
  }
  @media (max-width: 767px) {
    .motion-filter__item.is-out {
      display: none;
    }
    .motion-filter__item.is-main {
      order: -1;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-filter__item {
      transition: opacity var(--motion-time-filter);
    }
    .motion-filter [data-motion-key] {
      transition: background-color var(--motion-time-filter);
    }
    .motion-filter__item.is-enter {
      animation: motion-filter-in var(--motion-time-filter-in) var(--motion-ease-menu) calc(var(--m-i, 0) * var(--motion-stagger-filter)) both;
    }
  }
  @keyframes motion-filter-in {
    from { opacity: 0; translate: 0 var(--motion-filter-rise); }
  }

  /* ---------------------------------------------------------------
     上へ戻ると、上の帯が出てくる（data-motion="dock"）
     読み進めると、下に次の一歩の帯が出る（data-motion="next-bar"。class="motion-next"）
     出ている間は .is-on（隠れている間は inert で、押せない・読み上げない）。上の帯が出ている間は、
     ページ（follow の枠）の --motion-dock-offset に帯の高さが入る。ページ内リンクで移ったときに帯で隠れないよう、
     サイトの CSS で html { scroll-padding-top: var(--motion-dock-offset, 0px); } とする。
     枠の中に置くときは motion-dock--contained・motion-next--contained。
     帯の地とぼかしは、帯に style="--bar-bg: …; --bar-blur: …" で変えられる（中に浮かぶタブを置くときは transparent と 0px。版 1.7）
     --------------------------------------------------------------- */
  .motion-dock,
  .motion-next {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 8000;
    background: var(--bar-bg, var(--motion-dock-bg));
    -webkit-backdrop-filter: blur(var(--bar-blur, var(--motion-dock-blur)));
    backdrop-filter: blur(var(--bar-blur, var(--motion-dock-blur)));
  }
  .motion-dock {
    top: 0;
    translate: 0 -105%;
  }
  .motion-next {
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    translate: 0 110%;
  }
  .motion-dock.is-on,
  .motion-next.is-on {
    translate: none;
  }
  .motion-dock--contained,
  .motion-next--contained {
    position: absolute;
  }
  html:not(.motion-js) :is(.motion-dock, .motion-next) {
    display: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-dock,
    .motion-next {
      transition: translate var(--motion-time-dock) var(--motion-ease-menu);
    }
  }

  /* ---------------------------------------------------------------
     文節ごとに、ふわりと浮かび上がる（data-motion="phrases"。見出しや短い文に付ける）
     data-motion-mode：float（文節ごと。初期値）・rise（、。で区切ったまとまりごと）・
       tint（文はそのまま、.motion-phrases__key の言葉だけ色が順に変わる）・seq（data-motion-part を順に出す）
     もう通り過ぎた見出しは動かさずに出し、速くスクロールしてきたときは短く動かす（.is-fast）
     --------------------------------------------------------------- */
  .motion-phrases__piece {
    display: inline-block;
    max-width: 100%;
  }
  .motion-phrases__key {
    font-style: normal;
  }
  html:not(.motion-js) .motion-phrases__key,
  [data-motion~="phrases"][data-motion-mode="tint"].is-inview .motion-phrases__key {
    color: var(--motion-phrases-key);
  }
  @media (prefers-reduced-motion: reduce) {
    .motion-phrases__key {
      color: var(--motion-phrases-key);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="phrases"][data-motion-mode="float"] .motion-phrases__piece {
      transform-origin: 0 100%;
      transition: opacity var(--motion-time-phrases-fade) ease, transform var(--motion-time-phrases-move) var(--motion-ease-phrases), filter var(--motion-time-phrases-focus) ease;
      transition-delay: calc(var(--m-i, 0) * var(--m-step, 70ms));
    }
    [data-motion~="phrases"][data-motion-mode="float"]:not(.is-inview) .motion-phrases__piece {
      opacity: 0;
      transform: translateY(var(--motion-phrases-rise)) rotate(var(--motion-phrases-tilt)) scale(0.985);
      filter: blur(var(--motion-phrases-blur));
    }
    [data-motion~="phrases"][data-motion-mode="rise"] .motion-phrases__piece,
    [data-motion~="phrases"][data-motion-mode="seq"] [data-motion-part] {
      transition: opacity var(--motion-time-phrases-rise-fade) ease, transform var(--motion-time-phrases-rise-move) var(--motion-ease-phrases);
      transition-delay: calc(var(--m-i, 0) * var(--m-step, 130ms));
    }
    [data-motion~="phrases"][data-motion-mode="rise"]:not(.is-inview) .motion-phrases__piece {
      opacity: 0;
      transform: translateY(var(--motion-phrases-rise-clause));
    }
    .motion-js [data-motion~="phrases"][data-motion-mode="seq"]:not(.is-inview) [data-motion-part] {
      opacity: 0;
      transform: translateY(var(--motion-phrases-rise-part));
    }
    [data-motion~="phrases"][data-motion-mode="tint"] .motion-phrases__key {
      transition: color var(--motion-time-phrases-color) ease calc(250ms + var(--m-i, 0) * var(--m-step, 650ms));
    }
    [data-motion~="phrases"].is-fast :is(.motion-phrases__piece, [data-motion-part], .motion-phrases__key) {
      transition-duration: var(--motion-time-phrases-fast);
      transition-delay: 0s;
    }
  }

  /* ---------------------------------------------------------------
     場面に合わせて、背景の光が混ざり合う（data-motion="wash"。ページの後ろに置く）
     <div class="motion-wash" data-motion="wash" aria-hidden="true"><div class="motion-wash__layer"></div>…</div>
     光の層の色（radial-gradient など）は、サイトの CSS で、層ごとに書く。
     区切り（section など）に data-motion-tone="層の番号" を書くと、画面の上から3割の所にある区切りの間で、2つの光を混ぜる
     --------------------------------------------------------------- */
  .motion-wash {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }
  .motion-wash--contained {
    position: absolute;
  }
  .motion-wash__layer {
    position: absolute;
    inset: -10%;
    opacity: 0;
    will-change: opacity;
  }
  .motion-wash__layer:first-child {
    opacity: 1;
  }

  /* ---------------------------------------------------------------
     スクロールで、連番の画像をコマ送りする（data-motion="frames"。画面を止めて進める部品 pin の中に置く）
     <div class="motion-frames" data-motion="frames" data-motion-src="frames/wall-{n}.webp" data-motion-count="126" data-motion-pad="3" data-motion-breaks="40, 70, 96">
       <img class="motion-frames__still" src="frames/wall-125.webp" alt="…" width="…" height="…">
     </div>
     コマは canvas に描く（JavaScript が足す）。最初のコマが届くまでと、動きを減らす設定の端末・JavaScript なしでは、
     .motion-frames__still の画像を見せる。区切りを越えた数で、pin の中の data-motion-break="1" の要素・
     .motion-frames__meter の中の要素に .is-on が付き、.motion-frames__count に「越えた数 / 区切りの数」が入る（data-motion-label で前に言葉を付ける）。
     motion-frames--pan：狭い画面では、画像を高く大きく見せて、進むにつれて横に動かす
     --------------------------------------------------------------- */
  .motion-frames {
    display: grid;
    overflow: hidden;
    container-type: inline-size;
  }
  .motion-frames > :is(.motion-frames__still, .motion-frames__canvas) {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: auto;
    translate: calc((100cqw - 100%) * var(--m-pan, 0)) 0;
  }
  .motion-frames:not(.is-ready) > .motion-frames__canvas {
    display: none;
  }
  .motion-frames.is-ready > .motion-frames__still {
    visibility: hidden;
  }
  @media (max-width: 767px) {
    .motion-frames--pan > :is(.motion-frames__still, .motion-frames__canvas) {
      width: auto;
      max-width: none;
      height: var(--motion-frames-pan-height);
    }
  }

  /* ---------------------------------------------------------------
     スクロールで、予定表の棒が伸びる（data-motion="gantt"）
     <div class="motion-gantt" data-motion="gantt" style="--gantt-cols: 6">
       <div class="motion-gantt__head"><span>1か月目</span>…</div>
       <div class="motion-gantt__row" style="--gantt-start: 0; --gantt-length: 1">
         <p class="motion-gantt__label">要件の整理</p><div class="motion-gantt__track"><i class="motion-gantt__bar"></i></div>
       </div>
     </div>
     棒の地の色は、行ごとに style="--gantt-track: …" でも変えられる（版 1.7）。
     棒の伸び具合（--m-fill：0〜1）は JavaScript が書く。始まった行に .is-on、今の列の見出しに .is-current。
     動きを減らす設定の端末と JavaScript なしでは、全部伸びた形で見せる
     --------------------------------------------------------------- */
  .motion-gantt__track {
    position: relative;
    min-height: calc(var(--motion-gantt-bar) + 16px);
  }
  .motion-gantt__bar {
    position: absolute;
    top: 50%;
    left: calc(var(--gantt-start, 0) / var(--gantt-cols, 1) * 100% + 3px);
    width: calc(var(--gantt-length, 1) / var(--gantt-cols, 1) * 100% - 6px);
    height: var(--motion-gantt-bar);
    margin-top: calc(var(--motion-gantt-bar) / -2);
    overflow: hidden;
    border-radius: 999px;
    background: var(--gantt-track, var(--motion-gantt-track));
  }
  .motion-gantt__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gantt-color, var(--motion-gantt-fill));
    transform-origin: left;
    scale: var(--m-fill, 1) 1;
  }
  .motion-gantt.is-scrubbed .motion-gantt__row:not(.is-on) .motion-gantt__label {
    opacity: var(--motion-gantt-wait);
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-gantt__bar::after {
      transition: scale var(--motion-time-gantt) linear;
    }
    .motion-gantt__label,
    .motion-gantt__head > * {
      transition: opacity var(--motion-time-gantt-label), color var(--motion-time-gantt-label);
    }
  }

  /* ---------------------------------------------------------------
     ページの最後で、もうひと押しするとお礼が出る（data-motion="thanks"。ページのいちばん最後に置く）
     いちばん下に着いてから、もう一度下へ（ホイール・指・↓キー）送ると、.is-on が付いて、線と文が広がる。
     JavaScript が動かないときは、最初から見せる
     --------------------------------------------------------------- */
  .motion-thanks {
    display: block;
    max-height: var(--motion-thanks-height);
    overflow: hidden;
    text-align: center;
  }
  .motion-thanks::before {
    content: "";
    display: block;
    width: var(--motion-thanks-line);
    height: 2px;
    margin: 0 auto 18px;
    border-radius: 2px;
    background: var(--motion-thanks-color);
    box-shadow: 0 0 14px color-mix(in srgb, var(--motion-thanks-color) 60%, transparent);
  }
  .motion-js .motion-thanks:not(.is-on) {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
  }
  .motion-js .motion-thanks:not(.is-on)::before {
    width: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js .motion-thanks {
      transition: max-height var(--motion-time-thanks-open) ease, padding var(--motion-time-thanks-open) ease, opacity var(--motion-time-thanks-fade) ease 0.25s;
    }
    .motion-js .motion-thanks::before {
      transition: width var(--motion-time-thanks-line) ease 0.5s;
    }
  }

  /* ---------------------------------------------------------------
     夜や記念日だけ、言葉や飾りが出る（data-motion="moment"。HTML では hidden を付けておく）
     data-motion-hours="22-4"（22時から4時）・data-motion-date="4/1"。見る人の端末の時刻で決め、合えば出して .is-on。
     motion-moment--badge：札が、ぽんとはずんで出る。data-motion-pop="#ロゴ" で、そのロゴが揺れ、まわりへ紙吹雪が飛ぶ
     （マウスを重ねると、もう一度）。紙吹雪の色は --motion-confetti-colors
     --------------------------------------------------------------- */
  .motion-moment:not(.is-on) {
    opacity: 0;
    translate: 0 4px;
  }
  .motion-moment--badge:not(.is-on) {
    translate: none;
    scale: 0.6;
  }
  .motion-pop {
    position: fixed;
    z-index: 9003;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .motion-pop > i {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 10px;
    border-radius: 2px;
    background: var(--m-color);
    opacity: 0;
    animation: motion-pop-out var(--motion-time-pop-out) var(--motion-ease-pop-out) var(--m-delay, 0s) forwards;
  }
  .motion-pop > i.is-round {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-moment {
      transition: opacity var(--motion-time-moment) ease, translate var(--motion-time-moment) ease;
    }
    .motion-moment--badge {
      transition: opacity 0.5s ease 0.5s, scale var(--motion-time-badge) var(--motion-ease-badge) 0.5s;
    }
    .motion-wiggle {
      animation: motion-wiggle var(--motion-time-wiggle) ease 0.2s 1;
    }
  }
  @keyframes motion-wiggle {
    0%, 100% { transform: none; }
    20% { transform: rotate(-4deg) scale(1.04); }
    45% { transform: rotate(3deg) scale(1.04); }
    70% { transform: rotate(-1.5deg); }
  }
  @keyframes motion-pop-out {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--m-dx)), calc(-50% + var(--m-dy))) scale(1) rotate(var(--m-rot)); }
  }

  /* ---------------------------------------------------------------
     写真が、読み込めてから静かに現れる（data-motion="photo-in"。写真の枠 figure か、img に付ける）
     画面の 800px 手前で読み込み始め、写真が届いてから、下から上がりながら濃くなる（中の写真は、少し寄った大きさから戻る）。
     開いたときに見えていて、もう届いている写真は、動かさずに出す
     --------------------------------------------------------------- */
  [data-motion~="photo-in"]:not(img) {
    overflow: hidden;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="photo-in"] {
      transition: opacity var(--motion-time-photo) ease, translate var(--motion-time-photo) var(--motion-ease-menu);
    }
    .motion-js [data-motion~="photo-in"]:not(.is-in) {
      opacity: 0;
      translate: 0 var(--motion-photo-rise);
    }
    .motion-js [data-motion~="photo-in"] img {
      transition: scale var(--motion-time-photo-zoom) var(--motion-ease-menu);
    }
    .motion-js [data-motion~="photo-in"]:not(.is-in) img {
      scale: var(--motion-photo-zoom);
    }
  }

  /* ---------------------------------------------------------------
     同じものに触れると、ほかの場所でも点く（data-motion="cross-light"。いくつものカードを囲む要素に付ける）
     中のリンクやボタンに data-motion-same="名前" を書く。マウスを重ねるか、キーボードで選ぶと、同じ名前のものが全部 .is-lit になる
     --------------------------------------------------------------- */
  [data-motion~="cross-light"] [data-motion-same].is-lit {
    background: var(--motion-same-bg);
    box-shadow: inset 0 0 0 1.5px var(--motion-same-line);
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="cross-light"] [data-motion-same] {
      transition: background-color var(--motion-time-same), box-shadow var(--motion-time-same);
    }
  }

  /* ---------------------------------------------------------------
     横に動かせる一覧の、今の位置の点（.motion-hscroll の中に <div class="motion-hscroll__dots"></div> を置く。版 1.5）
     点と「1 / 3」は JavaScript が作る。今の点は aria-current="true" で、横に伸びる。横に動かせないときは出さない
     --------------------------------------------------------------- */
  .motion-hscroll__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .motion-hscroll:not(.is-scrollable) .motion-hscroll__dots {
    display: none;
  }
  .motion-hscroll__dot {
    position: relative;
    width: var(--motion-dots-dot);
    height: var(--motion-dots-dot);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--motion-dots-color);
    opacity: 0.3;
    cursor: pointer;
  }
  /* 押せる広さは、見た目より広くとる */
  .motion-hscroll__dot::after {
    content: "";
    position: absolute;
    inset: -12px -3px;
  }
  .motion-hscroll__dot[aria-current="true"] {
    width: var(--motion-dots-dot-now);
    opacity: 1;
  }
  .motion-hscroll__count {
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-hscroll__dot {
      transition: width var(--motion-time-dots-dot) ease, opacity var(--motion-time-dots-dot) ease;
    }
  }

  /* 横に並べるタブ（.motion-tabs__list に motion-tabs__list--row。版 1.5） */
  .motion-tabs__list--row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* ---------------------------------------------------------------
     LINE のようなやりとり：版 1.5 で足したもの
     .motion-chat__result（吹き出しの下の「その段階で分かること」）・.motion-chat__progress（進み具合の印。中の要素が .is-done・.is-current）・
     .motion-chat__all（「最後まで表示する」ボタン。流し終えたら隠す）・.motion-chat__end（流し終えてから見せる案内）
     --------------------------------------------------------------- */
  .motion-chat__msg:has(> .motion-chat__result) {
    grid-template-areas:
      "avatar name name"
      "avatar bubble meta"
      "avatar result result";
  }
  .motion-chat__result {
    grid-area: result;
    margin: 4px 0 0;
    padding: 2px 0 2px 10px;
    border-left: 3px solid var(--motion-chat-result);
    line-height: 1.6;
  }
  .motion-chat__progress {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .motion-js [data-motion~="chat"]:not(.is-done) .motion-chat__end,
  [data-motion~="chat"].is-done .motion-chat__all,
  html:not(.motion-js) .motion-chat__all {
    display: none;
  }

  /* ---------------------------------------------------------------
     動画は、見えている間だけ再生する（<video> に data-motion="in-view"。版 1.5）
     ファイルは <source data-src="…"> に書くと、初めて再生するときに読む。音は出さない（muted）。
     見えなくなる・別のタブに移ると止める。動きを減らす設定・通信量を抑える設定の端末では、自動で再生しない。
     終わると .is-ended、読み込めないと .is-error が付く（後ろに置いた .motion-video__status--ended・--error が出る）
     --------------------------------------------------------------- */
  .motion-video__status {
    display: none;
  }
  video.is-ended ~ .motion-video__status--ended,
  video.is-error ~ .motion-video__status--error {
    display: block;
  }

  /* ---------------------------------------------------------------
     手書きの文字が、1文字ずつ書かれる（data-motion="hand"。版 1.6）
     手書きの字体で表示し、画面に入ると、1文字ずつペンで書いたように現れる。日本語は文節、英語は単語の途中で折り返さない。
     色はサイトの CSS で style="--hand-color: …" のように変える。字体のファイルは、自社のサーバーに置いて @font-face で読む
     --------------------------------------------------------------- */
  [data-motion~="hand"] {
    color: var(--hand-color, var(--motion-hand-ink));
    font-family: var(--motion-font-hand);
    font-weight: 400;
    letter-spacing: 0.04em;
  }
  [data-motion~="hand"]:lang(en),
  [data-motion~="hand"] :lang(en) {
    font-family: var(--motion-font-hand-en);
    letter-spacing: 0;
  }
  .motion-hand__word,
  .motion-hand__ch {
    display: inline-block;
  }
  .motion-hand__word {
    white-space: nowrap;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="hand"]:not(.is-inview) .motion-hand__ch {
      opacity: 0;
    }
    .motion-js [data-motion~="hand"].is-inview .motion-hand__ch {
      animation: motion-ink var(--motion-time-hand) var(--motion-ease-ink) both;
      animation-delay: calc(var(--m-i, 0) * var(--m-stagger, var(--motion-time-hand-char)) + var(--m-delay, 0s));
    }
  }
  @keyframes motion-ink {
    0% { opacity: 0; transform: translateY(0.25em) rotate(-8deg) scale(0.7); filter: blur(3px); }
    60% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
  }

  /* ---------------------------------------------------------------
     写真の上に、吹き出しが順に出る（data-motion="photo-talk"。版 1.6）
     吹き出し（.motion-photo-talk__bubble）は、根元の先の位置を、写真の左上からの % で書く（style="--m-x: 40; --m-y: 11"）。
     根元の向き：--ul（左上へのびる）・--ur・--l・--r・--dl・--dr。考えている吹き出し：--think。スマホで隠す吹き出し：--sub。
     チェックの丸：.motion-photo-talk__ok。写真がゆっくり呼吸する：.motion-photo-talk--breathe（写真を包む枠に overflow: hidden）。
     吹き出しは写真からはみ出さないよう、横にずらす（--m-nx）。位置を変えるときは style="--talk-position: absolute"
     --------------------------------------------------------------- */
  [data-motion~="photo-talk"] {
    position: var(--talk-position, relative);
  }
  .motion-photo-talk__layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }
  .motion-photo-talk__bubble {
    position: absolute;
    left: calc(var(--m-x, 50) * 1%);
    top: calc(var(--m-y, 50) * 1%);
    width: max-content;
    max-width: var(--motion-talk-max);
    margin: 0 0 0 var(--m-nx, 0px);
    padding: 0.55em 0.95em;
    border-radius: var(--motion-talk-radius);
    background: var(--motion-talk-bg);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    box-shadow: var(--motion-talk-shadow);
    color: var(--motion-talk-ink);
    font-weight: 700;
    line-height: 1.45;
    translate: var(--m-tx, 0%) var(--m-ty, -100%);
    transform-origin: var(--m-to, 0% 100%);
  }
  .motion-photo-talk__bubble--ul { --m-tx: -100%; --m-ty: -100%; --m-to: 100% 100%; border-bottom-right-radius: var(--motion-talk-tail); }
  .motion-photo-talk__bubble--ur { --m-tx: 0%; --m-ty: -100%; --m-to: 0% 100%; border-bottom-left-radius: var(--motion-talk-tail); }
  .motion-photo-talk__bubble--l { --m-tx: -100%; --m-ty: -50%; --m-to: 100% 50%; border-top-right-radius: var(--motion-talk-tail); }
  .motion-photo-talk__bubble--r { --m-tx: 0%; --m-ty: -50%; --m-to: 0% 50%; border-top-left-radius: var(--motion-talk-tail); }
  .motion-photo-talk__bubble--dl { --m-tx: -100%; --m-ty: 0%; --m-to: 100% 0%; border-top-right-radius: var(--motion-talk-tail); }
  .motion-photo-talk__bubble--dr { --m-tx: 0%; --m-ty: 0%; --m-to: 0% 0%; border-top-left-radius: var(--motion-talk-tail); }
  /* 考えている吹き出し：角を立てずに、根元の側へ小さな丸を2つ */
  .motion-photo-talk__bubble--think {
    border-radius: calc(var(--motion-talk-radius) + 2px);
    background: var(--motion-talk-think-bg);
    color: var(--motion-talk-think-ink);
    font-weight: 500;
  }
  .motion-photo-talk__bubble--think::before,
  .motion-photo-talk__bubble--think::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--motion-talk-dot);
    box-shadow: 0 2px 6px rgb(10 50 90 / 0.2);
  }
  .motion-photo-talk__bubble--think::after { width: 10px; height: 10px; }
  .motion-photo-talk__bubble--think::before { width: 6px; height: 6px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--ul::after { right: -6px; bottom: -10px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--ul::before { right: -12px; bottom: -18px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--ur::after { left: -6px; bottom: -10px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--ur::before { left: -12px; bottom: -18px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--dl::after { right: -6px; top: -10px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--dl::before { right: -12px; top: -18px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--dr::after { left: -6px; top: -10px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--dr::before { left: -12px; top: -18px; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--l::after { right: -12px; top: 40%; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--l::before { right: -20px; top: 46%; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--r::after { left: -12px; top: 40%; }
  .motion-photo-talk__bubble--think.motion-photo-talk__bubble--r::before { left: -20px; top: 46%; }
  .motion-photo-talk__ok {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.4em;
    border-radius: 50%;
    background: var(--motion-talk-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
    vertical-align: -0.2em;
  }
  @media (max-width: 767px) {
    .motion-photo-talk__bubble--sub {
      display: none;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="photo-talk"]:not(.is-inview) .motion-photo-talk__bubble {
      opacity: 0;
      scale: 0.35;
    }
    .motion-js [data-motion~="photo-talk"].is-inview .motion-photo-talk__bubble {
      animation: motion-talk-pop var(--motion-time-talk) var(--motion-ease-pop-soft) both;
      animation-delay: calc(var(--m-delay, 0s) + var(--motion-time-talk-first) + var(--m-n, 0) * var(--motion-time-talk-step));
    }
    .motion-photo-talk--breathe img {
      transform-origin: 60% 40%;
      animation: motion-breathe var(--motion-time-breathe) ease-in-out infinite alternate;
    }
  }
  @keyframes motion-talk-pop {
    0% { opacity: 0; scale: 0.35; filter: blur(4px); }
    55% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; scale: 1; filter: none; }
  }
  @keyframes motion-breathe {
    from { scale: 1.02; }
    to { scale: 1.07; translate: -1% 1%; }
  }

  /* ---------------------------------------------------------------
     すりガラスの板（data-motion="glass"。版 1.6）
     後ろをぼかして色を濃くし（backdrop-filter）、縁に光の線（::before）、マウスの位置に光（::after）が映る。
     後ろに色や写真がないと、ガラスに見えない（白い地の上では、ただの白い板になる）。角の丸みと余白はサイトの CSS で。
     暗い地：.motion-glass--dark・危うい場面（淡い赤）：.motion-glass--warn・落ち着いた場面（淡い緑）：.motion-glass--good。
     しずく（光の当たった水の粒。形がゆっくりゆらぐ）：.motion-glass-drop。位置を変えるときは style="--glass-position: absolute"
     --------------------------------------------------------------- */
  [data-motion~="glass"] {
    position: var(--glass-position, relative);
    isolation: isolate;
    background: var(--motion-glass-fill);
    -webkit-backdrop-filter: blur(var(--motion-glass-blur)) saturate(var(--motion-glass-saturate));
    backdrop-filter: blur(var(--motion-glass-blur)) saturate(var(--motion-glass-saturate));
    box-shadow: var(--motion-glass-edge), var(--motion-glass-shadow);
  }
  /* 縁の光の線：明るい枠を描いてから、内側をくりぬく */
  [data-motion~="glass"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: var(--motion-glass-rim);
    border-radius: inherit;
    background: var(--motion-glass-rim-color);
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  /* マウスの位置の光（マウスのない端末では、左上に光が当たって見える） */
  [data-motion~="glass"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(var(--motion-glass-sheen-size) circle at var(--m-x, 25%) var(--m-y, 0%), var(--motion-glass-sheen), transparent 62%);
    opacity: 0.7;
    pointer-events: none;
  }
  [data-motion~="glass"].motion-glass--dark {
    background: var(--motion-glass-dark-fill);
    box-shadow: var(--motion-glass-dark-edge), var(--motion-glass-dark-shadow);
    color: var(--motion-glass-dark-ink);
  }
  [data-motion~="glass"].motion-glass--dark::before {
    background: var(--motion-glass-dark-rim);
  }
  [data-motion~="glass"].motion-glass--dark::after {
    background: radial-gradient(var(--motion-glass-sheen-size) circle at var(--m-x, 25%) var(--m-y, 0%), var(--motion-glass-dark-sheen), transparent 62%);
  }
  [data-motion~="glass"].motion-glass--warn {
    background: var(--motion-glass-warn-fill);
    box-shadow: var(--motion-glass-edge), var(--motion-glass-warn-shadow);
  }
  [data-motion~="glass"].motion-glass--warn::before {
    background: var(--motion-glass-warn-rim);
  }
  [data-motion~="glass"].motion-glass--good {
    background: var(--motion-glass-good-fill);
    box-shadow: var(--motion-glass-edge), var(--motion-glass-good-shadow);
  }
  [data-motion~="glass"].motion-glass--good::before {
    background: var(--motion-glass-good-rim);
  }
  /* ぼかしが使えない端末・透明を減らす設定の端末では、文字が読めるよう、濃い地にする */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    [data-motion~="glass"] { background: var(--motion-glass-solid); }
    [data-motion~="glass"].motion-glass--dark { background: var(--motion-glass-dark-solid); }
    [data-motion~="glass"].motion-glass--warn { background: var(--motion-glass-warn-solid); }
    [data-motion~="glass"].motion-glass--good { background: var(--motion-glass-good-solid); }
  }
  @media (prefers-reduced-transparency: reduce) {
    [data-motion~="glass"] { background: var(--motion-glass-solid); }
    [data-motion~="glass"].motion-glass--dark { background: var(--motion-glass-dark-solid); }
    [data-motion~="glass"].motion-glass--warn { background: var(--motion-glass-warn-solid); }
    [data-motion~="glass"].motion-glass--good { background: var(--motion-glass-good-solid); }
  }
  .motion-glass-drop {
    border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
    background: var(--motion-glass-drop);
    box-shadow: var(--motion-glass-drop-shadow);
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-glass-drop {
      animation: motion-wobble var(--motion-time-wobble) ease-in-out infinite;
    }
  }
  @keyframes motion-wobble {
    0%, 100% { border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%; }
    33% { border-radius: 46% 54% 42% 58% / 55% 45% 55% 45%; }
    66% { border-radius: 52% 48% 60% 40% / 42% 58% 42% 58%; }
  }

  /* ---------------------------------------------------------------
     選んだものの上に、レンズが移る（data-motion="lens"。版 1.6）
     ボタン（data-motion-to="#要素"）を押すと、すりガラスのレンズ（.motion-lens__glass）が、その要素の上へ移る。
     レンズは、位置の基準になる箱（position: relative）の中に置く。色はボタンに style="--lens-color: …"。
     data-motion-to="all" のボタンで部品に .is-all が付き、レンズは消える（重ねて見せる印は、サイトの CSS で出す）
     --------------------------------------------------------------- */
  .motion-lens__glass {
    position: absolute;
    z-index: 3;
    border-radius: var(--motion-lens-radius);
    background: var(--motion-lens-fill);
    -webkit-backdrop-filter: saturate(170%) brightness(1.05);
    backdrop-filter: saturate(170%) brightness(1.05);
    box-shadow:
      inset 0 0 0 2px var(--lens-color, var(--motion-lens-color)),
      inset 0 2px 0 rgb(255 255 255 / 0.9),
      0 18px 40px -16px var(--lens-color, var(--motion-lens-color));
    pointer-events: none;
  }
  .motion-lens__label {
    position: absolute;
    top: 0;
    right: 10px;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--lens-color, var(--motion-lens-color));
    box-shadow: 0 6px 14px -6px var(--lens-color, var(--motion-lens-color));
    color: var(--motion-lens-on);
    font-weight: 700;
    white-space: nowrap;
    translate: 0 -55%;
  }
  [data-motion~="lens"].is-all .motion-lens__glass {
    opacity: 0;
  }
  html:not(.motion-js) .motion-lens__glass {
    display: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-lens__glass {
      transition:
        left var(--motion-time-lens) var(--motion-ease-pop-soft),
        top var(--motion-time-lens) var(--motion-ease-pop-soft),
        width var(--motion-time-lens) var(--motion-ease-pop-soft),
        height var(--motion-time-lens) var(--motion-ease-pop-soft),
        box-shadow var(--motion-time-show),
        opacity var(--motion-time-show);
    }
  }

  /* ---------------------------------------------------------------
     図を止めて、文を読み進める の書き足し（版 1.6）
     場面の札（.motion-steps__label）：文の data-motion-label の言葉に替わり、替わるときに小さく弾む。
     図と文を左右に並べたときは、画面の高さで読む線を決める（スマホで上下に並べたときは、止めた図の下から）
     --------------------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .motion-steps__label.is-changed {
      animation: motion-label-swap var(--motion-time-label) var(--motion-ease-pop-soft);
    }
  }
  @keyframes motion-label-swap {
    from { opacity: 0; scale: 0.8; translate: 0 -6px; }
  }

  /* ---------------------------------------------------------------
     やりとりの書き足し（版 1.6）
     画面の頭（.motion-chat__head）：顔・題名（.motion-chat__title）・人数（.motion-chat__sub）・数（.motion-chat__count）・
     もう一度流すボタン（.motion-chat__replay）。顔の小さな印：.motion-chat__badge（顔の中に置く）。
     光沢のある顔と、緑のグラデーションの自分の吹き出し：部品に .motion-chat--gloss。お知らせの色：.motion-chat__note--warn（注意）・--good（よい流れ）
     --------------------------------------------------------------- */
  .motion-chat__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--motion-chat-head-line);
    background: var(--motion-chat-head-bg);
  }
  .motion-chat__head > .motion-chat__avatar {
    flex: none;
  }
  .motion-chat__head-text {
    min-width: 0;
  }
  .motion-chat__title,
  .motion-chat__sub {
    margin: 0;
    line-height: 1.35;
  }
  .motion-chat__title {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .motion-chat__sub {
    color: var(--motion-chat-sub);
  }
  .motion-chat__count {
    flex: none;
    margin-left: auto;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--motion-chat-count-bg);
    color: var(--motion-chat-count-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
  }
  .motion-chat__replay {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--motion-chat-replay-bg);
    box-shadow: inset 0 0 0 1px var(--motion-chat-head-line);
    color: inherit;
    cursor: pointer;
  }
  html:not(.motion-js) .motion-chat__replay {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .motion-chat__replay {
      display: none;
    }
  }
  .motion-chat__avatar:has(.motion-chat__badge) {
    position: relative;
  }
  .motion-chat__badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    place-items: center;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--motion-chat-badge-bg);
    box-shadow: 0 2px 6px rgb(10 40 70 / 0.25);
    color: var(--chat-color, var(--motion-chat-sub));
  }
  .motion-chat__badge > svg {
    width: 64%;
    height: 64%;
  }
  .motion-chat--gloss .motion-chat__msg--me .motion-chat__bubble {
    background: var(--motion-chat-me-gloss);
    color: var(--motion-chat-me-gloss-ink);
  }
  .motion-chat--gloss .motion-chat__avatar {
    background:
      radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 45%),
      linear-gradient(160deg, color-mix(in srgb, var(--chat-color, var(--motion-chat-sub)) 70%, #ffffff), var(--chat-color, var(--motion-chat-sub)));
    box-shadow:
      inset 0 -3px 8px rgb(0 0 0 / 0.18),
      inset 0 2px 4px rgb(255 255 255 / 0.5),
      0 6px 14px -6px var(--chat-color, var(--motion-chat-sub));
  }
  .motion-chat__note--warn {
    background: var(--motion-chat-warn-bg);
    box-shadow: inset 0 0 0 1px var(--motion-chat-warn-line);
    color: var(--motion-chat-warn-ink);
  }
  .motion-chat__note--good {
    background: var(--motion-chat-good-bg);
    color: var(--motion-chat-good-ink);
  }

  /* ---------------------------------------------------------------
     押した場所から開く（.motion-sheet--pop。下から出る説明の書き足し。版 1.6）
     幅 768px 以上では、押したボタンの位置から真ん中へ開き、閉じるとそこへ戻る。後ろはぼかす。スマホは下から出す
     --------------------------------------------------------------- */
  .motion-scrim--pop {
    -webkit-backdrop-filter: blur(var(--motion-scrim-blur)) saturate(140%);
    backdrop-filter: blur(var(--motion-scrim-blur)) saturate(140%);
  }
  @media (min-width: 768px) {
    .motion-js .motion-sheet--pop {
      inset: 0;
      width: min(var(--motion-sheet-pop-width), calc(100vw - 32px));
      height: fit-content;
      max-height: calc(100vh - 40px);
      max-height: calc(100svh - 40px);
      margin: auto;
      border-radius: var(--motion-sheet-pop-radius);
      box-shadow: var(--motion-sheet-pop-shadow);
      opacity: 0;
      translate: var(--m-from-x, 0px) var(--m-from-y, 30px);
      scale: var(--motion-sheet-pop-from);
    }
    .motion-js .motion-sheet--pop.is-open {
      opacity: 1;
      translate: 0 0;
      scale: 1;
    }
    .motion-js .motion-sheet--contained.motion-sheet--pop {
      width: min(var(--motion-sheet-pop-width), calc(100% - 32px));
      max-height: 92%;
    }
  }
  @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .motion-js .motion-sheet--pop {
      filter: blur(6px);
      transition:
        translate var(--motion-time-sheet-pop-out) ease-in,
        scale var(--motion-time-sheet-pop-out) ease-in,
        opacity var(--motion-time-sheet-pop-out) ease-in,
        filter var(--motion-time-sheet-pop-out) ease-in,
        visibility 0s linear var(--motion-time-sheet-pop-out);
    }
    .motion-js .motion-sheet--pop.is-open {
      filter: none;
      transition:
        translate var(--motion-time-sheet-pop) var(--motion-ease-pop-soft),
        scale var(--motion-time-sheet-pop) var(--motion-ease-pop-soft),
        opacity var(--motion-time-sheet-pop-out),
        filter var(--motion-time-sheet-pop-out),
        visibility 0s;
    }
  }
  @media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    .motion-js .motion-sheet--pop {
      transition: none;
    }
  }

  /* ---------------------------------------------------------------
     言語の切り替えのつまみ（.motion-lang__knob。版 1.6）
     切り替えのボタンの中で、言語の名前（data-label="ja"・"en"）と同じ箱に置く。選んでいる言語の下へ滑り、切り替えると少し伸び縮みする。
     色・角の丸み・内側の余白・影は、箱に style="--knob-bg: …; --knob-radius: …; --knob-inset: …; --knob-shadow: …" で変えられる
     --------------------------------------------------------------- */
  :has(> .motion-lang__knob) {
    position: relative;
    isolation: isolate;
  }
  .motion-lang__knob {
    position: absolute;
    top: var(--knob-inset, var(--motion-lang-knob-inset));
    bottom: var(--knob-inset, var(--motion-lang-knob-inset));
    left: 0;
    z-index: -1;
    width: var(--m-knob-w, 50%);
    border-radius: var(--knob-radius, var(--motion-knob-radius));
    background: var(--knob-bg, var(--motion-knob-bg));
    box-shadow: var(--knob-shadow, var(--motion-knob-shadow));
    translate: var(--m-knob-x, 0px) 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-lang__knob {
      transition: translate var(--motion-time-knob) var(--motion-ease-pop-soft), width var(--motion-time-knob) var(--motion-ease-pop-soft);
    }
    .motion-lang__knob.is-stretch {
      animation: motion-knob-stretch var(--motion-time-knob) var(--motion-ease-ink);
    }
  }
  @keyframes motion-knob-stretch {
    40% { scale: 1.28 0.86; }
    100% { scale: 1; }
  }

  /* ---------------------------------------------------------------
     アイコンが、小さく動き続ける（.motion-icon__…。版 1.6）
     SVG のアイコンの一部に付ける：目がまばたく（blink）・虫めがねが行き来する（sweep）・分かれ道の片方が点く（pick）・
     はんこが下りる（press）と、押した所に波が広がる（ring）。data-motion="in-view" の中に置き、見えている間だけ動かす
     --------------------------------------------------------------- */
  .motion-icon__blink,
  .motion-icon__ring {
    transform-box: fill-box;
    transform-origin: center;
  }
  .motion-icon__press {
    transform-box: fill-box;
    transform-origin: 50% 100%;
  }
  .motion-icon__ring {
    opacity: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="in-view"].is-playing .motion-icon__blink {
      animation: motion-icon-blink var(--motion-time-icon-blink) infinite;
    }
    [data-motion~="in-view"].is-playing .motion-icon__sweep {
      animation: motion-icon-sweep var(--motion-time-icon-sweep) ease-in-out infinite;
    }
    [data-motion~="in-view"].is-playing .motion-icon__pick {
      animation: motion-icon-pick var(--motion-time-icon-sweep) ease-in-out infinite;
    }
    [data-motion~="in-view"].is-playing .motion-icon__press {
      animation: motion-icon-press var(--motion-time-icon-press) var(--motion-ease-ink) infinite;
    }
    [data-motion~="in-view"].is-playing .motion-icon__ring {
      animation: motion-icon-ring var(--motion-time-icon-press) ease-out infinite;
    }
  }
  @keyframes motion-icon-blink {
    0%, 92%, 100% { scale: 1 1; }
    95% { scale: 1 0.1; }
  }
  @keyframes motion-icon-sweep {
    0%, 100% { translate: -3px 0; }
    50% { translate: 3px 2px; }
  }
  @keyframes motion-icon-pick {
    0%, 40% { opacity: 0.25; }
    50%, 100% { opacity: 1; }
  }
  @keyframes motion-icon-press {
    0%, 20% { translate: 0 -6px; }
    35% { translate: 0 1px; }
    45%, 100% { translate: 0 0; }
  }
  @keyframes motion-icon-ring {
    0%, 32% { opacity: 0; scale: 0.6; }
    38% { opacity: 1; }
    70%, 100% { opacity: 0; scale: 1.5; }
  }

  /* ---------------------------------------------------------------
     押した所へ、つまみが滑る切り替え（data-motion="seg"。版 1.7）
     <div class="motion-seg" data-motion="seg" role="group" aria-label="…">
       <button type="button" aria-pressed="true">公開時期</button><button type="button" aria-pressed="false">初期費用</button>…
     </div>
     押されたボタン（aria-pressed・aria-selected・aria-current）の下へ、つまみが少し伸び縮みしながら滑る。2列以上の並びでも動く。
     ほかの部品やページのプログラムが印を変えたときも、つまみが付いていく（目次の今いる場所など）。
     見た目は言語の切り替えのつまみと同じ。箱に style="--knob-bg: …; --knob-radius: …; --knob-shadow: …" で変えられる
     --------------------------------------------------------------- */
  .motion-seg {
    position: relative;
    isolation: isolate;
  }
  .motion-seg__thumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: var(--m-seg-w, 0px);
    height: var(--m-seg-h, 0px);
    border-radius: var(--knob-radius, var(--motion-knob-radius));
    background: var(--knob-bg, var(--motion-knob-bg));
    box-shadow: var(--knob-shadow, var(--motion-knob-shadow));
    translate: var(--m-seg-x, 0px) var(--m-seg-y, 0px);
    opacity: 0;
    pointer-events: none;
  }
  .motion-seg.is-ready.has-current > .motion-seg__thumb {
    opacity: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-seg.is-ready > .motion-seg__thumb {
      transition:
        translate var(--motion-time-seg) var(--motion-ease-pop-soft),
        width var(--motion-time-seg) var(--motion-ease-pop-soft),
        height var(--motion-time-seg) var(--motion-ease-pop-soft),
        opacity var(--motion-time-seg);
    }
    .motion-seg__thumb.is-squish {
      animation: motion-seg-squish var(--motion-time-seg) var(--motion-ease-ink);
    }
    .motion-seg__thumb.is-squish.is-tall {
      animation-name: motion-seg-squish-tall;
    }
  }
  @keyframes motion-seg-squish {
    35% { scale: var(--motion-seg-squish-a) var(--motion-seg-squish-b); }
    70% { scale: var(--motion-seg-rebound-a) var(--motion-seg-rebound-b); }
  }
  @keyframes motion-seg-squish-tall {
    35% { scale: var(--motion-seg-squish-b) var(--motion-seg-squish-a); }
    70% { scale: var(--motion-seg-rebound-b) var(--motion-seg-rebound-a); }
  }
  /* JavaScript なしでは、押されたボタンそのものに、つまみの地を敷く */
  html:not(.motion-js) .motion-seg :is([aria-pressed="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"])) {
    border-radius: var(--knob-radius, var(--motion-knob-radius));
    background: var(--knob-bg, var(--motion-knob-bg));
    box-shadow: var(--knob-shadow, var(--motion-knob-shadow));
  }

  /* ---------------------------------------------------------------
     虫めがねで、図の一部を拡大して見せる（data-motion="magnify"。版 1.7）
     <figure class="motion-magnify" data-motion="magnify" data-motion-zoom="1.6" data-motion-loop="3.6">
       <div class="motion-magnify__stage"><svg>…<g data-motion-part="release">…</g>…<g class="motion-magnify__ghost">…</g></svg></div>
       <ul class="motion-magnify__notes">
         <li class="motion-magnify__note" data-motion-spot="release" data-motion-at="16% 78%"><strong>公開時期で見ると</strong>…</li>…
       </ul>
       <div class="motion-seg" data-motion="seg"><button type="button" data-motion-spot="release" aria-pressed="true">公開時期</button>…</div>
     </figure>
     図の写しを丸いレンズの中で大きくし、札（data-motion-spot）の位置（data-motion-at：横 縦）へ順に移す。
     レンズの中では、同じ名前の部分（data-motion-part）の線が色付き、.motion-magnify__ghost がレンズの中だけに見える。
     札は、PC ではレンズの横、スマホ（幅 767px まで）では図の下に出る。図の箱（stage）には枠線を付けない（影で囲む）
     --------------------------------------------------------------- */
  .motion-magnify {
    position: relative;
  }
  .motion-magnify__stage {
    position: relative;
  }
  .motion-magnify__lens {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--magnify-size, var(--motion-magnify-size));
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: var(--motion-magnify-shadow);
    translate: var(--m-lens-x, 0px) var(--m-lens-y, 0px);
    pointer-events: none;
  }
  .motion-magnify__lens::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--motion-magnify-shine);
    box-shadow: var(--motion-magnify-inner);
  }
  .motion-magnify__lens > .motion-magnify__copy {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform-origin: 0 0;
    transform: translate(var(--m-view-x, 0px), var(--m-view-y, 0px)) scale(var(--m-zoom, 1.6));
  }
  .motion-magnify__ghost {
    opacity: 0;
  }
  .motion-magnify__copy .motion-magnify__ghost {
    opacity: 1;
  }
  .motion-magnify__copy .is-lit :is(path, rect, circle, ellipse, line, polyline, polygon),
  .motion-magnify__copy :is(path, rect, circle, ellipse, line, polyline, polygon).is-lit {
    stroke: var(--magnify-color, var(--motion-magnify-color));
    stroke-width: var(--motion-magnify-lit-width);
  }
  /* 札：PC ではレンズの横に浮かべ、言葉を入れ替えながら一緒に移す */
  .motion-js .motion-magnify.is-ready .motion-magnify__notes {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .motion-js .motion-magnify.is-ready:not(.is-docked) .motion-magnify__notes {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: min(var(--motion-magnify-note-width), 46%);
    translate: var(--m-note-x, 0px) var(--m-note-y, 0px);
  }
  .motion-js .motion-magnify.is-ready .motion-magnify__note {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
  }
  .motion-js .motion-magnify.is-ready .motion-magnify__note.is-current {
    opacity: 1;
    visibility: visible;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-magnify.is-ready .motion-magnify__lens {
      transition: translate var(--motion-time-magnify) var(--motion-ease-in-out);
    }
    .motion-magnify.is-ready .motion-magnify__lens > .motion-magnify__copy {
      transition: transform var(--motion-time-magnify) var(--motion-ease-in-out);
    }
    .motion-magnify__lens.is-moving {
      animation: motion-magnify-squish var(--motion-time-magnify) var(--motion-ease-in-out);
    }
    .motion-js .motion-magnify.is-ready:not(.is-docked) .motion-magnify__notes {
      transition: translate var(--motion-time-magnify) var(--motion-ease-in-out);
    }
    .motion-js .motion-magnify.is-ready .motion-magnify__note {
      transition: opacity var(--motion-time-magnify-note) ease, visibility 0s linear var(--motion-time-magnify-note);
    }
    .motion-js .motion-magnify.is-ready .motion-magnify__note.is-current {
      transition: opacity var(--motion-time-magnify-note) ease var(--motion-time-magnify-note), visibility 0s linear var(--motion-time-magnify-note);
    }
  }
  @keyframes motion-magnify-squish {
    40% { scale: 1.06 0.95; }
    75% { scale: 0.99 1.02; }
  }

  /* ---------------------------------------------------------------
     グラフを、順に組み立てる（data-motion="chart"。版 1.7）
     SVG の図の部品に付ける：下から伸びる棒（__rise）・上から落ちて積まれる棒（__drop）・左から伸びる棒（__grow）・
     描かれる線（__line）・上限の線（__limit）・越えた所（__over。最後に赤く出て点滅）・印（__mark。ぽんと出て脈打つ）・ひとこと（__note）。
     棒と線は書いた順に組み立て、そのあと越えた所と印、最後にひとことを出す。印のない部品は、最初から出しておく。
     動きを減らす設定の端末と JavaScript なしでは、組み立てた後の形で見せ、点滅もしない
     --------------------------------------------------------------- */
  .motion-chart__rise,
  .motion-chart__drop,
  .motion-chart__grow,
  .motion-chart__mark {
    transform-box: fill-box;
  }
  .motion-chart__rise {
    transform-origin: 50% 100%;
  }
  .motion-chart__grow {
    transform-origin: 0 50%;
  }
  .motion-chart__mark {
    transform-origin: center;
  }
  .motion-chart__over {
    fill: var(--over-color, var(--motion-over-color));
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="chart"]:not(.is-playing) :is(.motion-chart__limit, .motion-chart__rise, .motion-chart__drop, .motion-chart__grow, .motion-chart__over, .motion-chart__mark, .motion-chart__note) {
      opacity: 0;
    }
    .motion-js [data-motion~="chart"] .motion-chart__line {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }
    [data-motion~="chart"].is-playing .motion-chart__limit {
      animation: motion-chart-fade var(--motion-time-chart-note) ease both;
    }
    [data-motion~="chart"].is-playing .motion-chart__rise {
      animation: motion-chart-rise var(--motion-time-chart-bar) var(--motion-ease-pop-soft) var(--m-delay, 0s) both;
    }
    [data-motion~="chart"].is-playing .motion-chart__drop {
      animation: motion-chart-drop var(--motion-time-chart-bar) var(--motion-ease-pop-soft) var(--m-delay, 0s) both;
    }
    [data-motion~="chart"].is-playing .motion-chart__grow {
      animation: motion-chart-grow var(--motion-time-chart-bar) var(--motion-ease-in-out) var(--m-delay, 0s) both;
    }
    [data-motion~="chart"].is-playing .motion-chart__line {
      animation: motion-chart-line var(--motion-time-chart-line) var(--motion-ease-in-out) var(--m-delay, 0s) forwards;
    }
    [data-motion~="chart"].is-playing .motion-chart__over {
      animation:
        motion-over-in var(--motion-time-over-in) ease var(--m-delay, 0s) both,
        motion-over-pulse var(--motion-time-over-pulse) ease-in-out calc(var(--m-delay, 0s) + var(--motion-time-over-in)) infinite;
    }
    [data-motion~="chart"].is-playing .motion-chart__mark {
      animation:
        motion-chart-mark var(--motion-time-chart-mark) var(--motion-ease-pop-soft) var(--m-delay, 0s) both,
        motion-chart-mark-pulse var(--motion-time-chart-mark-pulse) ease-in-out calc(var(--m-delay, 0s) + var(--motion-time-chart-mark)) infinite;
    }
    [data-motion~="chart"].is-playing .motion-chart__note {
      animation: motion-chart-note var(--motion-time-chart-note) ease var(--m-delay, 0s) both;
    }
    /* 見えていない間は、点滅を止める */
    [data-motion~="chart"].is-playing:not(.is-awake) :is(.motion-chart__over, .motion-chart__mark) {
      animation-play-state: paused;
    }
  }
  @keyframes motion-chart-fade {
    from { opacity: 0; }
  }
  @keyframes motion-chart-rise {
    from { scale: 1 0; }
  }
  @keyframes motion-chart-drop {
    from { opacity: 0; translate: 0 calc(-1 * var(--motion-chart-drop)); }
  }
  @keyframes motion-chart-grow {
    from { scale: 0 1; }
  }
  @keyframes motion-chart-line {
    to { stroke-dashoffset: 0; }
  }
  @keyframes motion-chart-mark {
    from { scale: 0; }
  }
  @keyframes motion-chart-mark-pulse {
    50% { scale: var(--motion-chart-mark-pulse); }
  }
  @keyframes motion-chart-note {
    from { opacity: 0; translate: 0 6px; }
  }
  @keyframes motion-over-in {
    from { opacity: 0; }
  }
  @keyframes motion-over-pulse {
    50% { opacity: var(--motion-over-dim); }
  }

  /* ---------------------------------------------------------------
     予定表の書き足し（版 1.7）
     ・data-motion-play="order"：画面に入ったら、上の行から順に棒が伸びる（スクロールとは結びつけない）。
       説明やタブの中では data-motion-start="open" で、開くたびに最初から伸びる
     ・箱に style="--gantt-due: 4"（列の数え方は --gantt-start と同じ）と、<p class="motion-gantt__due">公開日（固定）</p>：
       その日に縦の線と鍵の札を立て、その日を越えた棒の先だけを、最後に赤く点滅させる。
       <p class="motion-gantt__note">…</p> は、いちばん最後に出る
     --------------------------------------------------------------- */
  .motion-gantt__over {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(var(--m-over-at, 0) * 100%);
    z-index: 1;
    background: var(--over-color, var(--motion-over-color));
  }
  .motion-js .motion-gantt.is-due {
    position: relative;
    padding-top: var(--motion-gantt-due-space);
  }
  .motion-js .motion-gantt__due {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0;
    height: var(--m-due-height, 0px);
    margin: 0;
    translate: var(--m-due-x, 0px) var(--m-due-top, 0px);
    pointer-events: none;
  }
  .motion-js .motion-gantt__due::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    border-radius: 2px;
    background: var(--due-color, var(--motion-gantt-due-line));
  }
  .motion-gantt__lock {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: grid;
    place-items: center;
    width: var(--motion-gantt-lock);
    aspect-ratio: 1;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--due-color, var(--motion-gantt-due-line));
    color: var(--motion-gantt-lock-ink);
    translate: -50% 0;
  }
  .motion-gantt__lock svg {
    width: 62%;
    height: 62%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
  }
  .motion-js .motion-gantt__due-text {
    position: absolute;
    right: calc(var(--motion-gantt-lock) / 2 + 8px);
    bottom: 100%;
    margin-bottom: 6px;
    line-height: var(--motion-gantt-lock);
    white-space: nowrap;
  }
  .motion-js .motion-gantt__due.is-right .motion-gantt__due-text {
    right: auto;
    left: calc(var(--motion-gantt-lock) / 2 + 8px);
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js .motion-gantt.is-order .motion-gantt__bar::after {
      scale: 0 1;
      transition: none;
    }
    .motion-gantt.is-order.is-playing .motion-gantt__bar::after {
      animation: motion-gantt-grow var(--motion-time-gantt-grow) var(--motion-ease-in-out) var(--m-delay, 0s) both;
    }
    .motion-js .motion-gantt.is-order:not(.is-playing) :is(.motion-gantt__over, .motion-gantt__note),
    .motion-js .motion-gantt.is-scrubbed .motion-gantt__row:not(.is-full) .motion-gantt__over,
    .motion-js .motion-gantt.is-scrubbed:not(.is-complete) .motion-gantt__note {
      opacity: 0;
    }
    .motion-gantt.is-order.is-playing .motion-gantt__over {
      animation:
        motion-over-in var(--motion-time-over-in) ease var(--m-delay, 0s) both,
        motion-over-pulse var(--motion-time-over-pulse) ease-in-out calc(var(--m-delay, 0s) + var(--motion-time-over-in)) infinite;
    }
    .motion-gantt.is-scrubbed .motion-gantt__row.is-full .motion-gantt__over {
      animation:
        motion-over-in var(--motion-time-over-in) ease both,
        motion-over-pulse var(--motion-time-over-pulse) ease-in-out var(--motion-time-over-in) infinite;
    }
    .motion-gantt.is-order.is-playing .motion-gantt__note {
      animation: motion-chart-note var(--motion-time-chart-note) ease var(--m-delay, 0s) both;
    }
    .motion-gantt.is-scrubbed .motion-gantt__note {
      transition: opacity var(--motion-time-chart-note);
    }
    .motion-gantt:not(.is-awake) .motion-gantt__over {
      animation-play-state: paused;
    }
  }
  @keyframes motion-gantt-grow {
    from { scale: 0 1; }
    to { scale: 1 1; }
  }

  /* ---------------------------------------------------------------
     下から出る説明の書き足し（版 1.7）
     ・<span class="motion-sheet__grab" aria-hidden="true"></span> を上に置くと、つまみか頭（.motion-sheet__head）を下へ引いて閉じられる。
       下から出ているときだけ（押した場所から開く形は、幅 767px までのとき）
     ・<div class="motion-sheet__foot">…</div> は、いちばん下に貼り付く（次へ進むボタンなど）
     --------------------------------------------------------------- */
  .motion-sheet__grab {
    display: block;
    width: var(--motion-sheet-grab-width);
    height: 5px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: var(--motion-sheet-grab);
    cursor: grab;
    touch-action: none;
  }
  .motion-js .motion-sheet:has(> .motion-sheet__grab) .motion-sheet__head {
    touch-action: none;
  }
  .motion-js .motion-sheet.is-dragging {
    translate: 0 var(--m-drag, 0px);
    transition: none;
  }
  .motion-sheet__foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(to top, var(--sheet-foot-bg, var(--motion-sheet-bg)) 72%, transparent);
  }
  html:not(.motion-js) .motion-sheet__grab {
    display: none;
  }
  @media (min-width: 768px) {
    .motion-js .motion-sheet--pop .motion-sheet__grab {
      display: none;
    }
  }

  /* ---------------------------------------------------------------
     アイコンが、小さく動き続ける の書き足し（版 1.7）
     上下にゆれる（bob）・脈の線が走る（beat）・矢印の線が伸びる（rise）・かたむく（tilt）
     --------------------------------------------------------------- */
  .motion-icon__bob,
  .motion-icon__tilt {
    transform-box: fill-box;
    transform-origin: 50% 60%;
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="in-view"].is-playing .motion-icon__bob {
      animation: motion-icon-bob var(--motion-time-icon-bob) ease-in-out infinite;
    }
    [data-motion~="in-view"].is-playing .motion-icon__beat {
      stroke-dasharray: 60;
      animation: motion-icon-beat var(--motion-time-icon-beat) linear infinite;
    }
    [data-motion~="in-view"].is-playing .motion-icon__rise {
      stroke-dasharray: 40;
      animation: motion-icon-rise var(--motion-time-icon-rise) var(--motion-ease-in-out) infinite;
    }
    [data-motion~="in-view"].is-playing .motion-icon__tilt {
      animation: motion-icon-tilt var(--motion-time-icon-tilt) ease-in-out infinite;
    }
  }
  @keyframes motion-icon-bob {
    50% { translate: 0 -3px; }
  }
  @keyframes motion-icon-beat {
    from { stroke-dashoffset: 60; }
    to { stroke-dashoffset: -60; }
  }
  @keyframes motion-icon-rise {
    0% { stroke-dashoffset: 40; }
    55%, 100% { stroke-dashoffset: 0; }
  }
  @keyframes motion-icon-tilt {
    50% { rotate: -8deg; }
  }

  /* ---------------------------------------------------------------
     タブを格子に並べる（.motion-tabs__list に motion-tabs__list--grid。版 1.7）
     列の数は、サイトの CSS の grid-template-columns で決める。幅 768px 未満でも、横にずらさず格子のまま見せる
     --------------------------------------------------------------- */
  .motion-tabs__list--grid {
    display: grid;
  }
  @media (max-width: 767.98px) {
    .motion-tabs__list--grid {
      overflow-x: visible;
      scroll-snap-type: none;
    }
  }

  /* ---------------------------------------------------------------
     タブの中身の箱を、選んだ中身の高さに合わせる（data-motion="tabs" の要素に data-motion-fit。版 1.8）
     中身の高さが大きく違うときに、短い中身の下に空きができないようにする。高さは JavaScript が --m-fit に書く
     --------------------------------------------------------------- */
  .motion-js [data-motion~="tabs"][data-motion-fit] .motion-tabs__panels {
    height: var(--m-fit, auto);
    overflow: clip;
  }
  .motion-js [data-motion~="tabs"][data-motion-fit] .motion-tabs__panel {
    align-self: start;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-js [data-motion~="tabs"][data-motion-fit] .motion-tabs__panels {
      transition: height var(--motion-time-open) var(--motion-ease-glide);
    }
  }

  /* ---------------------------------------------------------------
     色が左から満ちて、矢印が進むボタン（data-motion="hover-sweep"。版 1.9）
     <a class="motion-sweep" data-motion="hover-sweep" href="…">詳しくはこちら<span class="motion-sweep__mark" aria-hidden="true"></span></a>
     マウスを重ねる（キーボードで選ぶ）と、左から色が満ち、丸い矢印が白くなって右へ進み、ボタンが少し浮く。
     色は、ボタンに style="--sweep-fill: …; --sweep-line: …; --sweep-dot: …; --sweep-shadow: …" で変えられる
     --------------------------------------------------------------- */
  [data-motion~="hover-sweep"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sweep-pad-y, var(--motion-sweep-pad-y)) calc(var(--motion-sweep-mark) + 22px) var(--sweep-pad-y, var(--motion-sweep-pad-y)) 18px;
    border: 1px solid var(--sweep-line, var(--motion-sweep-line));
    border-radius: 999px;
    background: var(--sweep-bg, var(--motion-sweep-bg));
    color: var(--sweep-text, var(--motion-sweep-text));
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
  }
  [data-motion~="hover-sweep"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--sweep-fill, var(--motion-sweep-fill));
    transform: scaleX(0);
    transform-origin: left center;
  }
  .motion-sweep__mark {
    position: absolute;
    top: 50%;
    right: 14px;
    width: var(--motion-sweep-mark);
    height: var(--motion-sweep-mark);
    border-radius: 50%;
    background: var(--sweep-dot, var(--motion-sweep-dot));
    color: var(--motion-sweep-arrow-ink);
    translate: 0 -50%;
  }
  .motion-sweep__mark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: var(--motion-sweep-arrow) center / 46% no-repeat;
    mask: var(--motion-sweep-arrow) center / 46% no-repeat;
  }
  [data-motion~="hover-sweep"]:is(:hover, :focus-visible) {
    box-shadow: var(--sweep-shadow, var(--motion-sweep-shadow));
    color: var(--motion-sweep-text-on);
    transform: translateY(var(--motion-sweep-lift));
  }
  [data-motion~="hover-sweep"]:is(:hover, :focus-visible)::before {
    transform: scaleX(1);
  }
  [data-motion~="hover-sweep"]:is(:hover, :focus-visible) .motion-sweep__mark {
    background: var(--motion-sweep-arrow-ink);
    color: var(--sweep-dot, var(--motion-sweep-dot));
    translate: 4px -50%;
  }
  [data-motion~="hover-sweep"]:focus-visible {
    outline: 2px solid var(--sweep-dot, var(--motion-sweep-dot));
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="hover-sweep"] {
      transition: color var(--motion-time-sweep) ease, box-shadow var(--motion-time-sweep) ease, transform var(--motion-time-sweep) ease;
    }
    [data-motion~="hover-sweep"]::before {
      transition: transform var(--motion-time-sweep) var(--motion-ease-sweep);
    }
    .motion-sweep__mark {
      transition: translate var(--motion-time-sweep) var(--motion-ease-sweep), background-color var(--motion-time-sweep) ease, color var(--motion-time-sweep) ease;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-motion~="hover-sweep"]:is(:hover, :focus-visible) {
      transform: none;
    }
  }

  /* ---------------------------------------------------------------
     触れたときの動きの書き足し（版 1.9）
     ・矢印の丸が1回転する（"hover-spin"）：回す要素に data-motion-spin。離すと、すぐ元に戻る
     ・写真が少し寄る（"hover-zoom"）：寄せる画像に data-motion-zoom。箱は overflow: hidden にしておく
     --------------------------------------------------------------- */
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    [data-motion~="hover-spin"]:is(:hover, :focus-visible) [data-motion-spin] {
      rotate: 360deg;
      transition: rotate var(--motion-time-spin) ease;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-motion~="hover-zoom"] [data-motion-zoom] {
      transition: scale var(--motion-time-zoom) var(--motion-ease-hover-zoom);
    }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    [data-motion~="hover-zoom"]:is(:hover, :focus-visible) [data-motion-zoom] {
      scale: var(--motion-zoom);
    }
  }

  /* ---------------------------------------------------------------
     タブを、スクロールで切り替える（タブに data-motion-scroll。版 1.9）
     箱の幅が狭いときは、箱を止めて（top は --tabs-top。px で書く）、スクロールした分だけ次の中身へ。
     広いときは .is-row：タブを隠し、中身を横に並べる（列は --tabs-row で変えられる。初期値は全部を1段）
     --------------------------------------------------------------- */
  .motion-tabs-track {
    position: relative;
  }
  .motion-tabs-track.is-pinned > [data-motion~="tabs"] {
    position: sticky;
    top: var(--tabs-top, 0px);
  }
  [data-motion~="tabs"][data-motion-scroll].is-row .motion-tabs__list {
    display: none;
  }
  .motion-js [data-motion~="tabs"][data-motion-scroll].is-row .motion-tabs__panels {
    grid-template-columns: var(--tabs-row, repeat(var(--m-count, 1), minmax(0, 1fr)));
    gap: var(--tabs-gap, var(--motion-tabs-gap));
  }
  .motion-js [data-motion~="tabs"][data-motion-scroll].is-row .motion-tabs__panel {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
  }

  /* ---------------------------------------------------------------
     長い題を、決めた行数に収め、最後の数文字を薄くする（data-motion="fit-title"。版 1.9）
     行数は style="--fit-lines: 2"。入らないときは最後の3文字を薄くして「…」を付ける（読み上げには全部を残す）
     --------------------------------------------------------------- */
  .motion-js [data-motion~="fit-title"] {
    height: calc(var(--fit-lines, 2) * 1lh);
    overflow: hidden;
  }
  .motion-fit__fade {
    display: inline-block;
    -webkit-mask-image: linear-gradient(to right, #000, transparent);
    mask-image: linear-gradient(to right, #000, transparent);
  }
  .motion-fit__more {
    opacity: var(--motion-fit-more);
  }

  /* ---------------------------------------------------------------
     横に続きがあると、端を薄くして知らせる（data-motion="edge-fade"。版 1.9）
     横にスクロールする枠に付ける。続きがある側に .is-more-start・.is-more-end が付き、その端が薄くなる
     --------------------------------------------------------------- */
  [data-motion~="edge-fade"].is-more-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--edge-fade, var(--motion-edge-fade))), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--edge-fade, var(--motion-edge-fade))), transparent);
  }
  [data-motion~="edge-fade"].is-more-start {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--edge-fade, var(--motion-edge-fade))), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - var(--edge-fade, var(--motion-edge-fade))), transparent);
  }
  [data-motion~="edge-fade"].is-more-start.is-more-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade, var(--motion-edge-fade)), #000 calc(100% - var(--edge-fade, var(--motion-edge-fade))), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--edge-fade, var(--motion-edge-fade)), #000 calc(100% - var(--edge-fade, var(--motion-edge-fade))), transparent);
  }

  /* ---------------------------------------------------------------
     押すと、下の階層が横に開く図（data-motion="branch"。版 1.9）
     <div class="motion-branch__item">
       <button class="motion-branch__toggle" type="button" aria-expanded="false" aria-controls="b-1">経営企画部<span class="motion-branch__pm" aria-hidden="true"></span></button>
       <ul class="motion-branch__panel" id="b-1"><li>…</li></ul>
     </div>
     開くと、つなぐ線が伸び、箱が横から入り、行が順に出る。閉じるときは逆に動く。線の色は --branch-line、
     線の高さは --branch-line-top、すき間は --branch-gap で変えられる
     --------------------------------------------------------------- */
  .motion-branch__item {
    position: relative;
    display: flex;
    align-items: flex-start;
  }
  .motion-branch__panel {
    position: relative;
    flex: none;
    margin: 0 0 0 var(--branch-gap, var(--motion-branch-gap));
  }
  .motion-branch__panel[hidden] {
    display: none;
  }
  .motion-branch__panel::before {
    content: "";
    position: absolute;
    top: var(--branch-line-top, var(--motion-branch-line-top));
    right: 100%;
    width: var(--branch-gap, var(--motion-branch-gap));
    height: var(--motion-branch-line-width);
    background: var(--branch-line, var(--motion-branch-line));
    transform-origin: left center;
  }
  .motion-branch__pm {
    position: relative;
    flex: none;
    width: var(--motion-branch-pm);
    height: var(--motion-branch-pm);
  }
  .motion-branch__pm::before,
  .motion-branch__pm::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
  }
  .motion-branch__pm::after {
    transform: rotate(90deg);
  }
  [aria-expanded="true"] > .motion-branch__pm::after {
    transform: rotate(0deg);
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-branch__pm::before,
    .motion-branch__pm::after {
      transition: transform var(--motion-time-branch-pm) ease;
    }
    .motion-branch__item.is-open .motion-branch__panel {
      animation: motion-branch-in var(--motion-time-branch) var(--motion-ease-branch) both;
    }
    .motion-branch__item.is-open .motion-branch__panel::before {
      animation: motion-branch-line var(--motion-time-branch) var(--motion-ease-branch) both;
    }
    .motion-branch__item.is-open .motion-branch__panel > * {
      animation: motion-branch-row var(--motion-time-branch) var(--motion-ease-branch) calc(var(--m-i, 0) * var(--motion-branch-step)) both;
    }
    .motion-branch__item.is-closing .motion-branch__panel {
      animation-name: motion-branch-out;
    }
    .motion-branch__item.is-closing .motion-branch__panel::before {
      animation-name: motion-branch-line-out;
    }
    .motion-branch__item.is-closing .motion-branch__panel > * {
      animation: none;
    }
  }
  @keyframes motion-branch-in {
    from { opacity: 0; transform: translateX(-10px); }
  }
  @keyframes motion-branch-out {
    to { opacity: 0; transform: translateX(-10px); }
  }
  @keyframes motion-branch-line {
    from { transform: scaleX(0); }
  }
  @keyframes motion-branch-line-out {
    to { transform: scaleX(0); }
  }
  @keyframes motion-branch-row {
    from { opacity: 0; }
  }

  /* ---------------------------------------------------------------
     写真を見せてから、言葉を読ませる（data-motion="blur-bg"。版 1.9）
     <section class="motion-blur-bg" data-motion="blur-bg">
       <div class="motion-blur-bg__photo" aria-hidden="true"><img src="…" alt=""></div>
       <div class="motion-blur-bg__body"><h2 data-motion-blur-at>…</h2><p>…</p></div>
     </section>
     写真は画面に止まったまま、上を文が流れる。印の文が来ると、写真がぼけて暗くなる（.is-blurred）。章が終わると、写真も一緒に流れる。
     写真は img のほか、style="--blur-bg: url(…)" でも置ける。暗くする色は --blur-bg-veil で変えられる。
     JavaScript がないときは、最初からぼかしておく
     --------------------------------------------------------------- */
  .motion-blur-bg {
    position: relative;
    isolation: isolate;
  }
  .motion-blur-bg__photo {
    position: sticky;
    top: 0;
    z-index: -1;
    height: var(--m-screen, 100vh);
    height: var(--m-screen, 100svh);
    overflow: hidden;
    background: var(--blur-bg, none) center / cover no-repeat;
  }
  /* 文の箱は、写真の高さの分だけ上へ重ねる（写真は章の中にとどまり、章が終わると一緒に流れる） */
  .motion-blur-bg__body {
    margin-top: calc(-1 * var(--m-screen, 100vh));
    margin-top: calc(-1 * var(--m-screen, 100svh));
  }
  .motion-blur-bg__photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .motion-blur-bg__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blur-bg-veil, var(--motion-blur-bg-veil));
    -webkit-backdrop-filter: blur(var(--motion-blur-bg-blur));
    backdrop-filter: blur(var(--motion-blur-bg-blur));
    opacity: 0;
  }
  .motion-blur-bg.is-blurred .motion-blur-bg__photo::after,
  html:not(.motion-js) .motion-blur-bg__photo::after {
    opacity: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .motion-blur-bg__photo::after {
      transition: opacity var(--motion-time-blur-bg) ease-out;
    }
  }

  /* ---------------------------------------------------------------
     章が、角を丸めて前の章に重なる（class="motion-overlap"。版 1.9）
     章の下に --overlap の分だけ余白を足し、同じだけ次の章を上へ重ねる。motion-overlap--round で左上の角を丸める。
     最後の章（次に重なるものがない章）は style="--overlap: 0px" にして、下に余白を足さない
     --------------------------------------------------------------- */
  .motion-overlap {
    position: relative;
    z-index: 1;
    margin-bottom: calc(var(--overlap, var(--motion-overlap)) * -1);
    padding-bottom: var(--overlap, var(--motion-overlap));
  }
  .motion-overlap--round {
    overflow: clip;
    border-top-left-radius: var(--overlap-radius, var(--motion-overlap-radius));
  }
}