/* スライダー枠がはみ出しを隠す前提 */
.slider {
  position: relative;
  overflow: hidden;
}

/* 連続スクロール用に残してもOK。クリック移動時はJSでtransform制御 */
.slider-track {
    display: flex;
    width: max-content;
    animation: none; /* ←自動スクロールを停止 */
    will-change: transform;
}
/* 画像間の余白（ある場合。不要なら消してOK） */
.slider-track img{ margin-right: 24px; flex: 0 0 auto; display: block;}

/* コントロール（左下に ●●○ と ＞ ） */
.slider-controls{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-left: 16px;     /* 左寄せ */
  width: fit-content;
}

/* ドット */
.slider-dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C7C7C7;          /* 非アクティブ(薄) */
  border: none;
  padding: 0;
  display: inline-block;
}
.slider-dot.is-active{ background:#212F44; }  /* アクティブ(濃) */
.slider-dot:focus-visible{ outline: 2px solid #6aa5ff; }

/* 右矢印ボタン（添付の丸い ＞ ） */
.slider-next{
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: #fff;
  display: grid; place-items:center;
  cursor: pointer;
  padding: 0;
}
.slider-next svg{ width: 24px; height: 24px; color:#C7C7C7;}
.slider-next:hover{ filter: brightness(.97); }
.slider-next:active{ transform: scale(.98); }
.slider-next:focus-visible{ outline: 2px solid #6aa5ff; }