/* アニメーション（参考: creators.twxd.jp の動き方をベースに、速度はゆったりめに調整）
   - 出現: 下50pxから .7s / 少し跳ねるイージング / リスト内はランダム遅延0〜.4s / 画面下10%で発火・1回のみ
   - 見出し英字: 1文字ずつランダム順
   - ローディング: FVの画像・フォントが揃うまでロゴ＋進捗バー → 白ごと1.2sで消える
   - FV: キャラ → コピー＋あしらい → 日時カード・CTA(下から)／ヘッダー(上から)
   - 実績の数値: 画面に入ったら0から1.5秒でカウントアップ(参考: e-sect-recruit.com 数字で見るセクト)
   - 浮遊あしらい: 3パターン（a=上下+横流れ / b=ゆらゆら傾く / c=円を描く）をJSで隣同士が被らないよう振り分け
   - ボタンhover: scale(1.1) .3s 跳ねるイージング
   - カード・ロゴhover: 小さく揺れる / Q&Aは揺らさず背景色+Qマーク
   transform を持つ既存要素と衝突しないよう translate / scale / rotate 個別プロパティで動かす */
/* ローディングはアニメ有効時だけ出す */
.ld{display:none}
@property --fx{syntax:"<length>";inherits:false;initial-value:0px}
@property --fy{syntax:"<length>";inherits:false;initial-value:0px}
@property --ry{syntax:"<length>";inherits:false;initial-value:0px}
@property --fr{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{--bnc:cubic-bezier(.34,1.56,.64,1);--fa:10px}
@media (min-width:1024px){:root{--fa:1.4rem}}

@media (prefers-reduced-motion:no-preference){
/* ローディング: FVの画像とフォントが揃うまで白地にロゴ＋読み込み状況のバー → 揃ったら白ごと1.2sで消える */
.anim .ld{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;position:fixed;inset:0;background:#fff;z-index:9999;pointer-events:none;transition:opacity 1.2s,visibility 0s 1.2s}
.anim.is-loaded .ld{opacity:0;visibility:hidden}
.ld img{width:180px;animation:ld-fw 2.4s ease-in-out infinite}
.ld__bar{width:180px;height:4px;border-radius:99px;background:#e9eef6;overflow:hidden}
.ld__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--mint));scale:var(--lp,.06) 1;transform-origin:left;transition:scale .5s ease-out}
@keyframes ld-fw{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* スクロール出現 */
.anim .rv{transition:opacity .6s var(--dl,0s),translate .7s var(--dl,0s) var(--bnc)}
.anim .rv:not(.is-in){opacity:0;translate:0 50px}

/* 見出し英字（1文字ずつ） */
.anim .ttl__en{white-space:nowrap}
.anim .ttl__en:not(.is-sp){opacity:0}
.anim .ttl__en span{display:inline-block;transition:opacity .5s var(--dl),translate .6s var(--dl) var(--bnc)}
.anim .ttl__jp{transition:opacity .6s var(--dj),translate .7s var(--dj) var(--bnc)}
.anim .ttl .spk{transition:opacity .6s .8s}
.anim .ttl:not(.is-in) .ttl__en span,.anim .ttl:not(.is-in) .ttl__jp{opacity:0;translate:0 50px}
.anim .ttl:not(.is-in) .spk{opacity:0}

/* プログラムの線（PC）: 項目と一緒に上から引く */
.anim .prog ol.ln:before{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.45,0,.3,1) .05s}
.anim .prog ol.ln.is-in:before{clip-path:inset(0 -1rem)}

/* FV 装飾の登場 */
/* 順番: キャラ → コピー＋あしらい → 日時カード・CTA(下から)／ヘッダー(上から) */
.anim .fv__girl,.anim .fv__catch span,.anim .fv__card,.anim .fv__cta,.anim .fv .hd{transition:opacity .7s var(--dl,0s),translate .8s var(--dl,0s) var(--bnc),scale .3s var(--bnc)}
/* あしらいは浮遊(--fx/--fy)と合成した translate を持つので translate 自体はトランジションさせない（終わった瞬間に浮遊位置へ飛ぶため）。出現量 --ry だけ動かす */
.anim .fv .prop{transition:opacity .7s var(--dl,0s),--ry .8s var(--dl,0s) var(--bnc)}
.anim .fv .prop,.anim .fv__catch span{--dl:.6s}
.anim .fv__catch span:nth-child(2){--dl:.75s}
.anim .fv__card,.anim .fv .hd{--dl:1.2s}
.anim .fv__cta{--dl:1.35s}
.anim:not(.fv-in) .fv .prop{opacity:0;--ry:50px}
.anim:not(.fv-in) .fv__girl,.anim:not(.fv-in) .fv__catch span,.anim:not(.fv-in) .fv__card,.anim:not(.fv-in) .fv__cta{opacity:0;translate:0 50px}
.anim:not(.fv-in) .fv .hd{opacity:0;translate:0 -50px}

/* TIME TABLE: 帯が開始時刻から伸びる（PC=左→右、SP=上→下）。01が伸び切る手前で点線→02が続く
   伸び終わったら clip-path を外す（付けたままだとSPの拡大表示で文字のにじみ方が変わるため、transition ではなく animation で動かす） */
.anim .tt:not(.is-in) .tt__bar{clip-path:inset(-1rem 100% -1rem -1rem round 99rem)}
.anim .tt:not(.is-in) .tt__row:first-of-type:after{clip-path:inset(-1rem 100% -1rem 0)}
.anim .tt:not(.is-in) .ttv__blk{clip-path:inset(-6px -6px 100% -6px round 18px)}
.anim .tt.is-in .tt__bar{animation:tt-x 1s cubic-bezier(.45,0,.3,1) .5s backwards}
.anim .tt.is-in .tt__row:first-of-type:after{animation:tt-dash .3s linear 1.1s backwards}
.anim .tt.is-in .ttv__blk{animation:tt-y 1s cubic-bezier(.45,0,.3,1) .5s backwards}
.anim .tt.is-in .tt__row~.tt__row .tt__bar,.anim .tt.is-in .ttv__blk~.ttv__blk{animation-delay:1.35s;animation-duration:.85s}
@keyframes tt-x{from{clip-path:inset(-1rem 100% -1rem -1rem round 99rem)}to{clip-path:inset(-1rem -1rem -1rem -1rem round 99rem)}}
@keyframes tt-dash{from{clip-path:inset(-1rem 100% -1rem 0)}to{clip-path:inset(-1rem 0 -1rem 0)}}
@keyframes tt-y{from{clip-path:inset(-6px -6px 100% -6px round 18px)}to{clip-path:inset(-6px -6px -6px -6px round 18px)}}

/* 実績の数値カウントアップ: 最終値の幅を透明で確保して、数字が増えても単位が動かないようにする */
.anim .cu{display:inline-grid}
.anim .cu>span{grid-area:1/1;justify-self:end;font-size:inherit}
.anim .cu>span[aria-hidden]{visibility:hidden}

/* 浮遊あしらい（ふわふわ・3パターン） */
.anim .prop{translate:var(--fx) calc(var(--fy) + var(--ry));rotate:var(--fr)}
.anim .prop,.anim .prop.fa{animation:fl-a var(--fd,5.5s) ease-in-out var(--fdl,0s) infinite,fl-ax 7s ease-in-out var(--fdl,0s) infinite var(--fxd,normal)}
.anim .prop.fb{animation:fl-b var(--fd,6.5s) ease-in-out var(--fdl,0s) infinite}
.anim .prop.fc{animation:fl-c var(--fd,9s) linear var(--fdl,0s) infinite}
.anim .prop:not(.fv .prop){transition:opacity .6s,--ry .7s var(--bnc)}
.anim .prop.rv:not(.is-in){translate:var(--fx) calc(var(--fy) + var(--ry));--ry:50px}
/* a: 上下にふわっと＋横に少し流れる */
@keyframes fl-a{0%,100%{--fy:0px}50%{--fy:calc(var(--fa) * -1)}}
@keyframes fl-ax{0%,100%{--fx:0px}50%{--fx:calc(var(--fa) * .5)}}
/* b: 振り子のようにゆらゆら傾く */
@keyframes fl-b{0%,100%{--fr:-5deg;--fy:0px}50%{--fr:5deg;--fy:calc(var(--fa) * -.6)}}
/* c: 小さな円を描いて漂う */
@keyframes fl-c{0%,100%{--fx:0px;--fy:0px;--fr:0deg}25%{--fx:calc(var(--fa) * .7);--fy:calc(var(--fa) * -.5);--fr:3deg}50%{--fx:0px;--fy:calc(var(--fa) * -1);--fr:0deg}75%{--fx:calc(var(--fa) * -.7);--fy:calc(var(--fa) * -.5);--fr:-3deg}}

/* キラ（参考ボタンのキラ同様の明滅） */
.anim .spk{animation:kira 2.4s ease-in-out var(--fdl,0s) infinite}
@keyframes kira{0%,100%{scale:1.1}50%{scale:.85}}
}

