/* ==========================================================================
   components-slider.css
   SC: C-SLIDER
   役割：トップページ用スライダー
   方針：
   - スライダー固有の見た目・配置はここ
   - CTAの見た目は components-cta.css
   ========================================================================== */

/* ==========================================================================
   01) Slider 基本
   ========================================================================== */

.c-slider {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  height: var(--slider-h);
}

.c-slider__track {
  height: 100%;
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  touch-action: pan-y;
}

.c-slider__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}

.c-slider__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   02) Slider 矢印
   ========================================================================== */

.c-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: var(--slider-arrow-bg);
  color: #fff;
  width: var(--slider-arrow-size);
  height: var(--slider-arrow-size);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.c-slider__arrowIcon {
  position: relative;
  font-size: var(--slider-arrow-font);
  line-height: 1;
}

.c-slider__arrow--prev .c-slider__arrowIcon {
  left: var(--slider-prev-icon-x);
  top: var(--slider-prev-icon-y);
}

.c-slider__arrow--next .c-slider__arrowIcon {
  left: var(--slider-next-icon-x);
  top: var(--slider-next-icon-y);
}

.c-slider__arrow--prev {
  left: var(--slider-arrow-x);
}

.c-slider__arrow--next {
  right: var(--slider-arrow-x);
}

/* ==========================================================================
   03) Slide-2 Caption（配置）
   ========================================================================== */

.c-slider__slide.is-slide-2 .c-slider__caption {
  position: absolute;
  left: var(--slider-cap-x);
  bottom: var(--slider-cap-bottom);
  z-index: 2;
}

/* ==========================================================================
   04) Slide-2 Caption（文字）
   ========================================================================== */

.c-slider__slide.is-slide-2 .c-slider__captionTitle {
  margin: 0 0 var(--slider-title-mb);
  font-size: var(--slider-title-size);
  line-height: var(--slider-title-line);
  color: #fff;
  letter-spacing: var(--slider-title-letter);
  font-weight: var(--slider-title-weight);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.c-slider__slide.is-slide-2 .c-slider__captionText {
  margin: 0 0 var(--slider-text-mb);
  margin-top: var(--slider-text-mt);
  font-size: var(--slider-text-size);
  line-height: var(--slider-text-line);
  color: #fff;
  letter-spacing: var(--slider-text-letter);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   05) Slide-2 CTA（配置のみ）
   ========================================================================== */

.c-slider__slide.is-slide-2 .c-slider__captionBtn {
  margin-top: var(--slider-cta-mt);
}