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


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
  z-index: -1;
  opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
  top:0;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:#ffffff;
    /*動き*/
  transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
  opacity: 1;
  z-index:999;
}

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

/*ナビゲーション*/
#g-nav .listw {
    display: none;
    /*ナビゲーション天地中央揃え*/
   
    z-index: 999;

}

#g-nav.panelactive .listw {
    display: block;
	padding:20px;
}

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

#g-nav li{
  list-style: none;

}


/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  cursor: pointer;
    width: 100px;
    height:100px;
	background: #373636;
	border-radius: 100px;
	animation: bgchange 2s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
	

}

@keyframes bgchange{
      0%   {background:#373636;}/*変化させたい色*/
     
      50%  {background:#989898;}/*変化させたい色*/
      100% {background:#373636;}/*変化させたい色*/
 }
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 26px;
    height: 3px;
    border-radius: 2px;
  background-color: #000000;
    width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:35px; 
}

.openbtn1 span:nth-of-type(2) {
  top:43px;
}

.openbtn1 span:nth-of-type(3) {
  top:51px;
}

.openbtn1 span:nth-of-type(4) {
	text-align: center;
	font-size:0.8rem;
	background:none;
  top:59px;
color:#ffffff;
}

.openbtn1 span:nth-of-type(4):after {
	content: "MENU";}

.openbtn1.active span:nth-of-type(1) {
    top: 28px;
    left: 28px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 40px;
    left: 28px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}

.openbtn1.active span:nth-of-type(4){
  display:none;
}



.openbtn1.active{
  background:none;
	animation:none;
}