/*--------------------------------------------
	スクロールしてコンテンツが現れたときにアニメーションさせる
--------------------------------------------*/



/* 1つ目：縮小・拡大 */
.list-mv01{
	list-style-type: none;
	overflow: hidden;
	transition: 1.8s;
}


.list-mv01{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}


/* 2つ目：opacity*/
.list-mv02{
	list-style-type: none;
	overflow: hidden;
	transition: 2.8s;
}


.list-mv02{
	opacity: 0;
}
.mv02{
	opacity: 5.0;
}



/* 3つ目：左移動＋透明度 */
.list-mv03{
	list-style-type: none;
	overflow: hidden;
	transition: 4.0s;
}

.list-mv03{
	opacity: 0;
	transform: translate(100px,0); 
	-webkit-transform: translate(100px,0); 
}
.mv03{
	opacity: 4.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/* 4つ目：右移動＋透明度 */
.list-mv04{
	list-style-type: none;
	overflow: hidden;
	transition: 5.0s;
}

.list-mv04{
	opacity: 0;
	transform: translate(-100px,0); 
	-webkit-transform: translate(-100px,0); 
}
.mv04{
	opacity: 4.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


/* ６つ目：縮小・拡大＆3D回転 */
.list-mv06{
	list-style-type: none;
	overflow: hidden;
	transition: 3.5s;
}
.list-mv06{
	transform: scale(0, 0) rotateY(180deg);
	-webkit-transform: scale(0, 0) rotateY(180deg);
}
.mv06{
	transform: scale(1, 1) rotateY(360deg);
	-webkit-transform: scale(1, 1) rotateY(360deg);
}



/* ７つ目：上移動＋透明度 */
.list-mv07{
	list-style-type: none;
	overflow: hidden;
	transition: 1.8s;
}

.list-mv07{
	opacity: 0;
	transform: translate(0,100px); 
	-webkit-transform: translate(0,100px); 
}
.mv07{
	opacity: 3.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}