/* 260602 カルーセルコンテナのサイズを共通制御 */
/* ===================================================
   シンプル画像4枚カルーセル 専用スタイル
   =================================================== */

/* カルーセル全体のサイズ（PC時） */
#myCustomTestMv {
  width: 100%;
  aspect-ratio: 2880 / 1350; /* 画像の比率を維持 */
  max-height: 600px;         /* PC画面で縦にデカすぎないように600pxで制限 */
  position: relative;
  overflow: hidden;
  background-color: #000000;
  margin: 0;
  padding: 0;
}

.test-slider {
  width: 100%;
  height: 100%;
}

.test-slider .swiper-slide {
  width: 100%;
  height: 100%;
}

.test-slide-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* 画像を枠内にピッタリ綺麗に収める設定 */
.test-slider .swiper-slide picture,
.test-slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center;
}

/* ===================================================
   下部のドット（ページネーション）：シンプルな丸型で拡大・広間隔化
   =================================================== */

/* ドットが並ぶエリア全体の位置調整 */
#myCustomTestMv .test-swiper-pagination {
  bottom: 20px !important;
  z-index: 10;
  text-align: center;
  width: 100%;
}

/* 【すべてのドットの共通設定】 */
#myCustomTestMv .swiper-pagination-bullet {
  width: 10px !important;       /* ★ドットの大きさを 14px */
  height: 10px !important;      /* ★縦横を同じにして正円をキープ */
  background: #ffffff !important; /* 完全な白に */
  opacity: 0.4 !important;        /* 選択されていないドットは少し薄く */
  
  /* ↓★マージン（間隔）を左右 12px（合計24px）に大きく広げました */
  margin: 0 10px !important;       
  
  border-radius: 50% !important;  /* 完全に丸くする */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important; /* 背景に紛れないための影 */
  transition: opacity 0.3s !important; /* 横に広がる動き（widthの変更）を削除し、不透明度の変化だけに */
}

/* 【現在表示されている（アクティブな）ドットの設定】 */
#myCustomTestMv .swiper-pagination-bullet-active {
  width: 10px !important;       /* ★ここがポイント：横に広げず 16px の丸いままにします */
  height: 10px !important;      /* 高さを揃える */
  background: #ffffff !important; /* アクティブ時はパキッと不透明な白に */
  opacity: 1 !important;          /* 100%の濃さにする */
}

/* マウスを乗せたとき（PC用） */
#myCustomTestMv .swiper-pagination-bullet:hover {
  opacity: 0.8 !important;
}


/* --- スマートフォン時（SP）の設定 --- */
@media (max-width: 768px) {
  #myCustomTestMv .test-swiper-pagination {
    bottom: 20px !important;
  }
  
  /* スマホは画面幅に合わせて、ドットのサイズと間隔を少しだけ調節 */
  #myCustomTestMv .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    margin: 0 8px !important; /* スマホでも十分な間隔を確保 */
  }
  #myCustomTestMv .swiper-pagination-bullet-active {
    width: 12px !important;
    height: 12px !important;
  }
}




/* スクロール矢印の配置調整 */
.test-scroll-arrow {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.test-scroll-link img {
  width: 60px; /* 必要に応じてサイズ変更してください */
  height: auto;
}


/* --- スマートフォン時（SP）の出し方切り替え --- */
@media (max-width: 768px) {
  #myCustomTestMv {
    aspect-ratio: 1650 / 2025; /* スマホ画像の比率（縦長）に自動切り替え */
    max-height: none;          /* スマホ時は高さを制限せず画像に合わせる */
  }
  
  #myCustomTestMv .test-swiper-pagination {
    bottom: 15px !important;
  }
  
  .test-scroll-arrow {
    display: none; /* スマホではスクロール矢印を隠す（元サイトの仕様に合わせる場合） */
  }
}



/* ===================================================
   テスト環境専用：左右の矢印ボタンのスタイル
   =================================================== */

/* 矢印共通の設定（色、サイズ、位置） */
#myCustomTestMv .test-swiper-button-prev,
#myCustomTestMv .test-swiper-button-next {
  color: #ffffff !important; /* 矢印の色を白に（VIEWのブランドカラー等に合わせて青系にするなら #004494 などに） */
  background: rgba(0, 0, 0, 0.3); /* ボタンの背景にうっすら半透明の黒を敷いて、白い画像の上でも矢印を見えやすくします */
  width: 50px;
  height: 50px;
  border-radius: 50%; /* まん丸のボタンにします */
  z-index: 10;
  transition: background 0.3s;
}

/* マウスを乗せたときに少し濃くする */
#myCustomTestMv .test-swiper-button-prev:hover,
#myCustomTestMv .test-swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* 矢印の大きさを微調整 */
#myCustomTestMv .test-swiper-button-prev::after,
#myCustomTestMv .test-swiper-button-next::after {
  font-size: 20px !important;
  font-weight: bold;
}

/* 左ボタンの位置調整 */
#myCustomTestMv .test-swiper-button-prev {
  left: 30px !important;
}

/* 右ボタンの位置調整 */
#myCustomTestMv .test-swiper-button-next {
  right: 30px !important;
}

/* --- スマホ時は矢印が邪魔になるので隠す場合（お好みで） --- */
@media (max-width: 768px) {
  #myCustomTestMv .test-swiper-button-prev,
  #myCustomTestMv .test-swiper-button-next {
    display: none !important; /* スマホ画面では指でスワイプできるため、矢印を非表示にして画像を広く見せます */
  }
}