@charset "utf-8";
/* CSS Document */
/* ボタンアニメーション */
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.animated_roop{
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}

@-webkit-keyframes pulse{
	0%{
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
		
	}
	50%{
		-webkit-transform:scale(1.1,1.1);
		transform:scale(1.1,1.1);
		
	}
	100%{
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
		
	}
	
}

@keyframes pulse{
	0%{
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
		
	}
	50%{
		-webkit-transform:scale(1.1,1.1);
		transform:scale(1.1,1.1);
		
	}
	100%{
		-webkit-transform:scale(1,1);
		transform:scale(1,1);
		
	}
	
}


@-webkit-keyframes rubberBand{
	0%{
		-webkit-transform:scale3d(1, 1, 1);
		transform:scale3d(1, 1, 1);
		
	}
	30%{
		-webkit-transform:scale3d(1.25, .75, 1);
		transform:scale3d(1.25, .75, 1);
		
	}
	40%{
		-webkit-transform:scale3d(0.75, 1.25, 1);
		transform:scale3d(0.75, 1.25, 1);
		
	}
	50%{
		-webkit-transform:scale3d(1.15, .85, 1);
		transform:scale3d(1.15, .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);
	
	}
	100%{
		-webkit-transform:scale3d(1, 1, 1);
		transform:scale3d(1, 1, 1);
		
	}
	
}

@keyframes rubberBand{
	0%{
		-webkit-transform:scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform:scale3d(1, 1, 1);
		
	}
	30%{
		-webkit-transform:scale3d(1.25, .75, 1);
		-ms-transform: scale3d(1.25, .75, 1);
		transform:scale3d(1.25, .75, 1);
		
	}
	40%{
		-webkit-transform:scale3d(0.75, 1.25, 1);
		-ms-transform: scale3d(0.75, 1.25, 1);
		transform:scale3d(0.75, 1.25, 1);
		
	}
	50%{
		-webkit-transform:scale3d(1.15, .85, 1);
		-ms-transform: scale3d(1.15, .85, 1);
		transform:scale3d(1.15, .85, 1);
		
	}
	65%{
		-webkit-transform:scale3d(.95, 1.05, 1);
		-ms-transform: scale3d(.95, 1.05, 1);
		transform:scale3d(.95, 1.05, 1);
		
	}
	75%{
		-webkit-transform:scale3d(1.05, .95, 1);
		-ms-transform: scale3d(1.05, .95, 1);
		transform:scale3d(1.05, .95, 1);
	
	}
	100%{
		-webkit-transform:scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform:scale3d(1, 1, 1);
		
	}
	
}

@-webikit-keyframes swing{
	20%{
		-webkit-transform:rotate(15deg);
		transform:rotate(15deg);
		
	}
	40%{
		-webkit-transform:rotate(-10deg);
		transform:rotate(-10deg);
		
	}
	
	60%{
		-webkit-transform:rotate(5deg);
		transform:rotate(5deg);
		
	}
	80%{
		-webkit-transform:rotate(-5deg);
		transform:rotate(-5deg);
		
	}
	100%{
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
		
	}
	
}

@keyframes swing{
	20%{
		-webkit-transform:rotate(15deg);
		-ms-transform:rotate(15deg);
		transform:rotate(15deg);
		
	}
	40%{
		-webkit-transform:rotate(-10deg);
		-ms-transform:rotate(-10deg);
		transform:rotate(-10deg);
		
	}
	
	60%{
		-webkit-transform:rotate(5deg);
		-ms-transform:rotate(5deg);
		transform:rotate(5deg);
		
	}
	80%{
		-webkit-transform:rotate(-5deg);
		-ms-transform:rotate(-5deg);
		transform:rotate(-5deg);
		
	}
	100%{
		-webkit-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		transform:rotate(0deg);
		
	}
	
}

@-webkit-keyframes flipInX {
  10% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 50deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 50deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 1
  }
  10% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 1
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}

@keyframes flipInX {
  10% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 50deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 50deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 50deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 1
  }
  20% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 1
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    -ms-transform: perspective(400px);
    transform: perspective(400px)
  }
}

.flipInX {
  -webkit-backface-visibility: visible!important;
  -ms-backface-visibility: visible!important;
  backface-visibility: visible!important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX
}

.rubberBand{
	-webkit-animation-name: rubberBand;
	animation-name: rubberBand;
  	
}

.swing{
	-webkit-transform-origin:top center;
	-ms-transform-origin:top center;
	transform-origin:top center;
	-webkit-animation-name:swing;
	animation-name:swing;
	
}

.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip
}