/**
 * #Front page (NEON)
 */

.p-front-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	opacity: 0.5;

	.p-front-bg__photo {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: center;
	}

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(189deg, #410056 9%, #1a0130 90%);
		mix-blend-mode: hue;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		opacity: 0.4;
		background-image: repeating-conic-gradient(#000 0% 25%, transparent 0% 50%);
		background-size: 4px 4px;
	}
}

.p-front {
	--front-rd-panel: 30px;
	--front-rd-card: 10px;
	--front-rd-course: 20px;
	--front-rd-course-inner: 15px;
	--front-rd-interview: 20px;
	--front-rd-pamphlet: 20px;

	@media (max-width: 768px) {
		--front-rd-panel: 20px;
		--front-rd-interview: 10px;
	}

	.c-btn {
		border: 0;
		border-radius: 999px;
		padding-left: 28px;
		padding-right: 40px;
		background-image: var(--neon-grd);
		background-size: 100% 100%;
		background-position: center;
		color: var(--white);
		transition: background-size 0.55s ease, background-position 0.55s ease, opacity 0.3s ease, color 0.3s ease;

		&:hover {
			opacity: 1;
			color: var(--white);
			background-size: 220% 160%;
			background-position: 85% 40%;
		}
	}

	.c-sec-head {
		.c-sec-head__en,
		.c-sec-head__ja {
			text-shadow: 0 0 10px #fff;
		}

		.c-sec-head__en {
			padding-bottom: 10px;
			border-bottom: 10px solid var(--color-accent);
			@media (max-width: 768px) {
				padding-bottom: 5px;
				border-bottom: 5px solid var(--color-accent);
			}
		}
	}

	.c-card__thumb {
		border-radius: var(--front-rd-card);
	}
}