@charset "UTF-8";


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

/* ============================================
   Page: Feature (選ばれる理由)
============================================ */
.p-feature {
    /* padding-bottom: calc((100vw / var(--vw-large)) * 120); */

    /* --- 導入セクション --- */
    .p-feature__intro {
        text-align: center;
        width: calc((100vw / var(--vw-large))*804);
        margin: 0 auto calc((100vw / var(--vw-large)) * 100);

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

            .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-feature__intro-items {
            display: flex;
            justify-content: center;
            gap: calc((100vw / var(--vw-large)) * 53);

            .item {
                width: calc((100vw / var(--vw-large)) * 232);

                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }

    /* --- Feature 各セクション共通 --- */
    .p-feature__sec {
        margin-bottom: calc((100vw / var(--vw-large)) * 120);
        padding: calc((100vw / var(--vw-large))*90) 0;
        position: relative;

        .number {
            position: absolute;
            top: calc((100vw / var(--vw-large))*-20);
            right: 0;
            display: block;
            font-family: var(--font-en);
            font-size: calc((100vw / var(--vw-large)) * 180);
            font-weight: 900;
            color: #E6F2E8;
            /* 薄い緑色 */
            line-height: 1;
            /* 重ねる場合 */
            z-index: 1;
            font-style: italic;
        }

        /* セクションヘッダー (Feature.01 タイトル) */
        .p-feature__sec-header {
            text-align: center;
            margin-bottom: calc((100vw / var(--vw-large)) * 60);
            z-index: 2;
            position: relative;

            .title {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                font-size: calc((100vw / var(--vw-large)) * 42);
                font-weight: 900;
                line-height: 1;

                span {
                    font-size: calc((100vw / var(--vw-large))*61);
                    font-family: var(--font-en);
                    color: var(--color-primary);
                    font-weight: 900;
                    margin-left: calc((100vw / var(--vw-large))*10);
                    font-style: italic;
                }
            }

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

            h4 {
                font-size: calc((100vw / var(--vw-large)) * 28);
                font-weight: 900;
                margin-bottom: calc((100vw / var(--vw-large))*13);
            }
        }

        /* セクション本文エリア */
        .p-feature__body {
            max-width: calc((100vw / var(--vw-large)) * 1000);
            margin: 0 auto;

            /* 画像・図解（枠で囲ったり、背景を敷く場合もここで調整） */
            .p-feature__img {
                margin: 0 0 calc((100vw / var(--vw-large)) * 50) 0;
                text-align: center;

                img {
                    max-width: 100%;
                    height: auto;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                    /* 軽く影をつける */
                }

                &:last-child {
                    margin-bottom: calc((100vw / var(--vw-large))*96);
                }
            }

            /* サブセクション（Feature.02の中にある小見出し等） */
            .p-feature__sub-sec {
                background-color: var(--color-bg-light);
                padding: calc((100vw / var(--vw-large)) * 40);
                border-radius: 10px;
                margin-top: calc((100vw / var(--vw-large)) * 50);

                .p-feature__sub-title {
                    font-size: calc((100vw / var(--vw-large)) * 20);
                    font-weight: 700;
                    text-align: center;
                    margin-bottom: calc((100vw / var(--vw-large)) * 30);
                    color: var(--color-primary);
                }
            }
        }
    }

    .sec01,
    .sec03 {
        background-color: #F2F8F3;
        padding-bottom: 0;
        margin-bottom: calc((100vw / var(--vw-large))*53);

        .p-feature__note {
            background-color: #FAFAFA;
            padding: calc((100vw / var(--vw-large))*76) 0 calc((100vw / var(--vw-large))*53);

            .p-feature__note-header {
                margin-bottom: calc((100vw / var(--vw-large))*26);

                h3 {
                    font-size: calc((100vw / var(--vw-large)) * 28);
                    font-weight: 900;
                }

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

            p {
                text-align: left;
                width: calc((100vw / var(--vw-large))*1000);
                margin: 0 auto calc((100vw / var(--vw-large))*22);
            }

            .p-feature__note__img {
                width: calc((100vw / var(--vw-large))*912);
                margin: 0 auto;
            }
        }
    }

    .sec02 {
        padding-top: 0;
        margin-bottom: 0;
    }

    .sec03 {
        padding-bottom: calc((100vw / var(--vw-large))*73);
        margin-bottom: 0;
    }

    .sec02,
    .sec03 {
        .p-feature__body {
            .p-feature__img {
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}