/* =========================================
   Contact page
========================================= */

section.contact-intro{
    padding:88px 0 112px;
}

.contact-intro__title{
    margin:0;
    font-family:"Times New Roman", serif;
    font-size:clamp(3.5rem, 7vw, 6rem);
    font-weight:400;
    letter-spacing:-0.04em;
    line-height:1;
}

.contact-intro__lead{
    max-width:650px;
    margin-top:72px;
    font-size:1.0625rem;
    line-height:2;
}

.contact-intro__lead p + p{
    margin-top:28px;
}

section.contact-form-section{
    padding:0 0 112px;
}

.contact-form-section__inner{
    display:grid;
    grid-template-columns:minmax(180px, 0.45fr) minmax(0, 1fr);
    gap:clamp(48px, 8vw, 128px);
    padding-top:80px;
    border-top:1px solid #e5e5e5;
}

.contact-form-section__label{
    color:#777;
    font-family:"Times New Roman", serif;
    font-size:0.875rem;
    letter-spacing:0.12em;
}

.contact-form-section__title{
    margin-top:12px;
    font-family:"Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
    font-size:clamp(2rem, 3.5vw, 3rem);
    font-weight:400;
    letter-spacing:0.02em;
    line-height:1.3;
}

.contact-form{
    width:100%;
    max-width:760px;
}

.contact-form__required-note{
    color:#777;
    font-size:0.8125rem;
    text-align:right;
}

.contact-form__required-note span{
    color:#8a3f3f;
}

.contact-form__error{
    margin:24px 0 32px;
    padding:20px 24px;
    border:1px solid #b68787;
    color:#713535;
    font-size:0.9375rem;
    line-height:1.8;
}

.contact-form__error p + p{
    margin-top:8px;
}

.contact-form__field{
    margin-top:36px;
}

.contact-form__field label{
    display:block;
    font-size:0.9375rem;
    font-weight:400;
}

.contact-form__required,
.contact-form__optional{
    margin-left:10px;
    font-size:0.75rem;
    font-weight:400;
}

.contact-form__required{
    color:#8a3f3f;
}

.contact-form__optional{
    color:#888;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form input[type="url"],
.contact-form select,
.contact-form textarea{
    width:100%;
    margin-top:10px;
    border:1px solid #ccc;
    border-radius:0;
    background:#fff;
    color:#222;
    font:inherit;
    font-size:1rem;
    line-height:1.6;
    transition:border-color .2s ease;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="number"],
.contact-form input[type="url"],
.contact-form select{
    height:56px;
    padding:0 16px;
}

.contact-form textarea{
    min-height:220px;
    padding:14px 16px;
    resize:vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
    border-color:#555;
    outline:2px solid transparent;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#999;
}

.contact-form__select-wrap{
    position:relative;
}

.contact-form__select-wrap::after{
    content:"";
    position:absolute;
    top:50%;
    right:18px;
    width:8px;
    height:8px;
    border-right:1px solid #555;
    border-bottom:1px solid #555;
    pointer-events:none;
    transform:translateY(-70%) rotate(45deg);
}

.contact-form select{
    appearance:none;
    padding-right:48px;
}

.contact-form__help{
    margin-top:8px;
    color:#777;
    font-size:0.8125rem;
    line-height:1.8;
}

.contact-form__service-fields{
    margin-top:48px;
    padding-top:40px;
    border-top:1px solid #e5e5e5;
}

.contact-form__service-fields[hidden]{
    display:none;
}

.contact-form__service-title{
    margin:0;
    font-family:"Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
    font-size:1.375rem;
    font-weight:400;
}

.contact-form__choice-field{
    min-width:0;
    padding:0;
    border:0;
}

.contact-form__choice-field legend{
    padding:0;
    font-size:0.9375rem;
    font-weight:400;
}

.contact-form__choices{
    display:flex;
    flex-wrap:wrap;
    gap:14px 28px;
    margin-top:14px;
}

.contact-form__choices label{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-weight:300;
    cursor:pointer;
}

.contact-form__choices input{
    width:18px;
    height:18px;
    margin:0;
    accent-color:#222;
}

.contact-form__honeypot{
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.contact-form__consent{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-top:48px;
}

.contact-form__consent input{
    flex:0 0 auto;
    width:18px;
    height:18px;
    margin:5px 0 0;
    accent-color:#222;
}

.contact-form__consent label{
    font-size:0.875rem;
    line-height:1.9;
}

.contact-form__consent a{
    border-bottom:1px solid #777;
}

.contact-form__submit{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:240px;
    height:60px;
    margin-top:48px;
    border:1px solid #222;
    background:#222;
    color:#fff;
    font-family:"Times New Roman", serif;
    font-size:1.125rem;
    letter-spacing:0.04em;
    cursor:pointer;
    transition:background .2s ease, color .2s ease;
}

.contact-form__submit:hover{
    background:#fff;
    color:#222;
}

.contact-form__submit:disabled{
    cursor:not-allowed;
    opacity:.55;
}

@media (max-width:768px){

    section.contact-intro{
        padding:56px 0 64px;
    }

    .contact-intro__title{
        font-size:3.5rem;
    }

    .contact-intro__lead{
        margin-top:48px;
        font-size:0.9375rem;
        line-height:1.9;
    }

    .contact-intro__lead p + p{
        margin-top:22px;
    }

    .contact-intro__lead br{
        display:none;
    }

    section.contact-form-section{
        padding-bottom:64px;
    }

    .contact-form-section__inner{
        display:block;
        padding-top:56px;
    }

    .contact-form-section__title{
        font-size:2rem;
    }

    .contact-form{
        margin-top:40px;
    }

    .contact-form__field{
        margin-top:30px;
    }

    .contact-form__required-note{
        text-align:left;
    }

    .contact-form__help{
        font-size:0.8125rem;
    }

    .contact-form__service-fields{
        margin-top:40px;
        padding-top:32px;
    }

    .contact-form__service-title{
        font-size:1.25rem;
    }

    .contact-form__choices{
        display:grid;
        gap:14px;
    }

    .contact-form__consent{
        margin-top:40px;
    }

    .contact-form__submit{
        width:100%;
        margin-top:40px;
    }
}