@charset "UTF-8";

.filter {
	margin-bottom: 40px;
}

.topic {
	display: flex;
	flex-wrap: wrap;
	gap: 60px 40px;
}

.topic_item {
	max-width: 260px;
}

.topic_wrap {
}

.topic_img {
	overflow: hidden;
}

.topic_img > img {
	transition: transform 0.2s;
}

.topic_wrap:hover .topic_img > img {
	transform: scale(1.1);
}

.topic_cnt {
	margin-top: 15px;
}

.topic_cat {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.topic_ttl {
	font-weight: bold;
	transition: color 0.2s;
}

.topic_wrap:hover .topic_ttl {
	color: var(--color-primary);
}

@media screen and (max-width:1320px) {
}

@media screen and (max-width:767px) {
	.topic {
		gap: 20px;
	}

	.topic_item {
		width: 100%;
		max-width: 100%;
	}

	.topic_wrap {
		display: flex;
		align-items: flex-start;
		gap: 15px;
	}

	.topic_img {
		flex-shrink: 0;
		width: 120px;
	}

	.topic_cnt {
		flex: 1;
		margin-top: 0;
	}

	.topic_cat {
		font-size: 14px;
		line-height: 1;
	}

	.topic_ttl {
		margin-top: 0.5em;
		line-height: 1.5;
	}
}