@charset "utf-8";

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeInTrigger {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.delay-time02 {
  animation-delay: 0.2s;
}

.delay-time03 {
  animation-delay: 0.3s;
}

.delay-time04 {
  animation-delay: 0.4s;
}

.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
  }

  to {
    filter: blur(0);
    transform: scale(1);
  }
}

.ema1Trigger {
    opacity: 0;
}
.ema1 {
    animation-name: bounce-in-fwd;
    animation-duration: 1s;
    animation-delay: 2.4s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
@keyframes ema1Anime {
  0%{
    opacity: 0;
    transform: translate(100%,0%);
  }
  100% {
    opacity: 1;
    transform: translate(0%,0%);
  }
}

.ema1After {
    opacity: 1;
}
.ema2 {
    animation-name: slide-bck-left;
    animation-duration: 1s;
    animation-delay: 2.4s;
    animation-fill-mode: forwards;
    animation-direction: alternate;
}
@keyframes ema2Anime {
  0%{
    opacity: 0;
    transform: translate(-100%,-100%);
  }
  100% {
    opacity: 1;
    transform: translate(0%,0%);
  }
}

.wait-time01 {
    animation-duration: 2s;
}

.wait-time02 {
    animation-duration: 4s;
}

.wait-time03 {
    animation-duration: 6s;
}
.wait-time04 {
    animation-duration: 8s;
}

.hint {
  animation: hint 3s infinite ease-in-out .8s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
}

@keyframes hint {
  0% {
    transform: translate(0, 0) rotate(-10deg);
  }

  50% {
    transform: translate(0, -7px) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(10deg);
  }
}

.poyonTrigger {
  opacity: 0;
}

.poyon {
  opacity: 0;
  animation: poyon 1.8s linear 1 forwards;
  -webkit-animation: poyon 1.8s linear 1 forwards;
  -moz-animation: poyon 1.8s linear 1 forwards;
}

@keyframes poyon {
  0%   { opacity:0; transform: scale(0.8, 1.4) translate(0%, -100%); }
  10%  { opacity:1; transform: scale(0.8, 1.4) translate(0%, -15%); }
  20%  { opacity:1; transform: scale(1.4, 0.6) translate(0%, 30%); }
  30%  { opacity:1; transform: scale(0.9, 1.1) translate(0%, -10%); }
  40%  { opacity:1; transform: scale(0.95, 1.2) translate(0%, -30%); }
  50%  { opacity:1; transform: scale(0.95, 1.2) translate(0%, -10%); }
  60%  { opacity:1; transform: scale(1.1, 0.9) translate(0%, 5%); }
  70%  { opacity:1; transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { opacity:1; transform: scale(1.0, 1.0) translate(0%, 0%); }
}

/*回転して表示*/
.rotate-in-2-tl-cw {
    -webkit-animation: rotate-in-2-tl-cw 0.7s linear both;
    animation: rotate-in-2-tl-cw 0.7s linear both;
}
@-webkit-keyframes rotate-in-2-tl-cw {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
}

@keyframes rotate-in-2-tl-cw {
    0% {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        opacity: 1;
    }
}
/*表示してぽよん*/
.bounce-in-fwd {
    -webkit-animation: bounce-in-fwd 1.1s none;
    animation: bounce-in-fwd 1.1s none;
}
@-webkit-keyframes bounce-in-fwd {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: scale(0.84);
        transform: scale(0.84);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    89% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-fwd {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: scale(0.84);
        transform: scale(0.84);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    89% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

/*花咲くように表示*/
.slide-in-fwd-center {
    -webkit-animation: slide-in-fwd-center 1s linear 1s alternate both;
    animation: slide-in-fwd-center 1s linear 1s alternate both;
}
@-webkit-keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

.slide-bck-left {
    -webkit-animation: slide-bck-left 0.45s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: slide-bck-left 0.45s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
@-webkit-keyframes slide-bck-left {
    0% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
    }

    100% {
        -webkit-transform: translateZ(-400px) translateX(-200px);
        transform: translateZ(-400px) translateX(-200px);
    }
}

@keyframes slide-bck-left {
    0% {
        -webkit-transform: translateZ(0) translateX(0);
        transform: translateZ(0) translateX(0);
    }

    100% {
        -webkit-transform: translateZ(-400px) translateX(-200px);
        transform: translateZ(-400px) translateX(-200px);
    }
}

.blink {
    animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blink_1 {
    animation: blinking 1s ease-in-out infinite alternate;
    animation-delay:2s;
}

@keyframes blinking {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}