/* -----------------------------------------
slider (修正版)
----------------------------------------- */
/* 外側のコンテナ */
.mySwiper {
  width: 100%;
  max-width: 950px; /* 横幅の制限はラッパーではなく本体にかける */
  margin: 0 auto;
  overflow: hidden; /* はみ出しを隠す */
  position: relative;
}

.swiper-wrapper {
  /* ここへの flex 指定や max-width 指定は Swiper の挙動を邪魔するので削除 */
}

/* スライドの中身 */
.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* スライド自体がボタンを邪魔しないようにする */
.swiper-slide {
    user-select: none;
}

/* arrow (矢印のカスタマイズ) */
/* Swiperボタン全体のエリア設定 */
.swiper-button-prev,
.swiper-button-next {
  display: flex !important;       /* 中央寄せのためにflexを使用 */
  align-items: center;            /* 垂直方向中央 */
  justify-content: center;        /* 水平方向中央 */
  
  width: 30px !important;         /* 四角いエリアの幅 */
  height: 60px !important;        /* 四角いエリアの高さ */
  background-color: rgba(255, 255, 255, 0.7);      /* 背景色 */
  z-index: 1000 !important;
  cursor: pointer !important;
  pointer-events: auto !important;

    /* Swiper標準の余白をリセット */
  left: 0 !important;
  right: 0 !important;

  /* 上下中央の位置調整（Swiperのデフォルトを利用） */
  /* margin-top: calc(-1 * (var(--swiper-navigation-size) / 2));  */
  /* 必要に応じて調整 */
  top: var(--swiper-navigation-top-offset, 45%);
}

/* 右ボタンは右端に固定 */
.swiper-button-next {
  left: auto !important; /* leftをリセット */
  right: 0 !important;
}

/* 左ボタンは左端に固定 */
.swiper-button-prev {
  right: auto !important; /* rightをリセット */
  left: 0 !important;
}

/* 矢印（borderで作った図形）の共通設定 */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";                    /* デフォルトのフォントアイコンを消す */
  display: block;
  width: 12px;                    /* 矢印自体のサイズ */
  height: 12px;                   /* 矢印自体のサイズ */
  border-top: 3px solid #999;  /* 矢印の色 */
  border-right: 3px solid #999; /* 矢印の色 */
}

/* 左矢印：135度回転させて左を向かせる */
.swiper-button-prev::after {
  transform: rotate(-135deg);
  margin-left: 5px;               /* 微調整（視覚的な中央揃え） */
}

/* 右矢印：45度回転させて右を向かせる */
.swiper-button-next::after {
  transform: rotate(45deg);
  margin-right: 5px;              /* 微調整（視覚的な中央揃え） */
}

/* デフォルトの矢印アイコンを非表示にする（Swiperの仕様対策） */
.swiper-button-prev::after, 
.swiper-button-next::after {
  font-family: none !important; 
}

/* 画面幅768px以下の設定 */
@media screen and (max-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 20px !important;  /* 四角いエリアを小さく */
    height: 45px !important;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    width: 8px !important;   /* 中の矢印も一回り小さく */
    height: 8px !important;
    border-top-width: 2px !important; /* 線の太さも調整 */
    border-right-width: 2px !important;
  }

  /* 中央寄せの微調整をリセットまたは変更 */
  .swiper-button-prev::after {
    margin-left: 2px;
  }
  .swiper-button-next::after {
    margin-right: 2px;
  }
}

/* dots (ドットのカスタマイズ) */

/* 親要素：ページネーションを表示する下の余白を作る */
.swiper-container-wrapper {
  position: relative;
  /*padding-bottom: 40px;  ページネーションを置くスペース */
}

.swiper-pagination-bullet { 
  /* span ではなく .swiper-pagination-bullet を使う */
  width: 12px;
  height: 12px;
  margin: 0 7px !important;
  border: 2px solid #fff;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #0080ff;
}

/* ドット（ページネーション）を強制表示 */
.swiper-pagination {
    bottom: 10px !important; /* 位置を調整 */
    display: block !important;
    visibility: visible !important;
    z-index: 1000;
}

/* ページネーションのスタイル調整 */
.swiper-pagination {
  position: relative !important; /* 絶対配置を解除 */
  bottom: 0 !important;          /* 位置をリセット */
  margin-top: 20px;              /* 画像との間の距離 */
  text-align: center;            /* 中央寄せ */
}

/* ドット1個1個のサイズと色 */
.swiper-pagination-bullet {
    width: 18px !important;
    height: 12px !important;
    background: #c8c8c8 !important; /* 目立つ色に変更 */
    border-radius: 0 !important;
    border: none !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #666 !important;
}

/* Swiperが動く前でも後でも、ドットを中央に固定する */
.modaal-container .swiper-pagination {
    left: 0 !important;
    width: 100% !important;
    text-align: center !important; /* インラインブロックのドットを中央へ */
    display: block !important;    /* flexではなくblockの方が安定します */
    bottom: 10px !important;
    line-height: 1 !important;
}

/* ドット自体の設定 */
.modaal-container .swiper-pagination-bullet {
    display: inline-block !important; /* 横並びにしてtext-alignを効かせる */
    margin: 0 5px !important;
    float: none !important; /* 万が一浮いていたら解除 */
}

/* 【重要】2回目以降の「ガタつき」を隠すおまじない */
.mySwiper {
  margin-bottom: 0;
    opacity: 0; /* 最初は透明にしておく */
    transition: opacity 0.01s; /* パッと出すためのアニメーション */
}

.mySwiper.is-active {
    opacity: 1; /* 準備ができたら表示 */
}