@charset "utf-8";

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

        @media (max-width: 900px) {
            padding-bottom: 80rem;
            max-width: 350rem;
        }

        .headwrap {
            margin-bottom: 100rem;

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

            .main-title {
                font-family: var(--font-main);
                font-weight: bold;
                font-size: 40rem;
                text-align: left;
                color: #fff;
                padding-bottom: 20rem;
                border-bottom: 1rem solid #FFF;
                margin-bottom: 20rem;
                text-align: center;

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

            .desc {
                margin-bottom: 40rem;

                p {
                    font-family: var(--font-main);
                    font-weight: bold;
                    font-size: 19rem;
                    line-height: 36rem;
                    text-align: center;
                    color: #fff;
                    border: 1rem solid rgba(0, 0, 0, 0);

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

        .telbox {
            margin-bottom: 64rem;

            .tellink {
                display: flex;
                gap: 39rem;
                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: 40rem;
                        text-align: center;
                        color: #fff;

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

                    .sub {
                        font-family: var(--font-mein);
                        font-weight: bold;
                        font-size: 16rem;
                        line-height: 30rem;
                        text-align: left;
                        color: #fff;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        .formTd {

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

            select,
            input {
                height: 60rem;
            }

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

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

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

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

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

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

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

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

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


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

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

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

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