/**
 * #Course detail pages
 */

.p-course-detail {
	--course-accent: #0d4089;
	--course-accent-2: #450155;
	--course-hero-bg: #91caff;
	--course-jobs-from: #0d4089;
	--course-jobs-to: #450054;
	color: #111;

	&.p-course-detail--eperformance {
		--course-accent: #ff2d55;
		--course-accent-2: #9a027e;
		--course-hero-bg: #ffdfe5;
		--course-jobs-from: #ff2d55;
		--course-jobs-to: #9a027e;
	}

	&.p-course-detail--junior {
		--course-accent: #008e4e;
		--course-accent-2: #8aa200;
		--course-hero-bg: #b2debd;
		--course-jobs-from: #8aa200;
		--course-jobs-to: #008e4e;
	}
}

.p-course-detail__hero {
	position: relative;
	overflow: hidden;
	background-color: var(--course-hero-bg);
}

.p-course-detail__hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;

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

	.p-course-detail--edance & img {
		/* object-position: center 22%; */
	}
	.p-course-detail--eperformance & img {
		object-position: center 22%;
	}
	.p-course-detail--junior & img {
		object-position: center 100%;
	}
}

.p-course-detail__hero-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1440px;
	margin-inline: auto;
	padding: 0 100px;

	@media (max-width: 1100px) {
		flex-direction: column-reverse;
		align-items: center;
		gap: 20px;
		min-height: 0;
		padding: 0 50px 50px;
	}

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

	.p-course-detail--eperformance & {
		align-items: flex-start;
	}
}

.p-course-detail__copy {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;

	@media (max-width: 1100px) {
		width: 100%;
		max-width: 560px;
		text-align: center;
		align-items: center;
	}
	.p-course-detail--eperformance & {
		margin-top: clamp(100px, calc(100 / 1440 * 100vw), 100px);
		@media (max-width: 1100px) {
			margin-top: 0;
		}
	}
}

