/* =========================
   Contact hero
========================= */

.contact-hero{

   position:relative;

    width:100%;

    height:420px;

    overflow:hidden;

    margin-top:0;

    padding-top:0;

    

}


.contact-hero img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;


}



.contact-hero__title{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.25);

    color:white;

    padding-top:60px;



}


.contact-hero__title h1{

    font-family:"Plus Jakarta Sans", sans-serif;

    font-size:38px;

    font-weight:300;

    letter-spacing:.25em;

    text-transform:uppercase;

}

.contact-hero__title p{

    font-family:"Noto Sans JP", sans-serif;

    font-size:18px;

    letter-spacing:.15em;
    text-shadow:0 2px 8px rgba(0,0,0,.35);

}

.contact-page main{

    padding-top:0;

}
/* =========================
   Contact message
========================= */

.contact-message{

    max-width:700px;

    margin:80px auto;

    text-align:center;

    line-height:2;

}




.contact-message h2{

    font-size:26px;

    margin-bottom:30px;

    font-family:"Shippori Mincho",serif;
　　
   
}


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

.contact{

    padding:120px 20px;

    background:#f8f6f1;

}





.contact-inner{

    max-width:720px;
    margin:auto;
     padding-top: 30px;

}



.contact-title{

    text-align:center;

    font-size:42px;

    letter-spacing:.15em;

    margin-bottom:40px;

    font-family:"Urbanist","Noto Sans JP",sans-serif;

    font-size:clamp(48px,6vw,72px);

    font-weight:300;

    letter-spacing:.18em;

    text-transform:uppercase;

}



.contact-lead{

    text-align:center;

    line-height:2;
  
    margin-bottom:70px;
    


}



.contact-form{

    background:#fff;

    padding:60px;

}



.form-item{

    margin-bottom:35px;

}



.form-item label{

    display:block;

    margin-bottom:12px;

    font-size:15px;

}



.form-item label span{

    font-size:12px;

    margin-left:10px;

}



.form-item input,
.form-item select,
.form-item textarea{


    width:100%;

    padding:15px;

    border:1px solid #ddd;

    background:#faf9f5;

    font-size:16px;

}



.form-item textarea{

    height:180px;

}

.radio-group{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.radio-group label{

    display:flex;

    align-items:center;

    gap:10px;

    margin:0;

}



.radio-group input{

    width:auto;

}



.contact-button{


    display:block;

    width:220px;

    margin:50px auto 0;


    padding:18px;


    background:#333;

    color:#fff;


    border:none;


    cursor:pointer;


    transition:.3s;

}



.contact-button:hover{

    opacity:.8;

}

@media(max-width:768px){


.contact{

    padding:0px 20px;

}


.contact-title{

    font-size:28px;

}



.contact-lead{

    font-size:15px;

    margin-bottom:40px;

}



.contact-form{

    padding:30px 20px;

}



.form-item{

    margin-bottom:25px;

}



.contact-button{

    width:100%;

}


}

@media(max-width:768px){

.contact-hero{

    height:280px;

}


.contact-hero h1{

    font-size:30px;

}

}

@media(max-width:768px){

.contact-message{

    margin:50px auto;

    font-size:15px;

}

}