/* ハンバーガーアイコンの外側 */
#header .hamburger {
    /* ボタン全体サイズを50pxの正方形に設定 */
    aspect-ratio: 1/1;
    height: 40px;
    box-sizing: border-box;
    border-radius: 10%;
    /* マウスポインターを指に変更 */
    cursor: pointer;
    position: fixed;
    right: 10px;
    /* 優先度を変更 */
    z-index: 30;
  }

/* ハンバーガーアイコンの内側の線 */
#header .hamburger span {
    /* ボタン横線の長さと高さを設定 */
    width: 30px;
    height: 3px;
    background-color: #fff;
    /* 絶対位置指定（親は.hamburger） */
    position: absolute;
    left: 5px;
    /* ボタンが押されてXに切り替わるときの動作設定 */
    transition: all 0.4s;
  }

/* ハンバーガーメニュー3本の線の縦の位置を設定 */
#header .hamburger span:nth-of-type(1) {
    top: 10px;
  }
#header .hamburger span:nth-of-type(2) {
    top: 20px;
  }
#header .hamburger span:nth-of-type(3) {
    top: 30px;
  }

/* メニューの外側を設定 */
#header .nav {
  background-color: rgba(29, 29, 31, .8); /* 背景を少し濃くすると文字が見やすいです */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
    /* メニュー開いた時の幅を設定 */
    width: 100%;
    /* メニュー開いた時の高さを設定（画面いっぱいに広げる） */
    height: 100vh;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 20;
    /* スライド表示する際の速度を設定 */
    transition: all 0.6s;
  }

/* メニュー内の設定 */
#header .nav ul {

    width: 100%;
    height: 80%;
    /* メニューを縦並びにオーバーライド */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around; /* 上下端に寄せて間を均等にする */
    /* 上下の高さを設定 */
    padding: 60px 0;
    overflow: auto;
    /* 要素同士の余白をオーバーライド */
    text-align: center;
  }

  li{
    width:auto;
    list-style: none;
  }

nav ul li a{
  text-decoration: none;
}

nav ul li a h2{
  color:#fff;
  padding: 0 10px;
  background-image: linear-gradient(90deg, #00face, #00face); /* マーカーの色を指定 */
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 100%;
  transition: all 0.3s ease;
}
nav ul li a h2:hover{
  color:#000;
  background-size: 100% 100%;
}

/* ボタンを押した際の動作を作成 */
#header .nav.active {
    right: 0;
}

/* ボタンをXにするCSS */
#header .hamburger.active span:nth-of-type(1) {
    top: 20px;
    transform: rotate(-45deg);
}
#header .hamburger.active span:nth-of-type(2) {
    opacity: 0;
}
#header .hamburger.active span:nth-of-type(3) {
    top: 20px;
    transform: rotate(45deg);
}