/* sss110.net スライド高さ調整
---------------------------------------------------------------------------*/
/*
  目的:
  - TOPのスライド画像が大きすぎる印象を抑える
  - Topicsが早めに見えるようにする
  - メニュー調整CSSとは分離して管理する
*/

@media screen and (min-width: 900px) {
	.mainimg {
		height: min(46vw, 520px) !important;
		min-height: 360px !important;
		margin-bottom: 35px !important;
	}

	.mainimg .slick-list,
	.mainimg .slick-track,
	.mainimg .slick-slide,
	.mainimg .slick-slide > div,
	.mainimg .mainimg-slide {
		height: 100% !important;
	}

	.mainimg img,
	.mainimg .slick-slide img,
	.mainimg .mainimg-slide img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* スマホ側は少しだけ控えめにする */
@media screen and (max-width: 600px) {
	.mainimg {
		height: 50vw !important;
		min-height: 240px !important;
		margin-bottom: 32px !important;
	}

	.mainimg .slick-list,
	.mainimg .slick-track,
	.mainimg .slick-slide,
	.mainimg .slick-slide > div,
	.mainimg .mainimg-slide {
		height: 100% !important;
		min-height: 240px !important;
	}
}

@media screen and (max-width: 430px) {
	.mainimg {
		height: 54vw !important;
		min-height: 230px !important;
	}

	.mainimg .slick-list,
	.mainimg .slick-track,
	.mainimg .slick-slide,
	.mainimg .slick-slide > div,
	.mainimg .mainimg-slide {
		min-height: 230px !important;
	}
}