@charset "UTF-8";

/*--------------------------------
            CSS Animation
 --------------------------------*/

/* fall_flower
==================================*/
@-webkit-keyframes fall-ver1 {
  to {
    top: 120%;
  }
}

@keyframes fall-ver1 {
  to {
    top: 120%;
  }
}

@-webkit-keyframes fall-ver2 {
  to {
    top: 150%;
  }
}

@keyframes fall-ver2 {
  to {
    top: 150%;
  }
}

@-webkit-keyframes fall-ver3 {
  to {
    top: 100%;
  }
}

@keyframes fall-ver3 {
  to {
    top: 100%;
  }
}

@-webkit-keyframes sway-ver1 {
  from {
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  to {
    -webkit-transform: translateX(200px) rotate(-45deg);
    transform: translateX(200px) rotate(-45deg);
  }
}

@keyframes sway-ver1 {
  from {
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  to {
    -webkit-transform: translateX(200px) rotate(-45deg);
    transform: translateX(200px) rotate(-45deg);
  }
}

@-webkit-keyframes sway-ver2 {
  from {
    -webkit-transform: translateX(200px) rotate(-25deg);
    transform: translateX(200px) rotate(-25deg);
  }

  to {
    -webkit-transform: translateX(0px) rotate(15deg);
    transform: translateX(0px) rotate(15deg);
  }
}

@keyframes sway-ver2 {
  from {
    -webkit-transform: translateX(200px) rotate(-25deg);
    transform: translateX(200px) rotate(-25deg);
  }

  to {
    -webkit-transform: translateX(0px) rotate(15deg);
    transform: translateX(0px) rotate(15deg);
  }
}

@-webkit-keyframes sway-ver3 {
  from {
    -webkit-transform: translateX(150px) rotate(-35deg);
    transform: translateX(150px) rotate(-35deg);
  }

  to {
    -webkit-transform: translateX(0px) rotate(15deg);
    transform: translateX(0px) rotate(15deg);
  }
}

@keyframes sway-ver3 {
  from {
    -webkit-transform: translateX(150px) rotate(-35deg);
    transform: translateX(150px) rotate(-35deg);
  }

  to {
    -webkit-transform: translateX(0px) rotate(15deg);
    transform: translateX(0px) rotate(15deg);
  }
}

.fall-animation {
  position: relative;
  width: 100%;
  height: 100vh;
  position: fixed;
  pointer-events: none;
  top: 0;
  z-index: 1;
}

.fall-animation .js-fall {
  pointer-events: none;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.fall-animation .js-fall.active .fall__elem--ptn01 {
  -webkit-animation-name: fall-ver1, sway-ver1;
  animation-name: fall-ver1, sway-ver1;
}

.fall-animation .js-fall.active .fall__elem--ptn02 {
  -webkit-animation-name: fall-ver2, sway-ver2;
  animation-name: fall-ver2, sway-ver2;
}

.fall-animation .js-fall.active .fall__elem--ptn03 {
  -webkit-animation-name: fall-ver3, sway-ver3;
  animation-name: fall-ver3, sway-ver3;
}

.fall__elem {
  position: absolute;
  pointer-events: none;
  -webkit-animation-timing-function: linear, ease-in-out;
  animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
  animation-iteration-count: infinite, infinite;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
  width: calc(60 * (var(--rate)));
}

@media (min-width: 751px) {
  .fall__elem {
    width: 6rem;
  }
}

.fall__elem:nth-child(8n+1) {
  animation-duration: 7.5s, 2s;
  animation-delay: 0.5s;
}

.fall__elem:nth-child(8n+2) {
  animation-duration: 8s, 3s;
  animation-delay: 1s;
}

.fall__elem:nth-child(8n+3) {
  animation-duration: 7s, 2.5s;
  animation-delay: 1.5s;
}

.fall__elem:nth-child(8n+4) {
  animation-duration: 8.5s, 2s;
  animation-delay: 2s;
}

.fall__elem:nth-child(8n+5) {
  animation-duration: 8s, 3s;
  animation-delay: 2.5s;
}

.fall__elem:nth-child(8n+6) {
  animation-duration: 7s, 2.5s;
  animation-delay: 3s;
}

.fall__elem:nth-child(8n+7) {
  animation-duration: 7s, 2.5s;
  animation-delay: 3.5s;
}

.fall__elem:nth-child(8n) {
  animation-duration: 7.5s, 3s;
  animation-delay: 4s;
}

.fall__elem:nth-of-type(1),
.fall__elem:nth-of-type(13) {
  top: 0%;
  left: 90%;
}

.fall__elem:nth-of-type(2) {
  top: -4%;
  left: 10%;
}

.fall__elem:nth-of-type(3) {
  top: -8%;
  left: 80%;
}

.fall__elem:nth-of-type(4),
.fall__elem:nth-of-type(15) {
  top: -12%;
  left: 30%;
}

.fall__elem:nth-of-type(5) {
  top: -16%;
  left: 20%;
}

.fall__elem:nth-of-type(6) {
  top: -20%;
  left: 48%;
}

.fall__elem:nth-of-type(7) {
  top: -24%;
  left: 31%;
}

.fall__elem:nth-of-type(8) {
  top: -28%;
  left: 52%;
}

.fall__elem:nth-of-type(9),
.fall__elem:nth-of-type(14) {
  top: -32%;
  left: 64%;
}

.fall__elem:nth-of-type(10) {
  top: -36%;
  left: 82%;
}

.fall__elem:nth-of-type(11) {
  top: -40%;
  left: 1%;
}

.fall__elem:nth-of-type(12) {
  top: -44%;
  left: 37%;
}

@media (max-width: 750px) {
  .fall-animation {
    height: 100%;
    position: absolute;
    z-index: 0;
  }

  .lp_contents_inner .fall-animation {
    display: block;
    /* display: none; */
  }

  .lp_contents_inner .fall-animation.is-show {
    display: block;
  }
}