/* ===== スライダー外側背景：下のグラデーションと統一 ===== */
.re-top_bg-area_gradation {
  background-image: linear-gradient(#69b7e5, #eaf7ff);
}

.re-top_slider-area {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: transparent;
  padding: 24px 0 24px 0; /* 上下余白を統一 */
}

/* ===== Swiperコンテナ ===== */
.re-top-swiper {
  max-width: 1160px;  /* 800px + 120px×2 + 余白 */
  margin: 0 auto;
  padding: 0 120px;
  overflow: visible !important;
}

/* ===== スライド基本スタイル ===== */
.re-top-swiper .swiper-slide {
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.88);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 4px 16px rgba(0, 80, 160, 0.15);
}

/* アクティブスライドを大きく表示 */
.re-top-swiper .swiper-slide-active {
  transform: scale(1);
  box-shadow: 0 8px 32px rgba(0, 80, 160, 0.3);
  z-index: 2;
}

.re-top-swiper .swiper-slide figure {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.re-top-swiper .swiper-slide figure a {
  display: block;
}

.re-top-swiper .swiper-slide img {
  width: 100%;
  height: 450px;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
}

/* ===== 左右ナビゲーションボタン ===== */
.re-top-swiper .swiper-button-prev,
.re-top-swiper .swiper-button-next {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: #0078d2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: background 0.25s, box-shadow 0.2s; /* transformは除外して位置固定 */
  top: 50%;
  transform: translateY(-50%); /* 垂直中央に固定 */
  margin-top: 0;
}

.re-top-swiper .swiper-button-prev {
  left: 150px;
}

.re-top-swiper .swiper-button-next {
  right: 150px;
}

.re-top-swiper .swiper-button-prev:hover,
.re-top-swiper .swiper-button-next:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  /* transformなし：ホバー時も位置を動かさない */
}

.re-top-swiper .swiper-button-prev::after,
.re-top-swiper .swiper-button-next::after {
  font-size: 15px;
  font-weight: bold;
  color: #0078d2;
}

/* ===== ページネーション（画像の下に配置） ===== */
.re-top-swiper .swiper-pagination {
  position: relative; /* 画像内部から切り離す */
  bottom: auto;
  margin-top: 16px;
  text-align: center;
}

.re-top-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  border: 2px solid rgba(0, 120, 210, 0.5);
  transition: transform 0.2s, background 0.2s;
  margin: 0 5px;
}

.re-top-swiper .swiper-pagination-bullet-active {
  background: #0078d2;
  border-color: #0078d2;
  transform: scale(1.4);
}

/* ===== モバイル対応 ===== */
@media (max-width: 768px) {
  .re-top-swiper {
    padding: 0; /* 両サイド余白なし・画像全幅表示 */
  }

  .re-top-swiper .swiper-slide {
    transform: scale(1); /* モバイルでは縮小しない */
    border-radius: 0;    /* 角丸なし・全画面表示 */
  }

  .re-top-swiper .swiper-slide-active {
    transform: scale(1);
    box-shadow: none;
  }

  .re-top-swiper .swiper-slide img {
    /*aspect-ratio: 4 / 3;*/  /* 縦長を抑える */
    height: auto;
    max-height: 280px;    /* 高さを制限 */
    object-fit: cover;
  }

  .re-top-swiper .swiper-button-prev {
    left: 8px;
  }

  .re-top-swiper .swiper-button-next {
    right: 8px;
  }

  .re-top-swiper .swiper-button-prev,
  .re-top-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
  }

  .re-top-swiper .swiper-button-prev::after,
  .re-top-swiper .swiper-button-next::after {
    font-size: 12px;
  }

  /* モバイルではページネーションを非表示 */
  .re-top-swiper .swiper-pagination {
    display: none;
  }
}






/* ===== re-top02-swiper（セクション3スライダー） ===== */
.re-top_slider02_area {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: transparent;
  padding: 24px 0;
}

.re-top02-swiper {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0;          /* paddingを削除 */
  overflow: hidden !important;  /* visibleをやめる */
}

.re-top02-swiper .swiper-slide {
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.88);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 4px 16px rgba(0, 80, 160, 0.15);
}

.re-top02-swiper .swiper-slide-active {
  transform: scale(1);
  box-shadow: 0 8px 32px rgba(0, 80, 160, 0.3);
  z-index: 2;
}

