@charset "utf-8";

/* =========================================================
   DateTimeReservation_common.css

   主な対象画面:
   - FutureReserveInfo.aspx
   - FutureReserveWarning.aspx
   - ReserveWorkSelection.aspx
   - ReserveTimeSelection.aspx
   - ReserveAbsenteeMail.aspx
   - ReserveMailSearch.aspx
   - ReserveMailCancel.aspx
   - ReserveComplete.aspx
   - ReserveConfirm.aspx
   - ReserveCancel.aspx
   - ReserveCancelComplete.aspx
   - AlreadyReserved.aspx
   - ReserveError.aspx

   役割:
   - 予約系画面の共通レイアウト
   - 見出し、説明テーブル、共通ボタン
   - 一部の旧UI互換スタイル
========================================================= */

/* =========================================================
   Base
   対象:
   - 予約系画面全体
========================================================= */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Yu Gothic", "Meiryo", sans-serif;
	background: #eef1f4;
	color: #222;
}

a {
	overflow: hidden;
	text-decoration: none;
}

	a:link,
	a:visited,
	a:hover,
	a:active {
		text-decoration: none;
	}

input[type="button"],
input[type="submit"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type="button"],
input[type="submit"],
select {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* =========================================================
   Common Layout
   対象:
   - 予約系画面の共通コンテナ
========================================================= */
.page-wrap {
	padding: 24px 12px 48px;
}

.contents {
	width: min(92%, 760px);
	margin: 28px auto 0;
	padding: 24px 28px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
	text-align: center;
}

#pnlLink {
	width: min(92%, 900px);
	margin: 0 auto;
	text-align: left;
}

.action-card {
	padding: 30px 28px 22px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #e2e8f0;
	border-radius: 26px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
	backdrop-filter: blur(4px);
}

.action-card-header {
	max-width: 620px;
	margin: 0 auto 18px;
	text-align: center;
}

.action-card-title {
	margin-bottom: 8px;
	font-size: 24px;
	font-weight: 700;
	color: #18293f;
}

.action-card-text {
	font-size: 15px;
	line-height: 1.8;
	color: #586476;
}

.menu-area {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}

.sub-action-area {
	width: 100%;
	max-width: 620px;
	margin: 18px auto 0;
}

.action-buttons {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
}

	.action-buttons .menu-btn:last-child {
		margin-bottom: 0;
	}

.selector {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* =========================================================
   Header / Title
   対象:
   - #lblShopName
   - #lblSubTitle
   - #subtitle
========================================================= */
#lblShopName {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 20px 16px 14px;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: #f7f8fa;
	color: #1e2f45;
	border-bottom: 1px solid #e3e7ec;
}

#subtitle,
#lblSubTitle {
	display: inline-block;
	width: 100%;
	padding: 12px 16px 14px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: #fbfcfd;
	color: #314256;
	border-bottom: 4px solid #d94a5c;
}

/* =========================================================
   説明テーブル / 注記ブロック
   主な対象:
   - FutureReserveInfo.aspx
   - ReserveTimeSelection.aspx
   - ReserveAbsenteeMail.aspx
   - ReserveMailSearch.aspx
========================================================= */
/* ltlInfoData や各種注記テーブル向けの説明ブロック */
.contents table,
.info-table {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	border-collapse: collapse;
}

.page-note-table {
	width: min(100%, 760px);
	margin: 0 auto;
	border-collapse: collapse;
}

	.contents td,
	.info-table td,
	.page-note-table td {
		padding: 6px 8px;
		text-align: center !important;
		line-height: 1.9;
		font-size: 17px;
		color: #4b5563;
	}

	.page-note-table td {
		text-align: left !important;
		vertical-align: top;
	}

	.page-note-table .page-note-marker {
		width: 1%;
		white-space: nowrap;
		font-weight: 700;
		color: #455468;
	}

	.page-note-table .page-note-text {
		text-align: left !important;
	}

	.contents .caution,
	.info-table .caution {
		display: inline-block;
		margin-top: 6px;
		color: #c53030;
		font-size: 15px;
		font-weight: 500;
	}

.warning-area {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
	font-size: 16px;
	color: #4b5563;
	text-align: center;
}

.inline-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border: 1px solid #c7d2fe;
	border-radius: 999px;
	background: #eef2ff;
	color: #3749c9 !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

	.inline-link:hover {
		background: #e0e7ff;
		border-color: #a5b4fc;
	}

