@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : top.css
Description : TOPページCSS
===================================================================== */


/* =====================================================================
*    header
* =================================================================== */

.mv_box {
    margin-bottom: 6rem;
    padding-bottom: 3rem;
    background-color: #9ad9e0;
}

.mv_box::before {
    content: '';
    position: absolute;
    bottom: -2.2rem;
    left: 0;
    width: 100%;
    height: 2.3rem;
    background: url(../images/img_separator1.png) repeat-x center/auto 100%;
}

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

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

.official_link {
    margin-top: 4rem;
    padding: 4.3rem;
}

.official_link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 100%;
    background-color: #fafafa;
    border-bottom: 1px solid #ec4452;
    z-index: -1;
}

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

@media screen and (min-width:700px) {
    .mv_box {
        margin-bottom: 1.7rem;
        padding-bottom: 0;
    }
    .mv_box::before {
        display: none;
    }
    .site_ttl {
        width: calc(240 / 710 * 100%);
        margin: calc(20 / 710 * 100%) calc(29 / 710 * 100%) 0 0;
    }
    .mv_onair {
        width: 100%;
    }
    .official_link {
        margin-top: 3.3rem;
        padding: 1.9rem 0;
    }
    .official_link::before {
        left: calc(50vw - 50%);
    }
    .official_link a {
        width: calc(608 / 710 * 100%);
    }
    .official_link a::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../images/btn_official_h.jpg) no-repeat center/contain;
        transition: 0.3s ease;
        opacity: 0;
        z-index: 1;
    }
    .official_link a:hover::after {
        opacity: 1;
    }
}

@media screen and (min-width:1040px) {
    .official_link::before {
        left: 172px;
    }
}


/* =====================================================================
*    intro
* =================================================================== */

.intro {
    padding: 13rem 0 17rem;
    background: #fff url(../images/bg_intro-sp.jpg) no-repeat center/cover;
}

.intro .sec_ttl {
    width: calc(472 / 750 * 100%);
}

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

@media screen and (min-width:700px) {
    .intro {
        padding: 7.8rem 0 9.4rem;
        background-image: url(../images/bg_intro-pc.jpg);
        background-size: 124.2rem auto;
        background-position: center left -21.3rem;
    }
    .intro .sec_ttl {
        margin-bottom: calc(62 / 710 * 100%);
        width: calc(472 / 710 * 100%);
    }
    .intro_box {
        width: calc(706 / 710 * 100%);
    }
}

@media screen and (min-width:1040px) {
    .intro {
        background-position: center;
    }
}


/* =====================================================================
*    staff
* =================================================================== */

.staff {
    padding: 15rem 0 24rem;
}

.staff .sec_ttl {
    width: calc(200 / 750 * 100%);
}

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

.staff_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.staff_list li {
    margin-bottom: 4rem;
    width: calc(320 / 670 * 100%);
}

.staff_list li.wide {
    width: 100%;
}

.staff_list dl {
    letter-spacing: 0.1em;
}

.staff_list dt {
    margin-bottom: 0.4em;
    padding-bottom: 0.3em;
    color: #00a6ba;
    font-size: 2.8rem;
    border-bottom: 1px solid;
}

.staff_list dd {
    font-size: 3.1rem;
    line-height: 1.5;
}

.staff_list dd small {
    font-size: 75%;
}

@media screen and (min-width:700px) {
    .staff {
        padding: 9rem 0 18rem;
    }
    .staff .sec_ttl {
        width: calc(190 / 710 * 100%);
    }
    .staff_box {
        width: 100%;
    }
    .staff_list li {
        margin-bottom: 5rem;
        padding: 0 1rem;
        width: calc(340 / 710 * 100%);
    }
    .staff_list dt {
        font-size: 2rem;
    }
    .staff_list dd {
        font-size: 2.4rem;
    }
    .staff_list dd small {
        font-size: 1.4rem;
    }
}


/* =====================================================================
*    cast
* =================================================================== */

.cast {
    background-color: #fafafa;
}

.cast .inner {
    padding-top: 14.7rem;
    padding-bottom: 17rem;
}

.cast .inner::before,
.cast .inner::after {
    content: '';
    position: absolute;
    width: 52.8rem;
    height: 52.8rem;
    background: url(../images/img_deco1.png) no-repeat center/contain;
}

.cast .inner::before {
    top: -10.6rem;
    left: -17rem;
}

.cast .inner::after {
    bottom: -0.8rem;
    right: -16rem;
}

.cast .sec_ttl {
    width: calc(200 / 750 * 100%);
}

.cast .staff_list dt {
    color: #ec4452;
}

@media screen and (min-width:700px) {
    .cast .inner {
        padding-top: 8rem;
        padding-bottom: 6rem;
    }
    .cast .inner::before {
        top: 3.3rem;
        left: -28rem;
    }
    .cast .inner::after {
        bottom: -20rem;
        right: 12.7rem;
        width: 40.2rem;
        height: 40.2rem;
    }
    .cast .sec_ttl {
        width: calc(170 / 710 * 100%);
    }
}