@charset "utf-8";

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


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

.chart .sec_contents {
    width: calc(690 / 750 * 100%);
    margin: 0 auto;
}

.chart_img {
    z-index: 1;
}

.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(266 / 1000 * 100%);
    padding-top: calc(336 / 1000 * 100%);
    margin: calc(101 / 1000 * 100%) 0 0 calc(367 / 1000 * 100%);
}

.chart_id_02 {
    width: calc(266 / 1000 * 100%);
    padding-top: calc(336 / 1000 * 100%);
    margin: calc(101 / 1000 * 100%) 0 0 calc(706 / 1000 * 100%);
}

.chart_id_03 {
    width: calc(260 / 1000 * 100%);
    padding-top: calc(310 / 1000 * 100%);
    margin: calc(556 / 1000 * 100%) 0 0 calc(370 / 1000 * 100%);
}

.chart_id_04 {
    width: calc(212 / 1000 * 100%);
    padding-top: calc(254 / 1000 * 100%);
    margin: calc(912 / 1000 * 100%) 0 0 calc(394 / 1000 * 100%);
}

.chart_id_05 {
    width: calc(212 / 1000 * 100%);
    padding-top: calc(254 / 1000 * 100%);
    margin: calc(1206 / 1000 * 100%) 0 0 calc(394 / 1000 * 100%);
}

.chart_id_06 {
    width: calc(212 / 1000 * 100%);
    padding-top: calc(254 / 1000 * 100%);
    margin: calc(1026 / 1000 * 100%) 0 0 calc(734 / 1000 * 100%);
}

.chart_id_07 {
    width: calc(186 / 1000 * 100%);
    padding-top: calc(223 / 1000 * 100%);
    margin: calc(717 / 1000 * 100%) 0 0 calc(747 / 1000 * 100%);
}

.chart_id_08 {
    width: calc(186 / 1000 * 100%);
    padding-top: calc(223 / 1000 * 100%);
    margin: calc(469 / 1000 * 100%) 0 0 calc(747 / 1000 * 100%);
}

.chart_id_09 {
    width: calc(260 / 1000 * 100%);
    padding-top: calc(310 / 1000 * 100%);
    margin: calc(101 / 1000 * 100%) 0 0 calc(18 / 1000 * 100%);
}

.chart_id_10 {
    width: calc(212 / 1000 * 100%);
    padding-top: calc(254 / 1000 * 100%);
    margin: calc(487 / 1000 * 100%) 0 0 calc(42 / 1000 * 100%);
}

.chart_id_11 {
    width: calc(212 / 1000 * 100%);
    padding-top: calc(254 / 1000 * 100%);
    margin: calc(780 / 1000 * 100%) 0 0 calc(42 / 1000 * 100%);
}

@media screen and (min-width: 768px) {
    .chart .sec_ttl {
        margin: 0 0 calc(85 / 1000 * 100%);
    }
    
    .chart .sec_contents {
        width: 100%;
    }

    .chart_btn li {
        cursor: pointer;
    }
    
    .on .chart_btn_img img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.5s ease;
        transition: 0.5s ease;
    }
    
    .on.chart_btn li:hover .chart_btn_img img {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    
    .on .chart_btn_img::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: 0.5s ease;
        transition: 0.5s ease;
    }
    
    .on.chart_btn li:hover .chart_btn_img::before {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
    
    .on .chart_id_01 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo01_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_02 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo02_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_03 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo03_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_04 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo04_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_05 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo05_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_06 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo06_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_07 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo07_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_08 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo08_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_09 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo09_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
    
    .on .chart_id_10 .chart_btn_img::before {
        background: url(../images/chart/img_chart_photo10_hover.jpg) no-repeat left top;
        background-size: 100% auto;
    }
}

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


/* =====================================================================
*    popup
* =================================================================== */
.popup_details::before,
.popup_details::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(264 / 750 * 100vw) calc(97 / 750 * 100vw) 0 0;
    border-color: #ff2cb2 transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.popup_details::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
}

.popup_details_inner {
    z-index: 2;
}

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

.chart_name dt {
    display: block;
    padding: 0 0 0.2em;
    border-bottom: 2px solid #fff100;
    color: #fff;
    font-size: 4.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

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

.chart_name dt .chart_ruby {
    display: block;
    margin: 0 0 0.5em;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0;
}

.chart_name dt .chart_age {
    font-size: 3.6rem;
    font-weight: 400;
    letter-spacing: 0;
}

.chart_name2 {
    width: calc(165 / 628 * 100%);
    padding: 0.25em 0;
    background-color: #fff100;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #21252b;
    font-size: 2.8rem;
    line-height: 1;
    text-align: center;
}

.chart_name2::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff100;
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    position: absolute;
    top: 0;
    left: 0;
}

.chart_name2 span {
    z-index: 2;
    font-weight: 700;
}

.chart_details {}

.chart_photo {
    width: calc(322 / 628 * 100%);
    margin: 0 auto calc(45 / 628 * 100%);
    border: 1px solid #cececa;
}

.chart_photo::before,
.chart_photo::after {
    content: "";
    display: block;
    width: calc(60 / 322 * 100%);
    padding-top: calc(60 / 322 * 100%);
    position: absolute;
    top: -4px;
    left: -4px;
    border-top: 3px solid #fff100;
    border-left: 3px solid #fff100;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.chart_photo::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    margin: 0 -4px -4px 0;
}

.chart_txt {
    color: #f2f5ff;
    font-size: 2.6rem;
    line-height: 1.769;
    letter-spacing: -0.05em;
}

@media screen and (min-width:768px) {
    .popup_details::before,
    .popup_details::after {
        border-width: calc(264 / 1200 * 100vw) calc(97 / 1200 * 100vw) 0 0;
    }
    
    .chart_name {
        margin: 0 0 calc(25 / 958 * 100%);
    }

    .chart_name dt {
        padding: 0 0 0.25em;
        font-size: 3.6rem;
    }
    
    .chart_name dt .chart_ruby {
        font-size: 1.4rem;
    }

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

    .chart_name2 {
        width: calc(195 / 958 * 100%);
        padding: 0.33em 0;
        font-size: 2rem;
    }
    
    .chart_details {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
    
    .chart_photo {
        width: calc(322 / 958 * 100%);
        margin: 0;
    }
    
    .chart_photo::before,
    .chart_photo::after {
        width: calc(40 / 322 * 100%);
        padding-top: calc(40 / 322 * 100%);
        border-width: 2px;
        top: -3px;
        left: -3px;
    }
    
    .chart_photo::after {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        margin: 0 -3px -3px 0;
    }

    .chart_txt {
        width: calc(605 / 958 * 100%);
        font-size: 1.6rem;
        line-height: 1.75;
    }
}

@media screen and (min-width:1200px) {
    .popup_details::before,
    .popup_details::after {
        border-width: 264px 97px 0 0;
    }
}