/* shift jis
/
/ 書式設定
----------------------------------*/

body{
	margin: 0;
	padding:0;
	border: 0 none;
	font-size:14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:1.5em;
	position:relative;
	background-image: url(../images/back.jpg);
	background-position: top center;
}



/*floatの解除*/
.clearfix:after { 
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
	height: 1px;
	/*\*//*/ /*MAC IE5.x対策*/
	height: auto;
	overflow: hidden;
	/**/
}
img {vertical-align:bottom;}
a img {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}


/*footer部分
-------------------------------*/
#footer {
	background:#FFFFFF;
	width:100%;
	min-width: 990px;
}


#footer:after { 
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
	overflow: hidden;
}


/*
-------------------------------*/
#back_ground{
	width: 100%;
	
}
#main{
	width: 100%;
	text-align: center;
	margin: 0 auto;
	
}
.mainbox{
	width: 990px;
	height: 553px;
	text-align: center;
	margin: 0 auto;
	position: relative;
}





#wrap{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
#wraper{
	width: 990px;
	margin: 0 auto;
	text-align: center;
	background-color: #fff;
}

/*ここからピョコピョコ動こかすアニメ*/
#navi{
	text-align: center;
	font-size: 0px;
	padding-top: 20px;
	margin-left: -20px;
	margin-bottom: 30px;
}
#navi li{
	display: inline-block;
	height: 80px;
	margin-left: 20px;
	position: relative;
	*display: inline;
	*zoom:1;
}
#navi a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
}
#navi li a{display: block; width: 300px; height: 70px; border-radius: 4px; text-align: center; animation: btnanime 4s ease -2s infinite; position: relative; overflow: visible;}
#navi li a img{z-index: 2; position: absolute; top: 0px; left: 5px; border-radius: 20%;}
#navi li a:hover,#navi li a.select {animation-play-state: paused; }

#navi li a.btn01{
	background: #43aa8d;
	box-shadow: 0px 8px 0px #33867e;
}
#navi li a.btn02{
	background: #c85a70;
	box-shadow: 0px 8px 0px #a44865;
}
#navi li a.btn03{
	background: #008ea3;
	box-shadow: 0px 8px 0px #027f80;
}
/*これでクリックした時に5px凹むと同時にホバー時にピコっとしなくなる*/
#wrap #navi li a.select{
	margin-top: 5px;
} 
/*~~~~~*/

#navi a.btn01:hover { margin-top: -4px; box-shadow:0px 12px 0px #33867e;}
#navi a.btn02:hover { margin-top: -4px; box-shadow:0px 12px 0px #a44865;}
#navi a.btn03:hover { margin-top: -4px; box-shadow:0px 12px 0px #027f80;}

#navi li a.select:before { display: block; content: ''; position:absolute; z-index:1; width: 30px;height: 30px; background: #4378a9; bottom: -15px; left:50%; margin-left:-15px; transform: rotate(45deg); }

#wrap #navi li a.btn01.select {box-shadow:0px 3px 0px #33867e;}
#wrap #navi li a.btn02.select {box-shadow:0px 3px 0px #a44865;}
#wrap #navi li a.btn03.select {box-shadow:0px 3px 0px #027f80;}

#wrap #navi.bottom li a.select img {vertical-align: bottom;}
#wrap #navi.bottom li a.select:before {bottom:auto; top:-15px;}

#navi li a.btn01.select:before{
	background: #43aa8d;
}
#navi li a.btn02.select:before{
	background: #c85a70;
}
#navi li a.btn03.select:before{
	background: #008ea3;
}



@keyframes btnanime {
	0%,20%,40%,100%{top: 4px; padding-bottom: 0px;}
	10%,30%{top: 1px; padding-bottom: 3px;}
}

@keyframes imganime {
	0%,15%,25%,100%{padding-top: 0px;}
	10%,20%{padding-top: 2px;}
}

/*ここからピョコピョコ動こかすアニメ*/
.navi2{
	text-align: center;
	font-size: 0px;
	padding-top: 40px;
	margin-left: -20px;
}
.navi2 li{
	display: inline-block;
	height: 80px;
	margin-left: 20px;
	position: relative;
	*display: inline;
	*zoom:1;
}
.navi2 a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
}
.navi2 li a{display: block; width: 300px; height: 70px; border-radius: 4px; text-align: center; animation: btnanime 4s ease -2s infinite; position: relative; overflow: visible;}
.navi2 li a img{z-index: 2; position: absolute; top: 0px; left: 5px; border-radius: 30%;}
.navi2 li a:hover,.navi2 li a.select {animation-play-state: paused; }

