@charset "utf-8";

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

#g-nav{
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position: fixed;
	z-index: 9999;
	/*ナビのスタート位置と形状*/
	top: 0;
	right: -100%;
	width: 370px;
	height: 730px;/*ナビの高さ*/
	background: #fff;
	/*動き*/
	transition: all 0.6s;
	padding-left: 150px;
	padding-top: 380px
}

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


/*ナビゲーション*/
#g-nav ul {
	/*ナビゲーション天地中央揃え*/
	position: absolute;

	transform: translate(-50%,-50%);
	width: 165px;
	text-align: left;
}

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

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

#g-nav li a{
  text-decoration: none;
  display: block;
  font: 16px Baskerville;  
letter-spacing: 2.4px;
color: #000000;
opacity: 1;
position: relative;
z-index: 9999;/*ボタンを最前面に*/
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
    z-index: 99999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  cursor: pointer;
    width: 50px;
    height:50px;
}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0px;
    height: 2px;
    border-radius: 0px;
  background-color: #fff;
    width: 35px;
  }

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

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

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

.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 0px;
    transform: translateY(6px) rotate(-36deg);
    width: 45px;
	background-color: #000;
}

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

.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 0px;
    transform: translateY(-6px) rotate(36deg);
    width: 45px;
	background-color: #000;
}