@charset "UTF-8";


/**topics**/

ul.topicsbox {
	letter-spacing:-0.4em;
	margin:0 -5px;
}
ul.topicsbox li {
	display:inline-block;
	vertical-align:top;
	width:calc((100% / 3) - 11px);
	margin: 0 5px 10px;
	background:#f2f2f2;
	position:relative;
	box-sizing:border-box;
	border:2px solid #dadada;
}
ul.topicsbox li > a > div {
	display:inline-block;
	vertical-align:middle;
	letter-spacing:normal;
	box-sizing:border-box;
}
ul.topicsbox li > a {
	display:block;
}
ul.topicsbox li > a > div.img {
	width:100px;
	border:3px solid #f2f2f2;
}
ul.topicsbox li > a > div.detail {
	width:calc(100% - 101px);
	padding:10px 30px 10px 10px;
}
ul.topicsbox li > a > div.detail dd {
	line-height:1em;
	margin-bottom:0.2em;
	font-size:14px;
}
ul.topicsbox li > a > div.detail dt {
	line-height:1.3em;
	font-size:16px;
	font-weight:600;
}
ul.topicsbox li > a > div.detail .svg-inline--fa {
	font-size:16px;
	position:absolute;
	right:10px;
	top:calc(50% - 8px);
	color:#000000;
}


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


ul.topicsbox li > a > div.detail dd {
	font-size:13px;
}
ul.topicsbox li > a > div.detail dt {
	line-height:1.3em;
	font-size:15px;
}
ul.torikumi li > a > div.detail .svg-inline--fa {
	top:calc(50% - 7px);
}

}

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

ul.topicsbox {
	margin:0 auto;
}
ul.topicsbox li {
	display:block;
	width:100%;
	margin:0 auto 5px;
}
ul.topicsbox li > a > div.detail dd {
	font-size:13px;
}
ul.topicsbox li > a > div.detail dt {
	line-height:1.3em;
	font-size:15px;
}
ul.topicsbox li > a > div.detail .svg-inline--fa {
	top:calc(50% - 7px);
}

}

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

ul.topicsbox li > a > div.img {
	width:80px;
}
ul.topicsbox li > a > div.detail {
	width:calc(100% - 80px);
}
ul.topicsbox li > a > div.detail dd {
	font-size:12px;
}
ul.topicsbox li > a > div.detail dt {
	font-size:14px;
}

}