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

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

.mv {
}

.site_ttl {
	width: calc(680 / 750 * 100%);
    margin: calc(20 / 750 * 100%) auto 0;
    z-index: 2;
}

.mv_img {
    margin: calc(-52 / 750 * 100%) 0 0;
}

.mv_onair {
	width:100%;
}

.mv_bnr {
    padding: calc(57 / 750 * 100%) 0;
    background-color: #03b5cf;
}

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

@media screen and (min-width:700px){
	.mv {
	    background: url(../images/bg_mv.jpg) repeat-x center bottom #fff;
        background-size: calc(8 / 1040 * 100%) auto;
    }
    
    .mv_box {
        padding: calc(20 / 740 * 100%) calc(40 / 740 * 100%) 0 0;
    }
    
    .site_ttl {
        width: calc(635 / 740 * 100%);
        margin: 0 auto;
    }
    
    .mv_img {
        margin: calc(-49 / 740 * 100%) 0 0;
    }
    
    .mv_onair {
        width: calc(297 / 740 * 100%);
        position: absolute;
        top: 0;
        left: 0;
        margin: calc(146 / 740 * 100%) 0 0;
    }
    
    .mv_bnr {
        width: calc(462 / 740 * 100%);
        padding: 0;
        background-color: transparent;
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0 0 calc(40 / 740 * 100%) calc(120 / 740 * 100%);
    }
    
    .official_link a {
        width: 100%;
    }
    
    .official_link a::before,
    .official_link a::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(126 / 462 * 100%);
        background: url(../images/btn_official_pc.png) no-repeat center bottom;
        background-size: 100% auto;
    }
    
    .official_link a::after {
        background: url(../images/btn_official_pc_hover.png) no-repeat center bottom;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -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: 8px auto;
    }
}


/* =====================================================================
*    intro
* =================================================================== */
.intro {
    padding: calc(150 / 750 * 100%) 0 calc(160 / 750 * 100%);
    background: url(../images/bg_intro_sp.jpg) no-repeat left top;
    background-size: 100% auto;
}

@media screen and (min-width:700px){
    .intro {
        padding: calc(68 / 1040 * 100%) 0 calc(112 / 1040 * 100%);
        background: url(../images/bg_intro_pc.jpg) no-repeat center top #00031e;
        background-size: auto 100%;
    }
    
    .intro .sec_ttl {
        width: calc(543 / 700 * 100%);
    }
}

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


/* =====================================================================
*    cast
* =================================================================== */
.cast {
    padding: calc(135 / 750 * 100%) 0 calc(210 / 750 * 100%);
    background: url(../images/bg_cast1.jpg) repeat left top;
    background-size: calc(128 / 750 * 100%) auto;
    overflow: hidden;
}

.cast .inner_wrap::before,
.cast .inner_wrap::after {
    content: "";
    display: block;
    width: calc(666 / 750 * 100%);
    padding-top: calc(666 / 750 * 100%);
    background: url(../images/bg_cast3.png) no-repeat left top;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(-135 / 750 * 100%) 0 0 calc(-222 / 750 * 100%);
}

.cast .inner_wrap::after {
    background: url(../images/bg_cast4.png) repeat left top;
    background-size: cover;
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    margin: 0 calc(-212 / 750 * 100%) calc(-210 / 750 * 100%) 0;
}

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

.cast_box::before {
    content: "";
    display: block;
    width: calc(287 / 750 * 100%);
    padding-top: calc(287 / 750 * 100%);
    background: url(../images/bg_cast2.png) repeat left top;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(282 / 750 * 100%) 0 0 calc(342 / 750 * 100%);
}

.cast_box picture {
    display: block;
    z-index: 2;
}

@media screen and (min-width:700px){
    .cast {
        padding: calc(68 / 1040 * 100%) 0 calc(115 / 1040 * 100%);
        background-size: calc(128 / 1040 * 100%) auto;
    }
    
    .cast .inner_wrap::before,
    .cast .inner_wrap::after {
        width: calc(666 / 740 * 100%);
        padding-top: calc(666 / 740 * 100%);
        margin: calc(-68 / 740 * 100%) 0 0 calc(-440 / 740 * 100%);
    }
    
    .cast .inner_wrap::after {
        margin: 0 calc(-546 / 740 * 100%) calc(-115 / 740 * 100%) 0;
    }
    
    .cast .sec_ttl {
        margin: 0 calc(70 / 700 * 100%) calc(60 / 700 * 100%) auto;
    }
    
    .cast_box::before {
        width: calc(287 / 700 * 100%);
        padding-top: calc(287 / 700 * 100%);
        margin: calc(83 / 700 * 100%) 0 0 calc(502 / 700 * 100%);
    }
}

@media screen and (min-width:1040px){
    .cast {
        padding: 68px 0 115px;
        background-size: 128px auto;
    }
}


/* =====================================================================
*    staff
* =================================================================== */
.staff {
    padding: calc(134 / 750 * 100%) 0 calc(230 / 750 * 100%);
    background: url(../images/bg_staff.png) repeat left top;
    background-size: calc(116 / 750 * 100%) auto;
}

.staff .sec_ttl {
    margin: 0 auto calc(90 / 750 * 100%);
}

@media screen and (min-width:700px){
    .staff {
        padding: calc(68 / 750 * 100%) 0 calc(190 / 750 * 100%);
        background: url(../images/bg_staff.png) repeat center top;
        background-size: calc(116 / 1040 * 100%) auto;
    }
    
    .staff .sec_ttl {
        margin: 0 0 calc(60 / 700 * 100%) calc(70 / 700 * 100%);
    }
    
}

@media screen and (min-width:1040px){
    .staff {
        padding: 68px 0 190px;
        background-size: 116px auto;
    }
}