/* --- Swiper全体のサイズ制限 --- */
.schedule-photo {
  width: 100%;
  height: 50vh;
  position: relative;
  /* ページネーションの基準点 */
  overflow: visible;
  display: flex;
  justify-content: center;
  background: transparent;
  margin-bottom: 80px;
  /* ドットのための余白 */
}

.swiper {
  /* PCでは横幅を絞り、中央に配置 */
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden !important;
  position: static;

  /* ページネーションの基準を親に譲る */
  hero-slider-wrap {
    width: 80%;
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 40px;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    /* 外側の影 */
    border-radius: 12px;
    overflow: hidden;
  }


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

  .hero-slide-img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    display: block;

  }

  /* --- ページネーション（ドット）の設定 --- */
  .swiper-pagination {
    bottom: -50px !important;
    left: 50% !important;
    transform: translateX(-50%);
    position: absolute !important;
    width: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
  }

  .hero-slider-wrap .swiper-pagination {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;

  }

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #8B6914;
    opacity: 0.5;
    margin: 0 5px !important;
  }

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

  /* --- レスポンシブ対応 (スマホ・タブレット) --- */
  @media screen and (max-width: 768px) {
    .schedule-photo {
      /* スマホでは高さをvhではなく、中身（アスペクト比）に合わせる */
      height: auto;
      min-height: 200px;
      margin-bottom: 60px;
      /* 余白を少し詰める */
    }

    .swiper {
      /* スマホでは画像を大きく見せるため幅を広げる */
      width: 100%;
      /* アスペクト比を 4:3 に固定（高さ自動の場合） */
      aspect-ratio: 4 / 3;
    }

    .photo-frame {
      border-width: 3px;
      /* 枠線を少し細く */
    }

    .swiper-pagination {
      bottom: -40px !important;
      /* 位置を微調整 */
    }

    .swiper-pagination-bullet {
      width: 10px;
      /* ドットを少し小さく */
      height: 10px;
    }
  }

  /* さらに小さい画面 */
  @media screen and (max-width: 480px) {
    .swiper {
      width: 100%;
      /* 横幅いっぱい */
    }

    opacity: 1;
    background: #8B6914;

  }
}

/* スライド自体を「基準の箱」にする */
.swiper-slide {
  position: relative;
  width: 100%;
}

/* テキストエリアのスタイル */
.slide-content {
  position: absolute;
  top: 20%;
  /* 真ん中(50%)より少し上に配置 */
  left: 50%;
  transform: translate(-50%, -50%);
  /* 自分のサイズ分戻して完全に中央寄せ */
  z-index: 10;
  text-align: center;
  width: 90%;
  /* 横幅いっぱいに広がらないよう制限 */
  pointer-events: none;
  /* テキストがスライド操作を邪魔しないようにする */
}

/* 文字の見た目調整 */
.slide-content h2 {
  color: #ffffff;
  font-size: 2.5rem;
  margin: 0;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
  /* 画像の上でも読めるように影をつける */
  font-family: "Hiragino Mincho ProN", serif;
}

.slide-content p {
  color: #ffffff;
  font-size: 1.2rem;
  margin-top: 10px;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
}

/* スマホ用のサイズ調整 */
@media screen and (max-width: 768px) {

  .hero-slide-img,
  .photo-frame img {
    height: auto !important;
    /* 高さを固定しない */
    max-height: 400px;
    /* 縦長になりすぎない上限 */
    object-fit: contain !important;
    /* 絶対に全体を表示する */
    width: 100%;
  }
}