/* ==========================================================================
   機能：横スクロール（ランキング）
   ========================================================================== */

/* --------------------------------------------------------------------------
   横スクロール
   -------------------------------------------------------------------------- */

.smooth-scroll {
  --smooth-scroll-columns-mobile: 1.5;
  --smooth-scroll-columns-desktop: 3.5;
  --smooth-scroll-gap: 16px;
  --smooth-scroll-scrollbar-color: rgb(0 0 0 / 30%);
  --smooth-scroll-columns: var(--smooth-scroll-columns-mobile);

  display: block;
}

.smooth-scroll .smooth-scroll__viewport {
  display: flex;
  /* サイトの CSS（#center_freearea_ranking .ranking）が、スマホ幅で折り返しを指定している。ID の指定はクラスでは上書きできないため、!important で横1列に固定する */
  flex-wrap: nowrap !important;
  gap: var(--smooth-scroll-gap);
  margin: 0;
  padding: 0 0 8px;
  overflow-x: auto;
  /* 横だけにスクロールさせる。中身が少しでも高くはみ出すと、縦のスクロールが出てしまうため */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* サイトの CSS で回り込み解除（clearfix）が付いていると、横に並ぶ要素の1つとして数えられ、右端に余白ができるため消す */
.smooth-scroll .smooth-scroll__viewport::before,
.smooth-scroll .smooth-scroll__viewport::after {
  content: none;
}

.smooth-scroll.is-scrolling .smooth-scroll__viewport {
  scrollbar-color: var(--smooth-scroll-scrollbar-color) transparent;
}

/* サイトの CSS で .item に付いている幅や float を打ち消す */
.smooth-scroll .smooth-scroll__item {
  /* サイトの CSS（#center_freearea_ranking .ranking .rank04）が、PC 幅で4位を隠している。ID の指定はクラスでは上書きできないため、!important ですべての順位を表示する */
  display: flex !important;
  flex-direction: column;
  flex: 0 0 calc((100% - var(--smooth-scroll-gap) * (var(--smooth-scroll-columns) - 1)) / var(--smooth-scroll-columns));
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
}

/* カードの高さをそろえる（height: 100% だと、はみ出して縦のスクロールが出るため flex-grow を使う） */
.smooth-scroll .smooth-scroll__item > a {
  display: block;
  flex-grow: 1;
}

.smooth-scroll .smooth-scroll__item img {
  width: 100%;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .smooth-scroll .smooth-scroll__viewport {
    cursor: grab;
  }

  .smooth-scroll.is-dragging .smooth-scroll__viewport,
  .smooth-scroll.is-dragging .smooth-scroll__viewport * {
    cursor: grabbing;
    user-select: none;
  }
}

@media (min-width: 768px) {
  .smooth-scroll {
    --smooth-scroll-columns: var(--smooth-scroll-columns-desktop);
  }
}