/* メールで相談モーダル(お問い合わせフォーム) */
dialog.mail-modal {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: calc(100vh - 64px);
  background: var(--paper, #fff);
  color: var(--ink, #23262d);
  box-shadow: 0 24px 64px rgba(18, 31, 62, .28);
}
dialog.mail-modal::backdrop {
  background: rgba(18, 31, 62, .45);
}
.mail-modal-inner {
  position: relative;
  padding: 28px 24px 32px;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
}
.mail-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line, #e4e0d6);
  background: var(--navy-50, #f1f4f9);
  color: var(--navy, #121f3e);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.mail-modal-close:hover { background: var(--navy-100, #e4e9f2); }
.mail-modal-title {
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--navy, #121f3e);
}
.mail-modal-lead {
  font-size: 13.5px;
  color: var(--ink-sub, #5b6170);
  margin: 0 0 20px;
  line-height: 1.7;
}

.contact-form .form-honeypot { position: absolute; left: -9999px; }

.form-row { margin-bottom: 16px; }
.form-row-pair { display: flex; gap: 10px; margin-bottom: 16px; }
.form-row-pair .form-row { flex: 1; margin-bottom: 0; min-width: 0; }
.form-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink, #23262d);
  margin-bottom: 6px;
}
.form-required {
  color: #fff;
  background: var(--alert, #b4472a);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.form-note { font-size: 11.5px; color: var(--ink-mute, #8a8f9a); margin-left: 6px; }

.form-input, .form-textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong, #d3cdbd);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #23262d);
}
.form-input:focus, .form-textarea:focus {
  outline: 2px solid var(--navy-700, #1f3260);
  outline-offset: 1px;
}
.form-textarea { resize: vertical; min-height: 110px; }

.form-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.form-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }

.form-row--consent { margin-top: 20px; }
.form-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--ink-sub, #5b6170); cursor: pointer; line-height: 1.6; }
.form-consent a { color: var(--navy-700, #1f3260); }
.form-consent input { margin-top: 3px; }

.form-row.is-error .form-input,
.form-row.is-error .form-textarea {
  border-color: var(--alert, #b4472a);
}
.form-field-error {
  display: block;
  font-size: 12px;
  color: var(--alert, #b4472a);
  margin-top: 4px;
}
.form-errors {
  display: none;
  background: #fbe9e6;
  border: 1px solid var(--alert, #b4472a);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--alert, #b4472a);
}
.form-errors[data-open="1"] { display: block; }
.form-errors-title { font-weight: 700; margin: 0 0 4px; }
.form-errors ul { margin: 0; padding-left: 1.2em; }

.form-submit {
  width: 100%;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: var(--navy, #121f3e);
  color: #fff;
  cursor: pointer;
}
.form-submit:hover { background: var(--navy-700, #1f3260); }
.form-submit[aria-busy="true"] { opacity: .7; cursor: progress; }

@media (max-width: 480px) {
  dialog.mail-modal { max-height: calc(100vh - 16px); width: calc(100% - 12px); border-radius: 10px; }
  .mail-modal-inner { padding: 14px 12px 14px; max-height: calc(100vh - 16px); }
  .mail-modal-close { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 16px; }
  .mail-modal-title { font-size: 15.5px; margin-bottom: 3px; }
  .mail-modal-lead { font-size: 11.5px; margin-bottom: 8px; line-height: 1.4; }
  .form-row, .form-row-pair { margin-bottom: 7px; }
  .form-label { font-size: 12px; margin-bottom: 2px; }
  .form-input, .form-textarea { padding: 6px 8px; font-size: 13px; }
  .form-textarea { min-height: 40px; }
  .form-checkbox-group { gap: 4px 8px; }
  .form-checkbox { font-size: 12px; }
  .form-row--consent { margin-top: 6px; }
  .form-consent { font-size: 10.5px; }
  .form-submit { padding: 9px; font-size: 13.5px; }
}