body {
	> h1 {
		margin-top: 3px;
		padding-inline: 2%;
		font-size: 1.2rem;
		line-height: 1.2;
		color: #49210e;
		text-align: center;
	}
	> h2 {
		margin-top: 4px;
		padding-inline: 2%;
		font-size: 0.9rem;
		line-height: 1.2;
		color: #333;
		font-weight: normal;
		text-align: center;
	}
}
section.slotbody {
	margin-block: 2px 5px;
	margin-inline: auto;
	max-width: 320px;
	aspect-ratio: 745/1265;
	> div {
		display: grid;
		grid-template-columns: 152fr 1191fr 147fr;
		grid-template-rows: 272fr 1246fr 1011fr;
		> div.cabinetback {
			grid-row: 1/4;
			grid-column: 1/4;
			> img {
				width: 100%;
				height: 100%;
				aspect-ratio: 745/1265;
			}
		}
		> div.stage {
			grid-row: 2/3;
			grid-column: 2/3;
			overflow: hidden;
			> img {
				width: 400%;
				aspect-ratio: 2382/623;
				transition: margin 1s;
			}
		}
		> div.number {
			grid-row: 2/3;
			grid-column: 2/3;
			display: grid;
			grid-template-columns: 7fr 10fr 1fr 10fr 1fr 10fr 7fr;
			padding-top: 10%;
			overflow: hidden;
			> div {
				> img {
					width: 100%;
				}
			}
		}
		> div.cabinet {
			grid-row: 1/4;
			grid-column: 1/4;
			transition: opacity 0.5s;
			> img {
				width: 100%;
				height: 100%;
				aspect-ratio: 745/1265;
			}
		}
		> .text {
			grid-row: 2/3;
			grid-column: 2/3;
			text-align: center;
			padding-top: 40%;
			transition: opacity 0.5s;
			> div {
				display: inline-block;
				padding: 3px 10px;
				text-align: center;
				margin-top: 5px;
				background-color: rgba(0,0,0,0.6);
				border-radius: 10px;
				transition: 0.3s;
				> div {
					font-size: 1.2rem;
					line-height: 1.2;
					color: #fff;
					font-weight: bold;
				}
				> p {
					margin-top: 2px;
					font-size: 1rem;
					line-height: 1.2;
					color: #fff;
				}
			}
		}
		> div.num {
			grid-row: 3/4;
			grid-column: 2/3;
			background-color: rgba(0,0,0,0.6);
			border-radius: 10px;
			padding-block: 10px;
			padding-inline: 10px;
			display: grid;
			grid-template-columns: repeat(4,1fr);
			grid-template-rows: repeat(3,1fr);
			column-gap: 5px;
			row-gap: 5px;
			> figure {
				> img {
					width: 100%;
				}
			}
		}
	}
}

section.usage {
	padding: 20px 5% 20px 5%;
	background-color: #111;
	> p {
		margin-top: 8px;
		padding-inline: 5%;
		font-size: 0.8rem;
		line-height: 1.4;
		color: #ddd;
		text-align: center;
	}
}

section.table {
	padding: 50px 5% 50px 5%;
	background-color: #111;
	> table {
		width: 100%;
		max-width: 650px;
		margin: 0 auto;
		border-collapse: collapse;
		> caption {
			font-size: 1rem;
			line-height: 1.2;
			color: #fff;
			background-color: rgba(255,255,255,0.4);
			text-align: center;
			padding: 5px;
		}
		> tbody {
			> tr {
				th {
					font-size: 0.8rem;
					line-height: 1.2;
					color: #fff;
					font-weight: normal;
					padding: 5px;
					background-color: rgba(255,255,255,0.2);
					text-align: left;
					white-space: nowrap;
				}
				> td {
					font-size: 0.9rem;
					line-height: 1.2;
					color: #fff;
					padding: 5px;
					border-bottom: solid 1px rgba(255,255,255,0.3);
					&:nth-of-type(1) {
						width: 4em;
						white-space: nowrap;
					}
					&:nth-of-type(2) {
						white-space: nowrap;
					}
				}
			}
		}
	}
}
section.link {
	padding: 25px 5% 40px 5%;
	background-color: #222;
	text-align: center;
	display: flex;
	flex-direction: column;
	row-gap: 12px;
	> div {
		> a {
			display: block;
			font-size: 0.9rem;
			line-height: 1.4;
			text-decoration: none;
			color: #66f;
			border: solid 1px #66f;
			padding-block: 2px
			padding-inline: 10px;
		}
	}
}
section.adsense {
	text-align: center;
	padding: 10px 1% 10px 1%;
	background-color: #000;
	> div {
		margin: 0 auto;
		max-width: 650px;
	}
}
section.note {
	padding: 60px 5% 40px 5%;
	background-color: #333;
	> div {
		max-width: 650px;
		margin: 0 auto;
		font-size: 0.8rem;
		line-height: 1.4;
		color: #fff;
		> a {
			color: #fff;
			text-decoration: underline;
			&:hover {
				opacity: 0.7;
			}
		}
	}
}