/* 細かいドット背景 of index.html */
.dot-bg {
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* モバイルメニュー・ドロワー（フルスクリーンでヘッダー直下からスライドイン） */
.mobile-menu {
  position: fixed;
  top: 4rem; /* ヘッダー高さ(h-16)分オフセット */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  overflow-y: auto;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}
@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

/* ハンバーガーアイコン ⇄ クローズアイコンのモーフアニメーション */
.menu-icon-open,
.menu-icon-close {
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.menu-icon-close {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}
#mobile-menu-toggle[aria-expanded="true"] .menu-icon-open {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}
#mobile-menu-toggle[aria-expanded="true"] .menu-icon-close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* メニュー展開中は背面スクロールを止める */
body.mobile-menu-open {
  overflow: hidden;
}

/* カスタムスクロールバー */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #09090b;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #22d3ee;
}