@charset "utf-8";

/*________________________________________________

	name:			pc.css
	create Date:	2018-02-08
	lastmodified:	****-**-**
________________________________________________*/

/* --------------------------------------------------
  #tmp_wrap_searcharea
-------------------------------------------------- */
#tmp_wrap_searcharea {
	clear: both;
	background-color: #efe2e6;
	margin-bottom: 40px;
}
#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 {
	-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;
}
/*clearfix*/
#tmp_wrap_searcharea dl:after {
	content: "";
	display: table;
	clear: both;
}
#tmp_wrap_searcharea dt {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	width: 120px;
	margin: 0 20px 40px 0;
	padding: 0;
	font-size: 114%;
}
#tmp_wrap_searcharea dd {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	width: -webkit-calc(100% - 140px);
	width: calc(100% - 140px);
	margin: 0 0 40px 0;
	padding: 0;
}
/*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% - 1.2em);
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	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: 0.8em;
	padding-bottom: 0.8em;
	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 li {
	display: inline-block;
	margin-right: 0.8em;
}
#tmp_wrap_searcharea dd .area li 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 .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;
	margin-right: 20px;
	width: 270px;
}
#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 {
	-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: 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 {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	float: left;
	display: inline-block;
	margin: 10px 10px 0 0;
	width: 120px;
}
#tmp_wrap_searcharea dd .genre li:nth-child(even) {
	margin: 10px 0 0 0;
}
#tmp_wrap_searcharea dd .genre li:first-child,
#tmp_wrap_searcharea dd .genre li:nth-child(2) {
	margin-top: 0;
}
#tmp_wrap_searcharea dd .genre2 {
	float: left;
	margin-right: 0;
	width: 560px;
}
#tmp_wrap_searcharea dd .genre2 p {
	float: left;
	display: inline-block;
	width: 270px;
	margin: 0 10px 10px 0;
	padding: 0;
	vertical-align: top;
}
#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;
	padding: 20px 0 40px 0;
	width: auto;
	text-align: center;
}
#tmp_wrap_searcharea .btn button {
	display: inline-block;
	margin: 0 20px;
	padding: 20px;
	width: auto;
	min-width: 260px;
	height: auto;
	text-align: center;
	outline: none;
	appearance: none;
	cursor: pointer;
	border: none;
	font-size: 128.6%;
	border-radius: 8px;         /* CSS3 */
	-moz-border-radius: 8px;    /* Firefox */
	-webkit-border-radius: 8px; /* 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);
}

/* --------------------------------------------------
  #tmp_wrap_searcharea
-------------------------------------------------- */
#tmp_wrap_searcharea {
	clear: both;
	background-color: #efe2e6;
	margin-bottom: 40px;
}

/* --------------------------------------------------
  .areaMap
-------------------------------------------------- */
.areaMap {
	clear: both;
}
/*clearfix*/
.areaMap:after {
	content: "";
	display: table;
	clear: both;
}
.areaMap .googleMap {
    float: left;
	width: 820px;
	height: 600px;
	overflow: hidden;
}
.areaMap .googleMap iframe {
	width: 100%;
	height: 600px;
}
/* --------------------------------------------------.mapMenu*/
.mapMenu {
	float: right;
	margin: 0;
	padding: 20px;
	width: 220px;
	height: 560px;
	background-color: #fafafa;
	text-align: center;
}
.mapMenu .mapMenu_ttl {
	display: inline-block;
	margin: 0 auto!important;
	padding: 0;
	font-size: 143%;
	text-align: center;
}
.mapMenu button {
	clear: both;
	display: block;
	margin: 10px 0 0 0;
	padding: 15px 10px 15px 80px;
	width: 100%;
	height: auto;
	outline: none;
	appearance: none;
	cursor: pointer;
	border: none;
	color: inherit;
	text-align: left;
	background-color: #fff;
	background-position: 20px center;
	background-repeat: no-repeat;
	border-radius: 4px;         /* CSS3 */
	-moz-border-radius: 4px;    /* Firefox */
	-webkit-border-radius: 4px; /* Safari,Chrome */
	box-shadow: 0 3px 0px 0 #cccccc;         /* CSS3 */
	-moz-box-shadow: 0 3px 0px 0 #cccccc;   /* Firefox */
}
.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 {
	float: right;
	margin: 0;
	padding: 20px;
	width: 220px;
	height: 560px;
	background-color: #fafafa;
	overflow: auto;
	overflow: scroll; /* ie6対策 */
	overflow-y: scroll; /* ie6対策 */
	overflow-x: hidden; /* ie6対策 */
}
.mapList .detail {
	clear: both;
	margin: 20px 0 0 0;
	padding: 0;
	width: auto;
	height: auto;
	background-color: #fff;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);         /* CSS3 */
	-moz-box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);   /* Firefox */
	-webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);/* Safari,Chrome */
}
.mapList .detail:first-child {
	margin-top: 0;
}
/* clearfix */
.mapList .detail dl:after {
	content: "";
	display: table;
	clear: both;
}
.mapList .detail dl {
	-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;
	padding: 0;
	width: auto;
	height: auto;
}
.mapList .detail dt {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	display: inline-block;
	margin: 0;
	padding: 0.5em 0;
	width: 2.6em;
	height: auto;
	color: #fff;
	text-align: center;
	vertical-align: middle;
}
.mapList .detail dt.genre_taiken {
	background-color: #e60012;
}
.mapList .detail dt.genre_gourmet {
	background-color: #00994b;
}
.mapList .detail dt.genre_nature {
	background-color: #91c137;
}
.mapList .detail dt.genre_art {
	background-color: #eb6477;
}
.mapList .detail dt.genre_history {
	background-color: #875b9e;
}
.mapList .detail dt.genre_leisure {
	background-color: #004d9a;
}
.mapList .detail dt.genre_stay {
	background-color: #7f6a5b;
}
.mapList .detail dt.genre_onsen {
	background-color: #ec5a12;
}
.mapList .detail dd {
	-webkit-align-items: stretch; /* Safari */
	align-items: stretch;
	display: inline-block;
	margin: 0;
	padding: 0.5em;
	width: -webkit-calc(100% - 3.6em);
	width: calc(100% - 3.6em);
	height: auto;
	text-align: left;
}
.mapList .image {
	display: block;
	clear: both;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	text-align: center;
}
.mapList .image img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}
/* --------------------------------------------------.mapPin*/
.mapPin {
	clear: both;
	margin: 20px 0 0 0;
	padding: 20px;
	width: auto;
	height: auto;
	background-color: #fafafa;
	text-align: left;
}
.mapPin .mapPin_ttl {
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 143%;
}
/*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 -20px 0 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: 20px 20px 0 0!important;
	padding: 15px 20px 15px 80px!important;
	width: 145px;
	height: auto;
	background-color: #fff;
	background-position: 20px center;
	background-repeat: no-repeat;
	vertical-align: middle;
}
.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: 850px;
	padding: 30px 20px 20px;
	background-color: #fff;
}
.modal_close {
	background: url(../../img/common/modal_close.png) no-repeat;
	display: block;
	height: 19px;
	position: absolute;
	right: 12px;
	top: 12px;
	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;
	align-items: center;
	clear: both;
	list-style-image: none;
	margin: 0;
}
/*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: 23%;
	margin: 1%;
	text-align: left;
	font-size: 86%;
}
#pict ul li span {
	display: block;
	float: left;
	margin-right: 0.6em;
}