* {
	margin: 0;
	padding: 0;
	list-style-type: none;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	text-decoration: none;
	font-weight: normal;

	background: none;
	border: none;
	border-collapse: collapse;
	outline: none;
	word-break: break-all;
}

*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 12px;
}

body {
	font-family: 'Hiragino maru Gothic ProN W4', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'arial', 'Meiryo', 'MS PGothic', sans-serif;
	font-weight: 500;
	line-height: 1.2rem;
	background-color: #fff;
	width: 100%;
	color: #333;
}

input[type='text'],
input[type='number'],
input[type='password'],
input[type='email'],
input[type='tel'],
input[type='url'] {
	padding: 0.5rem;
	border: 1px #999 solid;
	background-color: #fff;
	border-radius: 2px;
	max-width: 100%;
	font-size: 1rem;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
}

.input_area {
	position: relative;
	display: inline-block;
	> input[type='number'] {
		padding-right: 2rem;
	}
	> i,
	> span {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0.5rem;
		font-size: 1.2rem;
	}
	> i:hover {
		cursor: pointer;
		color: #2196f3;
	}
}

textarea {
	resize: vertical;
	padding: 0.5rem;
	border: 1px #999 solid;
	background-color: #fff;
	border-radius: 2px;
	max-width: 100%;
	font-size: 1rem;
}

input[type='number'] {
	text-align: right;
}

.widefat {
	width: 100%;
}
.min {
	width: 8rem;
}

textarea.widefat {
	height: 20rem;
}

.number {
	text-align: right;
}
input[type='submit'],
input[type='button'],
button {
	font-size: 1rem;
}

input[type='submit']:hover,
input[type='button']:hover,
button:hover {
	cursor: pointer;
}

/* label {
	padding-left: 0.5rem;
} */
label:hover {
	cursor: pointer;
}

select {
	padding: 0.5rem;
	border: 1px #999 solid;
	background-color: #fff;
	border-radius: 2px;
	font-size: 1rem;
}

h1 {
	font-size: 1.4rem;
	line-height: 1.8rem;
	padding-bottom: 0.5rem;
}

h2 {
	font-size: 1.2rem;
	line-height: 1.2rem;
	padding-bottom: 0.5rem;
}
h3 {
	font-size: 1rem;
	line-height: 1.2rem;
	padding-bottom: 0.5rem;
	color: #2196f3;
}

.h1_login {
	color: #2196f3;
	font-size: 1.2em;
}
b {
	font-weight: bold;
	color: #db6a7d;
}

.link {
	color: #4891cb;
	text-decoration: none;
}
.link:hover {
	cursor: pointer;
}
.link_white {
	color: #fff;
	text-decoration: none;
}
.link_white:hover {
	color: #db6a7d;
	cursor: pointer;
	transition: 0.5s;
}
.acenter {
	text-align: center;
}
.post_content {
	font-size: 0.9rem;
	font-weight: 1rem;
	white-space: pre-wrap;
}
.button_area {
	display: flex;
	justify-content: center;
	padding: 0.5rem 0;
	> span {
		padding: 0.2rem 0.5rem;
	}
}

.default_button {
	display: inline-block;
	padding: 0.5rem 1rem;
	background-color: #999;
	box-shadow: 1px 1px 1px #666;
	border-radius: 2px;
	color: #fff;
	text-shadow: 1px 1px 1px #666;
	line-height: 1rem;
}

.default_button:hover {
	cursor: pointer;
	background-color: #666;
	transition: 0.5s;
}

.primary {
	background-color: #4891cb;
}

.hissu {
	font-size: 0.8rem;
	display: inline-block;
	padding: 0 0.5rem;
	background-color: #ea6560;
	text-shadow: 1px 1px 1px #333;
	color: #fff;
}

.under_note {
	padding: 0.5rem 0;
	> li {
		font-size: 0.9rem;
		color: #4891cb;
	}
}

.ul_note {
	padding: 0.5rem 0;
	> li {
		position: relative;
		font-size: 0.9rem;
		padding-left: 1rem;
		padding-bottom: 0.2rem;
	}
	> li::before {
		position: absolute;
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		left: 0;
	}
	.alert {
		color: #4891cb;
	}
	.alert::before {
		color: #e2df2d;
		content: '\f071';
	}
	.error {
		color: #ea6560;
	}
	.error::before {
		color: #e2df2d;
		content: '\f071';
	}
}

.err_msg {
	> li {
		padding: 0.5rem;
		font-size: 0.9rem;
		background-color: #ea6560;
		color: #fff;
	}
}

.ol_list {
	list-style: none;
	counter-reset: number;
	> li {
		position: relative;
		padding-left: 2rem;
	}
	> li::before {
		counter-increment: number;
		content: '(' counter(number) ')';
		position: absolute;
		left: 0;
	}
}

