:root{
	--admin-bar-height:0px;
	--header-top-height:72px;
	--header-nav-height:44px;

}

.header{

	position:fixed;
	width:100%;
	background:#fff;
	z-index:1000;
	transition:
		height .35s ease,
		box-shadow .35s ease,
		background .35s ease;

}

body{

	padding-top:0;

}

.main{
	padding-top:
	calc(
		var(--header-top-height)
		+
		var(--header-nav-height)
	);
}

/* =========================================================

Admin Bar

========================================================= */

body.admin-bar{
	--admin-bar-height:32px;
}

body.admin-bar .header{
	top:var(--admin-bar-height);
}

body.admin-bar .header.scrolled{
	top:var(--admin-bar-height);
}

body.admin-bar .main{

	padding-top:
	calc(
		var(--header-top-height)
		+
		var(--header-nav-height)
		+
		var(--admin-bar-height)
	);

}

@media(max-width:782px){

	body.admin-bar{
		--admin-bar-height:46px;
	}
	
	body.admin-bar .header.scrolled{
		top:0;
	}
	.header.scrolled .logo img{height: 21px;}
	

}

.header-top{

	max-width:1200px;
	margin:auto;
	padding:0 30px;
	height:var(--header-top-height);
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	transition:
		height .35s ease,
		padding .35s ease;
}

.accent{
color:var(--accent);
}

.grey{
color:var(--grey);
}
.header-top-left{

	display:flex;

	gap:28px;

	font-size:11px;

	letter-spacing:.18em;

}

.header-top-right{

	display:flex;

	justify-content:flex-end;

	align-items:center;

	gap:24px;

	font-size:11px;

	letter-spacing:.18em;

}

.header-top-left a,
.header-top-right a{

	position:relative;
	display:inline-block;
	transition:opacity .3s ease;
}

.header-top-left a::after,
.header-top-right a::after{

	content:"";
	position:absolute;
	left:50%;
	bottom:-4px;
	width:0;
	height:1px;
	background:var(--accent);
	transform:translateX(-50%);
	transition:width .3s ease;

}

.header-top-left a:hover::after,
.header-top-right a:hover::after{

	width:100%;
	opacity:.75;
}

.header-logo{

	display:flex;
	justify-content:center;
	transition:.35s ease;
}

.logo img{

	height:32px;
	width:auto;
	transition:.35s ease;
}

.header-nav{

	height:var(--header-nav-height);
	border-top:1px solid rgba(0,0,0,.05);
	transition:.35s ease;
}

/*header.scrolled
---------------------------------------------------------------------------*/
.header.scrolled{

	box-shadow:
	0 6px 20px rgba(0,0,0,.06);

}

.header.scrolled .header-top{

	height:56px;

}

.header.scrolled .logo img{

	height:28px;

}

.header.scrolled .header-top-left,
.header.scrolled .header-top-right{

	font-size:10px;

}

.header.scrolled .header-nav{

	height:40px;

}

/*lang-switch
---------------------------------------------------------------------------*/

.lang-switch{

	display:flex;
	align-items:center;
	gap:10px;

}

.lang-switch a,
.sp-lang a{

	position:relative;
	display:inline-block;

	font-size:11px;
	letter-spacing:.18em;
}

.lang-switch a::after,
.sp-lang a::after{

	content:"";

	position:absolute;

	left:50%;
	bottom:-4px;

	width:0;
	height:1px;

	background:var(--accent);

	transform:translateX(-50%);

	transition:.3s ease;
}

.lang-switch a:hover::after,
.sp-lang a:hover::after{

	width:18px;
}

.lang-switch a.current,
.sp-lang a.current{

	color:var(--accent);
}

.lang-switch a.current::after,
.sp-lang a.current::after{

	width:18px;
}

/*=========================
SP
=========================*/

@media(max-width:768px){

	.logo img{

		height:25px;
		width:auto;
		transition:.35s ease;
	}

	.header.scrolled .logo img{height: 20px;}
}