/*
======== table of content. =================================

　ryokan
	
============================================================
*/


/* ----------------------------------------------------------------------------
　basic
---------------------------------------------------------------------------- */
#breadCrumbs{
	margin-bottom:10px !important;
}


#hotel{
	width:646px;
}


h1{
	font-size:12px !important;
	line-height:120% !important;
	color:#000 !important;
	margin-bottom:20px !important;
	padding-top:5px !important;
}


/* ----------------------------------------------------------------------------
　title_area
---------------------------------------------------------------------------- */
.title_area{
	height:160px;
	position:relative;
	background:url("../images/ryokan/ryokan_title_area_bg.gif") right 0 no-repeat;
}
.title_area h2{
	position:absolute;
	top:0px;
	left:0px;
}
.title_area .lead{
	width:285px;
	color:#fff;
	line-height:130%;
	position:absolute;
	top:15px;
	right:25px;
}


/* ----------------------------------------------------------------------------
　main_slide
---------------------------------------------------------------------------- */
#main_slide{
	width:646px;
	position:relative;
	background-color:#8f1c33;
}
#slide_case{
	width:646px;
	height:240px;
	position:relative;
}
#slide_case p{
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slide_case p .shadow{
	width:646px;
	height:240px;
	display:block;
	z-index:2;
	position:absolute;
	top:0px;
	left:0px;
	background:url("../images/hotel/hotel_main_slide_shadow.png") 0 0 no-repeat;
}
#main_slide ul{
	text-align:center;
	position:absolute;
	left:0px;
	bottom:-20px;
	width:100%;
}
#main_slide ul li{
	width:10px;
	height:10px;
	cursor:pointer;
	display:inline-block;
	margin:0 5px;
	background:url("../images/ryokan/ryokan_main_slide_paging.gif") 0 0 no-repeat;
}
*:first-child+html #main_slide ul li{
	display:inline;
	zoom:1;
}


#main_slide ul .on{
	cursor:default;
	background-position:-10px 0;
}


/* ----------------------------------------------------------------------------
　search
---------------------------------------------------------------------------- */
#search{
	width:646px;
}

/* search_tab */
#search_tab{
	width:619px;
	height:107px;
	padding:52px 13px 14px 14px;

	background:url("../images/ryokan/ryokan_search_tab_bg.jpg") 0 bottom no-repeat;
}
#search_tab li{
	width:199px;
	display:block;
	float:left;
	margin-right:11px;
}

#search_tab .gourmet{
	margin-right:0px;
}

#search_tab li a{
	width:199px;
	height:107px;
	
	text-indent:100%;
	white-space:nowrap;
	overflow: hidden;
	
	display:block;
	background:url("../images/ryokan/ryokan_search_tab.jpg") 0 0 no-repeat;
	
	-webkit-box-shadow: 0px 0 3px 0px #721629; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 0 3px 0px #721629; /* Firefox用 */
	box-shadow: 0px 0 3px 0px #721629; /* CSS3 */
}

#search_tab li .on{
	height:121px;
	-webkit-box-shadow: 0px 0 10px 2px #490e1a; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 0 10px 2px #490e1a; /* Firefox用 */
	box-shadow: 0px 0 10px 2px #490e1a; /* CSS3 */
}

/* bath */
#search_tab .bath a{
	background-position:0 0;
}
#search_tab .bath a:hover{
	background-position:0 -107px;
}
#search_tab .bath .on,
#search_tab .bath .on:hover{
	background-position:0 -214px;
}

/* family */
#search_tab .family a{
	background-position:-199px 0;
}
#search_tab .family a:hover{
	background-position:-199px -107px;
}
#search_tab .family .on,
#search_tab .family .on:hover{
	background-position:-199px -214px;
}

/* gourmet */
#search_tab .gourmet a{
	background-position:-398px 0;
}
#search_tab .gourmet a:hover{
	background-position:-398px -107px;
}
#search_tab .gourmet .on,
#search_tab .gourmet .on:hover{
	background-position:-398px -214px;
}


/* ----------------------------------------------------------------------------
　result
---------------------------------------------------------------------------- */
.result{
	display:none;
	margin-bottom:20px;
	position:relative;
	z-index:2;
}

.result_inner{
	position:relative;
}

.result_inner{display: inline-block;}
/* Exclude Mac IE \*/
.result_inner{display: block;}
/**/
.result_inner:after{content:".";display:block;clear:both;height:0;visibility: hidden;}



