@charset "utf-8";



/*=============================================================================
   Layout
=============================================================================*/
.container, .content, .inner {	clear: both;	height: auto;	}
.container:after, .content:after, .inner:after{content: ""; display: block; clear: both;}
.container {
	width: 1000px;
	margin: 0px auto;
	position: relative;
	}
.content {
	width: 100%;
	margin-bottom:50px;
	position: relative;
	}
.inner {
	zoom:1;
	padding: 0px 20px;
	}

/* Header
-----------------------------------------------------------------------------*/
#header_wrap {     width: 100%;
    height: 100%;
    margin: 0 auto;

    position: relative;
}
	#header_wrap:after {
	content:"";
	display:block;

	height: 100%;
	width: 100%;
	position: absolute;
	}
	
	

#header-m {     width: 100%;
    height: 460px;
    margin: 0 auto;

    position: relative;
}
	#header-m:after {
	content:"";
	display:block;

	height: 10px;
	width: 100%;
	position: absolute;
	}
	
	
	
#index #header {
	background: url(../img/hd-bg.png) ;
	height:auto;
	width: 100%;
	position:relative;
	top:0;
	z-index:500;
	}	
	
	
#header {
	
	height: 80px;
	width: 100%;
	position:relative;
	top:0;
	z-index:498;
	}

	#header .container {
	height: 0px;
	width: 100%;
	margin: 0px auto;
	position:absolute;
  	z-index:497;
	}
/* Sink */
.hvr-sink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
}	

.menu-hd{
	width:100%;
	background: url(../img/hd.png) repeat-x top center;
	height:327px;
}
	
#contents .container {
	height: 0px;
	width: 1000px;
	margin: 0px auto 0;
  	z-index:497;
	}
	div#plan-bnr {
	float: right;
	height: auto;
	width: auto;
	margin:0 24px 0 0 ;
	background: url(../img/plan-bn-on.png);
	}


	
.logo{
	float:left;
	height: 69px;
	width: 250px;
	margin:31px 0 0 0 ;
	}
.hd-box{
	float:right;
	width:570px;
	margin:20px 0 28px 0 ;
}
.text-hd{
	text-align:right;
	font-weight:bold;
	font-size:13px;
	color:#572109;
	padding:16px 0 0 0 ;
}
.hd-box .tel{
	float:left;
	width:248px;
}
.hd-box .menu{
	float:left;
	padding:23px 0 0 30px ;
}




	/* Sink */
.hvr-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-right:hover, .hvr-right:focus, .hvr-right:active {
  -webkit-transform: translateX(15px);
  transform: translateX(15px);
}	
	
	
.ma{
	top:0px;
	position:relative;
width:1224px;
margin:0 auto;
z-index:-2;
}

	  
.ma_b{
	width:1107px;
	margin:0 auto ;
	position:relative;
}




div#header_bnr {
	height: auto;
	width: auto;
	margin:33px 0 0 77px ;
	}



div#header_bnr_plan {
	height:  0;
	width:0;
	position:relative;
	left:121px;
	bottom:200px;
	z-index:500;
	}


#ap {
	margin: 0px auto;
	width: 100%;
	height:243px;
	clear: both;
		background: url(../img/ap-bg.png)repeat-x center top;
	}



@keyframes ap_bnr01 {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.ap_bnr01 {
	float:left;
	height: auto;
	width: 279px;
	margin:660px 0px 0 310px ;
	background:none;

}




.ap_bnr02 {
		float:left;
	height: auto;
	width: 279px;
	margin:-209px 0px 0 590px ;
	}

.ap_bnr03 {
		float:left;
	height: auto;
	width: 279px;
	margin:-209px 0px 0 884px ;
	}


@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.hvr-pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  }





/* Grow Rotate */
.hvr-grow-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}




/* Navigatioon
-----------------------------------------------------------------------------*/
/* Main nav *****/



#nav {
	float:left;
	margin: ;
	width: 720px;
	clear: both;
	margin:-179px 0 0 0 ;
	}
	#nav ul{
		width:750px;
			margin:0 auto 0;
		background: url(../img/nav-bg.png) no-repeat;
	}
	#nav li {
		float:left;
	}



#nav01{ background: url(../img/menu01-on.png) no-repeat; margin:0 0 0 20px ;}
#nav02{ background: url(../img/menu02-on.png) no-repeat; margin:28px 0 0 31px ;}
#nav03{ background: url(../img/menu03-on.png) no-repeat; margin:0 0 0 31px ;}
#nav04{ background: url(../img/menu04-on.png) no-repeat; margin:28px 0 0 31px;}
#nav05{ background: url(../img/menu05-on.png) no-repeat; margin:0 0 0 31px ;}



.new {
	height: 248px;
	width: 212px;
	margin:138px 0 0 71px;
	padding:45px 0 0 6px;
	float:none;
	background: url(../img/blog-bg.png) no-repeat; 
	}


.new-m {
	height: 289px;
	width: 212px;
	margin:15px 0 0 71px;
	padding:136px 0 0 0;
	float:none;
	background: url(../img/menu-img.png) no-repeat center top;
	}
	
	

#header .container-index {
	height: 869px;
	width: 347px;
	margin: 12px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/index-menu.png) no-repeat center top;
	}

#header .container-onsen {
	height: 3721px;
	width: 347px;
	margin: 14px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/menu-bg.png) repeat-y center;
	}

#header .container-ryori {
	height: 2896px;
	width: 347px;
	margin: 14px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/menu-bg.png) repeat-y center;
	}

