/* ---------------------------------------------------------------------------------------------------------------*/
/* 検索フォーム　FE Advanced Search 含む */
/* ---------------------------------------------------------------------------------------------------------------*/ 
.search-area{
	max-width: 960px;
    margin: 0em auto;
    text-align: center;
}
.search-block {
	margin: -8vw 2em 0em;
    background: #ffffff;
    padding: 2em 3em;
    filter: drop-shadow(2px 4px 6px rgb(0,0,0,0.3));
}

@media all and (max-width:500px){
	.search-block {
		margin: -10vw 2em 0em;
		padding: 2em 1em 1em;
	}
}

.search-blockHd{
	font-size: clamp(14px, 2.5vw, 32px);
    font-weight: 700;
	line-height: 1.5em;
    margin-bottom: 0.5em;
}
.search-blockHd span {
    display: block;
    color: #e30410;
    font-size: 1.5em;
    font-weight: 800;
}

.search-block form{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.search-column{
	margin: 0.75em;
}

@media all and (max-width:500px){
	.search-column,
	.search-column div,
	.search-column div select {
		width: 100%;
	}
}



/* ---------------------------------------------*/
/* 日付選択 */
/* ---------------------------------------------*/
.searchDate-block {
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.searchDate input {
	width: 8em;
	font-size: 16px;
	font-weight: normal;
	text-align: center;
	padding: 5px 0px;
	cursor: pointer;
}
.searchDate-connect {
	width: 30px;
	text-align: center;
}
#feas_0_1,
#feas_0_2 {
	display: none;
}
.searchDate,
.searchDate-connect {
	display: inline-block;
}
@media all and (max-width:500px){
	.searchDate-block > *{
		width: max-content!important;
	}
	.searchDate input{
		width: calc(100% - 1.5em);
	}
}



/* ---------------------------------------------*/
/* カテゴリー選択 */
/* ---------------------------------------------*/
.searchCat-block {
	display: inline-block;
}
.searchCat-block select {
	color: #494949;
	font-size: 16px;
	font-weight: normal;
	padding: 5px 3px;
	background-color: #FFF;
	border: 1px solid #494949;
    border-radius: 0.2em;
	cursor: pointer;
	width: 10em;
}
@media all and (max-width:500px){
	.searchCat-block select{
		width: 100%;
	}
}

/* ---------------------------------------------*/
/* 店舗選択 */
/* ---------------------------------------------*/
.searchShop {
	width: 15em;
}
.searchShop-block {
	display: inline-block;
}
.searchShop-block select {
	color: #494949;
	font-size: 20px;
	font-weight: normal;
	padding: 3px 3px 3px 2.5em;
	background-color: #FFF;
	border: 1px solid #494949;
    border-radius: 0.2em;
	cursor: pointer;
	-webkit-appearance: none;/*need for safari*/
}

.searchShop-area {
  position: relative;
}
.searchShop-area:before{
	content: "";
	background: url("../img/icon/icon_shop.svg") no-repeat;
	display: inline-block;
	vertical-align: -0.1em;
    width: 100%;
    height: 100%;
    background-size: contain;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.5em;
    transform: translateY(-50%);
}
.searchShop-area select {
  width: 100%;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#searchShop-item,
#searchShop-item2 {
	display: none;
	background-color: #FFF;
	border: 1px solid #494949;
    border-radius: 0.2em;
	position: absolute;
	z-index: 50;
	width: auto;
	padding-bottom: 1em;
	
	max-height: 25em;
	overflow-y: scroll;
}

#searchShop-item label,
#searchShop-item2 label {
	display: block;
	color: #000;
	font-size: 16px;
	font-weight: normal;
	padding: 2px;
	margin: 0 10px;
	text-align: left;
	padding-top: 1em;
}

#searchShop-item label:hover,
#searchShop-item2 label:hover {
  background-color: #1e90ff;
}

.searchShop-op {
	margin-top: 1em;
}

#searchShop-item input,
#searchShop-item2 input {
  margin-right: 1em;
}

@media all and (max-width:480px){
	.searchShop-block {}
}


