/**
 * #OPEN CLASS front
 */

.theme-edance-open-class .p-front-bg {
	opacity: 1;

	.p-front-bg__photo {
		opacity: 0.2;
		mix-blend-mode: luminosity;
	}

	&::before {
		mix-blend-mode: plus-lighter;
	}
}

.p-front .p-fv__copy {
	width: clamp(280px, 65vw, 941px);
	@media (max-width: 768px) {
		width: min(321px, 86vw);
	}
}

.p-front .p-panels {
	padding-top: 20px;
}

.theme-edance-open-class .p-panels .p-panels__about {
	aspect-ratio: 1340 / 500;

	@media (max-width: 768px) {
		aspect-ratio: 1;
	}

	.p-panels__br {
		display: none;

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

.p-front .p-panels__about {
	.p-panels__caption--left {
		@media (max-width: 768px) {
			left: 50%;
			transform: translateX(-50%);
			align-items: center;
			width: calc(100% - 40px);
			max-width: 241px;
		}
	}

	.p-panels__ja {
		@media (max-width: 768px) {
			width: 100%;
			max-width: 100%;
			white-space: normal;
			text-align: center;
			text-box: unset;
		}
	}

	.p-panels__ja .c-mark__text {
		@media (max-width: 768px) {
			display: block;
			white-space: normal;
		}
	}
}

.p-cta__inner--open-class,
.p-cta__inner--instructor {
	flex-direction: column;
	align-items: center;
	gap: 30px;
}


/* Figma CTA / Instructor: 900 × 280, with the photograph's original crop. */
.p-cta-instructor {
	position: relative;
	display: block;
	width: min(100%, 900px);
	aspect-ratio: 900 / 280;
	overflow: hidden;
	border-radius: var(--front-rd-panel, 30px);
	color: var(--white);
	text-decoration: none;

	&:hover {
		opacity: 1;
	}

	&:focus-visible {
		outline: 3px solid var(--neon-cyan, #00f5ff);
		outline-offset: 5px;
	}

	@media (max-width: 768px) {
		min-height: 220px;
	}
}

.p-cta-instructor__photo {
	position: absolute;
	display: block;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}

.p-cta-instructor__photo {
	left: -1.444444%;
	top: -86.428571%;
	width: 103%;
	height: 221.071429%;

	@media (max-width: 768px) {
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: none;
		object-position: center 75%;
	}
}

.p-cta-instructor__caption {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
}

.p-cta-instructor__labels {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;

	.c-mark {
		padding: 2px 5px;
		text-box: normal;
		white-space: nowrap;
	}

	.c-mark__text {
		line-height: 1;
	}
}

.p-cta-instructor__en {
	font-family: var(--ff-en);
	font-size: 48px;
	font-weight: 900;

	@media (max-width: 768px) {
		font-size: 32px;
	}
}

.p-cta-instructor__ja {
	font-size: 20px;
	font-weight: 700;

	@media (max-width: 768px) {
		font-size: 16px;
	}
}

.p-cta-instructor__more {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ff-en);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.p-campus-cta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	width: 100%;
	max-width: 1440px;

	@media (max-width: 1024px) {
		grid-template-columns: 1fr;
	}
}

.p-campus-cta__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 130px;
	padding: 24px 20px 24px 24px;
	overflow: hidden;
	border-radius: 14px;
	color: var(--white);
	text-decoration: none;

	&:hover {
		opacity: 1;
		color: var(--white);
	}
	@media (max-width: 768px) {
		min-height: 100px;
		padding: 20px 16px 20px 20px;
	}
}

.p-campus-cta__item--baba {
	background-color: var(--campus-baba, #4a35ff);
}

.p-campus-cta__item--anime-dance {
	background-color: var(--campus-anime-dance, #0097f5);
}

.p-campus-cta__item--prolab {
	background-color: var(--campus-prolab, #e8c547);
}

.p-campus-cta__item--pink {
	background-color: var(--neon-pink, #ff2d78);
}

.p-campus-cta__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.p-campus-cta__ja {
	font-size: 18px;
	font-weight: 700;

	@media (max-width: 768px) {
		font-size: 16px;
	}
}

.p-campus-cta__en {
	font-family: var(--ff-en);
	font-size: 14px;
	font-weight: 700;
	@media (max-width: 768px) {
		font-size: 12px;
	}
}

.p-campus-cta__photo {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	object-fit: cover;
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.p-campus-cta__arrow {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	overflow: hidden;
	border-radius: 999px;
	background-color: inherit;
	color: var(--white);

	&::after {
		content: "";
		display: block;
		width: 14px;
		height: 14px;
		background-color: currentColor;
		mask-image: url("/wp-content/themes/edance-parent/assets/img/icon/btn-arrow.svg");
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		-webkit-mask-image: url("/wp-content/themes/edance-parent/assets/img/icon/btn-arrow.svg");
		-webkit-mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
	}

	&.p-campus-cta__arrow--external::after {
		width: 11px;
		height: 11px;
		mask-image: url("/wp-content/themes/edance-parent/assets/img/icon/external.svg");
		-webkit-mask-image: url("/wp-content/themes/edance-parent/assets/img/icon/external.svg");
	}
}

.p-campus-cta__item:hover .p-campus-cta__arrow:not(.p-campus-cta__arrow--external)::after {
	animation: arrow-hover 0.6s cubic-bezier(0.18, 0.89, 0.32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.p-campus-cta__item:hover .p-campus-cta__arrow:not(.p-campus-cta__arrow--external)::after {
		animation: none;
	}
}

.p-banner {
	padding: 60px 0 0;
	overflow: hidden;

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

.p-banner__slider {
	display: flex;
	align-items: center;
	width: 100%;
	height: 300px;

	@media (max-width: 768px) {
		height: min(180px, 48vw);
	}
}

.p-banner__slide,
.p-banner__slide.keen-slider__slide,
.p-banner .p-banner__slider:not([data-keen-slider-disabled]) .p-banner__slide {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 600px;
	min-height: 0;
	height: 300px;
	overflow: visible;
	text-decoration: none;

	@media (max-width: 768px) {
		width: min(320px, 86vw);
		height: min(160px, 43vw);
	}
}

.p-banner__frame {
	display: block;
	width: 500px;
	height: 250px;
	overflow: hidden;
	border-radius: 16.67px;

	@media (max-width: 768px) {
		width: min(280px, 74vw);
		height: min(140px, 37vw);
	}

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

.p-banner.is-ready .p-banner__frame {
	transition: width 0.45s ease, height 0.45s ease, border-radius 0.45s ease;
}

.p-banner__slide.is-active .p-banner__frame {
	width: 600px;
	height: 300px;
	border-radius: 20px;

	@media (max-width: 768px) {
		width: min(320px, 86vw);
		height: min(160px, 43vw);
	}
}

.p-banner__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;

	.c-slider-nav__btn {
		width: 40px;
		height: 40px;

		&::after {
			width: 20px;
			height: 20px;
		}
	}
}

.p-banner__index {
	min-width: 35px;
	color: var(--white);
	font-family: var(--ff-en);
	font-size: 18px;
	font-weight: 900;
	line-height: 1;
	text-align: center;
}

.p-pickup {
	--pickup-u: clamp(0.62px, calc(100vw / 1440), 1px);
	padding: 80px 0 0;
	overflow: hidden;

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

	.c-sec-head {
		margin-bottom: 0;
	}

	.c-slider-nav--center {
		width: 100%;
		margin-top: 40px;
	}

	.c-sec-head--glow .c-sec-head__en {
		font-size: clamp(40px, 6.67vw, 96px);
	}
}

.p-pickup__slider {
	width: 100%;
	overflow: hidden;
	padding-left: 43px;

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

.p-pickup__card,
.p-pickup__card.keen-slider__slide,
.p-pickup .p-pickup__slider:not([data-keen-slider-disabled]) .p-pickup__card {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	width: 400px;
	min-height: 0;
	padding-top: calc(80 * var(--pickup-u));
	overflow: visible;
	color: var(--white);
	text-decoration: none;

	@media (max-width: 768px) {
		width: min(320px, 82vw);
	}

	&:hover {
		opacity: 1;
		color: var(--white);
	}
}

.p-pickup__badge {
	position: absolute;
	top: 0;
	left: calc(-27 * var(--pickup-u));
	z-index: 2;
	width: calc(163 * var(--pickup-u));
	height: calc(149 * var(--pickup-u));
	pointer-events: none;
}

.p-pickup__script {
	position: absolute;
	top: calc(20 * var(--pickup-u));
	left: calc(1 * var(--pickup-u));
	z-index: 3;
	width: calc(131.492 * var(--pickup-u));
	height: auto;
}

.p-pickup__no {
	position: absolute;
	top: calc(89 * var(--pickup-u));
	left: calc(101 * var(--pickup-u));
	font-family: var(--ff-en);
	font-size: calc(120 * var(--pickup-u));
	font-weight: 900;
	line-height: 1;
	color: var(--white);
	transform: translate(-50%, -50%);
}

.p-pickup__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 20px;
	background-color: #111;

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

.p-pickup__name {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
	text-align: center;

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

.p-pickup__meta {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.p-pickup__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
}

.p-pickup__campus {
	display: inline-flex;
	align-items: center;
	padding: 4px 9px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.p-pickup__campus--baba {
	background-color: var(--campus-baba, #4a35ff);
}

.p-pickup__campus--anime-dance {
	background-color: var(--campus-anime-dance, #0097f5);
}

.p-genre {
	padding: 80px 0 0;

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

	.c-sec-head {
		margin-bottom: 40px;
	}
}

.p-genre__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
	width: min(1080px, calc(100% - 40px));
	margin-inline: auto;

	@media (max-width: 768px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

.p-genre__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 16px;
	background-color: #111;
	color: var(--white);
	text-decoration: none;

	&:hover {
		opacity: 1;
		color: var(--white);
	}

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

.p-genre__label {
	position: absolute;
	left: 50%;
	bottom: 16px;
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100% - 20px);
	padding: 4px 10px;
	/* border-radius: 4px; */
	background-color: var(--white);
	color: #111;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.3;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: break-word;
	transform: translateX(-50%);
}

.p-campus-news {
	padding: 80px 50px 0;

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

	.c-sec-head {
		margin-bottom: 40px;
	}
}

.p-campus-news__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 1340px;
	margin-inline: auto;

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

.p-campus-news__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 40px 32px;
	border-radius: 24px;
	color: var(--white);
}

.p-campus-news__col--baba {
	background-color: rgb(74 53 255 / 0.3);
}

.p-campus-news__col--anime-dance {
	background-color: rgb(0 151 245 / 0.3);
}

.p-campus-news__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.p-campus-news__en {
	margin: 0;
	color: var(--white);
	font-family: var(--ff-en);
	font-size: 32px;
	font-weight: 900;
	line-height: 1;
	padding-bottom: 6px;
}

.p-campus-news__col--baba .p-campus-news__en {
	border-bottom: 4px solid var(--campus-baba, #4a35ff);
}

.p-campus-news__col--anime-dance .p-campus-news__en {
	border-bottom: 4px solid var(--campus-anime-dance, #0097f5);
}

.p-campus-news__ja {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.p-campus-news__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.p-campus-news__item {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 16px;
	align-items: center;
	color: var(--white);
	text-decoration: none;

	&:hover {
		opacity: 1;
		color: var(--white);
	}

	@media (max-width: 768px) {
		grid-template-columns: 88px 1fr;
	}
}

.p-campus-news__thumb {
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 150 / 102;

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

.p-campus-news__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
}

.p-campus-news__cat {
	display: inline-flex;
	padding: 2px 8px;
	border: 1px solid var(--white);
	border-radius: 4px;
	font-size: 12px;
}

.p-campus-news__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.p-campus-news__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	color: var(--white);
	font-weight: 700;
	text-decoration: none;

	&:hover {
		opacity: 1;
		color: var(--white);
	}
}

.p-campus-news__col--baba .p-campus-news__more {
	background-color: var(--campus-baba, #4a35ff);
}

.p-campus-news__col--anime-dance .p-campus-news__more {
	background-color: var(--campus-anime-dance, #0097f5);
}

/* 校舎ページのヘッダー。校舎名は狭い画面でも省略しない。 */
.theme-edance-open-class .p-header__program-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.theme-edance-open-class .p-header__campus {
	display: inline-block;
	padding: 3px 16px;
	border-radius: 999px;
	background-color: var(--campus-color);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

@media (max-width: 1200px) and (min-width: 1025px) {
	.theme-edance-open-class .p-header--campus .p-header__brand {
		padding-inline: 16px;
	}
	.theme-edance-open-class .p-header--campus .p-header__academy {
		font-size: 12px;
	}
}

@media (max-width: 1024px) {
	.theme-edance-open-class .p-header--campus .p-header__program-row {
		gap: 2px 8px;
	}
	.theme-edance-open-class .p-header__campus {
		padding: 2px 10px;
		font-size: 12px;
	}
}

@media (max-width: 600px) {
	.theme-edance-open-class .p-header--campus .p-header__academy {
		font-size: clamp(8px, 2.5vw, 10px);
	}
	.theme-edance-open-class .p-header--campus .p-header__program-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.theme-edance-open-class .p-header--campus .p-header__program {
		font-size: 14px;
	}
}