:root {
    --color-bg: #fff;
    --color-bg-light: #f8f9fa;
    --color-text-light: #666;
    --color-text-dark: #333;
    --color-red: #9E3D3F;
    --color-main: #2c429c;
    --color-main-bg: #2c429ccc;
    --color-main-light: #4a60c4;
    --color-main-dark: #1a2666;
    --color-orange: #f49a4c;
    --color-orange-light: #f4c29c;
    --color-orange-dark: #ec6e04;
    --color-purple: #772F6D;
    --color-purple-light: #9d5b8b;
    --color-purple-shadow: #3a1430;
    --font-hl: calc((1em - 1lh) / 2);

    /*768-1536*/
    --size04: clamp(0.125rem, 0.26vw, 0.25rem);
    --size08: clamp(0.25rem, 0.52vw, 0.5rem);
    --size10: clamp(0.313rem, 0.65vw, 0.625rem);
    --size12: clamp(0.375rem, 0.78vw, 0.75rem);
    --size14: clamp(0.438rem, 0.91vw, 0.875rem);
    --size16: clamp(0.5rem, 1.04vw, 1rem);
    --size18: clamp(0.563rem, 1.17vw, 1.125rem);
    --size20: clamp(0.625rem, 1.3vw, 1.25rem);
    --size22: clamp(0.688rem, 1.43vw, 1.375rem);
    --size24: clamp(0.75rem, 1.56vw, 1.5rem);
    --size26: clamp(0.813rem, 1.69vw, 1.625rem);
    --size28: clamp(0.875rem, 1.82vw, 1.75rem);
    --size30: clamp(0.938rem, 1.95vw, 1.875rem);
    --size32: clamp(1rem, 2.08vw, 2rem);
    --size34: clamp(1.063rem, 2.21vw, 2.125rem);
    --size36: clamp(1.125rem, 2.34vw, 2.25rem);
    --size38: clamp(1.188rem, 2.47vw, 2.375rem);
    --size40: clamp(1.25rem, 2.6vw, 2.5rem);
    --size42: clamp(1.313rem, 2.73vw, 2.625rem);
    --size48: clamp(1.5rem, 3.13vw, 3rem);
    --size50: clamp(1.563rem, 3.26vw, 3.125rem);
    --size60: clamp(1.875rem, 3.91vw, 3.75rem);
    --size80: clamp(2.5rem, 5.21vw, 5rem);
    --size100: clamp(3.125rem, 6.51vw, 6.25rem);
    --size120: clamp(3.75rem, 7.81vw, 7.5rem);
    --size150: clamp(4.688rem, 9.77vw, 9.375rem);
    --size180: clamp(5.625rem, 11.72vw, 11.25rem);
    --side-padding: 0 5vw 0 5vw;
    --side-padding-left: 0 2vw 0 5vw;
    --side-padding-right: 0 5vw 0 0;
    --section-margin-top: 3%;

    /*375-750-768（x/2-x-x*1.024）*/
    --sp_size02: clamp(0.063rem, 0.27vw, 0.128rem);
    --sp_size04: clamp(0.125rem, 0.53vw, 0.256rem);
    --sp_size05: clamp(0.156rem, 0.67vw, 0.32rem);
    --sp_size08: clamp(0.25rem, 1.07vw, 0.512rem);
    --sp_size10: clamp(0.313rem, 1.33vw, 0.64rem);
    --sp_size12: clamp(0.375rem, 1.6vw, 0.768rem);
    --sp_size14: clamp(0.438rem, 1.87vw, 0.896rem);
    --sp_size16: clamp(0.5rem, 2.13vw, 1.024rem);
    --sp_size18: clamp(0.563rem, 2.4vw, 1.152rem);
    --sp_size20: clamp(0.625rem, 2.67vw, 1.28rem);
    --sp_size22: clamp(0.688rem, 2.93vw, 1.408rem);
    --sp_size24: clamp(0.75rem, 3.2vw, 1.536rem);
    --sp_size26: clamp(0.813rem, 3.47vw, 1.664rem);
    --sp_size28: clamp(0.875rem, 3.73vw, 1.792rem);
    --sp_size30: clamp(0.938rem, 4vw, 1.92rem);
    --sp_size32: clamp(1rem, 4.27vw, 2.048rem);
    --sp_size34: clamp(1.063rem, 4.53vw, 2.176rem);
    --sp_size36: clamp(1.125rem, 4.8vw, 2.304rem);
    --sp_size38: clamp(1.188rem, 5.07vw, 2.432rem);
    --sp_size40: clamp(1.25rem, 5.33vw, 2.56rem);
    --sp_size42: clamp(1.313rem, 5.6vw, 2.688rem);
    --sp_size44: clamp(1.375rem, 5.87vw, 2.816rem);
    --sp_size48: clamp(1.5rem, 6.4vw, 3.072rem);
    --sp_size50: clamp(1.563rem, 6.67vw, 3.2rem);
    --sp_size60: clamp(1.875rem, 8vw, 3.84rem);
    --sp_size80: clamp(2.5rem, 10.67vw, 5.12rem);
    --sp_size100: clamp(3.125rem, 13.33vw, 6.4rem);
    --sp_size120: clamp(3.75rem, 16vw, 7.68rem);
    --sp_size140: clamp(4.375rem, 18.67vw, 8.96rem);
    --sp_size180: clamp(5.625rem, 24vw, 11.52rem);
    --sp_section-margin-top: 2.5vw;
}

