/*////////////////////////////////////////////////////////

animation

////////////////////////////////////////////////////////*/

/* 落下アニメ
------------------------------------------------------- */
/* container
------------------------- */
.effect-fall,
.effect-fall-kira {
  position: relative;
  animation: fade 15s linear forwards;
  z-index: 2;
}
/* base
------------------------- */
[class^="fall-item"],
.kira {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}
[class^="fall-item"] {
  top: -10px;
  width: 30px;
  height: 30px
}
/*--- 落下アイテム ---*/
.fall-item {
  opacity: 0;
  background-image: url('../images/free/anime/effect-fall/heart_blue/1.png');
  animation: fall-rotate 8s linear infinite backwards;
}
.fall-item2 {
  opacity: .9;
  background-image: url('../images/free/anime/effect-fall/heart_blue/3.png');
  animation: fall-rotate-fade 8s linear infinite backwards;
}
/*--- キラキラ ---*/
.kira {
  opacity: .9;
  top: 20px;
  width: 20px;
  height: 20px;
  background-image: url('../images/free/anime/effect-fall/kira.png');
  animation: kira-fade 5s linear infinite;
}
/* keyframes
------------------------- */
@keyframes fade {
  0%, 90% {
    opacity: 1;
    visibility: visible
  }
  100% {
    opacity: 0;
    visibility: hidden
  }
}
@keyframes fall-rotate {
  0% {
    transform: translateY(18vh) rotate(0) scale(1);
    opacity: 0
  }
  10% {
    transform: translateY(24vh) rotate(300deg) scale(1);
    opacity: .8
  }
  40% {
    transform: translateY(50vh) rotate(900deg) scale(1);
    opacity: .8
  }
  80% {
    transform: translateY(80vh) rotate(1800deg) scale(1);
    opacity: .8
  }
  85% {
    opacity: 0
  }
  100% {
    transform: translateY(100vh) rotate(2100deg) scale(.8);
    opacity: 0
  }
}
@keyframes fall-rotate-fade {
  0% {
    transform: translateY(10vh) rotate(0);
    opacity: 0
  }
  10% {
    transform: translateY(20vh) rotate(300deg);
    opacity: .8
  }
  40% {
    transform: translateY(50vh) rotate(900deg) scale(.7);
    opacity: .8
  }
  45% {
    opacity: 0
  }
  100% {
    transform: translateY(70vh) rotate(2100deg) scale(.7);
    opacity: 0
  }
}
@keyframes kira-fade {
  0% {
    opacity: 0
  }
  10% {
    opacity: 1
  }
  15% {
    transform: translateY(10px) rotate(45deg) scale(1.2);
    opacity: 1
  }
  18% {
    opacity: 0
  }
  45% {
    opacity: 0
  }
  50% {
    transform: translateY(15px) rotate(90deg) scale(1);
    opacity: 1
  }
  67% {
    transform: translateY(20px) rotate(135deg) scale(1.2);
    opacity: 1
  }
  72% {
    transform: translateY(25px) rotate(150deg);
    opacity: 0
  }
  100% {
    transform: rotate(180deg);
    opacity: 0
  }
}
@keyframes kira-fade2 {
  0% {
    opacity: 0
  }
  20% {
    opacity: 1
  }
  27% {
    transform: translateY(10px) rotate(45deg) scale(1.2);
    opacity: 1
  }
  30% {
    opacity: 0
  }
  55% {
    opacity: 0
  }
  60% {
    transform: translateY(15px) rotate(90deg) scale(1);
    opacity: 1
  }
  77% {
    transform: translateY(20px) rotate(135deg) scale(1.2);
    opacity: 1
  }
  82% {
    transform: translateY(25px) rotate(150deg);
    opacity: 0
  }
  100% {
    transform: rotate(180deg);
    opacity: 0
  }
}
/* 落下アイテム
------------------------- */
.fall-item:nth-child(1),
.fall-item2:nth-child(8) {
  width: 20px;
  height: 20px;
  animation-duration: 10s;
}
.fall-item:nth-child(3),
.fall-item2:nth-child(9),
.fall-item2:nth-child(13) {
  width: 15px;
  height: 15px;
  animation-duration: 12s;
}
.fall-item:nth-child(5),
.fall-item2:nth-child(11) {
  width: 12px;
  height: 12px;
  animation-duration: 14s;
}
/* 1 */
.fall-item:nth-child(1) {
  left: 5%;
  animation-delay: 2s;
}
.fall-item:nth-child(2) {
  left: 10%;
  animation-delay: 1s;
}
.fall-item:nth-child(3) {
  left: 30%;
  animation-delay: 4s;
}
.fall-item:nth-child(4) {
  left: 70%;
  animation-delay: 3s;
}
.fall-item:nth-child(5) {
  left: 80%;
  animation-delay: 3s;
}
.fall-item:nth-child(6) {
  right: 10%;
}
/* 2 */
.fall-item2:nth-child(7),
.fall-item2:nth-child(10),
.fall-item2:nth-child(14) {
  animation-duration: 14s;
}
.fall-item2:nth-child(7) {
  left: 10%;
  animation-delay: 6s;
}
.fall-item2:nth-child(8) {
  left: 20%;
}
.fall-item2:nth-child(9) {
  left: 30%;
  animation-delay: 1s;
}
.fall-item2:nth-child(10) {
  left: 40%;
  animation-delay: 3s;
}
.fall-item2:nth-child(11) {
  left: 50%;
}
.fall-item2:nth-child(12) {
  left: 60%;
  animation-delay: 4s;
}
.fall-item2:nth-child(13) {
  left: 90%;
  animation-delay: 2s;
}
.fall-item2:nth-child(14) {
  right: 5%;
  animation-delay: 5s;
}
/* キラキラ
------------------------- */
.kira:nth-child(3),
.kira:nth-child(5),
.kira:nth-child(7),
.kira:nth-child(8),
.kira:nth-child(11),
.kira:nth-child(13),
.kira:nth-child(16) {
  animation: kira-fade2 5s linear infinite;
}
.kira:nth-child(2),
.kira:nth-child(14),
.kira:nth-child(16) {
  animation-duration: 5.3s;
}
.kira:nth-child(3),
.kira:nth-child(7) {
  animation-duration: 3s;
}
.kira:nth-child(5),
.kira:nth-child(6),
.kira:nth-child(9) {
  animation-duration: 4.7s;
}
.kira:nth-child(5),
.kira:nth-child(6),
.kira:nth-child(9),
.kira:nth-child(13),
.kira:nth-child(15) {
  width: 10px;
  height: 10px;
}
.kira:nth-child(2),
.kira:nth-child(10) {
  width: 30px;
  height: 30px
}
.kira:nth-child(1) {
  top: 40vh;
  left: 8%
}
.kira:nth-child(2) {
  top: 36vh;
  left: 13%;
}
.kira:nth-child(3) {
  top: 5vh;
  left: 16%;
}
.kira:nth-child(4) {
  top: 21vh;
  left: 28%;
  width: 14px;
  height: 14px;
  animation-duration: 6s;
}
.kira:nth-child(5) {
  top: 24vh;
  left: 32%;
}
.kira:nth-child(6) {
  top: 23vh;
  left: 66%;
}
.kira:nth-child(7) {
  top: 25vh;
  left: 70%;
  width: 17px;
  height: 17px;
}
.kira:nth-child(8) {
  top: 10vh;
  left: 60%;
  animation-duration: 5.7s
}
.kira:nth-child(9) {
  top: 12vh;
  left: 64%;
}
.kira:nth-child(10) {
  top: 44vh;
  left: 80%;
  animation-duration: 3.6s;
}
.kira:nth-child(11) {
  top: 48vh;
  left: 86%
}
.kira:nth-child(12) {
  top: 20vh;
  left: 86%
}
.kira:nth-child(13) {
  top: 68vh;
  left: 60%;
}
.kira:nth-child(14) {
  top: 72vh;
  left: 64%;
}
.kira:nth-child(15) {
  top: 61vh;
  left: 20%;
}
.kira:nth-child(16) {
  top: 68vh;
  left: 13%;
}