/* SLIM GRACE の予約フォーム（GD2 G2_A_*・HP のトーン）。クラスはすべて esly- で始め、フォームの外に影響しない */
.esly-rsv {
	--sg-pri: #3d7568;
	--sg-pri-d: #36695d;
	--sg-text: #47423b;
	--sg-dark: #423c34;
	--sg-muted: #6e665c;
	--sg-line: #ebe4d8;
	--sg-cream: #f7f3ec;
	--sg-border: #8f877c;
	--sg-err: #a8473a;
	--sg-err-soft: #fbeeea;
	--sg-off: #b5aea4;
	--sg-chip: #eef6f3;
	color: var(--sg-text);
	font-size: 15px;
	line-height: 1.75;
}
.esly-rsv *, .esly-rsv *::before, .esly-rsv *::after { box-sizing: border-box; }
.esly-rsv a { color: var(--sg-pri); }
.esly-rsv a:hover { color: var(--sg-pri-d); }
.esly-rsv :focus-visible { outline: 3px solid var(--sg-pri); outline-offset: 2px; }
/* GD5（/reserve/・G2_A_FormPart mode wp）：外側の地は透明、フォームと送信完了は白い面。列は テーマの .p-reserve__inner（760px）の幅いっぱい */
.esly-rsv { background: transparent; }
.esly-rsv form, .esly-rsv .esly-done { max-width: 760px; margin: 0 auto; background: #ffffff; border: 1px solid var(--sg-line); border-radius: 12px; box-shadow: 0 6px 20px rgba(66, 60, 52, 0.08); }
.esly-rsv form { padding: 40px; display: flex; flex-direction: column; gap: 22px; position: relative; }
.esly-rsv p { margin: 0; }
.esly-rsv .esly-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.esly-rsv .esly-lead { background: var(--sg-cream); border-radius: 8px; padding: 4px 18px; display: flex; flex-direction: column; font-size: 15px; line-height: 1.8; color: var(--sg-text); }
.esly-rsv .esly-lead-s { padding: 14px 0; display: flex; flex-direction: column; gap: 2px; }
.esly-rsv .esly-lead-s + .esly-lead-s { border-top: 1px solid #e3dccf; }
.esly-rsv .esly-lead-h { font-weight: 700; color: var(--sg-dark); }
.esly-rsv .esly-lead a { color: var(--sg-pri); font-weight: 500; }
.esly-rsv .esly-alert { border: 2px solid var(--sg-err); background: var(--sg-err-soft); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.esly-rsv .esly-alert > b { color: var(--sg-err); }
.esly-rsv .esly-alert a { min-height: 32px; display: flex; align-items: center; color: var(--sg-err); font-size: 14px; }
.esly-rsv .esly-f { display: flex; flex-direction: column; gap: 6px; }
.esly-rsv .esly-f > label, .esly-rsv .esly-f > .esly-lab, .esly-rsv legend { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--sg-dark); padding: 0; }
.esly-rsv fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.esly-rsv .esly-req { font-size: 12px; color: #ffffff; background: var(--sg-err); border-radius: 4px; padding: 0 6px; line-height: 20px; font-weight: 400; }
.esly-rsv .esly-opt { font-size: 12px; color: var(--sg-muted); border: 1px solid var(--sg-border); border-radius: 4px; padding: 0 6px; line-height: 18px; font-weight: 400; }
.esly-rsv .esly-in { height: 48px; width: 100%; border: 1px solid var(--sg-border); border-radius: 8px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--sg-dark); background: #ffffff; }
.esly-rsv textarea.esly-in { height: auto; min-height: 112px; padding: 10px 14px; resize: vertical; }
.esly-rsv select.esly-in { padding-right: 32px; }
.esly-rsv .esly-in[aria-invalid="true"] { border: 2px solid var(--sg-err); background: #fffaf8; }
.esly-rsv .esly-hint { font-size: 13px; color: var(--sg-muted); }
.esly-rsv .esly-e { font-size: 14px; color: var(--sg-err); }
.esly-rsv .esly-wish { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--sg-line); border-radius: 8px; padding: 12px 14px; }
.esly-rsv .esly-wish-h { font-size: 14px; font-weight: 500; color: var(--sg-dark); }
.esly-rsv .esly-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.esly-rsv .esly-row .esly-in { width: auto; }
.esly-rsv .esly-date { min-width: 200px; min-height: 48px; border: 1px solid var(--sg-border); border-radius: 8px; background: #ffffff; padding: 0 14px; font: inherit; font-size: 16px; color: var(--sg-dark); text-align: left; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.esly-rsv .esly-date[aria-invalid="true"] { border: 2px solid var(--sg-err); }
.esly-rsv .esly-tm { display: inline-flex; align-items: center; gap: 4px; }
.esly-rsv .esly-tm select { min-width: 84px; }
.esly-rsv .esly-clear { min-height: 44px; border: 0; background: transparent; color: var(--sg-pri); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }
.esly-rsv .esly-cal { border: 1px solid var(--sg-line); border-radius: 8px; padding: 12px; background: #ffffff; max-width: 360px; }
.esly-rsv .esly-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 500; color: var(--sg-dark); }
.esly-rsv .esly-cal-h button { min-width: 44px; min-height: 44px; border: 1px solid var(--sg-border); background: #ffffff; border-radius: 8px; cursor: pointer; font: inherit; }
.esly-rsv .esly-cal-h button[disabled] { color: var(--sg-off); border-color: var(--sg-line); cursor: not-allowed; }
.esly-rsv .esly-cal table { border-collapse: collapse; width: 100%; }
.esly-rsv .esly-cal th { font-size: 12px; font-weight: 400; color: var(--sg-muted); padding: 2px 0; }
.esly-rsv .esly-cal td { padding: 1px; text-align: center; }
.esly-rsv .esly-cal td button { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 8px; font: inherit; color: var(--sg-dark); cursor: pointer; position: relative; }
.esly-rsv .esly-cal td button:hover { background: var(--sg-chip); }
.esly-rsv .esly-cal td button[disabled] { color: var(--sg-off); background: transparent; cursor: not-allowed; text-decoration: line-through; }
.esly-rsv .esly-cal td button[aria-pressed="true"] { background: var(--sg-pri); color: #ffffff; font-weight: 700; }
.esly-rsv .esly-cal td button .esly-mk { position: absolute; left: 0; right: 0; bottom: 1px; font-size: 9px; line-height: 1; }
.esly-rsv .esly-cal .esly-hint { margin-top: 6px; }
.esly-rsv .esly-send { min-height: 52px; border: 0; border-radius: 999px; background: var(--sg-pri); color: #ffffff; font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; width: 100%; max-width: 420px; align-self: center; }
.esly-rsv .esly-send:hover { background: var(--sg-pri-d); }
.esly-rsv .esly-send[disabled] { background: var(--sg-off); cursor: progress; }
.esly-rsv .esly-priv { font-size: 13px; color: var(--sg-muted); text-align: center; }
.esly-rsv .esly-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.esly-rsv .esly-done { padding: 40px; display: flex; flex-direction: column; gap: 16px; }
/* スマホ（767px 以下）：白い面は幅いっぱい・角と影なし・枠は上下の 1px だけ */
@media (max-width: 767px) {
	.esly-rsv form, .esly-rsv .esly-done { max-width: none; border: 0; border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); border-radius: 0; box-shadow: none; }
	.esly-rsv form { padding: 24px 16px 28px; }
	.esly-rsv .esly-done { padding: 28px 16px 32px; }
}
.esly-rsv .esly-done h2 { margin: 0; font-size: 20px; font-weight: 500; color: var(--sg-dark); }
.esly-rsv .esly-done .esly-strong { border: 2px solid var(--sg-pri); border-radius: 8px; padding: 14px 16px; font-weight: 500; color: var(--sg-dark); }
/* G5-1 §1-4：送り先が未設定のときの「準備中」の案内 */
/* GD5：準備中の案内・JS なしの案内も、フォームと同じ白い面に載せる */
.esly-rsv .esly-notready { max-width: 760px; margin: 0 auto; padding: 40px; background: #ffffff; border: 1px solid var(--sg-line); border-radius: 12px; box-shadow: 0 6px 20px rgba(66, 60, 52, 0.08); line-height: 1.8; }
@media (max-width: 767px) {
	.esly-rsv .esly-notready { max-width: none; padding: 24px 16px 28px; border: 0; border-top: 1px solid var(--sg-line); border-bottom: 1px solid var(--sg-line); border-radius: 0; box-shadow: none; }
}