/* =========================
JoyLink Contact
========================= */

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

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


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

.jl-contact-hero{
    padding:100px 20px 70px;
    text-align:center;
    background:#f8eef2;
    color:#3f3a39;
}

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

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

.jl-contact-hero h1{
    font-size:clamp(32px,5vw,54px);
    margin:0 0 20px;
    font-family:"Cormorant Garamond",serif;
    color:#4b403d;
    font-weight:500;
    line-height:1.35;
}

.jl-contact-lead{
    font-size:15px;
    line-height:2;
    max-width:700px;
    margin:0 auto;
    color:#5c534f;
}


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

.jl-contact-form-section{
    padding:60px 20px 80px;
    background:#f8f6f1;
}

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

.jl-contact-form{
    width:100%;
}


/* =========================
CONTACT FORM 7
========================= */

.jl-contact-form .wpcf7{
    width:100%;
}

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

.jl-contact-form .wpcf7 p{
    margin:0;
    color:#1c1c1c;
    font-size:14px;
    font-weight:700;
}

.jl-contact-form .wpcf7 input,
.jl-contact-form .wpcf7 select,
.jl-contact-form .wpcf7 textarea{
    width:100%;
    margin-top:8px;
    padding:14px 15px;
    border:1px solid #d8d8d8;
    background:#fff;
    font-size:15px;
    font-family:inherit;
}

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

.jl-contact-form .wpcf7 textarea{
    resize:vertical;
}


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

.jl-contact-form .wpcf7-radio{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:8px;
    padding:14px 15px;
    border:1px solid #d8d8d8;
    background:#fafafa;
}

.jl-contact-form .wpcf7-list-item{
    margin:0;
}

.jl-contact-form .wpcf7-list-item label{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:500;
    cursor:pointer;
}

.jl-contact-form .wpcf7-list-item input{
    width:auto;
    margin:0;
}


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

.jl-contact-form .wpcf7 input[type="submit"],
.jl-contact-form .wpcf7-submit,
.jl-contact-form .jl-contact-btn{
    width:100% !important;
    max-width:none !important;
    display:block !important;
    box-sizing:border-box;

    margin-top:8px;
    padding:18px;

    border:1px solid #e4d6dc !important;
    background:#f8eef2 !important;
    color:#4b403d !important;

    font-size:16px;
    font-weight:700;
    letter-spacing:.08em;
    font-family:inherit;
    text-align:center;

    cursor:pointer;
    transition:.3s;
}

.jl-contact-form .wpcf7 input[type="submit"]:hover,
.jl-contact-form .wpcf7-submit:hover,
.jl-contact-form .jl-contact-btn:hover{
    background:#f3e6eb !important;
}


/* =========================
CF7 MESSAGE
========================= */

.jl-contact-form .wpcf7-response-output{
    margin:20px 0 0;
    padding:14px;
    border-color:#c7a24d;
}


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

@media(max-width:768px){

    .jl-contact-hero{
        padding:76px 20px 56px;
        background:#f8eef2 !important;
        color:#3f3a39 !important;
    }

    .jl-contact-label{
        color:#b7923a !important;
    }

    .jl-contact-hero h1{
        font-size:clamp(28px,8vw,40px);
        margin:0 0 20px;
        line-height:1.35;
        color:#4b403d !important;
        font-weight:500;
    }

    .jl-contact-lead{
        font-size:14px;
        line-height:1.9;
        color:#5c534f !important;
    }

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

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

}