/* hover（マウス環境のみ） */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
/* ボタン: 参考サイト同様 scale(1.1) */
.fv__cta,.cta__btn,.gc button,.more__btn,.foot__btns a,.nav__cta a,.hd__menu,.nav__x,.sheet__x,.nav li a{transition:scale .3s var(--bnc)}
.fv__cta:hover,.cta__btn:hover,.gc button:hover,.more__btn:hover,.foot__btns a:hover,.nav__cta a:hover,.hd__menu:hover,.nav__x:hover,.sheet__x:hover,.nav li a:hover{scale:1.1}
.nav li a{transform-origin:left center}
/* クリックできるカード・企業ロゴ: 少し揺れる */
/* :hover に直接付けるとカーソルが外れた瞬間に止まるので、JSで付けた .is-yure を揺れ終わり(animationend)まで残す */
.gc.is-yure,.frame--item.is-yure,.org__logo.is-yure,.pin.is-yure{animation:yure 1s ease-in-out}
.tag:not(.tag--soon){transform-origin:50% 0;--yr:1.2deg}
/* ロゴは見せる部分なので揺れは気持ち程度 */
.org__logo{--yr:.8deg}
.tag.is-yure:not(.tag--soon){animation:yure 1.3s ease-in-out}
@keyframes yure{0%,100%{rotate:0deg}20%{rotate:calc(var(--yr,2deg) * -1)}40%{rotate:calc(var(--yr,2deg) * .8)}60%{rotate:calc(var(--yr,2deg) * -.5)}80%{rotate:calc(var(--yr,2deg) * .25)}}
/* Q&A: 揺らさず、質問行が開いた時の色にうっすら染まり、Qマークが弾む */
.qa__q{transition:background-color .3s}
.qa:not(.is-open) .qa__q:hover{background:#fde8ef80}
.qa__q .m{transition:scale .3s var(--bnc)}
.qa__q:hover .m{scale:1.15}
.hd__logo img,.hd__menu span{transition:filter .3s,color .3s}
}