@charset "UTF-8";
/*----------------------------------------
	u-device-sp
----------------------------------------*/
.u-device-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .u-device-sp {
    display: block;
  }
}
/*----------------------------------------
	u-device-tablet
----------------------------------------*/
.u-device-tablet {
  display: none;
}
@media screen and (max-width: 1024px) {
  .u-device-tablet {
    display: block;
  }
}
/*----------------------------------------
	u-device-pc
----------------------------------------*/
@media screen and (max-width: 767px) {
  .u-device-pc {
    display: none;
  }
}
/*-------------------------------------------------------------
c-yurayura
------------------------------------------------------------*/
.c-yurayura {
  transform-origin: center bottom;
  animation: yurayura 3s linear infinite;
}
@keyframes yurayura {
  0%,
  100% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
}
/*-------------------------------------------------------------
lower title
------------------------------------------------------------*/
.lower-title {
  opacity: 0;
  filter: blur(40px);
  will-change: transform, opacity, filter;
}
.lower-title.is-active {
  animation: laserY 0.85s cubic-bezier(.16, .84, .25, 1.2) forwards;
}
@keyframes laserY {
  0% {
    opacity: 0;
    transform:
      translateY(80px) scale(.7);
    filter:
      blur(40px);
    letter-spacing: .4em;
  }
  55% {
    opacity: 1;
    transform:
      translateY(-10px) scale(1.08);
    filter:
      blur(0);
    letter-spacing: .15em;
  }
  80% {
    transform:
      translateY(6px) scale(.98);
  }
  100% {
    opacity: 1;
    transform:
      translateY(0) scale(1);
    filter: blur(0);
    letter-spacing: .15em;
  }
}
/*-------------------------------------------------------------
impact title
------------------------------------------------------------*/
.impact-scroll {
  opacity: 0;
  transform-origin: center bottom;
  filter: blur(20px);
  transform: scale(.15) translateY(50px);
}
.impact-scroll.is-active {
  animation: itemRush .95s cubic-bezier(.16, .84, .25, 1.2) forwards;
}
@keyframes itemRush {
  0% {
    opacity: 0;
    transform:
      scale(.15) translateY(50px);
    filter: blur(30px);
  }
  60% {
    opacity: 1;
    transform:
      scale(1) translateY(0);
    filter: blur(0);
  }
  78% {
    transform:
      scale(.99) translateY(0);
  }
  100% {
    opacity: 1;
    transform:
      scale(1) translateY(0);
    filter: blur(0);
  }
}