.footer-info {
	max-width: 760px;
	margin: 24px auto 0;
	padding: 18px 20px;
	background: #fffdfa;
	border: 1px solid #ead7ab;
	border-radius: 16px;
	font-size: 15px;
	line-height: 1.9;
	color: #5b6470;
}

	.footer-info a {
		color: #2b5cab;
		text-decoration: underline;
	}

.info-page {
	text-align: center;
}

.page-eyebrow {
	display: table;
	margin: 0 auto 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #eef2ff;
	color: #3348b6;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.page-lead {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	color: #1f2d3d;
}

.page-description {
	max-width: 640px;
	margin: 14px auto 0;
	font-size: 16px;
	line-height: 1.9;
	color: #5b6470;
}

.info-summary-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 24px;
	text-align: left;
}

.info-summary-item {
	padding: 18px 20px;
	background: linear-gradient(180deg, #fbfcff 0%, #f5f8fc 100%);
	border: 1px solid #dbe4ef;
	border-radius: 16px;
}

.info-summary-label {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #32465f;
}

.info-summary-value {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	color: #17304f;
}

.page-note {
	margin-top: 16px;
	font-size: 14px;
	line-height: 1.8;
	color: #c53030;
}

/* =========================================================
   共通ボタン
   対象:
   - menu-btn 系を使うほぼ全画面
========================================================= */
.menu-btn {
	display: block;
	width: 100%;
	margin: 0 0 14px;
	padding: 16px 20px;
	border: 1px solid #d1d5db;
	border-radius: 14px;
	background: #ffffff;
	color: #1f2937 !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	cursor: pointer;
}

	.menu-btn:hover {
		transform: translateY(-1px);
		background: #fafafa;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	}

.menu-btn-primary {
	background: linear-gradient(135deg, #2457c5, #1d4ed8);
	border: none;
	color: #ffffff !important;
	box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.menu-btn-primary:hover {
		background: linear-gradient(135deg, #204eb1, #1b46c4);
		box-shadow: 0 12px 24px rgba(37, 99, 235, 0.3);
	}

.menu-btn-subtle {
	background: #f8fafc;
	border: 1px solid #d6dde7;
	color: #314256 !important;
	box-shadow: none;
}

	.menu-btn-subtle:hover {
		background: #f1f5f9;
		box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
	}

/* 戻る系の共通ボタン
   対象:
   - ReserveWorkSelection.aspx
   - ReserveAbsenteeMail.aspx
   - ReserveMailSearch.aspx
   - ReserveMailCancel.aspx
   - ReserveTimeSelection.aspx
   - 予約結果系画面 */
.menu-btn.back-btn {
	background: #ffffff;
	border: 1px solid #d1d5db;
	color: #374151 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

	.menu-btn.back-btn:hover {
		background: #f9fafb;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
	}

/* 確認 / 取消など注意系ボタン
   対象:
   - ReserveAbsenteeMail.aspx の「確認」
   - ReserveCancel.aspx のキャンセル実行 */
.menu-btn.cancel-btn {
	background: #fff1f1;
	border: 1px solid #e0a5a5;
	color: #a40000 !important;
}

	.menu-btn.cancel-btn:hover {
		background: #ffe5e5;
	}

/* =========================================================
   ReserveWorkSelection
   対象:
   - ReserveWorkSelection.aspx
========================================================= */
.period-card {
	width: min(92%, 760px);
	margin: 22px auto 18px;
	padding: 24px 28px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 22px;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
	text-align: center;
}

.period-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	color: #4b5563;
}

.period {
	margin: 0;
	font-size: 30px;
	font-weight: 700;
	color: #1f2d3d;
	letter-spacing: 0.02em;
}

.notice {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: #6b7280;
}

.work-card {
	width: min(92%, 760px);
	margin: 0 auto;
	padding: 28px 28px 30px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 24px;
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.section-title {
	margin: 0 0 22px;
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	color: #111827;
	letter-spacing: 0.02em;
}

.section-description {
	max-width: 560px;
	margin: 0 auto 20px;
	text-align: center;
	font-size: 16px;
	line-height: 1.8;
	color: #5b6470;
}

.work-list {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.menu-btn.work-btn,
.buttons.work-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 18px;
	background: #ffffff;
	border: 1px solid #d7dde5;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	color: #1f2937 !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

	.menu-btn.work-btn:hover,
	.buttons.work-btn:hover {
		background: #f8fbff;
		border-color: #b8c7db;
		box-shadow: 0 8px 18px rgba(30, 64, 175, 0.08);
		transform: translateY(-1px);
	}

.work-btn .work-text {
	display: inline-block;
	max-width: 100%;
	white-space: normal;
	word-break: break-word;
}

.work-prefix {
	display: inline-block;
	margin-right: 0.35em;
	color: #2563eb;
	font-weight: 700;
}

.back-area {
	width: min(92%, 760px);
	margin: 18px auto 0;
}

.back-btn {
	display: block;
	width: 100%;
	padding: 16px 20px;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 14px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	color: #374151 !important;
	font-size: 17px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.back-btn:hover {
		background: #f9fafb;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
		transform: translateY(-1px);
	}

/* =========================================================
   ReserveMailCancel
   対象:
   - ReserveMailCancel.aspx
========================================================= */
.cancel-guide {
	text-align: center;
}

.cancel-guide-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
	text-align: left;
}

.cancel-guide-card {
	padding: 20px 22px;
	background: linear-gradient(180deg, #fbfcff 0%, #f7f9fc 100%);
	border: 1px solid #dbe4ef;
	border-radius: 18px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.cancel-guide-title {
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	color: #17304f;
}

.cancel-guide-list {
	margin: 0;
	padding-left: 1.2em;
}

.cancel-guide-list li {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.9;
	color: #566274;
}

.cancel-guide-list li:last-child {
	margin-bottom: 0;
}

.cancel-guide-note {
	max-width: 720px;
	margin: 20px auto 0;
	padding: 18px 20px;
	background: #fff7f7;
	border: 1px solid #f2c4c4;
	border-radius: 18px;
	text-align: left;
}

.cancel-guide-note-title {
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #b42318;
}

.cancel-guide-note p {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	color: #6b3b3b;
}

.cancel-action-wrap {
	padding-top: 18px;
}

.cancel-action-wrap .action-card {
	max-width: 760px;
	margin: 0 auto;
}

.cancel-action-wrap .action-buttons > * + * {
	margin-top: 14px;
}

#lblWorkName,
#ltlWorkName {
	display: block;
	width: 100%;
}

.no-reserve-msg {
	color: #d32f2f; /* 赤文字（注意喚起向けの色） */
	text-align: center; /* 中央寄せ */
	font-size: 20px; /* サイズ調整可（必要に応じて変更OK） */
	font-weight: bold; /* 強調表示 */
	margin: 20px 0; /* 余白 */
}

/* =========================================================
   Generic Text Helpers
   対象:
   - ReserveTimeSelection.aspx
   - FutureReserveInfo.aspx
   - ReserveAbsenteeMail.aspx など
========================================================= */
.section {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	color: #000;
	font-weight: bold;
}

.strong {
	font-weight: bold;
}

.note {
	color: #dd3344;
}

.cautions {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.selected-work {
	display: block;
	width: fit-content;
	margin: 16px auto;
	padding: 14px 20px;
	background: #ffffff;
	border: 1px solid #dcdcdc;
	border-left: 6px solid #0078d4;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	font-weight: bold;
	font-size: 18px;
	text-align: center;
}

/* =========================================================
   Legacy Buttons / Controls
   備考:
   - 本体で使っていない旧UI互換スタイルは css/legacy-compat.css へ移設済み
   - #MailInput は現行の ReserveAbsenteeMail.aspx で使うためここに残します
========================================================= */
#MailInput {
	width: 100%;
	padding: 10px 15px;
	font-size: 16px;
	border-radius: 3px;
	border: 3px solid #000;
	box-sizing: border-box;
}

	#MailInput:focus {
		border: 3px solid #ff9900;
		z-index: 10;
		outline: 0;
	}

/* =========================================================
   Legacy Tables
   備考:
   - 旧時間選択 UI の table / RadioButtonList 向けスタイルは
   - css/legacy-compat.css へ移設済み
========================================================= */

hr {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	border: none;
	border-top: 1px solid #e5e7eb;
}

/* =========================================================
   Responsive
   対象:
   - 共通レイアウト全体
========================================================= */
@media screen and (min-width: 800px) {
	.cautions {
		max-width: 620px;
	}
}

@media screen and (max-width: 640px) {
	#lblShopName {
		padding: 14px 12px 10px;
		font-size: 24px;
	}

	#subtitle,
	#lblSubTitle {
		padding: 10px 12px;
		font-size: 16px;
	}

	.page-wrap {
		padding: 16px 10px 32px;
	}

	.contents {
		width: calc(100% - 24px);
		margin-top: 18px;
		padding: 18px 16px;
	}

		.contents td,
		.info-table td {
			font-size: 15px;
			line-height: 1.8;
		}

	.action-card {
		padding: 20px 16px 18px;
		border-radius: 18px;
	}

	.action-card-title {
		font-size: 22px;
	}

	.action-card-text {
		font-size: 14px;
		line-height: 1.7;
	}

	.warning-area {
		font-size: 14px;
	}

	.menu-btn {
		padding: 14px 16px;
		font-size: 16px;
		border-radius: 12px;
	}

	.footer-info {
		padding: 16px;
		font-size: 14px;
		line-height: 1.8;
	}

	.page-lead {
		font-size: 24px;
	}

	.page-description {
		font-size: 15px;
		line-height: 1.8;
	}

	.info-summary-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 20px;
	}

	.info-summary-item {
		padding: 16px;
	}

	.info-summary-value {
		font-size: 15px;
	}

	.page-note {
		font-size: 13px;
		line-height: 1.7;
	}

	.period-card,
	.work-card,
	.back-area {
		width: calc(100% - 8px);
	}

	.period-card {
		padding: 18px 16px;
		border-radius: 18px;
	}

	.period-title {
		font-size: 16px;
	}

	.period {
		font-size: 22px;
		line-height: 1.5;
	}

	.notice {
		font-size: 13px;
		line-height: 1.7;
	}

	.work-card {
		padding: 20px 16px 22px;
		border-radius: 18px;
	}

	.section-title {
		margin-bottom: 18px;
		font-size: 24px;
	}

	.section-description {
		margin-bottom: 18px;
		font-size: 15px;
		line-height: 1.7;
	}

	.cancel-guide-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 20px;
	}

	.cancel-guide-card {
		padding: 18px 16px;
	}

	.cancel-guide-title {
		font-size: 17px;
	}

	.cancel-guide-list li,
	.cancel-guide-note p {
		font-size: 14px;
		line-height: 1.8;
	}

	.cancel-guide-note {
		margin-top: 16px;
		padding: 16px;
		border-radius: 16px;
	}

	.menu-btn.work-btn,
	.buttons.work-btn {
		padding: 14px 14px;
		font-size: 16px;
		border-radius: 12px;
		line-height: 1.5;
	}

	.back-btn {
		padding: 14px 16px;
		font-size: 16px;
		border-radius: 12px;
	}
}

/* =========================================================
   Legacy 移設メモ
   以下の未使用互換スタイルは css/legacy-compat.css へ移設済みです。
   - .buttons / .form-buttons
   - #ddlSelectDate
   - #btnTimeOutput
   - #pnlTimeList / #tblSelectTime / #rblTimeList
========================================================= */


/* =========================================================
   FutureReserveWarning
   対象:
   - FutureReserveWarning.aspx
========================================================= */
.warning-page {
	width: min(92%, 860px);
	margin: 24px auto 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
}

.warning-intro {
	margin: 0 auto 22px;
	padding: 28px 28px 24px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
	text-align: center;
	color: #4b5563;
}

.warning-intro-label {
	display: inline-block;
	margin-bottom: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #eef2ff;
	color: #3348b6;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.warning-intro-title {
	margin-bottom: 18px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
	color: #1f2d3d;
}

.warning-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	text-align: left;
}

.warning-summary-item {
	padding: 16px 18px;
	background: linear-gradient(180deg, #fbfcff 0%, #f5f8fc 100%);
	border: 1px solid #dbe4ef;
	border-radius: 16px;
}

.warning-summary-title {
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 700;
	color: #17304f;
}

.warning-summary-text {
	font-size: 14px;
	line-height: 1.7;
	color: #5b6470;
}

.warning-body {
	padding: 0 4px;
}

.warning-section {
	margin-bottom: 18px;
	padding: 24px 26px;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.warning-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: #111827;
}

.warning-section-title::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #2457c5;
	flex: 0 0 auto;
}

.warning-section-text {
	padding-left: 20px;
	font-size: 16px;
	line-height: 1.95;
	color: #4b5563;
	word-break: break-word;
	text-align: left;
}

	.warning-section-text br + br {
		display: block;
		content: "";
		margin-top: 6px;
	}

.warning-list-text {
	padding-left: 24px;
}

.warning-subblock + .warning-subblock {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #e8edf3;
}

.warning-subtitle {
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #17304f;
}

.warning-bullet-list {
	margin: 0;
	padding-left: 1.2em;
}

.warning-bullet-list li {
	margin-bottom: 6px;
	line-height: 1.85;
}

/* 注意ボタンエリア
   対象:
   - FutureReserveWarning.aspx 下部 */
.warning-bottom {
	width: min(92%, 860px);
	margin: 26px auto 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
}

@media screen and (max-width: 640px) {
	.warning-intro {
		margin: 0 auto 18px;
		padding: 22px 18px 18px;
		border-radius: 18px;
	}

	.warning-intro-title {
		font-size: 22px;
	}

	.warning-summary {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.warning-section {
		padding: 18px 16px;
		border-radius: 18px;
	}

	.warning-section-title {
		font-size: 18px;
	}

	.warning-section-text {
		padding-left: 0;
		font-size: 15px;
		line-height: 1.85;
	}

	.warning-list-text {
		padding-left: 0;
	}
}

.warning-back-btn-unused {
	display: block;
	width: min(100%, 520px);
	margin: 0 auto;
	padding: 16px 20px;
	border: 1px solid #d1d5db;
	border-radius: 14px;
	background: #ffffff;
	color: #1f2937 !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

	.warning-back-btn-unused:hover {
		transform: translateY(-1px);
		background: #fafafa;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
	}





/* =========================================================
   モーダル
   対象:
   - JavaScript で開く確認ダイアログ類
========================================================= */
.modal {
	display: none;
	position: fixed;
	z-index: 9999;
	inset: 0;
	background: rgba(0,0,0,0.4);
	justify-content: center;
	align-items: center;
}

.modal-content {
	background: #fff;
	border-radius: 12px;
	padding: 24px 20px;
	width: 90%;
	max-width: 360px;
	text-align: center;
	box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.modal-text {
	font-size: 16px;
	margin-bottom: 20px;
}

.modal-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.modal-btn {
	flex: 1;
	padding: 10px;
	border-radius: 8px;
	border: none;
	font-size: 14px;
	cursor: pointer;
}

	/* OK（強調） */
	.modal-btn.ok {
		background: #d9534f;
		color: #fff;
	}

	/* キャンセル */
.modal-btn.cancel {
		background: #e9ecef;
	}

/* =========================================================
   2026 visual theme
   参考デザインの「信頼感のある行政サービス」を全予約画面へ適用
========================================================= */
:root {
	--fr-blue: #1757d5;
	--fr-blue-dark: #0d2b55;
	--fr-blue-soft: #edf4ff;
	--fr-line: #c9daf6;
	--fr-surface: rgba(255, 255, 255, 0.94);
	--fr-shadow: 0 12px 30px rgba(24, 55, 96, 0.10);
}

body {
	min-height: 100vh;
	background:
		radial-gradient(circle at 82% 4%, rgba(199, 221, 255, 0.52), transparent 28rem),
		linear-gradient(180deg, #fbfdff 0, #f2f6fb 38rem, #eef3f8 100%);
	color: var(--fr-blue-dark);
}

.page-header-block {
	display: grid;
	grid-template-columns: minmax(260px, 0.9fr) minmax(400px, 1.25fr);
	align-items: center;
	width: 100%;
	min-height: 180px;
	padding: 18px max(6vw, calc((100% - 1120px) / 2));
	background:
		radial-gradient(circle at 72% 45%, rgba(204, 224, 255, 0.52), transparent 26rem),
		rgba(255, 255, 255, 0.74);
	border-bottom: 3px solid var(--fr-blue);
}

.page-header-block #lblShopName {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 110px;
	padding: 0 50px 0 20px;
	background: transparent;
	border: 0;
	border-right: 1px solid #b9c9df;
	color: var(--fr-blue-dark);
	font-size: clamp(24px, 3vw, 42px);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-align: left;
	white-space: nowrap;
}

.page-header-block #subtitle,
.page-header-block #lblSubTitle {
	display: flex;
	position: relative;
	align-items: flex-end;
	min-height: 110px;
	padding: 43px 0 8px 44px;
	background: transparent;
	border: 0;
	color: var(--fr-blue-dark);
	font-size: clamp(25px, 3vw, 42px);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.25;
	text-align: left;
	white-space: nowrap;
}

.page-header-block #subtitle::before,
.page-header-block #lblSubTitle::before {
	content: "日時指定予約";
	position: absolute;
	top: 3px;
	left: 44px;
	padding: 7px 20px;
	border-radius: 999px;
	background: linear-gradient(135deg, #2d6be4, #0e4bc9);
	box-shadow: 0 4px 10px rgba(23, 87, 213, 0.2);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
}

.page-header-block .header-title-group {
	min-width: 0;
}

.page-header-block .header-title-group #subtitle {
	min-height: auto;
	padding-bottom: 3px;
}

.page-header-block .header-description {
	margin: 0;
	padding: 0 20px 3px 44px;
	color: #52657c;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.75;
	text-align: left;
}

.page-header-block > #subtitle,
.page-header-block > #lblSubTitle {
	grid-column: 2;
	grid-row: 1;
	padding-bottom: 34px;
}

.page-header-block > .header-description {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	padding-bottom: 5px;
}

.page-header-block > .page-lead {
	grid-column: 2;
	margin: -26px 0 10px 48px;
	color: #53657b;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	text-align: left;
}

.contents,
.action-card,
.work-card,
.period-card,
.warning-intro,
.warning-section,
.warning-bottom,
.reserve-card {
	border-color: #dce6f2;
	box-shadow: var(--fr-shadow);
}

.contents {
	margin-top: 32px;
	padding: 30px;
}

.page-eyebrow,
.warning-intro-label {
	padding: 8px 18px;
	background: var(--fr-blue-soft);
	color: var(--fr-blue);
}

.page-eyebrow::before,
.warning-intro-label::before {
	content: "ⓘ";
	margin-right: 0.55em;
	font-size: 1.15em;
}

.info-summary-item,
.warning-summary-item {
	border-color: var(--fr-line);
	background: linear-gradient(135deg, #ffffff, #f4f8ff);
}

.info-summary-label::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 0.55em;
	vertical-align: middle;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 15h3M8 18h6'/%3E%3C/svg%3E");
}

.info-summary-item:nth-child(2) .info-summary-label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3v5h5M8 12h7M8 16h5'/%3E%3C/svg%3E");
}

.page-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.page-note::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23e23b34' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
}

