.fade-in-on-load {
  /* 定義したアニメーション (fade-in) を2秒かけて実行 */
  animation: fade-in 3s ease-out forwards;
}

/* アニメーションのキーフレームを定義 */
@keyframes fade-in {
  0% {
    opacity: 0; /* アニメーション開始時: 透明 */
  }
  100% {
    opacity: 1; /* アニメーション終了時: 不透明 */
  }
}

/*
animationの指定:
animation: [アニメーション名] [時間] [速度] [終了時の状態];

- アニメーション名: fade-in
- 時間: 2s (2秒)
- 速度: ease-out (等速で動き、最後はゆっくり終わる)
- 終了時の状態: forwards (アニメーション終了後の状態 (100% の状態) を維持)
*/