/* =========================================================
   リンクルショット LP  カルーセル（JS制御版）用CSS
   -------------------------------------------------------
   carousel.js とセットで使用してください。
   既存 style.css の .carousel-wrap / .carousel / .slide に
   追記・上書きする形で読み込みます（style.cssの後に読込）。
   ========================================================= */

/* 矢印・ドットを内包するため相対配置に */
.carousel-wrap {
  position: relative;
  outline: none;
}

/* JS制御時はネイティブのスクロールバーは隠す（矢印/ドットで操作） */
.carousel {
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

/* ドラッグ中はスナップを一時解除して滑らかに */
.carousel.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.carousel {
  cursor: grab;
}

/* ---- 左右の矢印ボタン ---- */
.carousel-arrow {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--orange, #DA5A16);
  color: var(--orange-d, #B2460C);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(180, 90, 20, .18);
  transition: .2s;
  z-index: 5;
  padding: 0;
}

.carousel-arrow span {
  display: block;
  margin-top: -2px;
}

.carousel-arrow:hover {
  background: var(--orange, #DA5A16);
  color: #fff;
}

.carousel-arrow.prev {
  left: -6px;
}

.carousel-arrow.next {
  right: -6px;
}

.carousel-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

/* ---- ドット（インジケーター） ---- */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  border: none;
  background: #e3cdb6;
  cursor: pointer;
  transition: .2s;
}

.carousel-dot.active {
  background: var(--orange, #DA5A16);
  transform: scale(1.25);
}

.carousel-dot:hover {
  background: var(--orange-l, #EBA579);
}

/* アコーディオン閉時は、details外に生成される矢印・ドットを隠す */
.carousel-wrap > .carousel-accordion:not([open]) ~ .carousel-arrow,
.carousel-wrap > .carousel-accordion:not([open]) ~ .carousel-dots {
  display: none;
}

/* ---- レスポンシブ：SPは矢印を控えめに、指送り主体 ---- */
@media(max-width:600px) {
  .carousel-arrow {
    width: 34px;
    height: 34px;
    font-size: 19px;
  }

  .carousel-arrow.prev {
    left: 2px;
  }

  .carousel-arrow.next {
    right: 2px;
  }
}