@charset "utf-8";
/* # =================================================================
#### メニュー（PC用）
# ================================================================= */
.global-nav{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	background-color : #0A5774;
	padding : 22px 0;
}
.global-nav ul{
	position : relative;
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	gap : 50px;
	width : 100%;
	height : auto;
}
.global-nav ul li{
	position : relative;
	display : list-item;
	width : fit-content;
	height : auto;
}
.global-nav ul li a{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	line-height : 1;
	color : #FFF;
	font-size : var(--16px);
}
.global-nav ul li a:hover{
	
}

.global-nav.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}
/* # =================================================================
#### drawer button（SP用ハンバーガー）
# ================================================================= */
.drawer-hamburger{
	position : absolute;
	box-sizing : border-box;
	top : 0;
	right : 0;
	width : 60px;
	height : 60px;
	background-color : #0A5774;
	padding : 10px 15px;
	cursor : pointer;
	z-index : 1100;
	border : none;
}
.drawer-hamburger:hover{
	background-color : #0A5774;
}

/* ハンバーガー3本線 */
.drawer-hamburger-icon{
	position : relative;
	display : block;
	width : 30px;
	height : 3px;
	background-color : #FFF;
	transition : all 0.3s ease;
}
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after{
	content : "";
	position : absolute;
	left : 0;
	width : 30px;
	height : 3px;
	background-color : #FFF;
	transition : all 0.3s ease;
}
.drawer-hamburger-icon::before{ top : -11px; }
.drawer-hamburger-icon::after { top :  11px; }

/* 開閉時アニメーション */
.drawer-hamburger.is-active .drawer-hamburger-icon{
	background-color : transparent;
}
.drawer-hamburger.is-active .drawer-hamburger-icon::before{
	transform : translateY(11px) rotate(45deg);
}
.drawer-hamburger.is-active .drawer-hamburger-icon::after{
	transform : translateY(-11px) rotate(-45deg);
}
/* 開いた時 body スクロール禁止
.drawer-open{
	overflow : hidden;
}
/* # =================================================================
#### drawer-nav menu（SPメニュー本体）
# ================================================================= */
.drawer-nav{
	position : fixed;
	top : 0;
	right : 0;
	width : 100%;
	height : 100%;
	background : #000000CC;
	transform : translateY(-100%);
	transition : transform 0.3s ease;
	z-index : 1000;
}
.drawer-nav.is-active{
	transform : translateY(0);
}
.drawer-nav .nav_wrap{
	padding : 60px 20px;
}
.drawer-nav ul{
	list-style : none;
	text-align : center;
	margin : 0;
	padding : 45px 0 0;
}
.drawer-nav ul li{
	margin-bottom : 20px;
}
.drawer-nav ul li a{
	display : block;
	padding : 12px 10px;
	color : #FFF;
	font-size : var(--20px);
	text-decoration : none;
}
.drawer-nav ul li a:hover{

}
/**  **/
.menu-area{
	display : none;
}

/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1200px
# ================================================================= */
@media screen and (max-width: 1200px){

}/*** 1200px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.global-nav{
	display : none;
}
.menu-area{
	display : block;
}
}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){

}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/