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

animation

////////////////////////////////////////////////////////*/
/* common
------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUp2 {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeLeft {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeRight {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@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 moveLeftRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(30px);
  }
}
@keyframes moveRightLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-30px);
  }
}
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  100% {
    opacity: .85;
    transform: scale(1.5, 1.5);
  }
}
@keyframes zoom2 {
  0% {
    opacity: 0;
    transform: scale(1, 1);
  }
  10% {
    opacity: 1;
    transform: scale(1.1, 1.1);
  }
  40% {
    transform: scale(1.3, 1.3);
  }
  80% {
    opacity: .4;
    transform: scale(1.1, 1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1.3, 1.3);
  }
}
@keyframes zoom3 {
  0% {
    opacity: 0;
    transform: scale(1, 1);
  }
  8% {
    opacity: 1;
  }
  40% {
    transform: scale(1.4, 1.4);
  }
  80% {
    transform: scale(1.05, 1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1.3, 1.3);
  }
}
@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: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(12deg);
  }
  60% {
    transform: rotateZ(-12deg);
  }
  100% {
    transform: rotateZ(0deg);
  }
}
@keyframes buruburu2 {
  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)
  }
}
@keyframes uneune {
  0% {
    opacity: 0;
    transform: scale(.2, .2);
  }
  10% {
    opacity: .3;
    transform: scale(.7, .3);
  }
  20% {
    opacity: .5;
    transform: scale(1, 1);
  }
  30% {
    opacity: .7;
    transform: scale(.85, .85);
  }
  40% {
    opacity: 1;
    transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    transform: scale(.9, .9);
  }
  60% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 1;
    transform: scale(1, 1);
  }
}
@keyframes glitch_effect {
  0% {
    opacity: 0;
    transform: scale(.2, .2);
  }
  33% {
    transform: scale(1, 1);
    filter: invert(0%);
  }
  33.3% {
    opacity: 1;
    transform: skewY(20deg) translate(8px, 6px);
    filter: invert(100%);
  }
  33.6% {
    opacity: 0;
    transform: skewY(-10deg) translate(-10px, -10px);
  }
  33.9% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
  41% {
    opacity: 1;
  }
  41.4% {
    opacity: 0;
  }
  41.8% {
    opacity: 1;
  }
  42.2% {
    opacity: 0;
  }
  42.6% {
    opacity: 1;
  }
  66% {
    transform: none;
    filter: invert(0%);
  }
  66.3% {
    opacity: 1;
    transform: skewX(5deg) translate(-4px, 10px);
    filter: invert(100%);
  }
  66.6% {
    opacity: 0;
    transform: skewX(-7deg) translate(4px, -6px);
  }
  66.9% {
    opacity: 1;
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewY(10deg) translate(10px, -6px);
  }
  77.6% {
    transform: skewY(-22deg) translate(-5px, 8px);
    filter: invert(100%);
  }
  77.9% {
    transform: none;
    filter: invert(0%);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: invert(0%);
  }
}
@keyframes glitch1 {
  0% {
    filter: invert(0%);
  }
  33.3% {
    opacity: 1;
    filter: invert(100%);
  }
  33.6% {
    opacity: 0;
  }
  33.9% {
    opacity: 1;
    filter: invert(0%);
  }
  41% {
    opacity: 1;
  }
  41.4% {
    opacity: 0;
  }
  41.8% {
    opacity: 1;
  }
  42.2% {
    opacity: 0;
  }
  42.6% {
    opacity: 1;
  }
  66% {
    filter: invert(0%);
  }
  66.3% {
    opacity: 1;
    filter: invert(100%);
  }
  66.6% {
    opacity: 0;
  }
  66.9% {
    opacity: 1;
  }
  77.3% {}
  77.6% {
    filter: invert(100%);
  }
  77.9% {
    filter: invert(0%);
  }
  100% {
    opacity: 1;
    filter: invert(0%);
  }
}
@keyframes bom {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  15% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05, 1.05);
  }
}
/*----- 指 -----*/
@keyframes tap {
  0%, 56%, 100% { opacity: 0; }
  10%, 42% { opacity: 1; }

  /* タップの動き */
  2%, 6%, 10%, 14%, 18%, 22%, 26%, 30%, 34%, 38%, 42%, 46%, 50%, 54% {
    transform: translate(4px,4px);
  }
  0%, 4%, 8%, 12%, 16%, 20%, 24%, 28%, 32%, 36%, 40%, 44%, 48%, 52% {
    transform: translate(0,0);
  }
}

[class*='fade_'] {
  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'] {
  transform: translateY(30px);
}
[class*='fade_up'].active {
  animation: fadeUp .8s forwards;
}
[class*='fade_up2'].active {
  animation: fadeUp2 2.5s forwards;
}
[class*='fade_down'] {
  transform: translateY(-70px);
}
[class*='fade_down'].active {
  animation: fadeDown 2s ease forwards;
}
[class*='fade_left'] {
  transform: translateX(30px);
}
[class*='fade_left'].active {
  animation: fadeLeft 1s forwards;
}
[class*='fade_right'] {
  transform: translateX(-30px);
}
[class*='fade_right'].active {
  animation: fadeRight 1s forwards;
}
[class*='fade_stamp'] {
  transform: scale(2.3, 2.3);
}
[class*='fade_stamp'].active {
  animation: fadeStamp .5s 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*='fade_balloon'] {
  transform: scale(2.3, 2.3);
}
[class*='fade_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*="shiny"] {
  position: relative;
}
[class*="shiny"]:after {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 60px;
  height: 90%;
  transform: rotate(-10deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .4) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
[class*='flash'].active {
  animation: flash 1s ease-out forwards;
}
.moveLeftRight {
  animation: moveLeftRight 1s linear forwards;
}
.moveRightLeft {
  animation: moveRightLeft 1s linear forwards;
}
.zoom {
  animation: zoom .8s ease-out forwards;
}
.zoom2 {
  animation: zoom2 5s linear forwards;
}
.zoom3 {
  animation: zoom3 3.5s linear forwards;
}
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
.poyopoyo:nth-of-type(2) {
  animation-delay: .1s;
}
.glitch {
  animation: glitch_effect 1s ease-out infinite;
}

/*--- spブルブル ---*/
.buruburu_mes.active {
  animation: buruburu2 .1s 50;
}