@charset "UTF-8";

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

    @media(max-width:768px) {
        margin-bottom: calc((100vw / var(--vw-small))*80);
    }
}

.p-management {
    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: 0 auto calc((100vw / var(--vw-large))*76);
        width: calc((100vw / var(--vw-large)) * 806);

        @media(max-width:768px) {
            margin-bottom: calc((100vw / var(--vw-small))*20);
            width: 100%;
        }

        .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;


            @media(max-width:768px) {
                font-size: calc((100vw / var(--vw-small))*15);
                margin-bottom: calc((100vw / var(--vw-small))*10);
            }

        }

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

            @media(max-width:768px) {
                font-size: calc((100vw / var(--vw-small))*30);
            }
        }

        .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);

            @media(max-width:768px) {
                width: calc((100vw / var(--vw-small))*82);
                margin-top: calc((100vw / var(--vw-small))*10);
            }
        }

        .p-management-header__img {
            margin: calc((100vw / var(--vw-large))*40) auto 0;
            width: calc((100vw / var(--vw-large))*804);


            @media(max-width:768px) {
                width: 100%;
                margin: calc((100vw / var(--vw-small))*25) auto calc((100vw / var(--vw-small))*20);
            }
        }

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

            @media(max-width:768px) {
                width: 100%;
                margin: 0 auto calc((100vw / var(--vw-small))*32);
            }

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

                @media(max-width:768px) {
                    width: calc((100vw / var(--vw-small))*82);
                }
            }

        }
    }

    .p-management-head {
        margin-bottom: calc((100vw / var(--vw-large))*80);

        @media(max-width:768px) {
            margin: 0 auto calc((100vw / var(--vw-small))*52);
        }

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

            @media(max-width:768px) {
                font-size: calc((100vw / var(--vw-small))*22);
            }

            .green {
                color: #489850;
            }
        }

        .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: calc((100vw / var(--vw-large)) * 10) auto calc((100vw / var(--vw-large))*34);

            @media(max-width:768px) {
                width: calc((100vw / var(--vw-small))*82);
                margin: calc((100vw / var(--vw-small))*10) auto;
            }
        }

        @media(max-width:768px) {
            .scroll_img__wrap {
                overflow-x: auto;
                white-space: nowrap;
                scroll-snap-type: x mandatory;
                /* スナップポイントを必須に */
                -webkit-overflow-scrolling: touch;
                width: initial;

                .chart_01 {
                    max-width: calc((100vw / var(--vw-small))*670);
                    width: calc((100vw / var(--vw-small))*670);
                }
            }

        }

        .p-management-head__img {
            width: calc((100vw / var(--vw-large))*554);
            margin: 0 auto calc((100vw / var(--vw-large))*58);

            @media(max-width:768px) {
                width: initial;

                img {
                    max-width: calc((100vw / var(--vw-small))*554);
                    width: calc((100vw / var(--vw-554))*670);
                }
            }
        }

        @media(max-width:768px) {

            .scroll_wrap {
                display: flex;
                margin-top: calc((100vw / var(--vw-small))*20);
                margin-bottom: calc((100vw / var(--vw-small))*14);
                /* padding: 0 calc((100vw / var(--vw-small))*10); */

                span {
                    color: var(--color-primary-light);
                    font-size: calc((100vw / var(--vw-small))*20);
                    font-family: var(--font-en);
                    font-style: italic;
                    font-weight: bold;
                    line-height: normal;
                }

                img {
                    width: calc((100vw / var(--vw-small))*20);
                }
            }
        }


        .p-management-head__img02 {
            width: 100%;
            margin: 0 auto;

            @media(max-width:768px) {
                margin: 0 auto calc((100vw / var(--vw-small))*28);
            }
        }

        @media(max-width:768px) {
            .management_head__img02__sub {
                width: calc((100vw / var(--vw-small))*733);
                margin: calc((100vw / var(--vw-small))*28) auto 0;
            }
        }
    }


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

        .p-management-detail__container {
            width: calc((100vw / var(--vw-large))*806);
            margin: 0 auto;

            @media(max-width:768px) {
                width: calc((100vw / var(--vw-small))*350);
            }

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

                @media(max-width:768px) {
                    margin: 0 auto calc((100vw / var(--vw-small))*30);
                }
            }

            /* ヘッダー部分 */
            .p-management-block__header {
                text-align: left;
                padding-bottom: calc((100vw / var(--vw-large))*10);
                margin-bottom: calc((100vw / var(--vw-large))*35);
                border-bottom: 2px dashed #00A310;

                @media(max-width:768px) {
                    padding-bottom: calc((100vw / var(--vw-small))*10);
                    margin-bottom: calc((100vw / var(--vw-small))*20);
                }

                .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;

                    @media(max-width:768px) {}
                }

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

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

            .p-management-block__title {
                font-size: calc((100vw / var(--vw-large)) * 25);
                font-weight: 700;
                line-height: 1;
                text-align: left;
                padding: 0 0 0 calc((100vw / var(--vw-large))*22);
                position: relative;

                @media(max-width:768px) {
                    font-size: calc((100vw / var(--vw-small))*20);
                    padding: 0 0 0 calc((100vw / var(--vw-small))*18);
                    line-height: normal;

                }

                &::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;
                    /* 丸の色 */

                    @media(max-width:768px) {
                        width: calc((100vw / var(--vw-small))*14);
                        height: calc((100vw / var(--vw-small))*14);
                    }
                }
            }
        }

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

            @media(max-width:768px) {
                margin-bottom: calc((100vw / var(--vw-small))*14);
            }
        }

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

            @media(max-width:768px) {
                margin: 0 auto calc((100vw / var(--vw-small))*30);
            }

            h3 {
                font-size: calc((100vw / var(--vw-large))*19);
                text-align: left;
                letter-spacing: 0;
                margin-bottom: calc((100vw / var(--vw-large))*17);

                @media(max-width:768px) {
                    font-size: calc((100vw / var(--vw-small))*16);
                    margin-bottom: calc((100vw / var(--vw-small))*14);
                    line-height: normal;
                }
            }

            p {
                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);

                @media(max-width:768px) {
                    margin-bottom: calc((100vw / var(--vw-small))*14);
                }
            }

            .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);
                }
            }

            @media(max-width:768px) {
                .scroll_img__wrap {
                    overflow-x: auto;
                    white-space: nowrap;
                    scroll-snap-type: x mandatory;
                    /* スナップポイントを必須に */
                    -webkit-overflow-scrolling: touch;
                    width: initial;

                    .chart_01 {
                        max-width: calc((100vw / var(--vw-small))*670);
                        width: calc((100vw / var(--vw-small))*670);
                    }
                }

                .scroll_wrap {
                    display: flex;
                    margin-top: calc((100vw / var(--vw-small))*20);
                    margin-bottom: calc((100vw / var(--vw-small))*14);
                    /* padding: 0 calc((100vw / var(--vw-small))*10); */

                    span {
                        color: var(--color-primary-light);
                        font-size: calc((100vw / var(--vw-small))*20);
                        font-family: var(--font-en);
                        font-style: italic;
                        font-weight: bold;
                        line-height: normal;
                    }

                    img {
                        width: calc((100vw / var(--vw-small))*20);
                    }
                }
            }

            .img01 {
                width: ((100vw / var(--vw-large))*613);
                margin: 0 auto;

                @media(max-width:768px) {
                    width: 100%;
                }
            }

            .img03 {
                margin: calc((100vw / var(--vw-large))*17) auto 0;
                width: calc((100vw / var(--vw-large))*521);


                @media(max-width:768px) {
                    width: 100%;
                }
            }

            .img04 {
                margin: calc((100vw / var(--vw-large))*56) auto 0;
                width: calc((100vw / var(--vw-large))*738);

                @media(max-width:768px) {
                    width: initial;

                    img {
                        max-width: calc((100vw / var(--vw-small))*770);
                        width: calc((100vw / var(--vw-554))*770);
                    }
                }
            }

            .img05 {
                margin: calc((100vw / var(--vw-large))*26) auto 0;
                width: calc((100vw / var(--vw-large))*772);

                @media(max-width:768px) {
                    width: 100%;
                    margin: calc((100vw / var(--vw-small))*20) auto 0;
                }
            }

        }

        .img06 {
            margin-top: calc((100vw / var(--vw-large))*-13);
        }

        .img07 {
            margin: calc((100vw / var(--vw-large))*57) auto calc((100vw / var(--vw-large))*73);

            @media(max-width:768px) {
                margin: calc((100vw / var(--vw-small))*50) auto calc((100vw / var(--vw-small))*40);
            }
        }

        .p-management-block__in_header {
            text-align: left;
            margin-top: calc((100vw / var(--vw-large))*20);

            @media(max-width:768px) {
                margin-top: calc((100vw / var(--vw-small))*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))*5);
                margin-bottom: calc((100vw / var(--vw-large))*25);
                border-bottom: 1px solid #CBCBCB;

                @media(max-width:768px) {
                    gap: calc((100vw / var(--vw-small))*15);
                    padding: calc((100vw / var(--vw-small))*10);
                    margin-bottom: calc((100vw / var(--vw-small))*20);
                }
            }

            .p-management-block__sub {
                width: calc((100vw / var(--vw-large))*32);

                @media(max-width:768px) {
                    width: calc((100vw / var(--vw-small))*37);
                }
            }

            .p-management-block__title {
                font-size: calc((100vw / var(--vw-large)) * 20);
                font-weight: 700;
                line-height: 1;
                padding: 0;

                @media(max-width:768px) {
                    font-size: calc((100vw / var(--vw-small))*22);
                    line-height: normal;
                    width: calc(280);
                }

                &::before {
                    content: initial;
                }
            }
        }

    }
}