@charset "UTF-8";


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

/*	icn
-------------------------------- */
i.icn-contact,
i.icn-address,
i.icn-price,
i.icn-parking,
i.icn-access,
i.icn-time,
i.icn-holiday{
	display: inline-block;
	width: 12px;
	height: 12px;
	line-height: 12px;
	margin: -1px 2px 0px 0;
	overflow: hidden;
	background: url(../images/icn_jalan_bl.png) no-repeat 0 0;
	vertical-align: middle;
	position: relative;

	*display: inline;
	*zoom: 1;
}
i.icn-contact{	background-position: -24px -12px;}
i.icn-address{	background-position: -24px 0;}
i.icn-price{	background-position: -12px -12px;}
i.icn-parking{	background-position: -12px -24px;}
i.icn-access{	background-position: 0 -24px;}
i.icn-holiday{	background-position: 0 -12px;}
i.icn-time{	background-position: -12px 0;}

/*	#overlay
-------------------------------- */
body{
	_background: url(null) fixed;
}
#overlay{
	width: 100%;
	height: 100%;
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1500;

	filter: alpha(opacity=80);
	-moz-opacity: .80;
	opacity: .80;

	_position: absolute;
	_top: expression(documentElement.scrollTop + 'px');

	display: none;
}

/*	#btn-side
-------------------------------- */
#btn-side{
	width: 61px;
	height: 197px;
	position: fixed;
	top: 200px;
	right: -65px;
	z-index: 3000;

	_position: absolute;
	_top: expression(documentElement.scrollTop + 'px');
}
#btn-side li{
	position: absolute;
	z-index: 1;
}
#btn-side a{
	display: block;
	width: 61px;
	height: 197px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/btn-side.png) no-repeat 0 0;
}
#btn-side li.active{
	z-index: 100;
}
/* ================================
    ヘッダ
    #globalHeader
================================ */
/*	h
-------------------------------- */
#ttl{
	float: left;
	margin: 0 1em 0 0;
}

/*	#globalNav
-------------------------------- */
#globalNav{
	float: left;
	height: 16px;
	margin: 23px 0 0;
}
#globalNav li{
	float: left;
	margin: 0 1em 0 0;
	*display: inline;
	*zoom: 1;
}
#globalNav a{
	display: block;

	height: 16px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-image: url(../images/header/nav.png);
	background-repeat: no-repeat;
}
.menu-01 a{
	width: 134px;
	background-position: 0 0;
}
.menu-02 a{
	width: 172px;
	background-position: 0 -21px;
}
.menu-03 a{
	width: 157px;
	background-position: 0 -42px;
}
.menu-04 a{
	width: 108px;
	background-position: 0 -63px;
}
.menu-01 a.active, .menu-01 a:hover{	background-position: -172px 0;}
.menu-02 a.active, .menu-02 a:hover{	background-position: -172px -21px;}
.menu-03 a.active, .menu-03 a:hover{	background-position: -172px -42px;}
.menu-04 a.active, .menu-04 a:hover{	background-position: -172px -63px;}

/* ================================
    フッタ
    #globalFooter
================================ */
/*	#footerNav
-------------------------------- */
#footerNav{
	width: 873px;
	margin: 0 auto;
	border-right: 1px solid #333;
}
#footerNav .parent{
	width: 290px;
	height: 50px;
	float: left;
	border-left: 1px solid #333;
	position: relative;
}
#footerNav a.menu-01,
#footerNav a.menu-02,
#footerNav a.menu-03{
	display: block;
	width: 290px;
	height: 50px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/footer/nav-footer.png) no-repeat 0 0;
}
#footerNav a.menu-01{	background-position: 0 0;}
#footerNav a.menu-02{	background-position: -290px 0;}
#footerNav a.menu-03{	background-position: -580px 0;}
#footerNav a.menu-01:hover{	background-position: 0 -50px;}
#footerNav a.menu-02:hover{	background-position: -290px -50px;}
#footerNav a.menu-03:hover{	background-position: -580px -50px;}

.tltip-footer{
	width: 180px;
	border: 3px solid #333;
	background: #fff;
	border-radius: 3px;
	position: absolute;
	bottom: 60px;
	left: 50%;
	margin: 0 0 0 -93px;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.2;
}
.tltip-footer:after{
	display: block;
	content: "▼";
	color: #000;
	font-size: 20px;
	position: absolute;
	bottom: -20px;
	left: 50%;
	margin-left: -10px;
}
.tltip-footer a{
	display: block;
	padding: 6px 10px;
	color: #000;
}
.tltip-footer a:hover{
	background: #ffe6e6;
}

