/* =========================================================
   forms.css — お問い合わせフォーム（Contact Form 7 対応）
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.5fr; gap: clamp(30px, 5vw, 90px); }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }

.form-note{
  background: var(--sky-pale); padding: 24px; font-size: 13px; line-height: 1.9; color: var(--gray-700);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); letter-spacing:.04em;
}

/* ---- shared field styling used by both a plain .form markup
   and Contact Form 7's own generated markup ---- */
.form,
.wpcf7-form{ display:flex; flex-direction:column; gap: 32px; }
.field,
.wpcf7-form p{ display:flex; flex-direction:column; gap: 10px; margin: 0; }
.field label,
.wpcf7-form > p > label,
.wpcf7-form label{
  font-family: var(--serif-jp); font-size: 13px; letter-spacing:.14em; color: var(--navy);
  display:flex; gap:10px; align-items:center; flex-wrap: wrap;
}
.field label .req,
.wpcf7-form label .req{
  font-family: var(--serif-en); font-size: 10px; letter-spacing:.2em;
  padding: 2px 8px; background: var(--accent); color:#fff;
}
.field label .opt,
.wpcf7-form label .opt{
  font-family: var(--serif-en); font-size: 10px; letter-spacing:.2em;
  padding: 2px 8px; background: var(--sky-pale); color: var(--navy);
}

.field input, .field textarea,
.wpcf7-form input.wpcf7-form-control,
.wpcf7-form textarea.wpcf7-form-control{
  border:0; border-bottom:1px solid var(--line);
  background: transparent;
  padding: 14px 0;
  font-size: 15px; letter-spacing:.06em;
  color: var(--navy-ink);
  transition: border-color .4s var(--ease);
  outline: none;
  font-family: var(--sans-jp);
  width: 100%;
  border-radius: 0;
}
.field input::placeholder, .field textarea::placeholder,
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder{ color: var(--gray-400); }
.field input:focus, .field textarea:focus,
.wpcf7-form input:focus, .wpcf7-form textarea:focus{ border-color: var(--accent); }
.field textarea, .wpcf7-form textarea{ min-height: 160px; resize: vertical; line-height: 1.9; }

.wpcf7-form-control-wrap{ display:block; position: relative; }

.radio-group{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 700px){
  .radio-group{ grid-template-columns: 1fr; }
}
/* CF7 wraps [radio] in two extra <span> layers (form-control-wrap, then
   wpcf7-radio) before the actual wpcf7-list-item options; collapse both
   out of the box tree so .radio-group's grid applies directly to them. */
.radio-group .wpcf7-form-control-wrap,
.radio-group .wpcf7-radio{
  display: contents;
}
.radio-item{ position: relative; }
.radio-item input{ position: absolute; opacity: 0; inset: 0; }
.radio-item .box,
.wpcf7-form .wpcf7-list-item label{
  display:flex; align-items:center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  font-family: var(--serif-jp); font-size: 14px; color: var(--navy-ink); letter-spacing:.06em;
  transition: border-color .4s var(--ease), background .4s var(--ease);
  cursor: pointer;
  margin: 0;
}
.radio-item .box::before{
  content:""; width:14px; height:14px; border-radius:50%;
  border:1px solid var(--gray-400);
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  flex-shrink: 0;
}
.radio-item input:checked + .box{ border-color: var(--accent); background: var(--sky-pale); }
.radio-item input:checked + .box::before{
  border-color: var(--accent); background: var(--accent);
  box-shadow: inset 0 0 0 3px #fff;
}
.radio-item input:focus-visible + .box{ outline: 2px solid var(--accent); outline-offset: 2px; }

.wpcf7-form .wpcf7-list-item{ margin: 0; }
.wpcf7-form .wpcf7-list-item input[type="radio"]{
  width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0;
}
.wpcf7-form .wpcf7-list-item label:has(input:checked){ border-color: var(--accent); background: var(--sky-pale); }

.form-actions,
.wpcf7-form p:has(.wpcf7-submit){
  display:flex; gap: 18px; align-items:center; margin-top: 12px;
}
.form-status{ margin-top: 14px; font-size: 12.5px; letter-spacing: .1em; color: var(--gray-500); }

/* CF7 submit control is a real <button class="btn btn-solid"><span>…</span>
   <span class="arrow"></span></button> (see inc/cf7-setup.php), so it gets
   the exact same look — including the hover fill and arrow — as every
   other .btn on the site. A plain <input type="submit"> can't do this:
   browsers don't render ::before/::after generated content on it. */
button.wpcf7-submit.btn{
  appearance: none; -webkit-appearance: none; border-radius: 0;
}
.wpcf7-spinner{ margin-left: 12px; }
.wpcf7-response-output{
  margin: 14px 0 0 !important; padding: 16px 20px !important;
  font-size: 12.5px; letter-spacing: .06em; border-radius: 0 !important;
}
.wpcf7-not-valid-tip{ font-size: 11.5px; color: #B4463B; margin-top: 4px; }
form.invalid .wpcf7-response-output{ border-color: #B4463B !important; color: #B4463B; }
form.sent .wpcf7-response-output{ border-color: var(--accent) !important; color: var(--accent); }