/* =========================
ClearNize Contact
========================= */

.cn-contact-page{
    background:#f5f5f2;
    color:#222;
    font-family:"Noto Sans JP",sans-serif;
}

.cn-contact-page *{
    box-sizing:border-box;
}


/* =========================
HERO
========================= */

.cn-contact-hero{
    padding:100px 20px 70px;
    text-align:center;
    background:#14523d;
    color:#fff;
}

.cn-contact-hero-inner{
    max-width:900px;
    margin:0 auto;
}

.cn-contact-label{
    color:#c7a24d;
    letter-spacing:.15em;
    font-size:14px;
    margin-bottom:12px;
}

.cn-contact-hero h1{
    font-size:clamp(32px,5vw,54px);
    margin:0 0 20px;
    font-family:"Cormorant Garamond",serif;
}

.cn-contact-lead{
    font-size:15px;
    line-height:2;
    max-width:700px;
    margin:0 auto;
}


/* =========================
FORM
========================= */

.cn-contact-form-section{
    padding:80px 20px;
}

.cn-contact-container{
    max-width:860px;
    margin:0 auto;
    background:#fff;
    padding:50px;
    border:1px solid #dedbd2;
    box-shadow:0 16px 40px rgba(30,50,40,.08);
}

.cn-contact-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.cn-form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:24px;
}

.cn-form-group > label{
    font-size:14px;
    font-weight:700;
    color:#1c1c1c;
}

.cn-required{
    display:inline-block;
    margin-left:8px;
    padding:2px 8px;
    background:#14523d;
    color:#fff;
    font-size:11px;
    font-weight:700;
}

.cn-form-group input[type="text"],
.cn-form-group input[type="email"],
.cn-form-group input[type="tel"],
.cn-form-group input[type="file"],
.cn-form-group select,
.cn-form-group textarea{
    width:100%;
    padding:14px 15px;
    border:1px solid #d8d8d8;
    background:#fff;
    font-size:15px;
    font-family:inherit;
}

.cn-form-group input:focus,
.cn-form-group select:focus,
.cn-form-group textarea:focus{
    outline:none;
    border-color:#c7a24d;
    box-shadow:0 0 0 3px rgba(199,162,77,.14);
}

.cn-form-group textarea{
    resize:vertical;
    min-height:180px;
}


/* =========================
RADIO / CHECK
========================= */

.cn-radio-group,
.cn-check-group{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:18px;
    border:1px solid #d8d8d8;
    background:#fafafa;
}

.cn-radio-group .wpcf7-list-item,
.cn-check-group .wpcf7-list-item{
    margin:0;
}

.cn-radio-group label,
.cn-check-group label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:500;
    color:#1c1c1c;
    cursor:pointer;
}

.cn-radio-group input,
.cn-check-group input{
    width:auto;
    margin:0;
}

.cn-radio-group .wpcf7-list-item-label,
.cn-check-group .wpcf7-list-item-label{
    background:none !important;
    color:#1c1c1c !important;
    padding:0 !important;
    font-size:14px !important;
    font-weight:500 !important;
}


/* =========================
ERROR MESSAGE
========================= */

.wpcf7-not-valid-tip{
    color:#d93025;
    font-size:14px;
    margin-top:6px;
}

.wpcf7-response-output{
    margin:24px 0 0;
    padding:14px 16px;
    border-radius:0;
    font-size:14px;
}


/* =========================
BUTTON
========================= */

.cn-contact-page .cn-contact-btn,
.cn-contact-page .wpcf7-submit,
.cn-contact-page input[type="submit"],
.cn-contact-page button[type="submit"]{
    width:100% !important;
    margin-top:8px !important;
    padding:18px !important;
    border:none !important;
    background:#14523d !important;
    background-color:#14523d !important;
    color:#fff !important;
    font-size:16px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    cursor:pointer !important;
    transition:.3s !important;
    font-family:inherit !important;
    border-radius:0 !important;
}

.cn-contact-page .cn-contact-btn:hover,
.cn-contact-page .wpcf7-submit:hover,
.cn-contact-page input[type="submit"]:hover,
.cn-contact-page button[type="submit"]:hover{
    background:#0f3f30 !important;
    background-color:#0f3f30 !important;
    color:#fff !important;
}


/* =========================
SP
========================= */

@media(max-width:768px){

    .cn-contact-hero{
        padding:76px 20px 56px;
    }

    .cn-contact-hero h1{
        font-size:clamp(28px,8vw,40px);
        margin:0 0 20px;
        line-height:1.35;
    }

    .cn-contact-lead{
        font-size:14px;
        line-height:1.9;
    }

    .cn-contact-form-section{
        padding:56px 18px;
    }

    .cn-contact-container{
        padding:28px 20px;
    }

    .cn-radio-group,
    .cn-check-group{
        grid-template-columns:1fr;
    }

}