/* ================================
	コンテンツ
	#wrap-contents
================================ */
/*	#wrap-contents
-------------------------------- */
#wrap-contents .inner{
	position: relative;
	overflow: hidden;
}
.bgPhoto{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

/*	#contents-front
-------------------------------- */
#contents-front h2{
	position: absolute;
}
#contents-front .wrap-txt{
	left: 15%;
	margin: -300px 0 0;
}
.ie8 .wrap-txt{
	margin-top: -270px !important;
}
.secNav-front {
	width: 426px;
	margin: 432px auto 0;
	*padding: 432px 0 0 90px;
}
.secNav-front li{
	width: 212px;
	height: 78px;
	float: left;
	margin: 0 1px 1px 0;
	position: relative;
	*display: inline;
	*zoom: 1;
}
.secNav-front a{
	display: block;
	width: 212px;
	height: 78px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/contents/sec-01_front/nav-front.png) no-repeat 0 0;
	position: absolute;
}
.secNav-front a.menu-01{	background-position: 0 0;}
.secNav-front a.menu-02{	background-position: 0 -78px;}
.secNav-front a.menu-03{	background-position: 0 -156px;}
.secNav-front a.menu-04{	background-position: 0 -234px;}

/*	#contents-onsen,
	#contents-gourmet,
	#contents-view
-------------------------------- */
.wrap-txt{
	width: 554px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -300px 0 0 -200px;
	_width: 570px;
	_margin: -300px 0 0 -230px;
}
.wrap-txt h2{
	margin: 0 0 0 20px;
	float: right;

	*display: inline;
	*zoom: 1;
}
.secNav{
	width: 340px;
	margin: 20px 0 0;
}
.secNav li{
	width: 75px;
	height: 251px;
	position: relative;
	float: right;
	margin: 0 0 10px 10px;

	*display: inline;
	*zoom: 1;
}
.secNav a{
	display: block;
	width: 75px;
	height: 251px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-repeat: no-repeat;
	position: absolute;
}
#contents-onsen .secNav a{
	background-image: url(../images/contents/sec-02_onsen/nav-onsen.png);
}
#contents-gourmet .secNav a{
	background-image: url(../images/contents/sec-03_gourmet/nav-gourmet.png);
}
#contents-view .secNav a{
	background-image: url(../images/contents/sec-04_view/nav-view.png);
}
a.menu-01{	background-position: 0 0;}
a.menu-02{	background-position: -75px 0;}
a.menu-03{	background-position: -150px 0;}
a.menu-04{	background-position: -225px 0;}
a.menu-05{	background-position: -300px 0;}
a.menu-06{	background-position: -375px 0;}
a.menu-07{	background-position: -450px 0;}

/*	#controls
-------------------------------- */
#controls li{
	position: absolute;
	top: 50%;
	margin: -61px 0 0;
	z-index: 1000;
}
#btn-prev{
	left: 50px;
}
#btn-next{
	right: 50px;
}
#controls a{
	display: block;
	width: 81px;
	height: 162px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/controls.png) no-repeat 0 0;
}
#btn-prev a{	background-position: 0 0;}
#btn-next a{	background-position: -81px 0;}
#btn-prev a:hover{	background-position: 0 -162px;}
#btn-next a:hover{	background-position: -81px -162px;}

/*	a.btn-coupon
-------------------------------- */
a.btn-coupon{
	display: block;
	width: 425px;
	height: 65px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/contents/btn-coupon.png) no-repeat 0 0;
	position: absolute;
	bottom: 110px;
	left: 50%;
	margin: 0 0 0 -213px;
	z-index: 1000;
}
a.btn-coupon:hover{	background-position: 0 -65px;}
a.btn-coupon:active{	background-position: 0 -130px;}


/* ================================
	コンテンツ
	#contents-panel
================================ */
/*	#contents-panel
-------------------------------- */
#contents-panel{
	width: 100%;
	height: 100%;
	min-height: 800px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
	display: none;

	background: transparent;
}
/*	layout
-------------------------------- */
.panel{
	width: 990px;
	height: 695px;
	background: #000;
	border-radius: 6px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -350px 0 0 -495px;
	overflow: hidden;

	display: none;
}
.wrap-panel-txt{
	width: 300px;
	height: 655px;
	padding: 60px 20px 20px;
	background: #fff;
	float: right;

	*display: inline;
	*zoom: 1;
}
.main-photo{
	width: 650px;
	height: 615px;
	background: url(../images/loading.gif) no-repeat center center #fff;
	overflow: hidden;
	_position: absolute;
}
.thumb{
	height: 60px;
	padding: 10px;
	position: absolute;
	bottom: 0;
	right: 330px;
	z-index: 100;
}
/* 調整 */
#itm-02 .wrap-panel-txt{
	padding-top: 40px;
}

