@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : cast.css
Description :
===================================================================== */

.cast_staff {
    padding: calc(100 / 750 * 100%) 0;
    background-color: #ffe822;
}

.cast_staff::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(235 / 750 * 100%);
    background: url(../images/common/line_tate_white.png) repeat left top;
    background-size: calc(20 / 750 * 100%) auto;
    position: absolute;
    left: 0;
    bottom: 0;
}

.cast_staff .inner {
    z-index: 2;
}

.cast_staff .sec_ttl {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto calc(80 / 750 * 100%);
}

.cast_staff .sec_ttl::before, .cast_staff .sec_ttl::after {
    margin: 0;
}

.cast_staff .sec_ttl span {
}

.cast_staff .sec_ttl .sec_ttl_dot {
    position: relative;
    font-size: 85%;
    font-family: 'Libre Franklin', sans-serif;
    top: -0.25em;
    left: -0.05em;
}

.cast_staff .sec_subttl::before, .cast_staff .sec_subttl::after {
    background: url(../images/common/bg_subttl_red.png) no-repeat left top;
    background-size: 100% auto;
}

@media screen and (min-width: 768px) {
    .cast_staff {
        padding: calc(100 / 1100 * 100%) 0;
    }
    
    .cast_staff::after {
        padding-top: calc(200 / 1100 * 100%);
        background-size: calc(10 / 1100 * 100%) auto;
    }
    
    .cast_staff .sec_ttl {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0 0 calc(95 / 1100 * 100%);
    }
    
    .cast_staff .sec_ttl::before {
        margin: 0 calc(34 / 1100 * 100%) 0 0;
    }
    
    .cast_staff .sec_ttl::after {
        margin: 0 0 0 calc(34 / 1100 * 100%);
    }
    
    .cast_staff .sec_subttl::before, .cast_staff .sec_subttl::after {
        width: calc(40 / 1100 * 100%);
        padding-top: calc(34 / 1100 * 100%);
        margin: 0 calc(40 / 1100 * 100%) 0 0;
    }
    
    .cast_staff .sec_subttl::after {
        margin: 0 0 0 calc(40 / 1100 * 100%);
    }
    
    .cast_staff .sec_subttl {
        font-size: 4.5rem;
        margin: 0 0 calc(40 / 1100 * 100%);
        padding: 0 0 calc(40 / 1100 * 100%);
    }
    
    .cast_staff .sec_subttl span {
        font-size: 2.5rem;
    }
}

@media screen and (min-width: 1100px) {
    .cast_staff {
        padding: 100px 0;
    }
    
    .cast_staff::after {
        padding-top: 200px;
        background-size: 10px auto;
    }
}

/* =====================================================================
*    cast
* =================================================================== */
.cast .sec_subttl {
    margin: 0 0 calc(54 / 750 * 100%);
    letter-spacing: -1px;
}

.cast_list {
    padding: 0 0 calc(120 / 750 * 100%);
    z-index: 2;
}

.cast_list > li {
    margin: 0 0 calc(77 / 750 * 100%);
}

.cast_list > li:last-child {
    margin: 0;
}

.cast_list > li.cast_line {
    margin: 0 0 calc(65 / 750 * 100%);
}

.cast_line::after {
    content: "";
    display: block;
    width: calc(60 / 750 * 100%);
    margin: calc(60 / 750 * 100%) auto;
    padding-top: calc(4 / 750 * 100%);
    background-color: #e5004f;
}

.cast_name {
    width: calc(690 / 750 * 100%);
    padding: calc(50 / 750 * 100%) calc(60 / 750 * 100%) calc(25 / 750 * 100%);
    background-color: #fff;
}

.cast_name::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/line_naname_white.png) repeat left top;
    background-size: calc(14 / 690 * 100%) auto;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(20 / 690 * 100%) 0 0 calc(20 / 690 * 100%);
}

.cast_name dt {
    font-size: 4.6rem;
    font-weight: 700;
    line-height: 1;
}

.cast_name dt span {
    font-size: 70%;
    font-weight: 700;
    margin: 0 0 0 0.4em;
}

.cast_name1 {
    display: inline-block;
    color: #888;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 calc(60 / 690 * 100%) calc(25 / 690 * 100%) 0;
}

