@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description : TOPページCSS
===================================================================== */

/* =====================================================================
*    header
* =================================================================== */
.site_ttl {
	width: calc(160 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    margin: calc(450 / 750 * 100%) 0 0 calc(290 / 750 * 100%);
}

.site_ttl p {
	display: none;
}

.mv_onair {
	width: calc(820 / 750 * 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 0 calc(-35 / 750 * 100%);
}

.official_link {
    background-color: #1a1d25;
}

.official_link_box {
    padding: calc(25 / 750 * 100%) 0;
}

.official_link_box a {
    width: calc(690 / 750 * 100%);
    margin: 0 auto;
}

@media screen and (min-width:700px){
    .mv {
        background: url(../images/bg_mv.png) repeat-x center top;
        background-size: calc(25 / 1040 * 100%) auto;
    }

	.site_ttl {
        width: calc(120 / 700 * 100%);
        margin: calc(530 / 700 * 100%) 0 0 calc(280 / 700 * 100%)
    }

    .mv_img {
        width: calc(722 / 700 * 100%);
        margin: 0 0 0 calc(-22 / 700 * 100%);
    }

    .mv_onair {
        width: calc(640 / 740 * 100%);
        margin: 0 0 calc(14 / 740 * 100%) calc(41 / 740 * 100%);
    }

    .official_link_box {
        padding: calc(18 / 700 * 100%) 0;
    }

    .official_link_box a {
        width: calc(570 / 700 * 100%);
        margin: 0 0 0 calc(50 / 700 * 100%);
    }

    .official_link_box a::before,
    .official_link_box a::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(100 / 570 * 100%);
        background: url(../images/btn_official_pc.png) no-repeat center top;
        background-size: 100% auto;
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }

    .official_link_box a::after {
        background: url(../images/btn_official_pc_h.png) no-repeat center top;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .official_link_box a:hover::after {
        opacity: 1;
    }

    .official_link_box a img {
        display: none;
    }
}

@media screen and (min-width:1040px){
    .mv {
        background-size: 25px auto;
    }
}


/* =====================================================================
*    intro
* =================================================================== */
.intro {
    padding: calc(115 / 750 * 100%) 0 calc(135 / 750 * 100%);
    border-bottom: 1rem solid #000;
}

@media screen and (max-width:699px){
    .intro {
        background: url(../images/bg_intro_sp.jpg) no-repeat center top;
        background-size: cover;
    }
}

@media screen and (min-width:700px){
    .intro {
        padding: calc(55 / 1040 * 100%) 0 calc(120 / 1040 * 100%);
        background: url(../images/bg_intro_pc.jpg) no-repeat center top;
        background-size: cover;
        border-width: 4px;
    }

    .intro_box {
        width: calc(705 / 700 * 100%);
    }
}

@media screen and (min-width:1040px){
    .intro {
        padding: 55px 0 120px;
    }
}


/* =====================================================================
*    cast
* =================================================================== */
.cast_bg {
    padding: calc(90 / 750 * 100%) 0 calc(140 / 750 * 100%);
    background: url(../images/bg_staff_sp.jpg) no-repeat right bottom #1a1d25;
    background-size: 100% auto;
    border-bottom: 1rem solid #000;
}

.cast {
    margin: 0 0 calc(105 / 750 * 100%);
}

.cast_box {
    width: calc(575 / 750 * 100%);
    margin: 0 0 0 calc(105 / 750 * 100%);
}

@media screen and (min-width:700px){
    .cast_bg {
        padding: calc(55 / 1040 * 100%) 0 calc(65 / 1040 * 100%);
        background: url(../images/bg_staff_pc.jpg) no-repeat right bottom #1a1d25;
        background-size: calc(1237 / 1040 * 100%) auto;
        border-width: 4px;
    }

    .cast {
        margin: 0 0 calc(70 / 700 * 100%);
    }

    .cast_box {
        width: calc(575 / 700 * 100%);
        margin: 0 0 0 calc(65 / 700 * 100%);
    }
}

@media screen and (min-width:1040px){
    .cast_bg {
        padding: 55px 0 65px;
        background-size: 1237px auto;
    }

    .cast {
        margin: 0 0 70px;
    }
}


/* =====================================================================
*    staff
* =================================================================== */
.staff {
}

@media screen and (min-width:700px){

}

@media screen and (min-width:1040px){

}


/* =====================================================================
*    music
* =================================================================== */
.music {
    padding: calc(90 / 750 * 100%) 0 calc(140 / 750 * 100%);
    background: url(../images/bg_music.png) repeat center top;
    background-size: calc(8 / 750 * 100%) auto;
}

.music_box {
    width: calc(577 / 750 * 100%);
    margin: 0 0 0 calc(105 / 750 * 100%);
}

.music_box li:first-child {
    margin: 0 0 calc(50 / 577 * 100%);
}

@media screen and (min-width:700px){
    .music {
        padding: calc(55 / 1040 * 100%) 0 calc(110 / 1040 * 100%);
        background-size: calc(8 / 1040 * 100%) auto;
    }

    .music_box {
        width: calc(578 / 700 * 100%);
        margin: 0 0 0 calc(65 / 700 * 100%);
    }
}

@media screen and (min-width:1040px){
    .music {
        padding: 55px 0 110px;
        background-size: 8px auto;
    }
}