@charset "UTF-8";

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

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

        .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-management-header__img {
            margin: calc((100vw / var(--vw-large))*40) auto 0;
            width: calc((100vw / var(--vw-large))*804);
        }

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

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

        }
    }

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

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

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

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

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


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

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

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

            /* ヘッダー部分 */
            .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;

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

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

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

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


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

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

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

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

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

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

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

        }

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

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

        .p-management-block__in_header {
            text-align: left;
            margin-top: calc((100vw / var(--vw-large))*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))*5);
                margin-bottom: calc((100vw / var(--vw-large))*25);
                border-bottom: 1px solid #CBCBCB;
            }

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

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

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

    }