/* 申し込みフォームのスタイリング */
.contact-section {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--side-padding);

    .section-wrap {
        width: 100%;

        .application-form-wrap {
            background-color: var(--color-bg);
            overflow: hidden;


            .application-form-title {
                background: linear-gradient(135deg, var(--color-main) 0%, var(--color-main-dark) 100%);
                color: var(--color-bg);
                text-align: center;
                position: relative;
                padding: var(--size24) 0;

                &::after {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-orange-light) 100%);
                }

                .application-form-title-sub {
                    font-size: var(--size18);
                    color: var(--color-orange-light);
                    margin-bottom: var(--size12);
                    font-weight: 600;

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size18);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size24);
                    }
                }

                h2 {
                    font-size: var(--size36);
                    font-weight: bold;
                    margin: 0;
                    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size24);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size32);
                    }
                }

                @media screen and (max-width: 768px) {
                    padding: var(--sp_size20) var(--sp_size24);
                }

                @media screen and (max-width: 440px) {
                    padding: var(--sp_size24) var(--sp_size20);
                }
            }

            .application-form-text {
                background-color: var(--color-bg);
                margin: var(--size32) auto;
                padding: 0 1.5em;

                @media screen and (max-width: 768px) {
                    padding: 0 1em;
                }

                @media screen and (max-width: 440px) {
                    padding: 0;
                }

                time {
                    display: block;
                    font-size: var(--size18);
                    color: var(--color-text-light);
                    margin-bottom: var(--size12);
                    font-weight: 600;

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size18);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size22);
                    }
                }

                h3 {
                    font-size: var(--size24);
                    color: var(--color-main);
                    line-height: 1.6;
                    margin-bottom: var(--size24);
                    text-wrap: pretty;
                    border-bottom: 1px solid var(--color-main);

                    @media screen and (max-width: 768px) {
                        margin-bottom: var(--sp_size24);
                        font-size: var(--sp_size26);
                    }

                    @media screen and (max-width: 440px) {
                        margin-bottom: var(--sp_size24);
                        font-size: var(--sp_size32);
                    }
                }

                p {
                    font-size: var(--size18);
                    color: var(--color-text-dark);
                    line-height: 1.6;
                    margin-bottom: var(--size12);

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

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size20);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size26);
                    }
                }

            }

            .application-form-content-info {
                margin: var(--size42) 0;
                padding: 0 1.5em;

                @media screen and (max-width: 768px) {
                    padding: 0 1em;
                }

                @media screen and (max-width: 440px) {
                    padding: 0;
                }

                p {
                    font-size: var(--size18);
                    color: var(--color-text-dark);
                    line-height: 1.6;

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size20);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size26);
                    }

                    &:last-child {
                        margin-top: 1.5em;
                    }
                }


            }

            .application-form-content-info-link {
                margin: var(--size32) 0 var(--size60);
                padding: var(--size24) 3em;

                background: linear-gradient(135deg, var(--color-bg-light) 0%, #f0f2f5 100%);
                border-radius: 12px;
                border-left: 4px solid var(--color-main);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

                p {
                    font-size: var(--size18);
                    color: var(--color-text-dark);
                    line-height: 1.6;
                    margin-bottom: var(--size16);
                    transition: all 0.3s ease;

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

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size20);
                        margin-bottom: var(--sp_size16);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size26);
                        margin-bottom: var(--sp_size20);
                    }

                    &.magin-top1em {
                        margin-top: var(--size20);
                        padding-top: var(--size20);
                        border-top: 1px solid rgba(44, 66, 156, 0.2);
                    }

                    a {
                        color: var(--color-main);
                        text-decoration: none;
                        font-weight: 600;
                        display: inline-flex;
                        align-items: center;
                        gap: var(--size12);
                        padding: var(--size12) var(--size16);
                        background: var(--color-bg);
                        border: 2px solid var(--color-main-light);
                        border-radius: 8px;
                        transition: all 0.3s ease;
                        position: relative;
                        overflow: hidden;


                        &::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: -100%;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(90deg, transparent, rgba(44, 66, 156, 0.1), transparent);
                            transition: left 0.5s ease;
                        }

                        &:hover {
                            background: var(--color-main);
                            color: var(--color-bg);
                            transform: translateY(-2px);
                            box-shadow: 0 6px 20px rgba(44, 66, 156, 0.3);
                            border-color: var(--color-main);

                            &::before {
                                left: 100%;
                            }

                            &[href*=".pdf" i]::after {
                                background-color: var(--color-bg);
                                color: var(--color-main);
                            }

                            &[href*=".xlsx" i]::after {
                                background-color: var(--color-bg);
                                color: green;
                            }

                            &[href*=".xls" i]::after {
                                background-color: var(--color-bg);
                                color: rgb(0, 179, 0);
                            }
                        }

                        &:active {
                            transform: translateY(0);
                            box-shadow: 0 2px 8px rgba(44, 66, 156, 0.2);
                        }

                        &[href*=".pdf" i]::after {
                            content: 'PDF';
                            background-color: var(--color-main);
                            color: #fff;
                            font-size: var(--size14);
                            font-weight: bold;
                            padding: var(--size04) var(--size08);
                            border-radius: 4px;
                            margin-left: var(--size08);
                            transition: all 0.3s ease;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        &[href*=".xlsx" i]::after {
                            content: 'XLSX';
                            background-color: #28a745;
                            color: #fff;
                            font-size: var(--size14);
                            font-weight: bold;
                            padding: var(--size04) var(--size08);
                            border-radius: 4px;
                            margin-left: var(--size08);
                            transition: all 0.3s ease;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        &[href*=".xls" i]::after {
                            content: 'XLS';
                            background-color: #20c997;
                            color: #fff;
                            font-size: var(--size14);
                            font-weight: bold;
                            padding: var(--size04) var(--size08);
                            border-radius: 4px;
                            margin-left: var(--size08);
                            transition: all 0.3s ease;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        @media screen and (max-width: 768px) {
                            font-size: var(--sp_size18);
                            gap: var(--sp_size10);
                            padding: var(--sp_size10) var(--sp_size14);
                            justify-content: space-evenly;
                            width: 100%;

                            &[href*=".pdf" i]::after {
                                font-size: var(--sp_size12);
                                padding: var(--sp_size04) var(--sp_size08);
                            }

                            &[href*=".xlsx" i]::after {
                                font-size: var(--sp_size12);
                                padding: var(--sp_size04) var(--sp_size08);
                            }

                            &[href*=".xls" i]::after {
                                font-size: var(--sp_size12);
                                padding: var(--sp_size04) var(--sp_size08);
                            }
                        }

                        @media screen and (max-width: 440px) {
                            font-size: var(--sp_size24);
                            gap: var(--sp_size12);
                            padding: var(--sp_size12) var(--sp_size16);
                            flex-direction: row;
                            align-items: flex-start;
                            text-align: center;
                            align-items: stretch;

                            &[href*=".pdf" i]::after {
                                font-size: var(--sp_size16);
                                padding: var(--sp_size04) var(--sp_size08);
                                margin-left: 0;
                            }

                            &[href*=".xlsx" i]::after {
                                font-size: var(--sp_size16);
                                padding: var(--sp_size04) var(--sp_size08);
                                margin-left: 0;
                            }

                            &[href*=".xls" i]::after {
                                font-size: var(--sp_size16);
                                padding: var(--sp_size04) var(--sp_size08);
                                margin-left: 0;
                            }
                        }
                    }
                }

                @media screen and (max-width: 768px) {
                    padding: var(--sp_size20) var(--sp_size24);
                    margin: var(--sp_size24) 0 var(--sp_size40);
                    border-radius: 8px;
                }

                @media screen and (max-width: 440px) {
                    padding: var(--sp_size24) var(--sp_size20);
                    margin: var(--sp_size24) 0 var(--sp_size40);
                    border-radius: 8px;
                }
            }

            .application-form-content-wrap {
                padding: 0 3em;

                .application-form-content {
                    h3 {
                        font-size: var(--size24);
                        color: var(--color-main);
                        line-height: 1.6;
                        margin-bottom: var(--size24);
                        text-wrap: pretty;

                        @media screen and (max-width: 768px) {
                            font-size: var(--sp_size26);
                            margin-bottom: var(--sp_size24);
                        }

                        @media screen and (max-width: 440px) {
                            font-size: var(--sp_size32);
                            margin-bottom: var(--sp_size24);
                        }
                    }

                    .application-form-table {
                        width: 100%;
                        border-collapse: collapse;
                        background-color: var(--color-bg);
                        border-radius: 0;
                        overflow: hidden;
                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
                        outline: 2px solid var(--color-main-light);
                        outline-offset: -2px;

                        tbody {
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: stretch;

                            @media screen and (max-width: 768px) {
                                display: flex;
                                flex-direction: column;
                                justify-content: flex-start;
                                align-items: stretch;
                            }
                        }

                        th {
                            background: linear-gradient(135deg, var(--color-main) 0%, var(--color-main-dark) 100%);
                            color: var(--color-bg);
                            padding: var(--size16) var(--size20);
                            text-align: left;
                            font-weight: bold;
                            font-size: var(--size18);
                            border-bottom: 2px solid var(--color-main-dark);
                            min-width: 120px;

                            @media screen and (max-width: 768px) {
                                padding: var(--sp_size12) var(--sp_size16);
                                font-size: var(--sp_size18);
                                min-width: 80px;
                            }

                            @media screen and (max-width: 440px) {
                                padding: var(--sp_size08) var(--sp_size12);
                                font-size: var(--sp_size24);
                                min-width: 60px;
                            }
                        }

                        td {
                            padding: var(--size16) var(--size20);
                            padding-left: 3em;
                            border-bottom: 1px solid var(--color-text-light);
                            font-size: var(--size18);
                            line-height: 1.6;
                            vertical-align: top;
                            color: var(--color-text-dark);
                            display: flex;
                            flex-direction: column;

                            &.red {
                                color: var(--color-red);
                            }

                            >img {
                                width: 100%;
                                height: auto;
                                max-width: 480px;

                                @media screen and (max-width: 768px) {
                                    max-width: fit-content;
                                }

                            }

                            @media screen and (max-width: 768px) {
                                padding: var(--sp_size12) var(--sp_size16);
                                font-size: var(--sp_size18);
                            }

                            @media screen and (max-width: 440px) {
                                padding: var(--sp_size08) var(--sp_size12);
                                font-size: var(--sp_size24);
                            }


                            a {
                                color: var(--color-main);
                                text-decoration: underline;
                                font-weight: 600;
                                transition: all 0.3s ease;

                                &:hover {
                                    color: var(--color-orange);
                                    text-decoration: none;
                                }

                                &[href*=".pdf" i]::after {
                                    content: 'PDF';
                                    background-color: var(--color-main);
                                    color: #fff;
                                    font-size: var(--size14);
                                    font-weight: bold;
                                    padding: var(--size04) var(--size08);
                                    border-radius: 4px;
                                    margin-left: var(--size08);
                                }
                            }
                        }

                        tr {
                            transition: background-color 0.3s ease;
                            border-bottom: 1px solid var(--color-main-light);

                            &:hover {
                                background-color: var(--color-bg-light);
                            }

                            &:last-child td:last-child {
                                border-bottom: none;
                            }
                        }

                        /* レスポンシブ対応 */
                        @media screen and (max-width: 768px) {
                            display: block;
                            overflow-x: auto;
                            white-space: normal;
                            font-size: var(--sp_size18);
                            border-radius: 0;

                            th,
                            td {
                                min-width: 120px;
                            }

                            th:nth-child(1),
                            td:nth-child(1) {
                                min-width: 10em;
                            }

                            th:nth-child(2),
                            td:nth-child(2) {
                                min-width: 30em;
                            }
                        }

                        @media screen and (max-width: 440px) {
                            font-size: var(--sp_size24);

                            th,
                            td {
                                min-width: 80px;
                                font-size: var(--sp_size24);
                            }

                            th:nth-child(1),
                            td:nth-child(1) {
                                min-width: 8em;
                            }

                            th:nth-child(2),
                            td:nth-child(2) {
                                min-width: 25em;
                            }
                        }
                    }
                }

                @media screen and (max-width: 768px) {
                    padding: 0;
                }

                @media screen and (max-width: 440px) {
                    padding: 0;
                }
            }

            @media screen and (max-width: 768px) {
                padding: 0;
            }

            @media screen and (max-width: 440px) {
                padding: 0;
            }

        }
    }

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

    @media screen and (max-width: 440px) {}
}

