@charset "UTF-8";
/* CSS Document */


body.active {
	height: 100%;
	overflow-y: scroll;
}
#g-nav{
	/* position:fixed;
	z-index: 999;
	top:0;
	right: -120%;
	width: 100%;
	height: 100vh;
	background:#FFF;
	transition: all 0.6s; */
	   position: fixed;
    z-index: 999;
    top: -120%;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
	/* right: 0; */
	    top: 0;
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
	position: fixed;
	z-index: 10; 
	width: 100%;
	height: 100vh;/*表示する高さ*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.g-nav-list_inner {
	position: absolute;
	z-index: 999;
	transform: translate(-50%);
	/* width: 90%; */
	width: 100%;
	max-width: 300px;
	padding: 30px 15px;
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
}
.accordion > li{
	padding: 20px 20px 20px 5px;
}
.accordion > li.accordion-item{
	padding: 0;
}
#g-nav li a{
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
	/* font-weight: 600; */
	color: #FFF;
}


/* custom */
 ul.accordion > li > a::after{
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: '\f105';
	color: #D43444;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	margin-left: 0.42em;
}
.g-nav-list_inner li{
	border-bottom: 1px solid #CCC;
	margin-bottom: 25px;
	padding-bottom: 15px;
}
.active.fixed .logo img {
    fill: #000000;
}
/* .g-nav{
	border-bottom: 1px solid #CCC;
	margin-bottom: 30px;
} */
/*========= ボタンのためのCSS ===============*/
.openbtn{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: end;
	row-gap: 6px;
	z-index: 9999;
}

/*×に変化*/	
.openbtn span:nth-of-type(1) ,
.openbtn span:nth-of-type(2),
.openbtn span:nth-of-type(3)  {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background-color: #ffffff;
	transition: transform 0.3s, opacity 0.3s;
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(1) {
	transform: translateY(8px) rotate(45deg);
}
.openbtn.active span:nth-of-type(3){
  transform: translateY(-8px) rotate(-45deg);
}

.border-b-none li{
	border-bottom: none;
}









@media (min-width: 768px) {
	.openbtn{
		display: none;
	}
}
@media (max-width: 767px){
	/* .openbtn span{
		right: 20px;
	}
	.openbtn span:nth-of-type(1) {
		top: 30px;
	}
	
	.openbtn span:nth-of-type(2) {
		top:34px;
	}
	
	.openbtn span:nth-of-type(3) {
		top:40px;
	}
	.openbtn.active span:nth-of-type(1) {
		top: 28px;
		left: 20px;
		width: 30px;
	}
	.openbtn.active span:nth-of-type(3){
		top: 40px;
		left: 20px;
		width: 30px;
	}
	 */

}
@media (min-width: 992px){

}

@media (max-width: 575px){
#g-nav{

	width:100%;

}



	#g-nav.panelactive #g-nav-list{
		width: 100%;
	}
}