/* ===== ページの動き ===== <html> に付いている fx-○○ クラスの効果だけ動く（外せばその動きは止まる） ===== */

/* ② 写真がゆっくり寄る：PCはマウスを乗せると拡大／スマホは画面に入るとゆっくり寄る */
.rs .shot,.shop .shot{overflow:hidden}
.fx-zoom .rs .shot img,.fx-zoom .shop .shot img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.fx-zoom .rs:hover .shot img,.fx-zoom .shop:hover .shot img{transform:scale(1.08)}}
@media (hover:none){.fx-zoom .rs.in .shot img,.fx-zoom .shop.in .shot img{animation:fxKen 7s ease-out forwards}}
@keyframes fxKen{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ③ 写真が黒くなって「LINEで査定」：PCはマウス／スマホは画面の真ん中に来たカード */
.rs .shot{position:relative}
.fxov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(20,16,14,.72);color:#fff;opacity:0;transition:opacity .35s ease;pointer-events:none;text-align:center;padding:0 12px}
.fxov b{font-family:var(--min);font-size:15px;letter-spacing:.08em;line-height:1.6}
.fxov span{background:var(--line-green);padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700}
.fx-dark .fxov{pointer-events:auto}
@media (hover:hover){.fx-dark .rs:hover .fxov{opacity:1}}
.fx-dark .rs.fxc .fxov{opacity:1}

/* ④ 金額が回って止まる（回っている途中で「円」が改行しないように） */
.fxnum{font-variant-numeric:tabular-nums}
.rs__price{white-space:nowrap}
@media(max-width:520px){.rs__price{font-size:21px}.fxov b{font-size:13px}.fxov span{font-size:12px;padding:8px 12px}}

/* ⑤ 万の判子：開いた瞬間に「ポン」と押される */
.hero{overflow:hidden}
.hero__seal{background-color:transparent}
.fx-stamp .hero__seal{transform-origin:85% 50%;animation:fxStamp .9s cubic-bezier(.3,1.6,.5,1) .25s both}
@keyframes fxStamp{0%{opacity:0;transform:scale(1.9) rotate(-10deg)}60%{opacity:.85;transform:scale(.97) rotate(1deg)}100%{transform:none}}
.fx-stamp .hero__in{animation:fxShake .35s ease .75s}
@keyframes fxShake{0%,100%{transform:none}30%{transform:translate(2px,1px)}60%{transform:translate(-2px,-1px)}}

/* ⑥ LINEボタンに光が走る */
.fx-shine .act--line,.fx-shine .btn-line,.fx-shine .bar .b2,.fx-shine .deli__btn{position:relative;overflow:hidden}
.fx-shine .act--line::after,.fx-shine .btn-line::after,.fx-shine .bar .b2::after,.fx-shine .deli__btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:fxShine 4.5s ease-in-out infinite}
@keyframes fxShine{0%,70%{left:-60%}100%{left:130%}}

/* ⑦ 買取品目のカードが浮く：PCはマウス／スマホは押した時に沈む */
.fx-lift .item{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.fx-lift .item .ic img{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
@media (hover:hover){.fx-lift .item:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(139,0,0,.12);border-color:#d9b8b6}.fx-lift .item:hover .ic img{transform:scale(1.12) rotate(-4deg)}}
@media (hover:none){.fx-lift .item:active{transform:scale(.97)}.fx-lift .item.in .ic img{animation:fxPop .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--fxd,0s)}}
@keyframes fxPop{0%{transform:scale(.6)}100%{transform:none}}

/* 動きを減らす設定の端末では止める */
@media (prefers-reduced-motion:reduce){[class*="fx-"] *{animation:none!important;transition:none!important}}