.navi2 li a.btn01{
	background: #43aa8d;
	box-shadow: 0px 8px 0px #33867e;
}
.navi2 li a.btn02{
	background: #c85a70;
	box-shadow: 0px 8px 0px #a44865;
}
.navi2 li a.btn03{
	background: #008ea3;
	box-shadow: 0px 8px 0px #027f80;
}
/*これでクリックした時に5px凹むと同時にホバー時にピコっとしなくなる*/
#wrap .navi2 li a.select{
	margin-top: 5px;
} 
/*~~~~~*/

.navi2 a.btn01:hover { margin-top: -4px; box-shadow:0px 12px 0px #33867e;}
.navi2 a.btn02:hover { margin-top: -4px; box-shadow:0px 12px 0px #a44865;}
.navi2 a.btn03:hover { margin-top: -4px; box-shadow:0px 12px 0px #027f80;}

.navi2 li a.select:before { display: block; content: ''; position:absolute; z-index:1; width: 30px;height: 30px; background: #4378a9; bottom: -15px; left:50%; margin-left:-15px; transform: rotate(45deg); }

#wrap .navi2 li a.btn01.select {box-shadow:0px 3px 0px #33867e;}
#wrap .navi2 li a.btn02.select {box-shadow:0px 3px 0px #a44865;}
#wrap .navi2 li a.btn03.select {box-shadow:0px 3px 0px #027f80;}

#wrap .navi2 li a.select img {vertical-align: bottom;}
#wrap .navi2 li a.select:before {bottom:auto; top:-15px;}

.navi2 li a.btn01.select:before{
	background: #43aa8d;
}
.navi2 li a.btn02.select:before{
	background: #c85a70;
}
.navi2 li a.btn03.select:before{
	background: #008ea3;
}





.map01{
	position: absolute;
	top: 55px;
	right: 10px;
}
.map01.huluhulu{
	position: absolute;
	top: 55px;
	right: 10px;
	animation: mapanime 2s ease infinite;
}
.map02{
	position: absolute;
	top: 130px;
	right: 10px;
}
.map02.huluhulu{
	position: absolute;
	top: 130px;
	right: 10px;
	animation: mapanime 2s ease infinite;
}
.map03{
	position: absolute;
	top: 110px;
	right: 125px;
}
.map03.huluhulu{
	position: absolute;
	top: 110px;
	right: 125px;
	animation: mapanime 2s ease infinite;
}
.map04{
	position: absolute;
	top: 235px;
	right: 90px;
}
.map04.huluhulu{
	position: absolute;
	top: 235px;
	right: 90px;
	animation: mapanime 2s ease infinite;
}
.map05{
	position: absolute;
	top: 489px;
	right: 347px;
}
.map05.huluhulu{
	position: absolute;
	top: 489px;
	right: 347px;
	animation: mapanime 2s ease infinite;
}

@keyframes mapanime {
	0%,10%,20%,30%,40%,100% {transform: rotate(0deg);}
	5%,25% {transform: rotate(6deg);}
	15%,35% {transform: rotate(-6deg);}
}




#box01 a{
	display: block;
}
#box01 p{
	display: block;
}
#box02 p{
	display: block;
}
#box03 p{
	display: block;
}

#box01 .bigcaset01{
	text-align: center;
	font-size: 0px;
}
#box01 .bigcaset01 li{
	width: 460px;
	height: 513px;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	background-image: url(../images/onsen_back.jpg);
	background-repeat: no-repeat;
}


#box01 .smallcaset01{
	text-align: left;
	font-size: 0px;
	margin-left: 24px;
}
#box01 .smallcaset01 li{
	display: inline-block;
	width: 220px;
	height: 465px;
	margin-right: 20px;
	background-image: url(../images/onsenS_back.jpg);
	background-repeat: no-repeat;
	text-align: center;
	*display: inline;
	*zoom:1;
}


.smallbottom{
	padding-top: 10px;
}



#box02 a{
	display: block;
}

#box02 .bigcaset02{
	text-align: center;
	font-size: 0px;
}
#box02 .bigcaset02 li{
	width: 460px;
	height: 513px;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	background-image: url(../images/hida_back.jpg);
	background-repeat: no-repeat;
}



#box02 .smallcaset02{
	text-align: left;
	font-size: 0px;
	margin-left: 24px;
}
#box02 .smallcaset02 li{
	display: inline-block;
	width: 220px;
	height: 465px;
	margin-right: 20px;
	background-image: url(../images/hidaS_back.jpg);
	background-repeat: no-repeat;
	text-align: center;
	*display: inline;
	*zoom:1;
}

#box03{
	background-image: url(../images/box03_back.jpg);
	background-repeat: no-repeat;
}

