/**
 * cl-topslider.css - Ver.1.0
 * トップページ クロスフェードスライダー用CSS
 * 読み込み元: index テンプレート（head-script2.html の後）
 * 依存: csapp109.css（.mainVisual__thumb 等のベーススタイル）
 */

/* --- SP: スライダー非表示、従来の静的画像を表示（csapp109のレイアウトに完全委任） --- */
.mainVisual__image--sp { display: none; }
@media screen and (max-width: 768px) {
  #js-topSlider { display: none; }
  .mainVisual__image--sp { display: block; }
  .mainVisual__image--sp img { width: 100%; height: auto; display: block; }
}

/* --- PC: スライダー表示、高さオーバーライド --- */
@media screen and (min-width: 769px) {
  .mainVisual__thumb { height: 50vh; overflow: hidden; }
}

/* --- スライダーコンテナ: z-index:0 で封じ込め --- */
#js-topSlider {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; z-index: 0;
}
#js-topSlider .mainVisual__slide {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity 2s ease-in-out;
}
#js-topSlider .mainVisual__slide.is-active { opacity: 1; }
#js-topSlider .mainVisual__slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}