/*	.wrap-panel-txt
-------------------------------- */
/* area */
.area{
	font-size: 12px;
	font-size: 1.2rem;
	color: #eb8e8e;
}
.tltip{
	padding: 6px 8px 4px 10px;
	margin: 0 10px 0 0;
	color: #fff;
	line-height: 1;
	background-color: #eb8e8e;
	border-radius: 3px;
	position: relative;
}
.tltip:after{
	display: block;
	content: "▶";
	color: #eb8e8e;
	position: absolute;
	top: 9px;
	right: -7px;
}
/* h */
.wrap-panel-txt h3{
	font-size: 30px;
	font-size: 3.0rem;
	line-height: 1.1;
	margin: 15px 0 0;
}
span.sub{
	display: block;
	font-size: 20px;
	font-size: 2.0rem;
}
.rub{
	display: block;
	font-size: 12px;
	font-size: 1.2rem;
}
.wrap-panel-txt h4{
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.3;
	margin: 1em 0;
	color: #eb8e8e;
}

/* dl.data */
.data{
	background: #ffe6e6;
	padding: 5px 10px 10px;
	font-size: 12px;
}
.data dt{
	padding: 5px 0 0;
	font-weight: bold;
}
.data dd{
	margin: 0 0 0 12px;
}

/* a.btn-outside */
a.btn-outside{
	display: block;
	width: 100%;
	height: 44px;
	background: yellow;
	border-radius: 6px;
	text-align: center;
	line-height: 44px;
	font-weight: bold;
	color: #000;
	border-bottom: 2px solid #b7b45c;
}
a.btn-outside:hover{
	background: #f0e628;
}
a.btn-outside:active{
	border-top: 2px solid #fff;
	border-bottom-width: 0;
}

/* a.btn-close */
a.btn-close{
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 17px;
	text-align: center;
	line-height: 32px;
	font-size: 20px;
	color: #fff;
	background: #ccc;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3000;
}
a.btn-close:hover{
	background: #333;
}

/*	figure.main-photo
-------------------------------- */
figcaption{
	position: absolute;
	bottom: 50px;
	_bottom: 0;
	left: 20px;
	color: #fff;
}
/* ul.thumb */
.thumb a{
	margin: 0 10px 0 0;
	border: 2px solid #fff;
	overflow: hidden;
	float: left;

	*display: inline;
	*zoom: 1;
}
.thumb img{
	margin: -2px;
	position: relative;
}
.thumb a:hover, a.active-thumb{
	border-color: #eb8e8e;
}


/* ================================
	コンテンツ
	#contents-map
================================ */
#img-map{
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -285px 0 0 -435px;
	border: 10px solid #fff;
}

/*	#areaNav
-------------------------------- */
#areaNav li{
	font-size: 18px;
	font-size: 1.8rem;
	position: absolute;
	top: 50%;
	left: 50%;

	z-index: 50;
}
#areaNav a{
	display: block;
	padding: 6px 15px 4px;
	background: #fff;
	border: 2px solid #000;
	border-radius: 6px;
	color: #000;
}
#areaNav a:hover{
	border-color: #ff6496;
	color: #ff6496;
}

/* 位置調整 */
#areaNav li.area-nakatsu{	margin: -230px 0 0 85px;}
#areaNav li.area-beppu{	margin: -80px 0 0 80px;}
#areaNav li.area-yufuin{	margin: 35px 0 0 -80px;}
#areaNav li.area-hita{	margin: -150px 0 0 -350px;}
#areaNav li.area-kokonoe{	margin: 110px 0 0 -230px;}
#areaNav li.area-oita{	margin: 120px 0 0 190px;}

/*	#itmLst
-------------------------------- */
#wrap-itmLst{
	padding: 10px;
	background: #fff;
	border: 5px solid #ff6496;
	position: absolute;
	top: 50%;
	left: 50%;

	display: none;

	z-index: 1000;
}
#itmLst li{
	margin: 0 0 1px;
}
#itmLst a{
	display: table;
	width: 250px;
	height: 70px;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.3;
	color: #000;
	background: #fff;
}
#itmLst i{
	display: table-cell;
	width: 70px;
	height: 70px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 0 -2px;
	vertical-align: middle;

	*display: inline;
	*zoom: 1;
}
#itmLst span{
	display: table-cell;
	_width: 180px;
	padding: 0 10px;
	vertical-align: middle;

	*display: inline;
	*zoom: 1;
}
#ctg-01 i{	background-image: url(../images/contents/sec-02_onsen/nav-onsen.png);}
#ctg-02 i{	background-image: url(../images/contents/sec-03_gourmet/nav-gourmet.png);}
#ctg-03 i{	background-image: url(../images/contents/sec-04_view/nav-view.png);}
#itmLst a.menu-01 i{	background-position: 0 -2px;}
#itmLst a.menu-02 i{	background-position: -75px -2px;}
#itmLst a.menu-03 i{	background-position: -150px -2px;}
#itmLst a.menu-04 i{	background-position: -225px -2px;}
#itmLst a.menu-05 i{	background-position: -300px -2px;}
#itmLst a.menu-06 i{	background-position: -375px -2px;}
#itmLst a.menu-07 i{	background-position: -450px -2px;}

#itmLst a:hover{
	background: #ffe6e6;
}
#wrap-itmLst a.btn-close{
	top: -15px;
	right: -15px;
}