.menu-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 66px;
	padding: 15px 58px 15px 62px;
	border-color: var(--fr-blue);
	border-radius: 14px;
	color: var(--fr-blue-dark) !important;
	background: #fff;
	box-shadow: 0 4px 12px rgba(23, 87, 213, 0.07);
}

.menu-btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 24px;
	width: 30px;
	height: 30px;
	transform: translateY(-50%);
	border: 0;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 15l2 2 5-5'/%3E%3C/svg%3E");
}

.menu-btn::after {
	content: "›";
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	color: var(--fr-blue);
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
}

.menu-btn-primary {
	border-color: var(--fr-blue);
	background: linear-gradient(135deg, #245fd8, #0d4dcc);
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(23, 87, 213, 0.22);
}

.menu-btn-primary::before,
.menu-btn-primary::after {
	color: #fff;
}

.menu-btn-primary::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18M8 15l2 2 5-5'/%3E%3C/svg%3E");
}

.menu-btn-primary::after {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--fr-blue);
	font-size: 27px;
}

.back-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.back-btn::after {
	display: none;
}

.cancel-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
}

.work-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12a2 2 0 0 1 2 2v16l-4-3-4 3-4-3-4 3V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 8h8M8 12h5'/%3E%3C/svg%3E");
}

/* トップ画面の各メニューを用途別のピクトにする */
#hlMailCancel::before,
#btnCancelReservation::before,
#hlReserveCancel::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
}

