/* トップページ（[cslab_home_games] / [cslab_home_topics]）。home.php がトップでだけ読み込む。
   色: 紺 #10213f はアイキャッチと同系統。塗り #2f6fd0 / 文字 #1d4f9c はハブの lab_sites() と同じ値。 */

.cslab-gates {
	--gate-ink: #10213f;
	--gate-line: rgba(255, 255, 255, .16);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 1.5em 0 .75em;
}
.cslab-gate {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 6px;
	background: var(--gate-ink);
	color: #fff;
}
.cslab-gate__visual {
	position: relative;
	aspect-ratio: 16 / 8;
	background: #1a2f55;
}
.cslab-gate__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 写真の下端を紺へつなげ、名前を写真に少し重ねる */
.cslab-gate__visual::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient(to bottom, rgba(16, 33, 63, 0), var(--gate-ink));
}
.cslab-gate__body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	margin-top: -2.2em;
	padding: 0 1.25em 1.25em;
}
.post_content .cslab-gate__name {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5em;
	margin: 0 0 .35em;
	font-size: 1.45em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
}
.cslab-gate__name span {
	flex: none;
	padding: .15em .5em;
	border: 1px solid var(--gate-line);
	border-radius: 3px;
	font-size: .55em;
	font-weight: 700;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .8);
}
.post_content .cslab-gate__lead {
	margin: 0 0 .9em;
	font-size: .88em;
	line-height: 1.7;
	color: rgba(255, 255, 255, .78);
}
.post_content .cslab-gate__players {
	margin: 0 0 1em;
	padding: .55em 0;
	border-top: 1px solid var(--gate-line);
	border-bottom: 1px solid var(--gate-line);
	font-size: .88em;
	color: rgba(255, 255, 255, .78);
}
.cslab-gate__players strong {
	margin: 0 .1em;
	font-size: 1.35em;
	font-variant-numeric: tabular-nums;
	color: #fff;
}
.cslab-gate__players small {
	margin-left: .25em;
	font-size: .85em;
	opacity: .7;
}
.post_content .cslab-gate__links {
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}
.post_content .cslab-gate__links li {
	margin: 0;
	padding: 0;
}
.post_content .cslab-gate__links li::before {
	content: none;
}
.post_content .cslab-gate__links a {
	display: block;
	padding: .5em 0;
	font-size: .9em;
	color: #fff;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-underline-offset: .25em;
}
.post_content .cslab-gate__links a.cslab-gate__primary {
	margin-bottom: .35em;
	padding: .7em 1em;
	border-radius: 4px;
	background: #2f6fd0;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}
.post_content .cslab-gate__links a:hover {
	text-decoration-color: #fff;
}
.post_content .cslab-gate__links a.cslab-gate__primary:hover {
	background: #3a7ee6;
}
.post_content .cslab-gate__links a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.post_content .cslab-gates__compare {
	margin: 0 0 .25em;
	font-size: .95em;
}
.post_content .cslab-gates__credit {
	margin: 0 0 2em;
	font-size: .72em;
	color: #888;
}

/* 困りごと索引: 行のまとまり（カテゴリ）ごとに色の印をつける */
.cslab-topics {
	--topic-color: #6b7686;
	margin: 1.5em 0 2.5em;
}
.cslab-topics table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92em;
	line-height: 1.55;
	table-layout: fixed;
}
.cslab-topics thead th {
	padding: .5em .75em;
	border-bottom: 2px solid #1d4f9c;
	font-size: .85em;
	font-weight: 700;
	text-align: left;
	color: #1d4f9c;
	background: none;
}
.cslab-topics thead th:first-child {
	width: 34%;
}
.cslab-topics__group--beginner      { --topic-color: #1f9a8a; }
.cslab-topics__group--traffic       { --topic-color: #2f8fd8; }
.cslab-topics__group--economy       { --topic-color: #c8941a; }
.cslab-topics__group--city-services { --topic-color: #4f9d3a; }
.cslab-topics__group--public-services { --topic-color: #d0643c; }
.cslab-topics__group--mod           { --topic-color: #8a5cc9; }
.cslab-topics__group--map           { --topic-color: #6b7686; }
.cslab-topics .cslab-topics__grouphead th {
	padding: 1.1em .75em .35em;
	border: 0;
	background: none;
	font-size: .82em;
	font-weight: 700;
	text-align: left;
}
.cslab-topics__grouphead a {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	color: inherit;
	text-decoration: none;
}
.cslab-topics__grouphead a::before {
	content: "";
	width: .8em;
	height: .8em;
	border-radius: 2px;
	background: var(--topic-color);
}
.cslab-topics__grouphead a:hover {
	text-decoration: underline;
}
.cslab-topics tbody tr:not(.cslab-topics__grouphead) > * {
	padding: .6em .75em;
	border: 0;
	border-top: 1px solid #e3e7ee;
	vertical-align: top;
	background: none;
	text-align: left;
}
.cslab-topics tbody th[scope="row"] {
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--topic-color);
}
.cslab-topics td a {
	display: block;
	color: #1d4f9c;
}
.cslab-topics td a + a {
	margin-top: .35em;
}
.cslab-topics__none {
	font-size: .85em;
	color: #9aa3b0;
}

@media (max-width: 599px) {
	.cslab-gates {
		grid-template-columns: 1fr;
	}
	.cslab-topics thead {
		display: none;
	}
	.cslab-topics table,
	.cslab-topics tbody,
	.cslab-topics tr,
	.cslab-topics th,
	.cslab-topics td {
		display: block;
		width: auto;
	}
	.cslab-topics tbody tr:not(.cslab-topics__grouphead) {
		padding: .6em 0 .7em .75em;
		border-top: 1px solid #e3e7ee;
		box-shadow: inset 3px 0 0 var(--topic-color);
	}
	.cslab-topics tbody tr:not(.cslab-topics__grouphead) > * {
		padding: .15em 0;
		border: 0;
	}
	.cslab-topics tbody th[scope="row"] {
		box-shadow: none;
	}
	.cslab-topics td {
		display: grid;
		grid-template-columns: 2.8em 1fr;
		column-gap: .5em;
	}
	.cslab-topics td::before {
		content: attr(data-game);
		grid-row: 1 / span 3;
		font-size: .78em;
		font-weight: 700;
		line-height: 2;
		color: #6b7686;
	}
	.cslab-topics td a + a {
		margin-top: .2em;
	}
}