/* ==================================================
  Slick 共通UI（slider-1 / slider-2 共通）
================================================== */

/* ---------- 矢印（共通） ---------- */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  background: rgba(94,94,94,0.5);
  border-radius: 50%;
  cursor: pointer;

  font-size: 0;
  color: transparent;
}

/* 左右位置 */
.slick-prev { left: 10px; }
.slick-next { right: 10px; }

/* 矢印アイコン */
.slick-prev::before,
.slick-next::before {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.slick-prev::before { content: "<"; }
.slick-next::before { content: ">"; }

/* 無効状態 */
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ---------- dots（共通） ---------- */
.slick-dots {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  text-align: center;
}

.slick-dots li {
  display: inline-block;
  margin: 0 4px;
}

.slick-dots li button {
  font-size: 0;
}

.slick-dots li button::before {
  content: "●";
  font-size: 10px;
  opacity: 0.4;
}

.slick-dots li.slick-active button::before {
  opacity: 1;
}

/* ==================================================
  slider共通設定
================================================== */

.slider-1,
.slider-2 {
  position: relative;
  padding-bottom: 60px; /* dots用スペース */
}

/* ==================================================
  slider1ドットと矢印設定
================================================== */

.slider-1 .slick-dots {
  bottom: -15px; /* ← 上に15px移動 */
}


.slider-1 .slick-prev {
  left: -20px;   /* ← 外へ */
}

.slider-1 .slick-next {
  right: -20px;  /* ← 外へ */
}