/* ----------------------------------------------------------------------------
　bath
---------------------------------------------------------------------------- */
#bath{
	background:url("../images/ryokan/bath_bg.jpg");
}
#bath .result_inner{
	padding:15px;
}
#bath .lead{
	font-size:14px;
	color:#000;
	margin-bottom:20px;
}


.recommended{
	width:616px;
	padding:15px;
	margin-top:20px;
	margin-bottom:15px;
	background:url("../images/ryokan/bath_bg.jpg");
}
.recommended h3{
	border-top:1px solid #ba8cbc;
}
.recommended h3 span{
	display:block;
	width:199px;
	height:23px;
	padding:5px 0 0;
	font-size:16px;
	line-height:120%;
	background-color:#323232;
	color:#fff;
	text-align:center;
	margin-bottom:10px;
	position:relative;
	top:-1px;
	
	text-shadow: 0 1px 0 #b0b0b0;
}

.recommended ul li{
	width:199px;
	float:left;
	margin:0 9px 10px 0;
	
	-webkit-box-shadow: 0px 0 3px 0px #b1a692; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 0 3px 0px #b1a692; /* Firefox用 */
	box-shadow: 0px 0 3px 0px #b1a692; /* CSS3 */
}
.recommended ul li a{
	display:block;
	color:#333;
	cursor:pointer;
	text-decoration:none;
	background-color:#f8f7f3;
}
.recommended ul .lastItem{
	margin-right:0px;
}
.recommended ul li .photo{
	width:199px;
	height:103px;
	position:relative;
	margin-bottom:5px;
}
.recommended ul li .photo img{
	width:199px;
	height:103px;
}

.recommended ul li .place{
	margin-bottom:5px;
}
.recommended ul li .place01{
	display:inline-block;
	background: url("../images/ryokan/place01.gif") right center no-repeat;
	background-color:#323232;
	vertical-align:top;
	color:#fff;
	line-height:115%;
	padding:3px 10px 3px 7px;
	position:relative;
	font-size:10px;
}
.recommended ul li .place02{
	display:inline-block;
	background: url("../images/ryokan/place02.gif") right center no-repeat;
	background-color:#6a6a6a;
	vertical-align:top;
	color:#fff;
	line-height:115%;
	padding:3px 15px 3px 5px;
	position:relative;
	font-size:10px;
}

*:first-child+html .recommended ul li .place01{
	display:inline;
	zoom:1;
}
*:first-child+html .recommended ul li .place02{
	display:inline;
	zoom:1;
}

.recommended ul li .place span{
	display:block;
}

.recommended ul li a .title{
	padding:0 10px;
	margin-bottom:5px;
	text-decoration:underline;
	color:#000;
	text-shadow: 0 1px 0 #ccc;
}
.recommended ul li a:hover .title{
	text-decoration:none;
}
.recommended ul li .title span{
	display:block;
}

.recommended ul li a .text{
	color:#5b5b5b;
	padding:0 10px;
	margin-bottom:5px;
	line-height:130%;
}

.recommended ul li .price{
	padding:0 10px 15px;
	color:#000;
}
.recommended ul li .price span{
	color:#8f1c33;
}



/* ----------------------------------------------------------------------------
　Searching by area
---------------------------------------------------------------------------- */
#searching_by_area{
	width:616px;
	height:429px;
	position:relative;
}
#searching_by_area h3{
	display:block;
	width:173px;
	height:23px;
	padding:5px 0 0;
	font-size:16px;
	line-height:120%;
	background-color:#323232;
	color:#fff;
	text-align:center;
	position:absolute;
	top:0px;
	left:0px;
	z-index:5;
	
	text-shadow: 0 1px 0 #b0b0b0;
}
#searching_by_area #map{
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
}
#searching_by_area #map img{
	vertical-align:bottom;
}

#searching_by_area #website_list_box{
	position:absolute;
	top:0px;
	right:0px;
	z-index:2;
}
#searching_by_area #website_list_box .title{
	font-size:18px;
	font-weight:bold;
	line-height:120%;
	color:#000;
	height:24px;
	padding:8px 0 0;
}
#searching_by_area #website_list{
	width: auto;
	height: 398px;
	background-color:#f9faf5;
	overflow-y:auto;
	overflow-x:hidden;
	margin-top: -1px;
	padding-left: 5px;
	border-left-color: #000000;
	border-left-width: 4px;
	border-left-style: solid;
	position:relative;
}
#searching_by_area #accordion{
	position:relative;
}

