@charset "UTF-8";



.vision-section{

}
.vision-outline{
	background:url(../img/vision/bg_vision2.jpg) center center;
	/* background-size: cover; */
	/*background-color:rgba(255,255,255,0.6);
	background-blend-mode:lighten;*/

	width: 100%;
	height: 100%;
	background-position: center center;

	/*画像のサイズを指定する*/
	-webkit-background-size: 1600px 730px;
	background-size: 1600px 730px;

	/* animation:アニメーション名 , アニメーションの時間 , アニメーションのタイミング , アニメーションの繰り返し */
	-webkit-animation: bgscroll 50s linear infinite;
	animation: bgscroll 50s linear infinite;

}

/*アニメーションの指定
	background-position: x軸 , y軸;
	今回は縦にスクロールする
	背景画像のサイズ分移動させる
*/
@-webkit-keyframes bgscroll {
	0% {background-position: 0 0;}
	100% {background-position: 0 -730px;}
}

@keyframes bgscroll {
	0% { background-position: 0 0; }
	100% { background-position: 0 -730px; }
}

.vision-copy-box{
	height:700px;
	font-family: "黎ミン B";
	font-size:90px;
	display: flex;
	align-items:center;
	justify-content: center;
	text-align:center;
}

.vision-copy-box .copy-text{
	color: #f93b34;
	background: linear-gradient(to bottom right, #e4007c 0%,#e4007c 50%, #202ef4 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vision-copy-box .copy-text .sp-br{
		display: none;
}


.vision-text-box{
	font-size:20px;
	color:#333;
	background:#fff;
}
.vision-text-box-inner{
	padding:100px 0;
}

.vision-text-title{
	text-align:center;
	font-size:30px;
	margin-bottom:60px;
}
.vision-text-title .sp-br{
	display:none;
}
.vision-text-box-inner p{
	line-height:1.8;
	text-align:center;
	margin-bottom:2em;
}


.vision-text-box-inner p .sp-br{
	display: none;
}
.vision-message-box-outline{
	padding:150px 0 30px 0;
}
.vision-message-box{
	border-radius:10px;
	width:800px;
	margin:0 auto;
	font-size:18px;
	background-color:rgba(255,255,255,0.8);
	padding:50px;
	text-align:left;
	line-height:1.8;
	box-shadow: 1px 3px 15px #ddd;
}
.vision-message-title{
	text-align:center;
	font-size:30px;
	margin-bottom:30px;
}
.vision-message-text{
	text-align:left;
	font-size:20px;
}
.vision-message-text p{
	text-align: center;
}

.vision-message-text .key-text{
	text-align:center;
	font-size:24px;
}
.vision-message-text .key-text .sp-br{
	display: none;
}
.vision-message-text .sp-br{
	display: none;
}



.project-block-outline{
	padding:50px 0 150px 0;
}
.project-block-outline .project-box{
	border-radius:10px;
	width:800px;
	margin:0 auto;
	font-size:18px;
	background-color:rgba(255,255,255,0.8);
	padding:50px;
	text-align:left;
	line-height:1.8;
	box-shadow: 1px 3px 15px #ddd;
}
.project-block-outline .project-box > .title{
	text-align:center;
	font-size:30px;
	margin-bottom:30px;
}
.project-block-outline .project-box .project-btn-wrap{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
.project-block-outline .project-box .project-btn-wrap .project-btn{
	width:32%;
	text-align: center;
}
.project-block-outline .project-box .project-btn-wrap .project-btn .thumb-img img{
	width:100%;
	border-radius:5px;
}
.project-block-outline .project-box .project-btn-wrap .project-btn h3{
	font-size:18px;
	line-height:1.4;
}
.project-block-outline .project-box .project-btn-wrap .project-btn a{
	box-sizing: border-box;
	display:block;
	width:100%;
	font-size:16px;
	text-align: center;;
	padding:10px 0;
	font-weight:600;
}
.project-block-outline .project-box .project-btn-wrap .project-btn a:hover{
	text-decoration:none;
}


/*
 *
 * ------------------------------------ */
.vision-movie-block{
	padding:80px 0px 120px 0px;
	text-align:center;
	background:#f8f8f8ee;
}
.vision-movie-block .vision-movie-title{
	text-align:center;
	font-size:24px;
	margin-bottom:25px;
}
.vision-movie-block .vision-movie-box{
	width:680px;
	margin: 0 auto;
}


@media screen and (max-width:840px) { 
	.vision-outline{
		background:url(../img/vision/bg_vision_sp.jpg) center center;
		/* background-size: cover; */
		/*
		background-color:rgba(255,255,255,0.6);
		background-blend-mode:lighten;
		*/


		/*画像のサイズを指定する*/
		-webkit-background-size: 800px 800px;
		background-size: 800px 800px;

		/* animation:アニメーション名 , アニメーションの時間 , アニメーションのタイミング , アニメーションの繰り返し */
		-webkit-animation: bgscroll 50s linear infinite;
		animation: bgscroll 50s linear infinite;

	}
	@-webkit-keyframes bgscroll {
		0% {background-position: 0 0;}
		100% {background-position: 0 -800px;}
	}

	@keyframes bgscroll {
		0% { background-position: 0 0; }
		100% { background-position: 0 -800px; }
	}

	.vision-text-title{
		line-height:1.8;

	}
	.vision-text-title .sp-br{
		display:block;
	}
	.vision-copy-box .sp-br{
		display: block;
	}
	.vision-text-box-inner p{
		text-align:left;
	}
	.vision-text-box-inner p .pc-br{
		display: block;
	}

	.vision-copy-box .copy-text{
		background: linear-gradient(to bottom right, #e4007c 0%,#e4007c 50%, #202ef4 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.vision-copy-box .copy-text .sp-br{
		display: block;
	}
	.vision-copy-box{
		font-size:50px;
		height:500px;
	}
	/* -- */
	.vision-message-box{
		width:100%;
		padding-left:20px;
		padding-right:20px;
	}
	.vision-text-box-inner{
		padding:50px 0;
	}
	.vision-text-box-inner p{
		font-size:14px;
		padding-left:20px;
		padding-right:20px;
	}
	.vision-text-box-inner p .sp-br{
		display: block;
	}

	.vision-message-box-outline{
		padding:100px 20px;
	}
	.vision-message-title{
		font-size:26px;
		margin-bottom:30px;
	}
	.vision-message-text{
		font-size:14px;
	}
	.vision-message-text .key-text{
		text-align:center;
		font-size:20px;
	}
	.vision-message-text .key-text .sp-br{
		display: block;
	}

	.project-block-outline{

		padding-left:20px;
		padding-right:20px;
	}
	.project-block-outline .project-box{
		width:100%;


	}
	.project-btn-wrap .project-btn a{
		font-size:18px;
	}
	.project-block-outline .project-box .project-btn-wrap .project-btn{
		width:100%;
	}
	
	/* ----- */
	.vision-movie-block{
		padding-left:20px;
		padding-right:20px;
	}
	.vision-movie-block .vision-movie-title{
		font-size:18px;
	}
	.vision-movie-block .vision-movie-box{
		width:100%;
	}
	.vision-movie-block .vision-movie-box iframe{
		height:300px;
	}


	.project-block-outline .project-box > .title{
		font-size:18px;
	}
}