/* SimpleBarのカスタムスタイル - スマホのみ表示 */

/* SimpleBarのラッパー要素のpaddingを削除 */
.custom-scrollbar .simplebar-wrapper,
.custom-scrollbar .simplebar-content-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0px !important;
}

/* SimpleBarが作成するコンテンツラッパーにflexレイアウトを適用 */
.custom-scrollbar .simplebar-content {
  display: flex !important;
  gap: 16px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 768px) {
  .custom-scrollbar .simplebar-content {
    gap: 28px;
  }
}

/* SimpleBarの疑似要素を非表示（最初と最後の余白を削除） */
.custom-scrollbar .simplebar-content::before,
.custom-scrollbar .simplebar-content::after {
  display: none !important;
  content: none !important;
}

/* 最初の要素の左側と最後の要素の右側の余白を削除 */
.custom-scrollbar .simplebar-content > *:first-child {
  margin-left: 0 !important;
}

.custom-scrollbar .simplebar-content > *:last-child {
  margin-right: 0 !important;
}

/* スクロールバー本体の高さ */
.custom-scrollbar .simplebar-scrollbar {
  height: 8px;
}

/* スクロールバーのトラック（背景部分） */
.custom-scrollbar .simplebar-track {
  background: #f5f5f5;
  height: 8px;
  margin-right: 20px; /* mr-[-20px]の影響を打ち消す */
}

/* スクロールバーのサム（つまみ部分） */
.custom-scrollbar .simplebar-scrollbar::before {
  background: #cccccc;
  height: 4px;
  border-radius: 0;
  opacity: 1;
}

/* PCの時はSimpleBarを無効化 */
@media (min-width: 768px) {
  /* SimpleBarのスクロールバーを完全に非表示 */
  .custom-scrollbar .simplebar-scrollbar,
  .custom-scrollbar .simplebar-track,
  .custom-scrollbar .simplebar-scrollbar::before {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* 通常のブラウザスクロールバーも非表示 */
  .custom-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* PCの時：最初の要素の左側と最後の要素の右側の余白を削除 */
  .custom-scrollbar > *:first-child {
    margin-left: 0 !important;
  }

  .custom-scrollbar > *:last-child {
    margin-right: 0 !important;
  }

  .custom-scrollbar::-webkit-scrollbar {
    display: none !important;
  }

  /* SimpleBarのラッパー要素に通常のスクロールを適用（スクロールバーなし） */
  .custom-scrollbar .simplebar-wrapper {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .custom-scrollbar .simplebar-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  .custom-scrollbar .simplebar-content-wrapper {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .custom-scrollbar .simplebar-content-wrapper::-webkit-scrollbar {
    display: none !important;
  }

  .custom-scrollbar .simplebar-content {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .custom-scrollbar .simplebar-content::-webkit-scrollbar {
    display: none !important;
  }
}