@charset	"utf-8";
#g-nav.panelactive{
position:fixed;
z-index:	999;
top:	0;
width:100%;
height:	100vh;
}

.circle-bg{
position:	fixed;
z-index:3;
width:	100px;
height:	100px;
border-radius:	50%;
background:	rgba(4,34,117,0.8);
transform:	scale(0);
left:-50px;
top:-50px;
transition:	all	.6s;
}

.circle-bg.circleactive{
transform:	scale(50);
}

#g-nav-list{
display:	none;
position:	fixed;
z-index:	999;
width:	100%;
height:	100vh;
overflow:	auto;
-webkit-overflow-scrolling:	touch;
}

#g-nav.panelactive	#g-nav-list{
display:	block;
}

/*ナビゲーション*/
#g-nav	ul	{
opacity:	0;
position:	absolute;
z-index:	999;
top:50%;
left:50%;
transform:	translate(-50%,-50%);
}

#g-nav.panelactive	ul	{
opacity:1;
}

#g-nav.panelactive	ul	li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes	gnaviAnime{
0%	{
opacity:	0;
}
100%	{
opacity:	1;
}
}

/*リストのレイアウト設定*/
#g-nav	li{
text-align:	center;
list-style:	none;
}

#g-nav	li	a{
color:	#fff;
text-decoration:	none;
padding:10px;
display:	block;
text-transform:	uppercase;
letter-spacing:	0.1em;
font-weight:	bold;
}


/*=========	ボタンのためのCSS	===============*/
.openbtn4{
position:fixed;
top:0;
right:	3px;
z-index:	9999;/*ボタンを最前面に*/
cursor:	pointer;
width:	50px;
height:50px;
}

/*×に変化*/
.openbtn4	span{
display:	inline-block;
transition:	all	.4s;
position:	absolute;
left:	14px;
height:	3px;
border-radius:	2px;
background-color:	#666;
width:	45%;
}

.openbtn4	span:nth-of-type(1)	{top:15px;}
.openbtn4	span:nth-of-type(2)	{top:23px;}
.openbtn4	span:nth-of-type(3)	{top:31px;}
.openbtn4.active	span:nth-of-type(1)	{
top:	18px;
left:	18px;
transform:	translateY(6px)	rotate(-45deg);
width:	30%;
}

.openbtn4.active	span:nth-of-type(2)	{opacity:	0;}
.openbtn4.active	span:nth-of-type(3){
top:	30px;
left:	18px;
transform:	translateY(-6px)	rotate(45deg);
width:	30%;
}

#g-nav{
position:fixed;
z-index:	999;
top:0;
left:	-120%;
width:100%;
height:	100vh;
/* background-image: url(../img/logo.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: 200px; */
background-color: rgb(255,255,255,0.9);
transition:	all	0.6s;
}

#g-nav.panelactive{
left:	0;
}


#g-nav.panelactive{
position:	fixed;
z-index:	999;
width:100%;
height:	100vh;
overflow:	auto;
-webkit-overflow-scrolling:	touch;
}

#g-nav	ul	{
position:	absolute;
z-index:	999;
top:50%;
left:50%;
transform:	translate(-50%,-50%);
}

#g-nav	li{
list-style:	none;
text-align:	center;
}

#g-nav	li	a{
color:	#111;
text-decoration:	none;
padding:10px 0;
display:	block;
text-transform:	uppercase;
letter-spacing:	0.1em;
font-weight:	bold;
}

/*	1280px〜
------------------------------	*/
@media	screen	and	(min-width:	1280px)	{
}