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


/*-----------------------------------------------
  topics
-----------------------------------------------*/

#topics .date {
width: 11em;
text-align: left;
color: #999;
}
#topics .date span {
display: block;
float: right;
width: 4em;
padding: 0 0.8em;
font-size: 0.9em;
text-align: center;
color: #FFF;
border-radius: 0.2em;
}
#topics .date span.color1 {
background: #E58011;
}
#topics .date span.color2 {
background: #6BAB4C;
}
#topics .date span.color3 {
background: #7366A5;
}
#topics h2 {
margin-top: 1em;
font-size: 1.5em;
}
#topics .message {
margin-top: 2em;
padding-top: 2em;
border-top: 1px dashed #CCC;
}
#topics .photo {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
margin-top: 2em;
}
#topics .photo li {
width: 48%;
font-size: 0.95em;
line-height: 1.5;
}
#topics .photo li img {
margin-bottom: 0.5em;
}

@media screen and (max-width: 800px) {
	#topics h2 {
	font-size: 1.2em;
	}
	#topics .message {
	margin-top: 6%;
	padding-top: 6%;
	}
	#topics .photo {
	flex-direction: column;
	margin-top: 6%;
	}
	#topics .photo li {
	width: 100%;
	}
	#topics .photo li:not(:first-child) {
	margin-top: 6%;
	}
}