@charset "utf-8";

/* CSS Document */

/* modal movie */
.modalbox {
    display: none;
}
body.modal-open {
    height: 100vh;
}
.modalbox-overlay {
    overflow-y: scroll;
}
.oubo_text a:visited {
    color: white;
}
#video_1 {
    display: block;
    width: 100%;
    height: 100%;
}
.mov_on {
    display: block;
}
.modalbox-overlay {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 5000;
    cursor: pointer;
}
.video-container {
    position: fixed;
    width: 86.958vw;
    max-width: 1200px;
    max-height: 675px;
    height: 67vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/* vod */

.c-cont img {
    position: relative;
}

.close_btn {
    text-align: right;
}

.close_btn img {
    width: 30px;
}

#video_1 {
    display: none;
    width: 100%;
    height: 100%;
}

#video_2 {
    display: none;
    width: 100%;
    height: 100%;
}
#video_3 {
    display: none;
    width: 100%;
    height: 100%;
}
#video_4 {
    display: none;
    width: 100%;
    height: 100%;
}
#video_5 {
    display: none;
    width: 100%;
    height: 100%;
}

.spe #video_1 {
    display: block;
}

.char #video_2 {
    display: block;
}
.emi #video_3 {
    display: block;
}

.remu #video_4 {
    display: block;
}
.pete #video_5 {
    display: block;
}

.modalbox_oubo {
    display: none;
}
.modalbox_oubo.popup {
    display: block;
}
@media screen and (min-width:800px) {
    /* モーダル*/

    .close {
        text-align: right;
    }
    .close img {
        width: 30px;
    }
    .modal_wrap {
        width: 85%;
        margin: 0 auto;
        padding: 8% 0;
    }
    @media screen and (min-width:720px) {
        .modalbox {
            display: none;
        }
        .mov_on {
            display: block;
        }
        .modalbox-overlay {
            display: block;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 100%;
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 5000;
            cursor: pointer;
            overflow-y: auto;
            max-height: 100vh;
        }
        .video-container {
            position: fixed;
            width: 86.958vw;
            max-width: 780px;
            height: 60%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding-top: 50px;
        }
        @media screen and (min-width:720px) {
            .haikei {
                background: url("../images/bc_castle.jpg") no-repeat;
                width: 1920px;
                height: 1000px;
                display: block;
                position: absolute;
                background-position: 0 0;
                background-size: 1920px 1000px;
                left: 0;
                top: 80px;
            }
        }
        @-webkit-keyframes slideBgView1 {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
            100% {
                -webkit-transform: translate3d(-200px, 0, 0);
                transform: translate3d(-200px, 0, 0)
            }
        }
        @keyframes slideBgView1 {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
            100% {
                -webkit-transform: translate3d(-200px, 0, 0);
                transform: translate3d(-200px, 0, 0)
            }
        }
        @-webkit-keyframes slideBgView2 {
            0% {
                -webkit-transform: translate3d(-200px, 0, 0);
                transform: translate3d(-200px, 0, 0)
            }
            100% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        }
        @keyframes slideBgView2 {
            0% {
                -webkit-transform: translate3d(-200px, 0, 0);
                transform: translate3d(-200px, 0, 0)
            }
            100% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        }
        #s {
            position: fixed;
            width: 35px;
            height: 35px;
            top: 22%;
            left: 83%;
            transform: translate(-50%, -50%);
        }
        #s::before,
        #s::after {
            position: absolute;
            top: 50%;
            left: 0;
            content: "";
            display: block;
            width: 35px;
            border-top: 5px solid #fff;
        }
        @media screen and (min-width:720px) {
            #s {
                position: fixed;
                width: 35px;
                height: 35px;
                top: 22%;
                left: 83%;
                transform: translate(-50%, -50%);
            }
            #s::before,
            #s::after {
                position: absolute;
                top: 50%;
                left: 0;
                content: "";
                display: block;
                width: 35px;
                border-top: 5px solid #fff;
            }
        }
        #s::before {
            transform: skewY(-45deg);
        }
        #s::after {
            transform: skewY(45deg);
        }
        #s2 {
            position: relative;
            width: 50px;
            display: inline-block;
        }
        .s2_wrap {
            text-align: right;
        }
        @media screen and (min-width:720px) {
            .s2_wrap {
                text-align: right;
            }
        }
        @media screen and (min-width:1250px) {
            #s2 {
                position: relative;
                width: 45px;
                height: 45px;
            }
            #s2::before,
            #s2::after {
                width: 45px;
            }
        }