@charset "utf-8";

/*________________________________________________

	name:			sp.css
	create Date:	2018-02-08
	lastmodified:	****-**-**
________________________________________________*/

/* --------------------------------------------------
  #tmp_wrap_searcharea
-------------------------------------------------- */
#tmp_wrap_searcharea {
	clear: both;
	background-color: #efe2e6;
	margin-bottom: 20px;
}
#tmp_wrap_searcharea .btn_openclose {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
}
#tmp_wrap_searcharea .btn_openclose a {
	display: block;
	width: auto;
	height: auto;
	padding: 10px;
	color: #fff;
	background-color: #624266;
	text-align: center;
	text-decoration: none;
}
#tmp_wrap_searcharea .btn_openclose a span {
	display: inline-block;
	padding-left: 15px;
	background-position: left 0.7em;
	background-repeat: no-repeat;
}
#tmp_wrap_searcharea .btn_openclose a span {
	background-image: url(../../img/common/arrow_open.png);
}
#tmp_wrap_searcharea .active a span {
	background-image: url(../../img/common/arrow_close.png);
}
#tmp_wrap_searcharea .btn_openclose a span:after {
    content: "開く";
}#tmp_wrap_searcharea .active a span:after {
    content: "閉じる";
}
#tmp_wrap_searcharea dl {
	clear: both;
	margin: 0;
	padding: 20px 10px;
}
/*clearfix*/
#tmp_wrap_searcharea dl:after {
	content: "";
	display: table;
	clear: both;
}
#tmp_wrap_searcharea dt {
	clear: both;
	width: auto;
	margin: 0 0 5px 0;
	padding: 0;
}
#tmp_wrap_searcharea dd {
	clear: both;
	width: auto;
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 86%;
}
/*clearfix*/
#tmp_wrap_searcharea dd:after {
	content: "";
	display: table;
	clear: both;
}
#tmp_wrap_searcharea dt:last-child,
#tmp_wrap_searcharea dd:last-child {
	margin-bottom: 0;
}
#tmp_wrap_searcharea dd input {
	margin-right: 0.8em;
	vertical-align: middle;
	border: none;
	border-radius: 4px;         /* CSS3 */
	-moz-border-radius: 4px;    /* Firefox */
	-webkit-border-radius: 4px; /* Safari,Chrome */
}
#tmp_wrap_searcharea dd label {
	vertical-align: middle;
	white-space: nowrap;
}
#tmp_wrap_searcharea dd input.datePicker {
	width: calc(50% - 1em);
	padding-top: 1.6em;
	padding-bottom: 1.6em;
	margin-right: 0;
	text-indent: 0.8em;
	border: none;
	vertical-align: middle;
}
#tmp_wrap_searcharea dd input.wide,
#tmp_wrap_searcharea dd select {
	width: calc(100% - 0.8em);
	padding-top: 1.6em;
	padding-bottom: 1.6em;
	margin-right: 0;
	text-indent: 0.8em;
	border: none;
}
#tmp_wrap_searcharea dd select {
	margin-bottom: 0.8em;
}
#tmp_wrap_searcharea dd textarea {
	width: calc(100% - 1.6em);
	height: 4em;
	margin: 0;
	padding: 0.8em;
	border: none;
}
#tmp_wrap_searcharea dd ul {
	list-style-image: none;
	margin: 0;
}
/*clearfix*/
#tmp_wrap_searcharea dd ul:after {
	content: "";
	display: table;
	clear: both;
}
#tmp_wrap_searcharea dd .area ul {
	-js-display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-flow: row wrap;
	clear: both;
	width: auto;
}
#tmp_wrap_searcharea dd .area li {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	display: inline-block;
	margin-right: 3%;
	width: 30%;
	vertical-align: top;
}
#tmp_wrap_searcharea dd .area li:nth-child(3),
#tmp_wrap_searcharea dd .area li:nth-child(6),
#tmp_wrap_searcharea dd .area li:nth-child(9) {
	margin-right: 0;
}
#tmp_wrap_searcharea dd .area li a {
	display: block;
	margin: 0;
	padding: 0.8em;
	width: auto;
	height: auto;
	vertical-align: middle;
	text-decoration: none;
	color: #332123;
	border: none;
	background-color: #fff;
	text-align: center;
	border-radius: 4px;         /* CSS3 */
	-moz-border-radius: 4px;    /* Firefox */
	-webkit-border-radius: 4px; /* Safari,Chrome */
}
#tmp_wrap_searcharea dd .area li a:hover,
#tmp_wrap_searcharea dd .area li a.selected,
#tmp_wrap_searcharea dd .area li a:active {
    background-color: #996368;
    color: #fff;
}
#tmp_wrap_searcharea dd .genre {
	float: left;
	display: inline-block;
	margin: 0 3% 0 0;
	width: 30%;
	vertical-align: top;
}
#tmp_wrap_searcharea dd .genre:nth-child(3),
#tmp_wrap_searcharea dd .genre:nth-child(6),
#tmp_wrap_searcharea dd .genre:nth-child(9) {
	margin-right: 0;
}
#tmp_wrap_searcharea dd .genre p {
	clear: both;
	display: block;
	margin: 10px 0 0 0;
	padding: 0;
}
#tmp_wrap_searcharea dd .genre p:first-child {
	margin-top: 0;
}
#tmp_wrap_searcharea dd .genre ul {
	display: block;
	margin: 0;
	padding: 10px;
	background-color: #eeeeee;
	border-radius: 0 0 4px 4px;         /* CSS3 */
	-moz-border-radius: 0 0 4px 4px;    /* Firefox */
	-webkit-border-radius: 0 0 4px 4px; /* Safari,Chrome */
}
#tmp_wrap_searcharea dd .genre li {
	clear: both;
	display: block;
	margin: 10px 0 0 0;
}
#tmp_wrap_searcharea dd .genre li:first-child {
	margin-top: 0;
}
#tmp_wrap_searcharea dd .genre2 {
	-js-display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-flow: row wrap;
	float: left;
	margin: 0;
	width: 66%;
}
#tmp_wrap_searcharea dd .genre2 p {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	display: inline-block;
	width: 47%;
	margin: 0 6% 10px 0;
	padding: 0;
	vertical-align: top;
}
#tmp_wrap_searcharea dd .genre2 p:nth-child(even) {
	margin: 0 0 10px 0;
}
#tmp_wrap_searcharea dd .genre a,
#tmp_wrap_searcharea dd .genre2 a {
	display: block;
	margin: 0;
	padding: 0.8em;
	vertical-align: middle;
	text-decoration: none;
	color: #332123;
	border: none;
	background-color: #fff;
	text-align: center;
	border-radius: 4px;         /* CSS3 */
	-moz-border-radius: 4px;    /* Firefox */
	-webkit-border-radius: 4px; /* Safari,Chrome */
}
#tmp_wrap_searcharea dd .genre a:hover,
#tmp_wrap_searcharea dd .genre2 a:hover,
#tmp_wrap_searcharea dd .genre a.selected,
#tmp_wrap_searcharea dd .genre2 a.selected,
#tmp_wrap_searcharea dd .genre a:active,
#tmp_wrap_searcharea dd .genre2 a:active {
    background-color: #996368;
    color: #fff;
}
#tmp_wrap_searcharea .btn {
	display: block;
	margin: 0 0 20px 0;
	padding: 0;
	width: auto;
	text-align: center;
}
#tmp_wrap_searcharea .btn button {
	display: inline-block;
	margin: 0 1%;
	padding: 15px 0;
	width: auto;
	min-width: 46%;
	height: auto;
	text-align: center;
	outline: none;
	appearance: none;
	cursor: pointer;
	border: none;
	border-radius: 4px;         /* CSS3 */
	-moz-border-radius: 4px;    /* Firefox */
	-webkit-border-radius: 4px; /* Safari,Chrome */
}
#tmp_wrap_searcharea .btn button.btn_submit {
	color: #fff;
	background-color: #cc858b;
	box-shadow: 0 3px 0px 0 #996368;         /* CSS3 */
	-moz-box-shadow: 0 3px 0px 0 #996368;   /* Firefox */
	-webkit-box-shadow: 0 3px 0px 0 #996368;/* Safari,Chrome */
}
#tmp_wrap_searcharea .btn button.btn_reset {
	color: #332123;
	background-color: #fff;
	box-shadow: 0 3px 0px 0 #cccccc;         /* CSS3 */
	-moz-box-shadow: 0 3px 0px 0 #cccccc;   /* Firefox */
	-webkit-box-shadow: 0 3px 0px 0 #cccccc;/* Safari,Chrome */
}
#tmp_wrap_searcharea .btn button:hover {
	box-shadow: none;
    transform: translate3d(0, 3px, 0);
}