#hlAbsenteeMail:not(.back-btn)::before,
#btnSearch::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

#btnSearch.cancel-search-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
}

/* ASP:Button は input 要素になるため疑似要素ではなく背景に表示 */
input.menu-btn {
	background-repeat: no-repeat;
	background-position: 24px center;
	background-size: 30px 30px;
}

input.menu-btn:not(.back-btn):not(.cancel-btn) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}

input.menu-btn.back-btn {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
}

input.menu-btn.cancel-btn {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
}

.inline-link {
	border-color: var(--fr-line);
	background: var(--fr-blue-soft);
	color: var(--fr-blue) !important;
}

@media screen and (max-width: 700px) {
	.page-header-block {
		grid-template-columns: 1fr;
		min-height: auto;
		padding: 26px 22px 30px;
	}

	.page-header-block #lblShopName {
		justify-content: flex-start;
		min-height: auto;
		padding: 0 0 18px;
		border-right: 0;
		border-bottom: 1px solid #c6d3e3;
		font-size: clamp(20px, 6vw, 25px);
		letter-spacing: 0.04em;
	}

	.page-header-block #subtitle,
	.page-header-block #lblSubTitle {
		min-height: 120px;
		padding: 58px 0 0;
		font-size: clamp(22px, 7vw, 29px);
		letter-spacing: 0.02em;
	}

	.page-header-block .header-title-group #subtitle {
		min-height: 112px;
		padding-bottom: 0;
	}

	.page-header-block .header-description {
		padding: 10px 0 0;
		font-size: 14px;
	}

	.page-header-block > #subtitle,
	.page-header-block > #lblSubTitle {
		grid-column: 1;
		grid-row: auto;
		padding-bottom: 18px;
	}

	.page-header-block > .header-description {
		grid-column: 1;
		grid-row: auto;
		padding: 0;
	}

	.page-header-block #subtitle::before,
	.page-header-block #lblSubTitle::before {
		top: 20px;
		left: 0;
		padding: 6px 14px;
		font-size: 12px;
	}

	.page-header-block > .page-lead {
		grid-column: 1;
		margin: 15px 0 0;
		font-size: 14px;
	}

	.contents {
		padding: 22px 17px;
		border-radius: 18px;
	}

	.menu-btn {
		min-height: 58px;
		padding: 13px 44px;
	}

	.menu-btn::before {
		left: 14px;
		width: 24px;
		height: 24px;
		font-size: 15px;
	}

	.menu-btn::after {
		right: 15px;
	}
}

