@charset "utf-8";

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

/* =====================================================================
*    performer
* =================================================================== */
.performer {
    padding: calc(120 / 750 * 100%) 0 calc(160 / 750 * 100%);
    overflow: hidden;
}

.performer::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f5ffd1;
    position: absolute;
    top: 0;
    left: 0;
    margin: calc(120 / 750 * 100%) 0 0;
}

.performer .inner::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(480 / 750 * 100%);
    background-color: #e60019;
    position: absolute;
    top: 0;
    left: 0;
}

.sec_ttl_box::before {
    content: "CAST";
    display: block;
    width: 100%;
    position: absolute;
    top: -0.19em;
    left: 0.05em;
    color: rgba(255, 255, 255, 0.2);
    font-size: 18rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
}

.performer .sec_ttl {
    letter-spacing: 0.4em;
}

.performer_sec {
    margin: calc(90 / 750 * 100%) 0 0;
    text-align: center;
}

.performer_sec:first-of-type {
    margin: calc(50 / 750 * 100%) 0 0;
}

.performer_ttl {
    display: inline-block;
    padding: 0.5em 1.2em;
    background-color: #000;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    z-index: 2;
}

.performer_box {
    width: calc(680 / 750 * 100%);
    margin: calc(-40 / 750 * 100%) auto 0;
    padding: calc(90 / 750 * 100%) calc(50 / 750 * 100%) calc(75 / 750 * 100%);
    background: url(../images/common/bg_dot_gray15.png) repeat left top #fff;
    background-size: calc(36 / 680 * 100%) auto;
    -webkit-box-shadow: calc(10 / 750 * 100vw) calc(10 / 750 * 100vw) 0 rgba(31, 37, 37, 0.25);
    box-shadow: calc(10 / 750 * 100vw) calc(10 / 750 * 100vw) 0 rgba(31, 37, 37, 0.25);
    text-align: left;
}

.performer_tab_btn li {
    padding: 0.64em 1em 0.64em 1.5em;
    border-top: 1px solid #dde2e0;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.performer_tab_btn li:last-child {
    border-bottom: 1px solid #dde2e0;
}

.performer_tab_btn li::before {
    content: "■";
    display: block;
    position: absolute;
    top: 0.64em;
    left: 0.3em;
    color: #e60019;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

.performer_tab_btn li::after {
    content: "";
    display: block;
    width: calc(20 / 580 * 100%);
    height: 100%;
    background: url(../images/common/btn_arrow2.png) no-repeat center center;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.7em;
    margin: auto 0;
}

.performer_tab_area {
    margin: calc(90 / 580 * 100%) 0 0;
}

.performer_tab_area > li {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.performer_tab_area > li.active {
    position: relative;
    opacity: 1;
}

.performer_subttl {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.performer_subttl::after {
    content: "";
    display: block;
    width: calc(160 / 580 * 100%);
    margin: 0.3em auto 0;
    padding-top: calc(4 / 580 * 100%);
    background-color: #e60019;
}

.performer_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin: calc(65 / 580 * 100%) 0 0;
}

.performer_list > li {
    width: calc(246 / 580 * 100%);
    margin: 0 calc(88 / 580 * 100%) calc(65 / 580 * 100%) 0;
}

.performer_list > li:nth-child(even) {
    margin-right: 0;
}

.tooltip dl {
    display: none;
}

@media screen and (min-width: 768px) {
    .performer {
        padding: calc(130 / 1600 * 100%) 0 calc(120 / 1600 * 100%);
    }
    
    .performer::before {
        margin: calc(130 / 1600 * 100%) 0 0;
    }
    
    .performer .inner::before {
        width: 100vw;
        padding-top: calc(480 / 1600 * 100%);
        left: 50%;
        margin-left: -50vw;
    }
    
    .performer_sec {
        margin: calc(100 / 1600 * 100%) 0 0;
    }
    
    .performer_sec:first-of-type {
        margin: calc(60 / 1600 * 100%) 0 0;
    }
    
    .performer_ttl {
        display: block;
        width: calc(520 / 1600 * 100%);
        margin: 0 auto;
        padding: 0.92em 0;
        font-size: 20px;
        line-height: 1.3em;
    }
    
    .performer_box {
        width: calc(1340 / 1600 * 100%);
        margin: calc(-34 / 1600 * 100%) auto 0;
        padding: calc(100 / 1600 * 100%) calc(100 / 1600 * 100%) calc(50 / 1600 * 100%);
        background-size: calc(36 / 1000 * 100%) auto;
        -webkit-box-shadow: calc(7 / 1600 * 100vw) calc(7 / 1600 * 100vw) 0 rgba(31, 37, 37, 0.25);
        box-shadow: calc(7 / 1600 * 100vw) calc(7 / 1600 * 100vw) 0 rgba(31, 37, 37, 0.25);
    }
    
    .performer_tab_btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    
    .performer_tab_btn li {
        width: calc(360 / 800 * 100%);
        padding: 1.4em 2em 1.4em 1.6em;
        font-size: 18px;
        border-width: 2px;
    }
    
    .performer_tab_btn li:nth-child(3),
    .performer_tab_btn li:last-child {
        border-bottom: 2px solid #dde2e0;
    }
    
    .performer_tab_btn li::before {
        top: 1.4em;
        left: 0;
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    
    .performer_tab_btn li::after {
        width: calc(20 / 360 * 100%);
        right: 1em;
    }
    
    .performer_tab_area {
        margin: calc(90 / 800 * 100%) 0 0;
    }
    
    .performer_subttl {
        font-size: 19px;
    }
    
    .performer_subttl::after {
        width: calc(95 / 800 * 100%);
        margin: 0.45em auto 0;
        padding-top: calc(4 / 800 * 100%);
    }
    
    .performer_list {
/*
        width: calc(884 / 800 * 100%);
        margin: calc(50 / 800 * 100%) 0 0 calc(-42 / 800 * 100%);
*/
        width: 100%;
        margin: calc(50 / 800 * 100%) 0 0;
    }
    
    .performer_list > li,
    .performer_list > li:nth-child(even) {
/*
        width: calc(196 / 884 * 100%);
        margin: 0 calc(33 / 884 * 100%) calc(40 / 884 * 100%) 0;
*/
        width: calc(120 / 800 * 100%);
        margin: 0 calc(50 / 800 * 100%) calc(40 / 800 * 100%) 0;
    }
    
    .performer_list > li:nth-child(5n) {
        margin-right: 0;
    }
}

@media screen and (min-width: 1200px) {
    .performer_ttl {
        width: calc(420 / 1600 * 100%);
        font-size: 24px;
    }

    .performer_subttl {
        font-size: 22px;
    }

    .performer_box {
        width: calc(1000 / 1600 * 100%);
    }

    .performer_tab_btn li {
        padding: 1.4em 2em 1.4em 2em;
    }
}

@media screen and (min-width: 1600px) {
    .performer {
        padding: 130px 0 120px;
    }
    
    .performer::before {
        margin: 130px 0 0;
    }

    .performer_ttl {
        width: calc(320 / 1600 * 100%);
    }
    
    .performer_box {
        -webkit-box-shadow: 7px 7px 0 rgba(31, 37, 37, 0.25);
        box-shadow: 7px 7px 0 rgba(31, 37, 37, 0.25);
    }
}