<header>
      <input id="menu-cb" type="checkbox" value="off">
      <label id="menu-icon" for="menu-cb"></label>
      <div id="ham-menu">
        <ul class="header-items-sp">
          <li class="header-item-sp">Home</li>
          <li class="header-item-sp">Works</li>
          <li class="header-item-sp">Contact</li>
        </ul>
      </div>
      <ul class="header-items">
        <li class="header-item"><a href="">Home</a></li>
        <li class="header-item"><a href="">Works</a></li>
        <li class="header-item"><a href="">Contact</a></li>
      </ul>
</header>

* {
    padding: 0;
    margin: 0;
  }
  li {
    list-style:none;
  }

  /* header */
  header {
      background-color: rgb(30,40,54);
      height: 50px;
      display: flex;
      justify-content: center;
  }
  .header-items {
      display: flex;
      align-items: center;
      padding-right: 3%;
  }
  .header-item {
      margin-left: 65px;
  }
  .header-item a {
      text-decoration: none;
      color: #fff;
      font-weight: bold;
  }

  /* header hamburger */
  #ham-menu,
  label#menu-icon {
      display: none;/*768px以上のWindow幅の場合は表示しないようにする*/
  }
  #ham-menu {
      background-color: #fff; /*メニュー背景色*/
      box-sizing: border-box;
      height: 100%;
      padding: 10px 40px; /*メニュー内左右上下余白*/
      position: fixed;
      right: -100%; /*メニュー横幅 width と合わせる*/
      top: 0;
      transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
      width: 100%; /*メニュー横幅*/
      z-index: 1000;
      text-align: center;
  }
  #menu-icon {
      background-color: rgb(30,40,54); /*アイコン部分 ハンバーガー中央色*/
      border-radius: 10px; /*角丸*/
      color: #333; /*アイコン（フォント）色*/
      cursor: pointer;
      display: block;
      font-size: 50px; /*アイコン（フォント）サイズ*/
      height: 5px; /*アイコン縦高さ*/
      line-height: 50px; /*縦位置中央化*/
      position: fixed;
      right: 10px;
      text-align: center;
      top: 20px;
      width: 30px; /*アイコン横幅*/
      transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
      z-index: 1001;
      transition: 1s;
  }
  #menu-icon::before {
      content: '';
      background-color: rgb(30,40,54); /*アイコン部分 ハンバーガー中央色*/
      border-radius: 10px; /*角丸*/
      display: block;
      height: 5px;
      width: 30px;
      position: absolute;
      top: -10px;
      transition: 1s;
  }
  #menu-icon::after {
      content: '';
      background-color: rgb(30,40,54); /*アイコン部分 ハンバーガー中央色*/
      border-radius: 10px; /*角丸*/
      display: block;
      height: 5px;
      width: 30px;
      position: absolute;
      top: 10px;
      transition: 1s;
  }
  #menu-cb {
      display: none; /*チェックボックス本体は見えないようにしている*/
  }
  #menu-cb:checked ~ #ham-menu {
      transform: translate(-100%); /*メニュー本体横幅 width と合わせる*/
      text-align: center;
  }
  #menu-cb:checked ~ #menu-icon,
  #menu-cb:checked ~ #menu-icon::before,
  #menu-cb:checked ~ #menu-icon::after {
      background-color: rgb(30,40,54); /*開示の際に、バーの色を黒色に変化させる*/
  }
  #menu-cb:checked ~ #menu-icon { 
      background-color: #fff;  /*中央バーを白色にして不可視に*/
  }
  #menu-cb:checked ~ #menu-icon::before {
      transform: rotate(135deg);
      transition: 1s;               /*上方バーを黒色にして傾ける*/
      top: 0px;
  }
  #menu-cb:checked ~ #menu-icon::after {
      transform: rotate(-135deg);
      transition: 1s;              /*下方バーを黒色にして傾ける*/
      top: 0px;
  }

  @media screen and (max-width: 768px) {
      /* hewder */
      header {
          position: absolute;
      }
      .header-items {
          z-index: 10;
          display: none;
      }
      /* header hamburger */
      #ham-menu,
      label#menu-icon {
          display: block;
      }

      /* firstview */
      .firstview {
          height: 100vh;
      }
      .firstview-imagearea {
          width: 55%;
          background: red;
          height: 300px;
          position: absolute;
          top: 100px;
          left: 50px;
      }
      .firstview-infoarea {
          position: absolute;
          top: 230px;
          right: 40px;
          width: 46%;
      }
  }