/* #bottomBigBanner */
#bottomBigBanner {
	display: none;
	z-index: 1400;
	position: absolute;
	width: 468px;
	height: 60px;
	left: 0;
	bottom: 0;	
}

/* ボタン */
#ico_googleMap {	
	display: none;	
	opacity: 0;
	position: absolute;
	width: 41px;
	height: 41px;
	top: 0;
	left: 0;
	background: url("../common/img/ico_google_map.svg") no-repeat;
	cursor: pointer;	
}
#ico_yahoo {
	display: none;	
	opacity: 0;
	position: absolute;
	width: 41px;
	height: 41px;
	top: 0;
	left: 0;
	background: url("../common/img/ico_yahoo.svg") no-repeat;
	cursor: pointer;
}
.btn_close {
	display: inline-block;
	width: 31px;
	height: 31px;
	background: url(../common/img/btn_close.svg) no-repeat;	
	cursor: pointer;
}
.btn_leftArrow {
	display: inline-block;
	width: 31px;
	height: 31px;
	background: url(../common/img/btn_leftArrow.svg) no-repeat;	
	cursor: pointer;
}
#btn_save_setting {
	width: fit-content;
	width: -moz-fit-content;
	padding: 20px 40px;
	margin: 0 auto;
	color: #fff;
	background-color: #0b8d99;
	font-weight: bold;
	border-radius: 5px;
	cursor: pointer;
}

/* ポップアップ pane ---------------------------------------------*/
#map div.leaflet-popup-pane section.rating {
	width:63px;
	height:12px;
	padding-left:68px;
	background-repeat: no-repeat;
	background-size: contain;
}
#map div.leaflet-popup-pane h2.title_popup {
	color: #1d53cc;
	margin-bottom:3px;
	cursor: pointer;
}
#map div.leaflet-popup-pane h2.title_popup:hover {
	color: #42a3cc;
}

/* コントロール pane ---------------------------------------------*/
/* iPhone Safari でコントロールpane が消えるバグ対策
   Apple の Safari 修正を待つしかない…
   ※ https://github.com/Leaflet/Leaflet/issues/8068
*/
#map div.leaflet-control-container div.leaflet-top,
#map div.leaflet-control-container div.leaflet-bottom {
  will-change: transform;
}

/* #layer_loading */
#layer_loading {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 6000;
	width: 100vw;
	height: 100vh;
	background: #fff url(../common/img/ico_loading.svg) center 40% no-repeat;
	opacity: 80%;
}

/* #layer_option */
#layer_option {
	font-size: 20px;
	line-height: 1;	
	opacity: 96%;
	position: absolute;
	overflow: auto;
	width: 0;
	height: 0;
	padding: 10px;
	display: none;
	background-color: #fff;
	z-index: 1600;	
}
#layer_option section.facility_group {
	text-align: left;
	width: fit-content;
	width: -moz-fit-content;	
	padding: 0 0 25px 40px;
}
#layer_option label {	
	display: block;
	margin-bottom: 20px;
	width: fit-content;
	width: -moz-fit-content;	
	line-height: 1;
	cursor: pointer;
}
#layer_option label.op {
	padding-left: 21px;
}
#layer_option div.f_katu_s label.op {
	padding-left: 42px;
}
#layer_option input {
	position: relative;
	top: -2px;
	cursor: pointer;
	margin-right: 5px;
}
#layer_option small {
	display: block;
	width: fit-content;
	width: -moz-fit-content;
	font-size: 14px;
	line-height: 1.2;	
}
#grp_michinoeki {
	background: url(../common/img/ico_michinoeki_noArrow.svg) no-repeat left top / 30px;
}
#grp_RVpark {
	background: url(../common/img/ico_rvpark.svg) no-repeat left top / 30px;
}
#grp_camp {
	background: url(../common/img/ico_camp_noArrow.svg) no-repeat left top / 30px;
}
#grp_spa {
	background: url(../common/img/ico_spa_noArrow.svg) no-repeat left top / 30px;
}
#grp_spa_in_hotel {
	background: url(../common/img/ico_spa_in_hotel_noArrow.svg) no-repeat left top / 30px;
}
#grp_spa_pro {
	background: url(../common/img/ico_spa_pro_noArrow.svg) no-repeat left top / 30px;
}
#grp_sa {
	background: url(../common/img/ico_sa.svg) no-repeat left top / 30px;
}
#grp_pa {
	background: url(../common/img/ico_pa.svg) no-repeat left top / 30px;
	margin-bottom: 50px;
}
#box_setting {
	width: fit-content;
	width: -moz-fit-content;
	margin: 0 auto 70px;
	border: dashed #333;
	border-width: 1px 0 0 0;
	padding-top: 70px;
}
#box_setting label {
	margin-bottom: 10px;
}

