/* SECTION HEADER */

#casestudy.search #contents header,
#casestudy.casestudy #contents header{
	margin-bottom: 40px;
}

#searchBox{
	position: relative;
	z-index: 2;
/* 	overflow: hidden; */
}

#searchBox #explanation{
	position: absolute;
	z-index: 2;
	top: -24px;
	margin-left: 16px;
	color: var(--search-color100);
	font-weight: bold;
}

#searchBox div.title a{
	display: flex;
	flex-flow: row wrap;
	justify-content: start;
	align-content: space-between;
	align-items: center;
	margin-bottom: 0px;
	padding: 12px 16px;
	font-size: 18px;
	line-height: 1.5;
	font-weight: bold;
	text-decoration: none;
	box-shadow: unset;
	border-radius: 8px;
	background: var( --search-color);
}

#searchBox .sbTitle i, 
#searchBox .sbTitle span 
{
	display: table-cell;
	margin-left: 8px;
	vertical-align: middle;
}

#searchBox .sbTitle span {
	padding-right: 8px;
}


#searchBox div.title a#search {
	color: #fff;
}

#filterForm {
	position: absolute;
	z-index: 2;
	padding-right: 20px;
	padding-left: 20px;
	width: 100%;
	height: 0;
	overflow: hidden;
	transition: all 0.3s ease-out;
	border: transparent solid 1px;
	background: var(--main-key-bgcolor-light);
	border-radius: 8px;
}

#filterForm.slideDown {
	padding-top: 20px;
	padding-bottom: 20px;
	height: 512px;
	border: var(--main-color-bdb) solid 1px;
}

select {
	/*outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;*/
}

#searchBox select {
	margin-bottom: 20px;
	padding: 8px;
	width: 100%;
	max-width: 100%;
	/* height: 2.4em; */
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid var(--main-color-bdb);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 8px;
}

#searchBox select option{
	padding: 16px;
	font-size: 1rem;
	line-height: 1.5;
	background: var(--search-option-bg);
	border: 1px solid var(--main-color-bdb);
	border-radius: 8px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

}

fieldset {
	margin: 0 2px;
	margin-bottom: 1em;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--main-color-bdb);
	border-radius: 8px;
}

label {
	display: block;
	margin-bottom: 0.5em;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 800;
	color: #666;
}

fieldset label{
	padding: 8px;
	font-size: 1rem;
	line-height: 1.5;
	background: var(--search-label-bg);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 8px;
}

button, input[type="button"], input[type="submit"] {
	display: inline-block;
	padding: 0.8em 4em;
	color: #fff;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	background: var( --search-color);
	border-radius: 4px;
	border: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	vertical-align: top;
}

button, input, select, textarea {
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

fieldset label:last-child{
	margin-bottom: 0;
}

/* SEARCH RESAULT */

#searchBox{
	margin-bottom: 20px;
}

#casestudytop #recommend,
#casestudytop #searchBox{
	margin-bottom: 0;
	padding-top: 0;
}

body.search header#conditions{
	margin-bottom: 20px;
	padding: 12px 16px;
	font-size: 14px;
	color: #333;
	background: var(--news-bg);
	border: var(--news-border) solid 1px;
	border-radius: 4px;
}

#resault{
	display: flex;
	flex-flow: row wrap;
	justify-content: start;
	align-content: space-between;
	align-items: start;
	
}

#resault article{
	flex: 1 0 32%;
	margin-bottom: 12px;
	margin-right :4px;
	max-width: calc((100% - 16px)/3);
}

#resault article .date{
	margin-bottom: 4px;
	padding: 2px;
	background: var(--main-key-bgcolor-light)	
}

#resault article .iconarea{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-items: center;	
	
}

#resault article .description{
	margin-bottom: 4px;
}

#resault article .iconarea span{
	display: block;
	margin-right: 4px;
	padding: 4px 8px;
	border: var(--lower-bordercolor-icon) solid 1px;
	border-radius: 4px;
}

#resault article .imgBox{
	position: relative;
	z-index: 1;
	margin-bottom: 8px;
	border-radius: 4px;
}

.contentsArea article .imgBox em,
#resault article .imgBox em{
	position: absolute;
	top: 4px;
	left: 4px;
	display: inline-block;
	padding: 4px;
	width: 24px;
	text-align: center;
	color: #fff;
	font-family: 'Montserrat';
	font-size: 16px;
	line-height: 16px;
	font-weight: 800;
	background: var(--search-color);
	/*border: var(--lower-bordercolor-icon) solid 1px;*/
	border-radius: 4px;
}

#resault article img{
	border-radius: 4px;
	width: 100%;
	height: auto;
}

.wp-pagenavi{
	padding-top: 20px;
}

.wp-pagenavi span,
.wp-pagenavi a
{
	padding: 4px 10px;
	border-radius: 4px;
}

.wp-pagenavi span.current {
	font-weight: bold;
	color: #000;
	border-color: #bbb;
	background: #e8faff;
}

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


}


@media only screen and (max-width: 568px) {
	#resault article{
		flex: 1 0 48%;
		max-width: calc((100% - 8px)/2);
	}
}

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

	#resault{
		display: flex;
		flex-flow: column;
		justify-content: start;
		align-content: center;
		align-items: space-betwen;
		
	}
	
	#resault article{
		flex: 1 0 100%;
		max-width: 100%;
	}



}