/* ================================
   Scrollable Tab Nav (Swiper)
================================ */

.scrollableTabNav {
  width: 100%;
  max-width: 1286px;
  margin: var(--X2S) auto 0;
  padding: 0 var(--L);
  display: flex;
  align-items: center;
  gap: var(--XS);
}

@media screen and (max-width: 468px) {
  .scrollableTabNav {
    padding: 0 4%;
  }
}

/* ---------- Arrow ---------- */

.scrollableTabNav__arrow {
  width: 32px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-separate-primary);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  flex-shrink: 0;
}

.scrollableTabNav__arrow--prev {
  background-image: url('/bizpost/assets/img/components/scrollable-tab-nav/arrow_back.svg');
}

.scrollableTabNav__arrow--next {
  background-image: url('/bizpost/assets/img/components/scrollable-tab-nav/arrow_next.svg');
}

/* ---------- Swiper ---------- */

.scrollableTabNav__swiper {
  flex: 1;
  overflow: hidden;
}

.scrollableTabNav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Item ---------- */

.scrollableTabNav__item {
  min-width: 142px;
  width: auto; 
}

/* ボタン本体 */
.scrollableTabNav__item a {
  display: flex;
  width: 100%; 
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-separate-secondary);
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.scrollableTabNav__item a:hover {
  background: var(--color-bg-secondary);
  text-decoration: none;
}