/* ══ 機能ページ（一覧・詳細7本）の動き（2026-10-18 持ち主「GSAP や CSS のモーションが少なく、リッチさに欠ける」）══════════════
   ・開いた瞬間の登場はここ（CSS だけ・読み込みを待たない）。スクロールで現れる・数字が増える・押した・画面の切り替え・奥行きは js/noren-fxm.js
   ・動かすのは位置と透明度だけ（translate / scale / opacity）。hover の transform とぶつからないよう、個別の translate・scale を使う
   ・最初の透明度は .01（0 にすると、表示の速さの採点で一番大きい要素が「まだ出ていない」扱いになる）
   ・動きを減らす設定の人には何もしない。文言・並びは変えない */
@media (prefers-reduced-motion:no-preference){
  .fxw{--fxm-e:cubic-bezier(.2,.7,.2,1);--fxm-back:cubic-bezier(.34,1.5,.64,1)}
  @keyframes fxmUp{from{opacity:.01;translate:0 22px}to{opacity:1;translate:none}}
  @keyframes fxmFade{from{opacity:.01}to{opacity:1}}
  @keyframes fxmPop{from{opacity:.01;translate:0 12px;scale:.9}to{opacity:1;translate:none;scale:none}}
  @keyframes fxmRise{from{opacity:.01;transform:perspective(1400px) rotateX(12deg) translateY(56px) scale(.96)}to{opacity:1;transform:none}}

  /* ── 開いた瞬間（一覧・詳細 共通）：パンくず → 小見出し → 見出し → 説明の順にせり上がる ── */
  .fxw .fx-crumb{animation:fxmFade .7s ease both}
  .fxw .fx-hero .eyebrow{animation:fxmUp .8s var(--fxm-e) .05s both}
  .fxw .fx-hero h1{animation:fxmUp .9s var(--fxm-e) .12s both}
  .fxw .fx-hero .lead{animation:fxmUp .9s var(--fxm-e) .24s both}

  /* 一覧：タブが1つずつポンと並び、アプリの画面は奥から起き上がる */
  .fxw .fxt-tab{animation:fxmPop .55s var(--fxm-back) both}
  .fxw .fxt-tab:nth-child(1){animation-delay:.30s}.fxw .fxt-tab:nth-child(2){animation-delay:.35s}.fxw .fxt-tab:nth-child(3){animation-delay:.40s}
  .fxw .fxt-tab:nth-child(4){animation-delay:.45s}.fxw .fxt-tab:nth-child(5){animation-delay:.50s}.fxw .fxt-tab:nth-child(6){animation-delay:.55s}
  .fxw .fxt-tab:nth-child(7){animation-delay:.60s}
  .fxw .fxt-scr{animation:fxmRise 1.1s var(--fxm-e) .34s both;transform-origin:50% 100%}
  .fxw .fxt-cap{animation:fxmFade .8s ease .85s both}

  /* 詳細：「お客様がやるのは…」の箱がせり上がり、5つの工程が順にポンと出る（番号の丸は少し遅れて弾む） */
  .fxw .who{animation:fxmUp .9s var(--fxm-e) .34s both}
  .fxw .who-flow li{animation:fxmPop .6s var(--fxm-back) both}
  .fxw .who-flow li:nth-child(1){animation-delay:.50s}.fxw .who-flow li:nth-child(2){animation-delay:.58s}.fxw .who-flow li:nth-child(3){animation-delay:.66s}
  .fxw .who-flow li:nth-child(4){animation-delay:.74s}.fxw .who-flow li:nth-child(5){animation-delay:.82s}.fxw .who-flow li:nth-child(6){animation-delay:.90s}
  .fxw .rail li{animation:fxmUp .6s var(--fxm-e) both}
  .fxw .rail li:nth-child(1){animation-delay:.70s}.fxw .rail li:nth-child(2){animation-delay:.75s}.fxw .rail li:nth-child(3){animation-delay:.80s}
  .fxw .rail li:nth-child(4){animation-delay:.85s}.fxw .rail li:nth-child(5){animation-delay:.90s}.fxw .rail li:nth-child(6){animation-delay:.95s}

  /* ── スクロールで現れる（js/noren-fxm.js が、開いた時点で画面の外にある物にだけ .fxm-r を付ける） ── */
  html.fxm .fxw .fxm-r{opacity:.01;translate:0 var(--fxm-y,30px);scale:var(--fxm-s,1);
    transition:opacity .7s ease var(--fxm-d,0s),translate .95s var(--fxm-e) var(--fxm-d,0s),scale .95s var(--fxm-e) var(--fxm-d,0s)}
  html.fxm .fxw .fxm-r.fxm-x{translate:var(--fxm-xx,-44px) 0}
  html.fxm .fxw .fxm-r.fxm-card{--fxm-y:44px;--fxm-s:.96}
  html.fxm .fxw .fxm-r.fxm-on{opacity:1;translate:none;scale:none}

  /* ── 押す・指を乗せる（一覧のカード）：光が指についてくる・矢印が進む・押した瞬間に沈む ── */
  .fxw .fc{overflow:hidden;transition:transform .3s var(--fxm-e),box-shadow .3s var(--fxm-e),scale .12s ease}
  .fxw .fc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(111,156,255,.16),rgba(111,156,255,0) 62%)}
  .fxw .fc .more{display:inline-block;transition:translate .3s var(--fxm-e)}
  @media (hover:hover){.fxw .fc:hover::after{opacity:1}.fxw .fc:hover .more{translate:5px 0}}
  .fxw .fc:active{scale:.985}
  .fxw .fc::before{background:linear-gradient(90deg,#15305f,#6f9cff,#15305f) 0 0/200% 100%;transition:background-position .9s var(--fxm-e)}   /* 見えている左半分は今と同じ色。指を乗せると光が流れる */
  @media (hover:hover){.fxw .fc:hover::before{background-position:100% 0}}

  /* 一覧のタブを切り替えたとき：新しい画面が右から差し込まれる（最初の1枚は起き上がりの動きに任せる） */
  @keyframes fxmSwap{from{opacity:.01;clip-path:inset(0 0 0 14%);translate:28px 0;scale:1.02}to{opacity:1;clip-path:inset(0);translate:none;scale:none}}
  .fxw .fxt.fxm-moved .fxt-scr img.on{animation:fxmSwap .62s var(--fxm-e) both}

  /* 最後の案内：現れたら、主のボタンに光が1回走る */
  .fxw .cta .btn-fire{position:relative;overflow:hidden}
  .fxw .cta .btn-fire::after{content:"";position:absolute;inset:-2px;pointer-events:none;translate:-120% 0;
    background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 70%)}
  .fxw .cta.fxm-on .btn-fire::after,.fxw .cta.fxm-shine .btn-fire::after{animation:fxmShine 1.1s var(--fxm-e) .45s both}
  @keyframes fxmShine{to{translate:120% 0}}

  /* スマホは動く幅を小さく */
  @media (max-width:640px){
    html.fxm .fxw .fxm-r{--fxm-y:22px}
    html.fxm .fxw .fxm-r.fxm-x{translate:0 22px}
    html.fxm .fxw .fxm-r.fxm-card{--fxm-y:28px;--fxm-s:.98}
  }
}