section.stage {
	height: var(--vh);	/* --vh はJavaScriptで指定 */
	width: 100vw;
	overflow: hidden;
	> div {
		height: 100dvh;
		aspect-ratio: calc(7680 * 3) / 1080;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		> article {
			user-select: none;
			display: grid;
			> img {
				grid-area: 1/1/2/2;
				width: 100%;
				pointer-events: none;
			}
			> a.signboard01,
			> a.signboard02,
			> a.signboard03,
			> a.signboard04 {
				grid-area: 1/1/2/2;
				justify-self: start;
				align-self: start;
				cursor: pointer;
				&:hover {
					opacity: 0.7;
				}
				> img {
					width: 100%;
				}
			}
			> a.signboard01 {
				width: calc(253 / 1080 * 100vh);
				margin-left: calc(1629 / 1080 * 100vh);
				margin-top: calc(171 / 1080 * 100vh);
			}
			> a.signboard02 {
				width: calc(253 / 1080 * 100vh);
				margin-left: calc(3547 / 1080 * 100vh);
				margin-top: calc(171 / 1080 * 100vh);
			}
			> a.signboard03 {
				width: calc(253 / 1080 * 100vh);
				margin-left: calc(5467 / 1080 * 100vh);
				margin-top: calc(171 / 1080 * 100vh);
			}
			> a.signboard04 {
				width: calc(253 / 1080 * 100vh);
				margin-left: calc(7396 / 1080 * 100vh);
				margin-top: calc(171 / 1080 * 100vh);
			}
			> a.link01,
			> a.link02,
			> a.link03,
			> a.link04,
			> a.link05,
			> a.link06,
			> a.link07,
			> a.link08,
			> a.link09,
			> a.link10,
			> a.link11,
			> a.link12,
			> a.link13,
			> a.link14,
			> a.link15,
			> a.link16 {
				grid-area: 1/1/2/2;
				justify-self: start;
				align-self: start;
				cursor: pointer;
				transition: 0.3s;
				&:hover {
					opacity: 0.7;
					transform: scale(1.15);
				}
				> img {
					width: 100%;
				}
			}
			> a.link01 {
				width: calc(199 / 1080 * 100vh);
				margin-left: calc(83 / 1080 * 100vh);
				margin-top: calc(290 / 1080 * 100vh);
			}
			> a.link02 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(499 / 1080 * 100vh);
				margin-top: calc(545 / 1080 * 100vh);
			}
			> a.link03 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(904 / 1080 * 100vh);
				margin-top: calc(449 / 1080 * 100vh);
			}
			> a.link04 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(1357 / 1080 * 100vh);
				margin-top: calc(399 / 1080 * 100vh);
			}
			> a.link05 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(2007 / 1080 * 100vh);
				margin-top: calc(233 / 1080 * 100vh);
			}
			> a.link06 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(2470 / 1080 * 100vh);
				margin-top: calc(505 / 1080 * 100vh);
			}
			> a.link07 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(2908 / 1080 * 100vh);
				margin-top: calc(405 / 1080 * 100vh);
			}
			> a.link08 {
				width: calc(199 / 1080 * 100vh);
				margin-left: calc(3452 / 1080 * 100vh);
				margin-top: calc(512 / 1080 * 100vh);
			}
			> a.link09 {
				width: calc(200 / 1080 * 100vh);
				margin-left: calc(3949 / 1080 * 100vh);
				margin-top: calc(290 / 1080 * 100vh);
			}
			> a.link10 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(4559 / 1080 * 100vh);
				margin-top: calc(556 / 1080 * 100vh);
			}
			> a.link11 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(4992 / 1080 * 100vh);
				margin-top: calc(493 / 1080 * 100vh);
			}
			> a.link12 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(5425 / 1080 * 100vh);
				margin-top: calc(393 / 1080 * 100vh);
			}
			> a.link13 {
				width: calc(200 / 1080 * 100vh);
				margin-left: calc(5892 / 1080 * 100vh);
				margin-top: calc(303 / 1080 * 100vh);
			}
			> a.link14 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(6255 / 1080 * 100vh);
				margin-top: calc(519 / 1080 * 100vh);
			}
			> a.link15 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(6784 / 1080 * 100vh);
				margin-top: calc(341 / 1080 * 100vh);
			}
			> a.link16 {
				width: calc(201 / 1080 * 100vh);
				margin-left: calc(7252 / 1080 * 100vh);
				margin-top: calc(388 / 1080 * 100vh);
			}
		}
	}
	> article.page {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2;
		> div.pages {
			display: flex;
			> div.page {
				width: calc(120 / 1080 * 100vh);
				@media (width < 450px) {
					width: calc(100 / 1080 * 100vh);
				}
				> a {
					cursor: pointer;
					&:hover {
						opacity: 0.7;
					}
					> img {
						width: 100%;
					}
				}
				> div {
					display: grid;
					> img {
						grid-area: 1/1/2/2;
						width: 100%;
					}
					> div {
						grid-area: 1/1/2/2;
						width: 100%;
						height: 100%;
						aspect-ratio: 120/50;
						> img {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}
					}
				}
			}
		}
		> div.checkout {
			background-color: #8a939d;
			> a {
				display: block;
				padding-block: 3px 5px;
				text-align: center;
				font-size: 0.8rem;
				line-height: 1.3;
				color: #fff;
				cursor: pointer;
				@media (width < 450px) {
					font-size: 0.7rem;
				}
				&:hover {
					opacity: 0.7;
				}
			}
		}
	}
	> article.help {
		position: fixed;
		right: 0;
		top: 0;
		z-index: 2;
		> div {
			width: calc(80 / 1080 * 100vh);
			cursor: pointer;
			@media (width < 450px) {
				width: calc(70 / 1080 * 100vh);
			}
			&:hover {
				opacity: 0.7;
			}
			> img {
				width: 100%;
			}
		}
	}
}
dialog#dialogWelcome {
	user-select: none;
	border: solid 2px #00428c;
	&::backdrop {
		background: rgba(255,255,255,0.8);
	}
	> div {
		> div {
			> img {
				cursor: pointer;
				max-width: 100%;
			}
		}
	}
}
dialog#dialogItem {
	user-select: none;
	border: solid 2px #00428c;
	&::backdrop {
		background: rgba(255,255,255,0);
	}
	> div {
		max-width: 500px;
		> figure {
			> img {
				max-width: 100%;
			}
		}
		> p.subject {
			margin-top: 3px;
			font-size: 1.1rem;
			line-height: 1.3;
			color: #000;
			font-weight: 600;
			font-family: var(--font-serif);
		}
		> p.text {
			margin-top: 3px;
			font-size: 1rem;
			line-height: 1.6;
			color: #222;
			font-family: var(--font-serif);
		}
		> div {
			margin-top: 10px;
			display: flex;
			justify-content: center;
			column-gap: 10px;
			> div {
				font-size: 0.9rem;
				line-height: 1;
				padding-block: 15px;
				padding-inline: 20px;
				color: #fff;
				cursor: pointer;
				&:nth-of-type(1) {
					background-color: #aaa;
				}
				&:nth-of-type(2) {
					background-color: #0c4487;
				}
			}
		}
	}
}

dialog#dialogForm {
	user-select: none;
	border: solid 2px #00428c;
	&::backdrop {
		background: rgba(255,255,255,0);
	}
	> div {
		max-width: 900px;
		margin-inline: auto;
		> form {}
		> #submitResult {
			background-color: var(--color-accent);
			font-size: 1rem;
			line-height: 1.6;
			color: #fff;
			padding: 10px 20px;
			border-radius: 3px;
			&:empty {
				display: none;
			}
		}
	}
}