@charset "utf-8";

#menu-common {
display: flex;
justify-content: space-between;
}

ul.menu {
	margin: 0;
	padding:0;
	list-style-position: outside;
}

ul.menu li {
	list-style-type: none;
}

ul.menu li a:hover {
animation-name: textanime;
animation-duration: 1s;
}

@keyframes textanime {
	0%{
		border-bottom: 2px solid rgb(255 255 255 / 0);
	}

	100%{
		border-bottom: 2px solid rgb(255 255 255 / 50％);
	}
}

ul.menu li a {
	display: block;
	width: 100%;
	font-size: 1rem;
	text-align: center;
	letter-spacing: 2px;
	color: #FFFFFF;
	text-decoration: none;
	padding: 10px 20px 10px 20px;
	border-bottom: 2px solid rgb(255 255 255 / 0);
}

ul.menu li {
flex-grow: 1;
}

ul.menu li.current-menu-item a {
	color: #FFFFFF;
	background: rgb(255 255 255 / 25%);
	border-bottom: 2px solid rgb(255 255 255 / 75%);
}

ul.menu li.current-menu-item a:hover {
	border-bottom: 2px solid rgb(255 255 255 / 0);
}

ul.menu li a:hover {
	background: rgb(255 255 255 / 25%);
	border-bottom: 2px solid rgb(255 255 255 / 0);
}


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

ul.menu li a {
	font-size: 1.3vw;
	padding: 10px 10px 10px 10px;
}

}