@charset "UTF-8";

#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;
    }    
}
@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;
    }    
}