.flow_area {
	position: relative;
	.flow_button {
		position: absolute;
		top: 0;
		right: 0;
	}
}

.label {
	display: inline-block;
	padding: 0 0.5rem;
	font-size: 0.9rem;
}
.active,
.importing {
	background-color: #4891cb !important;
	color: #fff;
}
.deactive,
.pending {
	background-color: #666 !important;
	color: #fff;
}

.abort {
	background-color: #db6a7d !important;
	color: #fff;
}
.abort:hover {
	cursor: pointer;
}
.fl_list {
	display: flex;
}
.fl_center {
	justify-content: center;
	align-items: center;
}
.fl_center > * {
	padding: 0 0.5rem;
}
.fl_center > * i {
	padding-right: 0.5rem;
}

/* loading processing */

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 1001;
	#loading_img {
		width: 64px;
	}
}

#processing {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 2000;
	#processing_img {
		width: 64px;
	}
}

.loading-enter-active,
.loading-leave-active {
	transition: opacity 0.5s ease;
}

.loading-enter-from,
.loading-leave-to {
	opacity: 0;
}

/* dialog */

.dialog-enter-active,
.dialog-leave-active {
	transition: opacity 0.5s ease;
}

.dialog-enter-from,
.dialog-leave-to {
	opacity: 0;
}

.dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	padding: 1rem;
	z-index: 999;
	background: rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	> .dialog_inner {
		background-color: #fff;
		max-height: 90%;
		min-width: 60%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		filter: drop-shadow(2px 2px 2px #999);
	}
	.dialog_header {
		width: 100%;
		background-color: #4891cb;
		padding: 0.5rem;
		color: #fff;
	}
	.dialog_content {
		width: 100%;
		padding: 0.5rem;
		overflow-y: auto;
		> section {
			padding-bottom: 1rem;
			.h2_dialog {
				padding-bottom: 0.5rem;
				> span {
					display: block;
					border-bottom: 1px #999 dashed;
					border-left: 0.5rem #999 solid;
					padding: 0.5rem;
				}
			}
			.dialog_text {
				padding: 0.5rem;
			}
		}
	}
	.dialog_footer {
		width: 100%;
		padding: 0.5rem;
		> .dialog_footer_button_area {
			display: flex;
			justify-content: center;
			> li {
				padding: 0.5rem;
			}
		}
	}
}

.ac_content {
	transition: max-height 0.2s;
	max-height: 0;
	overflow-y: hidden;
}
.ac_active {
	max-height: 100vh;
}

.flex {
	display: flex;
	align-items: center;
	> div {
		padding: 0 0.2rem;
	}
}

#login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;

	.dl_login {
		padding: 1rem;
		background-color: #b4b0b0;
		border-radius: 5px;
		> div {
			padding: 0.5rem 0;
			> dt {
				border-left: 0.5rem #4891cb solid;
				padding-left: 0.5rem;
				color: #fff;
			}
			> dd {
				padding: 0.5rem;
			}
		}
	}
}

.data_list {
	padding: 1rem 0;
	table {
		width: 100%;
		/* table-layout: fixed; */
		> thead {
			> tr {
				> th {
					border: 1px #ccc solid;
					background-color: #4891cb;
					color: #fff;
					padding: 0.5rem;
					/* width: 100%; */
					.th_button_area {
						display: flex;
						justify-content: space-between;
						.next_column:hover,
						.prev_column:hover {
							cursor: pointer;
						}
					}
				}
				.check_all {
					width: 3rem;
				}
				.num {
					width: 5rem;
				}
				.order_id,
				.customer_id,
				.category_id {
					width: 5rem;
				}
				.order_count {
					width: 8rem;
				}
				.order_name {
					width: 10rem;
				}
				.order_date,
				.post_date {
					width: 12rem;
				}
				.title,
				.site_name {
					width: 24rem;
				}
				.seminar_row {
					width: 70%;
				}
				.handle {
					width: 1rem;
				}
				.bn_2col {
					width: 6rem;
				}
			}
		}
		> tbody {
			> tr {
				> th {
					border: 1px #ccc solid;
					background-color: #666;
					color: #fff;
					padding: 0.5rem;
					text-align: left;
				}
				> td {
					padding: 0.5rem;
					border: 1px #ccc solid;
					background-color: #fff;
					word-break: break-all;
					a {
						color: #4891cb;
					}
					.ul_button {
						display: flex;
						flex-wrap: wrap;
						> li {
							padding: 0.2rem 0.5rem;
							color: #333;
							> i {
								display: block;
							}
							> i:hover {
								cursor: pointer;
								color: #ea6560;
							}
						}
					}
				}
				.td_full {
					padding: 0;
					vertical-align: top;
				}
				.row_sortable {
					background-color: #efefef;
				}
				.row_sortable:hover {
					cursor: move;
					background-color: #666;
					color: #fff;
					transition: 0.5s;
				}
				.inner_table {
					padding: 0;
					tr {
						display: flex;
						th {
							flex: 1;
							border: none;
						}
						td {
							border: none;
							background-color: #f8f8f8;
						}
						.cart_button_area {
							width: 2rem;
						}
						.cart_price {
							width: 8rem;
							text-align: right;
						}
					}
				}
				.price {
					width: 8rem;
					text-align: right;
				}
			}
			> tr:hover {
				> td {
					background-color: #f8f8f8;
					transition: 0.5s;
				}
			}
			/* > tr:nth-child(even) {
				> td {
					background-color: #f8f8f8;
				}
			} */
		}
		> tfoot {
			> tr {
				> th {
					border: 1px #ccc solid;
					background-color: #999;
					color: #fff;
					padding: 0.5rem;
				}
				> td {
					border: 1px #ccc solid;
					padding: 0.5rem;
					background-color: #ddd;
					font-weight: bold;
				}
			}
		}
	}
}