.application-form-text-bottom {
    background-color: var(--color-orange-light);
    padding: var(--size32);
    border-top: 1px solid var(--color-orange);
    margin-top: var(--size80);

    p {
        font-size: var(--size18);
        color: var(--color-text-dark);
        line-height: 1.6;
        margin-bottom: var(--size12);
        text-align: center;
        font-weight: 600;

        &:last-child {
            margin-bottom: 0;
            font-weight: normal;
        }

        @media screen and (max-width: 768px) {
            font-size: var(--sp_size18);
        }

        @media screen and (max-width: 440px) {
            font-size: var(--sp_size24);
        }
    }

    @media screen and (max-width: 768px) {
        padding: var(--sp_size16) var(--sp_size24);
        margin-top: var(--sp_size80);
    }

    @media screen and (max-width: 440px) {
        padding: var(--sp_size20) var(--sp_size20);
        margin-top: var(--sp_size80);
    }
}

/* カルーセルスタイル */
.application-form-content-img {
    margin: var(--size42) 0;

    @media screen and (max-width: 768px) {
        margin: var(--sp_size42) 0;
    }

    @media screen and (max-width: 440px) {
        margin: var(--sp_size42) 0;
    }

    .carousel-container {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        background: var(--color-bg);
    }

    .carousel-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 8px;
    }

    .carousel-slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .carousel-slide {
        flex: 0 0 100%;
        min-width: 100%;

        img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            display: block;

            @media screen and (max-width: 768px) {
                height: 300px;
            }

            @media screen and (max-width: 440px) {
                height: 250px;
            }
        }
    }

    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(44, 66, 156, 0.8);
        color: white;
        border: none;
        border-radius: 50%;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;

        &:hover {
            background: rgba(44, 66, 156, 1);
            transform: translateY(-50%) scale(1.1);
        }

        &:active {
            transform: translateY(-50%) scale(0.95);
        }

        @media screen and (max-width: 768px) {
            width: 40px;
            height: 40px;
        }

        @media screen and (max-width: 440px) {
            width: 36px;
            height: 36px;
        }
    }

    .carousel-prev {
        left: 16px;
    }

    .carousel-next {
        right: 16px;
    }

    .carousel-indicators {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 10;

        @media screen and (max-width: 768px) {
            bottom: 12px;
            gap: 6px;
        }

        @media screen and (max-width: 440px) {
            bottom: 8px;
            gap: 4px;
        }
    }

    .carousel-indicator {
        width: 12px;
        height: 12px;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.5);
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.8);
        }

        &.active {
            background: var(--color-main);
            transform: scale(1.2);
        }

        @media screen and (max-width: 768px) {
            width: 10px;
            height: 10px;
        }

        @media screen and (max-width: 440px) {
            width: 8px;
            height: 8px;
        }
    }
}

