@charset "UTF-8";
/* ==================================================================
演者と創者ページ用CSS
================================================================== */

.wrap {
    background: url('../img/cast_bg_pc.jpg') no-repeat center bottom/19.80rem auto #000;
}
.content-wrap {
    padding: .30rem 0 1.00rem;
}
/* ==================================================================
ヒーローエリア
================================================================== */
.hero-area {
    position: relative;
    background: url('../img/cast_bg_hero_pc.png') no-repeat center top/cover;
    height: 4.39rem;
    padding-top: 2.30rem;
}
.page_ttl {
    width: 3.27rem;
    margin: 0 auto;
}
@media screen and (min-width: 769px) and (max-width: 1980px) {
    .hero-area {
        background-size: 19.80rem auto;
    }
}

/* ==================================================================
キャストスタッフエリア
================================================================== */
.cast_area {
    padding: 0 .30rem;
}
.cast_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: .40rem auto .60rem;
    padding-left: .30rem;
}
.cast_list li {
    font-size: .20rem;
    width: calc(100% / 7);
}

/* ==========================================================================================
 ____  ____   ===============================================================================
/ ___||  _ \  ===============================================================================
\___ \| |_) | ===============================================================================
 ___) |  __/  ===============================================================================
|____/|_|     ===============================================================================
========================================================================================== */
@media screen and (max-width: 768px) {
    .wrap {
        background: url('../img/cast_bg_sp.jpg') no-repeat center bottom/7.68rem auto #000;
    }
    .content-wrap {
        padding: .50rem 0 1.00rem;
    }
    /* ==================================================================
    ヒーローエリア
    ================================================================== */
    .hero-area {
        background: url('../img/cast_bg_hero_sp.png') no-repeat center top/contain;
    }
    /* ==================================================================
    キャストスタッフエリア
    ================================================================== */
    .cast_list li {
        width: calc(100% / 3);
    }
}