/* ================================================= */
/* アニメーションの基本設定（共通）                    */
/* ================================================= */

/* 基本クラス：アニメーション前の共通スタイル */
.fade-in {
  opacity: 0;
  transition: opacity 2s, transform 2s;
}

/* 方向クラス：どの方向から来るかを指定 */
.from-bottom {
  transform: translateY(50px); /* 下から */
}
.from-top {
  transform: translateY(-50px); /* 上から */
}
.from-left {
  transform: translateX(-50px); /* 左から */
}
.from-right {
  transform: translateX(50px); /* 右から */
}


/* ================================================= */
/* アニメーション後の最終的な状態                     */
/* ================================================= */

/* 画面内に入ったときに付与するクラス */
.is-visible {
  opacity: 1;
  transform: translate(0, 0); /* 位置をリセット */
}