@charset "utf-8";

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


/* =====================================================================
*    chart
* =================================================================== */
.chart {
    background-color: #fff;
}

.chart.bg_left::before {
    display: none;
}

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

.chart .sec_contents {
    width: 100%;
}

.chart_img {
    margin: calc(-85 / 750 * 100%) 0 0;
    padding: 0 0 calc(130 / 750 * 100%);
}

.chart_img::before {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 40px;
}

.chart_btn {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    margin: calc(133 / 750 * 100%) 0 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(350 / 750 * 100%);
    padding-top: calc(416 / 750 * 100%);
    margin: 0 0 0 calc(210 / 750 * 100%);
}

.chart_id_02 {
    width: calc(340 / 750 * 100%);
    padding-top: calc(320 / 750 * 100%);
    margin: calc(485 / 750 * 100%) 0 0 calc(20 / 750 * 100%);
}

.chart_id_03 {
    width: calc(340 / 750 * 100%);
    padding-top: calc(315 / 750 * 100%);
    margin: calc(1310 / 750 * 100%) 0 0 calc(20 / 750 * 100%);
}

.chart_id_04 {
    width: calc(245 / 750 * 100%);
    padding-top: calc(300 / 750 * 100%);
    margin: calc(760 / 750 * 100%) 0 0 calc(465 / 750 * 100%);
}

.chart_id_05 {
    width: calc(245 / 750 * 100%);
    padding-top: calc(280 / 750 * 100%);
    margin: calc(465 / 750 * 100%) 0 0 calc(465 / 750 * 100%);
}

.chart_id_06 {
    width: calc(190 / 750 * 100%);
    padding-top: calc(200 / 750 * 100%);
    margin: calc(1150 / 750 * 100%) 0 0 calc(560 / 750 * 100%);
}

.chart_id_07 {
    width: calc(190 / 750 * 100%);
    padding-top: calc(200 / 750 * 100%);
    margin: calc(1150 / 750 * 100%) 0 0 calc(360 / 750 * 100%);
}

.chart_id_08 {
    width: calc(245 / 750 * 100%);
    padding-top: calc(260 / 750 * 100%);
    margin: calc(1365 / 750 * 100%) 0 0 calc(465 / 750 * 100%);
}

@media screen and (min-width: 768px) {
    .chart {
        background-color: transparent;
    }

    .chart.bg_left::before {
        display: block;
    }

    .chart::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        margin: calc(720 / 1280 * 100%) 0 0;
    }

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

    .chart_box {
        margin: calc(53 / 980 * 100%) 0 0;
    }

    .chart_img {
        margin: 0;
        padding: 0 0 calc(140 / 980 * 100%);
    }

    /*
    .chart_img picture::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(122 / 980 * 100%);
        background: url(../images/chart/img_chart_pc2.png) no-repeat left top;
        background-size: 100% auto;
    }
*/

    .chart_btn {
        margin: 0;
    }

    .chart_btn li {
        cursor: pointer;
    }

    .chart_id_01 {
        width: calc(263 / 980 * 100%);
        padding-top: calc(313 / 980 * 100%);
        margin: 0 0 0 calc(226 / 980 * 100%);
    }

    .chart_id_02 {
        width: calc(260 / 980 * 100%);
        padding-top: calc(240 / 980 * 100%);
        margin: calc(405 / 980 * 100%) 0 0 calc(55 / 980 * 100%);
    }

    .chart_id_03 {
        width: calc(260 / 980 * 100%);
        padding-top: calc(235 / 980 * 100%);
        margin: calc(780 / 980 * 100%) 0 0 calc(55 / 980 * 100%);
    }

    .chart_id_04 {
        width: calc(185 / 980 * 100%);
        padding-top: calc(238 / 980 * 100%);
        margin: calc(330 / 980 * 100%) 0 0 calc(705 / 980 * 100%);
    }

    .chart_id_05 {
        width: calc(185 / 980 * 100%);
        padding-top: calc(238 / 980 * 100%);
        margin: calc(330 / 980 * 100%) 0 0 calc(440 / 980 * 100%);
    }

    .chart_id_06 {
        width: calc(143 / 980 * 100%);
        padding-top: calc(147 / 980 * 100%);
        margin: calc(660 / 980 * 100%) 0 0 calc(742 / 980 * 100%);
    }

    .chart_id_07 {
        width: calc(143 / 980 * 100%);
        padding-top: calc(147 / 980 * 100%);
        margin: calc(660 / 980 * 100%) 0 0 calc(572 / 980 * 100%);
    }

    .chart_id_08 {
        width: calc(185 / 980 * 100%);
        padding-top: calc(195 / 980 * 100%);
        margin: calc(820 / 980 * 100%) 0 0 calc(400 / 980 * 100%);
    }
}

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


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