.list_button_area {
	> ul {
		padding: 1rem 0;
		display: flex;
		justify-content: flex-end;
		> li {
			padding-left: 1rem;
			display: flex;
			align-items: center;
			> div {
				padding-left: 0.5rem;
			}
			> i:hover {
				cursor: pointer;
				color: #ea6560;
			}
		}
	}
	.list_center {
		justify-content: center;
	}
}

.list_relation_area {
	> ul {
		background-color: #fff;
		> li {
			display: flex;
			border-bottom: 1px #efefef solid;
			padding: 0.2rem 0;
			> span {
				flex: 1;
			}
			> i:hover {
				cursor: pointer;
				color: #ea6560;
			}
		}
	}
}

.button_list {
	> ul {
		display: flex;
		flex-wrap: wrap;

		> li {
			width: 33%;
			padding: 0.2rem;
			.button_list_row {
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #4891cb;
				color: #fff;
				padding: 0.5rem;
				cursor: pointer;
				line-height: 2rem;
				.site_name {
					font-size: 1.2rem;
				}
			}
			.button_list_row:hover {
				background-color: #666;
				transition: 0.5s;
			}
		}
	}
}

.detail_list {
	padding: 1rem 0;
	table {
		width: 100%;
		table-layout: fixed;

		> tbody {
			> tr {
				> th {
					border: 1px #ccc solid;
					background-color: #666;
					color: #fff;
					padding: 0.5rem;
					text-align: left;
				}
				td {
					padding: 0.5rem;
					border: 1px #ccc solid;
					background-color: #fff;
					word-break: break-all;
					a {
						color: #4891cb;
					}
					.ul_button {
						display: flex;
						flex-wrap: wrap;
						> li {
							padding: 0.2rem 0.5rem;
							color: #333;
							> i {
								display: block;
							}
							> i:hover {
								cursor: pointer;
								color: #ea6560;
							}
						}
					}
				}
			}
		}
	}
}

.ul_radio {
	display: flex;
	flex-wrap: wrap;
	> li {
		padding: 0.2rem;
		> input[type='radio'] {
			display: none;
		}
		> label {
			display: inline-block;
			padding: 0.2rem 1rem;
			border: 1px #999 solid;
			border-radius: 2rem;
			line-height: 1rem;
			background-color: #ccc;
		}
		> input[type='radio']:checked + label {
			background-color: #ea6560;
			color: #fff;
		}
	}
}

.page_navi {
	ul {
		display: flex;
		padding: 0.5rem 0;
		> li {
			padding: 0.2rem;
			> span {
				display: inline-block;
				padding: 0.5rem;
				background-color: #ccc;
			}
			> span:not(.page_current):hover {
				cursor: pointer;
			}
			> .page_current {
				background-color: #4891cb;
				color: #fff;
			}
		}
	}
}

.dl_form {
	> div {
		display: flex;
		padding-bottom: 0.5rem;
		> dt {
			position: relative;
			width: 30%;
			background-color: #ecf1f4;
			padding: 0.5rem;
			.dt_button {
				position: absolute;
				width: 100%;
				bottom: 0.5rem;
				right: 1rem;
				display: flex;
				justify-content: flex-end;
				> li {
					padding-left: 1rem;
				}
				> li:hover {
					cursor: pointer;
					color: #ea6560;
				}
			}
		}
		> dd {
			flex: 1;
			background-color: #fff;
			padding: 0.5rem;
			border-bottom: 1px #ccc dotted;

			.scroll {
				overflow-y: auto;
				max-height: 10rem;
			}
		}
	}
}

