@charset "Shift_JIS";
/* CSS Document */

a:hover img {
	opacity: 0.8;
	filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=80);
}

h1 {
	margin-top: 3px;
	font-size: 12px;
	font-weight: normal;
}

h2 {
	width: 950px;
}

.space {
	height: 100px;
}

/* =========================================================
◆ナビゲーション
========================================================= */
.navi ul {
	width: 930px;
	height: 120px;
	padding: 15px;
}
.navi ul li {
	float: left;
}
.navi ul li a {
	display: block;
	text-indent: -9999px;
}
.navi ul li.toba {
	width: 230px;
}
.navi ul li.toba a {
	width: 230px;
	background: url(../images/nav_toba.png) no-repeat 0 0;
}
.navi ul li.ise {
	width: 230px;
}
.navi ul li.ise a {
	width: 230px;
	background: url(../images/nav_ise.png) no-repeat 0 0;
}
.navi ul li.shima {
	width: 230px;
}
.navi ul li.shima a {
	width: 230px;
	background: url(../images/nav_shima.png) no-repeat 0 0;
}
.navi ul li.allsearch {
	width: 230px;
}
.navi ul li.allsearch a {
	width: 230px;
	background: url(../images/nav_search.png) no-repeat 0 0;
}
.navi ul li.toba, .navi ul li.ise, .navi ul li.shima, .navi ul li.allsearch {
	height: 120px;
}
.navi ul li.toba a, .navi ul li.ise a, .navi ul li.shima a, .navi ul li.allsearch a {
	height: 120px;
}
.navi ul li.toba a:hover, .navi ul li.ise a:hover, .navi ul li.shima a:hover, .navi ul li.allsearch a:hover {
	background-position: 0 -120px;
}
/*必要なCSS：ここから*/
	/* 
	一定の位置までスクロールをしたら、ナビゲーションにclass="active"を付与します。
	通常時のCSSと、activeがついている状態の両方のcssを記述します
	*/

/*通常時*/
.navi {
	display: block;
	width: 100%;
}
/*active付与時*/
.navi.active {
	display: block;
	position: fixed;
	top: 0;
	width: 950px;
	z-index: 200;
}
.navi {
	background-color: #FFF;
	text-align: center;
	opacity: 0.9;
	filter: progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90);
}

.line {
	width: 950px;
	height: 12px;
	background: url(../images/im_line.png) no-repeat 0 0;
	margin-top: 10px;
}

/* =========================================================
◆観光スポット
========================================================= */
.areaBlock {
	width: 950px;
	margin-top: 50px;
}

.areaBlock .caption {
	float: left;
	width: 530px;
	margin-right: 20px;
}

.areaBlock .caption .ti_toba {
	width: 530px;
	height: 160px;
	background: url(../images/ti_toba.gif) no-repeat 0 0;
	text-indent: -9999px;
}

.areaBlock .caption .ti_ise {
	width: 530px;
	height: 160px;
	background: url(../images/ti_ise.gif) no-repeat 0 0;
	text-indent: -9999px;
}

.areaBlock .caption .ti_shima {
	width: 530px;
	height: 160px;
	background: url(../images/ti_shima.gif) no-repeat 0 0;
	text-indent: -9999px;
}

.areaBlock .caption dl {
	float: left;
	width: 505px;
	margin-left: 25px;
}

.areaBlock .caption dl dt {
	font-size: 108%;
	font-weight: bold;
	margin-top: 20px;
}

.areaBlock .caption dl dd {
	line-height: 1.7;
}

.areaBlock .photo {
	float: left;
	width: 400px;
}

/* =========================================================
◆グルメ＆お土産
========================================================= */
.areaBlock .gourmetBlock {
	float: left;
	width: 884px;
	height: 290px;
	padding: 30px 33px;
	background: url(../images/bg_gourmet.png) no-repeat 0 0;
	margin-top: 30px;
}

.areaBlock .gourmetBlock .tx_gourmet {
	text-align: center;
}

