@charset "UTF-8";
/*
 * 事業案内の詳細ページ（single-works.php）の追加分。旧サイトの CSS（style.css）はそのまま使う
 */

/* テンプレートA「メイン画像の下の写真」：メイン画像は大きく、下の写真は1枚なら縦に、2枚以上なら2列（スマホも同じ） */
.detail-blocks .img-box-top.has-sub {
	width: calc(600px + 1.65em);
	max-width: 50%;
	padding-left: 1.65em;
	margin-bottom: 1em;
	box-sizing: border-box;
}
.detail-blocks .img-box-top.has-sub img {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
}
.q-img-sub {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9em;
	margin-top: .9em;
}
.q-img-sub.is-single {
	grid-template-columns: minmax(0, 1fr);
}
.q-img-sub figure {
	margin: 0;
}
/* 2列のときは縦横比をそろえて、高さのばらつきをなくす（はみ出した部分は切り取る） */
.detail-blocks .img-box-top.has-sub .q-img-sub:not(.is-single) img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.q-img-sub figcaption {
	margin-top: .4em;
	font-size: 1.2rem;
	line-height: 1.5;
}

@media only screen and (max-width: 960px) {
	.detail-blocks .img-box-top.has-sub {
		width: auto;
		max-width: 600px;
		padding-left: 0;
		margin-bottom: 1.65em;
	}
}