@charset "UTF-8";

/* ----------------------------------------------------
 * Key Visual
 * ---------------------------------------------------- */
.kv__container {
    position: relative;
}

.kv__container-switch {
	width: 10%;
	position: absolute;
	top: 0;
	left: 0;

	@media (max-width: 750px) {
		width: 32%;
	}
}
.kv__container-release {
	width: 23%;
	position: absolute;
	top: 18%;
	left: 0;
	transform: translateY(-50%);

	@media (max-width: 750px) {
		width: 58%;
		top: 16%;
	}
}
.kv__container-title {
	width: 33%;
	position: absolute;
	top: 44%;
	left: 64%;
	transform: translate(-50%, -50%);

	@media (max-width: 750px) {
		width: 59%;
		top: 77%;
		left: 50%;
	}
}


/* ----------------------------------------------------
 * おしらせ
 * ---------------------------------------------------- */
.section-noise {
	margin-top: -7%;
	position: relative;

	@media (max-width: 750px) {
		margin-top: -10%;
	}
}
.noise__container {
	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: 5% 0 15%;

	@media (max-width: 750px) {
		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")
		);
		padding: 0 0 20%;
		margin-top: -10%;
	}
}

.noise__container-inner {
	width: 100%;
#	max-width: 1200px;
	margin: auto;
}

.noise__movie-image {
	width: 60%;
	max-width: 1000px;
	margin: auto;
	position: relative;
	margin-bottom: 6%;
	box-shadow: 10px 10px 15px -10px;
	cursor: pointer;

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

	.mark {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
		transition: transform 0.3s ease;
		width: 21%;
	}
	
}
.noise__movie-image:hover .mark {
	transform: translate(-50%, -50%) scale(0.9);

	@media (max-width: 750px) {
		transform: translate(-50%, -50%) scale(1);
	}
}


