@charset "utf-8";




/*全体の設定
---------------------------------------------------------------------------*/

body {
	margin: 0;padding:0;
	}


/* スライダー
---------------------------------------------------------------------------*/


/* スライダー内の画像ズレ防止 */
.slider {
	line-height: 0; /* ← これも追加。画像下の1px隙間を防ぐ */
}


.slider img {
	display: block;
	width: 100%;
	height: auto;
}

/* スライダーとmenubarの間の余白 */
.swiper,
.swiper-container {
  margin-top: 30px !important;
  padding-top: 0 !important;
  position: relative;
  top: 0;
  z-index: 1;
}




/*メイン画像スライドショー（slickを使用）
---------------------------------------------------------------------------*/

.swiper {
  margin-bottom: 2rem; /* h2との間に余白を作る */
}


.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 60%;   /* デフォルトは60% */
  max-width: 800px; /* 最大幅を制限 */
	
}

@media (min-width: 1200px) {
  .swiper-slide {
    flex: 0 0 50%;  /* 横幅広い場合は中央画像を少し小さくして左右チラ見せ増やす */
  }
}

@media (min-width: 1600px) {
  .swiper-slide {
    flex: 0 0 40%;  /* さらに広い画面では中央画像を小さめに */
  }
}

/* スマホ対応 */
@media (max-width: 900px) {
  .swiper-slide {
    flex: 0 0 100%;  /* 1枚表示 */
    max-width: 100%;
  }
}