@charset "utf-8";

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

@media screen and (min-width: 768px) {
    .sub_wrap {
        padding-bottom: calc(145 / 1100 * 100%);
    }

    .chart::before,
    .chart::after,
    .chart .inner::after {
        content: "";
        display: block;
        width: calc(214 / 1100 * 100%);
        padding-top: calc(141 / 1100 * 100%);
        background: url(../images/common/bg_ring1.png) no-repeat left top;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 50%;
        margin: calc(329 / 1100 * 100%) 0 0 calc(461 / 1100 * 100%);
    }

    .chart::after {
        width: calc(189 / 1100 * 100%);
        padding-top: calc(126 / 1100 * 100%);
        background: url(../images/common/bg_ring2.png) no-repeat left top;
        background-size: 100% auto;
        margin: calc(910 / 1100 * 100%) 0 0 calc(-570 / 1100 * 100%);
    }

    .chart .inner::after {
        width: calc(165 / 1100 * 100%);
        padding-top: calc(125 / 1100 * 100%);
        background: url(../images/common/bg_ring3.png) no-repeat left top;
        background-size: 100% auto;
        left: auto;
        right: 0;
        margin: calc(1399 / 1100 * 100%) calc(35 / 1100 * 100%) 0 0;
    }
}

@media screen and (min-width: 1100px) {
    .sub_wrap {
        padding-bottom: 145px;
    }

    .chart::before {
        width: 214px;
        padding-top: 141px;
        margin: 329px 0 0 461px;
    }

    .chart::after {
        width: 189px;
        padding-top: 126px;
        margin: 910px 0 0 -570px;
    }
}


/* =====================================================================
*    chart
* =================================================================== */
.chart {
    padding-bottom: 0;
}

.chart_btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 104.5%;
    margin: calc(20 / 750 * 100%) 0 0 -0.9%;
}

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

.chart_id_01 {
    width: calc(260 / 1000 * 100%);
    padding-top: calc(260 / 1000 * 100%);
    margin: calc(410 / 1000 * 100%) 0 0 calc(476 / 1000 * 100%);
}

.chart_id_02 {
    width: calc(241 / 1000 * 100%);
    padding-top: calc(241 / 1000 * 100%);
    margin: calc(150 / 1000 * 100%) 0 0 calc(486 / 1000 * 100%);
}

.chart_id_03 {
    width: calc(241 / 1000 * 100%);
    padding-top: calc(241 / 1000 * 100%);
    margin: calc(690 / 1000 * 100%) 0 0 calc(486 / 1000 * 100%);
}

.chart_id_04 {
    width: calc(241 / 1000 * 100%);
    padding-top: calc(241 / 1000 * 100%);
    margin: calc(421 / 1000 * 100%) 0 0 calc(123 / 1000 * 100%);
}

.chart_id_05 {
    width: calc(160 / 1000 * 100%);
    padding-top: calc(198 / 1000 * 100%);
    margin: calc(738 / 1000 * 100%) 0 0 calc(241 / 1000 * 100%);
}

.chart_id_06 {
    width: calc(160 / 1000 * 100%);
    padding-top: calc(198 / 1000 * 100%);
    margin: calc(738 / 1000 * 100%) 0 0 calc(45 / 1000 * 100%);
}

.chart_id_07 {
    width: calc(240 / 1000 * 100%);
    padding-top: calc(240 / 1000 * 100%);
    margin: calc(992 / 1000 * 100%) 0 0 calc(484 / 1000 * 100%);
}

.chart_id_08 {
    width: calc(160 / 1000 * 100%);
    padding-top: calc(160 / 1000 * 100%);
    margin: calc(464 / 1000 * 100%) 0 0 calc(778 / 1000 * 100%);
}

.chart_id_09 {
    width: calc(160 / 1000 * 100%);
    padding-top: calc(160 / 1000 * 100%);
    margin: calc(192 / 1000 * 100%) 0 0 calc(778 / 1000 * 100%);
}

.chart_id_10 {
    width: calc(160 / 1000 * 100%);
    padding-top: calc(160 / 1000 * 100%);
    margin: calc(659 / 1000 * 100%) 0 0 calc(778 / 1000 * 100%);
}

.chart_id_11 {
    width: calc(160 / 1000 * 100%);
    padding-top: calc(160 / 1000 * 100%);
    margin: calc(830 / 1000 * 100%) 0 0 calc(778 / 1000 * 100%);
}

.chart_id_12 {
    width: calc(200 / 1000 * 100%);
    padding-top: calc(200 / 1000 * 100%);
    margin: calc(171 / 1000 * 100%) 0 0 calc(69 / 1000 * 100%);
}

