@charset "utf-8";
/* CSS Document */
/*　トップ・客室　*/
#movie {
    width:500px;
    margin:50px auto;
    padding:15px;
    border:#e6e6e6 1px solid;
    display:flex;
    box-sizing: border-box;
    flex-wrap:wrap; 
}
#movie div {
    width:100%;
}
#movie div.text {
    display: block; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    padding-right:0;
    }
#movie div.videos {
    position: relative;
    width: 50%;
    height: 300px;
}
video {
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.videos em {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 8;
		background: url(/common/img/top/slide_video.jpg) center/ cover no-repeat;
}

.videos em:before {
		content: "";
		display: block;
		position: absolute;
		width: 10%;
		height: 22%;
		background: url(/common/img/top/play.png) center/ 100% no-repeat;
		z-index: 9;
		left: 45%;
		top: 38%;
		filter: drop-shadow(5px 5px 5px rgb(90, 60, 45));
	}
@media only screen and (max-width: 750px){
	.videos em:before {
		content: "";
		display: block;
		position: absolute;
		width: 15%;
		height: 22%;
		background: url(/common/img/top/play.png) center/ 100% no-repeat;
		z-index: 9;
		left: 45%;
		top: 40%;
	}
}
.videos p {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		cursor: pointer;			
	}
	
	.videos-on em,
	.videos-on p{
		display: none;
	}
    
#movie div.text dl dt {
    background: #999999;
    color: #FFF;
    padding: 5px;
    margin: 0 0 15px 0;
    display: inline-block;
    font-size: 20px;
    line-height: 1;
}
#movie div.text dl dd {
    color: #666666;
}
#movie div.text dl dd p:nth-of-type(1) {
    font-size: 23px;
    margin-top:15px;
    margin-bottom:15px;
}
#movie div.text dl dd p:nth-of-type(2) {
    font-size: 20px;
    margin-bottom:25px;
}
#movie div.text dl dd p:nth-of-type(3) {
    font-size: 18px;
    text-align: right;
}
@media only screen and (max-width: 750px){
    #movie {
    width:95%;
    margin:50px auto;
    padding:15px;
    border:#e6e6e6 1px solid;
    display:block;
    box-sizing: border-box;
    flex-wrap:wrap; 
    }
    #movie div {
    width:100%;
    }
    #movie div.videos {
    position: relative;
    margin-top:20px;
    width: 100%;
    height: 300px;
    }
    .videos em {
		background: url(/common/img/top/slide_video_sp.jpg) center/ cover no-repeat;
}
    #movie div.text dl dd p:nth-of-type(1) {
        font-size: 4.3vw;
        margin-top:15px;
        margin-bottom:15px;
    }
    #movie div.text dl dd p:nth-of-type(2) {
        font-size: 3.5vw;
        margin-bottom:25px;
    }
    #movie div.text dl dd p:nth-of-type(3) {
        font-size: 3.5vw;
        text-align: right;
    }
}