@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

body {
	background: rgba(var(--theme-floor));
}

body.rotate90 {
	transform: rotate(90deg) !important;
}

body.rotate180 {
	transform: rotate(180deg) !important;
	transform-origin: center center !important;
}

body.rotate270 {
	transform: rotate(270deg) !important;
	transform-origin: center center !important;
}

.floorPlan {
	display: grid;
	grid-gap: 0.5em;
	font-size: clamp(10px, 2vw, 16px);
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt";
	line-height: 1em;
	user-select: none;
	overflow: auto;
}

.floorPlan #floor {
	grid-column: 2;
	grid-row: 2;
	padding: 0.5em;
}

.floorPlan .top {
	grid-column: 2;
	grid-row: 1;
}

.floorPlan .top:not(:empty) {
	height: 1.5em;
}

.floorPlan .right {
	grid-column: 3;
	grid-row: 2;
}

.floorPlan .right:not(:empty) {
	width: 1.5em;
}

.floorPlan .left {
	grid-column: 1;
	grid-row: 2;
	justify-self: end;
}

.floorPlan .left:not(:empty) {
	width: 1.5em;
}

.floorPlan .bottom {
	grid-column: 2;
	grid-row: 3;
}

.floorPlan .bottom:not(:empty) {
	height: 1.5em;
}

.floorPlan>div {
	display: grid;
	grid-gap: 1em;
}

.floorPlan>div:not(#floor) {
	place-items: center;
}

.floorPlan div.aisle {
	text-align: center;
}

.wallBoard {
	background: rgb(var(--theme-board-bg));
	border: 1px solid rgb(var(--theme-board-bd));
	color: rgb(var(--theme-board));
}

.wallMirror {
	background: rgb(var(--theme-mirror-bg));
	border: 1px solid rgb(var(--theme-mirror-bd));
	color: rgb(var(--theme-mirror));
}

.wallScreen {
	background: rgba(var(--theme-screen-bg));
	background-size: 200% 200%;
	border: 1px solid rgb(var(--theme-screen-bd));
	color: rgba(var(--theme-screen));
}

.wallWindow {
	background: rgba(var(--window-bg));
	background-size: 200% 200%;
	border: 1px solid rgb(var(--theme-window-bd));
	color: rgb(var(--window-fg));
}

.bar {
	display: grid;
	place-items: center;
	background: rgb(var(--theme-row-bar-bg));
	border: 1px solid rgb(var(--theme-row-bar-bd));
	color: rgb(var(--theme-row-bar));
}




.seats {
	display: flex;
	justify-content: center;
	grid-gap: 1em;
	list-style: none;
}

.seats li {
	display: contents;
}

.seats input {
	display: none;
}

.seats label {
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	align-items: center;
	min-width: 3em;
	min-height: 3em;
	padding: 0.5em;
	border: 1px solid currentColor;
	border-radius: var(--theme-corner);
	text-align: center;
}

.seats label:before {
	content: none;
}

.seats input:checked+label {
	background: rgb(var(--theme-color-rgb));
	border: 1px solid transparent;
	color: rgb(var(--theme-font-color-rgb));
	font-weight: 800;
}

.space {}

.space:not(.empty) {
	pointer-events: none;
}

/*	予約済み	*/
.seats .seat.reserved label,
.seats .seat.seatRes label {
	background-color: rgb(var(--theme-ins-bg));
	color: rgb(var(--theme-ins));
}


.seats .seat.reserved.mySeat label {
	background: var(--theme-color);
	border-color: var(--theme-color);
	color: var(--theme-font-color);
	text-decoration: underline;
}

.ins label {
	background: rgb(var(--theme-ins-bg));
	border-color: rgb(var(--theme-ins-bd));
	color: rgb(var(--theme-ins));
}

.reserved label {
	background: rgb(var(--theme-res-bg));
	border-color: rgb(var(--theme-res-bd));
	color: rgb(var(--theme-res));
}

.pillar label {
	background: rgba(var(--theme-pillar-bg));
	border-color: rgb(var(--theme-pilla-bd));
	color: rgba(var(--theme-pillar));
}

.mine label {
	background: rgba(var(--theme-res-mine-bg));
	border-color: rgb(var(--theme-res-mine-bd));
	color: rgba(var(--theme-res-mine-pillar));
	opacity: 1;
}

.colVoid label {
	visibility: hidden;
}