/* UG Form - 表示側。色は --ugf-accent（設定画面で変更可）を基準にしています。 */
.ugf {
	--ugf-accent: #1e4e8c;
	--ugf-text: #1f2328;
	--ugf-muted: #6b7280;
	--ugf-line: #d6dae1;
	--ugf-bg: #fff;
	--ugf-soft: #eef3fa;
	--ugf-error: #c62828;
	--ugf-radius: 8px;
	color: var(--ugf-text);
	line-height: 1.7;
	max-width: 760px;
	margin: 0 auto;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.ugf { --ugf-soft: color-mix(in srgb, var(--ugf-accent) 8%, #fff); }
}
.ugf *, .ugf *::before, .ugf *::after { box-sizing: border-box; }
.ugf [hidden] { display: none !important; }

.ugf-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 20px;
}
.ugf-full { grid-column: 1 / -1; }
.ugf-field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.ugf-heading { margin: 8px 0 4px; font-size: 1.25em; line-height: 1.4; }
.ugf-desc { margin: 0; color: var(--ugf-muted); }

.ugf-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-weight: 700;
	margin: 0 0 6px;
	padding: 0;
	font-size: .95em;
}
.ugf-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 6px;
	border-radius: 3px;
	letter-spacing: .02em;
}
.ugf-req { background: var(--ugf-error); color: #fff; }
.ugf-opt { background: #eef0f3; color: var(--ugf-muted); }

.ugf input[type=text], .ugf input[type=email], .ugf input[type=tel], .ugf input[type=url],
.ugf input[type=number], .ugf input[type=date], .ugf select, .ugf textarea {
	width: 100%;
	font: inherit;
	font-size: 16px; /* iPhone で自動ズームしない大きさ */
	color: inherit;
	background: var(--ugf-bg);
	border: 1px solid var(--ugf-line);
	border-radius: var(--ugf-radius);
	padding: 11px 13px;
	line-height: 1.5;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}
.ugf select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 36px;
}
.ugf textarea { min-height: 150px; resize: vertical; }
.ugf input:focus, .ugf select:focus, .ugf textarea:focus {
	outline: none;
	border-color: var(--ugf-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ugf-accent) 22%, transparent);
}
.ugf input::placeholder, .ugf textarea::placeholder { color: #a0a6b0; }
.ugf input[type=file] { font-size: 14px; max-width: 100%; }

.ugf-choices { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ugf-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid var(--ugf-line);
	border-radius: var(--ugf-radius);
	cursor: pointer;
	background: var(--ugf-bg);
	line-height: 1.4;
}
.ugf-choice:has(input:checked) { border-color: var(--ugf-accent); background: var(--ugf-soft); }
.ugf-choice input { accent-color: var(--ugf-accent); width: 18px; height: 18px; margin: 0; flex: none; }
.ugf-accept { width: 100%; }

.ugf-note { margin: 6px 0 0; font-size: .85em; color: var(--ugf-muted); }
.ugf-note a { color: var(--ugf-accent); }
.ugf-err { margin: 6px 0 0; font-size: .875em; color: var(--ugf-error); font-weight: 700; }
.ugf-field.is-error input:not([type=checkbox]):not([type=radio]), .ugf-field.is-error select,
.ugf-field.is-error textarea, .ugf-field.is-error .ugf-choice, .ugf-field.is-error .ugf-cal {
	border-color: var(--ugf-error);
}

.ugf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ugf-captcha { margin-top: 20px; }

.ugf-alert {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: var(--ugf-radius);
	background: #fdecea;
	color: var(--ugf-error);
	font-weight: 700;
}

.ugf-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ugf-btn {
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	min-width: 220px;
	padding: 14px 28px;
	border-radius: 999px;
	cursor: pointer;
	border: 2px solid var(--ugf-accent);
	transition: opacity .15s, transform .15s;
	line-height: 1.3;
}
.ugf-btn-primary { background: var(--ugf-accent); color: #fff; }
.ugf-btn-ghost { background: transparent; color: var(--ugf-accent); }
.ugf-btn:hover { opacity: .88; }
.ugf-btn:active { transform: translateY(1px); }
.ugf-btn:disabled { opacity: .55; cursor: wait; }

/* 確認画面 */
.ugf-lead { text-align: center; margin: 0 0 18px; }
.ugf-review { margin: 0; border-top: 1px solid var(--ugf-line); }
.ugf-review-row { display: grid; grid-template-columns: 34% 1fr; border-bottom: 1px solid var(--ugf-line); }
.ugf-review dt, .ugf-review dd { margin: 0; padding: 12px 14px; }
.ugf-review dt { background: var(--ugf-soft); font-weight: 700; font-size: .92em; }
.ugf-review dd { white-space: pre-wrap; word-break: break-word; }

/* 完了 */
.ugf-step-done:focus { outline: none; }
.ugf-thanks {
	text-align: center;
	padding: 36px 20px;
	border: 1px solid var(--ugf-line);
	border-radius: var(--ugf-radius);
	background: var(--ugf-soft);
	font-weight: 600;
}
.ugf-thanks::before {
	content: "✓";
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--ugf-accent);
	color: #fff;
	font-size: 26px;
}
.ugf-thanks p { margin: 0 0 .6em; }
.ugf-thanks p:last-child { margin-bottom: 0; }

/* 予約カレンダー */
.ugf-booking {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 18px;
}
.ugf-cal {
	border: 1px solid var(--ugf-line);
	border-radius: var(--ugf-radius);
	padding: 12px;
	background: var(--ugf-bg);
	min-height: 120px;
}
.ugf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ugf-cal-title { font-weight: 700; }
.ugf-cal-nav {
	font: inherit;
	font-size: 20px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--ugf-line);
	background: var(--ugf-bg);
	color: inherit;
	cursor: pointer;
	line-height: 1;
}
.ugf-cal-nav:disabled { opacity: .3; cursor: default; }
.ugf-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.ugf-cal-dow { font-size: 12px; color: var(--ugf-muted); padding: 2px 0; }
.ugf-cal-dow.is-sun { color: #c62828; }
.ugf-cal-dow.is-sat { color: #1565c0; }
.ugf-cal-day {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 6px;
	font-size: 14px;
	color: #b6bbc4;
	font-variant-numeric: tabular-nums;
}
button.ugf-cal-day {
	font: inherit;
	font-size: 14px;
	border: 0;
	background: var(--ugf-soft);
	color: var(--ugf-accent);
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}
button.ugf-cal-day:hover { background: color-mix(in srgb, var(--ugf-accent) 18%, #fff); }
.ugf-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--ugf-line); }
button.ugf-cal-day.is-picked { background: var(--ugf-accent); color: #fff; }
.ugf-cal-none { margin: 8px 0 0; font-size: .85em; color: var(--ugf-muted); text-align: center; }

.ugf-times-hint, .ugf-times-title { margin: 4px 0 10px; font-size: .9em; color: var(--ugf-muted); }
.ugf-times-title { color: inherit; font-weight: 700; }
.ugf-time-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.ugf-time {
	font: inherit;
	font-weight: 700;
	padding: 10px 6px;
	border-radius: 6px;
	border: 1px solid var(--ugf-accent);
	background: var(--ugf-bg);
	color: var(--ugf-accent);
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}
.ugf-time:hover { background: var(--ugf-soft); }
.ugf-time.is-picked { background: var(--ugf-accent); color: #fff; }
.ugf-sel {
	grid-column: 1 / -1;
	margin: 0;
	padding: 10px 14px;
	border-radius: var(--ugf-radius);
	background: var(--ugf-soft);
	color: var(--ugf-accent);
	font-weight: 700;
}

@media (max-width: 640px) {
	.ugf-fields { grid-template-columns: 1fr; gap: 20px; }
	.ugf-half { grid-column: 1 / -1; }
	.ugf-booking { grid-template-columns: 1fr; }
	.ugf-review-row { grid-template-columns: 1fr; }
	.ugf-review dt { padding-bottom: 6px; }
	.ugf-review dd { padding-top: 6px; }
	.ugf-btn { width: 100%; min-width: 0; }
	.ugf-actions { flex-direction: column-reverse; }
}