@charset "Shift_JIS";
/*
************************************
Mitsuboshi CSS
FileName:	main.css(main.html用)
Version:	2026.03.20
************************************
*/
/* main-image-gallery */
#main-image-gallery{
	margin-bottom: 10px;
	background:#eeeeee;
	width: 98%;			/* 画面幅 */
}
/* main-image-gallery-video */
#main-image-gallery-video {
	object-fit: cover;	/* 画像を歪ませずに枠に収める */
	display: block;		/* 下部の隙間を消す */
	height: 250px;
	width: auto;
}
#main-image-gallery img {
	width: 100%;		/* 親要素（コンテナ）の幅に合わせる */
	object-fit: cover;	/* 画像を歪ませずに枠に収める */
	display: block;		/* 下部の隙間を消す */
}

.container {
	width: 90%; /* 画面幅の90% */
	margin: 0 auto;
}

/* ウィンドウ幅毎に設定するため、コメント
img {
	max-width: 100%;
	height: auto;
}
*/

/* ＜PC用＞	ウィンドウ幅が768px以上の場合に適用 */
@media screen and ( min-width: 768px ) {
	#main-image-gallery img {
		height: 250px;
		width: auto;
	}
}
/* ＜タブレット用＞	ウィンドウ幅が最大767pxまでの場合に適用 */
@media screen and ( min-width: 480px ) and ( max-width: 767px ) {
	#main-image-gallery img {
		height: 400px;
		width: auto;
	}
	/* main-image-gallery-video */
	#main-image-gallery-video {
		height: 400px;
		width: 400px;
	}
}
/* ＜スマートフォン用＞	ウィンドウ幅が最大479pxまでの場合に適用 */
@media screen and ( max-width: 479px ) {
	#main-image-gallery img {
		height: 400px;
		width: auto;
	}
	body { font-size: 14px; }	
	/* main-image-gallery-video */
	#main-image-gallery-video {
		height: 400px;
		width: 400px;
	}
}