#searching_by_area #website_list h4{
	font-size: 190%;
	font-weight: bolder;
	margin: 10px 0 0 5px;
}
#searching_by_area #website_list h5{
	cursor:pointer;
	font-size: 150%;
	font-weight: bolder;
	margin: 3px 0 5px 5px;
	padding:0 0 0 20px;
	background: url("../images/ryokan/searching_by_area_arrow.png") 5px center no-repeat;
}
#searching_by_area #website_list h5:hover,
#searching_by_area #website_list .open{
	background: url("../images/ryokan/searching_by_area_arrow_on.png") 5px center no-repeat;
}

#searching_by_area #website_list ul{
	display:none;
}
#searching_by_area #website_list ul li{
	list-style-type:disc;
	margin-left:40px;
	font-size: 120%;
	font-weight:bold;
}
#searching_by_area #website_list ul li a{
	margin-left: 0px;
	color:#666;
}
#searching_by_area #website_list .last_ul{
	min-height: 200px;
}

.text_01 { color: #ff9696; }
.text_02 { color: #32b7c8; }
.text_03 { color: #f0a028; }
.text_04 { color: #78b746; }
.text_05 { color: #d16464; }
.text_06 { color: #1e96c8; }
.text_07 { color: #c8a028; }
.text_08 { color: #82b782; }
.text_09 { color: #d164a1; }



/* ----------------------------------------------------------------------------
　family
---------------------------------------------------------------------------- */
#family{
	background:url("../images/ryokan/family_bg.jpg");
}
#family .result_inner{
	padding:15px 15px 5px;
}
#family .lead{
	font-size:14px;
	color:#000;
	margin-bottom:20px;
}

#family h3{
	border-top:1px solid #ba8cbc;
}
#family h3 span{
	display:block;
	width:199px;
	height:23px;
	padding:5px 0 0;
	font-size:16px;
	line-height:120%;
	background-color:#323232;
	color:#fff;
	text-align:center;
	margin-bottom:10px;
	position:relative;
	top:-1px;
	
	text-shadow: 0 1px 0 #b0b0b0;
}

#family .btn_more{
	text-align:right;
	margin-bottom:25px;
}
#family .btn_more img{
	-webkit-box-shadow: 0px 1px 2px 0px #999; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 1px 2px 0px #999; /* Firefox用 */
	box-shadow: 0px 1px 2px 0px #999; /* CSS3 */
}

.family_lineup ul li{
	width:300px;
	float:left;
	margin:0 16px 16px 0;
	
	-webkit-box-shadow: 0px 0 3px 0px #666; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 0 3px 0px #666; /* Firefox用 */
	box-shadow: 0px 0 3px 0px #666; /* CSS3 */
}
.family_lineup ul li a{
	display:block;
	color:#333;
	cursor:pointer;
	text-decoration:none;
	background-color:#f8f7f3;
	position:relative;
}
.family_lineup ul .lastItem{
	margin-right:0px;
}
.family_lineup ul li .photo{
	width:300px;
	height:179px;
	position:relative;
	margin-bottom:5px;
}
.family_lineup ul li .photo img{
	width:300px;
	height:179px;
}

.family_lineup ul li .place{
	margin-bottom:5px;
}
.family_lineup ul li .place01{
	display:inline-block;
	background: url("../images/ryokan/place01.gif") right center no-repeat;
	background-color:#323232;
	vertical-align:top;
	color:#fff;
	line-height:115%;
	padding:3px 10px 3px 7px;
	position:relative;
	font-size:10px;
}
.family_lineup ul li .place02{
	display:inline-block;
	background: url("../images/ryokan/place02.gif") right center no-repeat;
	background-color:#6a6a6a;
	vertical-align:top;
	color:#fff;
	line-height:115%;
	padding:3px 15px 3px 5px;
	position:relative;
	font-size:10px;
}

*:first-child+html .family_lineup ul li .place01{
	display:inline;
	zoom:1;
}
*:first-child+html .family_lineup ul li .place02{
	display:inline;
	zoom:1;
}


/* pink */
.family_lineup ul .pink .place01{
	background: url("../images/ryokan/place01_pink.gif") right center no-repeat;
	background-color:#f48dc5;
}
/* red */
.family_lineup ul .red .place01{
	background: url("../images/ryokan/place01_red.gif") right center no-repeat;
	background-color:#fa8272;
}
/* green */
.family_lineup ul .green .place01{
	background: url("../images/ryokan/place01_green.gif") right center no-repeat;
	background-color:#99d248;
}
/* blue */
.family_lineup ul .blue .place01{
	background: url("../images/ryokan/place01_blue.gif") right center no-repeat;
	background-color:#21d6a9;
}

.family_lineup ul li .place span{
	display:block;
}

.family_lineup ul li a .title{
	padding:0 15px;
	margin-bottom:5px;
	text-decoration:underline;
	color:#010101;
	text-shadow: 0 1px 0 #ccc;
}
.family_lineup ul li a:hover .title{
	text-decoration:none;
}
.family_lineup ul li .title span{
	display:block;
}

.family_lineup ul li a .text{
	color:#e60012;
	padding:0 15px;
	margin-bottom:5px;
	line-height:130%;
}

.family_lineup ul li .price{
	padding:0 15px 12px;
	color:#000;
}
.family_lineup ul li .price span{
	color:#8f1c33;
}
.family_lineup ul li .icon{
	position:absolute;
	right:10px;
	bottom:10px;
}


/* ----------------------------------------------------------------------------
　gourmet
---------------------------------------------------------------------------- */
#gourmet{
	background:url("../images/ryokan/bath_bg.jpg");
}
#gourmet .result_inner{
	padding:15px 15px 5px;
}
#gourmet .lead{
	font-size:14px;
	color:#000;
	margin-bottom:20px;
}
#gourmet .btn_more{
	text-align:right;
	margin-bottom:25px;
}
#gourmet .btn_more img{
	-webkit-box-shadow: 0px 1px 2px 0px #999; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 1px 2px 0px #999; /* Firefox用 */
	box-shadow: 0px 1px 2px 0px #999; /* CSS3 */
}

