@charset "UTF-8";

/*=========================================================
	Logo
=========================================================*/
.Logo{
	position:fixed;
	top:1.75rem;
	left:3.75rem;
	z-index:500;
}

.Logo-link{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:5;
}

.Logo-text{
	display:block;
	width:5.938rem;
	height:3.938rem;
	background-image:url(../../images/logo/logo.svg);
	background-size:100% 100%;
}

.admin-bar .Logo{
	top:calc(1.75rem + 32px);
}

@media screen and (max-width:1024px) and (min-width:768px){
	.Logo{
		left:2rem;
		top:1rem;
	}
	
	.admin-bar .Logo{
		top:calc(1rem + 32px);
	}
	
	.Logo-text{
		width: 4.5rem;
		height: 2.98rem;
	}
}

@media screen and (max-width:782px) and (min-width:1px){
	.admin-bar .Logo{
		top:calc(1rem + 46px);
	}
}

@media screen and (max-width:767px) and (min-width:1px){
	.Logo{
		left:1.25rem;
		top:1rem;
		transition-duration: 0.3s;
		transition-delay: 0s;
		transition-timing-function: var(--ease-out-lerp);
	}
	
	.Logo-text{
		width: 3.5rem;
		height: 2.32rem;
	}
	
	.nav-On .Logo{
		transform:scale(0);
	}
}

/*=========================================================
	Navi
=========================================================*/
.site-header{
	position:fixed;
	top:1.75rem;
	right:3.75rem;
	z-index:500;
}

.HeaderInfo{
	position:relative;
}

.admin-bar .site-header{
	top:calc(1.75rem + 32px);
}

.site-header .menu-item a{
	color: #fff;
	text-align: right;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	opacity:0.8;
	display:block;
	transition-property: opacity;
    transition-duration: 0.2s;
	transition-timing-function: var(--ease-out-lerp);
}

.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:1rem;
	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;
}

@media screen and (min-width:1025px){
	.site-header .menu-item[class*="current"]{
		text-align:right;
	}
	
	.site-header .menu-item[class*="current"] a{
		background-color: #fff;
        padding-left: 8px;
        color: #000;
		opacity:1;
		position:relative;
		display:inline-block;
	}
	
	.site-header .menu-item[class*="current"] a:after{
		content:"";
		width:4rem;
		height:100%;
		position:absolute;
		top:0;
		right:-4rem;
		background-color:#fff;
	}
	
	.site-header .menu-item a:hover{
		opacity:1;
	}
	
	.site-header{
		mix-blend-mode: difference;
	}
}

@media screen and (max-width:1024px) and (min-width:768px){
	.site-header{
		right:2rem;
		top:1rem;
		mix-blend-mode: difference;
	}
	
	.admin-bar .site-header{
		top:calc(1rem + 32px);
	}
	
	.site-header .menu-item a{
		font-size:1.125rem;
	}
	
	.site-header .menu-item[class*="current"]{
		text-align:right;
	}
	
	.site-header .menu-item[class*="current"] a{
		background-color: #fff;
        padding-left: 8px;
        color: #000;
		opacity:1;
		position:relative;
		display:inline-block;
	}
	
	.site-header .menu-item[class*="current"] a:after{
		content:"";
		width:4rem;
		height:100%;
		position:absolute;
		top:0;
		right:-4rem;
		background-color:#fff;
	}
}

@media screen and (max-width:782px) and (min-width:1px){
	.admin-bar .site-header{
		top:calc(1rem + 46px);
	}
}

@media screen and (max-width:767px) and (min-width:1px){
	.site-header{
		left:0;
		right:0;
		top:0;
		overflow: hidden;
		overflow-y: auto;
		height: 100vh;
		height: 100svh;
		background-color:#266DCA;
		padding:5.5rem 1.25rem 2.5rem;
		transform: translateY(130%);
		transition-property: transform;
		transition-duration: 0.3s;
		transition-timing-function: var(--ease-out-lerp);
	}
	
	.admin-bar .site-header{
		top:46px;
		height: calc(100vh - 46px);
		height: calc(100svh - 46px);
	}
	
	.nav-On .site-header{
		transform: translateY(0);
	}
	
	.site-header .menu-item{
		border-bottom:solid 1px rgba(255,255,255,0.2);
		margin-right:-1.25rem;
		font-size:0;
		line-height:0;
	}
	
	.site-header .menu-item:last-child{
		border-bottom:none;
	}

	.site-header .menu-item a{
		display:block;
		font-size:1.8rem;
		line-height:1em;
		color:#fff;
		font-weight:900;
		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;
	}
	
	.site-header .menu-item[class*="current"] a{
		text-decoration:none;
		opacity:1;
	}
	
	.MoHeaderMenu-close{
		display:block;
	}
}

/*=========================================================
	MobileMenu
=========================================================*/
.MobileMenu{
	width: 1.34213rem;
	height: 0.98706rem;
	background-image:url(../../images/icon/header_menu.svg);
	background-size:100% 100%;
	position:fixed;
	top:1.55rem;
	right:1.25rem;
	mix-blend-mode: difference;
	z-index:500;
	display:none;
}

.admin-bar .MobileMenu{
	top:calc(1.55rem + 46px);
}

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