@charset "utf-8";
/* 既存 common.css の色・幅・余白・ボタンを流用。お問い合わせ内だけに適用。 */
.contact-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); margin: 0 0 var(--space-60); padding: 0; list-style: none; }
.contact-steps__item { display: flex; align-items: center; justify-content: center; gap: var(--space-10); padding: var(--space-20) var(--space-10); color: var(--color-text-mute); background: var(--color-surface); border-bottom: 3px solid var(--color-border); font-weight: 700; }
.contact-steps__item.is-current { background: var(--color-surface-green); color: var(--color-teal); border-color: var(--color-teal); }
.contact-steps__number { font-size: var(--font18-size); }
.contact-intro { margin-bottom: var(--space-40); }
.contact-intro h2, .contact-thanks h2 { color: var(--color-text-strong); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; }
.contact-intro p, .contact-thanks p { margin-top: var(--space-20);
text-align: left;}
.contact-badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--color-red); border-radius: 5px; color: var(--color-white); background: var(--color-red); font-size: var(--font14-size); font-weight: 500; line-height: 1.6; white-space: nowrap; }
.contact-badge--optional { border-color: var(--color-teal); background: var(--color-white); color: var(--color-teal); }
.contact-form__row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-30); padding: var(--space-30) 0; border-top: 1px solid var(--color-border); }
.contact-form__label { display: flex; align-items: baseline; gap: 1em; font-weight: 700; }
.contact-form__label > p { display: contents; }
.contact-form__field { min-width: 0; }
.contact-form__field input:not([type="checkbox"]):not([type="radio"]), .contact-form__field select, .contact-form__field textarea { width: 100%; max-width: 100%; min-height: 48px; padding: 12px; border: 1px solid var(--color-border-strong); border-radius: 4px; background: var(--color-white); color: var(--color-base); font-family: inherit; font-size: 16px; line-height: 1.6; }
.contact-form__field textarea { min-height: 180px; resize: vertical; }
.contact-form__field input::placeholder, .contact-form__field textarea::placeholder { color: var(--color-text-mute); }
.contact-page input:focus-visible, .contact-page select:focus-visible, .contact-page textarea:focus-visible, .contact-page a:focus-visible, .contact-page button:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 3px; }
.contact-form__address { display: grid; gap: var(--space-20); }
.contact-form__address label { display: block; margin-bottom: 6px; }
.contact-form__hint { display: block; margin-top: var(--space-10); color: var(--color-text-mute); font-size: var(--font14-size); }
.contact-form__privacy { padding: var(--space-30); background: var(--color-surface-green); text-align: center; }
.contact-form__privacy p { margin-bottom: var(--space-20); }
.contact-form__privacy a, .contact-notice a, .contact-thanks p a { color: var(--color-teal); text-decoration: underline; text-underline-offset: 4px; }
.contact-form__privacy .wpcf7-list-item { margin: 0; }
.contact-form__privacy input { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; accent-color: var(--color-teal); }
.contact-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-20); margin-top: var(--space-40); }
.contact-actions > p { display: contents; }
.contact-page .contact-actions input { cursor: pointer; font-family: inherit; white-space: normal; max-width: 100%; }
.contact-page .contact-actions input[type="button"] { padding: 14px 24px; border: 1px solid var(--color-teal); border-radius: 999px; color: var(--color-teal); background: var(--color-white); font: inherit; }
.contact-page .contact-actions input:disabled { opacity: .5; cursor: not-allowed; }
.contact-page .wpcf7-spinner { margin: 0; }
.contact-page .wpcf7-not-valid { border-color: var(--color-red); }
.contact-page .wpcf7-not-valid-tip { margin-top: 6px; font-size: var(--font14-size); }
.contact-confirm__value { overflow-wrap: anywhere; }
.contact-confirm__value:empty::before { content: "—"; color: var(--color-text-mute); }
.contact-notice { padding: var(--space-20); background: var(--color-surface); margin-top: var(--space-20); }
.contact-thanks { text-align: center; }
.contact-thanks .contact-thanks__phone { padding: var(--space-30); background: var(--color-surface-green); text-align: center; }
.contact-thanks__phone small { display: block; }
.contact-thanks__icon { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: var(--space-30); border-radius: 50%; background: var(--color-surface-green); color: var(--color-teal); font-size: 30px; }
@media (max-width: 700px) {
  .contact-steps { gap: 6px; margin-bottom: var(--space-40); }
  .contact-steps__item { flex-direction: column; gap: 4px; padding: var(--space-10) 4px; font-size: var(--font14-size); }
  .contact-form__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding: var(--space-20) 0; }
  .contact-form__privacy { padding: var(--space-20); text-align: left; }
  .contact-thanks .contact-thanks__phone { padding: var(--space-20); }
  .contact-actions { flex-direction: column; }
  .contact-actions .ts-button, .contact-actions input[type="button"] { width: 100%; }
  .contact-intro br, .contact-thanks br { display: none; }
}