/* ============================================================
   補助金活用イメージ アニメーション
   /common/css/subsidy-anim.css
   ------------------------------------------------------------
   ・着火は既存の fade-in 機構に相乗り。
     親の li.fade-in に .visible が付くと順番に再生され、
     登場後は3パネルがふわふわ上下に浮遊し続けます
     （growth-graph・lstep-anim と同じトリガー）。
   ・専用 JS での着火処理は不要です（描画は subsidy-anim.js）。
   ============================================================ */

.sub-anim {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.sub3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.sub-panel {
  flex: 1 1 0;
  min-width: 0;
}
.sub-panel img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.sub-arrow {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

/* ---- 初期状態（着火前は止めておく） ---- */
.sub-panel,
.sub-arrow { opacity: 0; }

/* ---- 着火：親 li.fade-in に .visible が付いたら順番に再生 ----
   左パネル → 矢印 → 中央パネル → 矢印 → 右パネル
   登場(s-up)のあと、続けて浮遊(s-float)へ。タイミングをずらす。
*/
.fade-in.visible .sub-p1 { animation: sub-up 0.6s ease-out 0.2s forwards, sub-float 4s ease-in-out 1.0s infinite; }
.fade-in.visible .sub-a1 { animation: sub-pop 0.5s cubic-bezier(.5,1.6,.5,1) 0.9s forwards; }
.fade-in.visible .sub-p2 { animation: sub-up 0.6s ease-out 1.3s forwards, sub-float 4s ease-in-out 2.0s infinite; }
.fade-in.visible .sub-a2 { animation: sub-pop 0.5s cubic-bezier(.5,1.6,.5,1) 2.0s forwards; }
.fade-in.visible .sub-p3 { animation: sub-up 0.6s ease-out 2.4s forwards, sub-float 4s ease-in-out 3.0s infinite; }

/* ---- キーフレーム ---- */
@keyframes sub-up    { from { opacity: 0; transform: translateY(12px); }
                       to   { opacity: 1; transform: translateY(0); } }
@keyframes sub-pop   { from { opacity: 0; transform: scale(.4); }
                       to   { opacity: 1; transform: scale(1); } }
@keyframes sub-float { 0%,100% { transform: translateY(0); }
                       50%      { transform: translateY(-8px); } }

/* ---- 動きを抑える設定の人には静止表示 ---- */
@media (prefers-reduced-motion: reduce) {
  .sub-panel, .sub-arrow {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}