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

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

.mv {
}

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

.mv_img {
    padding-bottom:calc(254/750 *100%);
}

.mv_onair {
	width:100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto ;
    z-index: 2;
}

.mv_bnr {
    padding: calc(76 / 750 * 100%) 0 calc(76 / 750 * 100%);
    background:url(../images/bg_bnr.jpg) repeat center;
}

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

@media screen and (min-width:700px){
	.mv {
	    background: url(../images/bg_main.jpg) repeat center top;
        background-size: calc(2000 / 1040 * 100%) auto;
    }
    
    .mv_box {
        padding: 0 calc(40 / 740 * 100%) 0 0;
        z-index: 10;
    }
    .mv_img {
    padding-bottom:0;
}
    
    .site_ttl {
        width: calc(306 / 740 * 100%);
        margin: calc(20 / 740 * 100%) 0 0 0;
    }
    
    .mv_onair {
        width: calc(518 / 740 * 100%);
        top: 0;
        bottom: 0;
        margin: calc(716 / 740 * 100%) 0 0 calc(90 / 740 * 100%);
    }
    
    .mv_bnr {
        padding: 0;
    }
    
    
    .official_link {
        padding: calc(44 / 740 * 100%) calc(40 / 740 * 100%) calc(44 / 740 * 100%) 0;
        z-index: 10;
    }
    
    .official_link a {
        width: calc(488 / 700 * 100%);
    }
    
    .official_link a:hover {
        opacity: 0.7;
    }
}

@media screen and (min-width:1040px){
	.mv {
	    background: url(../images/bg_main.jpg) repeat center top;
        background-size: auto;
    }
}


/* =====================================================================
*    intro
* =================================================================== */
.intro {
    background: url(../images/bg_main.jpg) repeat left top;
    background-size: 250px auto;
}
.about_box {
    padding: 0;
    position: relative;
    z-index:  2;
}
.about_box::after {
    content: "";
    display: block;
    width:calc(81/750 * 100%);
    padding-top:calc(81/750 * 100%);
    background: url(../images/img_icon.png) no-repeat center;
    background-size: contain;
    margin:calc(101/750 * 100%)  auto calc(96/750 * 100%);
}
.intro_box {
    padding: 0 0 calc(166 / 750 * 100%);
    z-index: 2;
}
.intro_bg {
        background: url(../images/bg_btm1.jpg) repeat-x center bottom;
        background-size:auto 150px;
        position: relative;
    }
.intro_bg::before , .intro_bg::after {
    content:"";
    display: block;
    position: absolute;
    width:calc(184/750 * 100%);
    padding-top:calc(2858/750 * 100%);
    z-index: 1;
}
.intro_bg::before {
    background: url(../images/bg_intro_sp1.png) no-repeat top left;
    background-size: contain;
    top:0;
    left:0;
}
.intro_bg::after {
    background: url(../images/bg_intro_sp2.png) no-repeat top right;
    background-size: contain;
    top:0;
    right:0;
}

@media screen and (min-width:700px){
    .intro {
        background-size: auto;
    }
    .about_box {
        padding: 0 ;
        margin: 0 calc(40 / 740 * 100%) 0 0;
    }
    .about_box::after {
        content: "";
        display: block;
        width:calc(61/740 * 100%);
        padding-top:calc(61/740 * 100%);
        margin:calc(80/700 * 100%)  auto ;
    }
    
    .intro_box {
        margin: 0 calc(40 / 740 * 100%) 0 0;
        padding: 0 0 calc(200 / 740 * 100%);
    }
    
    .intro_bg::before , .intro_bg::after {
        padding-top:332px;
    }
    .intro_bg::before {
        width:190px;
        background: url(../images/bg_intro_pc1.png) no-repeat top left;
        background-size:contain; 
        top:75px;
        left:0;
        z-index: 1;
    }
    .intro_bg::after {
        width:290px;
        background: url(../images/bg_intro_pc2.png) no-repeat top right;
        background-size:contain; 
        top:200px;
        left:50%;
        margin-left:40px;
        z-index: 1;
    }
}

@media screen and (min-width:1040px){
    .intro_bg {
        background-size:auto; 
    }
    .intro_bg::before , .intro_bg::after {
    content:"";
    display: block;
    position: absolute;
    padding-top:665px;
    width:100%;
}
.intro_bg::before {
    width:380px;
    background: url(../images/bg_intro_pc1.png) no-repeat top left;
    top:146px;
    left:0;
}
.intro_bg::after {
    width:580px;
    background: url(../images/bg_intro_pc2.png) no-repeat top right;
    top:604px;
    left:50%;
    margin-left:74px;
    }
    
}


/* =====================================================================
*    staff
* =================================================================== */
.staff {
    background: url(../images/bg_staff.jpg) repeat left top;
}

.staff .sec_ttl {
    
}

.staff_box {
    padding: 0 0 calc(150 / 750 * 100%);   
}
.staff_bg {
        background: url(../images/bg_btm2.jpg) repeat-x center bottom;
        background-size:auto 150px;
        position: relative;
        z-index: 1;
    }
.staff_bg::before , .staff_bg::after {
    content:"";
    display: block;
    position: absolute;
    width:calc(186/750 * 100%);
    padding-top:calc(1404/750 * 100%);
}
.staff_bg::before {
    background: url(../images/bg_staff_sp1.png) no-repeat top left;
    background-size: contain;
    top:0;
    left:0;
}
.staff_bg::after {
    background: url(../images/bg_staff_sp2.png) no-repeat top right;
    background-size: contain;
    top:0;
    right:0;
}

@media screen and (min-width:700px){
    .staff {
    }
    
    .staff .sec_ttl {
        
    }
    
    .staff_box {
        margin: 0 calc(40 / 740 * 100%) 0 0;
        padding: 0 0 calc(200 / 740 * 100%);
    }
    .staff_bg::before , .staff_bg::after {
    content:"";
    display: block;
    position: absolute;
    padding-top:332px;
}
.staff_bg::before {
    width:190px;
    background: url(../images/bg_staff_pc1.png) no-repeat top left;
    background-size:contain; 
    top:75px;
    left:0;
}
.staff_bg::after {
    width:290px;
    background: url(../images/bg_staff_pc2.png) no-repeat top right;
    background-size:contain; 
    top:200px;
    left:50%;
    margin-left:40px;
    }
}

@media screen and (min-width:1040px){
    .staff_bg {
        background-size:auto; 
    }
    .staff_bg::before , .staff_bg::after {
    content:"";
    display: block;
    position: absolute;
    padding-top:665px;
    width:100%;
}
.staff_bg::before {
    width:380px;
    background: url(../images/bg_staff_pc1.png) no-repeat top left;
    top:150px;
    left:0;
}
.staff_bg::after {
    width:580px;
    background: url(../images/bg_staff_pc2.png) no-repeat top right;
    top:400px;
    left:50%;
    margin-left:74px;
    }
}




/* =====================================================================
*    cast
* =================================================================== */
.cast {
}

.cast .sec_ttl {
}

.cast_box {
    margin: 0;
    padding: 0 0 calc(150 / 750 * 100%);
}
.cast_bg {
        background: url(../images/bg_btm1.jpg) repeat-x center bottom;
        background-size: auto 150px;
    }
@media screen and (min-width:700px){
    .cast {
    }
    
    .cast_bg {
    }
    
    .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(40 / 740 * 100%) 0 calc(200 / 740 * 100%);
    }
}

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