<!-- PC用ヘッダーナビの記述（省略） -->

<!-- スマホ用ヘッダーナビ -->
<div class="navbar-res">
  <div class="menu-area">
    <input type="checkbox" id="menu-open" class="toggle-button" />
    <label for="menu-open" class="menu-button">
      <div class="button-text"><i id="menu-icon" class="fas fa-bars" />MENU</div>
    </label>
    <label for="menu-open" class="menu-back"></label>
    <div class="nav-menu">
      <ul>
        <b:loop values='data:links' var='link'>
          <li>
            <a expr:href='data:link.href'>
              <data:link.title />
            </a>
          </li>
        </b:loop>
      </ul>
    </div>
  </div>
  <div class="side-area">
    <input type="button" onclick="location.href='#aside'" id="side-jump" class="toggle-button" />
    <label for="side-jump" class="side-button">
      <div class="button-text">SIDE<i id="side-icon" class="fa fa-angle-double-down" /></div>
    </label>
  </div>
</div>

<!-- 中略 -->

<!-- asideタグにid="aside"を追加 -->

/* PCではスマホ用のヘッダーナビを消す */
.navbar-res {
  display: none;
}

/* スマホ用ヘッダーナビ
---------------------------------------------------------------------------- */

/* WEBフォント */

@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* チェックボックスを隠す */

.toggle-button {
  position: absolute;
  left: -50vw;
}

@media screen and (max-width: 560px) {
  /* スマホではPC用のヘッダーナビを消す */
  .navbar {
    display: none;
  }
  /* ヘッダーナビ */
  .navbar-res {
    display: flex;
    justify-content: space-between;
    background: #444;
  }
  /* ボタンデザイン */
  .menu-button, .side-button {
    display: block;
    cursor: pointer;
    user-select: none;
    color: #fff;
    padding: 8px 10px;
  }
  .menu-button:hover, .side-button:hover {
    background: #666;
  }
  /* ボタンの文字 */
     .button-text {
       font-size: 20px;
       font-family: 'Bebas Neue', sans-serif;
     }
     #menu-icon {
       font-size: 18px;
       font-weight: 600;
       margin-right: 8px;
     }
     #side-icon {
       font-size: 22px;
       font-weight: 600;
       margin-left: 8px;
     }
  /* リスト */
    .navbar-res ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .nav-menu {
      display: none;
      position: absolute;
      width: 100%;
      list-style: none;
      z-index: 99;
    }
    .nav-menu li {
      padding: 0;
    }
    /* リストリンクの設定 */
    .nav-menu a {
      display: block;
      color: #fff;
      background: #333;
      font-size: 15px;
      opacity: 0.9;
      text-decoration: none;
      font-family: 'Archivo Black', 'M PLUS Rounded 1c', sans-serif;
      font-weight: bold;
      padding: 10px 15px;
      margin: 0;
    }
    .nav-menu a:hover {
      background: #666;
      opacity: 1;
    }
    /* MENUボタンアクション */
    #menu-open:checked~.nav-menu {
      display: block;
    }
    #menu-open:checked~.menu-back {
      display: block;
      position: fixed;
      top: 0vw;
      left: 0vw;
      width: 100%;
      height: 100%;
      margin-bottom: 10px;
      overflow: hidden;
      z-index: 99;
    }
    /* メニューアニメ */
    #menu-open:checked~.nav-menu {
      animation-name: nav-menu;
      animation-duration: 0.3s;
      animation-iteration-count: 1;
      animation-fill-mode: both;
    }
    @keyframes nav-menu {
      0% {
        opacity: 0;
        transform: translateY(-5px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }