@charset "UTF-8";

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

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

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



/*ナビゲーション*/
#g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

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

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

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

#g-nav li a{
  color: #373c38;
  text-decoration: none;
  padding:10px;
  display: block;
  letter-spacing: 0.1em;
  
}

/*========= ボタンのためのCSS ===============*/