/*========= ナビゲーションのためのCSS ===============*/
@media screen and (max-width: 767px) {
  #g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/

    position: fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh; /*ナビの高さ*/
    background: #cbd1b5;
    /*動き*/
    transition: all 0.6s;
  }

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

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

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

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

  #g-nav li {
    display: block;
    list-style: none;
    text-align: center;
    background-color: #eaece4;

    font-size: 20px;

    margin: 10px;
  }

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