@charset "utf-8";
/*------------------------------------------------------------
	topics
------------------------------------------------------------*/
#main .bgBox {
	margin-top: -6.1rem;
	padding: 11.4rem 0 25.2rem;
	background-color: #F7F7F7;
}
#main .topicsList li:not(:last-child) {
	margin-bottom: 3.3rem;
}
#main .topicsList .time {
	margin: 0 0.2rem 1.4rem;
	font-weight: 300;
	font-size: 1.6rem;
	letter-spacing: 0.06em;
}
#main .topicsList .whiteBg {
	position: relative;
	padding: 6rem;
	color: #231815;
	background-color: #fff;
}
#main .topicsList .whiteBg::before {
	position: absolute;
	left: 0;
	top: -0.6rem;
	width: 33.1rem;
	height: 0.6rem;
	background-color: #29DE3C;
	content: "";
}
#main .topicsList .whiteBg .title, #main .topicsList .whiteBg a .title {
	margin-bottom: 1.5rem;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.06em;
    color: #000000;
}
#main .topicsList .whiteBg p, #main .topicsList .whiteBg a p {
	line-height: 1.76;
	text-align: justify;
	letter-spacing: 0.06em;
	word-break: break-all;
    color: #000000;
}
#main .topicsList .whiteBg a {
	color: #6bdb57;
}
#main .topicsList .whiteBg a:hover {
	opacity: 0.7;
}

@media all and (min-width: 897px) {
	#main .topicsList .whiteBg {
		font-feature-settings: "palt";
	}
}
@media all and (max-width: 896px) {
	#main .bgBox {
		margin-top: -2.2rem;
		padding: 6.1rem 0 14.6rem;
	}
	#main .topicsList li:not(:last-child) {
		margin-bottom: 2rem;
	}
	#main .topicsList .time {
		margin: 0 1.6rem 0.9rem;
		font-size: 1.5rem;
	}
	#main .topicsList .whiteBg {
		padding: 3.9rem 2.9rem 3.7rem;
		margin: 0 -1.2rem 0 -1.4rem;
	}
	#main .topicsList .whiteBg::before {
		width: 19.6rem;
	}
	#main .topicsList .whiteBg .title {
		margin-bottom: 1rem;
		font-size: 1.8rem;
		line-height: 1.66;
		letter-spacing: 0;
	}
	#main .topicsList .whiteBg p {
		line-height: 2;
		letter-spacing: 0;
	}
}