@charset "utf-8";
/* CSS Document */

/* [Topics Area] */
.topic_wrap {
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: clamp(1000px,83vw,1600px);
	margin-right: auto;
	margin-left: auto;
}

.topic_wrap a {
	color:#1432C0;
	text-decoration: none;
}
.topic_wrap a:hover {color:#9E1215;font-weight: 600;}
.topic_wrap a::after {
	content: "▲";
	transform: rotate(90deg) scale(1, 0.5);
	display: inline-block;
	margin-left: 0.3em;
}

.topic_wrap ul {padding: 0;}
.topic_wrap li {
	list-style: none;
	border-bottom: 1px dotted #ccc;
	font-size:clamp(13px,1vw,20px);
	padding-bottom: 0.5em;
	display: flex;
	justify-content:flex-start;
}
.topic_wrap li:not(:last-of-type) {
	margin-bottom: 1em;
}
.topic_wrap span.date {
	display: inline-block;
	font-weight: bold;
	font-size: 80%;
	width: 7em;
	background-color: #fff;
	padding-left: 0.3em;
}
.topic_wrap span.cate {
	padding-left:  1em;
	padding-right: 1em;
	white-space: nowrap;
}
.topic_wrap span.cate span {
	display: inline-block;
	border-radius: 4px;
	font-weight: 300;
	width: 6em;
	color: #fff;
	text-align: center;
	font-size: 80%;
}
.topic_wrap span.etc {background-color: #007200;}
.topic_wrap span.rec {background-color: #c23b00;}
.topic_wrap span.wrk {background-color: #0087d0;}
.topic_wrap span.web {background-color: #7117ff;}

.topic_wrap span.data {
	padding-left:  1em;
	padding-right: 1em;
}
/* /[Topics Area] */


@media only screen and (max-width: 720px) {
/* [Topics Area] */
.topic_wrap {margin-right:auto;margin-left: auto;width:96vw;}
.topic_wrap ul {width: 100%;}
.topic_wrap li {display:block;}
.topic_wrap span.data {display: block;margin-top: 0.2em;margin-bottom: 0.5em;}
.topic_area {padding-bottom: 0;}
/* /[Topics Area] */
}