/* フォーム要素のスタイリング */
#app {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    .partsGrayBg {
        padding: var(--size80) 0 var(--size100);
        background-color: var(--color-bg);

        form {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 2px solid var(--color-main-light);
            padding: var(--size32);

            .partsRed {
                color: var(--color-red);
            }

            .partsTitle01 {
                margin-bottom: var(--size30);
                font-size: var(--size24);
                font-weight: 500;
                line-height: 1.4;
                letter-spacing: 0.025em;
                color: var(--color-main);
                text-align: center;

                @media screen and (max-width: 768px) {
                    font-size: var(--sp_size24);
                }

                @media screen and (max-width: 440px) {
                    font-size: var(--sp_size32);
                }
            }

            .partsWrap {
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
                padding: 0;
                font-size: var(--size18);

                @media screen and (max-width: 768px) {
                    font-size: var(--sp_size18);
                }

                @media screen and (max-width: 440px) {
                    font-size: var(--sp_size26);
                }

                .partsFormitem+.partsFormitem {
                    margin-top: var(--size20);
                }

                .partsFormitem .name {
                    margin-bottom: var(--size20);
                    font-weight: 500;
                    display: block;
                    font-weight: bold;
                    color: var(--color-main);
                    margin-bottom: var(--size08);
                    font-size: var(--size18);

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size18);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size26);
                    }
                }

                .partsFormitem input[type="text"],
                .partsFormitem input[type="email"],
                .partsFormitem input[type="number"],
                .partsFormitem input[type="tel"],
                .partsFormitem input[type="url"],
                .partsFormitem input[type="password"],
                .partsFormitem select,
                .partsFormitem textarea {
                    box-sizing: border-box;
                    display: block;
                    width: 100%;
                    margin: 0;
                    padding: var(--size12) var(--size16);
                    outline: none;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    border: 2px solid var(--color-main-light);
                    border-radius: 8px;
                    font-size: var(--size18);
                    transition: all 0.3s ease;
                    background-color: var(--color-bg);
                    color: var(--color-text-dark);

                    &:focus {
                        border-color: var(--color-orange);
                        box-shadow: 0 0 0 3px rgba(244, 154, 76, 0.1);
                    }

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size18);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size26);
                    }
                }

                .partsFormitem textarea {
                    resize: vertical;
                    min-height: 120px;
                    font-family: inherit;
                }

                .partsFormitem .selectWrap {
                    select {
                        cursor: pointer;
                        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
                        background-position: right 12px center;
                        background-repeat: no-repeat;
                        background-size: 16px;
                        padding-right: 40px;
                        appearance: none;

                        @media screen and (max-width: 768px) {
                            font-size: var(--sp_size18);
                        }

                        @media screen and (max-width: 440px) {
                            font-size: var(--sp_size26);
                        }
                    }
                }

                .partsFormitem .error {
                    display: none;
                    margin-top: var(--size10);
                    color: var(--color-red);
                    font-size: var(--size14);

                    @media screen and (max-width: 768px) {
                        font-size: var(--sp_size14);
                    }

                    @media screen and (max-width: 440px) {
                        font-size: var(--sp_size18);
                    }
                }

                .partsFormitem .flexBox {
                    display: flex;
                    align-items: center;
                }

                @media only screen and (max-width: 767px) {
                    .partsFormitem+.partsFormitem {
                        margin-top: var(--size10);
                    }

                    .partsFormitem .name {
                        margin-bottom: var(--size10);
                    }

                    .partsFormitem input[type="text"],
                    .partsFormitem input[type="email"],
                    .partsFormitem input[type="number"],
                    .partsFormitem input[type="tel"],
                    .partsFormitem input[type="url"],
                    .partsFormitem input[type="password"],
                    .partsFormitem textarea {
                        padding: var(--size10);
                    }

                    .partsFormitem .error {
                        margin-top: var(--size10);
                    }

                    .partsFormitem textarea {
                        height: var(--size10);
                    }
                }
            }

            .partsWhitebox {
                padding: 0;
                background-color: var(--color-bg);
                border-radius: 0;
                box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.16);
            }

            @media screen and (max-width: 768px) {
                padding: var(--sp_size20) var(--sp_size24);
            }

            @media screen and (max-width: 440px) {
                padding: var(--sp_size16) var(--sp_size20);
            }
        }

        .formBtnarea {
            margin: var(--size80) 0 0;

            .inLead {
                margin: 0 var(--size20) var(--size75);
                text-align: center;
                font-size: var(--size18);
                color: var(--color-text-dark);

                @media screen and (max-width: 768px) {
                    font-size: var(--sp_size18);
                }

                @media screen and (max-width: 440px) {
                    font-size: var(--sp_size24);
                }
            }

            .inBtns {
                display: flex;
                justify-content: center;
                gap: var(--size20);

                input,
                button {
                    box-sizing: border-box;
                    display: block;
                    width: 100%;
                    max-width: 460px;
                    margin: 10px 25px;
                    padding: 0;
                    height: 3em;
                    color: #fff;
                    font-size: var(--size22);
                    font-weight: 700;
                    text-align: center;
                    letter-spacing: 0.025em;
                    background: linear-gradient(90deg, var(--color-main) 0%, var(--color-main-light) 100%);
                    border-radius: 10px;
                    border: none;
                    outline: none;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    appearance: none;
                    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.1);
                    transition: all 0.3s ease;
                    cursor: pointer;

                    &:hover {
                        opacity: 0.8;
                        transform: translateY(-1px);
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                        color: var(--color-orange);
                    }

                    &:active {
                        transform: translateY(0);
                    }
                }

                .back {
                    color: var(--color-main);
                    background: #fff;
                    border: var(--color-main) solid 1px;

                    &:hover {
                        background-color: var(--color-main);
                        color: var(--color-bg);
                    }
                }

                @media screen and (max-width: 768px) {
                    gap: var(--sp_size12);
                    flex-direction: column;
                    align-items: center;

                    input,
                    button {
                        max-width: 260px;
                        margin: 10px 10px;
                        height: 60px;
                        font-size: var(--sp_size22);
                    }
                }

                @media screen and (max-width: 440px) {

                    input,
                    button {
                        font-size: var(--sp_size28);
                    }
                }
            }

            @media only screen and (max-width: 767px) {
                margin: 50px 0 0;

                .inLead {
                    margin-bottom: 35px;
                    text-align: left;
                }

                .inBtns {
                    margin: 0 10px;
                }
            }
        }
    }
}