/* 初期のフェードインスタイル */
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transform: translateY(20px); /* 初期位置を下に設定 */
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0); /* 最終位置を元に戻す */
}

/* ページロード時のアニメーション */
.on-load {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.on-load.visible {
  opacity: 1;
}