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

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

.mv {
}

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

.mv_onair_box {
    padding: calc(40 / 750 * 100%) 0 calc(40 / 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 {
	width: calc(335 / 700 * 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 calc(395 / 700 * 100%) calc(15 / 700 * 100%);
}

.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) repeat center top;
    background-size: cover;    }

    .mv_img {
        margin-right: -11rem;
    }
    .mv_box {
/*        margin: 0 calc(40 / 740 * 100%) 0 0;
*/    }

    .site_ttl {
        width: calc(300 / 730 * 100%);
		position: absolute;
        top: 0;
        left: 0;
        margin: 0 0 0 calc(120 / 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(220 / 730 * 100%);
        position: absolute;
        top: 0;
        right: 0;
        margin: calc(40 / 700 * 100%) calc(60 / 700 * 100%) 0 0;
    }

    .mv_bnr {
        width: calc(250 / 730 * 100%);
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0 0 calc(20 / 700 * 100%) calc(130 / 700 * 100%);
    }
    
    .official_link {
        width: calc(600 / 700 * 100%);
    }
    
    .official_link a {
        width: 100%;
    }

    .official_link a::before,
    .official_link a::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(141 / 251 * 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;
        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;
*/        background-size: cover;
    }
    
}


/* =====================================================================
*    intro
* =================================================================== */
.intro {
    padding: calc(90 / 750 * 100%) 0 calc(90 / 750 * 100%) 0;
    background:url(../images/pc/bg_texture02.jpg) repeat #8a2c3e;
   background-size: cover;
}


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

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

@media screen and (min-width:700px){
    .intro {
        padding: calc(100 / 1040 * 100%) 0 calc(100 / 1040 * 100%) 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(524 / 700 * 100%);
        margin: 0 auto calc(70 / 700 * 100%);
    }
    
    .intro_box {
        width: calc(582 / 700 * 100%);
    }
}

@media screen and (min-width:1040px){
    .intro {
        padding: 100px 0 100px 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-size: 100% auto;
}
*/
.cast{
    padding: calc(60 / 750 * 100%) 0 calc(120 / 750 * 100%) 0;
    background:url(../images/pc/character.png) no-repeat,url(../images/pc/bg_texture.png) repeat;
	background-position:120% 110%,center;
	background-size:40%,cover;
}
.staff .sec_ttl,
.cast .sec_ttl {
    width: calc(646 / 750 * 100%);
    margin: 0 auto calc(80 / 750 * 100%);
}
.staff{
    padding: calc(90 / 750 * 100%) 0 calc(200 / 750 * 100%) 0;
	background: url(../images/sp/bg_mv.jpg) repeat;
}
.staff_box {
    width: calc(441 / 750 * 100%);
    margin: 0 auto calc(170 / 750 * 100%);
}

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

@media screen and (min-width:700px){
    .staff_bg {
        padding: calc(100 / 1040 * 100%) 0 0;
		background-size:100%;
/*        background-size: calc(3000 / 1040 * 100%) auto;
	
*/ 
	}
	
	.cast{
    padding: calc(60 / 750 * 100%) 0 calc(60 / 750 * 100%) 0;
    background:url(../images/pc/character.png) no-repeat,url(../images/pc/bg_texture.png) repeat;
	background-position:60% bottom,center;
	background-size:18%,cover;
}

.staff{
    padding: calc(60 / 750 * 100%) 0 calc(20 / 750 * 100%) 0;
	background: url(../images/pc/bg_mv.jpg) repeat;
	background-size:cover;
}

    .staff_bg::after {
        padding-top: calc(6 / 1040 * 100%);
        margin: calc(390 / 1040 * 100%) 0 0;
    }
    
    .staff .sec_ttl,
    .cast .sec_ttl {
        width: calc(524 / 700 * 100%);
        margin: 0 auto calc(50 / 700 * 100%);
    }
    
    .staff_box {
        width: calc(491 / 700 * 100%);
        margin: 0 auto calc(160 / 700 * 100%);
    }

    .cast_box {
        width: calc(308 / 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;
    }
}