.p-course-detail__catch {
	margin: 0;
	color: var(--white);
	font-size: 24px;
	font-weight: 900;
	line-height: 1.5;
	font-feature-settings: "palt";

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

.p-course-detail__title {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	margin: 0;
	color: var(--course-accent);
	line-height: 1;
	font-weight: 900;
}

.p-course-detail__title-en {
	font-family: var(--ff-en);
	font-size: clamp(48px, calc(80 / 1440 * 100vw), 80px);
}

.p-course-detail__title-ja {
	padding-bottom: 0.12em;
	font-size: clamp(32px, calc(36 / 1440 * 100vw), 36px);

	.p-course-detail--junior & {
		padding-bottom: 0;
		font-size: clamp(40px, calc(64 / 1440 * 100vw), 64px);
	}
}

.p-course-detail__lead {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	font-feature-settings: "palt";

	p {
		margin: 0;
	}

	@media (max-width: 1100px) {
		text-align: left;
	}
}

.p-course-detail__portrait {
	flex-shrink: 0;
	margin: 0;
	width: min(500px, 46%);

	img {
		display: block;
		width: 100%;
		height: auto;
		max-width: none;
	}

	@media (max-width: 1100px) {
		width: min(360px, 78vw);
	}

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

.p-course-detail__jobs {
	background: linear-gradient(90deg, var(--course-jobs-from), var(--course-jobs-to));
}

.p-course-detail__jobs-inner {
	display: flex;
	align-items: center;
	gap: 31px;
	max-width: 1440px;
	margin-inline: auto;
	padding: 17px 100px 14px;

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

.p-course-detail__jobs-label {
	flex-shrink: 0;
	margin: 0;
	padding: 10px 20px;
	border-radius: 999px;
	background-color: var(--white);
	color: var(--course-accent);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.p-course-detail__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		padding: 5px 10px;
		border: 1px solid var(--white);
		color: var(--white);
		font-size: 16px;
		font-weight: 700;
		line-height: 1.5;
		white-space: nowrap;

		&.is-plain {
			border: 0;
			padding-inline: 0;
		}
	}
}

.p-course-detail__curriculum {
	padding: 60px 20px 80px;

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

.p-course-detail__sec-head {
	margin-bottom: 40px;
	color: #111;

	.c-sec-head__en {
		padding-bottom: 0;
		border-bottom: 0;
		color: var(--course-accent);
		font-size: clamp(40px, calc(64 / 1440 * 100vw), 64px);
		text-shadow: none;
	}

	.c-sec-head__ja {
		text-shadow: none;
		font-size: 20px;

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

.p-course-detail__years {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	max-width: 882px;
	margin-inline: auto;

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

.p-course-year {
	overflow: hidden;
	background-color: var(--white);
	/* border: 1px solid #ddd; */
	border-radius: 20px;
}

.p-course-year__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 15px 20px;
	background-color: var(--course-accent);

	.p-course-year--alt & {
		background-color: var(--course-accent-2);
	}
}

.p-course-year__badge {
	margin: 0;
	padding: 5px 15px;
	border-radius: 999px;
	background-color: var(--white);
	color: var(--course-accent);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;

	.p-course-year--alt & {
		color: var(--course-accent-2);
	}
}

.p-course-year__title {
	margin: 0;
	color: var(--white);
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 0.05em;
	line-height: 1;
	font-feature-settings: "palt";

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

.p-course-year__photo {
	margin: 0;
	height: 284px;
	overflow: hidden;

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

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

.p-course-year__body {
	padding: 20px 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;

	p {
		margin: 0;
	}

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

.p-course-detail__info {
	background: linear-gradient(220deg, var(--course-accent-2) 6%, var(--course-accent) 93%);
}

.p-course-detail__info-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	max-width: 1440px;
	margin-inline: auto;
	padding: 20px 100px;

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

.p-course-detail__info-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.p-course-detail__info-label {
	align-self: flex-start;
	margin: 0;
	padding: 4px 17px;
	border-radius: 999px;
	background-color: var(--white);
	color: var(--course-accent);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

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

.p-course-junior {
	padding: 60px 100px;

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

.p-course-junior__panel {
	display: flex;
	flex-direction: column;
	gap: 30px;
	max-width: 1000px;
	margin-inline: auto;
	padding: 50px;
	background-color: var(--white);

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

.p-course-junior__h2 {
	position: relative;
	margin: 0;
	padding-bottom: 11px;
	border-bottom: 5px solid #efefef;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;

	&::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -5px;
		width: 150px;
		height: 5px;
		background-color: var(--color-accent);
	}

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

.p-course-junior__paths {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;

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

.p-course-junior__path {
	padding: 20px;
	border-radius: 20px;
	background-color: rgba(0, 142, 78, 0.14);

	h3 {
		margin: 0 0 10px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
	}

	p {
		margin: 0;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.3;
	}
}

.p-course-junior__row {
	display: flex;
	gap: 40px;
	padding-top: 20px;
	border-top: 1px solid #ddd;

	h3 {
		flex: 0 0 162px;
		margin: 0;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.8;
	}

	ul,
	p {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.8;
	}

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

		h3 {
			flex: none;
		}
	}
}

.p-course-junior__values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;

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

.p-course-value {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding: 20px;
	border: 1px solid var(--course-accent);
	border-radius: 20px;
	text-align: center;

	h3 {
		margin: 0;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.3;
	}

	> p:last-child {
		margin: 0;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.6;
	}
}

.p-course-value__num-wrap {
	position: relative;
	display: inline-block;
}

.p-course-value__script {
	position: absolute;
	top: -12px;
	left: -32px;
	margin: 0;
	transform-origin: right bottom;
	pointer-events: none;
	z-index: 1;

	img {
		display: block;
		width: 63px;
		height: auto;
		max-width: none;
	}
}

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

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

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

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

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

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

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

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

.p-course-related__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;

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

.p-course-link {
	--link-tint: #91caff;
	--link-from: #4b0881;
	--link-to: #0d4089;
	--link-hero-bg: url("/wp-content/themes/edance-parent/assets/img/course/hero-bg-edance.jpg");
	position: relative;
	display: flex;
	flex-direction: column;
	width: 335px;
	max-width: 100%;
	color: var(--white);
	text-decoration: none;

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

	&.p-course-link--eperformance {
		--link-tint: #ffd3dc;
		--link-from: #c73897;
		--link-to: #ff2d55;
		--link-hero-bg: url("/wp-content/themes/edance-parent/assets/img/course/hero-bg-eperformance.jpg");
	}

	&.p-course-link--junior {
		--link-tint: #b2debd;
		--link-from: #8aa200;
		--link-to: #008e4e;
		--link-hero-bg: url("/wp-content/themes/edance-parent/assets/img/course/hero-bg-junior.jpg");
	}

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

.p-course-link__portrait {
	position: relative;
	display: flex;
	justify-content: center;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
	background-color: var(--link-tint);

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--link-hero-bg) center / cover no-repeat;
		opacity: 0.08;
		pointer-events: none;
	}

	.p-course-link--eperformance &::after {
		background-position: center 22%;
	}

	img {
		position: relative;
		z-index: 1;
		display: block;
		width: 280px;
		height: auto;
		max-width: none;
	}

	@media (max-width: 768px) {
		img {
			width: min(280px, 78%);
		}
	}
}

.p-course-link__body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px 12px;
	min-height: 148px;
	padding: 15px 20px;
	border-radius: 0 0 20px 20px;
	background: linear-gradient(253deg, var(--link-from) 5%, var(--link-to) 93%);
}

.p-course-link__title {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 4px;
	color: var(--white);
	font-weight: 700;
	line-height: 1.5;
}

.p-course-link__en {
	font-size: 24px;
}

.p-course-link__ja {
	font-size: 16px;

	.p-course-link--junior & {
		font-size: 24px;
	}
}

.p-course-link__arrow {
	--arrow-size: 14px;
	width: 28px;
	height: 28px;
	padding: 7px;
	border-radius: 999px;
	background-color: var(--white);
	color: #111;
}

.p-course-link__lead {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
}