@charset "utf-8";

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */

.search-result
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
    align-content: flex-start;
    
	margin:-0.25em;
	
	line-height:1.7;
}
.search-result-item
{
	background-color:#FFFFFF;
	border:1px solid #E0E0E0;
	
	width:calc(100% - 0.5em);
	margin:0.25em;
}
.search-result-item.middle
{
	width:calc(50% - 0.5em);
}
.search-result-item:hover
{
	border:1px solid #999999;
}
.search-result-item a
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	
	padding:0.5em;
	
	cursor:pointer;
}
.search-result-item a .thin
{
	margin:0.5em;
	white-space: nowrap;
}
.search-result-item a .grow
{
	margin:0.5em;
	flex-grow:1;
	width:1%;
}
.search-result-item a .tag
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	
	margin:0 -0.25em;
	padding:0;
	list-style:none;
}
.search-result-item a .tag .tag-item
{
	margin:0.25em;
	padding:0;
	list-style:none;
	
	padding:0.2em;
	background-color:#F0F0F0;
	border:1px solid #D0D0D0;
	
	font-size:0.8em;
}

.article-title
{

}
.article-title .main
{
	font-size:1.8em;
	font-weight:bold;
}
.article-tag
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	
	margin:0 -0.25em;
	padding:0;
	list-style:none;
}
.article-tag .tag-item
{
	margin:0.25em;
	padding:0;
	list-style:none;
	
	padding:0.2em;
	background-color:#F0F0F0;
	border:1px solid #D0D0D0;
	
	font-size:0.8em;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1100px) {


}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	.search-result-item,
	.search-result-item.middle
	{
		width:calc(100% - 0.5em);
	}
}