@charset "UTF-8";


/* =============================================================
    共通
============================================================= */

/*	背景photo
----------------------------------------------------*/
#page{
	background: url(../images/back-photo.jpg) no-repeat center top fixed;
}
#pagePlan01 #page{	background-image: url(../images/back-photo01.jpg);}
#pagePlan02 #page{	background-image: url(../images/back-photo02.jpg);}
#pagePlan03 #page{	background-image: url(../images/back-photo03.jpg);}
#pagePlan04 #page{	background-image: url(../images/back-photo04.jpg);}
#pagePlan05 #page{	background-image: url(../images/back-photo05.jpg);}


/* =============================================================
    ヘッダ
    #globalHeader
============================================================= */
#globalHeader{
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .3);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, .3);
}
#globalHeader .inner{
	display: table;
	padding: 15px 0;
}

/*	h & lead
----------------------------------------------------*/
#globalHeader h1,
#globalHeader p{
	display: table-cell;
	vertical-align: middle;
	*display: inline;
	*zoom: 1;
}

#globalHeader h1{
	width: 679px;
	margin: 0;
	border-right: 1px dotted #333;
}
#globalHeader p{
	width: 280px;
	padding-left: 30px;
}


/* =============================================================
    フッタ
    #globalFooter
============================================================= */
/*	PR企画
----------------------------------------------------*/
#pr{
	display:inline;
	padding:4px 8px 4px 10px;
	font-size:9px;
	font-size:0.9rem;
	line-height:1;
	letter-spacing:0.2em;
	border:1px solid #333;
	color:#333;
	position:relative;
}


/* =============================================================
	コンテンツ	
	#contents
============================================================= */
/*	header#ttl
----------------------------------------------------*/
#ttl{
	position: relative;
	padding: 10px 0 0;
}
#ttl-tltip{
	position: absolute;
	top: 0;
	left: 430px;
	z-index: 100;
}
#ttl-h{
}
#ttl p{
	width: 40em;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.5;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, .5);
	
	position: absolute;
	top: 250px;
	left: 380px;
}

/* ext */
.photo-ext01{
	position: absolute;
	top: 10px;
	right: 50px;
	z-index: 50;
}
.photo-ext02{
	position: absolute;
	top: 40px;
	right: 20px;
	z-index: 10;
}

#pagePlan01 #ttl,
#pagePlan02 #ttl,
#pagePlan03 #ttl,
#pagePlan04 #ttl,
#pagePlan05 #ttl{
	display: none;
}




/*	nav
----------------------------------------------------*/
#globalNav li,
#globalNav a{
	display: block;
	width: 174px;
	height: 133px;
}
#globalNav a{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-image: url(../images/header/nav.jpg);
	background-repeat: no-repeat;
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .5);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, .5);
	
	position: relative;
}
.menu-01 a{	background-position: 0 0;}
.menu-02 a{	background-position: -174px 0;}
.menu-03 a{	background-position: -348px 0;}
.menu-04 a{	background-position: -522px 0;}
.menu-05 a{	background-position: -696px 0;}


/*	aside#sideNav
----------------------------------------------------*/
#sideNav{
	background: #fff;
	border-top: 2px solid #ff4800;
	-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	
	position: relative;
}
.fixed{
	position: fixed !important;
	top: 30px;
	
	_position: absolute;
	_top: expression(documentElement.scrollTop - 260 + 'px');
}
#pageIndex .fixed{
	_top: expression(documentElement.scrollTop - 580 + 'px');
}
#toPlan,
#filter{
	margin: 15px;
}
#filter{
	padding: 15px 0 0;
	border-top: 1px dotted #333;
}
#toPlan li,
#filter li{
	margin: 0 0 5px;
}
#toPlan h3,
#filter h3,
#toPlan a,
#filter a{
	display: block;
	height: 14px;
	width: 195px;
	margin: 0;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-image: url(../images/side-nav/side-nav.png);
	background-repeat: no-repeat;
}
#h-sidePln{	background-position: 0 0;}
#h-flt{	background-position: 0 -20px;}

#toPlan a{
	height: 55px;
}
#toPlan a:hover{
	filter: alpha(opacity=80);
	-moz-opacity: .80;
	opacity: .80;
}
.menu-pln-01 a{background-position: -195px 0;}
.menu-pln-02 a{background-position: -195px -55px;}
.menu-pln-03 a{background-position: -195px -110px;}
.menu-pln-04 a{background-position: -195px -165px;}
.menu-pln-05 a{background-position: -195px -220px;}