.areaBlock .gourmetBlock .gourmetBox {
	width: 912px;
	margin: 20px -28px 0 0;
	overflow: hidden;
	_zoom: 1;
}

.areaBlock .gourmetBlock .gourmetBox .item {
	float: left; 
	width: 200px;
	margin-right: 28px;
}

.areaBlock .gourmetBlock .gourmetBox .item dl {
	text-align: center;
	margin-top: 5px;
}

.areaBlock .gourmetBlock .gourmetBox .item dl dt {
	font-size: 108%;
	font-weight: bold;
}

.areaBlock .gourmetBlock .gourmetBox .item dl dd {
	margin-top: 5px;
}

/* =========================================================
◆おすすめのお宿
========================================================= */
.areaBlock .tx_recoyado {
	float: left;
	width: 950px;
	margin-top: 30px;
}

.areaBlock .listItem {
	width: 980px;
	margin: 0 -30px 0 0;
	overflow: hidden;
	_zoom: 1;
}

.areaBlock .listItem .hotel {
	float: left;
	width: 213px;
	height: 387px;
	border: 1px #CCC solid;
	margin: 10px 30px 20px 0;
}

.areaBlock .listItem .hotel .hotelInner {
	width: 185px;
	margin: 10px 14px 0 14px;
}

.areaBlock .listItem .hotel .hotelInner dl dt h3 {
	font-size: 116%;
	font-weight: bold;
	height: 40px;
}

.areaBlock .listItem .hotel .hotelInner dl dd {
	height: 60px;
}

.areaBlock .listItem .hotel .hotelInner ul.yoyaku {
	width: 185px;
}

.areaBlock .listItem .hotel .hotelInner ul.yoyaku li {
	margin-top: 8px;
}

.areaBlock .listItem .hotel .hotelInner ul.yoyaku li.btn {
	overflow: hidden;
	width: 185px;
	height: 36px;
	border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */ 
}

.areaBlock .listItem .hotel .hotelInner ul.yoyaku li.btn a {
	display: block;
	position: relative;
	z-index: 100;
	text-align: center;
	background: #6699FF;
	color: #fff;
	line-height: 36px;
	text-decoration :none;
}

.areaBlock .listItem .hotel .hotelInner ul.yoyaku li.btn a:hover {
	background: #6666FF;        /* マウスオーバーカラー */  
}

.areaBlock .listItem .hotel .hotelInner ul.yoyaku li.btn a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 7px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #fff;
}

.areaBlock .listItem .hotel .hotelInner ul.yoyaku li.btn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 3px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #6699FF;
}

.areaBlock .listItem .hotel .hotelInner ul.yoyaku li.btn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #6666FF;
}

/* =========================================================
◆全プラン検索
========================================================= */
.searchBlock {
	width: 480px;
	height: 185px;
	background: url(../images/bg_search.png) no-repeat 0 0;
	margin: 40px 35px 0 35px;
	padding: 25px 0 0 400px;
}

.searchBlock ul.yoyaku {
	float: left;
	font-size: 116%;

}

.searchBlock ul.yoyaku li {
	float: left;
	margin: 15px 15px 0 0;
}

.searchBlock ul.yoyaku li.btn {
	overflow: hidden;
	width: 200px;
	height: 56px;
	border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */ 
}

.searchBlock ul.yoyaku li.btn a {
	height: 48px;
	padding-top: 8px;
	display: block;
	position: relative;
	z-index: 100;
	text-align: center;
	background: #FFF;
	color: #000;
	line-height: normal;
	text-decoration :none;
	font-weight: bold;
}

.searchBlock ul.yoyaku li.btn a:hover {
	background: #FF3;        /* マウスオーバーカラー */  
}

.searchBlock ul.yoyaku li.btn a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 7px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #F36;
}

.searchBlock ul.yoyaku li.btn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 3px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #FFF;
}

.searchBlock ul.yoyaku li.btn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #FF3;
}