/* CSS Document */
#movie .main{
	background:#f3f1f3;
	position:relative;
	line-height:0;
}
#movie .movie_wrap iframe{
	width:100%;
}
#movie aside{
	border-color:#e2dee3;
	border-style:solid;
	border-width:9px 0 13px;
}
#movie aside section{
	overflow:hidden;
	clear:both;
}
#movie .textbox{
	overflow:hidden;
}
#movie aside h3,#movie aside p,#movie aside .more_btn{
	overflow:hidden;
}
#movie aside h3{
	font-weight:600;
}
#movie aside h3 p{
	line-height:1.806;
}
#movie .more_btn{
	border-radius: 50px;
	line-height: 1;
	box-shadow: 0 0 4px rgba(0,0,0,0.4);
	letter-spacing: 0.06em;
	background: #ffffff;
	text-align: center;
	font-weight: 500;
	margin-top:5px;
	margin-bottom:5px;
}
#movie aside .more_btn.nolink{
	opacity:0.3;
}
#movie .more_btn a{
	position: relative;
	display: block;
}
#movie .more_btn a i{
	vertical-align: middle;
	margin-right:5px;
}
.gallery_contents ul{
	display:flex;
	flex-wrap:wrap;
}
.gallery_contents figure .thumbnail{
	line-height:0;
}
.gallery_contents figcaption{
	text-align:center;
	font-weight:500;
	line-height:1.5em;
}
.gallery_contents .category{
	line-height:0;
	border-width:0 0 4px;
	border-style:solid;
}
#cm.gallery_contents .category{
	border-color:#b0e7ff;
}
#pr.gallery_contents .category{
	border-color:#a7e8df;
}
.movie_gallery .banner{
	text-align:center;
}
#attention{
	display:none;
}
#attention{
	position:fixed;
	width:100vw;
	height:100vh;
	z-index: 99999;
	top:0;
	bottom:0;
	right:0;
	left:0;
}
#attention >.a_overlay{
	position: absolute;
	width:100vw;
	height:100vh;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background:url(../image/cont_bg1.png);
	opacity:0.9;
}
#attention .contents{
	position: absolute;
	right:0;
	left:0;
	margin:auto;
	top:25vh;
	background:#ffffff;
	box-sizing:border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
#attention p{
	text-align:center;
}

#attention .btn_wrap{
	display:table;
	table-layout:fixed;
	box-sizing:border-box;
	margin:auto;
}
#attention .btn_wrap a{
	display:block;
	color:#ffffff;
	border-radius:10px;
	transition:all 0.2s;
	margin-bottom:3px;
	letter-spacing:0.1em;
	text-align:center;
}
#attention .btn_wrap .yes a{
	background:#2089c5;
	box-shadow:0 3px 0 #157db5;
}
#attention .btn_wrap .yes a:hover{
	background:#157db5;
	box-shadow:0 0 0 #157db5;
}
#attention .btn_wrap .no a{
	background:#757575;
	box-shadow:0 3px 0 #606060;
}
#attention .btn_wrap .no a:hover{
	background:#606060;
	box-shadow:0 0 0 #606060;
}


