/* ==========================================================
   Contact Form 7 の見た目（全ページ共通・D3デザイン）
   フォームは .mzk-form で囲んで使う
   ========================================================== */

.mzk-form {
  --mzk-form-line: #d9d4cd;
  --mzk-form-accent: #c0262d;
  --mzk-form-text: #1f1b17;
  --mzk-form-sub: #6b6560;
  display: grid;
  gap: 28px;
  max-width: 680px;
  color: var(--mzk-form-text);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.8;
}
.mzk-form p { margin: 0; }
.mzk-form__row { display: grid; gap: 10px; }
.mzk-form__label { font-size: 15px; font-weight: 400; letter-spacing: .08em; }
.mzk-form__req,
.mzk-form__opt {
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  vertical-align: 1px;
}
.mzk-form__req { color: var(--mzk-form-accent); }
.mzk-form__opt { color: var(--mzk-form-sub); }
.mzk-form__note { font-size: 13px; color: var(--mzk-form-sub); }

.mzk-form input[type="text"],
.mzk-form input[type="email"],
.mzk-form input[type="tel"],
.mzk-form select,
.mzk-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--mzk-form-line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 16px; /* スマホでの自動ズームを防ぐ */
  transition: border-color .3s;
  -webkit-appearance: none;
  appearance: none;
}
.mzk-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mzk-form-text) 50%), linear-gradient(135deg, var(--mzk-form-text) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.mzk-form textarea { min-height: 180px; resize: vertical; }
.mzk-form :is(input, select, textarea):focus { outline: none; border-color: var(--mzk-form-text); }
.mzk-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--mzk-form-text); outline-offset: 2px; }

.mzk-form .wpcf7-list-item { display: block; margin: 0 0 6px; }
.mzk-form .wpcf7-list-item label { display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.mzk-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--mzk-form-text); }

.mzk-form__agree { padding-top: 8px; border-top: 1px solid #e6e2dc; font-size: 14px; }
.mzk-form__agree a { text-decoration: underline; text-underline-offset: .3em; }

.mzk-form__submit input[type="submit"] {
  min-width: 260px;
  min-height: 56px;
  padding: 0 40px;
  border: none;
  border-radius: 999px;
  background-color: var(--mzk-form-accent);
  background-image: linear-gradient(var(--mzk-form-text), var(--mzk-form-text));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  color: #fff;
  font: inherit;
  font-size: 15px;
  letter-spacing: .16em;
  cursor: pointer;
  transition: background-size .5s cubic-bezier(.7, 0, .2, 1);
}
.mzk-form__submit input[type="submit"]:hover { background-size: 100% 100%; }
.mzk-form__submit input[type="submit"]:disabled { opacity: .4; cursor: not-allowed; background-size: 0% 100%; }
.mzk-form .wpcf7-spinner { margin-left: 12px; vertical-align: middle; }

.mzk-form .wpcf7-not-valid { border-color: var(--mzk-form-accent); }
.mzk-form .wpcf7-not-valid-tip { margin-top: 6px; color: var(--mzk-form-accent); font-size: 13px; }
.wpcf7 form .wpcf7-response-output {
  max-width: 680px;
  box-sizing: border-box;
  margin: 28px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--mzk-form-line, #d9d4cd);
  font-size: 14px;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #1f1b17; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #c0262d; color: #c0262d; }

@media (max-width: 599px) {
  .mzk-form { gap: 24px; }
  .mzk-form__submit input[type="submit"] { width: 100%; min-width: 0; }
}