@charset "utf-8";
/*
 * 最新情報の画像（チラシと写真）　見た目
 *
 * ・「最新情報」と「お知らせ」の一覧で、画像を足したページにだけ読み込みます。
 * ・名前はすべて tsg- で始めます。ほかの場所には効きません。
 * ・パソコンとスマホの切りかわりは７５０pxです（サイトのテーマに合わせました）。
 * ・細い灰色の枠は、トップの活動欄の小さな画像と同じ色（#cacccb）です。
 * ・チラシ：パソコンで幅８０px、スマホで幅６０px。全体を縮めて見せ、切り取りません。
 * ・写真　：横長の枠（縦横２対３）で、パソコンで幅１２０px、スマホで幅８０px。枠に合わせて端を切りそろえます。
 * ・幅は、枠を含めた大きさです。
 */

/* 文字のかたまりと画像を横に並べ、上下の真ん中をそろえる */
.tsg-row {
	display: flex;
	align-items: center;
}

.tsg-text {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * 画像のリンク。右端に置く。
 * テーマの「.wPosts li a」（点線の下線と余白）は、画像のリンクでは止める。
 */
.wPosts li a.tsg-thumb {
	display: block;
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	border: 0;
	padding: 0;
	line-height: 0;
}

.tsg-thumb-img {
	display: block;
	box-sizing: border-box;
	max-width: none;
	height: auto;
	border: 1px solid #cacccb;
	background: #ffffff;
}

/* チラシ：縦横の割合は、画像ごとに決めてある（style の aspect-ratio）。全体を縮めて見せる */
.tsg-thumb--chirashi .tsg-thumb-img {
	object-fit: contain;
}

/* 写真：横長の枠（縦横２対３）に合わせて、端を切りそろえる */
.tsg-thumb--shashin .tsg-thumb-img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ===== パソコン（７５１px以上） ===== */
@media print, screen and (min-width: 751px) {

	.tsg-row {
		gap: 20px;
	}

	.tsg-thumb--chirashi .tsg-thumb-img {
		width: 80px;
	}

	.tsg-thumb--shashin .tsg-thumb-img {
		width: 120px;
	}
}

/*
 * ===== スマホ（７５０px以下） =====
 * スマホは幅がせまいので、日付とラベルの行は今の幅のまま（ラベルが折り返さないように）にし、
 * 画像は題名の横に置いて、題名の上下の真ん中にそろえる。
 * 文字のかたまりの囲み（.tsg-text）を外し、日付・ラベル・題名・画像を、じかに並べる。
 */
@media screen and (max-width: 750px) {

	.tsg-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 10px;
		align-items: center;
	}

	.tsg-text {
		display: contents;
	}

	.tsg-row .date {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.tsg-row .tags {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.tsg-row .title {
		grid-column: 1;
		grid-row: 3;
	}

	.wPosts li a.tsg-thumb {
		grid-column: 2;
		grid-row: 3;
	}

	.tsg-thumb--chirashi .tsg-thumb-img {
		width: 60px;
	}

	.tsg-thumb--shashin .tsg-thumb-img {
		width: 80px;
	}
}