@charset "UTF-8";

/* ===== 落ち葉を表示するコンテナのスタイル ===== */
.leaves-container {
  position: relative;
  height: 100%; /* コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: -1;
}

/* 落ち葉の共通スタイル */
.leaf {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: -10vh;
  animation-fill-mode: forwards;
}

.leaf-1 { background-image: url('../img/leaves/leaf01.svg');}
.leaf-2 { background-image: url('../img/leaves/leaf02.svg');}
.leaf-3 { background-image: url('../img/leaves/leaf03.svg');}
.leaf-4 { background-image: url('../img/leaves/leaf04.svg');}
.leaf-5 { background-image: url('../img/leaves/leaf05.svg');}
.leaf-6 { background-image: url('../img/leaves/leaf06.svg');}

@keyframes sway-leaf {
  0% {
    opacity: 0;
    top: 0;
    transform: translateX(0) rotate(0deg);
  }
  15% {
    opacity: .2;
    transform: translateX(-10px) rotate(-5deg);
  }
  30% {
    transform: translateX(-20px) rotate(-15deg);
  }
  50% {
    transform: translateX(20px) rotate(15deg);
  }
  70% {
    transform: translateX(-15px) rotate(-10deg);
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: translateX(0) rotate(360deg);
  }
}