#filter a{
	height: 15px;
	padding: 3px 0;
}
.menu-flt-01 a{	background-position: -400px 3px;}
.menu-flt-02 a{	background-position: -400px -27px;}
.menu-flt-03 a{	background-position: -400px -57px;}
.menu-flt-04 a{	background-position: -400px -87px;}
.menu-flt-05 a{	background-position: -400px -117px;}
.menu-flt-06 a{	background-position: -400px -147px;}
.menu-flt-07 a{	background-position: -400px -177px;}

#filter li:hover{
	background: #dff2fc;
}


/*	aside#sideNav > popover
----------------------------------------------------*/
.popover{
	width: 300px;
	padding: 25px 30px 25px;
	background: #fff;
	position: absolute;
	top: -15px;
	left: 220px;
	-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .5);
	box-shadow: 0px 0px 3px rgba(0, 0, 0, .5);

	display: none;
}
#menu-flt-01,
#menu-flt-02,
#menu-flt-03,
#menu-flt-04,
#menu-flt-05,
#menu-flt-06,
#menu-flt-07{
	top: auto;
	bottom: 0;
}
/* 調整 */
#menu-flt-01,
#menu-flt-02{
	bottom: 100px;	
}


.popover h4{
	margin: 0 0 1em;
	font-size: 12px;
	font-size: 1.2rem;
}

#menu-pln-01{	border-top:2px solid #00b8ff;	}
#menu-pln-02{	border-top:2px solid #f5b70b;	}
#menu-pln-03{	border-top:2px solid #ff4800;	}
#menu-pln-04{	border-top:2px solid #ff4190;	}
#menu-pln-05{	border-top:2px solid #9dbe17;	}

.popover ul{
	margin: 0;
}
.popover li{
	display: table;
	width: 300px;
	height: 30px;
	margin: 0 0 5px;
	
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.3;
}
#menu-pln-01 li:hover,li.plan-01:hover{	background: #dff2fc;	}
#menu-pln-02 li:hover,li.plan-02:hover{	background: #fff1cc;	}
#menu-pln-03 li:hover,li.plan-03:hover{	background: #ffdacc;	}
#menu-pln-04 li:hover,li.plan-04:hover{	background: #ffe4ef;	}
#menu-pln-05 li:hover,li.plan-05:hover{	background: #eef7cd;	}

.popover a{
	display: block;
	text-decoration: none; /* for IE6-8 */
}
.popover i,
.popover span{
	display: table-cell;
	vertical-align: middle;
	*display: inline;
	*zoom: 1;
}
.popover span{
	padding: 0 0 0 5px;
	color: #333;
}

#menu-pln-01 i, .plan-01 i{	border: 1px solid #00b8ff;	}
#menu-pln-02 i, .plan-02 i{	border: 1px solid #f5b70b;	}
#menu-pln-03 i, .plan-03 i{	border: 1px solid #ff4800;	}
#menu-pln-04 i, .plan-04 i{	border: 1px solid #ff4190;	}
#menu-pln-05 i, .plan-05 i{	border: 1px solid #9dbe17;	}

