.burger {
  display: none;
}
@media (max-width: 800px) {
  .burger {
    display: block;
    position: absolute;
    right: 20px; top: 20px;
    z-index: 150;
    width: 44px; height: 44px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .burger-inner {
    width: 28px; height: 24px;
    position: absolute; /* ←中央寄せ */
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: block;
  }
.burger-bar {
  position: absolute; left: 0;
  width: 28px; height: 5px;
  background: #fff;
  border-radius: 3px;
  transition: .23s cubic-bezier(.5,-.5,.5,1.9);
  display: block;
}
.burger-bar.top { top: 0; }
.burger-bar.mid { top: 9.5px; }
.burger-bar.bot { top: 19px; }

/* バツ印時の変形（active状態） */
.burger.active .burger-bar.top {
  top: 9.5px;
  transform: rotate(45deg);
}
.burger.active .burger-bar.mid {
  opacity: 0;
}
.burger.active .burger-bar.bot {
  top: 9.5px;
  transform: rotate(-45deg);
}

}