@charset "utf-8";

.contact_section {
    .w960 {
        max-width: 960px;
        width: 90%;
        margin: 0 auto;
        padding-bottom: 120px;

        @media (max-width: 767px) {
            padding-bottom: 80px;
            max-width: 100%;
        }

        .headwrap {
            margin-bottom: 100px;

            @media (max-width: 900px) {
                margin-bottom: 40px;
            }

            .main-title {
                font-family: var(--font-main);
                font-weight: bold;
                font-size: clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
                text-align: left;
                color: #fff;
                padding-bottom: 20px;
                border-bottom: 1px solid #FFF;
                margin-bottom: 20px;
                text-align: center;
            }

            .desc {
                margin-bottom: 40px;

                p {
                    font-family: var(--font-main);
                    font-weight: bold;
                    font-size: clamp(0.75rem, 0.644rem + 0.45vw, 1.188rem);
                    line-height: calc(36/19*100%);
                    text-align: center;
                    color: #fff;
                    border: 1px solid rgba(0, 0, 0, 0);

                    @media (max-width: 900px) {
                        line-height: calc((20 / 14) * 1em);
                    }
                }
            }
        }

        .telbox {
            margin-bottom: 64px;

            .tellink {
                display: flex;
                gap: 39px;
                align-items: center;
                justify-content: center;
                transition: all .4s ease;

                .linktext {
                    display: flex;
                    flex-direction: column;

                    .main {
                        font-family: var(--font-mein);
                        font-weight: bold;
                        font-size: clamp(2.375rem, 2.343rem + 0.13vw, 2.5rem);
                        text-align: center;
                        color: #fff;
                    }

                    .sub {
                        font-family: var(--font-mein);
                        font-weight: bold;
                        font-size: clamp(0.938rem, 0.922rem + 0.07vw, 1rem);
                        line-height: calc(30/16*100%);
                        text-align: left;
                        color: #fff;

                    }
                }
            }

            .tellink:hover {
                filter: opacity(50%);
                transition: all .4s ease;
            }
        }

        .btn {
            height: 75px;
            max-width: 292px;
            width: 100%;
            margin: 0 auto;
            background-color: #FFFFFF;
            font-family: var(--font-main);
            font-weight: bold;
            font-size: 24px;
            color: #000;
            border: 1px solid rgba(0, 0, 0, 0);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50px;
            transition: all .4s ease;
        }

        .btn:hover {
            filter: opacity(50%);
            transition: all .4s ease;
        }
    }

    .formWrap {
        font-size: 16px;
        max-width: 840px;
        width: 100%;
        margin: 0 auto;

        @media (max-width: 1023px) {
            max-width: 94%;
        }

        .formwrapper {
            display: flex;
            flex-direction: column;
            gap: 40px;

            @media (max-width: 900px) {
                gap: 24px;
            }
        }

        .row {
            display: grid;
            grid-template-columns: 33% 1fr;
            gap: 80px;
            margin: 0;
            padding-bottom: 40px;
            border-bottom: 1px solid #FFF;

            @media (max-width: 900px) {
                display: flex;
                flex-direction: column;
                gap: 8px;
                padding-bottom: 24px;
            }
        }

        .col {
            padding: 0;
            align-items: center;
            justify-content: center;
            display: flex;
            gap: 23px;
        }

        .formcolumn {
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
        }

        .formTh {
            display: flex;
            gap: 8px;
            align-items: center;

            .label {
                font-family: var(--font-main);
                font-weight: normal;
                font-size: 24px;
                text-align: left;
                color: #fff;

                @media (max-width: 900px) {
                    font-size: 14px;
                }
            }

            .requiredText {
                font-family: "Noto Sans JP";
                font-weight: 500;
                font-size: 24px;
                color: #fff;

                @media (max-width: 900px) {
                    font-size: 16px;
                    line-height: 160%;
                }
            }
        }

        .formTd {

            select,
            input,
            textarea {
                width: 100%;
                border-radius: 3px;
                background: #fff;
                border: 1px solid #d3d3d3;
                padding: 0 10px;
                font-size: max(14px, 16px);
            }

            select,
            input {
                height: 60px;
            }

            textarea {
                line-height: calc((32 / 16) * 1em);
                min-height: 193px;
                max-height: 193px;
                max-width: 100%;

                @media (max-width: 1023px) {
                    min-height: 150px;
                    max-height: 150px;
                }
            }
        }

        #privacy {
            appearance: none;
            -webkit-appearance: none;
            min-width: 30px;
            height: 30px;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            background-color: #FFF;
            border: 1px solid #FFF;
        }

        .privacyLabel {
            font-family: var(--font-mein);
            font-weight: 400;
            font-size: max(14px, 16px);
            letter-spacing: 0.08em;
            line-height: calc((32 / 16) * 1em);
            color: #FFF;

            @media (max-width: 1023px) {
                font-size: 14px;
            }
        }

        #privacy:checked {
            background-color: #FFF;
            border-color: #FFF;
        }

        #privacy:checked::after {
            content: "";
            position: absolute;
            left: 8px;
            top: 4px;
            width: 8px;
            height: 14px;
            border-right: 2px solid #00141F;
            border-bottom: 2px solid #00141F;
            transform: rotate(45deg);
        }

        .privacyBox {
            width: 100%;
            height: 192px;
            margin: 0 auto;
            padding: 20px 5%;
            border: 1px solid #898989;
            overflow-y: scroll;
            overflow-x: hidden;
            background-color: #fff;
            border-radius: 3px;
            font-size: max(14px, 16px);
            line-height: calc((32 / 16) * 1em);

            @media (max-width: 900px) {
                font-size: 16px;
                line-height: 160%;
            }
        }


        .secbtn {
            max-width: 354px;
            width: 100%;
            height: 104px;
            font-family: var(--font-mein);
            font-weight: bold;
            font-size: 28px;
            text-align: center;
            color: #031F2D;
            background: #FFFFFF;

            @media (max-width: 900px) {
                font-size: 16px;
                height: 50px;
                width: 80%;
            }
        }

        .secbtn:hover {
            filter: opacity(50%);
            cursor: pointer;
        }
    }
}

.formRow.privacy {
    grid-area: 2 / 1 / 3 / 3;
}