#image {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, 50px);
  /* 初期状態で50px下にオフセット */
  opacity: 0;
  transition:
    opacity 1.2s ease-out,
    transform 0.5s ease-out;
}

#image.show {
  transform: translate(-50%, 0);
  /* まっすぐ上に移動 */
  opacity: 1;
}

.animated-content {
  position: relative;
  /* relative コンテンツ用 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50px);
  /* 初期状態: 50px下にオフセット */
  opacity: 0;
  transition:
    opacity 0.8s ease-out,
    transform 0.4s ease-out;
}

.animated-content.show {
  transform: translate(-50%, 0);
  /* まっすぐ上に移動 */
  opacity: 1;
}