/* ===== UI：動きとボタン ===== */
/* スクロールで出てくる */
.rv-up{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv-up.in{opacity:1;transform:none}
.rv-zoom{opacity:0;transform:scale(.96);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv-zoom.in{opacity:1;transform:none}
/* 写真はゆっくり寄る */
.photo img,.ph img,.mcard .ph img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rv-zoom.in img{transform:scale(1.04)}
/* ファーストビューの登場 */
@keyframes fvIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes staffIn{from{opacity:0;transform:translate(-50%,24px) scale(.98)}to{opacity:1;transform:translate(-50%,0)}}
.sv h1,.jv h1,.sv .lead3,.jv .lead2,.sv .en2,.jv .ribbon,.sv .chips,.jv .zero,.jv .tagline{animation:fvIn .9s cubic-bezier(.2,.7,.2,1) both}
.sv .en2,.jv .ribbon{animation-delay:.05s}.sv h1,.jv h1{animation-delay:.15s}.sv .lead3,.jv .lead2{animation-delay:.3s}
.sv .chips,.jv .tagline{animation-delay:.75s}.jv .zero{animation-delay:.6s}
.sv .staff img,.jv .staff img{animation:staffIn 1.1s .35s cubic-bezier(.2,.7,.2,1) both}
.jv .staff img{animation-name:staffIn2}
@keyframes staffIn2{from{opacity:0;transform:translate(-46%,24px)}to{opacity:1;transform:translate(-46%,0)}}
/* ボタン：押せる感じ */
.cta{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.cta:hover{transform:translateY(-2px)}
.cta:active,.sub2 a:active,.fixed a:active,.telbig:active{transform:scale(.97)}
.sub2 a,.telbig,.fixed a{transition:transform .15s ease,filter .15s ease}
.sub2 a:hover,.telbig:hover,.fixed a:hover{filter:brightness(1.06)}
.cta .arr{display:inline-block;transition:transform .2s}
.cta:hover .arr{transform:translateX(4px)}
/* 980円のカードは少し呼吸する */
@keyframes pulse{0%,100%{box-shadow:0 10px 22px rgba(168,113,74,.35)}50%{box-shadow:0 10px 30px rgba(168,113,74,.55)}}
.offer .cta{animation:pulse 2.4s ease-in-out infinite}
/* 画面下の固定ボタン：スクロールで出る */
.fixed{transform:translateY(120%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fixed.show{transform:none}
/* よくある質問：ひらく動き */
details summary::after{transition:transform .25s}
details[open] summary::after{transform:rotate(180deg)}
details p{animation:fvIn .35s ease both}
/* 動きを減らす設定の人には止める */
@media (prefers-reduced-motion:reduce){.rv-up,.rv-zoom{opacity:1;transform:none;transition:none}*{animation:none!important}}
/* 画像書き出し用 */
.static .rv-up,.static .rv-zoom{opacity:1;transform:none}.static .fixed{transform:none;position:static!important}