@charset "utf-8";

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


/* =====================================================================
*    chart
* =================================================================== */
.chart {
    padding: calc(100 / 750 * 100%) 0 calc(200 / 750 * 100%);
}

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

.chart_btn {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.chart_btn li {
    position: absolute;
    top: 0;
    left: 0;
}

.chart_btn_img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.chart_btn_frame {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.chart_id_01 {
    width: calc(205 / 900 * 100%);
    padding-top: calc(285 / 900 * 100%);
    margin: calc(335 / 900 * 100%) 0 0 calc(155 / 900 * 100%);
}

.chart_id_02 {
    width: calc(205 / 900 * 100%);
    padding-top: calc(285 / 900 * 100%);
    margin: calc(335 / 900 * 100%) 0 0 calc(510 / 900 * 100%);
}

.chart_id_03 {
    width: calc(175 / 900 * 100%);
    padding-top: calc(245 / 900 * 100%);
    margin: 0;
}

.chart_id_04 {
    width: calc(175 / 900 * 100%);
    padding-top: calc(245 / 900 * 100%);
    margin: 0 0 0 calc(695 / 900 * 100%);
}

.chart_id_05 {
    width: calc(150 / 900 * 100%);
    padding-top: calc(215 / 900 * 100%);
    margin: calc(35 / 900 * 100%) 0 0 calc(220 / 900 * 100%);
}

.chart_id_06 {
    width: calc(120 / 900 * 100%);
    padding-top: calc(185 / 900 * 100%);
    margin: calc(30 / 900 * 100%) 0 0 calc(510 / 900 * 100%);
}

.chart_id_07 {
    width: calc(120 / 900 * 100%);
    padding-top: calc(185 / 900 * 100%);
    margin: calc(520 / 900 * 100%) 0 0 calc(780 / 900 * 100%);
}

.chart_id_08 {
    width: calc(150 / 900 * 100%);
    padding-top: calc(215 / 900 * 100%);
    margin: calc(825 / 900 * 100%) 0 0 calc(670 / 900 * 100%);
}

.chart_id_09 {
    width: calc(150 / 900 * 100%);
    padding-top: calc(215 / 900 * 100%);
    margin: calc(1060 / 900 * 100%) 0 0 calc(670 / 900 * 100%);
}

.chart_id_10 {
    width: calc(120 / 900 * 100%);
    padding-top: calc(185 / 900 * 100%);
    margin: calc(1295 / 900 * 100%) 0 0 calc(685 / 900 * 100%);
}

.chart_id_11 {
    width: calc(120 / 900 * 100%);
    padding-top: calc(185 / 900 * 100%);
    margin: calc(1485 / 900 * 100%) 0 0 calc(685 / 900 * 100%);
}

.chart_id_12 {
    width: calc(120 / 900 * 100%);
    padding-top: calc(185 / 900 * 100%);
    margin: calc(1675 / 900 * 100%) 0 0 calc(685 / 900 * 100%);
}

.chart_id_13 {
    width: calc(150 / 900 * 100%);
    padding-top: calc(215 / 900 * 100%);
    margin: calc(825 / 900 * 100%) 0 0 calc(360 / 900 * 100%);
}

.chart_id_14 {
    width: calc(120 / 900 * 100%);
    padding-top: calc(185 / 900 * 100%);
    margin: calc(1060 / 900 * 100%) 0 0 calc(375 / 900 * 100%);
}

.chart_id_15 {
    width: calc(120 / 900 * 100%);
    padding-top: calc(185 / 900 * 100%);
    margin: calc(1265 / 900 * 100%) 0 0 calc(375 / 900 * 100%);
}

.chart_id_16 {
    width: calc(120 / 900 * 100%);
    padding-top: calc(185 / 900 * 100%);
    margin: calc(820 / 900 * 100%) 0 0 calc(65 / 900 * 100%);
}

.chart_id_17 {
    width: calc(150 / 900 * 100%);
    padding-top: calc(215 / 900 * 100%);
    margin: calc(1030 / 900 * 100%) 0 0 calc(50 / 900 * 100%);
}

.chart_id_18 {
    width: calc(150 / 900 * 100%);
    padding-top: calc(215 / 900 * 100%);
    margin: calc(1265 / 900 * 100%) 0 0 calc(50 / 900 * 100%);
}

.chart_id_19 {
    width: calc(110 / 900 * 100%);
    padding-top: calc(175 / 900 * 100%);
    margin: calc(1505 / 900 * 100%) 0 0 calc(15 / 900 * 100%);
}

.chart_id_20 {
    width: calc(110 / 900 * 100%);
    padding-top: calc(175 / 900 * 100%);
    margin: calc(1505 / 900 * 100%) 0 0 calc(130 / 900 * 100%);
}

.chart_id_21 {
    width: calc(110 / 900 * 100%);
    padding-top: calc(175 / 900 * 100%);
    margin: calc(1685 / 900 * 100%) 0 0 calc(15 / 900 * 100%);
}

.chart_id_22 {
    width: calc(110 / 900 * 100%);
    padding-top: calc(175 / 900 * 100%);
    margin: calc(1685 / 900 * 100%) 0 0 calc(130 / 900 * 100%);
}

.chart_box + p {
    width: calc(630/ 750 * 100%);
    margin: calc(50 / 630 * 100%) auto 0;
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
}

@media screen and (min-width:768px) {
    .chart {
        padding: calc(100 / 1200 * 100%) 0 calc(200 / 1200 * 100%);
    }

    .chart .sec_ttl {
        margin: 0 0 calc(120 / 1000 * 100%);
    }

    .chart_box {
        width: calc(900 / 1000 * 100%);
    }

    .chart_btn li {
        cursor: pointer;
    }

    .chart_box + p {
        width: 100%;
        margin: calc(80/ 1000 * 100%) auto 0;
        font-size: 2rem;
    }

}

@media screen and (min-width:1200px) {
    .chart {
        padding: 100px 0 200px;
    }
}


/* =====================================================================
*    popup
* =================================================================== */
.popup_details {
    padding: calc(80 / 690 * 100%) calc(30 / 690 * 100%);
    background: url(../images/common/bg_gray.jpg) repeat center top;
    background-size: calc(200 / 690 * 100%) auto;
}

.popup_details::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(220 / 690 * 100%);
    background: url(../images/common/bg_white.jpg) repeat center top;
    background-size: calc(200 / 690 * 100%) auto;
    position: absolute;
    top: 0;
    left: 0;
}

.chart_photo {
    width: calc(280 / 630 * 100%);
    margin: 0 auto calc(65 / 630 * 100%);
}

.chart_name {
    margin: 0 0 calc(55 / 628 * 100%);
}

.chart_name dt {
    display: block;
    padding: 0 0 1.4em;
    border-bottom: 1px solid #898989;
    color: #f5f7f8;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

.chart_name dt .chart_age {
    margin: 0 0.3em;
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: 0;
}

.chart_name2 {
    width: calc(220 / 630 * 100%);
    padding: 0.46em 0;
    background-color: #0a0404;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 calc(-30 / 630 * 100%) calc(-25 / 630 * 100%) 0;
    color: #cccdce;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
}

.chart_txt {
    color: #fcfeff;
    font-size: 2.6rem;
    line-height: 1.714;
}

@media screen and (min-width:768px) {
    .popup_details {
        padding: calc(50 / 1000 * 100%);
    }

    .popup_details::before {
        width: calc(200 / 1000 * 100%);
        height: 100%;
        padding-top: 0;
    }

    .popup_details_inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .chart_photo {
        width: calc(280 / 900 * 100%);
        margin: 0;
    }

    .chart_details {
        width: calc(570 / 900 * 100%);
        margin: 0 0 0 auto;
    }

    .chart_name {
        margin: 0 0 calc(60 / 570 * 100%);
    }

    .chart_name dt {
        padding: 0 0 1.2em;
        border-bottom: 0;
        font-size: 2.2rem;
    }

    .chart_name dt::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background-color: #898989;
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0 0 0 calc(-50 / 570 * 100%);
    }

    .chart_name dt .chart_age {
        font-size: 1.9rem;
    }

    .chart_name2 {
        width: calc(150 / 570 * 100%);
        padding: 0.55em 0;
        margin: 0 calc(-50 / 570 * 100%) calc(-20 / 570 * 100%) 0;
        font-size: 1.9rem;
    }

    .chart_txt {
        font-size: 1.5rem;
        line-height: 1.875;
    }
}

@media screen and (min-width:1200px) {}