/* ===== 落ち葉を表示するコンテナのスタイル ===== */
.leaves-container {
    display: flex;
    justify-content: center;
  position: relative;
  /* height: 100vh; コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  /* overflow: hidden; コンテナからはみ出した要素を隠す */
  background-color: #C0CEE6;
  z-index: 0;
}

/* ===== 落ち葉のスタイル ===== */

/* 落ち葉の共通スタイル */
.leaf {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  animation: animate-leaf 10s linear;
}

/* 落ち葉1 */
.leaf-1 {
  background-image: url('img/hane.svg'); /* 任意のパスを記入 */
}

/* 落ち葉2 */
.leaf-2 {
  background-image: url('img/hane.svg'); /* 任意のパスを記入 */
}

/* 落ち葉3 */
.leaf-3 {
  background-image: url('img/hane.svg'); /* 任意のパスを記入 */
}

/* ===== 落ち葉が降るアニメーション ===== */
@keyframes animate-leaf {
  0% {
    opacity: 0;
    top: 0;
    transform: translateY(-100%) rotate(0);
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 100vh;
    transform: translateY(110vh) rotate(225deg);
  }
}