@charset "UTF-8";
.mv_thumb{
    position:relative;
    transition-duration:0.5s;
    cursor:pointer;
}
.mv_thumb:hover{
    opacity:0.8;
}
.mv_thumb:before{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-image:url(../img/icon_youtube.png);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    transition-duration:0.5s;
    z-index:5;
}
.mv_thumb:hover:before{
    width:100px;
    height:100px;
}
.esc_play_icon.mv_thumb:before{
	display:none;
}

#mv_screen{
    display:block;
    position:absolute;
    width:100%;
    height:110vh;
    left:0;
    background-color:rgba(0,0,0,0.8);
    z-index: 999999;
    opacity:0;
}
#mv_screen .js_mvEle{
    display:block;
    margin:0 auto;
    width:900px;
    height:600px;
    margin-top:calc((100vh - 600px)/2);
}
#mv_screen .js_bt_x{
    position:absolute;
    width:50px;
    height:50px;
    right:0;
    border:1px solid #ddd;
    background-color:rgba(0,0,0,0.5);
    background-image:url(../img/style0_menux.png);
    background-size:cover;
}
#mv_screen .mv_link{
    display:block;
    width:320px;
    margin:20px auto 0;
    padding:10px 0;
    background:rgba(0,0,0,0.5);
    border-radius:30px;
    border:1px solid #fff;
    color:#fff;
    font-size:18px;
    text-align:center;
    box-shadow:0px 0px 3px 0 rgba(255,255,255,1);
}

/*動画関連*/
@media screen and (max-width: 1024px) {
    iframe,video{
        display:block;
        width:100%;
        height:70vw;
    }    
    #mv_screen .js_mvEle{
        width:100vw;
        height:60vw;
    }
    #mv_screen .js_bt_x{
        width:5vh;
        height:5vh;
        right:0;
    }
    #mv_screen .mv_link{
        width:42vw;
        margin:3vw auto 0;
        padding:2vw 0;
        border-radius:10vw;
        font-size:3vw;
    }    
	.mv_thumb:before{
		width:35%;
		height:35%;
	}
	.mv_thumb:hover:before{
		width:45%;
		height:45%;
	}
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
   /* 横向きの場合のスタイル */
    #mv_screen .js_mvEle{
        width:100vw;
        height:60vw;
        margin-top:calc((100vh - 60vw)/2);
    }
    #mv_screen .js_bt_x{
        width:6vh;
        height:6vh;
        margin-top:calc((100vh - 60vw)/2 - 6vh);
    }
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
    #mv_screen .js_mvEle{
        width:84vw;
        height:100vh;
        margin-top:0;
    }
    #mv_screen .js_bt_x{
        width:6vw;
        height:6vw;
    }
    #mv_screen .mv_link{
        display:none;
    }    
}


.mv_thumb.top-right-icon:before{
	top:5%;
	left:auto;
	right:3%;
	width:20%;
	height:20%;
	transform:translate(0%,0%);
}
.mv_thumb.top-right-icon:hover:before{
	width:25%;
	height:25%;
}