<!-- header -->

    <header class="header">

      <!--　 サイトロゴ 　-->

      <h1 class="header_logo"><a href="./index.html"><img src="../images/たぬちべろごぷろぐらみんぐ_くりあ.png" alt="たぬちべプログラミング" width="250"></a></h1>

      <!--　 ハンバーガーボタン 　-->

      <button type="button" class="hamburger-button">

        <span class="hamburger-button-bar"></span>

        <span class="hamburger-button-bar"></span>

        <span class="hamburger-button-title">あんない</span>

      </button>

      <!-- ハンバーガーボタンメニュー -->

      <div class="hamburger-menu hamburger-nav-container">

        <nav class="hamburger-nav-second">

          <ul class="hamburger-nav-second-list-group">

            <li><a href="#"><i class="hamburger-nav-second-list-group-icon bi bi-search"></i><span class="hamburger-nav-second-list-group-text">検索（できません）</span></a></li>

            <li><a href="#"><i class="hamburger-nav-second-list-group-icon bi bi-box-arrow-right"></i><span class="hamburger-nav-second-list-group-text">ログイン（できません）</span></a></li>

          </ul>
        </nav>


        <nav class="hamburger-nav-third">

          <ul>

            <li><a href="#">会社概要（会社にはなれていない）</a></li>

            <li><a href="#">お問い合わせ（窓口がありません）</a></li>

            <li><a href="#">利用規約（荒らさないで）</a></li>

            <li><a href="#">プライバシーポリシー（守る程のものがない）</a></li>

          </ul>

        </nav>

        <ul class="hamburger-sns">

          <li><a href="https://www.instagram.com/"><i class="bi bi-instagram"></i></a></li>

          <li><a href="https://www.youtube.com/"><i class="bi bi-youtube"></i></a></li>

          <li><a href="https://www.facebook.com/?locale=ja_JP"><i class="bi bi-facebook"></i></a></li>

          <li><a href="https://x.com/"><i class="bi bi-twitter"></i></a></li>

        </ul>

      </div>

    </header>
  

    .header {
      /* 位置指定 */
      position: fixed;/* 画面に固定 */
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
      /* 表示設定 */
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* 大きさ */
      height: 3.75rem;
      /* 境界、余白 */
      padding: 0.8rem 1rem 0.8rem;
      /* 色 */
      background-color: skyblue;
    }

    .header_logo {
      /* 大きさ */
      line-height: 1;
    }
    .header_logo img {
      /* 大きさ */
      max-width: 17rem;
      /* 表示設定 */
      vertical-align: bottom;
    }

    .hamburger-button {
      /* 位置指定 */
      position: fixed;
      top: 1.3rem;
      right: 1.25rem;
      /* 表示設定 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      row-gap: .1rem;
    }

    .hamburger-button-bar {
      width: 1.5rem;
      height: 0.15rem;
      background-color: slateblue;
    }

    .hamburger-button-bar:first-child {
      margin-bottom: 0.2rem;
    }

    .hamburger-button-title {
      font-size: .7rem;
      color: slateblue;
    }

    /* ハンバーガーメニュー ******************************************/
    @media (max-width: 768px) {/* SP */
      .hamburger-menu {
        /* 位置指定 */
        position: fixed;
        top: 3.75rem;
        left: 100%;
        width: 100%;
        /* 大きさ */
        height: calc(100vh - 3.75rem);
        /* 境界、余白 */
        padding: 2.45rem;
        /* 色 */
        background-color: lightblue;
        /* 変化時間 */
        transition: all 0.6s;
        /* visibility: hidden; */
      }
    }
    .hamburger-menu-active {
      left: 0;
      visibility: visible;
    }

    /* ＝ 案内１，２，３ ＝*/
    .hamburger-nav-first-list-group {
      /* 表示設定 */
      display: flex;
      justify-content: space-between;
      /* flex-direction: column; */
      row-gap: 1rem;
      /* 境界、余白 */
      margin-bottom: 3rem;
      /* 文字設定 */
      font-size: 1.75rem;
      line-height: 1;
    }
    .hamburger-nav-first-list-group li {
      /* 装飾 */
      text-decoration: underline;
    }

    /* ＝ 検索、ログイン ＝ */
    .hamburger-nav-second {
      /* 境界、余白 */
      padding-bottom: 2rem;
      margin-bottom: 2rem;
      /* 枠線 */
      border-bottom: 0.05rem solid #333;
    }
    .hamburger-nav-second-list-group {
      /* 表示設定 */
      display: flex;
      column-gap: 2rem;
      align-items: center;
      justify-content: center;
      /* 書式設定 */
      line-height: 1;
      text-align: center;
    }
    .hamburger-nav-second-list-group-icon {/* 検索ログインのアイコン */
      /* 文字設定 */
      font-size: 1.2rem;
    }
    .hamburger-nav-second-list-group-text {/* 検索、ログイン */
      /* 表示設定 */
      display: block;
      /* 境界、余白 */
      margin-top: 0.5rem;
      /* 文字設定 */
      font-size: 0.85rem;
    }
    /* ＝＝＝ 会社概要、お問い合わせ、利用規約、プライバシーポリシー ＝＝＝ */
    .hamburger-nav-third {/* サード箱 */
      /* 境界余白 */
      margin-bottom: 1.5rem;
      /* 行の高さ */
      line-height: 1;
    }
    .hamburger-nav-third li {
      /* 境界、余白 */
      margin-bottom: 2rem;
    }
    /* ＝＝＝＝ SNS ＝＝＝＝ */
    .hamburger-sns {
      /* 表示設定 */
      display: flex;
      justify-content: center;
      column-gap: 2rem;
    }
    .hamburger-sns a {
      /* 文字の設定 */
      font-size: 2rem;
      color: #555;
    }

    /* PC ******************************************/
    @media (min-width: 768px) {/* SP */
      .hamburger-button,
      .hamburger-nav-second,
      .hamburger-nav-third,
      .hamburger-sns {
        display: none;
      }
      .header {
        position: relative;
      }
      .hamburger-menu {
        position: absolute;
        right: 1%;
        top: 30%;
        margin: 0;
        padding: 0;
        font-weight: 300;
        color: #555;
      }
      .hamburger-menu ul {
        margin: 0;
        column-gap: 2rem;
      }
      .hamburger-menu li {
        text-decoration: none;
        cursor: pointer;
        font-size: 1.3rem;
      }
    }
  

    <!-- js -->
    var hamburger = $('.hamburger-menu');

    //ハンバーガーボタンをクリックで表示・非表示
    $('.hamburger-button').on('click',function() {
      hamburger.toggleClass('hamburger-menu-active');

    });
    //画面がサイズ変更したら閉じる
    $(window).on('resize', function() {
      hamburger.removeClass('hamburger-menu-active');
    });