.result-score__row {
    border-radius: 3px;
    -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, .08);
    box-shadow: 0 0 40px rgba(0, 0, 0, .08);
    margin-top: clamp(25px, 25px + (100vw - 576px) * (30 - 25) / (1140 - 576), 30px);
    padding: clamp(20px, 20px + (100vw - 576px) * (40 - 20) / (1140 - 576), 40px) clamp(15px, 15px + (100vw - 576px) * (40 - 15) / (1140 - 576), 40px);
}
    .princeple-sub-title-m{
        display: none;
    }

    .score-detail2-g {
        height: 330px;
        margin-top: 80px;
        position: relative;
    }

    .fare-calendar .fare-rates {
        position: relative;
    }

    .fare-calendar .fare-rates .bar-graph_licontainer {
        color: #092a5e;
        /*display:table-cell;*/
        text-align: center;
    }

    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li {
        margin: 0 4px;
        /*vertical-align: bottom;*/
        display: inline-block;
        width: 88px;
        text-align: center;
    }

    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li a,
    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li span {
        display: block;
    }

    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li span:first-of-type {
        margin-bottom: 7px;
    }

    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li span:last-of-type {
        margin: 10px 0 7px;
    }

    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li button.btn2 {
        width: 60px;
        padding-left: 0;
        padding-right: 0;
    }

    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li span.bar-graph_s {
        min-height: 20px;
        background-color: #6baddf;
        background-image: linear-gradient(0deg, rgba(164, 234, 220, 1), rgba(136, 210, 255, 1) 49%, rgba(107, 173, 223, 1));
        transform-origin: 100% 100%;
        -webkit-animation: priceAnimation 0.5s 1 ease-in-out;
        -moz-animation: priceAnimation 0.5s 1 ease-in-out;
        -o-animation: priceAnimation 0.5s 1 ease-in-out;
        border-radius: 3px;
        /*                        -webkit-transition: all 0.5s 1 ease-in-out;
  -moz-transition: all 0.5s 1 ease-in-out;
  -o-transition: all 0.5s 1 ease-in-out; */
    }

    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li span.bar-graph_s.rank {
        background-color: #EF3D84;
        background-color: #a4eadc;
        background-image: linear-gradient(0deg, rgb(255 206 233), rgb(254 200 227) 49%, #ffa7af);
    }


    .fare-calendar .fare-rates .bar-graph_licontainer .bar-graph_li span.bar-graph_s.rank:hover {
        background-color: #C13773;
        cursor: pointer;
    }

    .result-score__explanation {
        position: relative;
    }

    #map-container {
        position: relative;
        display: inline-block; /* 컨테이너를 이미지 크기에 맞춤 */
    }

    #map {
        width: 100%; /* 이미지의 크기가 부모인 컨테이너에 맞게 조정됨 */
        height: auto;
    }


    .chart_container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .meter_re {
        position: relative;
    }

    .score-detail-page .your-risk_score img.meter01 {
        width: 500px;
    }

    .meter_ab {
        position: absolute;
        top: 0;
        width: 500px;
    }

    .meter_ab2 {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 14px;
        line-height: 1.2em;
    }

    .score-detail-page .your-risk_score img.meter_cap {
        width: 50px;
    }

    .ggtype {
        color: #6baddf;
    }

    .gttype {
        color: #88d2ff;
    }

    .gt2type {
        color: #a4eadc;
    }

    .mb20 {
        margin-bottom: 20px;
    }

    /* ここから横バー */
    h6 {
        font-size: .8em;
        padding: 0 0 .5em;
        color: #919191;
    }

    figure {
        margin: 0 auto;
        max-width: 1100px;
        position: relative;
    }

    .row_s {
        margin-bottom: 1.5em;
    }

 


    @keyframes expand {
        from {
            width: 0%;
        }

        to {
            width: 100%;
        }
    }

    @media screen and (min-width: 768px) {
        @keyframes expand {
            from {
                width: 0%;
            }

            to {
                width: 100%;
            }
        }

       
    }

    @media (max-width: 768px) {
       

        .item.empty {
            display : none; /* 공간은 차지하되 보이지 않음 */
        }
    }

    .chart_s {
        overflow: hidden;
        width: 0%;
        animation: expand 1.5s ease forwards;
    }

    .row_s + .row_s .chart_s {
        animation-delay: .2s;
    }

    .row_s + .row_s + .row_s .chart_s {
        animation-delay: .4s;
    }

    .block_s {
        display: block;
        height: 60px;
        color: #fff;
        font-size: .75em;
        float: left;
        background-color: #6baddf;
        position: relative;
        overflow: hidden;
        opacity: 1;
        transition: opacity, .3s ease;
        cursor: pointer;
    }

    .block_s:nth-of-type(2),
    .legend_s li:nth-of-type(2):before {
        background-color: #88d2ff;
        color: #4f4a4a;
    }

    .block_s:nth-of-type(3),
    .legend_s li:nth-of-type(3):before {
        background-color: #a4eadc;
        color: #4f4a4a;

    }


    .block_s:hover {
        opacity: .65;
    }

    .value_s {
        display: block;
        line-height: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%);
        font-family: 'Outfit';
        font-size: 24px;
    }

    .x-axis {
        text-align: center;
        padding: .5em 0 2em;
    }

    .y-axis {
        height: 20px;
        transform: translate(-32px, 170px) rotate(270deg);
        position: absolute;
        left: 0;
    }

    .legend_s {
        margin: 0 auto;
        padding: 0;
        font-size: .9em;
    }

    .legend_s li {
        display: inline-block;
        padding: .25em 1em;
        line-height: 1em;
    }

    .legend_s li:before {
        content: "";
        margin-right: .5em;
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #6baddf;
    }

    .princeple-sub-title{
        margin-top: -18px;
        padding-top: 0px;
        margin-left: 130px;
    }

    @media screen and (min-width: 768px) {
        h6 {
            padding: 0;
            width: 75px;
            float: left;
            line-height: 100px;
        }

        .block_s {
            font-size: 1em;
            height: 100px;
        }

        .legend_s {
            width: 50%;
        }
        
       
    }

    @media screen and (max-width: 768px) {
        .value_s {
            font-size: 14px;
        }

        .princeple-sub-title{
            display: none;
        }
        .princeple-sub-title-m{
            display: block;
        }

        .rs-content{
            text-align: left;
        }
    }


    /* 円グラフ */


    #chart {
        display: flex;
        /* 円グラフと凡例を横並びに */
        flex-wrap: wrap;
        /* 折り返しを許可しておかないと、画面幅縮小により円グラフが縦長に変形されるため */
        justify-content: center;
        padding-top: 20px;
    }

    .result-score__rationale {
        display: flex; /* Flexbox を有効化 */
        flex-wrap: wrap; /* 折り返しを許可 */
        gap: 40px; /* 要素間の余白 */
        justify-content: space-between; /* 要素を均等配置 */
    }

    .result-score__rationale > div {
        flex: 1 1 calc(50% - 20px); /* 1行に2つ表示。余白を考慮して調整 */
        box-sizing: border-box; /* パディングやボーダーを含めた幅計算 */
    }

    .pie_s {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 10px 0 0 10px;
    }

    .chart-top {
        display: flex;
        /* 円グラフと凡例を横並びに */
        flex-wrap: wrap;
        /* 折り返しを許可しておかないと、画面幅縮小により円グラフが縦長に変形されるため */
        justify-content: center;
        padding-top: 20px;
    }

    #chart2 {
        display: flex;
        /* 円グラフと凡例を横並びに */
        flex-wrap: wrap;
        /* 折り返しを許可しておかないと、画面幅縮小により円グラフが縦長に変形されるため */
        justify-content: center;
        padding-top: 20px;
    }

    /* ここが円グラフになるセレクター、グラデーション設定はjQueryのCSSメソッドで行いますので記述しておりません。 */
    .circle {
        margin-top: 10px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    #circle2 {
        margin-top: 10px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
    }

    /* 凡例表示箇所 */
    .pie_s {
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 10px 0 0 10px;
    }

    .answer {
        margin-bottom: 0;
        margin-right: 10px;
        margin-left: 10px;
        font-family: 'Outfit';
        color: #4f4a4a;
    }

    .pie_s .pie_s_li {
        margin: 3px 0 0;
        list-style: none;
        /* 凡例で色を示すboxを作成しているため、ない方がいいでしょう。 */
        display: flex;
        align-items: center;
    }

    .box_pie_s {
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .pie_s_li {
        font-family: 'Outfit';
        color: #4f4a4a;
    }

    /* 
以降で円グラフの凡例で表示する各項目の色を決めておきます。
JSファイルでこれらの色を使用します。
*/

    .pie_s_li:nth-child(1) .box_pie_s {
        background: #6baddf;
    }

    .pie_s_li:nth-child(2) .box_pie_s {
        background: #88d2ff;
    }

    .pie_s_li:nth-child(3) .box_pie_s {
        background: #a4eadc;
    }

    .pie_s_li:nth-child(4) .box_pie_s {
        background: #c6def1;
    }

    .pie_s_li:nth-child(5) .box_pie_s {
        background: #f2c6de;
    }

    .pie_s_li:nth-child(6) .box_pie_s {
        background: #f7d9c4;
    }


    .ch_box {
    }

    .box_1_p {
        position: absolute;
        top: 6%;
        left: 3.2%;
        width: 10%;
        height: 14%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_1_q {
        position: absolute;
        top: 20.5%;
        left: 3.2%;
        width: 10%;
        height: 14.5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_2_p {
        position: absolute;
        top: 9.4%;
        left: 14.8%;
        width: 10%;
        height: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_2_q {
        position: absolute;
        top: 21%;
        left: 14.8%;
        width: 10%;
        height: 13%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_3_p {
        position: absolute;
        top: 11.5%;
        left: 26.7%;
        width: 10%;
        height: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_3_q {
        position: absolute;
        top: 23.7%;
        left: 26.7%;
        width: 10%;
        height: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_4_p {
        position: absolute;
        top: 15.6%;
        left: 38.5%;
        width: 10%;
        height: 6.5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_4_q {
        position: absolute;
        top: 23.7%;
        left: 38.5%;
        width: 10%;
        height: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_5_p {
        position: absolute;
        top: 16.5%;
        left: 50.4%;
        width: 10%;
        height: 6%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_5_q {
        position: absolute;
        top: 23.7%;
        left: 50.4%;
        width: 10%;
        height: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_6_p {
        position: absolute;
        top: 16.5%;
        left: 62.2%;
        width: 10%;
        height: 6%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_6_q {
        position: absolute;
        top: 23.7%;
        left: 62.2%;
        width: 10%;
        height: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_7_p {
        position: absolute;
        top: 20%;
        left: 74.05%;
        width: 10%;
        height: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_7_q {
        position: absolute;
        top: 25.7%;
        left: 74.05%;
        width: 10%;
        height: 8.7%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_8_p {
        position: absolute;
        top: 21%;
        left: 85.9%;
        width: 10%;
        height: 4.3%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_8_q {
        position: absolute;
        top: 25.7%;
        left: 85.9%;
        width: 10%;
        height: 8.7%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_9_p {
        position: absolute;
        top: 48%;
        left: 2.9%;
        width: 10%;
        height: 3.7%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_9_q {
        position: absolute;
        top: 53.2%;
        left: 2.9%;
        width: 10%;
        height: 7%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_10_p {
        position: absolute;
        top: 48.5%;
        left: 14.8%;
        width: 10%;
        height: 3.7%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_10_q {
        position: absolute;
        top: 53.2%;
        left: 14.8%;
        width: 10%;
        height: 7%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .box_11_p {
        position: absolute;
        top: 49.5%;
        left: 26.7%;
        width: 10%;
        height: 4%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_11_q {
        position: absolute;
        top: 55.15%;
        left: 26.7%;
        width: 10%;
        height: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_12_p {
        position: absolute;
        top: 49.4%;
        left: 38.5%;
        width: 10%;
        height: 4%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_12_q {
        position: absolute;
        top: 54.3%;
        left: 38.5%;
        width: 10%;
        height: 6%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_13_p {
        position: absolute;
        top: 49.6%;
        left: 50.4%;
        width: 10%;
        height: 3.5%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_13_q {
        position: absolute;
        top: 54.3%;
        left: 50.4%;
        width: 10%;
        height: 6%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_14_p {
        position: absolute;
        top: 49.6%;
        left: 62.2%;
        width: 10%;
        height: 3.5%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_14_q {
        position: absolute;
        top: 54.1%;
        left: 62.2%;
        width: 10%;
        height: 6%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_15_p {
        position: absolute;
        top: 49.6%;
        left: 74.05%;
        width: 10%;
        height: 3.5%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_15_q {
        position: absolute;
        top: 54.1%;
        left: 74.05%;
        width: 10%;
        height: 6%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_16_p {
        position: absolute;
        top: 51.7%;
        left: 85.9%;
        width: 10%;
        height: 3.6%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_16_q {
        position: absolute;
        top: 56%;
        left: 85.9%;
        width: 10%;
        height: 4%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_17_p {
        position: absolute;
        top: 77%;
        left: 2.9%;
        width: 10%;
        height: 3.6%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_17_q {
        position: absolute;
        top: 82%;
        left: 2.9%;
        width: 10%;
        height: 4%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_18_p {
        position: absolute;
        top: 78%;
        left: 14.5%;
        width: 10%;
        height: 3.6%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_18_q {
        position: absolute;
        top: 82.7%;
        left: 14.5%;
        width: 10%;
        height: 3.5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_19_p {
        position: absolute;
        top: 79.5%;
        left: 26%;
        width: 10%;
        height: 3.6%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_19_q {
        position: absolute;
        top: 83.8%;
        left: 26%;
        width: 10%;
        height: 2.6%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .box_20_p {
        position: absolute;
        top: 79.5%;
        left: 37.7%;
        width: 10%;
        height: 3.6%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_20_q {
        position: absolute;
        top: 83.8%;
        left: 37.7%;
        width: 10%;
        height: 2.8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_21_p {
        position: absolute;
        top: 79.5%;
        left: 49.2%;
        width: 10%;
        height: 3.6%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_21_q {
        position: absolute;
        top: 83.6%;
        left: 49.2%;
        width: 10%;
        height: 2.8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_22_p {
        position: absolute;
        top: 79.5%;
        left: 60.9%;
        width: 10%;
        height: 3.6%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_22_q {
        position: absolute;
        top: 83.7%;
        left: 60.9%;
        width: 10%;
        height: 2.8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_23_p {
        position: absolute;
        top: 72.5%;
        left: 74.5%;
        width: 10%;
        height: 4.5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .box_23_q {
        position: absolute;
        top: 78%;
        left: 74.5%;
        width: 10%;
        height: 9%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .box_24_p {
        position: absolute;
        top: 75%;
        left: 85.9%;
        width: 10%;
        height: 5%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
    }

    .box_24_q {
        position: absolute;
        top: 80.2%;
        left: 85.9%;
        width: 10%;
        height: 6%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

 

    .ch_box img {
        width: 100%;
        height: auto;
        margin-bottom: 0%;
        filter: none;
        /*filter: invert(50%) sepia(100%) saturate(1000%) hue-rotate(180deg);*/
    }


    
img.mushi {
    width: 70px;
    height: auto;
    margin-right: 15px;
}

.detail_h1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    padding: 40px auto;
    color: #0a3163;
    display: inline-flex;
    align-items: center;
}

.detail_h2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    margin: 40px auto 5px auto;
    color: #0a3163;
    display: inline-flex;
    align-items: center;
    padding-left:40px;
}
.datail-img{
width: 400px;
padding-bottom: 0;
}
.alignleft, div.alignleft {
    margin: 0px;
    padding: 0px 15px 15px 0px;
    float: left;
}
@media screen and (max-width: 768px) {
    img.mushi {
        width: 50px;
        height: auto;
        margin-right: 0px;
    }

    .detail_h1 {
        font-size: 20px;
        padding: 15px auto;
    }

    .detail_h2 {
        font-size: 20px;
    margin: 30px auto 15px auto;
        padding-left:15px;
    }
}

@media screen and (max-width: 500px) {
.datail-img{
padding-right: 0;
width: 100%;
}
}


.inner-div-center {
    max-width: 1255px;
    margin: 0 auto;
    padding: 0;
    line-height: 1.8;
}

h3 {
  all: revert;
}


.result-detail__explanation table th {
    width: 150px;
    font-weight: bold;
}

.result-detail__explanation table th, .result-detail__explanation table td {
    text-align: left;
}



.roots_chromosome {
    color: #011772;
  }
  .roots_chromosome_01 {
    color: #41c0c0;
  }
  
  .roots_chromosome_02 {
    color: #ffff00;
  }
  
  .roots_chromosome_03 {
    color: #ff0000;
  }
  
  .roots_chromosome_04 {
    color: #1b1464;
  }
  
  .roots_chromosome_05 {
    color: #c69c6d;
  }
  
  .roots_chromosome_06 {
    color: #006837;
  }
  
  .roots_chromosome_07 {
    color: #c26ac4;
  }
  
  .roots_chromosome_08 {
    color: #f15a24;
  }
  
  .roots_chromosome_09 {
    color: #8cc63f;
  
  }