@charset "UTF-8";

/*
アニメーションサンプル一覧
https://naruhodo.repop.jp/animate-css-2/

fadeIn  flip  flipInY　flipOutY  zoomIn  zoomInUp  slideInUp slideInLeft　slideInRight rollin　fadeInLeft  fadeInRight  fadeInUp  d3rollがあるけど
使うのは
bounce　zoomIn fadeIn　fadeInUp d3roll fadeInLeft fadeInRight
*/


.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}


.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}



/*カスタムした*/
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-3px,0);
            transform: translate3d(0,-3px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-3px,0);
            transform: translate3d(0,-3px,0);
  }
}



.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}




@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}




@keyframes fadeInLeft {
  from {
    opacity: 0;
    /*transform: translate3d(-100%, 0, 0);*/
		transform: translate3d(-200px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}


@keyframes fadeInRight {
  from {
    opacity: 0;
    /*transform: translate3d(100%, 0, 0);*/
		transform: translate3d(200px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}





@keyframes fadeInUp {
	from {opacity: 0;
    /*transform: translate3d(0, 100%, 0);-----------------------------------------------------------------------------------*/
		transform: translate3d(0, 40px, 0);}
  to {opacity: 1;transform: none;}
}
.fadeInUp {animation-name: fadeInUp;}



/*3D回転-------------------------------------------------------------------------------------------------------------------*/
@keyframes d3roll {
  from {transform:rotate3d(0, 1, 0, -360deg);}

  50% {transform:rotate3d(0, 1, 0, 0deg);}
}
.d3roll {animation-name: d3roll;}




@keyframes zoomIn {	/*-------------------------------------------------------------------------------------------*/
	from {opacity: 0;
    transform: scale(0, 0) rotateY(360deg);
		-webkit-transform: scale(0, 0) rotateY(360deg);}
  to {opacity: 1;
		transform: scale(1, 1) rotateY(360deg);
		-webkit-transform: scale(1, 1) rotateY(360deg);}
}
.zoomIn {animation-name: zoomIn;}

@keyframes zoomIn50 {	/*-------------------------------------------------------------------------------------------*/
	from {opacity: 0;
    transform: scale(0, 0) rotateY(360deg);
		-webkit-transform: scale(0, 0) rotateY(360deg);}
  50% {opacity: 1;
		transform: scale(1, 1) rotateY(360deg);
		-webkit-transform: scale(1, 1) rotateY(360deg);}
}
.zoomIn50 {animation-name: zoomIn50;}