/* Animation */
/*▼横・縦からのフェードイン▼*/
.ani_yp {
	opacity: 0;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
	transition: .5s;
	display:inline-block;
}

.active_yp {
	opacity: 1.0;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	transition: .5s;
}

.ani_ym {
	opacity: 0;
	transform: translateY(-100px);
	-webkit-transform: translateY(-100px);
	transition: 2.0s;
	display:inline-block;
}

.active_ym {
	opacity: 1.0;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	transition: 2.0s;
}


.ani_xl{
	opacity: 0;
	transform: translateX(-100px);
	-webkit-transform: translateX(-100px);
	transition: .8s;
	display:inline-block;
}

.active_xl {
	opacity: 1.0;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	transition: 2.0s;
}


.ani_xr{
	opacity: 0;
	transform: translateX(100px);
	-webkit-transform: translateX(100px);
	transition: .8s;
	display:inline-block;
}

.active_xr {
	opacity: 1.0;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	transition: 2.0s;
}


/*▲横・縦からのフェードイン▲*/


/*animate.css*/
/*Base*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
opacity:0;
display:inline-block;
}


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


/*pulse*/
@-webkit-keyframes active_pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes active_pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.active_pulse {
  -webkit-animation-name: active_pulse;
  animation-name: active_pulse;
	opacity:1.0;
	transition: 2.0s;
}

/*rubberBand*/
@-webkit-keyframes active_rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes active_rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.active_rubberBand {
  -webkit-animation-name: active_rubberBand;
  animation-name: active_rubberBand;
  opacity:1.0;
  transition: 2.0s;
}

@-webkit-keyframes active_rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

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

@keyframes active_rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

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

.active_rollIn {
  -webkit-animation-name: active_rollIn;
  animation-name: active_rollIn;
  opacity:1.0;
  transition: 2.0s;
}


@-webkit-keyframes active_zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes active_zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.active_zoomIn {
  -webkit-animation-name: active_zoomIn;
  animation-name: active_zoomIn;
  opacity:1.0;
  transition: 2.0s;
}

.buruburu {
    display: inline-block;
    animation: hurueru .3s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.buruburu {
    display: inline-block;
    animation: hurueru .3s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}


.purupuru {
	animation-name: purupuru;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;

}

@keyframes purupuru {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  5%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
  11%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
  14%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
  16%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
  18%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}


.fuwafuwa {
	-webkit-animation-name:fuwafuwa;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;

	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}