#global-navi {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	height: 100vh;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .8) 82%, rgba(255, 255, 255, 0) 100%);
}
#global-navi .logo-pc {
	margin: 15px 15px 0;
	width: 240px;
}

#global-navi .logo-mobile {
	display: none;
	margin: 10px;
	width: calc(12vw + 180px);
}
#global-navi .navi-open {
	display: none;
	position: absolute;
	top: calc(2vw + 25px);
	right: 16px;
}
#global-navi .navi-open span {
	display: block;
	position: relative;
	content: '';
	height: 2px;
	width: 32px;
	margin: 6px 0;
	background-color: #11336f;
	border-radius: 4px;
	transition-duration: .5s;
}
#global-navi .logo a {
	display: inline-block;
}

#global-navi ul {
	padding: 0 2.5em;
	border: 0;
	font-size: 18px;
	list-style: none;
}
#global-navi li {
	padding: .15em 0;
	font-weight: bold;
}
#global-navi li.navi-title {
	margin: 1.5em 0 .5em 0;
	font-size: 16px;
	color: rgb(27, 65, 146);
}
#global-navi li a {
	display: block;
	color: rgb(123, 123, 123);
	transition-duration: .5s;
}
#global-navi li a:hover {
	color: rgb(75, 75, 75);
}
#global-navi ul,
.navi-contact {
	position: relative;
}
.navi-contact {
	font-size: 15px;
	font-weight: bold;
}
.navi-contact a {
	line-height: 56px;
	padding-left: 42px;
}
.navi-contact a::before {
	content: '';
	display: inline-block;
	position: absolute;
	left: -32px;
	width: 10px;
	border-radius: 0 100% 100% 0;
	border: 28px solid rgb(9, 39, 103);
}

#global-navi .banner-pc {
	display: none;
}
#global-navi .banner {
	display: none;
}

footer .banner {
		display: none;
}

@media(max-width: 800px) {

	#global-navi {
		position: absolute;
		height: auto;
		width: 100%;
		background-image: url('../../image/background/top.png');
		transition-duration: 1s;
	}
	#global-navi .logo {
		position: relative;
		z-index: 10;
	}
	#global-navi .logo-pc {
		display: none;
	}
	#global-navi .logo-mobile {
		display: block;
	}
	#global-navi .navi-open {
		display: block;
		z-index: 11;
	}
	
	#global-navi ul,
	#global-navi .navi-contact {
		position: absolute;
		top: -800px;
		margin: 0 14px;
		padding: 0;
		z-index: 9;
	}
	#global-navi li,
	#global-navi li.navi-title,
	#global-navi .navi-contact a {
		display: block;
		margin: 0;
		padding: .75em 1em;
		border-top: 1px solid  #ddd;
		font-size: 18px;
	}
	#global-navi li a {
		text-indent: 1em;
		color: #888;
	}
	#global-navi .navi-contact a {
		line-height: 1.75;
		color: white;
	}
	#global-navi .navi-contact a::before {
		display: none;
	}
	
	/** menu-open **/
	body.show-menu #global-navi {
		height: 100%;
		overflow: auto;
		background: white;
		transition-duration: 1s;
	}
	body.show-menu #global-navi .logo {
		background: white;
	}
	body.show-menu #global-navi .navi-open span:nth-child(1) { transform: rotate(45deg); top: .5em;}
	body.show-menu #global-navi .navi-open span:nth-child(2) { display: none; }
	body.show-menu #global-navi .navi-open span:nth-child(3) { transform: rotate(-45deg); }

	body.show-menu #global-navi ul,
	body.show-menu #global-navi .navi-contact {
		position: relative;
		top: 0;
		transition-duration: .75s;
	}
	body.show-menu #global-navi .navi-contact {
		margin: 0;
		background-color: #11336f;
		text-align: center;
	}
	
	footer .banner {
		margin-top:20px;
		display: block;
	}

}