@charset "utf-8";

:root{
  --card-radius: 8px;
  --card-shadow: 0 10px 30px rgba(0,0,0,.18);
  --gap: 14px;

  --arrow-size: 44px;
  --arrow-bg: rgba(255,255,255,.28);
  --arrow-border: rgba(255,255,255,.55);
  --arrow-fg: #ffffff;

  --dot: 10px;
  --dot-gap: 10px;
  --dot-off: rgba(255,255,255,.0);
  --dot-on: #ffffff;
}


/* レイアウト枠 */
.slider-wrap{
  width: min(800px, 45%);
  margin-right: 5%;
}

/* 本体 */
.slider{
  position: relative;
}

/* カード（画像エリア） */
.slider__viewport{
  overflow: hidden;
}

/* 1列横スライド */
.slider__track{
  display:flex;
  will-change: transform;
  transition: transform .45s ease;
}

/* 1枚 = ビューポート幅 */
.slider__slide{
  flex: 0 0 100%;
}

/* 画像はカードいっぱい */
.slider__img{
  display:block;
  width:100%;
  height:auto;
}

/* 下のUI（矢印＋ドット） */
.slider__controls{
  display:flex;
  align-items:center;
  gap: var(--gap);
  padding-right: 5%;
  margin-top: -1vw;
}

/* 矢印 */
.slider__arrow{
  width: var(--arrow-size);
  height: var(--arrow-size);
  display:grid;
  place-items:center;
  border-radius: 999px;
  border: none;
  background: none;
  color: var(--arrow-fg);
  cursor: pointer;
  user-select:none;
}

.slider__arrow span{
  font-size: clamp(6px, 4vw, 60px);
  line-height: 1;
  transform: translateY(-1px);
}

/* ドットは右寄せ（画像っぽく） */
.slider__dots{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: var(--dot-gap);
}

.slider__dot{
  width: var(--dot);
  height: var(--dot);
  border-radius: 999px;
  border: 1px solid #fff;
  background: var(--dot-off);
  cursor:pointer;
  padding:0;
}

.slider__dot[aria-current="true"]{
  background: var(--dot-on);
}

/* キーボード操作時のフォーカス */
.slider__arrow:focus-visible,
.slider__dot:focus-visible{
  outline: 3px solid rgba(255,255,255,.75);
  outline-offset: 2px;
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .slider__track{ transition: none; }
}

@media (max-width: 500px) {
.slider-wrap{
  width: 94%;
  margin-right: 0;
  margin: 0 auto;
}

.slider__arrow{
  display: none;
}

.slider__dots{
  margin: 3vw auto 0;
}

}