#header .container-kannai {
	height: 3246px;
	width: 347px;
	margin: 14px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/menu-bg.png) repeat-y center;
	}

#header .container-meguri {
	height: 5896px;
	width: 347px;
	margin: 14px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/menu-bg.png) repeat-y center;
	}

#header .container-yoyaku {
	height: 2196px;
	width: 347px;
	margin: 14px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/menu-bg.png) repeat-y center;
	}

#header .container-access {
	height: 2396px;
	width: 347px;
	margin: 14px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/menu-bg.png) repeat-y center;
	}
	
#header .container-new {
	height: 996px;
	width: 347px;
	margin: 14px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/menu-bg.png) repeat-y center;
	}	

	#header .container-map {
	height: 996px;
	width: 347px;
	margin: 14px 0 0 0 ;
	position:absolute;
	left: 0;
  right: 0;
  		background: url(../img/menu-bg.png) repeat-y center;
	}




#nav_02 {
	margin: 0px auto;
	width: 100%;
	height:82px;
	clear: both;
		background: url(../img/menu_bg02.png) no-repeat center top;
	}
	#nav_02 ul{
		width:620px;
		margin:0 auto;
		padding:16px 0 0 0px;
		height:71px;
	}
	#nav_02 li {
		width:149px;
	height: 36px;
	float: left;
	}


#nav07{
		margin:0 0 0 78px;
		 background: url(../img/menu_access_on.png) no-repeat;}

#nav_02 ul li a {
	display: block;
}
#nav_02 ul li a:hover img {
	visibility: hidden;
}
#nav_02 ul li.on a img {
	visibility: hidden;
}



/* main_img
-----------------------------------------------------------------------------*/
#mainVisual {
width: 100%;
height: 100%;
	position: relative;
	
	}
#mainVisual .slash{ margin:0; padding:0; position:absolute;background:url(../img/movie_bg.png) repeat; width:100%; height:100vh; z-index:8;}
#mainVisual .base01{ top:0; left:0;position:absolute;background:url(../img/h_base01.png) repeat; width:100%; height:270px; z-index:7;}
#mainVisual .base02{ bottom:0; left:0;position:absolute;background:url(../img/h_base02.png) repeat; width:100%; height:270px; z-index:7;}
#mainVisual:after {
	content: "";
	display: block;
	clear: both;
	width: 100%;
	height: 90.88%;
	background: url(../img/top/top_kvtxt.png) no-repeat right top;
	background-size:cover;
	position: absolute;
	right: 0px;
	top: 0px;
	}

#index video {
    min-width: 1200px;
    width: 100%;
    opacity: 1;
    left: 0;
    top: 0;
}	
	
	
#main_movie {
	height: 580px;
	width: 1200px;
	margin:-13px auto 0;
	}
#main_movie02 {
	height: 364px;
	width: 1200px;
	margin:-13px auto 0;
	}	
#main_img {
	height:364px;
	width: 1200px;
	margin:-13px auto 0;
	}
	
.img-bottom{
	width:100%;
	height:9px;
	background: url(../img/img-bt.png)no-repeat center top;
}

#main_txt {
	height: 250px;
	width: 800px;
	position: absolute;
	left: 50%;
	margin-left: -500px;
	bottom: 0px;
	z-index: 500;
	}
#title_img {
	height: 500px;
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size:content;
	}


/* Contents
-----------------------------------------------------------------------------*/
div#contents {
	margin: -4px auto 0;
	width: 100%;
	padding: 0px;
	}
	
div#contents-m {
	margin: 0 auto ;
	width: 100%;
	padding: 0px;
	}	
	
.main-c{
	width:923px;
	margin:40px auto 59px;
}
.main-c02{
	width:925px;
	margin:40px auto 59px;
}	

	div#contents:after{content: ""; display: block; clear: both;}

/* Footer
-----------------------------------------------------------------------------*/

.f-menu{
	background: url(../img/topup-bg.png) repeat-x;
	width:100%;
	height:122px;
}
.f-menu .in{
	width:923px;
	margin:0 auto;
}


.pagetop {
	float:right;
	padding:0 7px 0 0;
}


#fo-nav {
	margin:63px 0 0 0 ;
	float:left;
	clear: both;

	}
	#fo-nav ul{
		float:left;
		width:175px;
	}
	#fo-nav li {
			padding:0px 0 7px 0;
	height: 16px;
	}







div#footer {
	margin: 0px auto;
	width: 100%;
	height: 173px;
	background: url(../img/fo-bg.png) repeat-x;
	}
.fo-container {
		width:1112px;
		height:138px;
		margin:0 auto;
	}
#footer_right {
	height: auto;
	width: 866px;
	float:right;
	color:#6a3426;
	padding:0 25px 0 0 ;
	}

.fo-l{
	float:left;
	width:307px;
	margin:42px 0 0 0 ;
	color:#863c00;
	line-height:20px;
}

.fo-r{
	float:right;
	width:317px;
	margin:42px 0 0 0 ;
	font-size:12px;
	color:#863c00;
	line-height:16px;
}

.fo-r .text{
	margin:5px 0 0 0;
}


#copyright {
	margin: 7px auto 0;
	width: 300px;
	text-align:center;
	font-size: 12px;
	font-weight:bold;
	color:#863c00;
	}

/*** QR
*********************************************************************/
.qr{
	width: 150px;
	font-size: 11px;
	text-align: center;
	margin: 20px auto 0;
	z-index: 30;
}
.qr img{
	border: solid 1px #333;
}
.qr p{
	text-align: center;
	margin-top: 5px;
}
.qr a{
	color: #863c00;
	text-decoration: none;
}