/* p80 r4fx：R4 版に「動いていると面白い・最先端に見える」所だけ動きを足す（Kyo 2026-11-07）。
   ・JS が html に fx-on を付けたときだけ効く（JS 無しでは何も動かず、全部見える）
   ・勝手に動き続けるのは最初の画面だけ（光の円の息・スマホの漂う光）。最初の画面が外に出たら止める（fx-away）
   ・ほかは触れた時・押した時・画面に入った時に一度だけ。0.3〜1 秒。点滅しない
   ・動きを減らす設定では全部止まる（途中で変えても）。印刷では出さない */
@media screen{
/* ---- 1. 最初の画面 ---- */
html.fx-on .r4hero>.r4glow{animation:fx-breath 9s ease-in-out infinite alternate}
@keyframes fx-breath{from{opacity:.72}to{opacity:1}}
/* 光の飾りの枠：最初の画面と同じ大きさで、外へはみ出さない */
.fx-clip{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit}
/* PC：マウスのまわりだけ格子の線が淡く光る（格子と同じ 56px の目にそろえ、輪の外は消す） */
.fx-spot{position:absolute;left:0;top:0;width:460px;height:460px;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease;will-change:transform;
 background-image:radial-gradient(closest-side,rgba(143,220,207,.05),transparent),linear-gradient(rgba(143,220,207,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(143,220,207,.17) 1px,transparent 1px);
 background-size:100% 100%,56px 56px,56px 56px;background-repeat:no-repeat,repeat,repeat;
 -webkit-mask-image:radial-gradient(closest-side,#000 0,rgba(0,0,0,.55) 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0,rgba(0,0,0,.55) 55%,transparent 100%)}
.r4hero.fx-in .fx-spot{opacity:1}
/* スマホ：ゆっくり漂う光の点（マウスの代わり） */
.fx-drift{position:absolute;left:0;top:0;width:320px;height:320px;z-index:0;pointer-events:none;border-radius:50%;
 background:radial-gradient(closest-side,rgba(143,220,207,.11),rgba(143,220,207,.04) 55%,transparent);will-change:transform}
html.fx-on .fx-drift{animation:fx-drift 26s ease-in-out infinite alternate}
@keyframes fx-drift{0%{transform:translate(-60px,40px)}33%{transform:translate(140px,180px)}66%{transform:translate(40px,360px)}100%{transform:translate(180px,90px)}}
html.fx-on .fx-away>.r4glow,html.fx-on .fx-away .fx-drift{animation-play-state:paused!important}
/* ---- 2. 主ボタン：触れた時に、光が左から右へ一度だけ走る ---- */
html.fx-on :is(.r4btn,#go,#btnBegin){position:relative;isolation:isolate;overflow:hidden}
html.fx-on :is(.r4btn,#go,#btnBegin)::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;pointer-events:none;
 background:linear-gradient(100deg,transparent 0,rgba(143,220,207,.0) 20%,rgba(143,220,207,.55) 50%,rgba(143,220,207,0) 80%,transparent 100%);transform:translateX(-120%)}
html.fx-on :is(.r4btn,#go,#btnBegin):is(:hover,:focus-visible)::after{transform:translateX(220%);transition:transform .75s cubic-bezier(.3,.6,.2,1)}
/* ---- 3. やること表の「つくる」：細い光の線が上から下へ走り、結果の区画が順に浮かぶ（全部で 1 秒以内） ---- */
html.fx-on #result:not([hidden])>section.sec.fade{animation:none!important}
.fx-scan{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none;opacity:0;
 background:linear-gradient(90deg,transparent,rgba(143,220,207,.95) 20%,#EEF1F7 50%,rgba(143,220,207,.95) 80%,transparent);box-shadow:0 0 14px 2px rgba(143,220,207,.55)}
html.fx-on .fx-scan.go{animation:fx-scan .55s cubic-bezier(.4,0,.2,1) both}
@keyframes fx-scan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(calc(100vh - 2px))}}
html.fx-on .fx-rise{animation:fx-rise .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*.11s + .12s)}
@keyframes fx-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ---- 4. 全体の流れ：画面に入った時に一度だけ、光の点が流れの上を走り、各段が順に光る ---- */
html.fx-on .r4flow.fx-run::before{content:"";position:absolute;z-index:2;left:0;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;
 background:#EEF1F7;box-shadow:0 0 12px 4px rgba(143,220,207,.85);animation:fx-dot-x .95s cubic-bezier(.45,.05,.35,1) both}
@keyframes fx-dot-x{0%{opacity:0;transform:translateX(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(var(--fx-len,600px))}}
html.fx-on .r4flow.fx-run>li>a{animation:fx-node .5s ease-out both;animation-delay:calc(var(--i,0)*.13s)}
@keyframes fx-node{0%{box-shadow:0 0 0 0 rgba(143,220,207,0)}40%{box-shadow:0 0 0 1px rgba(143,220,207,.75),0 0 18px rgba(143,220,207,.35)}100%{box-shadow:0 0 0 0 rgba(143,220,207,0)}}
@media (max-width:640px){
 html.fx-on .r4flow.fx-run::before{left:28px;top:0;margin:-5px 0 0 -5px;animation-name:fx-dot-y}
 @keyframes fx-dot-y{0%{opacity:0;transform:translateY(0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(var(--fx-len,600px))}}
}
/* ---- 6. 押せるカード（PC）：触れた時にわずかに傾き、光の照り返しがカーソルに付いてくる ---- */
html.fx-on .fx-tilt{transition:transform .35s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;position:relative}
html.fx-on .fx-tilt.fx-tilting{transition:transform .08s linear}
html.fx-on .fx-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
 background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(143,220,207,.16),transparent 60%)}
html.fx-on .fx-tilt.fx-tilting::before{opacity:1}
/* ---- 8. 目次の帯：今いる所に印（線が伸びる） ---- */
html.fx-on .r4toc a{position:relative}
html.fx-on .r4toc a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--r4-a2,#8FDCCF);transform:scaleX(0);transform-origin:left center;transition:transform .3s ease}
html.fx-on .r4toc a.fx-here::after{transform:scaleX(1)}
html.fx-on .r4toc a.fx-here .n{color:var(--r4-a1,#F2C46D)!important}
html.fx-on .r4flow a.fx-here{border-color:var(--r4-a2,#8FDCCF)!important}
}
/* 動きを減らす設定：全部止める（途中で変えても、この決まりがすぐ効く） */
@media (prefers-reduced-motion:reduce){
 html.fx-on *,html.fx-on *::before,html.fx-on *::after{animation:none!important;transition:none!important}
 .fx-clip,.fx-scan{display:none!important}
 html.fx-on .fx-tilt{transform:none!important}
 html{scroll-behavior:auto!important}
}
@media print{.fx-clip,.fx-scan{display:none!important}html.fx-on *{animation:none!important;transition:none!important}}