@charset "euc-jp";

/*==================================================================*/

.fadeIn {
  opacity: 0;
}

.allfade01.fadeIn,
.allfade02 .fadeIn,
.allfade03 .fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*==================================================================*/

.fadeUp {
  opacity: 0;
}

.allfade01.fadeUp,
.allfade02 .fadeUp,
.allfade03 .fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*==================================================================*/

.fadeDown {
  opacity: 0;
}

.allfade01.fadeDown,
.allfade02 .fadeDown,
.allfade03 .fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*==================================================================*/

.fadeLeft {
  opacity: 0;
}

.allfade01.fadeLeft,
.allfade02 .fadeLeft,
.allfade03 .fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*==================================================================*/

.fadeRight {
  opacity: 0;
}

.allfade01.fadeRight,
.allfade02 .fadeRight,
.allfade03 .fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*==================================================================*/

.blur {
  opacity: 0;
}

.allfade01.blur,
.allfade02 .blur,
.allfade03 .blur {
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

/*==================================================================*/

.delay-time1 {
  animation-delay: 400ms;
}
.delay-time2 {
  animation-delay: 600ms;
}
.delay-time3 {
  animation-delay: 800ms;
}
.delay-time4 {
  animation-delay: 1000ms;
}
.delay-time5 {
  animation-delay: 1200ms;
}
.delay-time6 {
  animation-delay: 1400ms;
}


/*==================================================================*/



.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
  margin-top: 15px;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}