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

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

.mv {
}

.site_ttl {
	width: calc(416 / 750 * 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: calc(37 / 750 * 100%) auto 0;
    z-index: 2;
}

.mv_img {
}

.mv_onair {
	width: calc(603 / 750 * 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto 4.5%;
    z-index: 2;
}

.mv_bnr {
    padding: calc(60 / 750 * 100%) 0 calc(26 / 750 * 100%);
	background-color: #194795;
}

.official_link a {
    width: calc(650 / 750 * 100%);
    margin: 0 auto;
    -webkit-box-shadow: 0 1.5vw 3vw #0e2752;
    box-shadow: 0 1.5vw 3vw #0e2752;
}

@media screen and (min-width:700px){
	.mv {
	    background: url(../images/bg_mv_pc.jpg) repeat center top;
        background-size: calc(2000 / 1040 * 100%) auto;
    }
    
    .mv_box {
        padding: 0 calc(40 / 740 * 100%) 0 0;
        z-index: 10;
    }
    
    .site_ttl {
        width: calc(250 / 740 * 100%);
        margin: calc(36 / 740 * 100%) 0 0 calc(30 / 740 * 100%);
    }
    
    .mv_onair {
        width: calc(373 / 740 * 100%);
        top: 0;
        bottom: auto;
        margin: calc(43 / 740 * 100%) 0 0 calc(300 / 740 * 100%);
    }
    
    .mv_bnr {
        padding: 0;
        background-color: transparent;
    }
    
    .mv_bnr::before, .mv_bnr::after {
        content: "";
        display: block;
        width: 140%;
        padding-top: calc(500 / 1040 * 100%);
        background-color: #81a0ca;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
        margin: calc(-140 / 1040 * 100%) 0 0 -20%;
    }
    
    .mv_bnr::after {
        background-color: #194795;
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        margin-top: calc(-170 / 1040 * 100%);
    }
    
    .official_link {
        padding: calc(35 / 740 * 100%) calc(40 / 740 * 100%) calc(155 / 740 * 100%) 0;
        z-index: 10;
    }
    
    .official_link a {
        width: calc(488 / 700 * 100%);
        -webkit-box-shadow: 0 0.96vw 1.92vw #0e2752;
        box-shadow: 0 0.96vw 1.92vw #0e2752;
    }
    
    .official_link a:hover {
        opacity: 0.7;
    }
}

@media screen and (min-width:1040px){
	.mv {
	    background: url(../images/bg_mv_pc.jpg) repeat center top;
        background-size: 2000px auto;
    }
    
    .mv_bnr::before {
        padding-top: 500px;
        margin-top: -140px;
    }
    
    .mv_bnr::after {
        padding-top: 500px;
        margin-top: -170px;
    }
    
    .official_link a {
        -webkit-box-shadow: 0 10px 20px #0e2752;
        box-shadow: 0 10px 20px #0e2752;
    }
}


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

.intro_box {
    padding: 0 0 calc(166 / 750 * 100%);
}

@media screen and (min-width:700px){
    .intro {
        background: none;
    }
    
    .intro::before, .intro::after {
        content: "";
        display: block;
        width: 140%;
        padding-top: calc(350 / 1040 * 100%);
        background-color: rgba(255,255,255,0.15);
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
        margin: calc(-90 / 1040 * 100%) 0 0 -20%;
    }
    
    .intro::after {
        background-color: #fff;
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        margin-top: calc(-120 / 1040 * 100%);
    }
    
    .intro_bg {
        background: url(../images/bg_intro_pc.jpg) repeat center top;
        background-size: calc(1600 / 1040 * 100%) auto;
        z-index: 2;
    }
    
    .intro_box {
        margin: 0 calc(40 / 740 * 100%) 0 0;
        padding: calc(170 / 740 * 100%) 0 calc(210 / 740 * 100%);
    }
}

@media screen and (min-width:1040px){
    .intro::before {
        margin-top: -90px;
    }
    
    .intro::after {
        margin-top: -120px;
    }
    
	.intro_bg {
        background-size: 1600px auto;
    }
}


/* =====================================================================
*    staff
* =================================================================== */
.staff {
    background: url(../images/bg_staff_sp.jpg) no-repeat left top;
    background-size: 100% auto;
}

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

.staff_box {
    padding: 0 0 calc(116 / 750 * 100%);
}

@media screen and (min-width:700px){
    .staff {
        background: none;
    }
    
    .staff::before, .staff::after {
        content: "";
        display: block;
        width: 140%;
        padding-top: calc(350 / 1040 * 100%);
        background-color: #9cc2e2;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
        margin: calc(-90 / 1040 * 100%) 0 0 -20%;
        z-index: 3;
    }
    
    .staff::after {
        background-color: #4f8cc5;
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        margin-top: calc(-120 / 1040 * 100%);
    }
    
    .staff_bg {
        background: url(../images/bg_staff_pc.jpg) repeat center top;
        background-size: calc(1600 / 1040 * 100%) auto;
        z-index: 4;
    }
    
    .staff .sec_ttl {
        margin: 0 calc(40 / 740 * 100%) calc(70 / 740 * 100%) 0;
    }
    
    .staff_box {
        margin: 0 calc(40 / 740 * 100%) 0 0;
        padding: calc(170 / 740 * 100%) 0 calc(210 / 740 * 100%);
    }
}

@media screen and (min-width:1040px){
    .staff::before {
        margin-top: -90px;
    }
    
    .staff::after {
        margin-top: -120px;
    }
    
	.staff_bg {
        background-size: 1600px auto;
    }
}


/* =====================================================================
*    cast
* =================================================================== */
.cast {
    background: url(../images/bg_cast_sp.jpg) no-repeat left top;
    background-size: 100% auto;
}

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

.cast_box {
    padding: 0 0 calc(150 / 750 * 100%);
}

@media screen and (min-width:700px){
    .cast {
        background: none;
    }
    
    .cast::before, .cast::after {
        content: "";
        display: block;
        width: 140%;
        padding-top: calc(350 / 1040 * 100%);
        background-color: #3469ad;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
        margin: calc(-90 / 1040 * 100%) 0 0 -20%;
        z-index: 5;
    }
    
    .cast::after {
        background-color: #194795;
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
        margin-top: calc(-120 / 1040 * 100%);
    }
    
    .cast_bg {
        background: url(../images/bg_cast_pc.jpg) repeat center top;
        background-size: calc(1600 / 1040 * 100%) auto;
        z-index: 6;
    }
    
    .cast .sec_ttl {
        margin: 0 calc(40 / 740 * 100%) calc(70 / 740 * 100%) 0;
    }
    
    .cast_box {
        margin: 0 calc(40 / 740 * 100%) 0 0;
        padding: calc(170 / 740 * 100%) 0 calc(100 / 740 * 100%);
    }
}

@media screen and (min-width:1040px){
    .cast::before {
        margin-top: -90px;
    }
    
    .cast::after {
        margin-top: -120px;
    }
    
	.cast_bg {
        background-size: 1600px auto;
    }
}