@charset "UTF-8";

/* ----------------------------------------------------
 * product
 * ---------------------------------------------------- */
.products__title {
	width: 45%;
	margin: 5% auto 5%;

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

.products__link  {
	width: 72%;
	margin: 0 auto 5%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	place-items: center;
	gap: 3vw;

	@media (max-width: 750px) {
		width: 88%;
		gap: 0.7vw;
	}
}

.products__gentei-container {
	background: rgb(255 255 255 / 35%);
	box-shadow: 0 -8px 10px 1px rgba(0, 0, 0, 0.2), 0 8px 10px 6px rgba(0, 0, 0, 0.2);
	padding: 5% 0;
	margin: 6% 0 8%;


	.products__gentei-title {
		width: 40%;
		margin: 0 auto 3%;

		@media (max-width: 750px) {
			width: 60%;
			margin: 0 auto 5%;
		}
	}

	.products__gentei-image {
		width: 88%;
		margin: 0 auto 8%;
	}

	.products__gentei-item {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
#		place-items: flex-start;
		align-items: stretch;
		justify-items: flex-start;
		width: 88%;
		margin: 0 auto 5%;
		gap: 3.5vw;
		font-size: calc(31 * 100vw / 1920);

		@media (max-width: 750px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 2vw;
			row-gap: 4vw;
			font-size: calc(19 * 100vw / 750);
		}

		.products__gentei-card {
			display: grid;
			grid-template-rows: subgrid;
			grid-row: span 3;
			gap: 2vw;
			height: 100%;

			h3 {
				text-align: center;
				margin: auto;
			}

			p {
				letter-spacing: 0.15em;
			}
		}



	}

	.products__gentei-text {
	        font-size: calc(40 * 100vw / 1920);
	        text-align: center;
	        margin-bottom: 2%;

		@media (max-width: 750px) {
			font-size: calc(23 * 100vw / 750);
		}

		span {
			font-size: calc(29 * 100vw / 1920);

			@media (max-width: 750px) {
				font-size: calc(19 * 100vw / 750);
			}
		}
	}

	.products__gentei-button {
		width: 53%;
		margin: 0 auto 6%;

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

.products__nomal-container {

	.products__nomal-title {
		width: 40%;
		margin: 0 auto 3%;

		@media (max-width: 750px) {
			width: 67%;
			margin: 0 auto 7%;
		}
	}

	.products__nomal-area {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		place-items: center;
		gap: 3vw;
		width: 87.5%;
		margin: 0 auto 15%;

		@media (max-width: 750px) {
			grid-template-columns: repeat(1, 1fr);
			width: 66%;
			gap: 4vw;
			margin: 0 auto 12%;
		}
	}

	.products__nomal-box {
		background-color: #fefefe82;
		border: 1px solid #867354;
		padding: 6% 0;
		text-align: center;
		width: 100%;

		@media (max-width: 750px) {
			border: 2px solid #867354;
		}

		.platform {
			font-size: calc(47 * 100vw / 1920);
			letter-spacing: 0.04em;
			margin-bottom: 7%;

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

		.soft-images {
			width: 45%;
			margin: 0 auto 1%;

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

		.products__nomal-button-wrap {
			.soft-pkg,
			.soft-dl {
				font-size: calc(44 * 100vw / 1920);
				letter-spacing: 0.06em;
				margin-bottom: 2%;

				@media (max-width: 750px) {
					font-size: calc(25 * 100vw / 750);
				}
			}

			.soft-dl-button,
			.soft-pkg-button {
				width: 73%;
				margin: 0 auto 8%;

				@media (max-width: 750px) {
					width: 73%;
					margin: 0 auto 5%;
				}
			}
		}

	}
}

.products__storebenefits-container {
	background: rgb(255 255 255 / 35%);
	box-shadow: 0 -8px 10px 1px rgba(0, 0, 0, 0.2), 0 8px 10px 6px rgba(0, 0, 0, 0.2);
	padding: 5% 0;
	margin: 6% 0 8%;


	.products__storebenefits-title {
		width: 45%;
		margin: 0 auto 3%;

		@media (max-width: 750px) {
			width: 68%;
			margin: 0 auto 5%;
		}
	}

	.products__storebenefits-text {
		font-size: calc(39 * 100vw / 1920);
		text-align: center;
		margin-bottom: 5%;

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

		span {
			color: red;
			font-size: calc(25 * 100vw / 1920);

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

	.products__storebenefits-card-wrap {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		place-items: center;
		gap: 2vw;
		row-gap: 6vw;
		width: 87.5%;
		margin: 0 auto 2%;

		@media (max-width: 750px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.products__storebenefits-card {
		background: #e7fdff;
		border: 2px solid #84b4d6;
		border-radius: 15px;
		padding: 10% 5%;
		display: flex;
		flex-direction: column;
		gap: 1.5vw;
		height: 100%;

		.storebenefits-store {
			font-size: calc(39 * 100vw / 1920);
			text-align: center;

			@media (max-width: 750px) {
				font-size: calc(23 * 100vw / 750);
			}
		}

		.storebenefits-image {

		}

		.storebenefits-neme {
			flex: 1;
			margin-bottom: auto;
			font-size: calc(39 * 100vw / 1920);
			text-align: center;

			@media (max-width: 750px) {
				font-size: calc(23 * 100vw / 750);
			}
		}

		.storebenefits-button {
			width: 95%;
			margin: auto;
		}
		.storebenefits-button.disabled {
			filter: grayscale(100%);
			opacity: 0.5;
			pointer-events: none;
			cursor: not-allowed;
		}
	}

	.products__storebenefits-notice {
		width: 87.5%;
		margin: 0 auto 5%;
		color: #000;
		font-size: calc(25 * 100vw / 1920);

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

}

.top__switch-container {
	width: 88%;
	margin: 0 auto 10%;

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

	.top__switch-title {
		width: 80%;
		margin: 0 auto 6%;

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

	p {
		text-align: center;
		font-size: calc(38 * 100vw / 1920);
		margin-bottom: 7%;
		letter-spacing: 0.04em;

		@media (max-width: 750px) {
			font-size: calc(26.5 * 100vw / 750);
		}
	}

	.top__switch-pl {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: calc(30 * 100vw / 1920);
		text-align: center;

		@media (max-width: 750px) {
			font-size: calc(18 * 100vw / 750);
		}

		span {
			width: 45%;
		}
	}
}