/* hero-device-after-photo.css — 実機は、写真が出そろってから立ち上がる（2026-08-08 Claude Design） 【直す理由】実測（表紙700msを足した絶対時刻） 写真 2650ms 出はじめ → 3040ms 出そろう 実機 2500ms 出はじめ → 2800ms ほぼ出切る ← 写真より先に出ていた 写真が 0.03 の時点で実機はもう 0.70。順番が逆に見える。 【直し方】写真が静止している 30%→36%（2340→2808ms）が実機のための窓なので、そこへ入れる。 31.5%（2457ms）から立ち上がり、36.5%（2847ms）で据わる。 写真が動き出すのは 37% なので、実機が据わってから写真が動く。 ★ 同名 @keyframes の後勝ちに頼らない。 hero-intro.css / mobile-study-common.css は body 末尾で読まれるので、 このファイルを に置くと同名上書きでは負ける。かといって body 末尾に置くと、 回線が遅いときに**アニメが走り出した後でシートが届いて実機が飛ぶ**。 そこで固有名の @keyframes を作り、animation-name だけを !important で差し替える。 こうすると読み込み順に関係なく必ず当たり、途中差し替えも起きない。 */ @keyframes hero-device-after-photo{ 0%,31.5%{opacity:0;transform:translate3d(34px,46px,0) scale(.985)} 35.5%{opacity:1;transform:translate3d(0,0,0) scale(1.008)} 36.5%,100%{opacity:1;transform:translate3d(0,0,0) scale(1)} } html.motion-ready .hero.is-active + .journey .shared-phone-entrance{animation-name:hero-device-after-photo!important} /* スマホ。実機は入れ子で縮むので横の寄りは 14px（PCの32px/1280＝2.50%に合わせた値）。 ※ SPは `.hero` に is-active が付かない不具合があり、土台の規則がそもそも当たっていない。 当たるように is-active を要求しない形で書く（写真側はJS駆動なのでCSSでは戻せない）。 */ @keyframes hero-device-after-photo-sp{ 0%,31.5%{opacity:0;transform:translate3d(14px,46px,0) scale(.985)} 35.5%{opacity:1;transform:translate3d(0,0,0) scale(1.008)} 36.5%,100%{opacity:1;transform:translate3d(0,0,0) scale(1)} } @media (max-width:560px) and (orientation:portrait){ html.motion-ready .hero + .journey .shared-phone-entrance{animation:hero-device-after-photo-sp 7.8s linear both!important} /* 背景のはいはいを左へ寄せる。 SPの背景は 1080×1918 を cover で 479.7×852 に描いているので、横に 86.3px の余りがある。 object-position の横を上げるほど画像が左へ動く（＝被写体が左に来る）。 50%（土台）… 左右 43.2px ずつ切る＝被写体は画面中央 196.5px 88%（ここ）… 左を 76.0px 切る＝被写体が 32.8px 左へ＝約 164px 写真の生誕は中心 114px なので、寄せられる限界（100%＝43.2px左）でも完全には重ならない。 縦は土台のまま 55%。 */ .hero-photo{object-position:88% 55%!important} /* 写真の生誕位置＝左。真ん中の実機へ向かって吸い込まれる絵にする。 left は translateX(-50%) 前提なので、これが**中心**の位置。 29% ＝ 114px。写真幅166なので左端31px・右端197px＝画面の左半分に収まる。 実機の画面中心は 196.5 なので、右上へ 82px 寄って吸い込まれる。 ※ 実際の飛翔は js/hero-sp-flight.js が rect から算出する（SPでは土台のJSが動かないため）。 */ .hero-captured-photo{left:29%!important} }