@charset "UTF-8";
/*--TOP------------------------------------*/

.area8 {
  opacity: 0;
}

.area8.show {
  -webkit-animation: bounce 2.0s ease;
  animation: bounce 2.0s ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*--モーションの種類----------------
----下から上にフェイドイン----------
------------------------------------*/
@keyframes bounce {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.bounce {
  opacity: 0;
}

.bounce.show {
  -webkit-animation: bounce 2.0s ease;
  animation: bounce 2.0s ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*----右から左----------*/
/*
@keyframes slideinR_L {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
*/


@-webkit-keyframes slideinR_L {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideinR_L {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideinR_L {
  opacity: 0;
}
.slideinR_L.show {
  -webkit-animation-name: slideinR_L;
  animation-name: slideinR_L;
  animation: slideinR_L ease-in-out forwards;
  animation-duration: .8s;
}
/*----左から右----------*/
@-webkit-keyframes slideinL_R {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideinL_R {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideinL_R {
  opacity: 0;
}
.slideinL_R.show {
  -webkit-animation-name: slideinL_R;
  animation-name: slideinL_R;
  animation: slideinL_R ease-in-out forwards;
  animation-duration: .8s;
}
/***** FadeIn animation*****/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  opacity: 0;
}
.fadeIn.show {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  animation: fadeIn ease-in-out forwards;
  animation-duration: .8s;
}
/*******/
@-webkit-keyframes fadeIn2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn2 {
  opacity: 0;
}
.fadeIn2.show {
  -webkit-animation-name: fadeIn2;
  animation-name: fadeIn2;
  animation: fadeIn2 ease-in-out forwards;
  animation-duration: .8s;
  animation-delay: .3s;
}

/*******/
@-webkit-keyframes fadeIn3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn3 {
  opacity: 0;
}
.fadeIn3.show {
  -webkit-animation-name: fadeIn3;
  animation-name: fadeIn3;
  animation: fadeIn3 ease-in-out forwards;
  animation-duration: .8s;
  animation-delay: .8s;
}

/******FadeOut animation******/
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}