@charset "utf-8";
header {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	height: 100vh;
	position: relative;
}
#floatingNavi {
	transition: .4s ease-out .4s;
}
#floatingNavi.scrolling {
	transition: .4s ease-out;
	-webkit-transform: translateY(calc(-100% - 20px));
	transform: translateY(calc(-100% - 20px));
}
.floating-navi {
	display: -webkit-box;
	display: flex;
	width: 100%;
	padding-left: 20px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	pointer-events: none;
}
.floating-navi a {
	pointer-events: auto;
}
#siteLogo {
	width: 140px;
	height: 130px;
	position: relative;
}
#siteLogo a {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	background-color: #fff;
	width: 100%;
	height: 100%;
	border-radius: 0 0 6px 6px;
	position: relative;
	z-index: 2;
}
#siteLogo a img {
	width: 97px;
}
#siteLogo::after {
	display: block;
	content: "";
	background-image: var(--color-glow);
	width: calc(100% + 12px);
	height: calc(100% + 32px);
	border-radius: inherit;
	position: absolute;
	top: -26px;
	left: -6px;
	z-index: 1;
	-webkit-filter: blur(10px);
	filter: blur(10px);
}
#siteLogo:hover::after {
	animation: hueRotate 1s linear infinite;
}
.floating-navi nav {
	width: calc(100% - 140px);
	padding: 10px 40px 0 20px;
}
.floating-navi dt {
	display: none;
	width: 60px;
	height: 0;
	padding-top: 60px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 21;
	overflow: hidden;
	filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 20px #000);
	pointer-events: auto;
	cursor: pointer;
}
.floating-navi dt::before,
.floating-navi dt::after {
	display: block;
	content: "";
	background-color: #fff;
	width: 30px;
	height: 2px;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: .2s ease-out;
}
.floating-navi dt::before {
	-webkit-transform: translate(-50%, calc(-50% - 5px));
	transform: translate(-50%, calc(-50% - 5px));
}
.floating-navi dt::after {
	-webkit-transform: translate(-50%, calc(-50% + 5px));
	transform: translate(-50%, calc(-50% + 5px));
}
.floating-navi dt.close-button::before {
	-webkit-transform: translate(-50%, -50%) rotate(135deg);
	transform: translate(-50%, -50%) rotate(135deg);
}
.floating-navi dt.close-button::after {
	-webkit-transform: translate(-50%, -50%) rotate(-135deg);
	transform: translate(-50%, -50%) rotate(-135deg);
}
.floating-navi nav ul {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: end;
	justify-content: flex-end;
	gap: 40px;
	padding-top: 20px;
}

.fv-logo {
	width: calc(100% - 80px);
	max-width: 420px;
}
.fv-logo img:first-child {
	-webkit-filter: drop-shadow(0 0 5px #001400) drop-shadow(0 0 20px #001400);
	filter: drop-shadow(0 0 10px #001400) drop-shadow(0 0 40px #001400);
}
@media screen and (max-width: 1180px) {
	.floating-navi nav ul {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: end;
		justify-content: flex-end;
		gap: 20px;
		padding-top: 20px;
	}
}
@media screen and (max-width: 960px) {
	#floatingNavi {
		transition: unset;
	}
	#floatingNavi.scrolling {
		transition: unset;
		-webkit-transform: unset;
		transform: unset;
	}
	#siteLogo {
		transition: .4s ease-out .4s;
	}
	.scrolling #siteLogo {
		transition: .4s ease-out;
		-webkit-transform: translateY(calc(-100% - 20px));
		transform: translateY(calc(-100% - 20px));
	}
	.floating-navi nav {
		padding: 0;
	}
	.floating-navi dt {
		display: block;
	}
	.floating-navi dd {
		max-width: 250px;
		height: 100vh;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 20;
		overflow: hidden;
	}
	.floating-navi nav ul {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		flex-direction: column;
		-webkit-box-pack: start;
		justify-content: flex-start;
		background-color: #000;
		height: 100%;
		padding: 60px 20px 20px;
		transition: .4s ease-out;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	.floating-navi nav dd.open-menu ul {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	.floating-navi .text-glow > img {
		position: relative;
		top: 0;
		left: 0;
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	.floating-navi .text-glow figure {
		display: none;
	}
}
@media screen and (max-width: 640px) {
	#siteLogo {
		width: 120px;
		height: 80px;
	}
	#siteLogo a img {
		width: 87px;
	}
}