@charset "UTF-8";

/* ================================
    固定レイアウト
================================ */
/* --------------------------------
    コンテンツ、ヘッダー、フッター の
	横幅指定とセンタリング
-------------------------------- */
#page,
#globalHeader,
#globalFooter,
#wrap-contents{
	width:100%;
	position: relative;
}
.inner {
	width: 990px;
	margin: 0 auto;
	padding:0;
}
#page{
	overflow: hidden;
}

/* --------------------------------
    コンテンツ、ヘッダー、フッター の
	配色とマージン
-------------------------------- */
html,body{
	height: 100%;
	_overflow-x: hidden;
}

#page{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	z-index: 1;
}
#page:before,
#page:after,
#page-before,
#page-after{
	display: block;
	content: "";
	width: 66px;
	height: 100%;
	min-height: 800px;
	background-repeat: repeat-y;
	background-position: 0 0;
	position: fixed;
	top: 0;
	
	z-index: 500;
	
	_position: absolute;
	_top: expression(documentElement.scrollTop + 'px');	
}
#page:before,
#page-before{
	background-image: url(../images/back-maskL.png);
	left: 0;
}

#page:after,
#page-after{
	background-image: url(../images/back-maskR.png);
	right: 0;
}

#globalHeader{
	background: url(../images/back-maskTop.png) repeat-x 0 0;
	height: 67px;
	
	position: absolute;
	top: 0;
	left: 0;
	
	z-index: 1000;
}
#globalHeader .inner{
	padding: 10px 0 0 66px;
	width: 100%;
}

#globalFooter{
	background: url(../images/back-maskBtm.png) repeat left bottom;
	height: 89px;

	position: absolute;
	bottom: 0;
	left: 0;
	
	z-index: 1000;
}
#globalFooter .inner{
	padding: 20px 0;
}

#wrap-contents{
	height: 100%;
	min-height: 800px;
	padding-bottom: 89px;
	margin-bottom: -2px;
	overflow: hidden;
	z-index: -1;
}
#wrap-contents .inner{
	height: 100%;
	min-height: 800px;
}
#contents-front{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#contents-onsen,
#contents-gourmet,
#contents-view,
#contents-map{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.activeSlide{
	z-index: 400;
}