/* =========================================================
   Unified button system
   主操作は青塗り、それ以外は白地＋青枠に統一
========================================================= */
.menu-btn,
.menu-btn-subtle,
.menu-btn.back-btn,
.menu-btn.cancel-btn,
.back-btn,
.menu-btn.work-btn,
.buttons.work-btn {
	border: 1.5px solid var(--fr-blue);
	background-color: #ffffff;
	color: var(--fr-blue-dark) !important;
	box-shadow: 0 4px 12px rgba(23, 87, 213, 0.08);
}

.menu-btn:hover,
.menu-btn-subtle:hover,
.menu-btn.back-btn:hover,
.menu-btn.cancel-btn:hover,
.back-btn:hover,
.menu-btn.work-btn:hover,
.buttons.work-btn:hover {
	border-color: #0d4dcc;
	background-color: #f4f8ff;
	box-shadow: 0 7px 16px rgba(23, 87, 213, 0.14);
}

.menu-btn-primary,
.menu-btn.menu-btn-primary {
	border-color: var(--fr-blue);
	background: linear-gradient(135deg, #245fd8, #0d4dcc);
	color: #ffffff !important;
	box-shadow: 0 8px 18px rgba(23, 87, 213, 0.22);
}

.menu-btn-primary:hover,
.menu-btn.menu-btn-primary:hover {
	border-color: #0b43b5;
	background: linear-gradient(135deg, #1d56ca, #0b43b5);
	box-shadow: 0 10px 22px rgba(23, 87, 213, 0.28);
}

.cancel-btn::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%231757d5' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
}

/* メール検索・キャンセル画面は文字の見た目をわずかに下げて中央補正 */
.email-cancel-actions .menu-btn {
	align-items: center;
	justify-content: center;
	padding-top: 17px;
	padding-bottom: 13px;
	line-height: 1.4;
}

/* ページ間の余白・カード表現を共通化 */
.cancel-page {
	background: transparent;
}

.cancel-main {
	margin-top: 28px;
}

.reserve-card,
.email-cancel-card,
.receive-week-card,
.detail-note-card {
	border-color: #dce6f2;
	border-radius: 20px;
	box-shadow: var(--fr-shadow);
}

@media screen and (max-width: 640px) {
	.cancel-main {
		margin-top: 20px;
	}
}

.warning-bottom {
	border: 0;
	background: transparent;
	box-shadow: none;
}