@charset "UTF-8";
/* =========================================
   アニメーション定義 
   ========================================= */
.img-wrap {
  overflow: hidden;
}

/* 1. アニメーションの動きを定義 */
@keyframes img-zoom-fade {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes txt-slide-fade {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 2. 初期状態の設定 */
/* !important をすべて外しました。これで animation が優先されます */
.js-anim-img,
.js-anim-txt {
  opacity: 0;
}

/* 3. クラスがついた時の設定 */
.js-anim-img.is-active {
  /* 名前 時間 イージング 終了状態維持 */
  animation-name: img-zoom-fade;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.js-anim-txt.is-active {
  animation-name: txt-slide-fade;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  /* レイアウト維持のため */
  display: block;
}