/* CSS Document */

#search{
	padding: 0;
	}
	#search+*{
		padding-top: 1em;
		}
	#search form{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 2em;
		}
		#search form > div{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin-top: 1em;
			}
		#search form a{
			padding: 1em;
			}
		#search form a+a{
			margin-left: 1em;
			background: #ccc;
			}
	#search figure{
		display: none;
		border: 2px solid var(--secondary-color);
		}
		#search figure img{
			width: 330px;
			height: auto;
			}
	#search dl{
		display: flex;
		flex-direction: column;
		width: 100%;
		}
	#search dt{
		font-weight: 400;
		}
	#search dd{
		margin-top: 0.5em;
		}
	#search dd+dt{
		margin-top: 1em;
		}
	#search form+div{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		}
	#search .doSearch{
		display: inline-flex;
		align-items: center;
		background: var(--primary-color);
		}
		#search .doSearch:before{
			content: "";
			width: 1.3em;
			height: 1.3em;
			margin: -0.2em 0;
			margin-right: 0.4em;
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23ffffff" d="M29.117 26.266l-6.701-6.701c2.994-4.277 2.424-10.266-1.283-14.115-4.277-4.277-11.405-4.277-15.683 0s-4.277 11.405 0 15.683c3.85 3.85 9.694 4.277 14.115 1.283l6.701 6.701c0.856 0.856 2.139 0.856 2.994 0 0.714-0.714 0.714-2.139-0.142-2.851zM18.994 18.994c-3.136 3.136-8.126 3.136-11.262 0s-3.136-8.126 0-11.262c3.136-3.136 8.126-3.136 11.262 0 3.136 2.994 3.136 8.126 0 11.262z"></path></svg>');
			background-size: cover;
			}

#category{}
	#category:hover div,
	#category:active div{
		height: auto;
		opacity: 1;
		}
	#category div{
		position: absolute;
		height: 0;
		overflow: hidden;
		transition: all 0.2s ease-out;
		opacity: 0;
		z-index: 1;
		}
		#category div:before{
			content: "";
			position: absolute;
			top: -0.5em;
			left: calc(25% - 1em);
			width: 0;
			height: 0;
			border: 1em solid transparent;
			border-bottom-color: #D1D8E1;
			}
	#category ul{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		list-style: none;
		margin-top: 1em;
		padding: 0.5em;
		background: #D1D8E1;
		}
	#category li{
		width: 25%;
		padding: 0.5em;
		}
		#category li:last-child{
			width: 100%;
			padding-top: 0.5em;
			text-align: center;
			}
	#category input+input{
		margin-left: 0.5em;
		}
	#category > input[type=text]{
		background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPg0KPHBhdGggZmlsbD0iI2NjYyIgZD0iTTgsOCBMMTYsMjQgTDI0LDggeiIvPg0KPC9zdmc+') center right no-repeat;
		background-size: auto 50%;
		}
	#category input[type=button]{
		width: auto;
		padding: 0.5em 0.8em;
		padding-left: 2em;
		background: #fff;
		border-radius: 0.2em;
		border: none;
		}
	#category input[type=button].delete{
		background: #ccc url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmE9Imh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVTVkdWaWV3ZXJFeHRlbnNpb25zLzMuMC8iDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBmaWxsPSIjNEQ0RDREIiBwb2ludHM9IjMyLDIuNSAyOS41LDAgMTYsMTMuNSAyLjUsMCAwLDIuNSAxMy41LDE2IDAsMjkuNSAyLjUsMzIgMTYsMTguNSAyOS41LDMyIDMyLDI5LjUgMTguNSwxNiIvPg0KPC9zdmc+') 0.8em center no-repeat;
		background-size: auto 0.8em;
		}
	#category input[type=button].search{
		background: var(--primary-color) url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmE9Imh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVTVkdWaWV3ZXJFeHRlbnNpb25zLzMuMC8iDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4IiB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNMjMuNywyMS42YzEuOC0yLjIsMi44LTUsMi44LTguMWMwLTcuMi01LjgtMTMtMTMtMTNjLTcuMiwwLTEzLDUuOC0xMywxM2MwLDcuMiw1LjgsMTMsMTMsMTMNCgljMy4xLDAsNS45LTEuMSw4LjEtMi44bDcuOCw3LjhsMi4xLTIuMUwyMy43LDIxLjZ6IE0xMy41LDIzLjZjLTUuNSwwLTEwLTQuNS0xMC0xMGMwLTUuNSw0LjUtMTAsMTAtMTBjNS41LDAsMTAsNC41LDEwLDEwDQoJQzIzLjYsMTkuMSwxOS4xLDIzLjYsMTMuNSwyMy42eiIvPg0KPC9zdmc+') 0.8em center no-repeat;
		background-size: auto 0.8em;
		color: #fff;
		}

#keyword{
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: center;
	align-items: center;
	-ms-flex-pack: center;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	}
	#keyword input[type=text]{
		width: calc(100% - 2.5em);
		}
	#keyword input[type=button]{
		width: 1.8em;
		height: 1.8em;
		background: url('../../common/images/search.png');
		background-size: cover;
		border: none;
		}

#spot{
	padding-bottom: 0;
	}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#search{}
	#search form{
		flex-direction: column;
		}
		#search form figure{
			align-items: center;
			margin-top: 1em;
			}
	#search p{
		width: 100%;
		text-align: center;
		}
#category{}
	#category div{}
		#category div:before{
			left: calc(50% - 1em);
			}
	#category li{
		width: 50%;
		padding: 0.5em;
		}
}
@media (max-width: 767px) and (orientation:landscape) {
/*767px以下 横向き*/
#search{}
	#search dl{
		/* width: calc(100% - 330px - 1em); */
		}
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
#search{}
	#search dl{
		/* width: calc(100% - 330px - 1em); */
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#search{}
	#search form{}
		#search form > div{
			margin-top: 2em;
			}
	#search dl{
		/* width: calc(100% - 330px - 2em); */
		}
#category{}
	#category ul{
		padding: 1em;
		}
}


/* ie */
@media all and (-ms-high-contrast: none){
#search .doSearch:before{
	content: none;
	}
}