.cast_name2 {
    display: block;
    width: calc(280 / 690 * 100%);
    color: #fff;
    font-size: 3.3rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    background-color: #000;
    padding: 0.5em 0 0.6em;
    position: absolute;
    top: 0;
    right: 0;
    margin: calc(-25 / 690 * 100%) calc(-60 / 690 * 100%) 0 0;
}

.cast_name2.cast_wide {
    width: calc(310 / 690 * 100%);
}

.cast_name2 span {
    font-size: 70%;
    font-weight: 700;
    top: 0.05em;
}

@media screen and (min-width: 768px) {
    .cast .sec_subttl {
        margin: 0 0 calc(40 / 1100 * 100%);
    }
    
    .cast_list {
        padding: 0 0 calc(90 / 1100 * 100%);
    }
    
    .cast_list > li {
        margin: 0 0 calc(40 / 1100 * 100%);
    }
    
    .cast_list > li.cast_line {
        margin: 0 0 calc(50 / 1100 * 100%);
    }
    
    .cast_line::after {
        width: calc(60 / 1100 * 100%);
        margin: calc(50 / 1100 * 100%) auto;
        padding-top: calc(4 / 1100 * 100%);
    }
    
    .cast_name {
        width: calc(610 / 1100 * 100%);
        margin: 0 auto 0 calc(225 / 1100 * 100%);
        padding: calc(40 / 1100 * 100%) calc(30 / 1100 * 100%) calc(20 / 1100 * 100%) calc(60 / 1100 * 100%);
    }
    
    .cast_name::before {
        margin: calc(10 / 610 * 100%) 0 0 calc(10 / 610 * 100%);
        background-size: calc(7 / 610 * 100%) auto;
    }
    
    .cast_name dt {
        font-size: 2.9rem;
    }
    
    .cast_name1 {
        font-size: 1.4rem;
        margin: 0 calc(30 / 610 * 100%) calc(17 / 610 * 100%) 0;
    }
    
    .cast_name2 {
        width: calc(250 / 610 * 100%);
        margin: calc(-10 / 610 * 100%) calc(-40 / 610 * 100%) 0 0;
        padding: 0.7em 0 0.8em;
        font-size: 2rem;
    }
    
    .cast_name2.cast_wide {
        width: calc(250 / 610 * 100%);
    }
    
    .cast_name2 span {
        font-size: 100%;
    }
}


/* =====================================================================
*    staff
* =================================================================== */
.staff_list {
    width: calc(630 / 750 * 100%);
    margin: 0 auto calc(50 / 750 * 100%);
}

.staff_list li {
    margin: 0 0 calc(30 / 630 * 100%);
}

.staff_list li:last-child {
    margin: 0;
}

.staff_list li::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/common/line_naname_white.png) repeat left top;
    background-size: calc(14 / 630 * 100%) auto;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(20 / 630 * 100%) 0 0 calc(20 / 630 * 100%);
}

.staff_list li dl {
    padding: calc(30 / 630 * 100%) calc(50 / 630 * 100%) calc(25 / 630 * 100%);
    background-color: #fff;
}

.staff_list dd:last-child {
    margin: 0;
}

.staff_name1 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 4%;
}

.staff_name2 {
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.5;
    position: absolute;
    top: 0;
    right: 0;
    margin: calc(30 / 630 * 100%) calc(50 / 630 * 100%) 0 0;
}

.staff_name3 {
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 0 4%;
}

.staff_name3::before {
    content: "";
    display: block;
    width: calc(33 / 530 * 100%);
    height: 2px;
    background-color: #e5004f;
    margin: 0 0 1.5%;
}

.staff_name3 span {
    font-size: 65%;
}

.staff_comment {
    width: calc(630 / 750 * 100%);
    margin: 0 auto;
    padding: calc(80 / 750 * 100%) 0;
    background-color: #fff;
}