.gourmet_lineup ul li{
	width:300px;
	float:left;
	margin:0 16px 16px 0;
	
	-webkit-box-shadow: 0px 0 3px 0px #666; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 0 3px 0px #666; /* Firefox用 */
	box-shadow: 0px 0 3px 0px #666; /* CSS3 */
}
.gourmet_lineup ul li a{
	display:block;
	color:#333;
	cursor:pointer;
	text-decoration:none;
	background-color:#f8f7f3;
	position:relative;
}
.gourmet_lineup ul .lastItem{
	margin-right:0px;
}
.gourmet_lineup ul li .photo{
	width:300px;
	height:179px;
	position:relative;
	margin-bottom:5px;
}
.gourmet_lineup ul li .photo img{
	width:300px;
	height:179px;
}

.gourmet_lineup ul li .place{
	margin-bottom:5px;
}
.gourmet_lineup ul li .place01{
	display:inline-block;
	background: url("../images/ryokan/place01.gif") right center no-repeat;
	background-color:#323232;
	vertical-align:top;
	color:#fff;
	line-height:115%;
	padding:3px 10px 3px 7px;
	position:relative;
	font-size:10px;
}
.gourmet_lineup ul li .place02{
	display:inline-block;
	background: url("../images/ryokan/place02.gif") right center no-repeat;
	background-color:#6a6a6a;
	vertical-align:top;
	color:#fff;
	line-height:115%;
	padding:3px 15px 3px 5px;
	position:relative;
	font-size:10px;
}

*:first-child+html .gourmet_lineup ul li .place01{
	display:inline;
	zoom:1;
}
*:first-child+html .gourmet_lineup ul li .place02{
	display:inline;
	zoom:1;
}


/* pink */
.gourmet_lineup ul .pink .place01{
	background: url("../images/ryokan/place01_pink.gif") right center no-repeat;
	background-color:#f48dc5;
}
/* red */
.gourmet_lineup ul .red .place01{
	background: url("../images/ryokan/place01_red.gif") right center no-repeat;
	background-color:#fa8272;
}
/* green */
.gourmet_lineup ul .green .place01{
	background: url("../images/ryokan/place01_green.gif") right center no-repeat;
	background-color:#99d248;
}
/* blue */
.gourmet_lineup ul .blue .place01{
	background: url("../images/ryokan/place01_blue.gif") right center no-repeat;
	background-color:#21d6a9;
}

.gourmet_lineup ul li .place span{
	display:block;
}

