/* CTAイラスト（惑星・ロケット）の共通の動き：メニューのボタンとCONTACTバナーで共有
   ふだん＝ゆっくり上下に漂う / ホバー・タップ＝ふわっと跳ねて少し回転 / 押している間＝小さく弾む（ボタンは影の分だけ沈む）
   動かすのは translate / transform のみ。インラインの rotate（元の傾き）とは干渉しない */
@keyframes saCtaDrift{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes saCtaHop{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-8px) rotate(8deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes saCtaBounce{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
.cta-motif{animation:saCtaDrift 6s ease-in-out infinite;pointer-events:none}
:is(.cta-wrap,a.line-btn):hover > .cta-motif{animation:saCtaHop .4s ease-out,saCtaDrift 6s ease-in-out infinite}
:is(.cta-wrap,a.line-btn):active > .cta-motif{animation:saCtaBounce .3s ease-out,saCtaDrift 6s ease-in-out infinite}
.cta-wrap:has(a:active) > .cta-motif{animation:saCtaBounce .3s ease-out,saCtaDrift 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.cta-motif,:is(.cta-wrap,a.line-btn):hover > .cta-motif,:is(.cta-wrap,a.line-btn):active > .cta-motif,.cta-wrap:has(a:active) > .cta-motif{animation:none}}
html.sa-pc{--banner-title-fs:18px}