.detail_area {
	display: flex;
	flex-wrap: wrap;
	> .card {
		width: 100%;
		padding: 0.5rem;
		> .card_inner {
			height: 100%;
			background-color: #efefef;
			filter: drop-shadow(1px 1px 1px #999);
			.dl_detail {
				> div {
					display: flex;
					> dt {
						width: 30%;
						background-color: #4891cb;
						color: #fff;
						border-bottom: 1px #fff solid;
						padding: 0.5rem;
					}
					> dd {
						flex: 1;
						padding: 0.5rem;
						border-bottom: 1px #fff solid;

						.scroll {
							overflow-y: auto;
							max-height: 10rem;
						}
					}
				}
			}
		}
	}
	> .two_column {
		width: 50%;
	}
}

.tab_button_area {
	padding-bottom: 0.5rem;
	> ul {
		display: flex;
		flex-wrap: wrap;
		padding: 0.5rem;
		background-color: #efefef;
		> li {
			> span {
				display: block;
				padding: 0.5rem;
				background-color: #999;
				border: 1px #fff solid;
				color: #fff;
				border-radius: 0 5px 0 0;
			}

			> span:hover {
				cursor: pointer;
			}
			.current {
				background-color: #ea6560;
			}
		}
	}
}

.flatpickr-calendar .flatpickr-innerContainer {
	/* 日曜日：赤 */
	.flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
	.flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
		color: #db6a7d;
	}
	/* 土曜日：青 */

	.flatpickr-weekdays .flatpickr-weekday:nth-child(7),
	.flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
		color: #2196f3;
	}
}

.switch_area {
	display: flex;
}
.switch_value {
	padding: 0 0.5rem;
}
.radio_switch {
	display: inline-flex;
	background-color: #ccc;
	box-shadow: 1px 1px 1px #999;
	border-radius: 2rem;
	overflow: hidden;
	font-size: 0.9rem;
	> .radio_switch_row {
		.radio_input {
			display: none;
		}
		.radio_label {
			display: block;
			padding: 0.2rem 0.5rem;
		}

		.radio_input:checked ~ .radio_label {
			border-radius: 2rem;
			transition: 0.3s;
		}
		.radio_input:checked ~ .radio_label.radio_active {
			background-color: #db6a7d;
			color: #fff;
			box-shadow: 1px 1px 1px #ccc;
		}
		.radio_input:checked ~ .radio_label.radio_deactive {
			background-color: #666;
			color: #fff;
			box-shadow: 1px 1px 1px #ccc;
		}
	}
}
.dl_sub_title {
	background-color: #666;
	color: #fff;
	padding: 0.2rem;
	border-bottom: 1px #fff solid;
	font-size: 0.9rem;
}
.dl_sub_table {
	font-size: 0.9rem;
	> div {
		display: flex;
		> dt {
			width: 30%;
			background-color: #999;
			color: #fff;
			border-bottom: 1px #fff solid;
			padding: 0.2rem;
		}
		> dd {
			flex: 1;
			padding: 0.2rem;
		}
	}
}

.dl_search_condition {
	display: flex;
	flex-wrap: wrap;
	padding: 1rem;
	background-color: #fff;
	border: 1px #999 dashed;
	font-size: 0.8rem;
	> div {
		display: flex;
		padding-right: 1rem;
		> dd {
			color: #2196f3;
		}
	}
}

/* QR */
.qrcode-stream-container {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.qrcode-stream-container :deep(video),
.qrcode-stream-container :deep(#qrcode-stream-tracking-layer) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 統合されたオーバーレイメッセージのスタイル */
.overlay-message,
.result-overlay,
.loading-overlay {
	/* ★ loading-overlay を追加 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒で覆う */
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.5em;
	z-index: 20; /* カメラの上に表示 */
	gap: 20px;
	text-align: center;
}

/* 処理中のメッセージに特有のスタイル */
.overlay-message.processing {
	/* ... */
}

/* エラーメッセージに特有のスタイル */
.overlay-message.error {
	background-color: rgba(200, 0, 0, 0.7);
}

/* 読み取り結果の表示スタイル */
.result-overlay p {
	margin: 0;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 8px;
}

/* ボタンのスタイル */
.overlay-message button,
.result-overlay button {
	padding: 10px 20px;
	font-size: 1em;
	cursor: pointer;
	border: none;
	border-radius: 5px;
	background-color: #007bff;
	color: white;
}

.overlay-message.error button {
	background-color: #dc3545;
}

/* ★ loading-overlay にのみ適用される追加のスタイル（必要であれば） */
.loading-overlay {
	background-color: rgba(0, 0, 0, 0.5); /* 処理中やエラーより少し透明度を高くしても良い */
	font-size: 1.2em; /* 文字サイズを調整 */
}