<div class="cp_navi07">
  <input type="checkbox" id="cp_navimenuid">
  <label class="menu07" for="cp_navimenuid">
    <div class="menubar">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </div>
    <ul>
      <li><a id="home" href="#">Home</a></li>
      <li><a id="about" href="#">About</a></li>
      <li><a id="contact" href="#">Contact</a></li>
    </ul>
  </label>
  <!-- メニューが開いているときに背景に表示される透明なオーバーレイ -->
  <label class="background_overlay" for="cp_navimenuid"></label>
</div>

.cp_navi07 .menu07 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  border-radius: 50%;
  background-color: #1b2538;
}
.cp_navi07 .menu07 div.menubar {
  width: 30px;
  height: 30px;
}
.cp_navi07 .menu07 div.menubar .bar {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 3px;
  margin-bottom: 5px;
  border-radius: 2px;
  background-color: #ffffff;
}
.cp_navi07 .menu07 ul {
  position: relative;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  opacity: 0;
  z-index: 2;
  transition: all 0.5s ease;
}
.cp_navi07 .menu07 ul li {
  display: flex;
}
.cp_navi07 .menu07 ul li a {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 0.5em;
  color: #1b2538;
  text-decoration: none;
  transition: all 0.3s ease-in;
}
.cp_navi07 .menu07 ul li a:hover {
  color: #ffffff;
  background: #1b2538;
}
/* クリックした時の動き */
.cp_navi07 #cp_navimenuid {
  display: none;
}
.cp_navi07 #cp_navimenuid:checked ~ .menu07 {
  width: 100%;
  height: 60px;
  border: 3px solid #1b2538;
  border-radius: 5px;
  background-color: transparent;
}
.cp_navi07 #cp_navimenuid:checked ~ .menu07 > ul {
  display: flex;
  opacity: 1;
}
.cp_navi07 #cp_navimenuid:checked ~ .menu07 > .menubar {
  display: none;
}
.menu07 li::before {display: none;}
/* 新しく背景のdivを追加して、チェックが入っている時のみ表示 */
.cp_navi07 #cp_navimenuid:checked ~ .background_overlay {
  display: flex;
}
.background_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  z-index: 0;
}