/* MOUZ studio お問い合わせフォーム（2026.10 新規）
   色・書体は既存サイトの cmn.css から取った値だけを使う。
   magenta #d01889（ボタン）／pink #ffebf7（メニューの帯）／gray #e6e6e6・#ccc（罫線）／gold #c8ae8c（補助）
   書体は reset.css と同じ Hiragino Kaku Gothic 系。既存の CSS とぶつからないよう .mz-form の中だけに効かせる。 */
.mz-form {
  --mz-magenta: #d01889;
  --mz-magenta-deep: #b0136f;
  --mz-pink: #ffebf7;
  --mz-line: #e6e6e6;
  --mz-line-strong: #cccccc;
  --mz-text: #333333;
  --mz-text-sub: #666666;
  --mz-error: #c4002b;
  --mz-ok: #d01889;
  --mz-radius: 4px;
  --mz-space: 8px;
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  color: var(--mz-text);
  margin: calc(var(--mz-space) * 2) 0 calc(var(--mz-space) * 4);
  box-sizing: border-box;
}
.mz-form *, .mz-form *::before, .mz-form *::after { box-sizing: border-box; }
.mz-form [hidden] { display: none !important; }

.mz-form__lead { margin: 0 0 calc(var(--mz-space) * 3); padding: calc(var(--mz-space) * 2); background: var(--mz-pink); border-left: 3px solid var(--mz-magenta); font-size: 13px; line-height: 1.8; }

.mz-field { display: block; padding: calc(var(--mz-space) * 2) 0; border-bottom: 1px solid var(--mz-line); }
.mz-field:first-of-type { border-top: 1px solid var(--mz-line); }
.mz-field__label { display: flex; align-items: center; gap: var(--mz-space); margin-bottom: var(--mz-space); font-size: 14px; font-weight: bold; }
.mz-field__tag { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; font-weight: normal; line-height: 1.6; }
.mz-field__tag--req { background: var(--mz-magenta); color: #ffffff; }
.mz-field__tag--opt { background: var(--mz-line); color: var(--mz-text-sub); }
.mz-field__help { margin: calc(var(--mz-space) / 2) 0 0; font-size: 12px; color: var(--mz-text-sub); }
.mz-field__error { margin: calc(var(--mz-space) / 2) 0 0; font-size: 12px; color: var(--mz-error); }

.mz-input, .mz-textarea {
  width: 100%; max-width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--mz-text);
  background: #ffffff; border: 1px solid var(--mz-line-strong); border-radius: var(--mz-radius);
  transition: border-color .2s, box-shadow .2s;
}
.mz-input { min-height: 44px; }
.mz-textarea { min-height: 180px; resize: vertical; line-height: 1.7; }
.mz-input:focus, .mz-textarea:focus { outline: none; border-color: var(--mz-magenta); box-shadow: 0 0 0 3px rgba(208, 24, 137, .18); }
.mz-input[aria-invalid="true"], .mz-textarea[aria-invalid="true"] { border-color: var(--mz-error); }

.mz-agree { display: flex; gap: var(--mz-space); align-items: flex-start; margin: calc(var(--mz-space) * 3) 0 calc(var(--mz-space) * 2); font-size: 13px; line-height: 1.7; cursor: pointer; }
.mz-agree input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mz-magenta); flex: none; }
.mz-agree a { color: var(--mz-magenta); }

.mz-actions { text-align: center; margin-top: calc(var(--mz-space) * 3); }
.mz-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mz-space);
  min-width: 240px; min-height: 48px; padding: 0 calc(var(--mz-space) * 4);
  font: inherit; font-size: 15px; font-weight: bold; letter-spacing: .1em; color: #ffffff;
  background: var(--mz-magenta); border: 0; border-radius: var(--mz-radius); cursor: pointer;
  transition: background .2s;
}
.mz-submit:hover { background: var(--mz-magenta-deep); }
.mz-submit:focus-visible { outline: 3px solid rgba(208, 24, 137, .35); outline-offset: 2px; }
.mz-submit[disabled] { background: var(--mz-line-strong); cursor: wait; }

.mz-status { margin-top: calc(var(--mz-space) * 2); padding: calc(var(--mz-space) * 2); border-radius: var(--mz-radius); font-size: 14px; line-height: 1.8; }
.mz-status--error { border: 1px solid var(--mz-error); color: var(--mz-error); background: #fff5f7; }
.mz-done { padding: calc(var(--mz-space) * 4) calc(var(--mz-space) * 2); text-align: center; background: var(--mz-pink); border-radius: var(--mz-radius); }
.mz-done__title { margin: 0 0 var(--mz-space); font-size: 18px; color: var(--mz-magenta); font-weight: bold; }
.mz-done p { margin: 0; font-size: 14px; line-height: 1.9; }

/* 予約の準備中ページ */
.mz-reserve { margin: calc(var(--mz-space) * 2) 0 calc(var(--mz-space) * 4); padding: calc(var(--mz-space) * 4) calc(var(--mz-space) * 2); text-align: center; background: var(--mz-pink); border-radius: var(--mz-radius); }
.mz-reserve p { margin: 0 0 calc(var(--mz-space) * 2); font-size: 14px; line-height: 1.9; }
.mz-reserve a.mz-submit { text-decoration: none; color: #ffffff; }

/* 既存の CSS（textarea の幅指定）に負けないように */
.mz-form .mz-textarea, .mz-form .mz-input { width: 100% !important; max-width: 100% !important; }
/* スマホ版（jQuery Mobile の枠）では左右に余白をとる */
[data-role="page"] .mz-form { padding-left: 10px; padding-right: 10px; }
[data-role="page"] .mz-form .mz-form__lead { margin-left: 0; margin-right: 0; }