@charset "utf-8";
.header-about {
	position: fixed;
	top: 0;
	width: 100%;
	height: 6.875rem;
	background-color: #CDFFF1;
	display: flex;
	justify-content: center;
	z-index: 997;
}
.header-inner {
	width: 100%;
	margin: 0 clamp(1rem, -16.5rem + 28vw, 9.75rem);
	display: flex;
	align-items: center;
}
.header-main-nav {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-main-nav a {
	color: var(--text);
}
.header-main-menu {
	margin: 0 auto;
	gap: clamp(2rem, -3.3125rem + 8.5vw, 4.125rem);
}
.header-main-menu li {
	position: relative;
}
.header-main-menu li::before {
	position: absolute;
	content: "";
	width: 12px;
	height: 12px;
	top: 55%;
	left: calc(-1 * clamp(2rem, -3.3125rem + 8.5vw, 4.125rem) / 2 - 6px);
	transform: translateY(-50%) rotate(45deg);
	-webkit-clip-path: polygon(50% 0%, 62% 35%, 100% 50%, 62% 62%, 50% 100%, 35% 62%, 0% 50%, 35% 35%);
	clip-path: polygon(50% 0%, 62% 35%, 100% 50%, 62% 62%, 50% 100%, 35% 62%, 0% 50%, 35% 35%);
	background: var(--title);
}
.header-main-menu .nav-merit::before,
.header-main-menu .nav-company::before {
	content: none;
}
.header-main-nav .hours-nav {
	display: none;
}
/* ======================タブレット版====================== */
@media(max-width:999px) {
	.header-main-menu {
		margin: 0 clamp(0rem, -14.2561rem + 27.3171vw, 2.8rem);
		flex-wrap: wrap;
		gap: .75rem 0;
	}
	.header-main-menu li {
		text-align: center;
		flex: 1 1 50%;
	}
	.header-main-menu .nav-service {
		order: 3;
		flex: 0 0 92%;
	}
	.header-main-menu .nav-voices::before {
		left: 0;
	}
	.header-main-menu .nav-service::before {
		left: clamp(1rem, -4.0915rem + 9.7561vw, 2rem);
	}
}
@media(max-width:834px) {
	.header-main-menu .u-flex-col-sp {
		flex-direction: column;
	}
	.header-inner {
		margin: 0 2.5rem;
		justify-content: space-between;
	}
	.header-about {
		height: clamp(5.75rem, -4.2946rem + 21.4286vw, 6.875rem);
	}
	.header-inner #humburger {
		width: 1.875rem;
		height: 1.875rem;
		margin: auto 0;
		display: inline-block;
		position: relative;
		background-color: transparent;
		cursor: pointer;
		border: none;
		z-index: 999;
	}
	.header-inner #humburger span {
		width: 1.875rem;
		height: 1px;
		top: 50%;
		left: 50%;
		position: absolute;
		background-color: var(--text);
	}
	.header-inner #humburger span:nth-of-type(1) {
		transform: translate(-50%, calc(-50% - 0.8rem));
		transition: transform 0.3s ease;
	}
	.header-inner #humburger span:nth-of-type(2) {
		transform: translate(-50%, -50%);
		transition: opacity 0.3s ease;
	}
	.header-inner #humburger span:nth-of-type(3) {
		transform: translate(-50%, calc(-50% + 0.8rem));
		transition: transform 0.3s ease;
	}
	/* 展開時 */
	.header-inner #humburger.close span:nth-of-type(1) {
		width: 2.651875rem;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.header-inner #humburger.close span:nth-of-type(2) {
		opacity: 0;
	}
	.header-inner #humburger.close span:nth-of-type(3) {
		width: 2.651875rem;
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	.header-main-nav {
		position: absolute;
		width: 100%;
		top: clamp(5.75rem, -4.2946rem + 21.4286vw, 6.875rem);
		right: 0;
		padding-top: 2rem;
		background-color: #CDFFF1;
		opacity: 0;
		overflow: hidden;
		overflow-y: auto;
		z-index: 999;
		transform: scaleY(0.95);
		transform-origin: top center;
		transition: max-height 0.5s ease, opacity 0.5s ease;
		pointer-events: none;
		flex-direction: column;
	}
	.header-main-nav.panelactive {
		opacity: 1;
		pointer-events: auto;
	}
	.header-main-menu {
		width: 100%;
		padding: 0 clamp(2rem, -3.1282rem + 13.6752vw, 4rem);
		gap: 2.5rem 0;
	}
	.header-main-menu li {
		flex: 1 1 30%;
	}
	.header-main-nav .hours-nav {
		display: flex;
		margin: 4.8125rem auto 2.5rem;
	}
	.header-contact-button {
		display: inline-block;
		max-width: 29rem;
		margin: 0 3.75rem 3.75rem;
		transition: transform 0.4s ease-out;
		will-change: transform;
	}
	.header-contact-button:hover {
		-webkit-animation: bounceOnce 0.8s cubic-bezier(0.33, 1, 0.68, 1);
		animation: bounceOnce 0.8s cubic-bezier(0.33, 1, 0.68, 1);
	}
}
/* ページ内リンクの並び順変更 */
@media (max-width: 834px) and (min-width: 650px) {
	.header-main-menu .nav-service {
		order: unset;
		flex: 1 1 30%;
	}
	.header-main-menu .nav-company, .header-main-menu .nav-privacy {
		display: flex;
		align-items: center;
	}
	.header-main-menu .nav-company {
		margin-left: 4rem;
	}
	.header-main-menu .nav-privacy {
		margin-right: 4rem;
	}
	.header-main-menu .nav-voices::before {
		left: .7rem;
	}
	.header-main-menu .nav-service::before {
		left: calc(-1 * clamp(2rem, -3.3125rem + 8.5vw, 4.125rem) / 2);
	}
}
/* ======================SP版====================== */
@media(max-width:650px) {
	.header-inner {
		margin: 0 1.5625rem;
	}
	.header-main-menu {
		max-width: 28.125rem;
		padding: 0 3rem;
	}
	.header-main-menu li {
		display: flex;
		flex: 1 1 50%;
		flex-direction: row;
		align-items: center;
	}
	.header-main-menu .nav-merit, .header-main-menu .nav-voices {
		justify-content: flex-start;
	}
	.header-main-menu .nav-service, .header-main-menu .nav-company {
		justify-content: flex-end;
	}
	.header-main-menu .nav-merit::before,
	.header-main-menu .nav-voices::before,
	.header-main-menu .nav-privacy::before {
		content: none;
	}
	.header-main-menu .nav-service {
		order: unset;
		flex: 1 1 50%;
	}
	.header-main-menu .nav-voices {
		padding-left: 15%;
	}
	.header-main-menu .nav-privacy {
		flex: 1 1 100%;
		justify-content: center;
	}
	.header-main-menu .nav-service::before {
		left: -1.8rem;
	}
	.header-main-menu .nav-company::before {
		content: "";
		position: absolute;
		width: 12px;
		height: 12px;
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(45deg);
		-webkit-clip-path: polygon(50% 0%, 62% 35%, 100% 50%, 62% 62%, 50% 100%, 35% 62%, 0% 50%, 35% 35%);
		clip-path: polygon(50% 0%, 62% 35%, 100% 50%, 62% 62%, 50% 100%, 35% 62%, 0% 50%, 35% 35%);
		background: var(--title);
	}
	.header-main-nav .hours-nav {
		display: flex;
		margin: 2.5rem .5rem 1rem;
	}
	.header-contact-button {
		margin: 0 1.125rem 3.75rem;
	}
}