/* ---------------------------------------------*/
/* キーワード検索 */
/* ---------------------------------------------*/
.searchKey-block {
	display: inline-block;
}
.searchKey input {
	width: 250px;
	font-size: 16px;
	font-weight: normal;
	text-align: left;
	padding: 5px;
	cursor: pointer;
}

.selectKey {
	float: right;
}
.andKey,
.orKey {
	display: inline-block;
	margin: 0 5px;
}
.selectKey input[type=radio] {
	display: none; /* ラジオボタンを非表示にする */
}
.selectKey label {
	display: block; /* ブロックレベル要素化する */
	cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
	border: 2px solid #CCC;/* ボックスの境界線を実線で指定する */
	border-radius: 5px; /* 角丸を指定する */
	font-size: 14px;
	padding: 5px;
	font-weight: normal;
	width: 50px;
	margin: 0 auto;
	color: #AAA;
}
.selectKey label:hover {
	background-color: #E2EDF9; /* マウスオーバー時の背景色を指定する */
}
.selectKey input[type="radio"]:checked + label {
	background: #e9d1b1;/* マウス選択時の背景色を指定する */
	border: 2px solid #e9d1b1;/* ボックスの境界線を実線で指定する */
	color: #000;
}

/*
<div class='selectKey'>
	<div class='andKey'>
		<input type='radio' class='select_and' name='and_or' value='and' {$checked_and} /><span class='andTxt'>AND検索</span>
	</div>
	<div class='orKey'>
		<input type='radio' class='select_or' name='and_or' value='or' {$checked_or} /><span class='orTxt'>OR検索</span>
	</div>
</div>
*/
@media all and (max-width:600px){
	.selectKey {
		float: none;
	}
	.andKey,
	.orKey {
		margin: 5px;
		width: 80px !important;
	}
}

@media all and (max-width:500px){
	.searchKey input{
		width: calc(100% - 10px);
	}
}


/* ---------------------------------------------*/
/* 検索ボタン */
/* ---------------------------------------------*/
.searchBtn-block {
	display: inline-block;
	margin-bottom: 0em!important;
	margin-top: 0em!important;
}
.searchBtn input {
	width: 20em;
	font-size: 18px;
	font-weight: bold;
	padding: 2px;
	color: #FFF;
	background-color: #000;
	cursor: pointer;
	border-radius: 0.3em;
}
@media all and (max-width:500px){
	.searchBtn-block{
		margin: 1em auto!important;
	}
	.searchBtn input{
		width: 100%;
	}
}


/* ---------------------------------------------*/
/* 選択店舗表示 */
/* ---------------------------------------------*/
.search-shop-block {
	margin-top: 2em;
	text-align: center;
}
.search-shop {
	margin: 0 1em;
	text-align: left;
}
.search-shop-txt{
	font-size: 1.2em;
	margin-bottom: 0.5em;
}
.shopName {
	width: 33%;
	display: inline-block;
	font-size: 1.2em;
	margin-bottom: 0.5em;
}
@media all and (max-width:800px){
	.shopName {
		width: 49%;
	}
}
@media all and (max-width:500px){
	.shopName {
		width: 100%;
		text-align: left;
	}
}


/* ---------------------------------------------*/
/* 件数表示 */
/* ---------------------------------------------*/
.search-num-block {
	text-align: center;
}
.search-num-txt {
	font-size: 49px;
	font-weight: bold;
	margin: 0 0.5em;
	
}
.search-numdisp-txt {
	font-size: 18px;
}



/* ---------------------------------------------*/
/* 「input」に入力されていたら枠の色変更 */
/* 「:placeholder-shown」はplaceholderが表示されているときに機能 */
/* ---------------------------------------------*/
/* 日付選択 */
.searchDate input{/*入力済み*/
    border: 1px solid #ff0000;
	border-radius: 0.2em;
}
.searchDate input:placeholder-shown{/*未入力*/
	border: 1px solid rgb(170,170,170);
    border-radius: 0.2em;
}
.searchDate ::placeholder{
	color: #494949;
}

/* キーワード検索 */
.searchKey input {/*入力済み*/
	border: 1px solid #ff0000;
	border-radius: 0.2em;
}
.searchKey input:placeholder-shown{/*未入力*/
	border: 1px solid rgb(170,170,170);
    border-radius: 0.2em;
}
.searchKey ::placeholder{
	color: #494949;
}