/* thumb */
.popover i{
	width: 35px;
	height: 35px;
	overflow: hidden;
	background: url(../images/side-nav/photo-thumb.jpg) no-repeat 0 0;
}
i.thumb-01{	background-position: -0px 0;}
i.thumb-02{	background-position: -0px -35px;}
i.thumb-03{	background-position: -0px -70px;}
i.thumb-04{	background-position: -0px -105px;}
i.thumb-05{	background-position: -0px -140px;}
i.thumb-06{	background-position: -0px -175px;}
i.thumb-07{	background-position: -0px -210px;}
i.thumb-08{	background-position: -0px -245px;}
i.thumb-09{	background-position: -0px -280px;}
i.thumb-10{	background-position: -0px -315px;}
i.thumb-11{	background-position: -35px 0;}
i.thumb-12{	background-position: -35px -35px;}
i.thumb-13{	background-position: -35px -70px;}
i.thumb-14{	background-position: -35px -105px;}
i.thumb-15{	background-position: -35px -140px;}
i.thumb-16{	background-position: -35px -175px;}
i.thumb-17{	background-position: -35px -210px;}
i.thumb-18{	background-position: -35px -245px;}
i.thumb-19{	background-position: -35px -280px;}
i.thumb-20{	background-position: -35px -315px;}
i.thumb-21{	background-position: -70px 0;}
i.thumb-22{	background-position: -70px -35px;}
i.thumb-23{	background-position: -70px -70px;}
i.thumb-24{	background-position: -70px -105px;}
i.thumb-25{	background-position: -70px -140px;}
i.thumb-26{	background-position: -70px -175px;}
i.thumb-27{	background-position: -70px -210px;}
i.thumb-28{	background-position: -70px -245px;}
i.thumb-29{	background-position: -70px -280px;}
i.thumb-30{	background-position: -70px -315px;}
i.thumb-31{	background-position: -105px 0;}
i.thumb-32{	background-position: -105px -35px;}
i.thumb-33{	background-position: -105px -70px;}
i.thumb-34{	background-position: -105px -105px;}
i.thumb-35{	background-position: -105px -140px;}
i.thumb-36{	background-position: -105px -175px;}
i.thumb-37{	background-position: -105px -210px;}
i.thumb-38{	background-position: -105px -245px;}
i.thumb-39{	background-position: -105px -280px;}
i.thumb-40{	background-position: -105px -315px;}


/* =============================================================
	コンテンツ	
	#contents > section
============================================================= */
/*	h
----------------------------------------------------*/
#contents .h-sec{
	margin: 0 0 30px;
	width: 735px;
	height: 48px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/contents-index/h-sec.png) no-repeat 0 0;
	
	border-radius: 6px;
	-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
}
#plan-01 .h-sec{	background-position: 0 0;}
#plan-02 .h-sec{	background-position: 0 -48px;}
#plan-03 .h-sec{	background-position: 0 -96px;}
#plan-04 .h-sec{	background-position: 0 -144px;}
#plan-05 .h-sec{	background-position: 0 -192px;}

/*	.wrap-lst
----------------------------------------------------*/
.wrap-lst{
	background: #fff;
	width: 675px;
	padding: 30px 30px 15px;
	margin: 0 0 30px;
	overflow: hidden;
	-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	*zoom: 1;
}
.lst {
	width: 700px;
	margin: 0 -25px 0 0;
}
.lst li{
	width: 150px;
	float: left;
	margin: 0 25px 12px 0;
	padding: 8px 0 0;
	border-top: 1px dotted #333;
	position: relative;
}
.lst li:hover{
	cursor: pointer;
}
.lst i{
	display: block;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 5px 0;
	letter-spacing: 3px;
	position: absolute;
	top: -5px;
	left: 0;
	background: #fff;
	border-left: 11px solid;
}
#plan-01 .lst i{	border-color: #00b8ff;	}
#plan-02 .lst i{	border-color: #f5b70b;	}
#plan-03 .lst i{	border-color: #ff4800;	}
#plan-04 .lst i{	border-color: #ff4190;	}
#plan-05 .lst i{	border-color: #9dbe17;	}

.lst h3{
	height: 2.5em;
	_height: 3em;
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.4;
	margin: .6em 0;
}

a.hotel-ttl{
	color: #000;
	text-decoration: none; /* for IE6-8 */
}
#plan-01 a.hotel-ttl:hover, #plan-01 li:hover a.hotel-ttl{	background: #dff2fc;	}
#plan-02 a.hotel-ttl:hover, #plan-02 li:hover a.hotel-ttl{	background: #fff1cc;	}
#plan-03 a.hotel-ttl:hover, #plan-03 li:hover a.hotel-ttl{	background: #ffdacc;	}
#plan-04 a.hotel-ttl:hover, #plan-04 li:hover a.hotel-ttl{	background: #ffe4ef;	}
#plan-05 a.hotel-ttl:hover, #plan-05 li:hover a.hotel-ttl{	background: #eef7cd;	}

.lst p{
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.5;
}
.lst figure{
	width: 144px;
	height: 109px;
	overflow: hidden;
	border: 3px solid ;
	position: relative;
}
#plan-01 .lst figure{	border-color: #00b8ff;	}
#plan-02 .lst figure{	border-color: #f5b70b;	}
#plan-03 .lst figure{	border-color: #ff4800;	}
#plan-04 .lst figure{	border-color: #ff4190;	}
#plan-05 .lst figure{	border-color: #9dbe17;	}

.lst figure img{
	width: 150px;
	height: 115px;
	margin: -3px;
	position: relative;
}

