@charset "UTF-8";

/*============================
■ effect style
============================*/

.inviewfadeIn{
	opacity: 0;
	transition: 1.0s;
}

.inviewfadeInSlow{
	opacity: 0;
	transition: 2.0s;
}

.fadeIn{
	opacity: 1.0;
}

/*----- フェードインしながら上へスライド -----*/
.inviewfadeInUp{
	opacity: 0;
	transform: translate(0, -50px);
	-webkit-transform: translate(0, -50px);
	transition: 1.0s;
}

.fadeInUp{
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}


/*----- フェードインしながら下へスライド -----*/
.inviewfadeInDown{
	opacity: 0;
	transform: translate(0, 50px);
	-webkit-transform: translate(0, 50px);
	transition: 1.0s;
}

.fadeInDown{
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}


/*----- フェードインしながら左へスライド -----*/
.inviewfadeInLeft{
	opacity: 0;
	transform: translate(50px, 0);
	-webkit-transform: translate(50px, 0);
	transition: 1.0s;
}

.fadeInLeft{
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}


/*----- フェードインしながら右へスライド -----*/
.inviewfadeInRight{
	opacity: 0;
	transform: translate(-50px, 0);
	-webkit-transform: translate(-50px, 0);
	transition: 1.0s;
}

.fadeInRight{
	opacity: 1.0;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
}