/* ===== KV Swiper Base ===== */

.kv-slider {
  position: relative;
  width: 100%;
}

.kv-slider .swiper {
  width: 100%;
  overflow: hidden;
}

.kv-slider .swiper-slide a {
  display: block;
}

.kv-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== Pagination：画像の外（下） ===== */

.kv-slider .swiper-pagination {
  position: static;
  margin-top: 12px;
  text-align: center;
}

/* ===== Arrow Custom ===== */

/* 画像の外に配置（左右） */
.kv-slider .swiper-button-prev,
.kv-slider .swiper-button-next {
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  z-index: 10;

  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
  transition: 0.2s ease;

  /* Swiperデフォルト背景・文字を完全無効化 */
  background: none !important;
}

/* 左右位置（画像の外に出す） */
.kv-slider .swiper-button-prev {
  left: -64px;
}
.kv-slider .swiper-button-next {
  right: -64px;
}

/* ===== SwiperデフォルトSVGを完全に消す（重要） ===== */

.kv-slider .swiper-button-prev svg,
.kv-slider .swiper-button-next svg {
  display: none !important;
}

/* ===== 丸背景 ===== */

.kv-slider .swiper-button-prev::before,
.kv-slider .swiper-button-next::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ===== Swiperデフォルト矢印を完全無効化 ===== */

.kv-slider .swiper-button-prev::after,
.kv-slider .swiper-button-next::after {
  content: "" !important;
  font-size: 0 !important;
}

/* ===== 自作V字矢印（最終的に表示されるのはこれだけ） ===== */

.kv-slider .swiper-button-prev::after,
.kv-slider .swiper-button-next::after {
  content: "";
  width: 10px;
  height: 10px;
  border: solid rgba(0, 0, 0, 0.7);
  border-width: 3px 3px 0 0;
  z-index: 1;
}

.kv-slider .swiper-button-prev::after {
  margin-left: 4px;
  transform: rotate(-135deg);
}

.kv-slider .swiper-button-next::after {
  margin-right: 4px;
  transform: rotate(45deg);
}

/* hover（任意） */
.kv-slider .swiper-button-prev:hover::before,
.kv-slider .swiper-button-next:hover::before {
  background: rgba(255, 255, 255, 0.9);
}

/* ===== Swiperページネーションカラー ===== */
.swiper-pagination-bullet {
  background: #ffffff;
}
.swiper-pagination-bullet-active {
  background: #0099ff;
}

/* ===== スライダー上部 タイトル枠 ===== */
h2.ttl_join_slide {
  color: #fff;
  line-height: 1.4;
  margin: 40px auto 20px;
  padding: 8px 10px 4px;
  background-image: linear-gradient(
    90deg,
    rgba(0,0,0,1),
    rgba(71,71,71,1) 30% 70%,
    rgba(0,0,0,1)
  );
}

h2.ttl_join_slide .join_slide_lead,
h2.ttl_join_slide .join_slide_main {
  font-family: Hiragino sans;
  display: block;
}

h2.ttl_join_slide .join_slide_lead {
  font-size: 28px;
  font-weight: var(--fw-bold);
}

h2.ttl_join_slide .join_slide_main {
  font-size: 36px;
  font-weight: var(--fw-bold);
}

@media screen and (max-width: 768px) {
  h2.ttl_join_slide {
    line-height: 1.3;
    margin: 30px auto 10px;
    padding: 5px 10px 2px;
  }

  h2.ttl_join_slide .join_slide_lead {
    font-size: 15px;
  }

  h2.ttl_join_slide .join_slide_main {
    font-size: 22px;
    font-weight: var(--fw-bold);
  }
}

/* ===== Mobile：矢印は表示するが位置とサイズを調整 ===== */
@media screen and (max-width: 768px) {
  .kv-slider .swiper-button-prev,
  .kv-slider .swiper-button-next {
    width: 32px;
    height: 32px;
  }

  .kv-slider .swiper-button-prev {
    left: -14px;   /* 画像内に少し被せる */
  }

  .kv-slider .swiper-button-next {
    right: -14px;
  }

  .kv-slider .swiper-button-prev::after,
  .kv-slider .swiper-button-next::after {
    width: 6px;
    height: 6px;
    border-width: 2px 2px 0 0;
  }

    .kv-slider .swiper-button-prev::before,
    .kv-slider .swiper-button-next::before {
    background: rgba(255, 255, 255, 0.7);
    }

}