@charset "UTF-8";

/*------------------------------------------------------
	トップページ メインスライダー（2000px × 600px 画像対応版）
--------------------------------------------------------*/

/* スライダー全体の囲み（親要素） */
.slider-container {
  position: relative;
  width: 100%;
  height: auto;             /* 固定高さを解除して自動計算 */
  background-color: #ffffff;
  margin-top: 75px;        /* PC用ヘッダーの下余白 */
}

@media (max-width: 991px) {
  .slider-container {
    margin-top: 0px;
  }
}

/* スライド画像が表示されるエリア（2000×600 の比率を常に維持） */
.slider-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 450; /* ★ここを新しい画像の縦幅に合わせて変更 */
  height: auto;
  overflow: hidden;
  background-color: #ffffff;
}

/*------------------------------------------------------
	スライド挙動設定
--------------------------------------------------------*/
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%); /* 右側に待機 */
  z-index: 1;
  background-color: #ffffff;
}

/* リンク要素の下隙間防止 */
.slide a {
  display: block;
  width: 100%;
  height: 100%;
}

/* アクティブなスライド：右からスライドイン */
.slide.active {
  transform: translateX(0);
  z-index: 3;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 1つ前のスライド（裏に固定する画像） */
.slide.prev {
  transform: translateX(0);
  z-index: 2;
}

/* スライド内の画像（歪み・余計な拡大を防止） */
.slide img {
  width: 100%;
  height: 100%;
  display: block;          /* インライン要素特有の隙間を排除 */
  object-fit: cover;       /* 枠いっぱいに綺麗にフィット */
  object-position: center; /* 中央基準 */
}

/*------------------------------------------------------
	切り替えボタン（ドットナビゲーション）
--------------------------------------------------------*/
.slider-dots {
  width: 100%;
  height: 40px;            /* ドット専用エリアの高さ */
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.slider-dots .dot {
  width: 12px;
  height: 12px;
  background-color: #cccccc;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  outline: none;
}

/* 表示中（Active）のボタン */
.slider-dots .dot.active {
  background-color: #206080;
}

/*------------------------------------------------------
	スマホ表示用の調整（767px以下）
--------------------------------------------------------*/
.sp-only {
  display: none;
}

.pc-only {
  display: block;
}

@media (max-width: 767px) {
  .pc-only {
    display: none !important;
  }

  .sp-only {
    display: block !important;
  }

  /* スマホ用バナー表示エリア */
  .sp-banner-area {
    width: 90%;
    margin: 20px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
.sp-banner-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    /* 2つの影をカンマで繋いで重ねがけ */
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
    margin: 35px 0;
  }
}

/*------------------------------------------------------
	スライダー画像の hover 時の透明度変化を無効化
--------------------------------------------------------*/
.slider-container a,
.slider-container a:hover,
.slider-container img,
.slider-container img:hover,
.slider-container a:hover img {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}