/**
 * #Course
 */

.p-course {
	--course-slide: clamp(300px, calc(600 / 1440 * 100vw), 600px);
	padding: 120px 0 0;
	background: transparent;
	overflow: visible;

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

	.c-sec-head {
		margin-bottom: 80px;

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

	.p-course__slider {
		width: 100%;
		overflow: hidden;
	}

	.p-course__slider:not([data-keen-slider-disabled]) .p-course__slide {
		flex: 0 0 auto;
		width: var(--course-slide);
	}

	.p-course__slide {
		position: relative;
		display: block;
		aspect-ratio: 1;
		overflow: hidden;
		border-radius: var(--front-rd-course, 20px);
		padding: 5px;
		background-image: linear-gradient(135deg, var(--course-edance-from, #0d4089), var(--course-edance-to, #450155));
		color: var(--white);
		text-decoration: none;
		box-sizing: border-box;

		.p-course__media {
			display: block;
			overflow: hidden;
			width: 100%;
			height: 100%;
			border-radius: var(--front-rd-course-inner, 15px);
		}

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

		&:hover {
			opacity: 1;

			img {
				transform: scale(1.03);
			}
		}

		&.p-course__slide--junior-college {
			background-image: linear-gradient(135deg, var(--course-junior-from, #008e4e), var(--course-junior-to, #8aa200));
		}

		&.p-course__slide--edance {
			background-image: linear-gradient(135deg, var(--course-edance-from, #0d4089), var(--course-edance-to, #450155));
		}

		&.p-course__slide--eperformance {
			background-image: linear-gradient(135deg, var(--course-eperformance-from, #ff2d55), var(--course-eperformance-to, #9a027e));
		}

		@media (prefers-reduced-motion: reduce) {
			img {
				transition: none;
			}

			&:hover img {
				transform: none;
			}
		}
	}

	.p-course__caption {
		z-index: 2;
		position: absolute;
		left: 50%;
		bottom: calc(40 / 1440 * 100vw);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		text-align: center;
		transform: translateX(-50%);
		 @media (max-width: 768px) {
			bottom: 20px;
		 }
	}

	.p-course__name,
	.p-course__lead {
		color: #111;
		font-weight: 700;
		font-feature-settings: "palt";
		white-space: nowrap;
	}

	.p-course__name {
		display: inline-block;
		font-size: clamp(20px, calc(24 / 1440 * 100vw), 24px);

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

	.p-course__lead {
		display: block;
		max-width: 100%;
		text-align: center;
		font-size: clamp(20px, calc(32 / 1440 * 100vw), 32px);

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

	.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);
		}
	}
}