@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-flow {
    position: relative;

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

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

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

            @media(max-width:768px) {
                margin-bottom: calc((100vw / var(--vw-small))*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;

                @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))*28);
                font-weight: 900;
                text-align: left;

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

                .gray {
                    color: #838383;
                }

                .green {
                    color: var(--color-primary-light);
                }

                .l_green {
                    color: #93D500;
                }
            }

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

    /* --- 導入セクション --- */
    .p-philosophy-detail {
        background-color: #FAFAFA;
        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;

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

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

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

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

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

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

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

        .p-philosophy-detail__block {
            text-align: left;

            h3 {
                font-size: calc((100vw / var(--vw-large))*25);
                font-weight: bold;
                letter-spacing: 0;
                margin-bottom: calc((100vw / var(--vw-large))*48);
                text-align: left;
                line-height: normal;

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

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

                @media(max-width:768px) {
                    width: 100%;
                    flex-direction: column;
                    gap: calc((100vw / var(--vw-small))*10);
                }

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

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

            }
        }

    }

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

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

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

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

            @media(max-width:768px) {
                margin-bottom: calc((100vw / var(--vw-small))*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;

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

        .description {
            text-align: left;

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

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

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

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

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

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

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

            @media(max-width:768px) {
                margin-bottom: calc((100vw / var(--vw-small))*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;

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

        ul {
            width: calc((100vw / var(--vw-large))*804);
            text-align: left;

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

            li {
                align-items: flex-start;
                justify-content: flex-start;
                padding-bottom: calc((100vw / var(--vw-large))*10);
                margin-bottom: calc((100vw / var(--vw-large))*10);
                border-bottom: 1px solid #D6D6D6;

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

                span {
                    width: calc((100vw / var(--vw-large))*183);
                    line-height: 1.5;

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

                p {
                    line-height: 1.5;
                }

                &:last-child {
                    border-bottom: initial;
                }
            }

        }
    }

    .p-business {
        width: calc((100vw / var(--vw-large))*1080);
        margin-left: auto;
        margin-bottom: calc((100vw / var(--vw-large))*73);
        padding: calc((100vw / var(--vw-large))*100) 0;
        position: relative;

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

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

            @media(max-width:768px) {
                margin-bottom: calc((100vw / var(--vw-small))*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;

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

        ul {
            text-align: left;

            li {
                align-items: flex-start;
                justify-content: space-between;
                margin-bottom: calc((100vw / var(--vw-large))*80);

                @media(max-width:768px) {
                    flex-direction: column;
                    margin-bottom: calc((100vw / var(--vw-small))*40);
                    gap: calc((100vw / var(--vw-small))*20);
                }

                .contents {
                    width: calc((100vw / var(--vw-large))*366);

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

                    span {
                        color: var(--green, #00A310);
                        font-family: Inter;
                        font-size: calc((100vw / var(--vw-large))*22);
                        font-style: italic;
                        font-weight: 700;
                        line-height: normal;
                        margin-bottom: calc((100vw / var(--vw-large))*5);
                        display: inline-block;

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

                    h3 {
                        font-size: calc((100vw / var(--vw-large))*19);
                        border-bottom: 2px dashed #00A310;
                        padding-bottom: calc((100vw / var(--vw-large))*11);
                        margin-bottom: calc((100vw / var(--vw-large))*31);
                        line-height: normal;

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

                    p {
                        line-height: 1.5;
                    }
                }

                .p-business__img {
                    width: calc((100vw / var(--vw-large))*684);

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

                &:last-child {
                    margin-bottom: 0;
                }

            }

        }

        .p-business__bg_img {
            position: absolute;
            width: calc((100vw / var(--vw-large))*342);
            left: calc((100vw / var(--vw-large))*-260);
            bottom: 0;
            z-index: -1;

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

    .p-access {
        background-color: #FAFAFA;
        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;
        position: relative;

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

        .text {
            position: absolute;
            color: var(--green, #00A310);
            font-family: Inter;
            font-size: calc((100vw / var(--vw-large))*84);
            font-style: italic;
            font-weight: 700;
            line-height: normal;
            top: calc((100vw / var(--vw-large))*-50);
            right: calc((100vw / var(--vw-large))*180);

            @media(max-width:768px) {
                font-size: calc((100vw / var(--vw-small))*60);
                top: calc((100vw / var(--vw-small))*-40);
                right: calc((100vw / var(--vw-small))*20);
            }
        }

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

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

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

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

            @media(max-width:768px) {
                margin-bottom: calc((100vw / var(--vw-small))*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;

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

        .map {
            width: calc((100vw / var(--vw-large))*800);
            height: calc((100vw / var(--vw-large))*269);
            margin: calc((100vw / var(--vw-large))*26) auto;

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

            iframe {
                width: 100%;
                height: 100%;
            }
        }

    }
}