.noise__news {
	width: 53%;
	margin: 0 auto 10%;

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

	.noise__news-title {
		text-align: center;
		margin-bottom: 4%;
		color: #42210b;
		font-weight: 700;
		font-size: min(calc(70 * 100vw / 1920),70px);
		font-family: "Noto Serif JP", "源ノ明朝", serif;

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

	.noise__news-wrap {
		border: 1px solid #c69c6d;
		background: #f3efe6;
		border-radius: 10px;
		padding: 3% 8.5%;

		color: #42210b;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.03em;

		@media (max-width: 750px) {
			padding: 3% 4.5%;
		}

		dl {
			display: flex;
			align-items: flex-start;
#			justify-content: space-between;
			padding-bottom: 2%;
			font-size: min(calc(21 * 100vw / 1920),21px);

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

		dt {
			width: 18%;

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

		dd {
			flex: 1;
			position: relative;
			padding-left: 3%;

			@media (max-width: 750px) {
				padding-left: 3%;
			}
		}

		dd::before {
			content: "";
			position: absolute;
			top: 3px;
			bottom: 3px;
			left: 0;
			width: 1px;
			background: #927d6d;
		}

		a {
			color: #42210b;
			text-decoration: underline;
			display: block;
		}

		a:hover {
			color: #d13b14;
		}

		.noise__news-more {
			width: 17%;
			position: relative;
			margin: 2% 0 0 auto;
			line-height: 0;

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

		.noise__news-more .off {
			position: relative;
			opacity: 1;
			transition-duration: 0.5s;
		}

		.noise__news-more .on {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0;
			transition-duration: 0.5s;
		}

		.noise__news-more:hover .off {
			opacity: 0;

		}

		.noise__news-more:hover .on {
			opacity: 1;

		}

	}
}

.noise__info {
	width: 73%;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;


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

.noise__info-image {
	width: 38%;
	scale: 1.1;
	transform: translateX(5%);
	animation: fuwafuwa 4s ease-in-out infinite alternate;

	@media (max-width: 750px) {
		width: 70%;
		scale: 1.0;
		transform: translateX(0);
		animation: fuwafuwa-sp 4s ease-in-out infinite alternate;
	}
}

@keyframes fuwafuwa {
	0% {
		transform:translate(5%, 0) rotate(-7deg);
	}
	50% {
		transform:translate(5%, -7px) rotate(0deg);
	}
	100% {
		transform:translate(5%, 0) rotate(7deg);
	}
}

@keyframes fuwafuwa-sp {
	0% {
		transform:translate(0, 0) rotate(-7deg);
	}
	50% {
		transform:translate(0, -7px) rotate(0deg);
	}
	100% {
		transform:translate(0, 0) rotate(7deg);
	}
}

.noise__info-box {
	width: 62%;
	display: flex;
	flex-direction: column;
	gap: 2vw;
	position: relative;

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

	.noise__info-box-title {
		width: 95%;
		padding-left: 7%;

		@media (max-width: 750px) {
			width: 100%;
			padding-left: 0;
			position: absolute;
			top: -59%;
			left: 0;
		}
	}
}

.noise__info-area {
	position: relative;

	.noise__info-box-label {
		position: absolute;
		top: 50%;
		left: 55%;
		transform: translate(-50%, -50%);
		width: 88%;
		font-size: min(calc(33 * 100vw / 1920),22px);
#		font-size: calc(33 * 100vw / 1920);
		line-height: 1.8;
		color: #42210b;
		font-family: "Noto Serif JP", "源ノ明朝", serif;
		font-weight: 900;
		letter-spacing: 0.1em;

		@media (max-width: 750px) {
			font-size: min(calc(27 * 100vw / 750),27px);
			width: 93%;
			left: 50%;
		}
	}
}


/* ----------------------------------------------------
 * ゲーム情報
 * ---------------------------------------------------- */
.section-game {
	margin-top: -5%;
	position: relative;

	@media (max-width: 750px) {
		margin-top: -9%;
	}
}

.game__container-bg-top {
	width: 100%;
}

.game__container {
	background-image: url('/assets/img/bg_gara_kotei.png'); /* fallback */
	background-image: -webkit-image-set(
		url(/assets/img/bg_gara_kotei.webp) type("image/webp"),
		url(/assets/img/bg_gara_kotei.png) type("image/png")
	);
	background-image: image-set(
		url(/assets/img/bg_gara_kotei.webp) type("image/webp"),
		url(/assets/img/bg_gara_kotei.png) type("image/png")
	);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
	padding: 4% 0 10%;

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

.game__container-wrap {
	width: 67%;
#	max-width: 1200px;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 5vw;

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

.game__container-cell {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1vw 0;

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

	.game__list-title {
		width: 65%;
		box-shadow: 7px 7px rgba(175, 133, 82, 0.7);

  clip-path: inset(0 100% 0 0);
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;

		@media (max-width: 750px) {
			width: 86%;
			box-shadow: none;
			order: 1;
		}
	}

	.game__list-title.is-animated {
		clip-path: inset(0);
	}

	/* 751px以上だけ */
	@media (min-width: 751px) {
		.game__list-title.right {
			margin-left: auto;
			margin-right: 5%;
			order: 1;
		}
	}

	.box-shadow {
		box-shadow: 7px 7px rgba(175, 133, 82, 0.7);

		@media (max-width: 750px) {
			box-shadow: 3px 3px rgba(175, 133, 82, 0.7);
		}
	}

	.game__list-text-wrap {
		width: 48%;
		background: #f3efe6;
		padding: 0.5% 0 0.5% 0.5%;
		box-shadow: 7px 7px rgba(175, 133, 82, 0.7);

		@media (max-width: 750px) {
			width: 100%;
			box-shadow: 7px 7px rgba(175, 133, 82, 0.7);
			padding: 1% 1% 1% 1%;
			order: 3;
		}
	}

	/* 751px以上だけ */
	@media (min-width: 751px) {
		.game__list-text-wrap.right {
			order: 3;
			padding: 0.5% 0.5% 0.5% 0;
			margin-left: -1%;
		}
	}

	.game__list-text {
		position: relative;
		padding: 8% 3%;
		border-top: 1px solid #c7b299;
		border-bottom: 1px solid #c7b299;
		border-left: 1px solid #c7b299;
#		font-size: calc(20 * 100vw / 1920);
		font-size: min(calc(20 * 100vw / 1920),20px);
		color: #42210b;
		font-family: "Noto Serif JP", "源ノ明朝", serif;
		font-weight: 900;
		line-height: 1.7;
		letter-spacing: 0.1em;

		@media (max-width: 750px) {
			width: 100%;
			padding: 6% 5%;
			font-size: min(calc(23 * 100vw / 750),23px);
			letter-spacing: 0.4em;
			border-right: 1px solid #c7b299;
		}
	}

	/* 751px以上だけ */
	@media (min-width: 751px) {
		.game__list-text-wrap.right .game__list-text {
			border-left: none;
			border-right: 1px solid #c7b299;
			padding: 8% 3% 8% 5%;
		}
	}

	.game__list-image {
		width: 52%;
		z-index: 1;
		position: relative;

		@media (max-width: 750px) {
			width: 100%;
			box-shadow: 7px 7px rgba(175, 133, 82, 0.7);
			order: 2;
		}
	}

	/* 751px以上だけ */
	@media (min-width: 751px) {
		.game__list-image.left {
			order: 2;
		}
	}
}


/* ----------------------------------------------------
 * 製品情報
 * ---------------------------------------------------- */
.section-product {
	margin-top: -4%;
	position: relative;

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

.product__container {
	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: 4% 0 5%;

	@media (max-width: 750px) {
		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")
		);
		padding: 0 0 5%;
		margin-top: -10%;
	}
}

.product__information-wrap {
	width: 63%;
	max-width: 1200px;
	margin: auto;

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

.product__information {
	border: 1px solid #c69c6b;
	border-radius: 22px;
	width: 100%;
	margin: 0 auto 7%;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2% 4%;
	background: #f3efe6;
	position: relative;

	@media (max-width: 750px) {
#		flex-direction: column;
		flex-wrap: wrap;
		padding: 4% 3%;
	}
}

.product__soft-titele {
	width: 100%;
	text-align: center;
	margin-bottom: 2%;
	font-size: min(calc(36.8 * 100vw / 1920),36.8px);
	font-weight: 900;
	color: #42210b;

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

.product__soft {
	width: 48.5%;

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

	.product__soft-hard {
		display: flex;
		font-size: min(calc(18 * 100vw / 1920),18px);
		font-weight: 900;
		color: #754c24;

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

	p {
		width: 50%;
		text-align: center;
	}
}


.product__info {
	width: 49%;

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

.dotted-divider {
	border-bottom: 1px solid #c69c6d;
}

.eventinfo__card {
	margin-bottom: 2%;
}

.eventinfo__table {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.eventinfo__table-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 3% 0;
	font-size: min(calc(18 * 100vw / 1920),18px);
	font-family: 'Noto Sans JP', sans-serif;

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

}

/* 最初の行の上部余白を調整 */
.eventinfo__table-row:first-child {
	padding-top: 0;
}

/* 異なる文字数を同じ幅に美しく均等配置 */
.eventinfo__table-label {
	display: flex;
	justify-content: space-between;
	font-size: min(calc(18 * 100vw / 1920),18px);
	color: #754c24;
	font-weight: 900;
	line-height: 1.5;
	flex-shrink: 0;
	user-select: none;
	width: 26%;
	padding-left: 1%;

	@media (max-width: 750px) {
		width: 31%;
#			padding-left: 6%;
		font-size: calc(23 * 100vw / 750);
	}
}

.eventinfo__table-label span {
	display: inline-block;
}

.eventinfo__table-content {
#		flex-grow: 1;
	color: #42210b;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.03em;
	width: 66%;
	font-size: min(calc(18 * 100vw / 1920),18px);

	@media (max-width: 750px) {
		width: 59%;
#			padding-left: 6%;
		font-size: calc(24 * 100vw / 750);
	}
}

.eventinfo__table-content p {
	margin-bottom: 4px;
}

.eventinfo__table-content p:last-child {
	margin-bottom: 0;
}

.eventinfo__table-content a {
	color: #009cd6;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 500;
	margin-left: 2px;
	transition: opacity 0.15s;
}

.eventinfo__table-content a:hover {
	opacity: 0.75;
}

.eventinfo__table-cero {
	width: 4.5%;
	position: absolute;
	top: 88%;
	left: 52.8%;
	transform: translate(-50%, -50%);


	@media (max-width: 750px) {
		width: 16%;
		margin-bottom: 5%;
		order: 1;
		align-self: end;
		position: unset;
		transform: unset;
	}
}

.product__sns {
	width: 42%;
	margin: auto;
	position: relative;

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

.product__sns .off {
	position: relative;
	opacity: 1;
	transition-duration: 0.5s;
}

.product__sns .on {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition-duration: 0.5s;
}

.product__sns:hover .off {
	opacity: 1;

}

.product__sns:hover .on {
	opacity: 1;

}


/* ----------------------------------------------------
 * xxxxxxxxxx
 * ---------------------------------------------------- */



/* ----------------------------------------------------
 * xxxxxxxxxx
 * ---------------------------------------------------- */