@charset "UTF-8";
/* ----- Widget ウィジェットの記述 ----- */

/* ---------- トップページ　メインビジュアル（スライダー） ---------- */

/* ============================= */
/* 初期化前だけ高さとレイアウトを予約 */
/* ============================= */

.w-top-mainvis__slider{
	&:not(.slick-initialized){
		display: flex;
		justify-content: center;
		overflow: hidden;
		
		/* centerPadding: 30% → 中央40% → 全体比率 5:1 */
		aspect-ratio: 5 / 1;
	}
	
	/* centerPadding に合わせて比率変更 */
	@media (max-width: 2000px){
		&:not(.slick-initialized){
			aspect-ratio: 50 / 11;
		}
	}
	@media (max-width: 1200px){
		&:not(.slick-initialized){
			aspect-ratio: 25 / 8;
		}
	}
	@media (max-width: 750px){
		&:not(.slick-initialized){
			aspect-ratio: 2 / 1;
		}
	}
	
	/* 初期化前のスライド幅（centerPaddingと一致させる） */
	&:not(.slick-initialized) > .w-top-mainvis__item{
		flex: 0 0 40%;
		max-width: 40%;
	}

	@media (max-width: 2000px){
		&:not(.slick-initialized) > .w-top-mainvis__item{
			flex-basis: 44%;
			max-width: 44%;
		}
	}
	@media (max-width: 1200px){
		&:not(.slick-initialized) > .w-top-mainvis__item{
			flex-basis: 64%;
			max-width: 64%;
		}
	}
	@media (max-width: 750px){
		&:not(.slick-initialized) > .w-top-mainvis__item{
			flex-basis: 100%;
			max-width: 100%;
		}
	}
}

/* ============================= */
/* 画像表示 */
/* ============================= */

.w-top-mainvis__slider{
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}