@charset "UTF-8";

/*=========================================================
	Header
=========================================================*/
.site-header{
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition-property: transform, background-color;
	transition-duration: 0.3s;
	background-color:#063171;
    z-index: 1000;
}

.home .site:not([class*="nav-"]) .site-header{
	background-color:transparent;
}

/*조건값*/
.nav-Up .site-header{
	transform:translateY(calc(-100% - 1px));
}

.HeaderInfo{
	padding:1.08rem 0;
	display:flex;
	width:100%;
	justify-content:space-between;
	align-items:center;
	position:relative;
}

.site-header .site-container{
	max-width:100%;
}

.Logo{
	position:relative;
	z-index:110;
}

.Logo-link{
	width: 18rem;
	height: 2.88rem;
	display:block;
	background-image:url(../../images/logo/logo.svg);
	background-size:100% 100%;
	transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/*responsive*/
@media screen and (min-width:768px){
	/*navi*/
	.SiteMenu-nav .menu-wrapper{
		display:flex;
		align-items:center;
	}
	
	.SiteMenu-nav .menu-wrapper a{
		display:block;
		position:relative;
		font-size:1.188rem;
		line-height:1.4;
		color:#fff;
		font-weight:500;
	}
	
	.SiteMenu-nav .menu-wrapper a:before{
		content:"";
		width:0.375rem;
		height:0.375rem;
		border-radius:100% 100%;
		background-color:#00AEEF;
		position:absolute;
		top:-0.156rem;
		left:-0.5rem;
		opacity:0;
	}
	
	.SiteMenu-nav .menu-wrapper .menu-item + .menu-item{
		margin-left:2.5rem;
	}
	
	.SiteMenu-nav .menu-wrapper .menu-item[class*="current"] a{
		opacity:1;
	}
	
	.SiteMenu-nav .menu-wrapper .menu-item[class*="current"] a:before{
		opacity:1;
	}
	
	.is-desktop .SiteMenu-nav .menu-wrapper a:hover{
		opacity:1;
	}
}

@media screen and (max-width:1024px) and (min-width:768px){
	/*Logo*/
	.Logo-link{
		width: 14rem;
		height: 2.24rem;
	}
	
	/*navi*/
	.SiteMenu-nav .menu-wrapper a{
		font-size:1rem;
	}
	
	.SiteMenu-nav .menu-wrapper .menu-item + .menu-item{
		margin-left:1.8rem;
	}
	
	.SiteMenu-nav .menu-wrapper a:before{
		width:0.313rem;
		height:0.313rem;
	}
}

@media screen and (max-width:767px) and (min-width:1px){
	.HeaderInfo{
		padding:1.125rem 0;
	}
	
	/*Logo*/
	.Logo-link{
		width: 10.25rem;
		height: 1.64rem;
	}
	
	/*Navi*/
	.SiteMenu-nav{
		position:absolute;
		top:0;
		left:-1.25rem;
		right:-1.25rem;
		height:100vh;
		height:100svh;
		background-color:#063171;
		overflow: hidden;
		overflow-y: auto;
		padding:5.5rem 1.25rem 2.5rem;
		transform: translateY(-130%);
		transition-property: transform;
		transition-duration: 0.6s;
		transition-timing-function: var(--ease-out-lerp);
		z-index:100;
	}
	
	.nav-On .SiteMenu-nav{
		transform: translateY(0);
	}
	
	.SiteMenu-nav .menu-item{
		border-bottom:solid 1px rgba(255,255,255,0.2);
		padding:0 !important;
		font-size:0;
		line-height:0;
		margin-right:-1.25rem;
		transform:translateX(110%);
		transition-property: opacity, transform;
		transition-duration: 0.4s;
		transition-timing-function: var(--ease-out-lerp);
		transition-delay:0;
		opacity:0;
	}
	
	.nav-On .SiteMenu-nav .menu-item{
		opacity:1;
		transform:translateX(0);
		transition-delay:0.4s;
	}
	
	.SiteMenu-nav .menu-item:last-child{
		border-bottom:none;
	}

	.SiteMenu-nav .menu-item a{
		font-size:1.8rem;
		line-height:1em;
		color:#fff;
		font-weight:700;
		padding:1.5rem 0 0.65rem;
		text-align:right;
		padding-right:1.25rem;
		display:flex;
		justify-content:end;
		align-items:start;
		position:relative;
		opacity:0.3;
	}
	
	.SiteMenu-nav .menu-item[class*="current"] a{
		text-decoration:none;
		opacity:1;
	}
	
	.MoHeaderMenu-close{
		display:block;
	}
	
	.SiteMenu-nav .menu-wrapper{
		display:block;
		padding-left:0;
		margin:0;
	}
}

/*	MobileMenu
=========================================================*/
.MobileMenu{
	width: 1.34213rem;
	height: 0.98706rem;
	background-image:url(../../images/icon/header_menu.svg);
	background-size:100% 100%;
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	z-index:5;
	display:none;
}

.MoHeaderMenu-close{
	width: 2rem;
	height: 2rem;
	background-image:url(../../images/icon/mo_navi_close.svg);
	background-size:100% 100%;
	position:absolute;
	top:1.25rem;
	right:1rem;
	display:none;
	z-index:5;
}

.NaviLogo{
	position:absolute;
	top:0.65rem;
	left:1.25rem;
	transition-property: transform;
    transform: scale(0);
    transition-duration: 0.3s;
    transition-delay: 0s;
	transition-timing-function: var(--ease-out-lerp);
}

.nav-On .NaviLogo{
	transform:scale(1);
	transition-delay:0.2s;
}

/*responsive*/
@media screen and (max-width:767px) and (min-width:1px){
	.MobileMenu{
		display:block;
	}
	
	.MoHeaderMenu-close{
		display:block;
	}
}