/* =========================
   お問い合わせページ
========================= */

.contact-page{
  background:var(--bg);
  color:var(--text);
}

.contact-page .section{
  padding:80px 0;
}

.contact-page-head,
.contact-page-message,
.contact-form-wrap{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}

.contact-page-head{
  text-align:center;
}

.contact-page-head .kicker{
  margin:0 0 14px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--accent-dark);
}

.contact-page-head h1{
  margin:0;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(2rem,4vw,3.4rem);
  line-height:1.35;
}

.contact-page-lead{
  margin:24px auto 0;
  font-size:18px;
  line-height:1.9;
}

.contact-page-message{
  margin-top:42px;
  font-size:16px;
  line-height:1.95;
}

.contact-page-message p{
  margin:0 0 18px;
}

.contact-page-message p:last-child{
  margin-bottom:0;
}

.contact-form-wrap{
  background:#fff;
  border:1px solid var(--line);
  padding:48px;
}

.contact-form-head{
  margin-bottom:34px;
}

.contact-form-head h2{
  margin:0 0 14px;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(1.7rem,3vw,2.4rem);
  line-height:1.4;
}

.contact-form-head p{
  margin:0;
  font-size:16px;
  line-height:1.9;
}

.contact-form-body{
  font-size:16px;
}

.contact-form-body .wpcf7-form > p{
  margin:0 0 26px;
}

.contact-form-body .wpcf7-form > p:last-of-type{
  margin-bottom:0;
}

.contact-form-body label{
  display:block;
  font-size:16px;
  font-weight:700;
  line-height:1.8;
}

.contact-form-body input[type="text"],
.contact-form-body input[type="email"],
.contact-form-body input[type="url"],
.contact-form-body input[type="tel"],
.contact-form-body select,
.contact-form-body textarea{
  display:block;
  width:100%;
  margin-top:10px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:16px;
  line-height:1.7;
  box-sizing:border-box;
}

.contact-form-body select{
  min-height:52px;
}

.contact-form-body textarea{
  min-height:220px;
  resize:vertical;
}

.contact-form-body input[type="text"]:focus,
.contact-form-body input[type="email"]:focus,
.contact-form-body input[type="url"]:focus,
.contact-form-body input[type="tel"]:focus,
.contact-form-body select:focus,
.contact-form-body textarea:focus{
  outline:2px solid rgba(111,143,107,.22);
  outline-offset:1px;
  border-color:var(--accent);
}

.contact-form-body .wpcf7-acceptance{
  display:block;
  margin-top:4px;
}

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

.contact-form-body .wpcf7-acceptance label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:15px;
  font-weight:400;
  line-height:1.8;
  cursor:pointer;
}

.contact-form-body .wpcf7-acceptance input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:5px 0 0;
  flex:0 0 auto;
}

.contact-form-body input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 30px;
  border:1px solid var(--accent);
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.contact-form-body input[type="submit"]:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
}

.contact-form-body .wpcf7-spinner{
  vertical-align:middle;
}

.contact-form-body .wpcf7-not-valid-tip{
  margin-top:8px;
  font-size:15px;
  line-height:1.7;
}

.contact-form-body .wpcf7-response-output{
  margin:24px 0 0 !important;
  padding:14px 16px !important;
  font-size:15px;
  line-height:1.8;
}

@media(max-width:800px){

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

  .contact-form-wrap{
    padding:36px 28px;
  }

}

@media(max-width:640px){

  .contact-page .section{
    padding:52px 0;
  }

  .contact-page-lead{
    font-size:17px;
  }

  .contact-page-message,
  .contact-form-head p,
  .contact-form-body{
    font-size:16px;
  }

  .contact-form-wrap{
    padding:28px 20px;
  }

  .contact-form-body input[type="submit"]{
    width:100%;
  }

}