@charset "UTF-8";

/* ============================================================
   Header
==============================================================*/
.site-header{
	background-image:url(../../images/bg/header_bg.jpg);
	background-size: cover !important;
    background-position: left top !important;
	padding:1.188rem 0;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}

.HeaderFlex{
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.home .site-header:not(.is-View){
	background-image:none;
}

body:not(.home) .SiteNav{
	display:none;
}

@media screen and (min-width: 1025px) {
	.home .site-header{
		transition-property: padding;
		transition-duration: 0.2s;
		transition-timing-function: var(--custom-easing);
	}

	.home .site-header:not(.is-View){
		padding:2.188rem 0;
	}
}

/* ============================================================
   Logo
==============================================================*/
.Logo-link{
	display:block;
	width:3.625rem;
	height:2rem;
	background-image:url(../../images/logo/logo.png);
	background-size:100% 100%;
}

@media screen and (min-width: 1025px) {
	.Logo-link{
		transition-property: width, height;
		transition-duration: 0.2s;
		transition-timing-function: var(--custom-easing);
	}
	
	.home .site-header:not(.is-View) .Logo-link{
		width:4.25rem;
		height:2.375rem;
	}
}

/* ============================================================
   SiteNav
==============================================================*/
.SiteNav-inner{
	font-size:0;
	line-height:0;
}

.SiteNav-item{
	display:inline-block;
}

.SiteNav-item + .SiteNav-item{
	margin-left:3.125rem;
}

.SiteNav-link{
	display:block;
	font-size:1rem;
	line-height:1.2em;
	color:#fff;
	font-weight:400;
	padding:0.375rem 0;
	position:relative;
	white-space:nowrap;
}

.SiteNav-link:after{
	content:"";
	width:38px;
	height:2px;
	background-color:#fff;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%) scaleX(0);
	transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: var(--custom-easing);
}

.SiteNav-link.is-Current:after{
	transform:translateX(-50%) scaleX(1);
}

/* Responesive*/
@media screen and (min-width: 1025px) {
	.home .site-header:not(.is-View) .SiteNav-link{
		font-size:1.125rem;
	}
	
	.SiteNav-link{
		transition-property: font-size;
		transition-duration: 0.2s;
		transition-timing-function: var(--custom-easing);
	}
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
	.SiteNav{
		padding-right:1.25rem;
	}
}

@media screen and (max-width: 767px) and (min-width: 1px) {
	.site-header{
		padding:0.9rem 0;
	}
	
	.Logo-link{
		width: 3rem;
		height: 1.655rem;
	}
	
	.SiteNav{
		display:none;
	}
}