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

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/animation/effect-fall/heart_blue/1.png');
  animation: fall-rotate 7s linear infinite backwards;
}
.fall-item2 {
  opacity: .9;
  background-image: url('../images/free/animation/effect-fall/heart_blue/3.png');
  animation: fall-rotate-fade 7s linear infinite backwards;
}
.kira {
  opacity: .9;
  top: 20px;
  width: 20px;
  height: 20px;
  background-image: url('../images/free/animation/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) {
  left: 8%;
  animation-duration: 10.1s
}
.fall-item2:nth-child(2) {
  left: 20%;
  animation-duration: 8.7s;
  width: 12px;
  height: 12px;
  animation-delay: 4s
}
.fall-item:nth-child(3) {
  left: 30%;
  animation-duration: 8.2s;
  width: 17px;
  height: 17px;
  animation-delay: 2s
}
.fall-item:nth-child(4) {
  left: 58%;
  animation-duration: 9s;
  width: 15px;
  height: 15px;
  animation-delay: 1s
}
.fall-item2:nth-child(5) {
  left: 69%;
  animation-duration: 8.6s
}
.fall-item:nth-child(6) {
  left: 80%;
  animation-duration: 11.8s;
  width: 20px;
  height: 20px;
  animation-delay: 3.3s
}
.fall-item2:nth-child(7) {
  left: 88%;
  animation-duration: 9s;
  width: 14px;
  height: 14px;
  animation-delay: 3.5s
}
.fall-item:nth-child(8) {
  left: 87%;
  animation-duration: 9.1s
}
.fall-item2:nth-child(9) {
  left: 5%;
  animation-duration: 7.6s;
  width: 17px;
  height: 17px
}
.fall-item:nth-child(10) {
  left: 73%;
  animation-duration: 8.7s;
  width: 20px;
  height: 20px;
  animation-delay: 1.3s
}
.fall-item2:nth-child(11) {
  left: 55%;
  animation-duration: 9.3s;
  width: 15px;
  height: 15px;
  animation-delay: 2.5s
}
.fall-item2:nth-child(12) {
  left: 28%;
  animation-duration: 10.3s
}
.fall-item:nth-child(13) {
  left: 17%;
  animation-duration: 7.4s;
  width: 25px;
  height: 25px;
  animation-delay: 4.4s
}
.fall-item:nth-child(14) {
  left: 28%;
  animation-duration: 6.7s;
  width: 15px;
  height: 15px
}
/* キラキラ
------------------------- */
.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(1) {
  top: 40vh;
  left: 8%
}
.kira:nth-child(2) {
  top: 36vh;
  left: 13%;
  animation-duration: 5.3s;
  width: 30px;
  height: 30px
}
.kira:nth-child(3) {
  top: 5vh;
  left: 16%;
  animation-duration: 3s
}
.kira:nth-child(4) {
  top: 21vh;
  left: 28%;
  animation-duration: 6s;
  width: 14px;
  height: 14px
}
.kira:nth-child(5) {
  top: 24vh;
  left: 32%;
  animation-duration: 4.7s;
  width: 10px;
  height: 10px
}
.kira:nth-child(6) {
  top: 23vh;
  left: 66%;
  animation-duration: 4.7s;
  width: 10px;
  height: 10px
}
.kira:nth-child(7) {
  top: 25vh;
  left: 70%;
  animation-duration: 3s;
  width: 17px;
  height: 17px
}
.kira:nth-child(8) {
  top: 10vh;
  left: 60%;
  animation-duration: 5.7s
}
.kira:nth-child(9) {
  top: 12vh;
  left: 64%;
  animation-duration: 4.2s;
  width: 10px;
  height: 10px
}
.kira:nth-child(10) {
  top: 44vh;
  left: 80%;
  animation-duration: 3.6s;
  width: 30px;
  height: 30px
}
.kira:nth-child(11) {
  top: 48vh;
  left: 86%
}
.kira:nth-child(12) {
  top: 20vh;
  left: 86%
}
.kira:nth-child(13) {
  top: 68vh;
  left: 60%;
  width: 10px;
  height: 10px
}
.kira:nth-child(14) {
  top: 72vh;
  left: 64%;
  animation-duration: 5.3s
}
.kira:nth-child(15) {
  top: 61vh;
  left: 20%;
  width: 10px;
  height: 10px
}
.kira:nth-child(16) {
  top: 68vh;
  left: 13%;
  animation-duration: 5.3s
}

/* ぽよよん
------------------------------------------------------- */
.poyoyon {
  animation: poyoyon 1.1s ease-in-out infinite;
}
.poyoyon2 {
  animation: poyoyon 1.1s ease-in-out infinite;
  animation-delay: .3s;
}
@keyframes poyoyon {
  0% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.95, 0.95) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 4px);
  }
  50% {
    transform: scale(0.9, 1) translate(0, -3px);
  }
  70% {
    transform: scale(1.0, 0.95) translate(0, 3px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

/* 指
------------------------------------------------------- */
@keyframes tap {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-20px, -20px);
  }
  30% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes tap2 {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-3px, -3px);
  }
  20% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(-3px, -3px);
  }
  40% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
/*--- 3つのアイテム間を左右に動く(選択)する動き ---*/
@keyframes tap3 {
  0% {
    left: 20%;
  }
  10% {
    left: 55%;
  }
  20% {
    left: 90%;
  }
  30% {
    left: 55%;
  }
  40% {
    left: 90%;
  }
  50% {
    left: 20%;
  }
  60% {
    left: 55%;
  }
  70% {
    left: 20%;
  }
  80% {
    left: 90%;
  }
  90% {
    left: 55%;
  }
  100% {
    left: 20%;
  }
}