: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;
    --color-red: #ff2828;
    --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;
}


#main-area {
    .main-wrap {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;

        &.main-wrap {
            main {
                width: 100%;
                padding: var(--side-padding);

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

                            .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+.partsFormitem {
                                    margin-top: var(--size20);

                                    input[type="date"] {
                                        font-size: var(--size18);
                                    }
                                }

                                .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 select, */
                                .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);
                                    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="date"] {
                                    box-sizing: border-box;
                                    display: block;
                                    width: 50%;
                                    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);
                                    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 textarea {
                                    resize: vertical;
                                    min-height: 120px;
                                    font-family: inherit;
                                    resize: vertical;
                                }

                                .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 {
                                    div {

                                        input[type="date"] {
                                            background-color: #ffffff;
                                            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 .error {
                                    display: none;
                                    margin-top: var(--size10);
                                    color: #CC0000;
                                }

                                .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 select, */
                                    .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);
                            }



                        }

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

                            .inLead {
                                margin: 0 var(--size20) var(--size75);
                                text-align: center;
                            }

                            .inBtns {
                                display: flex;
                                justify-content: center;

                                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: rgb(8, 80, 120);
                                    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: opacity 0.3s;


                                }


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

                                .back {
                                    color: #4491A1;
                                    background: #fff;
                                    border: #58909F solid 1px;
                                }


                            }
                        }

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

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

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

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

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

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

/*************************************************

completePage - finishTexts

*************************************************/
.finishTexts {
    text-align: center;
    padding: var(--size40) var(--size32);
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    border: 2px solid var(--color-main-light);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin: var(--size32) 0;
}

.finishTexts h3 {
    color: var(--color-main);
    font-size: var(--size28);
    font-weight: 700;
    margin-bottom: var(--size24);
    line-height: 1.4;
    letter-spacing: 0.025em;
}

.finishTexts p {
    font-size: var(--size18);
    line-height: 1.6;
    margin-bottom: var(--size16);
    color: var(--color-text-dark);
}

.finishTexts p:last-child {
    margin-bottom: 0;
}

.finishTexts .red {
    color: var(--color-red);
    font-weight: 600;
    background-color: rgba(255, 40, 40, 0.05);
    padding: var(--size16);
    border-radius: 8px;
    border-left: 4px solid var(--color-red);
    margin-top: var(--size24);
}

@media only screen and (max-width: 767px) {
    .finishTexts {
        text-align: left;
        padding: var(--sp_size32) var(--sp_size24);
        margin: var(--sp_size24) 0;
    }

    .finishTexts h3 {
        font-size: var(--sp_size26);
        margin-bottom: var(--sp_size20);
    }

    .finishTexts p {
        font-size: var(--sp_size18);
        margin-bottom: var(--sp_size14);
    }

    .finishTexts .red {
        padding: var(--sp_size14);
        margin-top: var(--sp_size20);
    }
}

@media screen and (max-width: 440px) {
    .finishTexts h3 {
        font-size: var(--sp_size28);
    }

    .finishTexts p {
        font-size: var(--sp_size20);
    }
}