/* ホテル名調整 */
#hotel-06 small{
	font-size: 8px;
	font-size: .8rem;
}
.wrap-lst #hotel-15 h3{
	height: 4em;
	font-size: 11px;
	font-size: 1.1rem;
}
#hotel-26 small{
	font-size: 8px;
	font-size: .8rem;
}
#hotel-27 small{
	font-size: 8px;
	font-size: .8rem;
}

/* overlay */
.wrap-img-loupe{
	display: block;
	width: 150px;
	height: 115px;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.img-loupe{
	display: block;
	width: 150px;
	height: 115px;
	overflow: hidden;
	background-repeat: no-repeat 0 0
	background-position: 0 0 ;
	background-color: #fff;
	position: absolute;
	filter: alpha(opacity=80);
	-moz-opacity: .80;
	opacity: .80;
}
#plan-01 .img-loupe{	background-image: url(../images/contents-index/img-loupe_01.png);	}
#plan-02 .img-loupe{	background-image: url(../images/contents-index/img-loupe_02.png);	}
#plan-03 .img-loupe{	background-image: url(../images/contents-index/img-loupe_03.png);	}
#plan-04 .img-loupe{	background-image: url(../images/contents-index/img-loupe_04.png);	}
#plan-05 .img-loupe{	background-image: url(../images/contents-index/img-loupe_05.png);	}


/* =============================================================
	宿詳細
	#contents > section
============================================================= */
/*	.wrap-hotel
----------------------------------------------------*/
.wrap-hotel{
	background: #fff;
	width: 675px;
	padding: 30px 30px 23px;
	margin: 0 0 30px;
	-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	box-shadow: 0px 0px 1px rgba(0, 0, 0, .2);
	position: relative;
}

/* i */
.wrap-hotel i{
	display: block;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0 5px 0;
	letter-spacing: 3px;
	border-left: 11px solid;
	position: absolute;
	top: 45px;
	left: 80px;
}
#plan-01 .wrap-hotel i{	border-color: #00b8ff;	}
#plan-02 .wrap-hotel i{	border-color: #f5b70b;	}
#plan-03 .wrap-hotel i{	border-color: #ff4800;	}
#plan-04 .wrap-hotel i{	border-color: #ff4190;	}
#plan-05 .wrap-hotel i{	border-color: #9dbe17;	}

/* icn-map */
.icn-area:before,
.icn-area-before{
	display: block;
	content: "";
	width: 57px;
	height: 71px;
	overflow: hidden;
	background-image: url(../images/contents-plan/icn-map-plan-01.png);
	background-repeat: no-repeat;
	position: absolute;
	top: -20px;
	left: -77px;
}
#plan-01 .icn-area:before, #plan-01 .icn-area-before{	background-image: url(../images/contents-plan/icn-map-plan-01.png);	}
#plan-02 .icn-area:before, #plan-02 .icn-area-before{	background-image: url(../images/contents-plan/icn-map-plan-02.png);	}
#plan-03 .icn-area:before, #plan-03 .icn-area-before{	background-image: url(../images/contents-plan/icn-map-plan-03.png);	}
#plan-04 .icn-area:before, #plan-04 .icn-area-before{	background-image: url(../images/contents-plan/icn-map-plan-04.png);	}
#plan-05 .icn-area:before, #plan-05 .icn-area-before{	background-image: url(../images/contents-plan/icn-map-plan-05.png);	}

.area-fukuoka .icn-area-before, .area-fukuoka .icn-area-before{	background-position: 0 0;}
.area-saga .icn-area-before, .area-saga .icn-area-before{	background-position: 0 -71px;}
.area-nagasaki .icn-area-before, .area-nagasaki .icn-area-before{	background-position: 0 -142px;}
.area-kumamoto .icn-area-before, .area-kumamoto .icn-area-before{	background-position: 0 -213px;}
.area-oita .icn-area-before	, .area-oita .icn-area-before{	background-position: 0 -284px;}
.area-miyazaki .icn-area-before, .area-miyazaki .icn-area-before{	background-position: 0 -355px;}
.area-kagoshima .icn-area-before, .area-kagoshima .icn-area-before{	background-position: 0 -426px;}

/* h */
.wrap-hotel h3{
	margin: 0;
	padding: 30px 30px 13px 50px;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: normal;
	line-height: 1.3;
	border-radius: 30px 0 30px 0;
}
#plan-01 .wrap-hotel h3{	color: #00b8ff; background: #dff2fc;	}
#plan-02 .wrap-hotel h3{	color: #f5b70b; background: #fff1cc;	}
#plan-03 .wrap-hotel h3{	color: #ff4800; background: #ffdacc;	}
#plan-04 .wrap-hotel h3{	color: #ff4190; background: #ffe4ef;	}
#plan-05 .wrap-hotel h3{	color: #9dbe17; background: #eef7cd;	}

.wrap-hotel h3 small{
	font-size: 75% !important;
}

/* p */
.catch{
	display: block;
	font-size: 16px;
	font-size: 1.6rem;
}
#plan-01 .catch{	color: #00b8ff;	}
#plan-02 .catch{	color: #f5b70b;	}
#plan-03 .catch{	color: #ff4800;	}
#plan-04 .catch{	color: #ff4190;	}
#plan-05 .catch{	color: #9dbe17;	}

/* photo */
.photo-hotel{
	width: 366px;
	float: left;
	margin: 0 23px 0 0;
	
	*display: inline;
	*zoom: 1;
}
.photo-hotel img{
	margin: 0 7px 7px 0;
	float: left;
	border-radius: 30px 0 30px 0;
	
	*display: inline;
	*zoom: 1;
}

/*	.wrap-hotel > .wrap-rcmPlan
----------------------------------------------------*/
.wrap-rcmPlan{
	overflow: hidden;
	_float: left;
}

/* h */
.h-rcmPlan{
	margin: 0;
	width: 219px;
	height: 33px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/contents-plan/h-rcmPlan.png) no-repeat;
}
#plan-01 .h-rcmPlan{	background-position: 0 0;}
#plan-02 .h-rcmPlan{	background-position: 0 -33px;}
#plan-03 .h-rcmPlan{	background-position: 0 -66px;}
#plan-04 .h-rcmPlan{	background-position: 0 -99px;}
#plan-05 .h-rcmPlan{	background-position: 0 -132px;}

