@charset "utf-8";
/*////////////////////////////////////////////////////////

animation

////////////////////////////////////////////////////////*/
/* common
------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(30px) skewY(4deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewY(4deg);
  }
}
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-30px) skewX(8deg) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(8deg) rotate(-3deg);
  }
}
@keyframes fadeStamp {
  0% {
    opacity: 0;
    transform: scale(2.3, 2.3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeStamp2 {
  0% {
    opacity: 0;
    transform: scale(.5, .5);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeDecrease {
  0% {
    opacity: 0;
    transform: scale(1, 1) translateY(20px);
  }
  40% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  52% {
    opacity: 1;
    transform: scale(1, 1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(0.5, 0.5) translateY(0);
  }
}
@keyframes fadeFuki {
  0% {
    opacity: 0;
    transform: scale(.3, .3);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes fadeFit {
  0% {
    max-height: 300px;
  }
  100% {
    max-height: 140px;
  }
}
@keyframes balloon {
  0% {
    opacity: 0;
    transform: scale(2.3, 2.3);
  }
  50% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(1.08, 1.08);
  }
  70% {
    transform: scale(1, 1);
  }
  80% {
    transform: scale(1.03, 1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes leftLight {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes slideLeftRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideRightLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@keyframes flash {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(11);
  }
  60% {
    opacity: 1;
    transform: scale(11);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
@keyframes buruburu {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg)
  }
  25% {
    transform: translate(2px, 1px) rotateZ(1deg)
  }
  50% {
    transform: translate(0px, 1px) rotateZ(0deg)
  }
  75% {
    transform: translate(1px, 0px) rotateZ(-1deg)
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg)
  }
}
[class*='fade_'], [class*='balloon'], [class*='fade_stamp'] {
  opacity: 0;
}
[class*='fade_in'].active {
  animation: fadeIn 1.7s forwards;
}
[class*='fade_out'] {
  opacity: 1;
}
[class*='fade_out'].active {
  animation: fadeOut 1.7s forwards;
}
[class*='fade_up'].active {
  animation: fadeUp 1s forwards;
}
[class*='fade_down'].active {
  animation: fadeDown 1s forwards;
}
[class*='fade_left'].active {
  animation: fadeLeft 1s forwards;
}
[class*='fade_right'].active {
  animation: fadeRight 1s forwards;
}
[class*='fade_stamp'].active {
  animation: fadeStamp .3s forwards;
}
[class*='fade_stamp2'].active {
  animation: fadeStamp2 .3s forwards;
}
[class*='fade_decrease'].active {
  animation: fadeDecrease 1.75s forwards;
}
[class*='fade_fuki'].active {
  animation: fadeFuki .7s forwards;
}
[class*='fade_fit'].active {
  animation: fadeFit .9s forwards;
}
[class*='balloon'].active {
  animation: balloon .7s forwards;
}
[class*='slide_RightLeft'] {
  opacity: 0;
  animation: slideRightLeft 1.5s forwards;
}
[class*='slide_LeftRight'] {
  opacity: 0;
  animation: slideLeftRight 1.5s forwards;
}
[class^="btn_shiny"] {
  overflow: hidden;
}
[class^="btn_shiny"]:after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  transform: scale(2) rotate(20deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
[class*='flash'].active {
  animation: flash 3s ease-out forwards;
}
/* result
------------------------- */
/* sp */
.buruburu.active {
  animation: buruburu .15s infinite;
}
@keyframes leftLight {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0, 0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1, 1);
  }
}
/* lockon */
@keyframes lockon {
  0% {
    transform: translate(0, -50%);
  }
  25% {
    transform: translate(-25%, -65%);
  }
  50% {
    transform: translate(25%, -55%);
  }
  75% {
    transform: translate(0, -25%);
  }
  100% {
    transform: translate(0, -50%);
  }
}
.lockon.active {
  animation: lockon 2s ease-out forwards;
}