@charset "utf-8";

#contact {
        .wrap {
                .contents {
                        max-width:800px;
                        dl {
                                display:grid;
                                grid-template-columns:30% 1fr;
                                border-bottom:1px solid #cccccc;
                                padding:1em 0;
                                dt {
                                        display:grid;
                                        align-items:center;
                                        &.must {
                                                grid-template-columns:auto auto;
                                                justify-content:start;
                                                grid-gap:.5em;
                                                &::before {
                                                        content:'必須';
                                                        background-color:#DA0B14;
                                                        color:#FFFFFF;
                                                        font-weight:500;
                                                        padding:.25em .33em;
                                                        font-size:.9em;
                                                }
                                        }
                                }
                                dd {
                                        input[type="text"],
                                        input[type="email"],
                                        input[type="tel"],
                                        textarea {
                                                width:100%;
                                                padding:.5em;
                                                border:1px solid #CCCCCC;
                                                background-color:#f5f5f5;
                                        }
                                        p {
                                                padding-top:.5em;
                                                font-size:.9em;
                                                a {
                                                        color:var(--color_main);
                                                }
                                        }
                                        &.yourname {
                                                display:grid;
                                                grid-template-columns:repeat(4,auto);
                                                align-items:center;
                                                justify-content:start;
                                                grid-gap:.5em;
                                                input[type="text"] {
                                                        width:10em;
                                                }
                                                
                                        }
                                        .wpcf7-not-valid-tip {
                                                font-size:.9em;
                                                padding-top:.5em;
                                        }
                                }
                        }
                        .btnwrap {
                                padding-top:30px;
                                display:flex;
                                gap:.5em;
                                align-items:center;
                                justify-content:center;
                                position:relative;
                                input[type="submit"],
                                .wpcf7-previous {
                                        font-size:1.8rem;
                                        border:none;
                                        background-color:var(--color_main);
                                        color:#FFFFFF;
                                        padding:.5em;
                                        width:10em;
                                }
                                .wpcf7-previous {
                                        background-color:#999999;
                                }
                                .wpcf7-spinner {
                                        position:absolute;
                                        top:auto;
                                        bottom:-30px;
                                }
                        }
                }
        }
        &.thanks {
                .wrap {
                        .contents {
                                p {
                                        font-size:1.8rem;
                                        text-align:center;
                                        background-color:#EFEFEF;
                                        padding:2em;
                                        border-radius:1em;
                                }
                        }
                }
        }
}


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

}

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

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

        #contact {
                .wrap {
                        .contents {
                                dl {
                                        grid-template-columns:1fr;
                                        dt {
                                                margin-bottom:1em;
                                                font-size:1.5rem;
                                        }
                                        dd {
                                                &.yourname {
                                                        input[type="text"] {
                                                                max-width:33vw;
                                                        }
                                                        
                                                }
                                        }
                                }
                                .btnwrap {
                                        input[type="submit"],
                                        .wpcf7-previous {
                                                font-size:1.6rem;
                                        }
                                }
                        }
                }
                &.thanks {
                        .wrap {
                                .contents {
                                        p {
                                                font-size:1.5rem;
                                                padding:1em;
                                        }
                                }
                        }
                }
        }

}