:root {
	--font-sans: 'Noto Sans JP',sans-serif;
}
/*
html body
*/
html {
	overflow: hidden;
	background-color: #fff;
	> body {
		margin: 0;
		font-family: var(--font-sans);
		font-feature-settings: "palt" 1;
		line-break: strict;
		overflow-x: hidden;
		min-height: 100vh;
		background-color: #fff;
		scroll-behavior: smooth;
		text-rendering: optimizeSpeed;
	}
}
/*
selection
*/
::selection {
	color: #fff;
	background-color: #334;
}
/*
<wbr><span>...</span> は改行させない
*/
wbr {
	&:after {
		content: "\00200B";		/*ゼロ幅スペース*/
	}
	+ span {
		white-space: nowrap;
	}
}
/*
browsercaution jscaution preview
*/
input#browsercaution[type="checkbox"] {
	display: none;
}
label[for="browsercaution"],#jscaution,#preview {
	position: fixed;
	text-align: center;
	font-size: 1.3rem;
	padding: 20px;
	color: #fff;
	width: 100%;
	box-sizing: border-box;
	opacity: 0.7;
	transition: all 0.5s;
	max-height: 100px;
	overflow: hidden;
	@media print {
		display: none;
	}
	&:hover {
		opacity: 1;
	}
}
label[for="browsercaution"] {
	bottom: 0;
	z-index: 500;
	background-color: #f00;
	cursor: pointer;
}
#jscaution {
	bottom: 0;
	z-index: 502;
	background-color: #ff0;
	color: #111;
}
#preview {
	top: 0;
	z-index: 499;
	background-color: #f00;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 150%;
	opacity: 0.7;
}
input#browsercaution[type="checkbox"]:checked + label[for="browsercaution"] {
	padding: 0;
	max-height: 0;
}
/*
section.celestial
*/
section.celestial {
	user-select: none;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	> .celestialStage {
		position: relative;
		> #celestialStage {
			width: 100vw;
			height: 100vh;
		}
	}
}
/*
section.minimap
*/
section.minimap {
	user-select: none;
	position: fixed;
	left: 0;
	top: 0;
	> input[type="checkbox"] {
		display: none;
		&:checked + div {
			> .minimapouter  {
				width: calc(260px * 2);
				height: calc(150px * 2);
				> .minimap {
					transform: translate(130px,75px) scale(2);
				}
			}
			> .control {
				> .mapexpand {
					> label {
						> span:nth-of-type(1) {
							display: none;
						}
						> span:nth-of-type(2) {
							display: block;
						}
					}
				}
			}
		}
	}
	> div {
		padding-right: 3px;
		transition: 0.5s;
		background-color: rgba(255,255,255,0);
		&:hover {
			background-color: rgba(255,255,255,1);
		}
		> .minimapouter {
			width: 260px;
			height: 150px;
			transition: 0.5s;
			> .minimap {
				width: 260px;
				height: 150px;
				transition: 0.5s;
				position: relative;
				> img:nth-of-type(1) {
					display: block;
					width: 260px;
					height: 150px;
					user-drag: none;
				}
				> a[data-minimap] {
					position: absolute;
					text-decoration: none;
					cursor: pointer;
					width: 20px;
					height: 20px;
					> img:nth-of-type(1) {
						display: block;
						user-drag: none;
						width: 100%;
						height: 100%;
						opacity: 0.3;
						&:hover {
							opacity: 1;
						}
					}
					> img:nth-of-type(2) {
						display: none;
						user-drag: none;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		> .control {
			padding: 0 5px 5px 5px;
			> .mapexpand {
				display: flex;
				column-gap: 5px;
				> #stageSubject {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					font-size: 0.8rem;
					line-height: 1;
					color: #fff;
					font-weight: 700;
					background-color: rgba(0,0,0,0.2);
					padding: 3px 0;
				}
				> label {
					display: block;
					white-space: nowrap;
					padding: 1px 20px 5px 20px;
					border: solid 1px #666;
					border-radius: 4px;
					cursor: pointer;
					transition: 0.2s;
					text-align: center;
					@media (max-width:529px) {
						display: none;
					}
					&:hover {
						background-color: rgba(0,0,0,0.7);
						> span {
							color: #fff;
						}
					}
					> span {
						font-size: 0.8rem;
						line-hegight: 1;
						color: #000;
						&:nth-of-type(2) {
							display: none;
						}
					}
				}
			}
			> .zoom {
				margin-top: 5px;
				display: flex;
				align-items: center;
				column-gap: 5px;
				> label {
					font-size: 0.8rem;
					line-height: 1;
					color: #111;
				}
				> input {
					width: 150px;
				}
			}
		}
	}
}
/*
section.logo
*/
section.logo {
	position: fixed;
	right: 0;
	top: 0;
	@media (max-width:569px) {
		padding: 5px 5px 0 0;
	}
	@media (max-width:369px) {
		display: none;
	}
	> img {
		user-select: none;
		user-drag: none;
		@media (max-width:569px) {
			max-width: 150px;
		}
		@media (max-width:419px) {
			max-width: 100px;
		}
	}
}