@charset "utf-8";
/*------------------------  animation.css  ------------------------*/

.peach-l { position: absolute; top: -220px; left: -6%; width: 220px; height: 100%; animation: shake 6s ease infinite; }
.peach-l .peach { position: absolute; width: 220px; animation: fall 48s linear infinite; }
.peach-l .ph01 { animation-delay: 0s; }
.peach-l .ph02 { animation-delay: 12s; }
.peach-l .ph03 { animation-delay: 23s; }
.peach-l .ph04 { animation-delay: 37s; }

.peach-r { position: absolute; top: -220px; right: -6%; width: 220px; height: 100%; animation: shake 6s ease infinite; }
.peach-r .peach { position: absolute; width: 220px; animation: fall 40s linear infinite; }
.peach-r .ph01 { animation-delay: 5s; }
.peach-r .ph02 { animation-delay: 16s; }
.peach-r .ph03 { animation-delay: 24s; }
.peach-r .ph04 { animation-delay: 36s; }


@media screen and (max-width: 800px) {
 .peach-l { top: -140px; left: -16%; width: 140px; animation: shake 6s ease infinite; }
 .peach-l .peach { position: absolute; width: 140px; animation: fall 48s linear infinite; }
 .peach-l .ph01 { animation-delay: 0s; }
 .peach-l .ph02 { animation-delay: 12s; }
 .peach-l .ph03 { animation-delay: 23s; }
 .peach-l .ph04 { animation-delay: 37s; }

 .peach-r { top: -140px; right: -16%; width: 140px; animation: shake 6s ease infinite; }
 .peach-r .peach { position: absolute; width: 140px; animation: fall 40s linear infinite; }
 .peach-r .ph01 { animation-delay: 5s; }
 .peach-r .ph02 { animation-delay: 15s; }
 .peach-r .ph03 { animation-delay: 24s; }
 .peach-r .ph04 { animation-delay: 35s; }
}



@keyframes fall {
 0% { transform: translateY(0); }
 100% { transform: translateY(2400px); }
}

@keyframes shake {
  0% { transform: translateX(10px); }
  50% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}