/*
 * カードのスライダー: 動きに必要な指定（見た目はサイトに合わせて自由に書く）
 */
[data-slider-viewport] {
  /* はみ出したカードを切る。hidden ではなく clip（フォーカスしたときにブラウザが勝手にスクロールしないように） */
  overflow: clip;
  /* 縦のスワイプはページのスクロールに、横のスワイプは JS に */
  touch-action: pan-y;
  cursor: grab;
}
[data-slider-viewport][data-dragging] {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
[data-slider-track] {
  display: flex;
  gap: var(--slider-gap, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-slider-card] {
  flex: none;
}
[data-slider-card] img {
  -webkit-user-drag: none;
}

/* ページ送りの点。押せる範囲は 20×24px、見た目の点は ::before */
[data-slider-dots] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
[data-slider-dots] button {
  position: relative;
  width: 20px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
[data-slider-dots] button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: currentColor;
  opacity: .28;
  translate: -50% -50%;
  transition: width .45s cubic-bezier(.22, 1, .36, 1), opacity .45s;
}
[data-slider-dots] button[aria-current="true"] { width: 38px; }
[data-slider-dots] button[aria-current="true"]::before { width: 26px; opacity: 1; }
[data-slider-dots] button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  [data-slider-dots] button,
  [data-slider-dots] button::before { transition: none; }
}