/*PC
----------------------------------------------------*/
@media screen and (min-width:1081px),print{
	.showroom_navi{
		width:294px;
	}
	#movie aside{
		margin-bottom:60px;
		padding-top:30px;
		padding-bottom:30px;
/*		transition:all 0.5s;*/
	}
	#movie aside figure{
		float:left;
		width:155px;
		margin-right:30px;
	}
	#movie aside .more_btn{
		width:220px;
		float:right;
		margin-right:38px;
		margin-bottom:5px;
	}
	#movie aside .more_btn a{
		padding:15px;
	}
	#movie aside h3{
		font-size:1.286em;
		margin-bottom:5px;
	}
	#movie aside p{
		font-size:1.107em;
		margin-bottom:20px;
	}
	#cm.gallery_contents{
		margin-bottom:50px;
	}
	.gallery_contents .category{
		padding-bottom:10px;
	}
	.gallery_contents ul li{
		width:312px;
		margin-right:22px;
		margin-bottom:20px;
	}
	.gallery_contents figure .thumbnail{
		margin-bottom:11px;
	}
	.gallery_contents figcaption{
		font-size:1.107em;
	}
	.gallery_contents ul li:nth-child(3n){
		margin-right:0;
	}
	#pr.gallery_contents ul{
		margin-bottom:50px;
	}
	.movie_gallery .banner{
		margin-bottom:100px;
	}
	#attention .contents{
		padding:5%;
	}
	#attention .btn_wrap{
		width:70%;
		padding:0 10px;
	}
	#attention p{
		font-size:1.429em;
		margin-bottom:20px;
	}
	#attention p.att{
		font-size:1em;
		margin-top:10px;
	}
	#attention .btn_wrap >div{
		display:table-cell;
	}
	#attention .btn_wrap a{
		padding:15px;
		font-size:1.143em;
	}
	#attention .btn_wrap a:hover{
		transform:translateY(3px);
		margin-bottom:0;
	}
	#attention .btn_wrap .yes a{
		margin-right:10px;
	}
	#attention .btn_wrap .no a{
		margin-left:10px;
	}

}
@media screen and (min-width:751px),print{
	#movie .main{
		background:url("../image/mv_pc.jpg") no-repeat center;
		height:475px;
		margin-bottom:46px;
	}
	#movie .movie_wrap{
		position:absolute;
		width:570px;
		height:320px;
		top:28px;
		right:0;
		left:0;
		margin:auto;
	}
	#movie .movie_wrap iframe{
		width:570px;
		height:320px;
	}
}
/*Tab&Phone
--------------------------------------------------*/
@media screen and (max-width:1080px),print{
	#movie{
		margin-bottom:5%;
	}
	#movie aside{
		padding:7% 0;
	}
	#movie aside h3{
		margin-bottom:2%;
	}
	#movie aside p{
		padding-bottom:5%;
	}
	#movie aside .more_btn a{
		padding:3%;
	}
	.gallery_contents ul li{
		width:48%;
		margin-right:4%;
		margin-bottom:4%;
	}
	.gallery_contents ul li:nth-child(2n){
		margin-right:0;
	}
	.gallery_contents .category{
		padding-bottom:3%;
	}
	.gallery_contents figure .thumbnail{
		margin-bottom:2%;
	}
	.movie_gallery .banner{
		padding:0 5%;
		margin-bottom:5%;
	}
	#pr.gallery_contents{
		margin-bottom:3%;
	}
	#attention .contents{
		padding:30px;
	}
	#attention p{
		margin-bottom:3%;
	}
	#attention p.att{
		margin-top:1%;
		margin-bottom:0;
	}
	#attention .btn_wrap a{
		padding:3%;
	}
	#attention .btn_wrap .yes{
		margin-bottom:2%;
	}

}

/*Tab
--------------------------------------------------*/
@media screen and (max-width:1080px) and (min-width:751px){
	#movie aside figure{
		width:30%;
		float:left;
		margin-right:2%;
	}
	#movie aside .more_btn{
/*		width:50%;*/
		margin-right:20%;
		margin-left:20%;
	}
	.gallery_contents li .thumbnail img{
		width:100%;	
	}
	#attention p{
		font-size:1.143em;
	}
	#attention p.att{
		font-size:1em;
	}
	#attention .btn_wrap{
		width:90%;
	}

}
/*Phone
--------------------------------------------------*/
@media screen and (max-width:750px){
	#movie .main{
		margin-bottom:7%;
		background:url("../image/mv_phone.jpg") no-repeat center top /100% auto;
	}
	#movie .movie_wrap{
		font-size: calc(0.625rem + ((1vw - 3.2px) * 3.1163));
		max-width:500px;
		width:21em;
		margin-right:auto;
		margin-left:auto;
		padding-top: 2em;
		padding-bottom: 9.2em;
	}
	#movie .movie_wrap >div{
		position: relative;
		width: 100%;
		padding-top: 56%;
	}
	#movie .movie_wrap iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#movie aside .image{
		text-align:center;
		max-width:155px;
		margin-right:auto;
		margin-left:auto;
	}
	#movie aside .more_btn{
		margin-right:5%;
		margin-left:5%;
	}
	#movie aside .more_btn a{
		padding:5%;
	}
	
	.gallery_contents li{
		font-size: calc(0.625rem + ((1vw - 3.2px) * 3.1163));
	}
	.gallery_contents .category{
		padding-bottom:2%;
	}
	.gallery_contents .category img{
		width:2em;
	}
	.gallery_contents li figcaption{
		font-size:0.833em;
	}
	#attention p.att{
		font-size:0.800em;
	}
	#attention .btn_wrap{
		width:100%;
	}

}