.staff_comment_ttl {
    width: calc(530 / 630 * 100%);
    margin: 0 auto calc(70 / 630 * 100%);
    font-size: 3.8rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.staff_comment_ttl::before,
.staff_comment_ttl::after {
    content: "";
    display: block;
    width: calc(60 / 530 * 100%);
    padding-top: calc(40 / 530 * 100%);
    background: url(../images/common/bg_three_line_left.png) no-repeat left top;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
}

.staff_comment_ttl::after {
    background: url(../images/common/bg_three_line_right.png) no-repeat left top;
    background-size: 100% auto;
    left: auto;
    right: 0;
}

.staff_comment_photo {
    width: calc(360 / 630 * 100%);
    margin: 0 auto calc(55 / 630 * 100%);
}

.staff_comment_details {
    width: calc(470 / 630 * 100%);
    margin: 0 auto 4%;
    border-bottom: 1px solid #ccc;
}

.staff_comment_details .staff_name2 {
    margin: 0;
}

.staff_comment_txt {
    width: calc(470 / 630 * 100%);
    margin: 0 auto;
    font-size: 2.7rem;
    font-weight: 400;
    line-height: 1.7;
}

.staff_comment_txt p {
    margin: 0 0 8%;
}

.staff_comment_txt p:last-child {
    margin: 0;
}

@media screen and (min-width: 768px) {
    .staff {
        background-size: calc(10 / 1100 * 100%) auto;
    }
    
    .staff .inner {
        padding: 0 0 calc(100 / 1100 * 100%);
    }
    
    .staff .sec_ttl {
        padding-bottom: calc(50 / 1100 * 100%);
    }
    
    .staff_list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: calc(800 / 1100 * 100%);
        margin: 0 auto;
    }
    
    .staff_list li {
        width: calc(385 / 800 * 100%);
        margin: 0 0 calc(30 / 800 * 100%);
    }
    
    .staff_list li:last-child {
        margin: 0 0 calc(30 / 800 * 100%);
    }
    
    .staff_list li::before {
        margin: calc(10 / 385 * 100%) 0 0 calc(10 / 385 * 100%);
        background-size: calc(7 / 385 * 100%) auto;
    }
    
    .staff_list li.staff_wide::before {
        margin: calc(10 / 800 * 100%) 0 0 calc(10 / 800 * 100%);
        background-size: calc(7 / 800 * 100%) auto;
    }
    
    .staff_list li dl {
        padding: calc(15 / 385 * 100%) calc(30 / 385 * 100%) calc(15 / 385 * 100%);
    }
    
    .staff_list li.staff_wide dl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: calc(15 / 800 * 100%) calc(30 / 800 * 100%) calc(15 / 800 * 100%);
    }
    
    li.staff_left {
        margin-right: calc(30 / 800 * 100%);
    }
    
    li.staff_wide {
        width: 100%;
    }
    
    .staff_name1 {
        font-size: 1.6rem;
    }
    
    .staff_wide .staff_name1 {
        width: 100%;
        margin: 0 0 1.75%;
    }
    
    .staff_name2 {
        font-size: 1.6rem;
        margin: calc(15 / 385 * 100%) calc(30 / 385 * 100%) 0 0;
    }
    
    .staff_wide .staff_name2 {
        margin: calc(15 / 800 * 100%) calc(30 / 800 * 100%) 0 0;
    }
    
    .staff_name3 {
        font-size: 2.5rem;
    }
    
    .staff_wide .staff_name3 {
        margin: 0 calc(60 / 800 * 100%) 0 0;
    }
    
    .staff_name3::before {
        width: 0.8em;
        margin: 0 0 0.2em;
    }
    
    .staff_comment {
        width: calc(800 / 1100 * 100%);
        padding: calc(50 / 1100 * 100%) calc(60 / 1100 * 100%);
    }
    
    .staff_comment_ttl {
        width: auto;
        margin: 0 auto calc(50 / 680 * 100%);
        font-size: 2.4rem;
    }
    
    .staff_comment_ttl::before,
    .staff_comment_ttl::after {
        width: calc(40 / 680 * 100%);
        padding-top: calc(27 / 680 * 100%);
    }
    
    .staff_comment_ttl::after {
        background: url(../images/common/bg_three_line_left.png) no-repeat left top;
        background-size: 100% auto;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .staff_comment_photo {
        width: calc(240 / 680 * 100%);
    }
    
    .staff_comment_details {
        width: 100%;
        margin: 0 auto 3.5%;
    }
    
    .staff_comment_details .staff_name1 {
        margin: 0 0 1.7%;
    }
    
    .staff_comment_details .staff_name3 {
        margin: 0 0 1.7%;
    }
    
    .staff_comment_txt {
        width: 100%;
        font-size: 1.6rem;
    }
    
    .staff_comment_txt p {
        margin: 0 0 4%;
    }
}

@media screen and (min-width: 1100px) {
    .staff {
        background-size: 10px auto;
    }
    
    .staff .inner {
        padding: 0 0 100px;
    }
}