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

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

.mv {
}

.site_ttl {
	width: calc(571 / 750 * 100%);
    margin: calc(20 / 750 * 100%) auto 0;
    z-index: 2;
	position: absolute;
    bottom: 3%;
    left: 0;
    right: 0;
}

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

.mv_onair {
	width:100%;
}

.mv_bnr {
    padding: calc(45 / 750 * 100%) 0;
    background-color: #57197c;
	margin-top: -1px;
}

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

@media screen and (min-width:700px){
	.mv {
		background: url(../images/bg_mv.jpg) /*calc(884 / 1600 * 100%)*/ center top;
            background-repeat: repeat-y;
/*    background-size: contain;
*/background-color: #57197c;
    }

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

    .site_ttl {
        width: calc(446 / 740 * 100%);
		position: absolute;
		bottom: 17%;
		left: 0;
		right: 0;
		margin: 0 auto;
    }

    .mv_img {
        margin: calc(-20 / 740 * 100%) 0 0;
		position: relative;
    }

    .mv_onair {
        width: calc(433 / 740 * 100%);
        position: absolute;
        bottom: 20px;
        left: 20px;
        margin: calc(146 / 740 * 100%) 0 0;

    }

    .mv_bnr {
        width: calc(220 / 740 * 100%);
        padding: 0;
        background-color: transparent;
        position: absolute;
        bottom: 3%;
        right: 7%;
        /*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(130 / 220* 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;
        bottom: 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: 701px) and (max-width: 1023px){
	.mv {
background: url(../images/bg_mv_tb.png)no-repeat left top;
    /* background-repeat: repeat-y; */
    /* background-size: 100% auto; */
    background-color: #57197c;
    background-position: 75%;		
    }
}

@media screen and (min-width:1040px){
	.mv {
/*        background-size: 100% auto;
*/    }
}


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

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

    .intro .sec_ttl {
        width: calc(543 / 700 * 100%);
    }
}

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


/* =====================================================================
*    cast
* =================================================================== */
.cast {
    padding: calc(80 / 750 * 100%) 0 calc(400 / 750 * 100%);
    background: url(../images/bg_staff.png) repeat center top;
    background-size: calc(82 / 750 * 100%) auto;
}


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


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

@media screen and (min-width:700px){
    .cast {
        padding: calc(68 / 1040 * 100%) 0 calc(300 / 1040 * 100%);
        background-size: calc(82 / 1040 * 100%) auto;
    }


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

}

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


/* =====================================================================
*    staff
* =================================================================== */
.staff {
    padding: calc(80 / 750 * 100%) 0 calc(80 / 750 * 100%);
    background: url(../images/bg_staff.png) repeat center bottom;
    background-size: calc(82 / 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(30 / 750 * 100%);
        background: url(../images/bg_staff.png) repeat center bottom;
        background-size: calc(82 / 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 115px;
        background-size: 82px auto;
    }
}