.re-top02-swiper .swiper-slide figure {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.re-top02-swiper .swiper-slide img {
  width: 100%;
  aspect-ratio: 1200 / 440;
  object-fit: cover;
  display: block;
}

.re-top02-swiper .swiper-button-prev,
.re-top02-swiper .swiper-button-next {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: #0078d2;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: background 0.25s, box-shadow 0.2s;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

.re-top02-swiper .swiper-button-prev { left: 50px; }  /* 120px - 48px/2 = 96px... 微調整 */
.re-top02-swiper .swiper-button-next { right: 50px; }

.re-top02-swiper .swiper-button-prev:hover,
.re-top02-swiper .swiper-button-next:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.re-top02-swiper .swiper-button-prev::after,
.re-top02-swiper .swiper-button-next::after {
  font-size: 15px;
  font-weight: bold;
  color: #0078d2;
}

.re-top02-swiper .swiper-pagination {
  position: relative;
  bottom: auto;
  margin-top: 16px;
  text-align: center;
}

.re-top02-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  border: 2px solid rgba(0, 120, 210, 0.5);
  transition: transform 0.2s, background 0.2s;
  margin: 0 5px;
}

.re-top02-swiper .swiper-pagination-bullet-active {
  background: #0078d2;
  border-color: #0078d2;
  transform: scale(1.4);
}

/* モバイル対応 */
@media (max-width: 768px) {
  .re-top02-swiper {
    padding: 0;
  }

  .re-top02-swiper .swiper-slide {
    transform: scale(1);
    border-radius: 0;
  }

  .re-top02-swiper .swiper-slide-active {
    transform: scale(1);
    box-shadow: none;
  }

  .re-top02-swiper .swiper-button-prev { left: 8px; }
  .re-top02-swiper .swiper-button-next { right: 8px; }

  .re-top02-swiper .swiper-button-prev,
  .re-top02-swiper .swiper-button-next {
    width: 36px;
    height: 36px;
  }

  .re-top02-swiper .swiper-button-prev::after,
  .re-top02-swiper .swiper-button-next::after {
    font-size: 12px;
  }

  .re-top02-swiper .swiper-pagination {
    display: none;
  }
}






/* ===== re-loop_area（CSS無限スクロール） ===== */
.re-loop_area {
  width: 100%;
  overflow: hidden;
}

.re-loop-track {
  display: flex;
  gap: 16px;
  /* 5枚 × (335px + 16px) = 1755px */
  animation: loopScroll 18s linear infinite;
  width: max-content;
}

.re-loop-track:hover {
  animation-play-state: paused; /* ホバーで一時停止 */
}

@keyframes loopScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-1755px); } /* 1セット分の幅 */
}

.re-loop_box {
  flex-shrink: 0;
}

.re-loop_box figure {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.re-loop_box figure a {
  display: block;
}

.re-loop_box img {
  width: 335px;
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: opacity 0.2s;
}

.re-loop_box img:hover {
  opacity: 0.85;
}







/* ===== ツアー・島スライダー共通 ===== */

/* 海外ツアー */
.re-top_tour-area {
  position: relative;
  overflow: hidden; /* はみ出しクリップ */
}

.re-tour-swiper {
  width: calc(100% - 80px); /* 両側40px分を引く */
  margin: 0 auto;
  overflow: visible;
}

.re-tour-swiper-prev,
.re-tour-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, transform 0.2s;
}

.re-tour-swiper-prev { left: 0; }
.re-tour-swiper-next { right: 0; }

.re-tour-swiper-prev:hover,
.re-tour-swiper-next:hover {
  background: rgba(0,0,0,0.7);
  transform: translateY(-50%) scale(1.08);
}

.re-tour-swiper-prev::after,
.re-tour-swiper-next::after {
  font-family: swiper-icons;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.re-tour-swiper-prev::after { content: 'prev'; }
.re-tour-swiper-next::after { content: 'next'; }

.re-tour-swiper-prev.swiper-button-disabled,
.re-tour-swiper-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

.re-tour-swiper .swiper-pagination { display: none; }


/* 国内ツアー */
.re-in-top_tour-area {
  position: relative;
  overflow: hidden;
}

.re-in-tour-swiper {
  width: calc(100% - 80px);
  margin: 0 auto;
  overflow: visible;
}

.re-in-tour-swiper-prev,
.re-in-tour-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, transform 0.2s;
}

.re-in-tour-swiper-prev { left: 0; }
.re-in-tour-swiper-next { right: 0; }

.re-in-tour-swiper-prev:hover,
.re-in-tour-swiper-next:hover {
  background: rgba(0,0,0,0.7);
  transform: translateY(-50%) scale(1.08);
}

.re-in-tour-swiper-prev::after,
.re-in-tour-swiper-next::after {
  font-family: swiper-icons;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.re-in-tour-swiper-prev::after { content: 'prev'; }
.re-in-tour-swiper-next::after { content: 'next'; }

.re-in-tour-swiper-prev.swiper-button-disabled,
.re-in-tour-swiper-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

.re-in-tour-swiper .swiper-pagination { display: none; }




/* 島スライダー */
.re-island-area {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.re-island-swiper {
  width: 100%;
  overflow: hidden;
  position: relative; /* ボタンの基準をこちらに */
}

.re-island-swiper .re-island-box figure {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.re-island-swiper .re-island-box figure a {
  display: block;
}

.re-island-swiper .re-island-box img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

.re-island-swiper-prev,
.re-island-swiper-next {
  position: absolute;
  top: 50%;           /* 画像高さ350pxの中央 */
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  background: rgba(255, 120, 0, 0.85);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, transform 0.2s;
}

.re-island-swiper-prev { left: 8px; }
.re-island-swiper-next { right: 8px; }

.re-island-swiper-prev:hover,
.re-island-swiper-next:hover {
  background: rgba(220, 80, 0, 1);
  transform: translateY(-50%) scale(1.08);
}

.re-island-swiper-prev::after,
.re-island-swiper-next::after {
  font-family: swiper-icons;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}

.re-island-swiper-prev::after { content: 'prev'; }
.re-island-swiper-next::after { content: 'next'; }

.re-island-swiper-prev.swiper-button-disabled,
.re-island-swiper-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

.re-island-swiper .swiper-pagination { display: none; }