section.stage {
	background-color: #777;
	> div {
		overflow: hidden;
		max-width: 1920px;
		margin-inline: auto;
		aspect-ratio: 1920/500;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		> picture {
			z-index: 0;
			grid-row: 1/2;
			grid-column: 1/2;
			aspect-ratio: 1920/500;
			> img {
				max-width: 100%;
			}
		}
		> div {
			grid-row: 1/2;
			grid-column: 1/2;
			justify-self: center;
			align-self: center;
			aspect-ratio: 1920/500;
			max-height: 500px;
			display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(3, calc(100vw * 500 / 1920 / 3));
			> div {
				> svg {
					width: min(100vw,1920px);
					height: calc(min(100vw,1920px) * 500 / 1920 / 2);
					opacity: 0.3;
				}
			}
		}
		> h1 {
			z-index: 1;
			grid-column: 1/2;
			grid-row: 1/2;
			justify-self: center;
			align-self: center;
			font-size: 2rem;
			line-height: 1.2;
			color: #fff;
			@media (width < 700px) {
				margin-top: 60px;
				font-size: 1.5rem;
			}
		}
	}
}
section.setting {
	padding: 60px 3% 0 3%;
	background-color: #f0f2f5;
	> div {
		margin-inline: auto;
		max-width: 960px;
		> p {
			font-size: 1rem;
			line-height: 1.4;
			color: var(--color-accent-text);
			text-align: center;
		}
		> div {
			margin-top: 10px;
			padding: 20px 50px;
			background-color: #fff;
			@media (width < 720px) {
				padding: 20px 10px;
			}
			> table {
				border-collapse: collapse;
				width: 100%;
				border: solid 2px var(--color-accent-text);
				> tbody {
					> tr {
						> th {
							font-size: min(0.9rem,4.5vw);
							line-height: 1.3;
							color: #111;
							font-weight: normal;
							text-align: left;
							padding: 12px 10px;
							border: solid 1px var(--color-accent-text);
							background-color: #f8fff9;
							&[colspan] {
								padding: 6px 10px;
								color: #fff;
								font-weight: 700;
								background-color: var(--color-accent-text);
							}
						}
						> td {
							font-size: min(1rem,4.5vw);
							line-height: 1.3;
							color: #222;
							text-align: left;
							padding: 12px 10px;
							border: solid 1px var(--color-accent-text);
						}
					}
				}
			}
			> dl {
				margin: 10px 0 0 0;
				> dd {
					margin: 0;
					> p {
						margin: 3px 0;
						&.red {
							font-size: 0.9rem;
							line-height: 1.4;
							color: #cc2633;
						}
					}
				}
			}
		}
	}
}

section.mailer {
	padding: 40px 3% 60px 3%;
	background-color: #f0f2f5;
	> div {
		margin-inline: auto;
		max-width: 960px;
		> p {
			font-size: 1rem;
			line-height: 1.3;
			color: var(--color-accent-text);
			text-align: center;
		}
		> div {
			margin-top: 10px;
			padding: 30px 50px;
			background-color: #fff;
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 20px;
			row-gap: 20px;
			@media (width < 1100px) {
				grid-template-columns: 1fr;
			}
			@media (width < 720px) {
				padding: 20px 10px;
			}
			> a {
				display: inline-block;
				font-size: min(1rem,5vw);
				line-height: 1.3;
				color: #fff;
				font-weight: 700;
				text-decoration: none;
				border: solid 3px #006f67;
				background-color: #006f67;
				background-position: 95% 50%;
				background-repeat: no-repeat;
				background-size: contain;
				@media (width < 430px) {
					background-size: auto 50%;
				}
				&.thunderbird {
					background-image: url(./image/thunderbird.png);
				}
				&.outlook2024 {
					background-image: url(./image/outlook2024.svg);
				}
				&.outlook {
					background-image: url(./image/outlook.png);
				}
				&.macmail {
					background-image: url(./image/macmail2.webp);
				}
				&.msmail {
					background-image: url(./image/msmail.svg);
				}
				&.android {
					background-image: url(./image/android.svg);
				}
				&.iosmail {
					background-image: url(./image/iosmail.webp);
				}
				&.livemail {
					background-image: url(./image/livemail.png);
				}
				&:hover {
					opacity: 0.8;
				}
				> div {
					padding: 30px 15px 30px 15px;
					> br {
						display: none;
					}
					> small {
						margin-left: 10px;
					}
				}
			}
		}
	}
}

section.caution {
	padding: 60px 3%;
	> div {
		margin-inline: auto;
		max-width: 960px;
		> p {
			background-color: #fff4f4;
			margin: 10px 0;
			font-size: 1rem;
			line-height: 1.6;
			color: #cc2633;
			padding: 10px 15px;
			border: solid 1px #cc2633;
		}
	}
}

section.mailport {
	padding: 60px 3% 60px 3%;
	background-color: #f0f2f5;
	> div {
		margin-inline: auto;
		max-width: 960px;
		> h2 {
			font-size: 1.2rem;
			line-height: 1;
			color: #000;
			font-weight: 700;
		}
		> table {
			margin-top: 10px;
			width: 100%;
			border-collapse: collapse;
			> thead {
				> tr {
					> th {
						font-size: min(1rem,4vw);
						line-height: 1;
						color: #111;
						background-color: #ddd;
						border: solid 1px #aaa;
						padding: 10px;
						font-weight: 500;
						&[colspan] {
							background-color: #555;
							color: #fff;
							text-align: left;
							font-weight: 700;
						}
					}
				}
			}
			> tbody {
				> tr {
					> td {
						font-size: min(1rem,4vw);
						line-height: 1.2;
						color: #111;
						border: solid 1px #aaa;
						padding: 10px;
						background-color: #fff;
						&:nth-of-type(1) {
							white-space: nowrap;
							text-align: center;
						}
						&:nth-of-type(2) {
						}
						&:nth-of-type(3) {
							text-align: center;
						}
						&:nth-of-type(4) {
							text-align: center;
						}
						&:nth-of-type(5) {
							font-size: 0.9rem;
							max-width: 300px;
						}
					}
				}
			}
		}
	}
}

section.state {
	padding: 30px 3% 100px 3%;
	background-color: #f0f2f5;
	> div {
		margin-inline: auto;
		max-width: 960px;
		> div {
			margin-top: 5px;
			padding: 20px 20px;
			background-color: #fff;
			@media (width < 720px) {
				padding: 20px 10px;
			}
			> table {
				border-collapse: collapse;
				width: 100%;
				border: solid 2px #555;
				> tbody {
					> tr {
						> th {
							font-size: 1rem;
							line-height: 1.3;
							color: #222;
							font-weight: normal;
							text-align: left;
							padding: 12px 10px;
							border: solid 1px #555;
							background-color: #f6f6f6;
							&[colspan] {
								padding: 6px 10px;
								color: #fff;
								font-weight: 700;
								background-color: #515162;
							}
						}
						> td {
							font-size: min(1.5rem,4.5vw);
							line-height: 1.3;
							color: #111;
							font-weight: normal;
							text-align: left;
							padding: 12px 10px;
							border: solid 1px #555;
						}
					}
				}
			}
		}
	}
}