@charset "UTF-8";

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

.p-flow {
    position: relative;

    .p-flow__text {

        img {
            position: absolute;
            width: calc((100vw / var(--vw-large))*346);
            right: calc((100vw / var(--vw-large))*157);
            top: calc((100vw / var(--vw-large))*-40);
        }
    }

    /* --- 導入セクション --- */
    .p-feature-detail {
        background-color: #F2F8F3;
        width: calc((100vw / var(--vw-large))*1180);
        margin-left: auto;
        margin-bottom: calc((100vw / var(--vw-large))*73);
        padding: calc((100vw / var(--vw-large))*100) 0 calc((100vw / var(--vw-large))*60);

        .l-inner {
            width: calc((100vw / var(--vw-large))*800);
            margin-left: calc((100vw / var(--vw-large))*100);
        }

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

        .p-feature__intro__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 {
            text-align: left;
            letter-spacing: 0;
        }

        ul {
            width: calc((100vw / var(--vw-large))*800);

            li {

                margin-bottom: calc((100vw / var(--vw-large))*20);
            }

            .flow_01__01 {
                position: relative;

                .btn_wrap {
                    position: absolute;
                    bottom: calc((100vw / var(--vw-large))*110);
                    left: calc((100vw / var(--vw-large))*40);

                    /* 「詳しく見る」ボタン */
                    .c-btn-circle {
                        display: inline-flex;
                        align-items: center;
                        font-size: calc((100vw / var(--vw-large)) * 15);
                        font-weight: bold;
                        color: var(--color-primary);
                        text-decoration: none;
                        transition: opacity 0.3s;

                        /* 黒い円と白い矢印 */
                        &::after {
                            content: "";
                            display: inline-block;
                            width: calc((100vw / var(--vw-large)) * 44);
                            height: calc((100vw / var(--vw-large)) * 44);
                            background-color: #00800D;
                            border-radius: 50%;
                            margin-left: calc((100vw / var(--vw-large)) * 15);

                            /* 白い矢印 (SVGデータ) */
                            background-image: url(../img/common/white_arrow.svg);
                            background-repeat: no-repeat;
                            background-position: center;
                            background-size: calc((100vw / var(--vw-large))*10);
                            /* 矢印のサイズ調整 */
                        }

                        &:hover {
                            opacity: 0.7;
                        }
                    }

                    .border_g {
                        background-color: #21BC30;
                        height: 2px;
                        width: calc((100vw / var(--vw-large))*160);
                    }
                }
            }

            .flow_01__07 {
                margin-bottom: calc((100vw / var(--vw-large))*80);
            }

            .flow_02__02 {
                margin-bottom: calc((100vw / var(--vw-large))*55);
            }

        }
    }
}