/* ---------------------------------------------------------------------- */
/* お知らせ（全記事一覧） */
/* category.cssを土台に、カテゴリーバッジまわりの差分のみを記述 */
/* ---------------------------------------------------------------------- */

/* カテゴリカラー */
:root {
	--ability: var(--rd); /* 技能士会 */
	--classroom: var(--gd); /* 講習・講座・教室 */
	--initiative: var(--gr); /* 各種取り組み */
}

/* ベース */
.category {
	background-color: var(--gy);
}

.category-content {
	background-color: var(--wh);
}

/* 見出し */
h1 {
	margin-bottom: 40px;
}

/* リスト */
.category-list li a {
	column-gap: 16px;
	grid-template-areas:
		"time category-tag"
		"title title";
	grid-template-columns: auto 1fr;
	padding-top: 10px;
}

.category-list li time {
	grid-area: time;
}

.category-list li .category-tag {
	grid-area: category-tag;
}

.category-list li a p {
	grid-area: title;
}

.category-list li a p img {
	display: grid;
	/*aspect-ratio: 16 / 9;*/
	object-fit: cover;
}


/* カテゴリーバッジ */
.category-tag {
	align-items: center;
	background-color: var(--bl);
	border-radius: var(--r-pill);
	color: var(--wh);
	display: flex;
	font-size: 11px;
	font-weight: 600;
	justify-content: center;
	line-height: 15px;
	padding: 2px 20px;
	width: 150px;
}

.category-tag.ability {
	background-color: var(--ability);
}

.category-tag.classroom {
	background-color: var(--classroom);
}

.category-tag.initiative {
	background-color: var(--initiative);
}

/* 記事なし */
.no-post {
	font-size: 14px;
	line-height: 180%;
	padding: 20px 0;
	text-align: center;
}

@container (min-width: 769px) {

	/* 見出し */
	h1 {
		margin-bottom: 70px;
	}

	/* リスト */
	.category-list li a {
		padding-top: 40px;
	}

	/* 記事なし */
	.no-post {
		font-size: 18px;
		padding: 40px 0;
	}

}