/* start メガメニュー開閉ボタンの基本スタイル */
.my-menu-btn {
  width: 30px;
  height: 24px;
  position: relative;
  cursor: pointer;
}

.my-menu-btn span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #333;
  transition: 0.3s;
}

.my-menu-btn span:nth-child(1) {
  top: 0;
}
.my-menu-btn span:nth-child(2) {
  top: 10px;
}
.my-menu-btn span:nth-child(3) {
  bottom: 0;
}
/* end メガメニュー開閉ボタンの基本スタイル */

/* start メガメニューを開いたときの開閉ボタンのスタイル */
.my-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}

.my-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.my-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 10px;
}
/* end メガメニューを開いたときの開閉ボタンのスタイル */

/* メガメニューの基本スタイル */
.my-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  padding-top: env(safe-area-inset-top);
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* start メガメニューを開いたときのスタイル */
.my-menu.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.7s ease;
  will-change: transform;
  transform: translateZ(0);
}

body.no-scroll {
  overflow: hidden !important;
  padding-right: var(--scrollbar-width, 0px);
}
/* end メガメニューを開いたときのスタイル */