.gourmet_lineup ul li a .title{
	padding:0 15px;
	margin-bottom:5px;
	text-decoration:underline;
	color:#010101;
	text-shadow: 0 1px 0 #ccc;
}
.gourmet_lineup ul li a:hover .title{
	text-decoration:none;
}
.gourmet_lineup ul li .title span{
	display:block;
}

.gourmet_lineup ul li a .text{
	color:#e60012;
	padding:0 15px;
	margin-bottom:5px;
	line-height:130%;
}

.gourmet_lineup ul li .price{
	padding:0 15px 12px;
	color:#000;
}
.gourmet_lineup ul li .price span{
	color:#8f1c33;
}
.gourmet_lineup ul li .icon{
	position:absolute;
	right:10px;
	bottom:10px;
}


/* ----------------------------------------------------------------------------
　othertheme
---------------------------------------------------------------------------- */
#othertheme{
	width:646px;
	margin-bottom:25px;
}
#othertheme h3{
	border-top:1px solid #ba8cbc;
}
#othertheme h3 span{
	display:block;
	width:160px;
	height:23px;
	padding:5px 0 0;
	font-size:16px;
	line-height:120%;
	background-color:#323232;
	color:#fff;
	text-align:center;
	margin-bottom:10px;
	position:relative;
	top:-1px;
	
	text-shadow: 0 1px 0 #b0b0b0;
}
#othertheme ul li{
	display:block;
	float:left;
	margin-right:4px;
}
#othertheme ul .lastItem{
	margin-right:0px;
}


/* ----------------------------------------------------------------------------
　popularareas
---------------------------------------------------------------------------- */
#popularareas{
	width:646px;
	height:440px;
	position:relative;
	margin-bottom:20px;
}

#popularareas h3{
	display:block;
	width:214px;
	height:27px;
	padding:6px 0 0;
	font-size:16px;
	line-height:120%;
	background-color:#323232;
	color:#fff;
	text-align:center;
	position:absolute;
	top:0px;
	left:0px;
	
	text-shadow: 0 1px 0 #b0b0b0;
}
#popularareas .photo{
	width:646px;
	height:440px;
	position:relative;
}
#popularareas .photo li{
	position:absolute;
}
#popularareas .photo li a{
	display:block;
	position:relative;
	overflow:hidden;
	text-decoration:none !important;
	cursor:pointer;
}

#popularareas .photo li .hover{
	z-index:4;
}
#popularareas .photo li .hover2{
	width:100%;
	height:100%;
	position:absolute;
	left:0px;
	bottom:-100px;
	z-index:3;
	background: url("../images/home/top_popularareas_hover.png");
}
#popularareas .photo li .hover2_inner{
	position:relative;
}

#popularareas .photo li .hover2 .title{
	color:#000;
	padding:3px 5px;
	line-height:120%;
}
#popularareas .photo li .hover2 .text{
	color:#000;
	padding:0 12px;
	line-height:120%;
}


#popularareas .photo .kyoto{	
	left:0px;
	top:37px;
}
#popularareas .photo .arima{
	left:218px;
	top:0px;
}
#popularareas .photo .kurokawa{
	left:434px;
	top:0px;
}
#popularareas .photo .yufuin{
	left:543px;
	top:0px;
}
#popularareas .photo .shirahama{
	left:218px;
	top:111px;
}
#popularareas .photo .noboribetsu{
	left:326px;
	top:111px;
}
#popularareas .photo .toyako{
	left:434px;
	top:111px;
}
#popularareas .photo .hakone{
	left:0px;
	top:222px;
}
#popularareas .photo .beppu{
	left:109px;
	top:222px;
}
#popularareas .photo .kinosaki{
	left:218px;
	top:222px;
}
#popularareas .photo .gero{
	left:434px;
	top:222px;
}
#popularareas .photo .shibuyudanaka{
	left:543px;
	top:222px;
}
#popularareas .photo .ginzan{
	left:0px;
	top:333px;
}
#popularareas .photo .takaragawa{
	left:109px;
	top:333px;
}
#popularareas .photo .dougo{
	left:218px;
	top:333px;
}
#popularareas .photo .tamatsukuri{
	left:326px;
	top:333px;
}
#popularareas .photo .kusatsu{
	left:434px;
	top:333px;
}
#popularareas .photo .kinugawa{
	left:543px;
	top:333px;
}


/* ----------------------------------------------------------------------------
　bnr
---------------------------------------------------------------------------- */
#bnr{
	margin-top:25px;
}
#bnr p{
	margin-bottom:17px;
}