/******************
h1 animation
*******************/

/* 【設定方法】
1.アニメーションさせたい親要素に「.target」を指定してください。
2.アニメーションさせたい要素に「fade-in」や「delay」等の設定をしてください。

【サンプル】
<div class="target">
	<p class="main_visual fadein_normal">
		<img src="https://placehold.jp/1040x520.png" alt="">
	</p>
</div> */

/******************
h2 初期設定
*******************/
.fadein_normal,
.fadein_top,
.fadein_right,
.fadein_bottom,
.fadein_left,
.fadein_top_left,
.fadein_top_right,
.fadein_bottom_left,
.fadein_bottom_left {
	opacity: 0;
}
/*********初期設定*********/

/******************
h2 delayの設定
*******************/
.target .delay_2 {
	-webkit-animation-delay: .2s;
	animation-delay: .2s;
}
.target .delay_4 {
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
}
.target .delay_6 {
	-webkit-animation-delay: .6s;
	animation-delay: .6s;
}
.target .delay_8 {
	-webkit-animation-delay: .8s;
	animation-delay: .8s;
}
.target .delay_10 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.target .delay_12 {
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
.target .delay_14 {
	-webkit-animation-delay: 1.4s;
	animation-delay: 1.4s;
}
.target .delay_16 {
	-webkit-animation-delay: 1.6s;
	animation-delay: 1.6s;
}
.target .delay_18 {
	-webkit-animation-delay: 1.8s;
	animation-delay: 1.8s;
}
.target .delay_20 {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
.target .delay_22 {
	-webkit-animation-delay: 2.2s;
	animation-delay: 2.2s;
}
.target .delay_24 {
	-webkit-animation-delay: 2.4s;
	animation-delay: 2.4s;
}
.target .delay_26 {
	-webkit-animation-delay: 2.6s;
	animation-delay: 2.6s;
}
.target .delay_28 {
	-webkit-animation-delay: 2.8s;
	animation-delay: 2.8s;
}
.target .delay_30 {
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}
/*********delayの設定*********/

/******************
h2 fadeinの設定
*******************/
/******************
h3 fadein_normal
*******************/
.isAnimation .fadein_normal {
	-webkit-animation-name: fadeinNomal;
	animation-name: fadeinNomal;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinNomal {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeinNomal {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/*********fadein_normal*********/

/******************
h3 fadein_top
*******************/
.isAnimation .fadein_top {
	-webkit-animation-name: fadeinTop;
	animation-name: fadeinTop;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinTop {
	from {
		opacity: 0;
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes fadeinTop {
	from {
		opacity: 0;
		-webkit-transform: translateY(-100px);
		transform: translateY(-100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
/*********fadein_top*********/

/******************
h3 fadein_right
*******************/
.isAnimation .fadein_right {
	-webkit-animation-name: fadeinRight;
	animation-name: fadeinRight;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinRight {
	from {
		opacity: 0;
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes fadeinRight {
	from {
		opacity: 0;
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
/*********fadein_right*********/

/******************
h3 fadein_bottom
*******************/
.isAnimation .fadein_bottom {
	-webkit-animation-name: fadeinBottom;
	animation-name: fadeinBottom;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinBottom {
	from {
		opacity: 0;
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
@keyframes fadeinBottom {
	from {
		opacity: 0;
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}
/*********fadein_bottom*********/

/******************
h3 fadein_left
*******************/
.isAnimation .fadein_left {
	-webkit-animation-name: fadeinLeft;
	animation-name: fadeinLeft;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
@keyframes fadeinLeft {
	from {
		opacity: 0;
		-webkit-transform: translateX(-100px);
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}
/*********fadein_left*********/

/******************
h3 fadein_top_left
*******************/
.isAnimation .fadein_top_left {
	-webkit-animation-name: fadeinTopLeft;
	animation-name: fadeinTopLeft;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinTopLeft {
	from {
		opacity: 0;
		-webkit-transform: translate(-100px, -100px);
		transform: translate(-100px, -100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
@keyframes fadeinTopLeft {
	from {
		opacity: 0;
		-webkit-transform: translate(-100px, -100px);
		transform: translate(-100px, -100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
/*********fadein_top_left*********/

/******************
h3 fadein_top_right
*******************/
.isAnimation .fadein_top_right {
	-webkit-animation-name: fadeinTopRight;
	animation-name: fadeinTopRight;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinTopRight {
	from {
		opacity: 0;
		-webkit-transform: translate(100px, -100px);
		transform: translate(100px, -100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
@keyframes fadeinTopRight {
	from {
		opacity: 0;
		-webkit-transform: translate(100px, -100px);
		transform: translate(100px, -100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
/*********fadein_top_right*********/

/******************
h3 fadein_bottom_left
*******************/
.isAnimation .fadein_bottom_left {
	-webkit-animation-name: fadeinBottomLeft;
	animation-name: fadeinBottomLeft;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinBottomLeft {
	from {
		opacity: 0;
		-webkit-transform: translate(-100px, 100px);
		transform: translate(-100px, 100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
@keyframes fadeinBottomLeft {
	from {
		opacity: 0;
		-webkit-transform: translate(-100px, 100px);
		transform: translate(-100px, 100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
/*********fadein_bottom_left*********/

/******************
h3 fadein_bottom_right
*******************/
.isAnimation .fadein_bottom_right {
	-webkit-animation-name: fadeinBottomRight;
	animation-name: fadeinBottomRight;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes fadeinBottomRight {
	from {
		opacity: 0;
		-webkit-transform: translate(100px, 100px);
		transform: translate(100px, 100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
@keyframes fadeinBottomRight {
	from {
		opacity: 0;
		-webkit-transform: translate(100px, 100px);
		transform: translate(100px, 100px);
	}
	to {
		opacity: 1;
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}
/*********fadein_bottom_right*********/
/*********fadeinの設定*********/
/*********animation*********/