/*:::::::::::::::
index
~~~~~~~~~~~~~~~
  NO.1 floating-trouble
~~~~~~~~~~~~~~~
:::::::::::::::*/
/*:::::::::::::::
setting animations class
:::::::::::::::*/
/* ~~ floating-troubles ~~ */
.trouble-wrapper .trouble {
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
.trouble-wrapper .trouble-1 {
  animation-name: floating-trouble-1;
}
.trouble-wrapper .trouble-2 {
  animation-name: floating-trouble-2;
  animation-delay: 1s;
}
.trouble-wrapper .trouble-3 {
  animation-name: floating-trouble-3;
  animation-delay: 1.5s;
}
.trouble-wrapper .trouble-4 {
  animation-name: floating-trouble-4;
  animation-delay: 0.8s;
}
.trouble-wrapper .trouble-5 {
  animation-name: floating-trouble-5;
  animation-delay: 1.2s;
}
.trouble-wrapper .trouble-6 {
  animation-name: floating-trouble-6;
  animation-delay: 1.8s;
}
@media screen and (max-width: 480px) {
  .trouble-wrapper .trouble-1 {
    animation-name: floating-trouble-1-sp;
  }
  .trouble-wrapper .trouble-2 {
    animation-name: floating-trouble-2-sp;
  }
  .trouble-wrapper .trouble-3 {
    animation-name: floating-trouble-3-sp;
  }
  .trouble-wrapper .trouble-4 {
    animation-name: floating-trouble-4-sp;
  }
  .trouble-wrapper .trouble-5 {
    animation-name: floating-trouble-5-sp;
  }
  .trouble-wrapper .trouble-6 {
    animation-name: floating-trouble-6-sp;
  }
}
/*:::::::::::::::
setting animations moving
:::::::::::::::*/
/* ~~ floating-troubles ~~ */
@keyframes floating-trouble-1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes floating-trouble-2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes floating-trouble-3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes floating-trouble-4 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes floating-trouble-5 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes floating-trouble-6 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
/* ~~ floating-troubles SP ~~ */
@keyframes floating-trouble-1-sp {
  0% {
    left: 1%;
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    left: 1%;
    transform: translateY(0);
  }
}
@keyframes floating-trouble-2-sp {
  0% {
    left: 6%;
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    left: 6%;
    transform: translateY(0);
  }
}
@keyframes floating-trouble-3-sp {
  0% {
    left: 4%;
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    left: 4%;
    transform: translateY(0);
  }
}
@keyframes floating-trouble-4-sp {
  0% {
    left: 5%;
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    left: 5%;
    transform: translateY(0);
  }
}
@keyframes floating-trouble-5-sp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes floating-trouble-6-sp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
  100% {
    transform: translateY(0);
  }
}