/**
 * #Overview page
 */

.p-overview {
	color: #111;
}

.p-overview__visual {
	position: relative;
	overflow: hidden;
	padding: 80px 0;

	@media (max-width: 768px) {
		padding: 30px 0;
	}
}

.p-overview__stage {
	position: relative;
}

.p-overview__watermark {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;

	img {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 105%;
		max-width: none;
		height: auto;
		transform: translate(-50%, -50%);
		opacity: 0.06;
		mix-blend-mode: luminosity;
	}

	@media (max-width: 768px) {
		opacity: 0.06;
		mix-blend-mode: luminosity;
		background-image: url("/wp-content/themes/edance-parent/assets/img/overview-watermark.png");
		background-repeat: repeat-y;
		background-position: center top;
		background-size: 100% auto;

		img {
			display: none;
		}
	}
}

.p-overview__collage {
	position: absolute;
	inset: 0;
	z-index: 0;

	@media (max-width: 768px) {
		display: none;
	}
}

.p-overview__shot {
	margin: 0;
	overflow: hidden;

	img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
	}
}

.p-overview__shot--1 {
	position: absolute;
	top: 0;
	left: 7.15%;
	width: 16.53%;
	height: 36.02%;
}

.p-overview__shot--2 {
	position: absolute;
	top: 0.5%;
	left: 71.04%;
	width: 19.72%;
	height: 28.66%;
}

.p-overview__shot--3 {
	position: absolute;
	top: 42.08%;
	left: 0;
	width: 26.04%;
	height: 25.23%;
}

.p-overview__shot--4 {
	position: absolute;
	top: 35.22%;
	left: 73.33%;
	width: 26.67%;
	height: 25.83%;

	img {
		object-position: 40% 20%;
	}
}

.p-overview__shot--5 {
	position: absolute;
	top: 73.36%;
	left: 14.17%;
	width: 17.36%;
	height: 25.23%;

	img {
		object-position: 20% 30%;
	}
}

.p-overview__shot--6 {
	position: absolute;
	top: 67.1%;
	left: 67.71%;
	width: 15.07%;
	height: 32.9%;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(255, 255, 255, 0.76);
		mix-blend-mode: overlay;
	}
}

.p-overview__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(40px, calc(80 / 1440 * 100vw), 80px);
	width: 56.46%;
	margin-inline: auto;
	padding-top: clamp(48px, calc(71 / 1440 * 100vw), 71px);
	padding-bottom: clamp(40px, calc(80 / 1440 * 100vw), 80px);

	@media (max-width: 768px) {
		display: contents;
		width: auto;
		margin: 0;
		padding: 0;
		gap: 0;
	}
}

.p-overview__catch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	font-feature-settings: "palt" 1;

	@media (max-width: 768px) {
		position: relative;
		z-index: 1;
		gap: 10px;
		padding: 0 20px 20px;
	}
}

.p-overview__catch-line {
	margin: 0;
	width: fit-content;
	max-width: 100%;
	color: var(--white);
	font-size: max(32px, calc(48 / 1440 * 100vw));
	font-weight: 900;
	letter-spacing: 0.05em;
	text-align: center;
	white-space: nowrap;

	.c-mark__text > span {
		color: var(--color-accent);
	}

	&.p-overview__catch-line--lg {
		font-size: max(40px, calc(64 / 1440 * 100vw));
	}

	.c-mark__text {
		white-space: nowrap;
	}
	@media (max-width: 768px) {
		font-size: 20px;
		letter-spacing: 0.05em;
		white-space: normal;

		&.p-overview__catch-line--lg {
			font-size: 23px;
		}
	}
}

.p-overview__body {
	max-width: 813px;
	color: #111;
	font-size: 20px;
	font-weight: 500;
	line-height: 2;
	text-align: center;

	p {
		margin: 0 0 2em;
		text-shadow: 0 0 8px #fff, 0 0 16px #fff, 0 0 28px #fff, 0 1px 2px #fff;

		&:last-child {
			margin-bottom: 0;
		}
	}

	@media (max-width: 768px) {
		padding: 30px 20px;
		font-size: 16px;
		line-height: 1.4;

		br {
			display: none;
		}

		p {
			margin-bottom: 1.4em;
		}
	}
}

.p-overview__strip {
	display: none;

	@media (max-width: 768px) {
		display: block;
		width: 100%;
		overflow: hidden;
	}
}

.p-overview__track {
	display: flex;
	width: max-content;
	animation: overview-marquee 20s linear infinite;
}

.p-overview__strip--bottom .p-overview__track {
	animation-direction: reverse;
}

.p-overview__set {
	display: flex;
	flex-shrink: 0;
	gap: 7px;
	padding-right: 7px;
}

.p-overview__shot--sm,
.p-overview__shot--md,
.p-overview__shot--lg {
	flex-shrink: 0;
	height: 155px;
}

.p-overview__shot--sm { width: 103px; }
.p-overview__shot--md { width: 155px; }
.p-overview__shot--lg { width: 233px; }

@keyframes overview-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-overview__track {
		animation: none;
	}
}

.p-overview-related {
	.p-overview-related__inner {
		display: flex;
		align-items: center;
		gap: 51px;
		max-width: 1440px;
		margin-inline: auto;
		padding: 60px 100px;

		@media (max-width: 768px) {
			flex-direction: column;
			align-items: stretch;
			gap: 10px;
			padding: 30px 20px;
		}
	}

	.p-overview-related__head {
		flex-shrink: 0;
		width: 147px;

		@media (max-width: 768px) {
			display: none;
		}
	}

	.p-overview-related__en {
		margin: 0;
		color: var(--color-accent);
		font-family: var(--ff-en);
		font-size: 40px;
		font-weight: 900;
		line-height: 1;
	}

	.p-overview-related__ja {
		margin: 0;
		color: var(--white);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
	}

	.p-overview-related__rule {
		flex-shrink: 0;
		align-self: stretch;
		width: 1px;
		background-color: rgb(255 255 255 / 35%);

		@media (max-width: 768px) {
			display: none;
		}
	}

	.p-overview-related__cards {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;

		@media (max-width: 768px) {
			flex-direction: column;
			gap: 10px;
		}
	}
}