/**
 * reserve.css — 新モデル申込フォーム（.mr 配下にスコープ）
 * テーマの作法（角丸0・藍色アクセント）に合わせています。
 */
.mr {
  --mr-ai: #165e83;
  --mr-ai-d: #0f4360;
  --mr-cta: #b74129;
  --mr-ok: #2c7a4b;
  --mr-ok-bg: #eef7f1;
  --mr-full: #b32d2e;
  --mr-full-bg: #f7ecec;
  --mr-line: #d9d9d9;
  --mr-ink: #222;
  --mr-sub: #666;
  --mr-surf: #f5f5f5;
  max-width: 760px;
  margin: 0 auto;
  color: var(--mr-ink);
  font-size: 15px;
  line-height: 1.7;
}
.mr * { box-sizing: border-box; }

/* ステップ表示 */
.mr-steps { display: flex; gap: 2px; margin: 0 0 18px; }
.mr-step {
  flex: 1; text-align: center; padding: 8px 4px; font-size: 12px; font-weight: 600;
  background: var(--mr-surf); color: var(--mr-sub); border-bottom: 3px solid var(--mr-line);
}
.mr-step span { display: block; font-weight: 400; font-size: 11px; margin-top: 2px; }
.mr-step.is-active { color: var(--mr-ai); border-bottom-color: var(--mr-ai); background: #fff; }

/* メッセージ */
.mr-msg { padding: 10px 14px; margin: 0 0 14px; font-size: 14px; border: 1px solid; }
.mr-err { color: var(--mr-full); border-color: var(--mr-full); background: var(--mr-full-bg); }
.mr-ok { color: var(--mr-ok); border-color: var(--mr-ok); background: var(--mr-ok-bg); }

/* パネル */
.mr-pane.is-active { display: block; }
.mr-title { font-size: 17px; margin: 0 0 12px; }
.mr-lead { font-size: 13px; color: var(--mr-sub); margin: 0 0 14px; }
.mr-hint { font-size: 13px; color: var(--mr-sub); margin: 8px 0; }

/* フィールド */
.mr-field { margin: 0 0 14px; }
.mr-label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 5px; }
.mr-req { color: var(--mr-full); font-size: 11px; border: 1px solid var(--mr-full); padding: 0 5px; margin-left: 4px; }
.mr-input, .mr-store-sel {
  width: 100%; border: 1px solid #8c8f94; padding: 9px 10px; font-size: 15px; background: #fff; color: var(--mr-ink);
}
.mr-input:focus, .mr-store-sel:focus { outline: none; border-color: var(--mr-ai); box-shadow: 0 0 0 1px var(--mr-ai); }
.mr-store-fixed { margin: 0; padding: 10px 12px; background: var(--mr-surf); border-left: 3px solid var(--mr-ai); font-size: 14px; }
.mr-grid2 { display: flex; gap: 14px; flex-wrap: wrap; }
.mr-grid2 > .mr-field { flex: 1 1 220px; min-width: 0; }

