@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*
#topic .h1 + .topic-body, #topic .h2 + .topic-body, #topic .ex + .topic-body,
#topic .h1 + .element, #topic .h2 + .element, #topic .ex + .element {
	margin-top: 20px;
}
*/
/*~~*/

#topic .srch + .sort {
	margin-top: 15px;
}

#topic .srch + .topic-body, #topic .sort + .topic-body {
	margin-top: 15px;
}

#topic .srch form {
	padding: 20px; text-align: center; border: 1px solid #000;
}

#topic .srch form label {
	display: none;
}

#topic .srch form input {
	width: 100%;
}

#topic .srch form button.search,
#topic .srch form button.reload {
	width: 100%; margin-top: 10px;
}

/*~~*/

#topic .sort {
	margin-bottom: 15px;
}

#topic .sort form select {
	width: 100%;
}

/*~~*/

#topic .topic-body li {
	margin-top: 15px; padding: 10px;
}

#topic .topic-body li:nth-child(1) {
	margin-top: 0;
}

#topic .topic-body .fbody {
	width: 100%; position: relative; z-index: 0;
}

#topic .topic-body .fbody:after {
	width: 0px; height: 0px; margin-left: 0; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent #000 transparent transparent;
	display: block; content: ""; position: absolute; bottom: -20px; left: 25px; z-index: -1;
}

#topic .topic-body .fbody .pict {
	display: none;
}

#topic .topic-body .fbody .body {
	padding: 10px;
}

#topic .topic-body .fbody .date {
	padding-bottom: 10px; text-align: center;
}

#topic .topic-body .fbody .date span {
	padding: 5px 20px; border: 1px solid #000; display: inline-block;
}

/*~~*/

#topic .topic-body .fname {
	width: 100%; margin-top: 10px;
}

#topic .topic-body .fname > * {
	margin: 5px; display: flex; justify-content: center; align-items: center;
}

#topic .topic-body .fname .face {
	width: 30px; height: 30px; margin-right: 5px;
}

#topic .topic-body .fname .face img {
	border-radius: 30px;
}

/*~~*/

#topic .topic-page {
	margin-top: 20px;
}

#topic .topic-page ul {
	display: flex; flex-wrap: wrap; justify-content: center;
}

#topic .topic-page li {
	margin: 5px; padding: 10px; border: 1px solid #000;
}

#topic .topic-page li.now {
	border: 2px solid #000;
}

#topic .topic-none {
	margin-top: 20px;
}

#topic .topic-none li {
	padding: 10px; border: 1px solid #000; text-align: center;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (min-width: 769px) {
/****************************************************************************************************************************************************************/
/*
#topic .h1 + .topic-body, #topic .h2 + .topic-body, #topic .ex + .topic-body,
#topic .h1 + .element, #topic .h2 + .element, #topic .ex + .element {
	margin-top: 25px;
}
*/
/*~~*/

#topic .srch form {
	width: 70%; margin: 0 auto 15px; padding: 15px 30px; display: flex; justify-content: center;
}

#topic .srch form label {
	width: 25%; border: 1px solid #000; font-size: 14px; font-weight: bold; display: flex; justify-content: center; align-items: center;
}

#topic .srch form input {
	width: 50%; margin: 0 0 0 10px;
}

#topic .srch form button.search {
	width: 15%; margin: 0 0 0 10px;
}

#topic .srch form button.reload {
	width: 10%; margin: 0 0 0 10px;
}

/*~~*/

#topic .sort {
	margin-bottom: 15px;
}

#topic .sort form select {
	width: calc((100% - 45px) / 4); margin-right: 15px;
}

/*~~*/
/*
□・15・□・15・□・15・□
*/
#topic .topic-body ul {
	display: flex; flex-wrap: wrap;
}

#topic .topic-body li {
	width: calc((100% - 45px) / 4); margin-left: 15px; display: flex; flex-direction: column;
}
	#topic .topic-body li:nth-child(4n + 1) {
		margin-left: 0;
	}
	#topic .topic-body li:nth-child(-n + 4) {
		margin-top: 0;
	}

#topic .topic-body .fbody {
	flex: 1; display: flex; flex-direction: column;
}

#topic .topic-body .fbody .pict {
	display: block;
}

#topic .topic-body .fbody .date {
	margin-top: auto;
}

/****************************************************************************************************************************************************************/
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/