/* ===== 同一ページで複数のスライダーが使用できます。 ===== */

/* ===== Slider Styles (multi-instance safe) ===== */
:root { --cases-accent: #0202e5; }

/* ラッパー: id でも class でもOK */
:is(#cases-slider, .cases-slider){
  max-width: 500px;
  margin: 24px auto 0; /* 以前の margin:0 auto による上書きを修正 */
}

/* タイトル */
:is(#cases-slider, .cases-slider) .slider-title{
  font-size: 18px;
  margin: 0 0 10px;
  color: var(--cases-accent);
  font-weight: 700;
}

/* スライダー本体 */
:is(#cases-slider, .cases-slider) .slider{
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  background: #fff;
}

/* トラック */
:is(#cases-slider, .cases-slider) .slides{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  transition: transform .5s ease;
  will-change: transform;
}

/* スライド */
:is(#cases-slider, .cases-slider) .slide{
  position: relative;
}
:is(#cases-slider, .cases-slider) .slide img{
  display: block;
  width: 100%;
  height: auto;
}

/* キャプション */
:is(#cases-slider, .cases-slider) .caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-size: 13px; line-height: 1.5;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%);
}

/* ナビゲーション矢印 */
:is(#cases-slider, .cases-slider) .nav{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 2;
  border: none;
  background: rgba(0,0,0,.4);
  color: #fff;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
}
:is(#cases-slider, .cases-slider) .nav:hover{ background: rgba(0,0,0,.6); }
:is(#cases-slider, .cases-slider) .nav.prev{ left: 8px; }
:is(#cases-slider, .cases-slider) .nav.next{ right: 8px; }

/* ドット */
:is(#cases-slider, .cases-slider) .dots{
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: #fff;
}
:is(#cases-slider, .cases-slider) .dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: #cfd3ff;
  text-indent: -9999px;
  cursor: pointer;
}
/* JSで付与する .is-active と、aria-selected 両対応 */
:is(#cases-slider, .cases-slider) .dot.is-active,
:is(#cases-slider, .cases-slider) .dot[aria-selected="true"]{
  background: var(--cases-accent);
}

/* モバイル最適化 */
@media (max-width: 767px){
  :is(#cases-slider, .cases-slider) .caption{ font-size: 12px; }
  :is(#cases-slider, .cases-slider) .nav{ width: 32px; height: 32px; font-size: 18px; }
}

/* 省エネアニメーション */
@media (prefers-reduced-motion: reduce){
  :is(#cases-slider, .cases-slider) .slides{ transition: none; }
}