@charset "utf-8";

.globalmenu a,
.main-header a {
	color: inherit;
}

/* グローバルメニュー */
.globalmenu {
	display: flex;
	align-items: center;
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	padding-left: max(80px, 5vw);
	z-index: 9;
	overflow-y: hidden;
	transition: 0.3s ease-in-out;
	transform: translateX(-10%);
	opacity: 0;
	pointer-events: none;
}
.globalmenu.is-active {
	transform: translateX(0%);
	opacity: 1;
	pointer-events: auto;
}

.gmenu-company {
	width: 50%;
	height: 100%;
	padding: 10%;
	background-color: var(--main-color);
	color: #fff;
}

.gmenu-companyname {
	font-size: min(60px, 5vw);
	max-width: 250px;
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

.gmenu-companysub {
	font-size: clamp(14px, 20px, 1vw);
	margin-top: 1em;
}

.gmenu-location {
	font-size: clamp(14px, 20px, 1vw);
	position: relative;
	padding-top: 40px;
	margin-top: 40px;
}

.gmenu-location::before {
	position: absolute;
	content: "";
	width: 10%;
	min-width: 80px;
	height: 4px;
	background-color: #fff;
	top: 0;
	left: 0;
}

.gmenu-link {
	width: 50%;
	height: 100%;
	padding: 10%;
	background-color: #fff;
}

.gmenu-list {
	line-height: 2.2;
}

.gmenu-anchor {
	font-size: min(60px, 5vw);
}

.header-wrapper-sp {
	display: none;
}

.fa-brands {
	width: 1.6vw;
	font-size: 1.6vw;
	height: 1.6vw;
}

.hamburger-menu {
	display: flex;
	width: 100%;
	height: 100%;
}

.hamburger-menuline {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	cursor: pointer;
}

.hamburger-menuline::after {
	width: 50px;
	height: 2px;
	background-color: #000;
	content: "";
	display: block;
	position: absolute;
	transform: translateX(5px) rotate(90deg);
	animation: hamburger-Leave-2 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

.hamburger-menuline::before {
	width: 50px;
	height: 2px;
	background-color: #000;
	content: "";
	display: block;
	position: absolute;
	transform: translateX(-5px) rotate(90deg);
	transition: 1s;
	animation: hamburger-Leave-1 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

.hamburger-menu:hover .hamburger-menuline::after {
	background-color: black;
	animation: hamburger-Hover-2 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

.hamburger-menu:hover .hamburger-menuline:before {
	animation: hamburger-Hover-1 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

@keyframes hamburger-Hover-1 {
	0% {
		transform: translateX(-5px) rotate(90deg);
		width: 50px;
	}
	25% {
		transform: translateX(0) rotate(90deg);
		width: 50px;
	}
	to {
		transform: translateY(10px) rotate(305deg);
		width: 25px;
	}
}

@keyframes hamburger-Leave-1 {
	0% {
		transform: translateY(10px) rotate(305deg);
		width: 25px;
	}
	25% {
		transform: translateX(0) rotate(90deg);
		width: 50px;
	}
	to {
		transform: translateX(-5px) rotate(90deg);
		width: 50px;
	}
}

@keyframes hamburger-Hover-2 {
	0% {
		transform: translateX(5px) rotate(90deg);
		width: 50px;
	}
	25% {
		transform: translateX(0) rotate(90deg);
		width: 50px;
	}
	to {
		transform: translateY(-10px) rotate(55deg);
		width: 25px;
	}
}

@keyframes hamburger-Leave-2 {
	0% {
		transform: translateY(-10px) rotate(55deg);
		width: 25px;
	}
	25% {
		transform: translateX(0) rotate(90deg);
		width: 50px;
	}
	to {
		transform: translateX(5px) rotate(90deg);
		width: 50px;
	}
}

.hamburger-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: max(80px, 5vw);
	border-right: 1px solid #000;
	height: 100%;
	z-index: 10;
}

.hamburger-sns {
	position: absolute;
	bottom: 8vw;
	left: 0;
	right: 0;
}
.hamburger-list {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 1.4vw;
}
.hamburger-item {
	width: -moz-fit-content;
	width: fit-content;
}
.hamburger-sns-link {
	display: inline-block;
	width: -moz-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: fit-content;
	font-size: 25px;
}

.header-wrapper {
	display: flex;
	padding: 100px 0px 0 5vw;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0 max(80px, 5vw);
}
.header-logoimage {
	width: 100%;
}
.header-logo {
	max-width: 250px;
	padding-left: 30px;
	height: 100%;
}
.gnav-list {
	display: flex;
	gap: 53px;
	padding-top: 44px;
	font-size: 1vw;
}
.gnav-anchor::after {
	content: "";
	width: 10px;
	height: 10px;
	display: block;
	background-color: var(--main-color);
	border-radius: 50px;
	margin: 0 auto;
	opacity: 0;
	transition: opacity 0.3s;
}
.gnav-anchor:hover::after {
	opacity: 1;
}

@media (hover: hover) {

}

@media screen and (max-width: 479px) {
	/* ヘッダー */
	.globalmenu {
		padding-left: 0;
		flex-direction: column;
	}
	.gmenu-company {
		width: 100%;
		height: auto;
		padding: 36% 10% 20%;
	}
	.gmenu-link {
		width: 100%;
	}
	.gmenu-companyname {
		font-size: min(30px, 7vw);
		max-width: 140px;
	}

	.gmenu-anchor {
		font-size: min(30px, 7vw);
	}
	.bg-line {
		width: 43.5vw!important;
		right: 7vw!important;
	}
	.hamburger-wrapper {
		display: none;
	}
	.main-header {
		display: none;
	}
	.header-wrapper-sp {
		display: flex;
		border-bottom: 1px solid #eee;
		z-index: 9999;
		position: relative;
	}

	.hamberger-wrapper-sp {
		width: 14vw;
		height: 14vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.hamberger-menuline-sp {
		width: 18px;
		height: 1px;
		background-color: black;
		display: block;
	}

	.hamberger-menuline-sp-top {
		width: 18px;
		height: 1px;
		background-color: #000;
		display: block;
		transform: translateY(5px);
	}

	.hamberger-menuline-sp-bottom {
		width: 18px;
		height: 1px;
		background-color: #000;
		display: block;
		transform: translateY(-5px);
	}
	.headerlogo-wrapper-sp {
		width: 72vw;
		height: 14vw;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.headerlogo-wrapper-sp img {
		max-width: 130px;
	}

	.headercontact-wrapper-sp {
		width: 14vw;
		height: 14vw;
		background-color: var(--main-color);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.headercontact-image {
		width: 80%;
	}
	.gmenu-list {
		line-height: 4;
		padding-left: 0;
	}
	.gmenu-anchor {
		font-size: 4vw;
	}
	.header-wrapper-sp {
		background-color: #fff;
	}
}