@media screen and (min-width: 768px) {
    .chart {
        padding-bottom: calc(145 / 1100 * 100%);
    }

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

    .chart_img {
        -webkit-box-shadow: 0 0 calc(10 / 1100 * 100vw) rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 calc(10 / 1100 * 100vw) rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    .chart_btn {
        width: 100%;
        margin: 0;
    }

    .chart_btn li {
        cursor: pointer;
    }

    .chart_id_01 {
        width: calc(260 / 1000 * 100%);
        padding-top: calc(260 / 1000 * 100%);
        margin: calc(410 / 1000 * 100%) 0 0 calc(476 / 1000 * 100%);
    }

    .chart_id_02 {
        width: calc(241 / 1000 * 100%);
        padding-top: calc(241 / 1000 * 100%);
        margin: calc(150 / 1000 * 100%) 0 0 calc(486 / 1000 * 100%);
    }

    .chart_id_03 {
        width: calc(241 / 1000 * 100%);
        padding-top: calc(241 / 1000 * 100%);
        margin: calc(690 / 1000 * 100%) 0 0 calc(486 / 1000 * 100%);
    }

    .chart_id_04 {
        width: calc(241 / 1000 * 100%);
        padding-top: calc(241 / 1000 * 100%);
        margin: calc(421 / 1000 * 100%) 0 0 calc(123 / 1000 * 100%);
    }

    .chart_id_05 {
        width: calc(160 / 1000 * 100%);
        padding-top: calc(198 / 1000 * 100%);
        margin: calc(738 / 1000 * 100%) 0 0 calc(241 / 1000 * 100%);
    }

    .chart_id_06 {
        width: calc(160 / 1000 * 100%);
        padding-top: calc(198 / 1000 * 100%);
        margin: calc(738 / 1000 * 100%) 0 0 calc(45 / 1000 * 100%);
    }

    .chart_id_07 {
        width: calc(240 / 1000 * 100%);
        padding-top: calc(240 / 1000 * 100%);
        margin: calc(994 / 1000 * 100%) 0 0 calc(486 / 1000 * 100%);
    }

    .chart_id_08 {
        width: calc(160 / 1000 * 100%);
        padding-top: calc(160 / 1000 * 100%);
        margin: calc(464 / 1000 * 100%) 0 0 calc(778 / 1000 * 100%);
    }

    .chart_id_09 {
        width: calc(160 / 1000 * 100%);
        padding-top: calc(160 / 1000 * 100%);
        margin: calc(192 / 1000 * 100%) 0 0 calc(778 / 1000 * 100%);
    }

    .chart_id_10 {
        width: calc(160 / 1000 * 100%);
        padding-top: calc(160 / 1000 * 100%);
        margin: calc(659 / 1000 * 100%) 0 0 calc(778 / 1000 * 100%);
    }

    .chart_id_11 {
        width: calc(160 / 1000 * 100%);
        padding-top: calc(160 / 1000 * 100%);
        margin: calc(830 / 1000 * 100%) 0 0 calc(778 / 1000 * 100%);
    }

    .chart_id_12 {
        width: calc(200 / 1000 * 100%);
        padding-top: calc(200 / 1000 * 100%);
        margin: calc(171 / 1000 * 100%) 0 0 calc(69 / 1000 * 100%);
    }
}

@media screen and (min-width: 1100px) {
    .chart {
        padding-bottom: 145px;
    }

    .chart_img {
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
}


/* =====================================================================
*    .popup
* =================================================================== */
.chart_photo {
    width: calc(320 / 450 * 100%);
    margin: 0 auto calc(50 / 450 * 100%);
}

.chart_details {}

.chart_name {
    margin: 0 0 calc(25 / 450 * 100%);
}

.chart_name dt {
    display: inline-block;
    color: #c43159;
    font-size: 3.8rem;
    font-weight: 700;
    line-height: 1;
}

.chart_name dt::after {
    content: "／";
    display: inline-block;
    color: #d9c86c;
    margin: 0 0.3em;
}

.chart_name dt span {
    display: inline-block;
    font-weight: 700;
}

.chart_age {
    font-size: 2.4rem;
    font-weight: 700;
}

.chart_name2 {
    display: inline-block;
    color: #c43159;
    font-size: 3rem;
    line-height: 1;
}

.chart_name2_wide {
    display: block;
    margin: 0.5em 0 0;
    line-height: 1.4;
}

.chart_txt {
    font-size: 2.4rem;
    line-height: 1.667;
}

@media screen and (min-width:768px) {
    .chart_photo {
        width: calc(260 / 740 * 100%);
        margin: 0;
    }

    .chart_details {
        width: calc(430 / 740 * 100%);
    }

    .chart_name {
        margin: calc(30 / 430 * 100%) 0;
    }

    .chart_name dt {
        font-size: 2.8rem;
    }

    .chart_age {
        font-size: 1.6rem;
    }

    .chart_name2 {
        font-size: 2rem;
    }
    
    .chart_name2_wide {
        margin: 0.6em 0 0;
        line-height: 1;
    }

    .chart_txt {
        font-size: 1.6rem;
        line-height: 1.75;
    }
}

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