@charset "utf-8";

/* MAIN_RYOKAN_CSS Document */

.no-js{
	display:none;
}


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------LAYOUT*/

body{
	overflow-x:hidden;
	
}

/* Main_Top Layout ----------------------------------------------------------------------------------------------------------------------------*/

.top1 {
	position: absolute;
	top: 0;
	width: 100%;
	background-color:#000;
	min-width:1600px;
}
.head_area {
	position: absolute;
	top: 30px;
	left:50%;
	margin-left:-600px;
	width: 1200px;
	height: 40px;
}
.cont_area {
	position: absolute;
	top: 150px;
	left:50%;
	margin-left:-600px;
	width: 1200px;
}

/* Main_Middle Layout ----------------------------------------------------------------------------------------------------------------------------*/

.middle1 {
	position: absolute;
	top: 500px;
	width: 100%;
	height: 1000px;
	background-color: #fff;
	min-width:1600px;
}
.listdetail_area{
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -600px;
	width: 1200px;
}
.banner_area{
	position: absolute;
	top: 700px;
	background-color: #332d2e;
	width: 100%;
	height: 200px;
}


/* Main_Bottom Layout ----------------------------------------------------------------------------------------------------------------------------*/

.bottom1 {
	position: absolute;
	top: 1500px;
	width: 100%;
	height: 340px;
	background-color: #363636;
	min-width:1600px;
}
.contact_area {
	position: absolute;
	top: 0;
	width: 100%;
	height: 170px;
	background-color: #f0f0f0;
}
.footer_area {
	position: absolute;
	top: 170px;
	left:50%;
	margin-left:-600px;
	width: 1200px;
	height: 170px;
	background-color: #fff;
}





/**/
/**/
/**/
/**/
/**/





/* Head_area Layout ----------------------------------------------------------------------------------------------------------------------------*/




/* Cont_area Layout ----------------------------------------------------------------------------------------------------------------------------*/

.main_title {
	text-align: center;
	color: #fff;
	font-size: 24px;
	line-height: 28px;
}

.main_regionfield{
	color: #444444;
}

/* Listdetail_area Layout ----------------------------------------------------------------------------------------------------------------------------*/

.main_regionnavi{
	position: relative;
	height: 60px;
	margin-bottom: 20px;
}
.main_mapfield{
	position: relative
}

/* Banner_area Layout ----------------------------------------------------------------------------------------------------------------------------*/

.main_promo{
	position: absolute;
	width: 1500px;
	height: 200px;
	left: 50%;
	transform: translate(-50%,0);
	text-align: center;
}
.main_other{
	position: absolute;
	top: 200px;
	width: 1200px;
	left: 50%;
	transform: translate(-50%,0);
	text-align: right;
	padding-top: 50px;
}

/**/
/**/
/**/
/**/
/**/







/* Cont_area Contents ----------------------------------------------------------------------------------------------------------------------------*/


.titletxt{
	font-size: 50px;
	font-weight: 600;
	margin-bottom: 30px;
}
.goregion{
	display: inline-block;
	margin-top: 50px;
	font-size: 20px;
	border:solid 2px #fff;
	width: 300px;
	height: 60px;
	border-radius: 15px;
	text-align:center;
	box-sizing: border-box;
	line-height: 56px;
	cursor: pointer;
}
.goregion .downico{
	display: inline-block;
	margin-left: 10px;
	position: relative;
	top: -3px;
}


.region_depth{
	display: none;
	position: relative;
	left: 50%;
	margin-left: -500px;
	width: 1000px;
	height: 300px;
	background-color:rgba(255,255,255,0.95);
	border-radius: 15px;
	overflow:hidden;
	border:solid 2px #252525;
	z-index: 10;
}
.depth1_list{
	color: #fff;
	font-size: 20px;
}
.depth1_list li{
	display: inline-block;
	width: 20%;
	height: 70px;
	text-align: center;
	float: left;
	background-color: #252525;
}
.depth1_list li p{
	display: inline-block;
	cursor: pointer;
	line-height: 70px;
}
.depth2_list{
	font-size: 17px;
}
.depth2_list li{
	display: inline-block;
	width: 20%;
	height: 180px;
	text-align: center;
	float: left;
	padding:10px 0px;
}
.depth2_list li p{
	line-height: 29px;
}
.depth2_list li p span{
	cursor: pointer;
}
.depth2_list li p span:hover{
	color: #872727;
	border-bottom: solid 1px #872727;
	font-weight: 600;
}
.region_guide{
	width: 100%;
	float: right;
	font-size: 13px;
}
.region_guide p{
	padding-top: 3px;
	padding-right: 20px;
	border-top: solid 1px #d7d7d7;
	text-align: right;
}


/* Listdetail_area Contents ----------------------------------------------------------------------------------------------------------------------------*/

