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

　hotel
	
============================================================
*/


/* ----------------------------------------------------------------------------
　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;
}
.title_area h2{
	position:absolute;
	top:0px;
	left:0px;
}
.title_area .lead{
	width:285px;
	color:#fff;
	line-height:160%;
	position:absolute;
	top:25px;
	right:25px;
}


/* ----------------------------------------------------------------------------
　main_slide
---------------------------------------------------------------------------- */
#main_slide{
	width:646px;
	position:relative;
	background-color:#0d436a;
}
#slide_case{
	width:646px;
	height:240px;
	margin-bottom:10px;
	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;
	height:10px;
}
#main_slide ul li{
	width:10px;
	height:10px;
	cursor:pointer;
	display:inline-block;
	margin:0 5px;
	background:url("../images/hotel/hotel_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:30px 13px 14px 14px;
	
	background:url("../images/hotel/hotel_search_tab_bg.jpg") 0 bottom repeat-x;
	background-color:#0d426a;
}
#search_tab li{
	width:199px;
	display:block;
	float:left;
	margin-right:11px;
}

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

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

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


/* popular */
#search_tab .popular a{
	background-position:0 0;
}
#search_tab .popular a:hover{
	background-position:0 -107px;
}
#search_tab .popular .on,
#search_tab .popular .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;
}

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



/* ----------------------------------------------------------------------------
　result
---------------------------------------------------------------------------- */
.result{
	display:none;
	margin-bottom:20px;
}

.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;}




/* ----------------------------------------------------------------------------
　popular
---------------------------------------------------------------------------- */
#popular{
}
#popular .result_inner{
	padding:15px 15px 5px;
	background-color:#f0f0f0;
}
#popular .lead{
	font-size:14px;
	color:#000;
	margin-bottom:20px;
}

.popular_lineup li{
	width:300px;
	float:left;
	background-color:#fff;
	position:relative;
	margin:0 15px 15px 0;
	
	-webkit-box-shadow: 0px 0 3px 0px #959494; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 0 3px 0px #959494; /* Firefox用 */
	box-shadow: 0px 0 3px 0px #959494; /* CSS3 */
}
.popular_lineup .lastItem{
	margin:0 0 15px 0;
}


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


.popular_lineup li .photo{
	width:178px;
	float:left;
	position:relative;
}
.popular_lineup li .photo img{
	width:178px;
	height:164px;
}

.popular_lineup li .copy{
	width:100px;
	padding:11px 11px 42px 11px;
	float:left;
}

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


.popular_lineup li .copy .title{
	color:#000;
	line-height:120%;
	margin-bottom:6px;
	padding-left:5px;
	text-shadow: 0 1px 0 #ccc;
}

.popular_lineup li .link{
	padding-left:5px;
}
.popular_lineup li .link p{
	line-height:120%;
	margin-bottom:3px;
	word-break:break-all;
}
.popular_lineup li .link a{
	color:#555;
}
.popular_lineup li .more{
	position:absolute;
	right:11px;
	bottom:11px;
	
	-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 */
}


/* big_area_left */
.popular_lineup .big_area_left{
	width:300px;
	float:left;
}

/* big_area_right */
.popular_lineup .big_area_right{
	width:300px;
	float:right;
}

.popular_lineup .big_area li{
	margin:0 0 15px 0;
}

/* tokyo */
.popular_lineup .big_area .tokyo{
	margin:0 0 15px 0;
}
.popular_lineup .big_area .tokyo .photo{
	width:300px;
	float:none;
}
.popular_lineup .big_area .tokyo .photo img{
	width:300px;
	height:210px;
}
.popular_lineup .big_area .tokyo .copy{
	width:278px;
	padding:11px 11px 42px 11px;
	float:none;
}
.popular_lineup .big_area .tokyo .title{
	width:100px;
	float:left;
	margin-bottom:0px;
	padding-left:10px;
}
.popular_lineup .big_area .tokyo .link{
	width:75px;
	float:left;
	padding-left:0px;
}



/* ----------------------------------------------------------------------------
　family
---------------------------------------------------------------------------- */
#family{
}
#family .result_inner{
	padding:15px 15px 5px;
	background-color:#fffaf1;
}
#family .lead{
	font-size:14px;
	color:#000;
	margin-bottom:20px;
}
#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:#ffffff;
	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;
	line-height:130%;
}
.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;
}



/* ----------------------------------------------------------------------------
　access
---------------------------------------------------------------------------- */
#access{
}
#access .result_inner{
	padding:15px 15px 5px;
	background-color:#f0f0f0;
}
#access .lead{
	font-size:14px;
	color:#000;
	margin-bottom:20px;
}


