section.stage {
	background-color: #101213;
	> div {
		overflow: hidden;
		max-width: 1920px;
		margin-inline: auto;
		aspect-ratio: 1920/700;
		@media (width < 700px) {
			aspect-ratio: 1/1;
		}
		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/700;
			@media (width < 700px) {
				aspect-ratio: 1/1;
			}
			> img {
				max-width: 100%;
			}
		}
		> div {
			z-index: 1;
			grid-row: 1/2;
			grid-column: 1/2;
			width: 100%;
			overflow: hidden;
			justify-self: center;
			align-self: center;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: repeat(20, 1fr);
			aspect-ratio: 1920/700;
			@media (width < 700px) {
				aspect-ratio: 1/1;
			}
			> div {
				> svg {
					width: 100%;
					height: 3px;
					mix-blend-mode: multiply;
				}
			}
		}
		> figure {
			z-index: 2;
			grid-row: 1/2;
			grid-column: 1/2;
			width: 100%;
			aspect-ratio: 1920/700;
			@media (width < 700px) {
				aspect-ratio: 1/1;
			}
			display: grid;
			> div {
				margin: 10px 10px 10px 7vw;
				align-self: center;
				@media (width >= 850px) and (width < 1220px) {
					max-width: 500px;
					margin-top: 50px;
				}
				@media (width >= 700px) and (width < 850px) {
					max-width: 400px;
					margin-top: 50px;
				}
				@media (width < 700px) {
					text-align: center;
					margin: 50px 20px 20px 20px;
				}
				> img {
					border-radius: 10px;
					max-width: 100%;
				}
			}
		}
	}
}
section.feature {
	padding: 40px 5% 50px 5%;
	> div {
		max-width: 1200px;
		margin-inline: auto;
		> h1 {
			font-size: 2rem;
			line-height: 1.2;
			color: #000;
			text-align: center;
		}
		> p {
			margin-top: 20px;
			font-size: 1.3rem;
			line-height: 1.5;
			color: #222;
			text-align: center;
		}
	}
}
section.index {
	padding-block: 80px 80px;
	padding-inline: 5%;
	background-image: url(./image/leather_gray.png);
	&.green {
		background-color: rgba(0, 255, 0, 0.1);
		background-blend-mode: overlay;
		> div {
			> h2 {
				background-color: #0c2;
			}
		}
	}
	&.red {
		background-color: rgba(255,0, 0, 0.1);
		background-blend-mode: overlay;
		> div {
			> h2 {
				background-color: #c20;
			}
		}
	}
	&.blue {
		background-color: rgba(68,0,255, 0.1);
		background-blend-mode: overlay;
		> div {
			> h2 {
				background-color: #40f;
			}
		}
	}
	> div {
		max-width: 1300px;
		margin: 0 auto;
		> h2 {
			background-color: #0c2;
			padding-block: 20px;
			padding-inline: 10px;
			text-align: center;
			border-radius: 100px;
			font-size: 2.0rem;
			line-height: 1.3;
			color: #fff;
		}
		> p {
			margin-top: 20px;
			padding-block: 20px;
			padding-inline: 30px;
			border-radius: 5px;
			background-color: rgba(255,255,255,0.6);
			font-size: 1.2rem;
			line-height: 1.8;
			color: #40f;
			font-weight: 500;
		}
		> div {
			margin-top: 50px;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			column-gap: 10px;
			row-gap: 50px;
			@media (width < 900px) {
				grid-template-columns: repeat(2,1fr);
			}
			@media (width < 600px) {
				grid-template-columns: repeat(1,1fr);
			}
			> article.text {
				background-color: rgba(255,255,255,1);
				border-radius: 20px;
				transition: background-color 0.5s;
				&:has(> a:hover) {
					background-color: rgba(255,255,255,0.2);
					> a {
						> figure {
							> img {
								transform: scale(1.05);
							}
						}
					}
				}
				> a {
					display: block;
					padding: 20px;
					text-decoration: none;
					&[href] {
						> h3 {
							background-image: url(./common/image/mark_chevron_right_888.svg);
							background-repeat: no-repeat;
							background-position: right 50%;
							padding-right: 20px;
						}
						&[target="_blank"] {
							> h3 {
								background-image: url(./common/image/mark_external_888.svg);
							}
						}
					}
					> figure {
						overflow: hidden;
						> img {
							transition: transform 0.5s;
							border-radius: 5px;
							max-width: 100%;
						}
					}
					> h3 {
						margin-top: 10px;
						display: flex;
						column-gap: 5px;
						> div.b75,
						> div.b90 {
							font-size: 0.9rem;
							color: #fff;
							border-radius: 100px;
							width: 28px;
							height: 28px;
							max-width: 28px;
							max-height: 28px;
							min-width: 28px;
							min-height: 28px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
						> div.b75 {
							background-color: #d00;
							&::after {
								content: "75";
							}
						}
						> div.b90 {
							background-color: #00d;
							&::after {
								content: "90";
							}
						}
						> div.text {
							font-size: 1rem;
							line-height: 1.5;
							color: #000;
							font-weight: 600;
						}
					}
					> p {
						margin-top: 5px;
						font-size: 0.9rem;
						line-height: 1.5;
						color: #333;
					}
				}
				> div {
					background-color: rgba(255,255,255,1);
					display: block;
					padding: 20px;
					text-decoration: none;
					transition: background-color 0.5s;
					border-radius: 20px;
					> figure {
						overflow: hidden;
						> img {
							transition: transform 0.5s;
							border-radius: 5px;
							max-width: 100%;
						}
					}
					> h3 {
						margin-top: 10px;
						display: inline-block;
						font-size: 1rem;
						line-height: 1.5;
						color: #000;
						font-weight: 700;
					}
					> p {
						margin-top: 5px;
						font-size: 0.9rem;
						line-height: 1.5;
						color: #333;
					}
					> a {
						margin-top: 5px;
						font-size: 0.9rem;
						line-height: 1.5;
						color: #333;
						background-image: url(./common/image/mark_external_888.svg);
						background-repeat: no-repeat;
						background-position: right 50%;
						padding-right: 20px;
						&:hover {
							opacity: 0.7;
						}
					}
				}
			}
			> article.video {
				background-color: rgba(255,255,255,1);
				padding: 20px;
				border-radius: 20px;
				> iframe {
					width: 100%;
					aspect-ratio: 16/9;
				}
				> div.store {
					margin-top: 5px;
					display: grid;
					grid-template-columns: 1fr 1fr;
					column-gap: 6px;
					> a {
						display: block;
						text-decoration: none;
						&:hover {
							opacity: 0.7;
						}
						> img {
							max-width: 100%;
						}
					}
				}
				> h3 {
					margin-top: 10px;
					display: flex;
					column-gap: 5px;
					> div.b75,
					> div.b90 {
						font-size: 0.9rem;
						color: #fff;
						border-radius: 100px;
						width: 28px;
						height: 28px;
						max-width: 28px;
						max-height: 28px;
						min-width: 28px;
						min-height: 28px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					> div.b75 {
						background-color: #d00;
						&::after {
							content: "75";
						}
					}
					> div.b90 {
						background-color: #00d;
						&::after {
							content: "90";
						}
					}
					> div.text {
						font-size: 1rem;
						line-height: 1.5;
						color: #000;
						font-weight: 600;
					}
				}
				> p {
					margin-top: 5px;
					font-size: 0.9rem;
					line-height: 1.5;
					color: #333;
				}
			}
		}
	}
}