.chart_photo figcaption {
    width: calc(82 / 330 * 100%);
    position: absolute;
    top: 0;
    right: 0;
    margin: calc(-30 / 330 * 100%) calc(-42 / 330 * 100%) 0 0;
}

.chart_name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin: 0 0 calc(40 / 630 * 100%);
    padding: calc(50 / 630 * 100%) calc(60 / 630 * 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.chart_name dt {
    color: #ffeb0d;
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1;
}

.chart_name dd {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
}

.chart_name dd::before {
    content: "：";
    display: inline-block;
    margin: 0 0.2em 0 0;
    color: #f03454;
}

.chart_details {
    margin: 0 calc(60 / 630 * 100%);
}

.chart_txt {
    color: #fff;
    font-size: 2.8rem;
    line-height: 1.714;
}

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

    .chart_name {
        margin: 0 0 calc(25 / 780 * 100%);
        padding: calc(30 / 780 * 100%) calc(50 / 780 * 100%);
    }

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

    .chart_name dd {
        font-size: 1.8rem;
    }

    .chart_details {
        margin: 0 calc(50 / 780 * 100%);
    }

    .chart_txt {
        padding: 0 0 3em;
        font-size: 1.6rem;
        line-height: 1.625;
    }
}

@media screen and (min-width:1280px) {
    .chart::after {
        margin: 720px 0 0;
    }
}


/* =====================================================================
*    comment
* =================================================================== */
.comment {
    padding: calc(150 / 750 * 100%) 0;
    background: url(../images/common/bg_gray.jpg) repeat center top;
    background-size: calc(200 / 750 * 100%) auto;
}

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

.comment_list {
    margin: calc(100 / 630 * 100%) 0 0;
}

.comment_list li:not(:last-child) {
    margin: 0 0 calc(90 / 630 * 100%);
}

.comment_box dt {
    padding: 1.3em 0;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.comment_box dt span {
    display: inline-block;
    margin: 0 0.2em;
    color: #f03454;
    font-weight: 700;
}

.comment_box dd {
    margin: 1.3em 0 0;
    font-size: 2.8rem;
    line-height: 1.714;
}

@media screen and (min-width:768px) {
    .comment {
        padding: calc(100 / 1280 * 100%) 0 calc(140 / 1280 * 100%);
        background-size: calc(200 / 1280 * 100%) auto;
    }

    .comment_ttl {
        width: calc(143 / 980 * 100%);
    }

    .comment_list {
        width: calc(780 / 980 * 100%);
        margin: calc(50 / 980 * 100%) auto 0;
    }

    .comment_list li:not(:last-child) {
        margin: 0 0 calc(40 / 780 * 100%);
    }

    .comment_box dt {
        font-size: 1.8rem;
    }

    .comment_box dd {
        font-size: 1.6rem;
        line-height: 1.625;
    }
}

@media screen and (min-width:1280px) {
    .comment {
        padding: 100px 0 140px;
        background-size: 200px auto;
    }
}