/* ハンバーガーメニュー アニメーション修正 */

/* width/rightの遷移をやめてvisibility+opacityで制御 */
/* → ズーム変更時に -60vw の計算値が変化しても誤アニメしなくなる */
.nav {
  right: 0 !important;
  width: 100% !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.86, 0, 0.07, 1),
              visibility 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.checkbox:checked ~ .nav {
  opacity: 1;
  right: 0 !important;
  width: 100% !important;
  visibility: visible;
  pointer-events: auto;
}

/* 背景サークルのスケールを大きくして高ズーム・大画面でも全画面を覆う */
.checkbox:checked ~ .background {
  transform: scale(250);
}