#box03 a{
	display: block;
}

#box03 .bigcaset03{
	text-align: left;
	font-size: 0px;
	margin-left: 14px;
}
#box03 .bigcaset03 li{
	width: 460px;
	height: 513px;
	display: inline-block;
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	background-image: url(../images/gifu_back.jpg);
	background-repeat: no-repeat;
}



#box03 .smallcaset03{
	text-align: left;
	font-size: 0px;
	margin-left: 24px;
}
#box03 .smallcaset03 p{
	display: block;
}
#box03 .smallcaset03 a{
	display: block;
}
#box03 .smallcaset03 li{
	display: inline-block;
	width: 220px;
	height: 465px;
	margin-right: 20px;
	background-image: url(../images/gifuS_back.jpg);
	background-repeat: no-repeat;
	text-align: center;
	*display: inline;
	*zoom:1;
}

/*カセット画像の伸縮*/
.mainimg {
	position: relative;
	display:block;
	width:100%;
	
}
.imgbox{
	width: 400px;
	margin: 0 auto;
	overflow:hidden;
}
.mainimg:hover .imgbox img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

/*ホバー時の文字*/
.mainimg span {
	display:block;
	position:absolute;
	top:158px;
	left:140px;
	width:180px;
	height:20px;
	line-height:20px;
	color:#fff;
	background:#666;
	text-align:center;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	opacity: 0.0;
	filter: alpha(opacity=0);
	font-size: 14px;
}
.mainimg:hover span {
	opacity: 1;
	filter: alpha(opacity=100);
}

.smalltop{
	position: relative;
}
.smalltop span {
	display:block;
	position:absolute;
	top:160px;
	left:30px;
	width:160px;
	height:20px;
	line-height:20px;
	color:#fff;
	background:#666;
	text-align:center;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	opacity: 0.0;
	filter: alpha(opacity=0);
	font-size: 12px;
}
.smalltop:hover span {
	opacity: 1;
	filter: alpha(opacity=100);
}
.small03{
	position: relative;
}
.small03 span {
	display:block;
	position:absolute;
	top:160px;
	left:30px;
	width:160px;
	height:20px;
	line-height:20px;
	color:#fff;
	background:#666;
	text-align:center;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	opacity: 0.0;
	filter: alpha(opacity=0);
	font-size: 12px;
}
.small03:hover span {
	opacity: 1;
	filter: alpha(opacity=100);
}


/*ここからbxslider*/

.bxbox{
	position: relative;
	width: 340px;
	height: 240px;
	text-align: center;
	margin: 0 auto;
	background-color: #fff;
	position: absolute;
	top: 280px;
	left: 20px;
	transform: rotate(-2deg);
	box-shadow:0px 0px 10px #000;
}

.spot{
	position: absolute;
	width: 86px;
	height: 88px;
	top: -14px;
	right: -65px;
	z-index: 5;
}

.bx01{
	width: 320px;
	height: 220px;
	padding-top: 10px;
	padding-left: 10px;
}
.bx02{
	width: 250px;
	height: 50px;
	position: absolute;
	top: 480px;
	left: 170px;
}
.bx02 ul {position: relative; width: 250px; height: 50px;}
.bx02 ul li {position: absolute; top: 0; left: 0; display: none; width: 250px; height: 50px;}
.bx02 ul li.select {display: block; width: 250px; height: 50px;}
.bx02 ul li a {display: block;}

.bx-pager-item{
	display: none;
	margin-left: 30px;
}

.bxbox .bx-pager-item{
	display: inline-block;
	margin-left: 10px;
	*display: inline;
	*zoom: 1;
}
.bxbox .bx-pager-link{
	width: 11px;
	height: 11px;
	text-align: center;
	display: block;
	background-color: #d0d0d0;
	border-radius: 50%;
	text-indent: 100%;
	overflow: hidden;
}
.bxbox .bx-default-pager{
	position: absolute;
	width: 320px;
	bottom: -40px;
	left: 0px;
	transform: rotate(3deg);
}




/*古いブラウザ用*/
.bx-pager-link.active{
	background-color: #67b05c;
}

/*色変え*/
.bx-pager-link.active[data-slide-index="0"] {
	background-color: #67b05c;
}
.bx-pager-link.active[data-slide-index="1"] {
	background-color: #67b05c;
}
.bx-pager-link.active[data-slide-index="2"] {
	background-color: #67b05c;
}
.bx-pager-link.active[data-slide-index="3"] {
	background-color: #67b05c;
}

.bx02 ul li a:hover img{
	opacity: 1;
	filter: alpha(opacity=100);
}