.region_navi{
	width: 100%;
}
.region_navi li{
	float: left;
	text-align: center;
	color: #fff;
	width: 240px;
	height: 60px;
	box-sizing: border-box;
	display: inline-block;
	background-color: #2f2f2f;
	border-radius: 5px;
	border: solid 1px #202020;
	line-height: 58px;
	font-size: 22px;
}
.region_navi li:hover{
	background-color: #b42928;
	border: solid 1px #af0b0a;
	font-weight: 600;
	cursor: pointer;
}
.navilist.active{
	background-color: #b42928;
	border: solid 1px #af0b0a;
	font-weight: 600;
}

.mapfield_cont{
	width: 1200px;
	height: 600px;
	background-image: url('../img/main_ryokan/mapfield_bg.jpg');
}
.cont_left{
	display: inline-block;
	position: absolute;
	left: 0;
	width: 600px;
	height: 600px;
	cursor: pointer;
}
.left_map{

}
.mapimg2,.mapimg3,.mapimg4,.mapimg5{
	display: none;
}
.img_repre{

}


/******** TOOLTIP PICK **********/
.img_tooltip1{
	position: absolute;
	top: 300px;
	left: 410px;
	z-index: 5;
	cursor: pointer;
	opacity: 0;
}
.img_tooltip2{
	position: absolute;
	top: 358px;
	left: 267px;
	z-index: 5;
	cursor: pointer;
	opacity: 0;
}
.img_tooltip3{
	position: absolute;
	top: 430px;
	left: 164px;
	z-index: 5;
	cursor: pointer;
	opacity: 0;
}
.img_tooltip4{
	position: absolute;
	top: 162px;
	left: 405px;
	z-index: 5;
	cursor: pointer;
	opacity: 0;
}
.img_tooltip5{
	position: absolute;
	top: 73px;
	left: 395px;
	z-index: 5;
	cursor: pointer;
	opacity: 0;
}
.tooltiptxt{
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
	background-color: #eeeeee;
	border: solid 1px #b2b2b2;
	border-radius: 5px;
	padding: 5px 8px;
}
.tooltipimg{
	position: absolute;
	top: 25px;
	left: 40px;
	z-index: 6;
}
.tooltipimg2{
	position: absolute;
	top: 25px;
	left: 67px;
	z-index: 6;
}
.tooltipimg4{
	position: absolute;
	top: 25px;
	left: 48px;
	z-index: 6;
}
.tooltipimg5{
	position: absolute;
	top: 25px;
	left: 55px;
	z-index: 6;
}



/********************************/




.img_detail{
	display: none;
}
.cont_right{
	display: inline-block;
	position: absolute;
	right: 0;
	width: 600px;
	height: 600px;
	padding:40px 20px;
	box-sizing: border-box;
	color: #444444;
}
.right_popular2,.right_popular3,.right_popular4,.right_popular5{
	display: none;
}
.popular_title{
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 25px;
}
.title_allview{
	color: #b53735;
	font-size: 15px;
	font-weight: 400;
	float: right;
	padding-top: 10px;
	padding-right: 20px;
	cursor: pointer;
}
.title_allview span{
	text-decoration: underline;
	margin-left: 5px;
}
.cont_ryokan li{
	display: inline-block;
	height: 135px;
	margin-bottom: 20px;
}
.cont_ryokan li table{
	width: 540px;
	height: 135px;
}
.rcolumn1{
	width: 200px;
	height: 135px;
}
.rcolumn1 img{
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.rcolumn2{
	box-sizing: border-box;
	width: 340px;
	height: 135px;
	padding-left: 20px;
	font-size: 13px;
	vertical-align: top;
}
.ryokan_nameeng{
	font-weight: 600;
	font-size: 20px;
	line-height: 22px;
}
.ryokan_namejp{
	margin-bottom: 8px;
}
.ryokan_address{
	width: 330px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 12px;
}
.addicon{
	display: inline-block;
	border:solid 1px #4c3188;
	color: #4c3188;
	padding:0px 3px;
}
.goryokan{
	display: inline-block;
	background-color: #494949;
	text-align: center;
	color: #fff;
	width: 80px;
	height: 26px;
	line-height: 26px;
	cursor: pointer;
}



/* Banner_area Contents ----------------------------------------------------------------------------------------------------------------------------*/


.main_promo img{
	cursor: pointer;
}
.promo_text{
	font-size: 32px;
	color: #fff;
	line-height: 40px;
	margin-top: -170px;
	cursor: pointer;
}
.gonow{
	display: inline-block;
	box-sizing: border-box;
	width: 152px;
	height: 38px;
	font-size: 18px;
	border: solid 1px #fff;
	border-radius: 15px;
	text-align: center;
	margin-top: 20px;
	line-height: 36px;
}
.othersite_list{
	font-size: 18px;
	color: #444444;
}
.othersite_list li{
	margin-left: 10px;
}
.gosite{
	cursor: pointer;
}


/*------------------------------------------------------------------------------------------------------------------------------------------------------------------ANIMATION*/




/*--------------------------------------------------------------------------- BG Animation */