@charset "UTF-8";

/* =====================================================
  CONTACT PAGE – 
===================================================== */

.page-contact{
  background:#fff;
  color:#111;
}

/* =========================
  Layout
========================= */
.contact-section{
  padding: 90px 0 120px;
}

.page-contact .container.narrow{
  max-width: 1100px;
}

.section-title{
  text-align:center;
  margin: 0 0 46px;
  font-family: var(--font-en, "Cinzel", serif);
  letter-spacing: .22em;
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 34px);
  color: rgba(0,0,0,.90);
}

/* =========================
  Safety: 
========================= */
.page-contact,
.page-contact #main,
.page-contact .site-main,
.page-contact .contact-section,
.page-contact .container.narrow{
  position: relative;
  z-index: 50;
}

/* =====================================================
  CF7 Form Wrapper
===================================================== */
.contact-form{
  width:min(980px,100%);
  margin:0 auto;
}

.wpcf7 form{ margin:0; }
.wpcf7 .wpcf7-form-control-wrap{ display:block; }

/* =====================================================
  DL Structure
===================================================== */
.contact-form__dl{
  margin:0;
}

.contact-form__dl dt{
  margin:0;
  padding:18px 0 10px;
  font-family: var(--font-jp, "Noto Serif JP", serif);
  font-size:14px;
  letter-spacing:.06em;
  color:rgba(0,0,0,.78);
}

.contact-form__dl dd{
  margin:0;
  padding:0 0 18px;
  border-bottom:1px solid rgba(0,0,0,.10);
}

.contact-form .must{
  display:inline-block;
  margin-left:10px;
  font-size:11px;
  letter-spacing:.10em;
  color:rgba(0,0,0,.55);
}

/* =====================================================
  Inputs / Textarea
===================================================== */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
  color:#111;

  padding:11px 14px;
  font-size:14px;
  line-height:1.8;
  letter-spacing:.03em;

  border-radius:0;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}

.contact-form textarea,
.wpcf7 textarea{
  min-height:170px;
  resize:vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{
  color:rgba(0,0,0,.35);
}

.contact-form input:focus,
.contact-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus{
  border-color:rgba(0,0,0,.32);
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
}

/* =====================================================
  Checkbox
===================================================== */
.wpcf7 .wpcf7-form-control.wpcf7-checkbox{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
}

.wpcf7 .wpcf7-list-item{ margin:0; }

.wpcf7 .wpcf7-list-item > label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  user-select:none;
  font-size:13px;
  letter-spacing:.04em;
  color:rgba(0,0,0,.70);
}

.wpcf7 input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  border:1px solid rgba(0,0,0,.22);
  accent-color: rgba(0,0,0,.85);
}

/* =====================================================
  hCaptcha（左寄せ固定）
===================================================== */
.h-captcha{
  position:relative;
  display:block;
  margin: 26px 0 0;
  padding:0;
  clear:both;
  width:100%;
}

.h-captcha > div{
  margin-left:0 !important;
}

/* =====================================================
  Submit Button
===================================================== */
.send-button{
  width:100%;
  margin: 26px 0 0;
  text-align:left;               /* ← 左寄せ */
}

/* CF7が input submit の場合でも確実に線が出るように border-bottom 方式 */
.contact-submit,
.wpcf7 input[type="submit"]{
  display:inline-block;          /* ← 幅を文字に合わせる */
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  cursor:pointer;

  font-family: var(--font-en, "Cinzel", serif);
  font-size:15px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color: rgba(0,0,0,.88);

  padding: 10px 0 12px;          /* ← 横paddingを0にして“文字の下に線” */
  border-bottom: 2px solid #c8a24a; /* ← GOLD（これで消えない） */

  transition: opacity .35s ease, transform .35s ease, border-color .35s ease;
}

.contact-submit:hover,
.wpcf7 input[type="submit"]:hover{
  opacity:.70;
  transform: translateY(-1px);
  border-bottom-color:#a8822e;
}

.contact-submit:active,
.wpcf7 input[type="submit"]:active{
  transform: translateY(0);
}

/* =====================================================
  CF7 Validation (inline)
===================================================== */
.wpcf7-not-valid-tip{
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(0,0,0,.62);
}

/* =====================================================
  CF7 Response messages
===================================================== */
.wpcf7-response-output{
  width: min(980px, 100%);
  margin: 0 auto 34px;
  padding: 22px 18px 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  font-family: var(--font-jp, "Noto Serif JP", serif);
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 2.15;
  color: rgba(0,0,0,.72);
  position: relative;
  z-index: 60;
}

/* Success */
.wpcf7 form.sent .wpcf7-response-output{
  border: 0;
  background: transparent;
  text-align:center;
  padding: 110px 18px 80px;
  margin: 0 auto 0;
  color: rgba(0,0,0,.72);
  opacity: 0;
  transform: translateY(6px);
  animation: mythosContactIn 1.0s ease forwards;
}

.wpcf7 form.sent .wpcf7-response-output::before{
  content:"THANK YOU";
  display:block;
  margin: 0 0 14px;
  font-family: var(--font-en, "Cinzel", serif);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(0,0,0,.82);
}

@keyframes mythosContactIn{
  to{ opacity: 1; transform: translateY(0); }
}

/* Error / Failed */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed  .wpcf7-response-output{
  border-color: rgba(0,0,0,.18);
  background: rgba(0,0,0,.02);
}

/* =====================================================
  Responsive
===================================================== */
@media (max-width: 768px){

  .contact-section{
    padding: 72px 0 96px;
  }

  .contact-form{
    padding:0 18px;
  }

  /* 入力の高さ（SPはさらに少しだけ低く） */
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form textarea,
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea{
    padding:10px 12px;
    font-size:14px;
  }

  .contact-form textarea,
  .wpcf7 textarea{
    min-height:160px;
  }

  /* checkbox stack */
  .wpcf7 .wpcf7-form-control.wpcf7-checkbox{
    flex-direction:column;
    gap:10px;
  }

  /* 送信ボタン（SP微調整） */
  .contact-submit,
  .wpcf7 input[type="submit"]{
    font-size:14px;
    padding:10px 0 12px;         /* 横paddingゼロのまま */
  }

  /* messages */
  .wpcf7-response-output{
    margin: 0 18px 28px;
  }

  .wpcf7 form.sent .wpcf7-response-output{
    padding: 92px 18px 70px;
  }
}

/* =====================================================
  Reduced motion
===================================================== */
@media (prefers-reduced-motion: reduce){
  .contact-submit,
  .wpcf7 input[type="submit"]{
    transition:none !important;
    transform:none !important;
  }
  .wpcf7 form.sent .wpcf7-response-output{
    opacity:1;
    transform:none;
    animation:none;
  }
}