@charset "UTF-8";

/* ----------------------------------------------------
 * games
 * ---------------------------------------------------- */
.games__title {
	width: 60%;
	margin: 5% auto 2%;

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

.games__title-text {
	font-size: calc(36 * 100vw / 1920);
	letter-spacing: 0.06em;
	text-align: center;
	margin-bottom: 3%;

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

.games__introduction-container {
	width: 75%;
	margin: 5% auto 0;

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

	.games__introduction-title {
		margin-bottom: 7%;

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

	p {
		font-size: calc(39 * 100vw / 1920);
		text-align: center;
		color: var(--text-color2);

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

.games__info-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%;


	.games__info-title {
		width: 60%;
		margin: 0 auto 2%;

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

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

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

	.games__info-images {
		width: 90%;
		margin: 0 auto 5%;
		display: flex;
		align-items: center;
		gap: 1vw;

		@media (max-width: 750px) {
			flex-direction: column;
			width: 70%;
			gap: 3vw;
		}
	}
}

.games__pv-container {
	margin-bottom: 10%;

	@media (max-width: 750px) {
		margin-bottom: 17%;
	}

	.games__pv-title {
		width: 60%;
		margin: 0 auto 2%;

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

	.games__pv-movie {
		width: 87%;
		margin: 0 auto 10%;

		.games__pv-image {
			position: relative;

			.movie-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 15%;
			}
		}
	}


	.games__pv-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		place-items: center;
		width: 88%;
		margin: 0 auto 10%;
		gap: 2vw;

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

	.games__pv-info {
		display: flex;
		flex-direction: column;
		gap: 4vw;

		@media (max-width: 750px) {
			gap: 10vw;
		}
	}

	.games__pv-info-box {
		display: flex;
		width: 87%;
		margin: auto;
		gap: 2.5vw;

		@media (max-width: 750px) {
			width: 82%;
			flex-direction: column;
		}
	}

	.games__pv-info-image {
		width: 36.5%;

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

	.games__pv-info-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 1vw;

		.title {
			color: var(--text-color2);
			font-size: calc(40 * 100vw / 1920);

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

		.explanation {
			font-size: calc(35 * 100vw / 1920);

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