@charset "utf-8";
/**
 * Swiper テーマ用カスタマイズ
 * Swiper 14 本体（swiper-bundle.min.css）は編集せず、旧 swiper.css（5.4.5）に
 * 直接書かれていた独自スタイルをこちらに移植しています。
 * style.css より後に読み込むこと。
 */

/* 前へ・次へボタン
------------------------------------------------------------ */
.swiper-button-prev,
.swiper-button-next {
  width: 70px;
  height: 70px;
}
@media screen and (max-width: 767px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 40px;
    height: 40px;
  }
}

/* Swiper 14 が自動挿入する SVG 矢印は使わない（画像の矢印を使用） */
.swiper-button-prev .swiper-navigation-icon,
.swiper-button-next .swiper-navigation-icon {
  display: none;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  width: 70px;
  height: 70px;
}
@media screen and (max-width: 767px) {
  .swiper-button-prev:after,
  .swiper-button-next:after {
    width: 40px;
    height: 40px;
    background-size: cover !important;
  }
}
.swiper-button-prev:after {
  background: url("../img/common/arrow_s.svg");
  transform: rotate(180deg);
}
.swiper-button-next:after {
  background: url("../img/common/arrow_s.svg");
}

/* ボタン位置（Swiper 14 の .swiper-horizontal 系の指定より優先させる） */
.swiper-button-prev,
.swiper-horizontal .swiper-button-prev,
.swiper-horizontal ~ .swiper-button-prev {
  left: auto;
  right: 85px;
}
@media screen and (max-width: 767px) {
  .swiper-button-prev,
  .swiper-horizontal .swiper-button-prev,
  .swiper-horizontal ~ .swiper-button-prev {
    left: 5px;
    right: auto;
  }
}
.swiper-button-next,
.swiper-horizontal .swiper-button-next,
.swiper-horizontal ~ .swiper-button-next {
  left: auto;
  right: 5px;
}