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

/* =====================================================================
*    header
* =================================================================== */
#header {
}

.mv {
}

.site_ttl {
	
}

.mv_onair_box {
    padding: calc(20 / 750 * 100%) 0 calc(43 / 750 * 100%);
	background: url(../images/sp/bg_mv_date.jpg) no-repeat left top;
    background-size: 100% 100%;
}

.mv_onair {
    margin: 0 0 calc(25 / 750 * 100%);
}

.mv_bnr {
}

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

@media screen and (min-width:700px){
	.mv {
        background: url(../images/pc/bg_mv.jpg) no-repeat center top;
        background-size: calc(3000 / 1040 * 100%) 100%;
    }

    .mv_box {
        margin: 0 calc(40 / 740 * 100%) 0 0;
    }

    .site_ttl {
        width: calc(101 / 700 * 100%);
		position: absolute;
        top: 0;
        left: 0;
        margin: 0 0 0 calc(40 / 700 * 100%);
        z-index: 2;
		
    }

    .mv_onair_box {
        width: 100%;
        height: 100%;
        padding: 0;
        background: none;
        position: absolute;
        top: 0;
        left: 0;
    }

    .mv_onair {
        width: calc(525 / 700 * 100%);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto calc(120 / 700 * 100%);
    }

    .mv_bnr {
        width: calc(498 / 700 * 100%);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto calc(25 / 700 * 100%);
    }
    
    .official_link a {
        width: 100%;
    }

    .official_link a::before,
    .official_link a::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(79 / 498 * 100%);
        background: url(../images/pc/btn_of.png) no-repeat center bottom;
        background-size: 100% auto;
    }

    .official_link a::after {
        background: url(../images/pc/btn_of_h.png) no-repeat center bottom;
        background-size: 100% auto;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0;
        -webkit-box-shadow: 0 0 calc(15 / 1040 * 100vw) #ff0000;
        box-shadow: 0 0 calc(15 / 1040 * 100vw) #ff0000;
        -webkit-box-shadow: 0 0 1.44vw #ff0000;
        box-shadow: 0 0 1.44vw #ff0000;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

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

    .official_link a img {
        display: none;
    }
}

@media screen and (min-width:1040px){
	.mv {
        background-size: 3000px auto;
    }
    
    .official_link a::after {
        -webkit-box-shadow: 0 0 15px #ff0000;
        box-shadow: 0 0 15px #ff0000;
    }
}


/* =====================================================================
*    intro
* =================================================================== */
.intro {
    padding: calc(90 / 750 * 100%) 0 0;
    background: url(../images/sp/bg_intro.png) repeat-x left bottom #000;
    background-size: calc(39 / 750 * 100%) auto;
}

.intro::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(7 / 750 * 100%);
    margin: calc(120 / 750 * 100%) 0 0;
    background-color: #ff0000;
}

.intro .sec_ttl {
    width: calc(550 / 750 * 100%);
    margin: 0 auto calc(85 / 750 * 100%);
}

.intro_box {
    width: calc(639 / 750 * 100%);
    margin: 0 auto;
}

@media screen and (min-width:700px){
    .intro {
        padding: calc(100 / 1040 * 100%) 0 0;
        background-size: calc(29 / 1040 * 100%) auto;
    }
    
    .intro::after {
        padding-top: calc(6 / 1040 * 100%);
        margin: calc(120 / 1040 * 100%) 0 0;
    }

    .intro .sec_ttl {
        width: calc(640 / 700 * 100%);
        margin: 0 auto calc(70 / 700 * 100%);
    }
    
    .intro_box {
        width: calc(599 / 700 * 100%);
    }
}

@media screen and (min-width:1040px){
    .intro {
        padding: 100px 0 0;
		background-size: 29px auto;
    }
    
    .intro::after {
        padding-top: 6px;
        margin: 120px 0 0;
    }
}


/* =====================================================================
*    staff
* =================================================================== */
.staff_bg {
    padding: calc(100 / 750 * 100%) 0 0;
    background: url(../images/sp/bg_staff.jpg) no-repeat center top;
    background-size: 100% auto;
}

.staff_bg::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(7 / 750 * 100%);
    margin: calc(460 / 750 * 100%) 0 0;
    background-color: #ff0000;
}

.staff .sec_ttl,
.cast .sec_ttl {
    width: calc(334 / 750 * 100%);
    margin: 0 auto calc(80 / 750 * 100%);
}

.staff_box {
    width: calc(632 / 750 * 100%);
    margin: 0 auto calc(170 / 750 * 100%);
}

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

@media screen and (min-width:700px){
    .staff_bg {
        padding: calc(100 / 1040 * 100%) 0 0;
        background: url(../images/pc/bg_staff.jpg) no-repeat center top;
        background-size: calc(3000 / 1040 * 100%) auto;
    }
    
    .staff_bg::after {
        padding-top: calc(6 / 1040 * 100%);
        margin: calc(390 / 1040 * 100%) 0 0;
    }
    
    .staff .sec_ttl,
    .cast .sec_ttl {
        width: calc(640 / 700 * 100%);
        margin: 0 auto calc(50 / 700 * 100%);
    }
    
    .staff_box {
        width: calc(448 / 700 * 100%);
        margin: 0 auto calc(160 / 700 * 100%);
    }

    .cast_box {
        width: calc(157 / 700 * 100%);
    }
}

@media screen and (min-width:1040px){
    .staff_bg {
        padding: 100px 0 0;
        background-size: 3000px auto;
    }
    
    .staff_bg::after {
        padding-top: 6px;
        margin: 390px 0 0;
    }
}