@charset "UTF-8";

/* MV */
.p-mv {
    margin-bottom: calc((100vw / var(--vw-large))*150);
}

.p-risk {
    position: relative;

    .m0 {
        margin-bottom: 0 !important;
    }

    .p0 {
        padding-bottom: 0 !important;
    }

    .green {
        font-weight: bold;
        color: #00A310;
    }

    .sky {
        color: #007FC3;
    }

    .p-feature__intro__header,
    .p-feature__outro__header {
        text-align: left;
        margin-bottom: calc((100vw / var(--vw-large))*56);

        .en {
            font-size: calc((100vw / var(--vw-large))*15);
            font-family: var(--font-en);
            color: var(--color-primary-light);
            font-weight: bold;
            margin-bottom: calc((100vw / var(--vw-large))*10);
            font-style: italic;

        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*30);
            font-weight: 900;
            text-align: left;
        }

        .c-section-title-underline {
            display: block;
            width: calc((100vw / var(--vw-large)) * 158);
            /* 線の長さ */
            height: 3px;
            /* 線の太さ */
            /* 修正箇所: グラデーションで2色を半分ずつ表現 */
            background: linear-gradient(to right, #00A310 50%, #93D500 50%);
            margin-top: calc((100vw / var(--vw-large)) * 10);
        }

        p {
            margin-top: calc((100vw / var(--vw-large))*31);
        }
    }

    .p-feature__outro__header {
        width: calc((100vw / var(--vw-large)) * 1000);
        margin: 0 auto calc((100vw / var(--vw-large))*48);

        .c-section-title-underline {
            width: calc((100vw / var(--vw-large)) * 82);

        }

    }

    .p-risk-detail {
        /* 上下の余白 */

        /* コンテナ: 画面幅1360pxのとき1000px幅 */
        .p-risk-detail__container {}

        /* 上部ナビゲーションエリア */
        .p-risk-nav {
            margin: 0 auto calc((100vw / var(--vw-large))*76);
            width: calc((100vw / var(--vw-large)) * 1000);

            /* --- ヘッダーエリア --- */

            .p-risk__intro__header {
                text-align: left;
                margin-bottom: calc((100vw / var(--vw-large))*56);

                h2 {
                    font-size: calc((100vw / var(--vw-large))*30);
                    font-weight: 900;
                    text-align: left;
                }

                .c-section-title-underline {
                    display: block;
                    width: calc((100vw / var(--vw-large)) * 158);
                    /* 線の長さ */
                    height: 3px;
                    /* 線の太さ */
                    /* 修正箇所: グラデーションで2色を半分ずつ表現 */
                    background: linear-gradient(to right, #00A310 50%, #93D500 50%);
                    margin-top: calc((100vw / var(--vw-large)) * 10);
                }

            }

            h3 {
                width: calc((100vw / var(--vw-large))*657);
                margin: 0 auto calc((100vw / var(--vw-large))*30);
                font-size: calc((100vw / var(--vw-large))*25);
                background-color: initial;
                color: var(--color-text-body);
                padding: 0 0 0 calc((100vw / var(--vw-large))*22);
                position: relative;
                text-align: left;

                &::before {
                    content: '';
                    /* 内容は空 */
                    display: block;
                    position: absolute;
                    left: 0;
                    /* 左端に配置 */
                    top: 50%;
                    /* 上から中央 */
                    transform: translateY(-50%);
                    /* 垂直方向の中央寄せ */
                    width: calc((100vw / var(--vw-large))*14);
                    /* 丸の直径 */
                    height: calc((100vw / var(--vw-large))*14);
                    /* 丸の直径 */
                    border-radius: 50%;
                    /* 円形にする */
                    background-color: #93D500;
                    /* 丸の色 */
                }
            }

            ul {
                gap: calc((100vw / var(--vw-large))*23);
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                width: calc((100vw / var(--vw-large))*657);
                margin: 0 auto calc((100vw / var(--vw-large))*40);


                li {
                    width: calc((100vw / var(--vw-large))*147);
                }
            }

            p {
                text-align: left;
            }
        }

        /* --- 各メリットのブロック --- */
        .p-risk-block {
            margin-bottom: calc((100vw / var(--vw-large)) * 100);
            width: calc((100vw / var(--vw-large)) * 1000);
            margin: 0 auto;
        }

        /* ヘッダー部分 */
        .p-risk-block__header {
            text-align: left;
            margin-bottom: calc((100vw / var(--vw-large))*40);

            .flex {
                display: flex;
                justify-content: flex-start;
                gap: calc((100vw / var(--vw-large))*15);
                align-items: center;
                padding-bottom: calc((100vw / var(--vw-large))*14);
                margin-bottom: calc((100vw / var(--vw-large))*50);
                border-bottom: 1px solid #CBCBCB;
            }

            .pink {
                background-color: #E3ACAC;
                color: var(--color-text-body);
            }

            .blue {
                background-color: #9DC0D3;
                color: var(--color-text-body);
            }
        }

        .p-risk-block__sub {
            width: calc((100vw / var(--vw-large))*37);
        }

        .p-risk-block__title {
            font-size: calc((100vw / var(--vw-large)) * 25);
            font-weight: 700;
            line-height: 1.2;
        }

        .line-height {
            margin-bottom: calc((100vw / var(--vw-large))*24);
        }

        .p-risk-block__link {
            display: flex;
            justify-content: space-between;
            margin: calc((100vw / var(--vw-large))*30) auto;

            li {
                width: calc((100vw / var(--vw-large))*490);
            }
        }

        /* 本文エリア */
        .p-risk-block__body {
            margin-bottom: calc((100vw / var(--vw-large))*68);
            text-align: left;

            h3 {
                background-color: #489850;
                color: #fff;
                height: calc((100vw / var(--vw-large))*60);
                font-size: calc((100vw / var(--vw-large))*18);
                display: flex;
                align-items: center;
                padding-inline: calc((100vw / var(--vw-large)) * 20);
                text-align: left;
                letter-spacing: 0;
            }

            .d_green__back {
                background-color: #489898;
                color: #fff;
                justify-content: center;
                font-size: calc((100vw / var(--vw-large))*24);
            }

            .d_blue__back {
                background-color: #486198;
                color: #fff;
                justify-content: center;
                font-size: calc((100vw / var(--vw-large))*24);
            }

            .d_green__color {
                color: #489898;
                font-weight: bold;
            }

            .d_blue__color {
                color: #486198;
                font-weight: bold;
            }

            .line-height {
                margin-bottom: calc((100vw / var(--vw-large))*24);
            }

            .wrap {
                background-color: #F7F7F7;
                padding: calc((100vw / var(--vw-large))*33) calc((100vw / var(--vw-large))*50) calc((100vw / var(--vw-large))*48);

                .p-risk-block__text {
                    line-height: 1.8;
                    margin-bottom: calc((100vw / var(--vw-large)) * 24);
                    text-align: justify;
                }

                /* 画像（図解・グラフ） */
                .p-risk-block__image {
                    width: calc((100vw / var(--vw-large))*670);
                    margin: calc((100vw / var(--vw-large))*36) auto;
                    text-align: center;
                }

                .p-risk-block-inn__body {
                    margin-top: calc((100vw / var(--vw-large))*40);

                    h4 {
                        background-color: #489850;
                        color: #fff;
                        height: calc((100vw / var(--vw-large))*60);
                        font-size: calc((100vw / var(--vw-large))*24);
                        display: flex;
                        align-items: center;
                        padding-inline: calc((100vw / var(--vw-large)) * 30);
                        text-align: left;
                        letter-spacing: 0;
                    }

                    h5 {
                        height: calc((100vw / var(--vw-large))*32);
                        font-size: calc((100vw / var(--vw-large))17);
                        display: flex;
                        align-items: center;
                        padding-inline: calc((100vw / var(--vw-large)) * 30);
                        text-align: left;
                        letter-spacing: 0;
                    }

                    .pink {
                        background-color: #E3ACAC;
                        color: var(--color-text-body);
                    }

                    .l_pink {
                        background-color: #EFCFCF;
                    }

                    .b_pink {
                        background-color: #FFF5F5;
                    }

                    .blue {
                        background-color: #9DC0D3;
                        color: var(--color-text-body);
                    }

                    .l_gray {
                        background-color: #F7F7F7;
                    }

                    .wrap {
                        padding: calc((100vw / var(--vw-large))*20) calc((100vw / var(--vw-large))*30) calc((100vw / var(--vw-large))*58);
                        background-color: #fff;

                        .img02 {
                            width: calc((100vw / var(--vw-large))*510);
                            margin: calc((100vw / var(--vw-large))*36) auto;
                        }

                        .img03 {
                            width: calc((100vw / var(--vw-large))*837);
                            margin: calc((100vw / var(--vw-large))*28) auto calc((100vw / var(--vw-large))*32);
                        }

                        .img04 {
                            width: calc((100vw / var(--vw-large))*667);
                            margin: calc((100vw / var(--vw-large))*36) auto;
                        }

                        .img16 {
                            width: calc((100vw / var(--vw-large))*608);
                            margin: calc((100vw / var(--vw-large))*20) auto 0;
                        }

                        .img18 {
                            width: calc((100vw / var(--vw-large))*637);
                            margin: 0 auto 0;
                        }

                        .img19 {
                            width: 100%;
                            margin: calc((100vw / var(--vw-large))*14) auto 0;
                        }

                        .img20 {
                            width: 100%;
                            margin: calc((100vw / var(--vw-large))*26) auto 0;
                        }

                        .img21 {
                            width: 100%;
                            margin: calc((100vw / var(--vw-large))*26) auto 0;
                        }

                        .img22 {
                            width: calc((100vw / var(--vw-large))*642);
                            margin: calc((100vw / var(--vw-large))*26) auto 0;
                        }

                        .img23 {
                            width: calc((100vw / var(--vw-large))*535);
                            margin: calc((100vw / var(--vw-large))*26) auto 0;
                        }

                        .green {
                            font-weight: bold;
                            color: #00A310;
                            margin-bottom: calc((100vw / var(--vw-large))*10);
                        }
                    }

                    .p-risk-block-inn__body_s {
                        background-color: #fff;
                        padding-bottom: calc((100vw / var(--vw-large))*25);

                        h5 {
                            margin: 0 calc((100vw / var(--vw-large))*36) auto;
                            height: calc((100vw / var(--vw-large))*32);
                            font-size: calc((100vw / var(--vw-large))17);
                            display: flex;
                            align-items: center;
                            padding-inline: calc((100vw / var(--vw-large)) * 38);
                            text-align: left;
                            letter-spacing: 0;
                        }

                        .center {
                            display: block;
                            text-align: center;
                            height: initial;
                            line-height: 1.5;
                            padding: calc((100vw / var(--vw-large))*10) 0;

                            span {
                                display: block;
                                font-size: calc((100vw / var(--vw-large))*14);
                                font-weight: 400;
                            }
                        }

                        .wrap {
                            background-color: #F7F7F7;
                            margin: 0 calc((100vw / var(--vw-large))*36) auto;
                            padding: calc((100vw / var(--vw-large)) * 38);

                            .img05,
                            .img06,
                            .img07 {
                                margin: calc((100vw / var(--vw-large))*25) auto 0;
                                width: calc((100vw / var(--vw-large))*670);
                            }

                            .img09 {
                                width: calc((100vw / var(--vw-large))*446);
                                margin: calc((100vw / var(--vw-large))*25) auto 0;
                            }

                            .img10 {
                                width: calc((100vw / var(--vw-large))*534);
                                margin: calc((100vw / var(--vw-large))*25) auto 0;
                            }

                            .img11 {
                                margin: calc((100vw / var(--vw-large))*25) auto 0;
                            }

                            .img12 {
                                width: calc((100vw / var(--vw-large))*630);
                                margin: calc((100vw / var(--vw-large))*30) auto calc((100vw / var(--vw-large))*13);
                            }

                            .img13 {
                                width: calc((100vw / var(--vw-large))*626);
                                margin: calc((100vw / var(--vw-large))*20) auto;
                            }

                            .img14 {
                                width: calc((100vw / var(--vw-large))*279);
                            }

                            .img15 {
                                margin: calc((100vw / var(--vw-large))*20) auto;
                            }
                        }
                    }
                }

            }

            .note {
                font-size: calc((100vw / var(--vw-large))*14);
                color: #898989;
                text-align: left;
                letter-spacing: 0;
            }

            .note_s {
                position: relative;
                padding-left: calc((100vw / var(--vw-large))*16);

                &::before {
                    position: absolute;
                    content: "#";
                    font-size: calc((100vw / var(--vw-large))*14);
                    color: #898989;
                    left: calc((100vw / var(--vw-large))*5);
                }
            }

            .title {
                position: relative;
                /*+マークの位置基準とするためrelative指定*/
                cursor: pointer;
                transition: all .5s ease;
            }

            /*アイコンの＋と×*/
            .title::before,
            .title::after {
                position: absolute;
                content: '';
                width: calc((100vw / var(--vw-large))*16);
                height: calc((100vw / var(--vw-large))*2);
                background-color: #fff;

            }

            .title::before {
                top: 48%;
                right: calc((100vw / var(--vw-large))*20);
                transform: rotate(0deg);

            }

            .title::after {
                top: 48%;
                right: calc((100vw / var(--vw-large))*20);
                transform: rotate(90deg);

            }

            /*　closeというクラスがついたら形状変化　*/
            .title.close::before {
                transform: rotate(45deg);
            }

            .title.close::after {
                transform: rotate(-45deg);
            }

            /*アコーディオンで現れるエリア*/
            .box {
                display: none;
                /*はじめは非表示*/
            }
        }

        #risk02 {
            .p-risk-block__body {
                .wrap {
                    .p-risk-block-inn__body {
                        .p-risk-block-inn__body_s {
                            .wrap {
                                padding: calc((100vw / var(--vw-large)) * 38) calc((100vw / var(--vw-large)) * 89);
                                background-color: #fff;
                            }

                            .wrap.flex {
                                .p-risk-block__text {
                                    width: calc((100vw / var(--vw-large))*324);
                                }
                            }
                        }
                    }
                }
            }
        }

        #risk03 {
            .p-risk-block__body {
                .wrap {
                    .p-risk-block-inn__body {

                        h5.d_blue__back {
                            background-color: #486198;
                        }

                        .center {
                            display: block;
                            text-align: center;
                            height: initial;
                            line-height: 1.5;
                            padding: calc((100vw / var(--vw-large))*10) 0;

                            span {
                                display: block;
                                font-size: calc((100vw / var(--vw-large))*14);
                                font-weight: 400;
                            }
                        }

                        .font24 {
                            font-size: calc((100vw / var(--vw-large))*24);
                        }

                        .font17 {
                            font-size: calc((100vw / var(--vw-large))*17);
                        }

                        .font24.green {
                            text-align: center;

                            .yellow {
                                background-color: #FFEB00;
                            }
                        }

                        .font17.green.center {
                            margin: 0 calc((100vw / var(--vw-large))*38) calc((100vw / var(--vw-large))*33);
                        }

                        .wrap {
                            padding: calc((100vw / var(--vw-large))*33) calc((100vw / var(--vw-large))*50) calc((100vw / var(--vw-large))*48);
                        }

                        .p-risk-block-inn__body_s {
                            .wrap {
                                padding: calc((100vw / var(--vw-large))*33) calc((100vw / var(--vw-large))*10) calc((100vw / var(--vw-large))*48);
                                background-color: #fff;
                            }

                            .wrap.flex {
                                .p-risk-block__text {
                                    width: calc((100vw / var(--vw-large))*324);
                                }
                            }

                            h5 {
                                span.green {
                                    font-weight: bold;
                                    font-size: calc((100vw / var(--vw-large))*16);
                                    display: inline-block;
                                }
                            }

                            ul {
                                padding-left: calc((100vw / var(--vw-large))*30) !important;

                                li {
                                    list-style: disc;
                                }
                            }
                        }
                    }
                }
            }
        }

        #risk04,
        #risk05,
        #risk06 {
            .p-risk-block__body {
                .wrap {
                    .p-risk-block-inn__body {
                        h5 {
                            /* margin: 0 calc((100vw / var(--vw-large))*36) auto; */
                        }

                        h5.d_green__back {
                            background-color: #489850;
                            text-align: left;
                            padding-inline: calc((100vw / var(--vw-large)) * 38);
                            justify-content: initial;
                        }

                        .center {
                            display: block;
                            text-align: center;
                            height: initial;
                            line-height: 1.5;
                            padding: calc((100vw / var(--vw-large))*10) 0;

                            span {
                                display: block;
                                font-size: calc((100vw / var(--vw-large))*14);
                                font-weight: 400;
                            }
                        }

                        .font24 {
                            font-size: calc((100vw / var(--vw-large))*24);
                        }

                        .font17 {
                            font-size: calc((100vw / var(--vw-large))*17);
                        }

                        .font24.green {
                            text-align: center;

                            .yellow {
                                background-color: #FFEB00;
                            }
                        }

                        .font17.green.center {
                            margin: 0 calc((100vw / var(--vw-large))*38) calc((100vw / var(--vw-large))*33);
                        }

                        .wrap {
                            padding: calc((100vw / var(--vw-large))*33) calc((100vw / var(--vw-large))*38) calc((100vw / var(--vw-large))*48);
                        }

                        .p-risk-block-inn__body_s {
                            .wrap {
                                padding: calc((100vw / var(--vw-large))*33) calc((100vw / var(--vw-large))*10) calc((100vw / var(--vw-large))*48);
                                background-color: #fff;
                            }

                            .wrap.flex {
                                .p-risk-block__text {
                                    width: calc((100vw / var(--vw-large))*324);
                                }
                            }

                            h5 {
                                span.green {
                                    font-weight: bold;
                                    font-size: calc((100vw / var(--vw-large))*16);
                                    display: inline-block;
                                }
                            }

                            ul {
                                padding-left: calc((100vw / var(--vw-large))*30) !important;

                                li {
                                    list-style: disc;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}