@charset "UTF-8";


.js-carouselScope .c-carousel {
  position: relative;
  width: 100%;
}

.js-carouselScope .c-carousel__viewport {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
  /* 縦スクロールは許可しつつ、横スワイプを検知しやすく */
}

.js-carouselScope .c-carousel__track {
  display: flex;
  transition: transform 300ms ease;
  will-change: transform;
}

/* スライド */
.js-carouselScope .c-carousel__slide {
  flex: 0 0 100%;
  margin: 0;
}

/* 画像 */
.js-carouselScope .c-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* 前後ボタン */
.js-carouselScope .c-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  padding: 0;

  background: rgba(0, 0, 0, 1.45);
  color: #fff;
  cursor: pointer;

  display: grid;
  place-items: center;

  font-size: 26px;
  line-height: 1;
  /* 記号の上下ズレを減らす */
}

.js-carouselScope .c-carousel__btn--prev {
  left: 10px;
}

.js-carouselScope .c-carousel__btn--next {
  right: 10px;
}

.js-carouselScope .c-carousel__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* 矢印（spanで視覚中心を微調整）
   - ここだけ触ればOK
   - 左に寄る：Xをマイナス方向へ
   - 右に寄る：Xをプラス方向へ
   - 上に寄る：Yをプラス（下へ）
   - 下に寄る：Yをマイナス（上へ）
*/
.js-carouselScope .c-carousel__arrow {
  display: block;
  line-height: 1;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  /* 記号の癖を減らす（任意） */
  transform: translate(-0.5px, -1px);
  /* ←まずはここを調整 */
}

/* ドット */
.js-carouselScope .c-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.js-carouselScope .c-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.js-carouselScope .c-carousel__dot[aria-current="true"] {
  background: rgba(0, 0, 0, 0.7);
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce) {
  .js-carouselScope .c-carousel__track {
    transition: none;
  }
}

</style>