@charset "utf-8";


/*Google Map
---------------------------------------------------------------------------*/
#googlemap {box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}

.map {position: relative;}

#map {
	position: relative;
	width: 100%;
	height: calc(100vh - 50px);	/*ここの50pxの数字は、style.cssのheaderのheightの値です。*/
}

/* 広範囲案内メッセージ */
#map-alert {
	position: absolute;
	background: #353441;
	left: 15%;
	top: 45%;
	width: 70%;
	opacity: 0.7;
	text-align: center;
	padding: 0px 0px 0px 0px;
	border-radius: 10px;
	display: none;
}
#map-alert p {
	font-size: 20px;
	color: #fff;
}


/*検索ブロック（共通）
---------------------------------------------------------------------------*/
/*ブロック*/
#search {
	display: none;overflow: auto;
	background: #fff;	/*背景色*/
	padding: 15px;		/*余白*/
}

#search.left.db,#search.top.db {
	display: block;
	position: fixed;z-index: 1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

/*h3見出し*/
#search h3 {
	color: #7fc949;
	margin: 15px -15px 5px;
	background: #e9f5e1;
	padding: 0 15px;
}

/*こだわりアイコン*/
#search .specialbox {
	display: inline-block;
}

/*label*/
#search label {display: inline-block;}

/*ws*/
#search .ws {width: 50%;}


/*SEARCH ＆ CLOSEボタン
---------------------------------------------------------------------------*/
/*ボタン共通*/
#search_hdr {
	cursor: pointer;display: block;/*position: fixed;*/position: absolute;z-index: 100;transition: 0.2s;
	border-radius: 50%;	/*円形にする*/
	top: 110px;			/*上からの配置場所*/
	left: 20px;			/*左からの配置場所*/
	width: 70px;		/*幅*/
	height: 70px;		/*高さ*/
	background: #7fc949 url(../map_files/ham.png) no-repeat center top/70px;	/*背景色、ボタン画像の読み込み。最後の数字は画像の幅で上のwidthとheightと合わせておく。*/
	box-shadow: 3px 3px 7px rgba(0,0,0,0.3);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.3は色が30%でた状態の事。*/
}

/*マウスオン時に少しだけ明るくする*/
#search_hdr:hover {filter: brightness(1.1);}

/*×印が出ている状態の設定。*/
#search_hdr.ham {
	position: fixed;
	background: #ff0000 url(../map_files/ham.png) no-repeat center bottom/50px;
	border-radius: 0px;	/*四角形に戻す*/
	left: auto;
	right: 0px;		/*右からの配置場所*/
	top: 0px;		/*上からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
}

/*compact表示の時にはボタンを非表示に*/
#search_hdr.compact.ham {display: none;}


/*「検索条件をもっとみる」opencloseボタン。デフォルトではこのボタンは使っていません。
---------------------------------------------------------------------------*/
/*ボタン*/
#search .openclose {
	cursor: pointer;
	text-align: center;
	transition: 0.3s;
	border: 1px solid #333;	/*枠線の幅、線種、色*/
	padding: 10px;			/*ボタン内の余白*/
	color: #333;			/*文字色*/
	margin-top: 30px;		/*ボタンの上（外側）に空けるスペース*/
	border-radius: 3px;		/*角丸のサイズ*/
	box-shadow: 1px 2px 5px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.05は色が5%出た状態。*/
	opacity: 0.6;			/*透明度の設定。60%色がでた状態。*/
}

/*マウスオン時*/
#search .openclose:hover {
	opacity: 1;	/*100%色がでた状態にする*/
}

/*ボタンの冒頭についている「＋」のマーク*/
#search .openclose::before {
	content: "＋";			/*このマークを出力しています*/
	display: inline-block;
	text-align: center;
	color: #fff;			/*文字色*/
	background: #7fc949;	/*背景色*/
	width: 2em;				/*幅*/
	height: 2em;			/*高さ*/
	border-radius: 50%;		/*円形にする*/
	margin-right: 20px;		/*マークと文字との間に空けるスペース*/
}


/*btnの設定（３つ並んだボタン）
---------------------------------------------------------------------------*/
/*ボタン*/
.btn {transition: 0.3s;}

.btn input {
	outline: none;
	border: none;
	cursor: pointer;
	background: #7fc949 url(../map_files/icon_search.png) no-repeat 20px center / 1.4em;	/*背景色、背景画像の読み込み。20pxは右からの配置場所指定。1.4emは幅。*/
	color: #fff;		/*文字色*/
	border-radius: 3px;	/*角を丸くする指定*/
	padding: 10px 25px 10px 50px;	/*上、右、下、左へのボタン内の余白。*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態。*/
	font-size: 1rem;
	letter-spacing: 0.1em;
	width: 100%;
	margin-top: 10px;
}

/*キャンセル用のアイコンを上書き*/
.btn.cancel input {
	background-image: url(../map_files/icon_close.png);
}

/*ボタンのマウスオン時*/
.btn:hover {
	color: #fff;			/*文字色*/
	filter: brightness(1.1);	/*少しだけ明るくする*/
}


/*コンパクト表示用（文字サイズ小さめ）
---------------------------------------------------------------------------*/
#search.compact,#search.compact a {font-size: 0.7rem;}
#search.compact {padding: 0 5px;}
#search.compact h3 {margin: 5px -5px;}
#search.compact .btn a {margin-top: 0px;}
#search.compact .openclose {margin-top: 10px;}



/*---------------------------------------------------------------------------
ここから下は画面幅700px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:700px) {


/*検索ブロック（left）
---------------------------------------------------------------------------*/
#search.left.db {
	width: 270px;	/*ボックスの幅*/
	box-shadow: 10px 0px 10px rgba(0,0,0,0.2);
}

/*wsの幅を変更する*/
#search.left .ws {width: 100%;}


/*検索ブロック（top）
---------------------------------------------------------------------------*/
#search.top.db {
	position: absolute;
	height: auto;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
}
#search.top .search-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*２列にする設定*/
#search.top .search-container .box {
	width: 45%;			/*各ボックスの幅*/
	margin-left: 2.5%;	/*各ボックスの左側（外側）に空けるスペース*/
	margin-right: 2.5%;	/*各ボックスの右側（外側）に空けるスペース*/
}

/*３つボタンの並び方*/
#search.top > .box {
	display: flex;
	justify-content: center;
}

/*３つボタン同士の間隔*/
#search.top > .box .btn {
	margin-left: 5px;
	margin-right: 5px;
}


/*SEARCH ＆ CLOSEボタン
---------------------------------------------------------------------------*/
/*ボタン共通*/
#search_hdr {
	position: absolute;
	top: 110px;		/*上からの配置場所*/
	width: 100px;	/*幅*/
	height: 100px;	/*高さ*/
	background-size: 100px;	/*背景画像の幅*/
}

/*left----------------------------------------------*/
#search_hdr.ham.left {
	display: block;
	border-radius: 0px 5px 5px 0px;	/*角丸の指定。左上、右上、右下、左下の順。*/
	left: 270px;	/*左からの配置場所*/
	top: 20px;		/*上からの配置場所*/
	width: 50px;	/*幅*/
	height: 100px;	/*高さ*/
	background-size: 100px;	/*背景画像の幅*/
	position: fixed;	/*スクロールしても動かない指定*/
}

/*top----------------------------------------------*/
#search_hdr.ham.top {display: none;}


/*コンパクト表示用（文字サイズ小さめ）
---------------------------------------------------------------------------*/
#search.compact.top .search-container .box {
	width: 47%;
	margin-left: 1.5%;
	margin-right: 1.5%;
}


}