.access_lineup li{
	width:278px;
	padding:11px 11px 8px;
	background-color:#fff;
	
	-webkit-box-shadow: 0px 0 3px 0px #aaa; /* Safari, Chrome用 */
	-moz-box-shadow: 0px 0 3px 0px #aaa; /* Firefox用 */
	box-shadow: 0px 0 3px 0px #aaa; /* CSS3 */
	
	margin:0 15px 15px 0;
	float:left;
	
	position:relative;
}
.access_lineup .lastItem{
	margin:0 0 15px 0;
}
.access_lineup li .title{
	color:#000;
	line-height:110%;
	margin-bottom:15px;
	text-shadow: 0 1px 0 #ccc;
}

.access_lineup li .icon{
	position:relative;
}

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

.access_lineup li .icon p{
	width:88px;
	height:26px;
	line-height:26px;
	text-align:center;
	margin:0 6px 6px 0;
	float:left;
	
	-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 */
}
.access_lineup li .icon p a{
	display:block;
	width:88px;
	height:26px;
	color:#fff;
	text-decoration:none;
}

.access_lineup li .icon .lastItem{
	margin:0 0 6px 0;
}
.access_lineup li .icon .green a{
	background-color:#99d349;
}
.access_lineup li .icon .green a:hover{
	background-color:#ADDC6D;
}

.access_lineup li .icon .pink a{
	background-color:#f58ec7;
}
.access_lineup li .icon .pink a:hover{
	background-color:#F7A5D2;
}

.access_lineup li .icon .red a{
	background-color:#fa8272;
}
.access_lineup li .icon .red a:hover{
	background-color:#FB9B8E;
}

.access_lineup li .icon .yellow a{
	background-color:#ffb945;
}
.access_lineup li .icon .yellow a:hover{
	background-color:#FFC76A;
}

.access_lineup li .icon .blue a{
	background-color:#21d6a9;
}
.access_lineup li .icon .blue a:hover{
	background-color:#4DDEBA;
}


.access_lineup li .icon .detail{
	width:100%;
}
.access_lineup li .icon .detail a{
	width:100%;	
	background-color:#33709e;
}
.access_lineup li .icon .detail a:hover{
	background-color:#5C8DB1;
}


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


.access_lineup .yokoso .photo{
	width:103px;
	float:left;
}
.access_lineup .yokoso .copy{
	width:489px;
	float:left;
}
.access_lineup .yokoso .copy .title{
	margin-bottom:0px;
	line-height:110%;
}
.access_lineup .yokoso .copy .text{
	margin-bottom:10px;
	line-height:110%;
}

.access_lineup .yokoso .icon p,
.access_lineup .yokoso .icon p a{
	width:93px;
}

.access_lineup .yokoso .app{
	margin-top:10px;
	padding-bottom:5px;
}
.access_lineup .yokoso .app{display: inline-block;}
/* Exclude Mac IE \*/
.access_lineup .yokoso .app{display: block;}
/**/
.access_lineup .yokoso .app:after{content:".";display:block;clear:both;height:0;visibility: hidden;}

.access_lineup .yokoso .app .app_text{
	width:338px;
	float:left;
	color:#000;
	background:url("../images/hotel/access_yokoso_arrow.gif") right center no-repeat;
}
.access_lineup .yokoso .app .app_btn{
	width:240px;
	height:26px;
	line-height:26px;
	font-weight:normal;
	text-align:center;
	float:right;
	
	-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 */
}
.access_lineup .yokoso .app .app_btn a{
	display:block;
	width:240px;
	height:26px;
	color:#fff;
	text-decoration:none;
	background-color:#33709e;
}
.access_lineup .yokoso .app .app_btn a:hover{
	background-color:#5C8DB1;
}



/* ----------------------------------------------------------------------------
　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;
}

#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 .tdr{	
	left:0px;
	top:37px;
	border:1px solid #b7b7b7;
}
#popularareas .photo .htb{
	left:218px;
	top:0px;
}
#popularareas .photo .yokohamakawasaki{
	left:434px;
	top:0px;
}
#popularareas .photo .narita{
	left:543px;
	top:0px;
}
#popularareas .photo .kanazawa{
	left:218px;
	top:111px;
}
#popularareas .photo .toyama{
	left:326px;
	top:111px;
}
#popularareas .photo .hiroshima{
	left:434px;
	top:111px;
}
#popularareas .photo .takamatsu{
	left:0px;
	top:222px;
}
#popularareas .photo .kouchi{
	left:109px;
	top:222px;
}
#popularareas .photo .koube{
	left:218px;
	top:222px;
}
#popularareas .photo .nara{
	left:434px;
	top:222px;
}
#popularareas .photo .okayama{
	left:543px;
	top:222px;
}
#popularareas .photo .sendai{
	left:0px;
	top:333px;
}
#popularareas .photo .morioka{
	left:109px;
	top:333px;
}
#popularareas .photo .kagoshima{
	left:218px;
	top:333px;
}
#popularareas .photo .nagasaki{
	left:326px;
	top:333px;
}
#popularareas .photo .nagano{
	left:434px;
	top:333px;
}
#popularareas .photo .niigata{
	left:543px;
	top:333px;
}



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