@charset "UTF-8";
/* CSS Document */


.about_nav {
	max-width: 1280px;
	margin: 30px auto 0;
	padding: 0;
	line-height: 1.8;
}

.about_nav ul {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	border-bottom: 5px solid #d8f4ff;
	list-style: none;
}

.about_nav li {
	position: relative;
	margin: 0;
	font-size: 1.8rem;
	font-weight: 600;
}

.about_nav a {
	display: block;
	padding: 0 1em 8px;
	color: #111;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.3s ease;
}

.about_nav li:not(.current) a:hover {
	color: #28ADEB;
}

.about_nav li::after {
	width: calc(100% - 2em);
	position: absolute;
	right: 0;
	bottom: -5px;
	left: 1em;
	height: 5px;
	background: #111;
	content: "";
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

.about_nav .current::after,
.about_nav li:hover::after {
	transform: scaleX(1);
}

.about_nav:has(li:not(.current):hover) .current::after {
	transform: scaleX(0);
	transform-origin: right center;
}

/*  */

@media screen and (max-width: 768px) {

	.about_nav {
		overflow-x: auto;
		margin-top: 20px;
		padding: 0 16px;
	}

	.about_nav ul {
		width: max-content;
		justify-content: flex-start;
	}

	.about_nav li {
		margin: 0;
	}

	.about_nav a {
		font-size: 3.2vw;
	}

}