@charset "utf-8";

/* 〇〇ここからグランドナブ《共通》 */

/*●●ここからナビボタン（通常時）*/
.navi-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999; /*ボタンを最前面に*/

  cursor: pointer;

  width: 50px;
  height: 50px;

  background: black;
  border-radius: 10px;

  span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
    background-color: #ccc;
    width: 45%;
  }

  span:nth-of-type(1) {
    top: 15px;
  }

  span:nth-of-type(2) {
    top: 23px;
  }

  span:nth-of-type(3) {
    top: 31px;
  }
}
/*●ここまでナビボタン（通常時）*/

/*●●ここからナビボタン（クリック時）*/
.navi-btn.active {
  span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }

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

  span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }
}
/*●ここまでナビボタン（クリック時）*/

/*●●ここからナビボタン（クリック時）*/
.navi-btn.active {
  span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
  }

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

  span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
  }
}
/*●ここまでナビボタン（クリック時）*/

/* ●●ここからナビメニューリスト背景《スマホ》 */
.navinemu-sp-bg {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;

  /*丸の形*/
  width: 100px;
  height: 100px;
  border-radius: 50%;

  /*丸のスタート位置と形状*/
  transform: scale(0); /*scaleをはじめは0に*/
  top: calc(50% - 50px); /*50%から円の半径を引いた値*/
  left: calc(50% - 50px); /*50%から円の半径を引いた値*/

  transition: all 0.6s; /*0.6秒かけてアニメーション*/
}

.navinemu-sp-bg.active {
  transform: scale(12); /*クラスが付与されたらscaleを拡大*/
}
/* ●ここまでナビメニューリスト背景《スマホ》 */

/* ●●ここからナビメニューリスト《共通》 */
.ground-nav {
  ul {
    padding: 0 20px;

    li {
      font-size: 3vh;
      margin-top: 2.5vh;
      text-align: center;
      list-style: none;
      letter-spacing: 0.1em;
      a {
        color: #fff;
        font-weight: 300;

        text-decoration: none;
      }
    }
  }
}
/* ●ここまでナビメニューリスト《共通》 */

/* 〇ここまでグランドナブ《共通》 */

/* 〇〇ここまでグランドナブ《スマホ》 */
@media screen and (max-width: 800px) {
  .navi-btn {
    display: block;
  }

  /* ●●ここからナビメニューリスト《スマホ》（通常時） */
  .ground-nav {
    /*ナビゲーションの縦スクロール*/

    display: none; /*はじめは表示なし*/

    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;

    width: 100%;
    height: 100vh;

    overflow: auto;
    -webkit-overflow-scrolling: touch;

    ul {
      opacity: 0; /*はじめは透過0*/

      /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
      position: absolute;
      z-index: 999;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      li {
        a {
          padding: 10px;
          display: block;
          text-transform: uppercase;
        }
      }
    }
  }
  /* ●ここまでナビメニューリスト《スマホ》（通常時） */

  /* ●●ここからナビメニューリスト《スマホ》（クリック時） */
  .ground-nav.active {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: 999;
    top: 0;

    width: 100%;
    height: 100vh;

    display: block; /*クラスが付与されたら出現*/

    /* ●●ここから背景が出現後にナビメニューリストを表示 */
    ul {
      opacity: 1;

      /* ●●ここから背景が出現後にliを表示させる*/
      li {
        animation-name: gnaviAnime;
        animation-duration: 1s;
        animation-delay: 0.2s; /*0.2 秒遅らせて出現*/
        animation-fill-mode: forwards;
        opacity: 0;

        a {
          color: white;
          text-shadow: #666 3px 3px;
        }
      }
      /* ●ここまで背景が出現後にliを表示させる*/
    }
    /* ●ここまで背景が出現後にナビメニューリストを表示 */
  }
  /* ●ここまでナビメニューリスト《スマホ》（クリック時） */

  /* ●●ここから背景が出現後にliを表示させるアニメーション*/
  @keyframes gnaviAnime {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
  /* ●ここまで背景が出現後にliを表示させるアニメーション*/
}
/* 〇ここからグランドナブ《スマホ》 */

/* 〇〇ここから《パソコン》 */
@media screen and (min-width: 800px) {
  .navi-btn {
    display: none;
  }

  .navinemu-sp-bg {
    display: none;
  }

  .ground-nav {
    background: linear-gradient(rgb(198, 135, 0), rgb(255, 238, 107));

    height: 10vh;

    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;

    ul {
      display: flex;
      justify-content: center;
      gap: 8vw;
    }
  }
  /* スクロールでナブ消える */
  #nav-fixde {
    z-index: 30;
    opacity: 10;
    transition: 0.9s;
  }
  #nav-fixde.on {
    pointer-events: none;
    opacity: 0;
    transform: translateY(0vw);
  }
}

/* 〇ここまで《パソコン》 */