/* --------------------------------------------------
  .areaMap
-------------------------------------------------- */
.areaMap {
	clear: both;
}
/*clearfix*/
.areaMap:after {
	content: "";
	display: table;
	clear: both;
}
.areaMap .googleMap {
	clear: both;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
.areaMap .googleMap iframe {
	width: 100%;
	height: 300px;
}
/* --------------------------------------------------.mapMenu*/
.mapMenu {
	-js-display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-flow: row wrap;
	clear: both;
	margin: 0;
	padding: 20px 10px;
	width: auto;
	height: auto;
	background-color: #fafafa;
	text-align: center;
}
/*clearfix*/
.mapMenu:after {
	content: "";
	display: table;
	clear: both;
}
.mapMenu .mapMenu_ttl {
	display: inline-block;
	margin: 0 auto!important;
	padding: 0;
	font-size: 128.6%;
	text-align: center;
}
.mapMenu button {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	display: inline-block;
	margin: 10px 5px 0 0;
	padding: 15px 10px 15px 60px;
	width: -webkit-calc(50% - 10px);
	width: calc(50% - 10px);
	height: auto;
	outline: none;
	appearance: none;
	cursor: pointer;
	border: none;
	color: inherit;
	text-align: left;
	background-color: #fff;
	background-position: 10px center;
	background-repeat: no-repeat;
	border-radius: 4px;         /* CSS3 */
	-moz-border-radius: 4px;    /* Firefox */
	-webkit-border-radius: 4px; /* Safari,Chrome */
	vertical-align: top;
	box-shadow: 0 3px 0px 0 #cccccc;         /* CSS3 */
	-moz-box-shadow: 0 3px 0px 0 #cccccc;   /* Firefox */
}
.mapMenu button:nth-child(even) {
	/*float: right;*/
}
.mapMenu button.genre_taiken {
	background-image: url(../../img/pin/pin_taiken.png);
}
.mapMenu button.genre_gourmet {
	background-image: url(../../img/pin/pin_gourmet.png);
}
.mapMenu button.genre_nature {
	background-image: url(../../img/pin/pin_nature.png);
}
.mapMenu button.genre_art {
	background-image: url(../../img/pin/pin_art.png);
}
.mapMenu button.genre_history {
	background-image: url(../../img/pin/pin_history.png);
}
.mapMenu button.genre_leisure {
	background-image: url(../../img/pin/pin_leisure.png);
}
.mapMenu button.genre_stay {
	background-image: url(../../img/pin/pin_stay.png);
}
.mapMenu button.genre_onsen {
	background-image: url(../../img/pin/pin_onsen.png);
}
.mapMenu button:hover {
	box-shadow: none;
    transform: translate3d(0, 3px, 0);
}
.mapMenu button:active,
.mapMenu button.active_button {
	background-color: #e6c0c0;
	box-shadow: none;
    transform: translate3d(0, 3px, 0);
}
/* --------------------------------------------------.mapList*/
.mapList {
	display: none;
}
/* --------------------------------------------------.mapPin*/
.mapPin {
	clear: both;
	margin: 0;
	padding: 10px;
	width: auto;
	height: auto;
	background-color: #fafafa;
	text-align: left;
}
.mapPin .mapPin_ttl {
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 128.6%;
}
/*clearfix*/
.mapPin ul:after {
	content: "";
	display: table;
	clear: both;
}
.mapPin ul {
	-js-display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	clear: both;
	margin: 0!important;
	padding: 0!important;
	width: auto;
	height: auto;
	list-style-image: none;
}
.mapPin li {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	display: inline-block;
	margin: 10px 10px 0 0!important;
	padding: 15px 10px 15px 60px!important;
	width: -webkit-calc(50% - 80px);
	width: calc(50% - 80px);
	height: auto;
	background-color: #fff;
	background-position: 10px center;
	background-repeat: no-repeat;
	vertical-align: middle;
	font-size: 86%;
}
.mapPin li:nth-child(even) {
	margin-right: 0;
}
.mapPin li.genre_taiken {
	background-image: url(../../img/pin/pin_taiken.png);
}
.mapPin li.genre_gourmet {
	background-image: url(../../img/pin/pin_gourmet.png);
}
.mapPin li.genre_nature {
	background-image: url(../../img/pin/pin_nature.png);
}
.mapPin li.genre_art {
	background-image: url(../../img/pin/pin_art.png);
}
.mapPin li.genre_history {
	background-image: url(../../img/pin/pin_history.png);
}
.mapPin li.genre_leisure {
	background-image: url(../../img/pin/pin_leisure.png);
}
.mapPin li.genre_stay {
	background-image: url(../../img/pin/pin_stay.png);
}
.mapPin li.genre_onsen {
	background-image: url(../../img/pin/pin_onsen.png);
}

/* --------------------------------------------------
  モーダル
-------------------------------------------------- */
#lean_overlay {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: #000;
}
.modal {
	display: none;
	width: 80%;
	padding: 40px 10px 10px 20px;
	background-color: #fff;
}
.modal_close {
	background: url(../../img/common/modal_close.png) no-repeat;
	display: block;
	height: 19px;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 19px;
	z-index: 2;
}
#pict ul {
	-js-display: flex;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	flex-flow: row wrap;
	clear: both;
	list-style-image: none;
	margin: 0;
	font-size: 86%;
}
/*clearfix*/
#pict ul:after,
#pict ul li:after {
	content: "";
	display: table;
	clear: both;
}
#pict ul li {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	display: inline-block;
	width: 46%;
	margin: 0 4% 10px 0;
	text-align: left;
}
#pict ul li:nth-child(even) {
	margin-right: 0;
}
#pict ul li span {
	display: block;
	float: left;
	width: 40px;
	height: auto;
	margin-right: 0.6em;
}
#pict ul li span img {
	width: 100%;
	height: auto;
}