/* 希望ブロック */
.mr-pref { border: 1px solid var(--mr-line); padding: 14px; margin: 0 0 14px; background: #fff; }
.mr-pref-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.mr-pref-title { font-weight: 600; color: var(--mr-ai); }

/* カレンダー */
.mr-cal { border: 1px solid var(--mr-line); }
.mr-cal-head { display: flex; align-items: center; justify-content: space-between; background: var(--mr-surf); padding: 6px 8px; }
.mr-cal-title { font-weight: 600; font-size: 14px; }
.mr-cal-nav { border: 1px solid var(--mr-line); background: #fff; width: 30px; height: 30px; cursor: pointer; font-size: 16px; line-height: 1; }
.mr-cal-week, .mr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.mr-cal-w { text-align: center; font-size: 11px; color: var(--mr-sub); padding: 5px 0; background: var(--mr-surf); border-top: 1px solid var(--mr-line); }
.mr-cal-cell {
  position: relative; border: 1px solid #eee; background: #fff; min-height: 42px; padding: 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; color: var(--mr-ink);
}
.mr-cal-num { line-height: 1.1; }
.mr-cal-cell.is-empty { background: #fafafa; cursor: default; }
.mr-cal-cell.is-disabled { color: #c4c4c4; background: #fafafa; cursor: not-allowed; }
.mr-cal-cell.is-full { color: #bbb; background: #fafafa; cursor: not-allowed; }
.mr-cal-cell.is-sel { background: var(--mr-ai); color: #fff; font-weight: 700; }
.mr-cal-cell.mr-sun { color: #c0392b; }
.mr-cal-cell.mr-sat { color: #2471a3; }
.mr-cal-cell.is-sel.mr-sun, .mr-cal-cell.is-sel.mr-sat { color: #fff; }
/* 選べない日は、土日でもグレーで表示（色が付いて選べるように見える誤解を防ぐ） */
.mr-cal-cell.is-disabled.mr-sun, .mr-cal-cell.is-disabled.mr-sat { color: #c4c4c4; }
.mr-cal-cell.is-full.mr-sun, .mr-cal-cell.is-full.mr-sat { color: #bbb; }
.mr-cal-w.mr-sun { color: #c0392b; }
.mr-cal-w.mr-sat { color: #2471a3; }
.mr-dot { width: 6px; height: 6px; margin-top: 2px; display: block; }
.mr-dot-ok { background: var(--mr-ok); }
.mr-dot-full { background: var(--mr-full); }

/* 日ごとの枠 */
.mr-slots { margin-top: 12px; border: 1px solid var(--mr-line); }
.mr-slots-head { background: var(--mr-ai-d); color: #fff; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.mr-slot {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border: 0; border-top: 1px solid var(--mr-line); background: #fff; cursor: pointer; font-size: 14px; text-align: left; color: var(--mr-ink);
}
.mr-slot:first-of-type { border-top: 0; }
.mr-slot-time { color: var(--mr-sub); font-size: 13px; }
.mr-slot.is-full { color: #aaa; background: #fafafa; cursor: not-allowed; }
.mr-slot.is-picked { background: var(--mr-ai); color: #fff; }
.mr-slot.is-picked .mr-slot-time { color: rgba(255,255,255,.85); }
.mr-badge { flex: none; font-size: 11px; padding: 1px 8px; border: 1px solid; }
.mr-ok { color: var(--mr-ok); border-color: var(--mr-ok); background: var(--mr-ok-bg); }
.mr-full { color: var(--mr-full); border-color: var(--mr-full); background: var(--mr-full-bg); }
.mr-slot.is-picked .mr-badge { background: #fff; }
.mr-none { padding: 12px; color: var(--mr-sub); font-size: 13px; text-align: center; }

/* 選択の要約 */
.mr-pref-sum { margin-top: 10px; padding: 8px 12px; background: var(--mr-ok-bg); border-left: 3px solid var(--mr-ok); font-size: 14px; }
.mr-pref-sum-txt { font-weight: 600; }

/* ご確認事項（任意アンケート） */
.mr-survey { margin: 20px 0 4px; padding-top: 16px; border-top: 1px solid var(--mr-line); }
.mr-subtitle { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.mr-fieldset { border: 1px solid var(--mr-line); padding: 10px 12px; margin: 0 0 12px; }
.mr-legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--mr-ai); }
.mr-checkgrid { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.mr-check input { margin: 0; }

.mr-summary { margin: 14px 0; padding: 12px 14px; background: var(--mr-surf); border: 1px solid var(--mr-line); }
.mr-summary-h { font-weight: 600; margin-bottom: 6px; font-size: 13px; color: var(--mr-sub); }
.mr-summary-row { font-size: 14px; }

/* ボタン */
.mr-pref-actions { margin: 0 0 16px; }
.mr-nav { display: flex; gap: 10px; margin-top: 18px; }
.mr-btn { border: 1px solid var(--mr-ai); background: #fff; color: var(--mr-ai); padding: 11px 20px; font-size: 15px; cursor: pointer; }
.mr-btn-primary { background: var(--mr-cta); border-color: var(--mr-cta); color: #fff; font-weight: 600; flex: 1; }
.mr-btn-primary:disabled { opacity: .6; cursor: default; }
.mr-btn-sub { color: var(--mr-sub); border-color: var(--mr-line); }
.mr-btn-del { color: var(--mr-full); border-color: var(--mr-line); padding: 4px 10px; font-size: 12px; }

@media (max-width: 600px) {
  .mr-grid2 { gap: 0; }
  .mr-grid2 > .mr-field { flex: 1 1 100%; }
  .mr-cal-cell { min-height: 38px; font-size: 12px; }
}

/* 予約フォームの設置予定エリア（プレースホルダー）。.mr の外でも使うので色は直接指定 */
.mr-ph {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #cfcfcf; background: #fafafa; padding: 28px 20px;
  text-align: center; max-width: 760px; margin: 0 auto;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
}
.mr-ph__inner { width: 100%; max-width: 520px; }
.mr-ph__skel { display: flex; flex-direction: column; gap: 12px; align-items: center; margin: 0 0 20px; opacity: .55; }
.mr-ph__bar { height: 12px; background: #e4e4e4; display: block; }
.mr-ph__box { height: 46px; width: 100%; background: #ececec; display: block; }
.mr-ph__label { font-size: 16px; font-weight: 600; color: #666; margin: 0 0 5px; letter-spacing: .04em; }
.mr-ph__note { font-size: 13px; color: #999; margin: 0; }