@charset "UTF-8";

/* ----------------------------------------------------
 * PRODUCT
 * ---------------------------------------------------- */
.noise-bg {
	background-image: url(/assets/img/bg_noise_kotei.png); /* fallback */
	background-image: -webkit-image-set(
		url(/assets/img/bg_noise_kotei.webp) type("image/webp"),
		url(/assets/img/bg_noise_kotei.png) type("image/png")
	);
	background-image: image-set(
		url(/assets/img/bg_noise_kotei.webp) type("image/webp"),
		url(/assets/img/bg_noise_kotei.png) type("image/png")
	);

	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
	padding-top: 6%;

	@media (max-width: 750px) {
		padding-top: 20%;
		background-image: url(/assets/img/bg_noise_sp_kotei.png); /* fallback */
		background-image: -webkit-image-set(
			url(/assets/img/bg_noise_sp_kotei.webp) type("image/webp"),
			url(/assets/img/bg_noise_sp_kotei.png) type("image/png")
		);
		background-image: image-set(
			url(/assets/img/bg_noise_sp_kotei.webp) type("image/webp"),
			url(/assets/img/bg_noise_sp_kotei.png) type("image/png")
		);
	}


}

.product__container {
	margin: 9% auto 2%;

	@media (max-width: 750px) {
		margin: 10% auto 3%;
	}

}

.product__nintendo-store {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1vw;
	font-family: "Noto Serif JP", "源ノ明朝", serif;
	color: #42210b;
	font-size: min(calc(23 * 100vw / 1920), 23px);
	font-weight: 600;
	margin-bottom: 5%;

	@media (max-width: 750px) {
		font-size: calc(26 * 100vw / 750);
		margin-bottom: 8%;
	}

	.nintendo-store-image {
		width: 50%;
		margin: auto;

		@media (max-width: 750px) {
			width: 30%;
		}
	}
}

.product__store-container {
	font-family: "Noto Serif JP", "源ノ明朝", serif;
	letter-spacing: 0.18em;
	color: #42210b;
	line-height: 2;

	.product__title {
		width: 90%;
		margin: 0 auto 2%;
		text-align: center;
		font-weight: 900;
		font-size: min(calc(22 * 100vw / 1920), 22px);

		@media (max-width: 750px) {
			margin: 0 auto 3%;
			font-size: calc(22 * 100vw / 750);
		}
	}

	.product__notice {
		width: 85%;
		text-align: center;
		font-size: min(calc(20 * 100vw / 1920), 20px);
		font-weight: 700;
		margin: 0 auto 2%;

		@media (max-width: 750px) {
			width: 75%;
			margin: 0 auto 5%;
			font-size: calc(23 * 100vw / 750);
		}
	}


	.product__item {
		width: 65%;
		max-width: 1200px;
		margin: 0 auto 8%;

		display: grid;
		grid-template-columns: repeat(4, 1fr);
		align-items: stretch;
		justify-items: flex-start;
		gap: 2vw;

		@media (max-width: 750px) {
			width: 88%;
			margin: 0 auto 15%;
			grid-template-columns: repeat(2, 1fr);
			gap: 3.5vw;
		}
	}

	.product__cell {
		width: 100%;
	}


}