/* お問い合わせ（入力 / 完了）共通。入力は 1 画面: 必須 3 つ + 「詳しく伝える」（任意）を畳む */
.contact-form-wrap { min-width: 0; max-width: 100%; margin-top: var(--sp-6); padding: var(--sp-8); background: #fff; border: 1px solid var(--c-border); }
.contact-form-wrap > form > .hp + .field { margin-top: 0; }
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-form-wrap .alert { margin-bottom: var(--sp-6); }
.contact-form-wrap .alert ul { padding-left: 0; }
.field.has-error { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.form-actions .btn { min-width: 260px; min-height: 56px; }
.form-note { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--c-text-sub); line-height: 1.8; }

/* メールアドレスの綴り提案（gmial.com → gmail.com など） */
.mail-suggest { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.6; }
.mail-suggest button { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 「詳しく伝える（任意）」: 畳む。開いていても必須ではないことを見出しで示す */
.more { display: block; width: 100%; min-width: 0; margin-top: var(--sp-8); border: 1px solid var(--c-border); background: var(--c-kinari-soft); }
.more__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none; min-height: 48px; }
.more__summary::-webkit-details-marker { display: none; }
.more__summary::before { content: "＋"; flex: none; font-weight: 700; }
.more[open] > .more__summary::before { content: "－"; }
.more__title { font-weight: 700; }
.more__sub { font-size: var(--fs-caption); color: var(--c-text-sub); }
.more__summary:focus-visible { outline: 2px solid var(--c-text); outline-offset: -2px; }
.more__body { padding: 0 var(--sp-5) var(--sp-6); }
.more__body > .field:first-child { margin-top: var(--sp-3); }
.field--slots, .field--slot_note { margin-top: var(--sp-6); }

/* 希望日時ピッカー（日付 → 時間帯。選べるのは最大 3 候補）。JS 無効時は注記だけ出し、自由記述欄で足りる */
.slotpicker { min-width: 0; max-width: 100%; }
.slotpicker__bands:empty, .slotpicker__picked:empty { display: none; }
.slotpicker__nojs { font-size: var(--fs-small); color: var(--c-text-sub); }
html.js .slotpicker.is-ready .slotpicker { min-width: 0; max-width: 100%; }
.slotpicker__bands:empty, .slotpicker__picked:empty { display: none; }
.slotpicker__nojs { display: none; }
.slotpicker__days { display: flex; gap: var(--sp-2); padding-bottom: var(--sp-2); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.slotpicker__day { flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; min-width: 64px; min-height: 64px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); background: #fff; font: inherit; line-height: 1.3; color: var(--c-text); cursor: pointer; }
.slotpicker__day small { font-size: var(--fs-caption); color: var(--c-text-sub); }
.slotpicker__day strong { font-size: var(--fs-body); }
.slotpicker__day:hover { border-color: var(--c-text-disabled); }
.slotpicker__day[aria-pressed="true"] { border-color: var(--c-text); background: var(--c-kinari); }
.slotpicker__day.has-pick { box-shadow: inset 0 -3px 0 var(--c-red); }
.slotpicker__bands { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.slotpicker__band { display: flex; flex-direction: column; min-height: 56px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--c-border); background: #fff; font: inherit; line-height: 1.4; text-align: left; color: var(--c-text); cursor: pointer; }
.slotpicker__band small { font-size: var(--fs-caption); color: var(--c-text-sub); }
.slotpicker__band:hover { border-color: var(--c-text-disabled); }
.slotpicker__band[aria-pressed="true"] { border-color: var(--c-text); background: var(--c-kinari); font-weight: 700; }
.slotpicker__band[disabled] { opacity: .45; cursor: not-allowed; }
.slotpicker__picked { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.slotpicker__chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--c-text); color: #fff; font-size: var(--fs-small); }
.slotpicker__chip button { padding: 0 var(--sp-1); border: 0; background: transparent; color: inherit; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.slotpicker__status { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-sub); }

/* 完了画面: 受け付けた内容 + 任意アンケート */
.receipt { margin-top: var(--sp-6); padding: var(--sp-6); background: #fff; border: 1px solid var(--c-border); }
.receipt__title { font-size: var(--fs-h3); font-weight: 700; }
.receipt__list { margin-top: var(--sp-4); }
.receipt__list > div { display: grid; grid-template-columns: 9em 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-border-soft); }
.receipt__list dt { font-size: var(--fs-small); font-weight: 700; color: var(--c-text-sub); }
.receipt__list dd { margin: 0; word-break: break-word; }
.receipt__msg { white-space: pre-wrap; font-size: var(--fs-small); line-height: 1.8; }
.receipt__note { margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--c-text-sub); line-height: 1.8; }
.receipt__source { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-border-soft); }
.receipt__q { margin-bottom: var(--sp-3); font-size: var(--fs-small); font-weight: 700; }
.choice-btn { min-height: 44px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--c-border); background: #fff; font: inherit; font-size: var(--fs-small); color: var(--c-text); cursor: pointer; }
.choice-btn:hover { border-color: var(--c-text); }

/* 入力→確認→完了 */
.prose .form-steps { list-style: none; padding: 0; }
.form-steps { display: flex; gap: 0; margin: 0 0 var(--sp-7); font-size: var(--fs-caption); }
.prose .form-steps li { padding-left: var(--sp-2); }
.prose .form-steps li::before { display: none; }
.form-steps li { flex: 1; padding: var(--sp-3) var(--sp-2); text-align: center; color: var(--c-text-mute); border-bottom: 3px solid var(--c-border-soft); }
.form-steps li[aria-current="step"] { color: var(--c-text); font-weight: 700; border-bottom-color: var(--c-red); }
.form-steps li.is-done { color: var(--c-text-sub); border-bottom-color: var(--c-beige); }
.form-steps .n { display: inline-block; margin-right: var(--sp-1); }

/* 確認画面 */
.confirm-block + .confirm-block { margin-top: var(--sp-7); }
.confirm-block h3 { margin-bottom: var(--sp-3); }
.confirm-table { width: 100%; font-size: var(--fs-small); line-height: 1.8; background: #fff; }
.confirm-table th, .confirm-table td { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.confirm-table th { width: 32%; background: var(--c-bg-sub); font-weight: 700; }
.confirm-table td { word-break: break-word; }
.confirm-table .is-empty { color: var(--c-text-disabled); }
.confirm-message { padding: var(--sp-5); background: var(--c-bg-sub); border: 1px solid var(--c-border-soft); white-space: pre-wrap; word-break: break-word; line-height: 1.8; font-size: var(--fs-small); }

@media (max-width: 767px) {
  .contact-form-wrap { padding: var(--sp-5) var(--sp-4); }
  .form-actions .btn { width: 100%; min-width: 0; }
  .confirm-table th, .confirm-table td { display: block; width: 100%; }
  .confirm-table th { border-bottom: 0; }
  .form-steps { font-size: 11px; }
  .more__summary { padding: var(--sp-4); }
  .more__body { padding: 0 var(--sp-4) var(--sp-5); }
  .receipt { padding: var(--sp-5) var(--sp-4); }
  .receipt__list > div { grid-template-columns: 1fr; gap: var(--sp-1); }
}