/**
 * #About / Message / Feature panels
 */

.p-panels {
	padding-inline: 50px;

	@media (max-width: 768px) {
		padding-inline: 20px;
	}

	.p-panels__about,
	.p-panels__half {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--front-rd-panel, 30px);
		color: var(--white);
		text-decoration: none;

		img,
		video {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.6s ease, opacity 1s ease;
		}

		&:hover {
			opacity: 1;

			img,
			video {
				transform: scale(1.03);
			}
		}
	}

	.p-panels__about {
		aspect-ratio: 16 / 9;
		width: 100%;

		video {
			position: absolute;
			inset: 0;
		}

		.p-panels__video--pc {
			@media (max-width: 768px) {
				display: none;
			}
		}

		.p-panels__video--sp {
			display: none;

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

		@media (max-width: 768px) {
			aspect-ratio: 9 / 16;
		}
	}

	.p-panels__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 50px;
		padding-block: 50px;

		@media (max-width: 768px) {
			grid-template-columns: 1fr;
			gap: 20px;
			padding-block: 20px;
		}
	}

	.p-panels__half {
		aspect-ratio: 1;
	}

	.p-panels__more {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 8px;
		font-family: var(--ff-en);
		font-size: 14px;
		font-weight: 900;
		text-transform: uppercase;
		color: var(--white);

		.c-arrow {
			color: var(--white);
		}
	}
}

.p-panels__caption {
	position: absolute;
	left: 50%;
	bottom: 48px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transform: translateX(-50%);
	width: max-content;
	max-width: calc(100% - 40px);
	color: var(--white);
	pointer-events: none;

	@media (max-width: 768px) {
		bottom: 24px;
	}

	&.p-panels__caption--left {
		left: 100px;
		transform: none;
		align-items: flex-start;

		@media (max-width: 768px) {
			left: 20px;
			bottom: 24px;
		}
	}
}

.p-panels__en,
.p-panels__ja {
	display: inline-block;
}

.p-panels__en {
	font-family: var(--ff-en);
	font-size: clamp(32px, 4vw, 64px);
	font-weight: 900;
}

.p-panels__ja {
	font-size: clamp(16px, 1.8vw, 24px);
	font-weight: 700;
}