@charset "UTF-8";

/***************TOP***************/

/*MV*/
.home_mv {
    background: url(../images/home/mv2.png) no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 360px;
    margin: 0 0 40px;
}
/*CONCEPT*/
.home_concept{
	background:url(../images/home/concept_bg.png) no-repeat bottom center #EEEEEF;
    background-size: 100%;
    padding: 60px 0 70px;
}
.home_concept h2 {
	text-align:center;
	margin:60px auto;
}
.home_concept h2 img{
	width:90%;
	max-width:430px;
}
.home_concept .lead {
    font-size: 1.13rem;
    line-height: 2;
    margin: 0 0 30px;
	text-align:center;
}
.home_concept ul{
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}
.home_concept li{
	background-color:#FFF;
	flex:0 1 23%;
	box-shadow:0 0 10px rgba(0,0,0,0.15);
	border-radius:8px;
	padding:15px;
	box-sizing:border-box;
	list-style-type:none;
	max-width:30%;
	margin-right:31px;
	margin-bottom:20px;
}
.home_concept li:nth-of-type(4n){
	margin-right:0;
}
.home_concept li .image{
	position:relative;
	width:100%;
	height:0;
	padding-top:56.25%;
    margin: 0 0 15px;
	max-width:340px;
}
.home_concept li .movie:after{
	content:'';
	background:url(../images/home/movie_play.png) no-repeat center;
	background-size:contain;
	opacity:.8;
	position:absolute;
	z-index:2;
	width:18%;
	height:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
.home_concept li img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
}
.home_concept li img{
	border:1px #CCCCCC solid;
	margin:0 0 15px;
}
.home_concept li img a{
	display:block;
	width:100%;
	height:100%;
}
.home_concept li a:hover img{
	opacity:0.5;
	transition-duration:0.3s;
}
.home_concept li p{
	font-size:0.88rem;
	line-height:1.57;
	font-weight:bold;
}

@media only screen and (max-width: 640px) {
	/*MV*/
	.home_mv{
		height:250px;
		margin:0 0 20px;
	}

	/*CONCEPT*/
	.home_concept{
		background:url(../images/home/concept_bg.png) no-repeat center 100vw #EEEEEF;
		background-size:1350px;
		padding: 30px 0 40px;
	}
	.home_concept h2{
		padding-bottom:10vw;
	}
	.home_concept .lead {
		font-size: 0.88rem;
		margin: 0 0 20px;
	}
	.home_concept ul{ flex-wrap:wrap; }
	.home_concept li{
		flex:0 1 100%;
		max-width:100%;
		padding:15px 5%;
		margin:0 0 15px;
	}
	.home_concept li .image{ max-width:100%;height:auto; }
	.home_concept li .img{ margin:0 0 10px; }
	.home_concept li p{ font-size:0.75rem; }
}