/* CSS Document */

#search{
	padding: 0;
	}
	#search+*{
		padding-top: 1em;
		}
	#search form{
		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;
		-ms-flex-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		margin-bottom: 2em;
		}
		#search form > div{
			width: calc(50% - 0.5em);
			}
	#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 dl{
		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: end;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		font-size: 0.8em;
		}
	#search dt,
	#search dd{
		min-width: 1em;
		line-height: 1em;
		}
	#search dd{
		margin-left: 0.5em;
		padding: 0.5em;
		background: rgba(var(--primary-color-rgb),0.05);
		border-radius: 0.2em;
		}
	#search dd.select{
		background: var(--primary-color);
		color: #fff;
		}

#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: rgba(var(--primary-color-rgb),0.05);
			}
	#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: rgba(var(--primary-color-rgb),0.05);
		}
	#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;
		aspect-ratio: 1;
		-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M23.7,21.6c1.8-2.2,2.8-5,2.8-8.1c0-7.2-5.8-13-13-13s-13,5.8-13,13s5.8,13,13,13c3.1,0,5.9-1.1,8.1-2.8l7.8,7.8l2.1-2.1L23.7,21.6z M13.5,23.6c-5.5,0-10-4.5-10-10s4.5-10,10-10s10,4.5,10,10S19.1,23.6,13.5,23.6z"/></svg>') center no-repeat;
		-webkit-mask-size: contain;
		background: var(--primary-color);
		border: none;
		}

#spot{
	padding-bottom: 0;
	}


/* for mobile */
@media (max-width: 767px) {
/*767px以下*/
}
@media (max-width: 767px) and (orientation:portrait) {
/*767px以下 縦向き*/
#search{}
	#search form{
		display: block;
		}
		#search form > div{
			width: 100%;
			}
		#search form > div+div{
			margin-top: 1em;
			}
#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以下 横向き*/
}


/* for TabletPC */
@media (min-width: 768px) {
/*768px以上*/
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#category{}
	#category ul{
		padding: 1em;
		}
}


/* ie */
@media all and (-ms-high-contrast: none){}