/* #layer_detail */
#layer_detail {
	display:none;
	position: absolute;
	width: 0;
	height: 0;
	top: 0;
	left: 0;
	padding: 0;
	overflow-y: auto;
	background-color: #fff;
	z-index:1500;
}
#layer_detail .btn_close {
	position: absolute;
	top: 5px;
	right: 5px;	
	z-index: 1500;	
}
#layer_detail h3 {
	font-weight: bold;
	line-height: 1;
}
#layer_detail time {
	font-size: 12px;
	 color: #999;
}
#layer_detail img.person {
	vertical-align: middle;
	margin-right: 5px;
}
#layer_detail div.box_person {
	padding-bottom: 5px;
}
#layer_detail article {
	border: dotted #999;
	border-width: 0 0 1px 0;
	padding: 0 0 10px 0;
	margin-bottom: 10px;
}
#layer_detail article span.userRating {
	position: relative;
	display: inline-block;
	width: 63px;
	height: 13px;
	top: 1px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left 1px;
}
#layer_detail article div.thumbs {
	display: flex;
}
#layer_detail article div.thumbs figure {
	width: 60px;
	height: 60px;
	background: center/contain no-repeat;
	margin-right: 5px;
	cursor: pointer;
}
#layer_detail article div.thumbs figure:last-child {
	margin-right: 0;
}
#layer_detail section.report {
	padding-top: 10px;
	text-align: right;
}
#layer_detail section.report small {
	color: #666;
	display: inline;
	font-size: 10px;
	line-height: 1;
	border: 1px solid #aaa;
	border-radius: 2px;
	padding: 3px;
	cursor: pointer;
}

/* #layer_option_rightTopArea */
#layer_option_rightTopArea {
	position: sticky;
	text-align: right;
	top: 0;
}

/* #layer_detail_rightTopArea */
#layer_detail_rightTopArea {
	position: sticky;
	text-align: right;
	top: 0;
}

/* #box_overview */
#box_overview {	
	border: dotted #aaa;
	border-width: 0 0 1px 0;
	margin-bottom: 10px;
}
#box_overview h2 {
	padding-right: 31px;
	font-size: 18px;
	line-height: 1.2;
	font-weight: bold;
}

/* #evaluate */
#evaluate {
	color: #222;
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	border: 1px solid #aaa;
	border-radius: 2px;
	padding:4px 5px 3px 5px;
	cursor: pointer;
	margin-bottom: 30px;
}

/* #rating */
#rating {	
	margin-bottom: 5px;
	padding-left: 89px;
	height: 16px;	
}

/* #layer_carousel */
#layer_carousel {
	top: 0;
	left: 0;
	display: none;
	align-items: center;
	justify-content: center;
	position:absolute;	
	z-index:5000;
	background-color: #000;
}

/* #slider */
#slider {
	position:absolute;
	width: 100vw;
	max-width:600px;
	height: 100vh;
	max-height: 600px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);	
	overflow: hidden;	
}
#slider .btn_downArrow {
	display: inline-block;
	width: 31px;
	height: 31px;
	background: url(../common/img/btn_downArrow.svg) no-repeat;	
	cursor: pointer;

	position: absolute;
	top: 0;
	right: 0;	
	z-index: 5100;	
}
#slider .btn_next , 
#slider .btn_back {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);		
	width: 31px;
	height: 62px;	
	cursor: pointer;
	opacity: 70%;
	z-index: 5100;
}
#slider .btn_next {	
	right: 0;
	background: url(../common/img/btn_next.svg) left top no-repeat;	
}
#slider .btn_back {	
	left: 0;
	background: url(../common/img/btn_back.svg) left top no-repeat;	
}

/* #photos */
#photos {	
	display: flex;		
	width: 3000px;
	height: 100vh;
	max-height: 600px;	
}
#photos figure {
	width: 100vw;
	max-width:600px;
	height: 100vh;
	max-height: 600px;
	background: center/contain no-repeat;
}

/* #area_detail_nextback */
#area_detail_nextback {
	text-align: center;
	margin-top: 40px;
	padding-bottom: 40px;
}
#area_detail_nextback span {
	font-size: 12px;
	cursor: pointer;
	border-radius: 2px;
	border: 1px solid #999;
	padding: 6px 8px 5px 8px;
}
#area_detail_nextback span:first-child {
	margin-right: 40px;
}