/* plan */
.rcm-plan{
	margin: 0;
	overflow: hidden;
	*position: relative;
	*zoom: 1;
}
.rcm-plan li{
	margin: 0 0 -1px;
	padding: 10px 0;
	border-bottom: 1px dotted #333;
}
.rcm-plan li:hover{
	cursor: pointer;
}
.rcm-plan h5{
	margin: 0;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.4;
	padding: 8px;
	background: #fafafa;
}
#plan-01 .rcm-plan li:hover h5{	background-color: #dff2fc;	}
#plan-02 .rcm-plan li:hover h5{	background-color: #fff1cc;	}
#plan-03 .rcm-plan li:hover h5{	background-color: #ffdacc;	}
#plan-04 .rcm-plan li:hover h5{	background-color: #ffe4ef;	}
#plan-05 .rcm-plan li:hover h5{	background-color: #eef7cd;	}

.rcm-plan p{
	margin: 0;
	font-size: 12px;
	font-size: 1.2rem;
}
.price{
	padding: 0 0 0 5px;
	font-size: 18px;
	font-size: 1.8rem;
	font-style: italic;
	color: #ff4800;
}

/* a.btn-plan */
a.btn-plan{
	display: block;
	width: 286px;
	height: 36px;
	overflow: hidden;
	text-indent: 100%;
	_text-indent: 150%; /* for IE6 要検証 */
	white-space: nowrap;
	background: url(../images/contents-plan/btn-plan.png) no-repeat 0 0;
}
a.btn-plan:hover{
	filter: alpha(opacity=80);
	-moz-opacity: .80;
	opacity: .80;
}

/* .other-link */
.other-link{
	padding: 0;
}
.other-link li{
	font-size: 12px;
	font-size: 1.2rem;
	margin: 0 0 1px;
}
.other-link a{
	display: block;
	padding: 4px 10px;
	color: #333;
	border-radius: 10px;
	background: #fafafa;
	
	_zoom: 1;
}
.other-link a:hover{
	color: #ff4800;
}

#plan-01 .other-link a{	background-color: #dff2fc;	}
#plan-02 .other-link a{	background-color: #fff1cc;	}
#plan-03 .other-link a{	background-color: #ffdacc;	}
#plan-04 .other-link a{	background-color: #ffe4ef;	}
#plan-05 .other-link a{	background-color: #eef7cd;	}