@charset "utf-8";
/* CSS Document */

/** { font-size: 100.01%; }*/

html {
	height: 100%;
}

body {
  margin: 0;
	padding:0;
  font:62.5%/1.8 "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, serif;
	color:#786C62;
	background:#F3F1ED;
	}

#wrapper {
	display: table;
  overflow: hidden;
  table-layout: fixed;
	margin:0 auto;
	width:100%;
	max-width:1280px;
	font-size:1.6rem;
	}

a{
	color:#786C62;
}

a:hover{
	color:#666;
}

.container{ width:inherit; margin:0; padding:0; }
.row{ margin:0; }

/*------------------------------
   header 
------------------------------*/

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  padding: 10px 0 2px;
  background: #fff;
  -webkit-backface-visibility: hidden;
	}

/*------------------------------
   nav   
------------------------------*/

#menu-box {
	display:block;
  overflow: hidden;
  text-align: center;
	font-size:0;
	font-family:  'EB Garamond', EB Garamond, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, serif;
  letter-spacing: -4px;
  white-space: nowrap;
	}
	
  #menu-box ul {
		display:block;
    padding: 9px 0;
    margin: 0;
		}
  #menu-box li {
    display: inline-block;
    vertical-align: top;
    font-size: 2.4rem;
    line-height: 28px;
    letter-spacing: 0;
    white-space: normal;
		margin: 0 10px 0;
		width:100px;
		}
		
    #menu-box li a {
      display: block;
			}
      #menu-box li a:hover {
        text-decoration: none;
				}
				
				a.gnav{ display:block; margin:0 auto; width:80px; height:30px; }
				a.gnav2{ display:block; margin:0 auto; width:120px; height:30px; }
				a.gnav span.en, a.gnav2 span.en{ display:inline; text-align:center; }
				a.gnav:hover span.en, a.gnav2:hover span.en{ display:none; text-align:center; }
				a.gnav span.jp, a.gnav2 span.jp{ display:none;  text-align:center; }
				a.gnav:hover span.jp, a.gnav2:hover span.jp{ display:inline; font-size:1.6rem;  text-align:center;}

	#menu li.w90{
		width:70px;
	}
	#menu li.w120{
		width:120px;
	}
	
.visual {
	display:block;
	margin:60px 0 -40px 0;
	padding:0 ;
	width:1280px;
 	position: relative;
  overflow: hidden;
  text-align: center;
  font-size: 0;
	}
	.visual img{
		width:100%;
	}
  .visual h1 {
    font-size: 0;
		}



/*------------------------------
   main   
------------------------------*/

.main{ width:100%; }

h2{
	margin-top:0;
	font-size:2.4rem;
	line-height:3rem;
	color:#786C62;
  }

.access,
.facilities,
.guide,
.price,
.reservation,
.map {
	display:block;
	/* position:relative; */
	width:100%;
	margin:0;
	padding:40px 0;
}

.facilities,.attention{
	background:#7C6F63;
	color:#fff;
	padding-bottom:0;
}

.price{
	background:#4D453F;
	color:#fff;
}

.reservation{
	background:url(../img/index/r01.jpg) 0 0 no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	padding:50px 0 40px 80px;
	color:#111413;
	height:350px;
}

.map {
	padding-bottom:0;
}

.contact {
	margin:0;
	padding:30px 0;
	width:100%;
	background:#F3F1ED;
}

.access > .container img,
.price > .container img,
.map > .container img{
	display:block;
	float:left;
	padding-right:80px;
	width:800px;
}

.map > .container img{
	padding-right:60px;
}

.access .container .row,
.price .container .row,
.map .container .row{
	display:block;
	float:right;
	overflow:hidden;
	zoom:1;
	margin: 50px auto 0;
	padding-right:80px;
	width:480px;
}

.map .container .row{
	height:auto;
	padding-right:60px;
}

.price .container .row{
	padding-top:20px;
}

.facilities > .container{
	display:block;
	width:100%;
	padding:0 80px;
}

.attention{
	padding: 40px;
	text-align: center;
}

.facilities > .container .row{
	float:none;
	overflow:hidden;
	zoom:1;
	width:100%;
	text-align:center;
}

.facilities > .container img{
	width:360px;
}

.facilities > .container h2,
.attention > .container h2,
.price > .container h2{
	color:#fff;
}

.reservation h2{
	color:#222;
}

.reservation > .container .row{
	display:block;
	float:left;
	overflow:hidden;
	zoom:1;
	width:360px;
}

.guide > .container .row{
	float:none;
	text-align:center;
}

.guide > .container img{
	width:100%;
	padding-top:20px;
}

.map a.btn_link{
	display:block;
	margin:5px auto 30px;
	width:100%;
}

.map a.btn_link2{
	display:none;
}

ol{
	display:table;
	width:100%;
	margin-bottom:0;
	padding:0 0 20px;
	text-align:center;
	background:#7C6F63;
}

ol li, ol li.end{
	display:table-cell;
	float:left;
	padding:0 20px 0 0;
}

ol li.end{
	padding:0;
}

ol li img, ol li.end img{
	display:table-cell;
	clear:both;
	width:100%;
}

.btn_link, .btn_link2{
	display:block;
	margin:30px auto;
	font-size:2.2rem;
	font-family: 'EB Garamond', EB Garamond, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align:center;
	background:#fff;
	border:1px solid #4d433c;
	text-decoration:none;
	}


.facilities > .container .btn_link2,
.guide > .container .btn_link2,
.contact .btn_link2{
	margin:20px auto;
	width:30%;
}

a.btn_link span.en, a.btn_link2 span.en{ display:inline; }
a.btn_link:hover span.en, a.btn_link2:hover span.en{ display:none; }
a.btn_link span.jp, a.btn_link2 span.jp{ display:none; }
a.btn_link:hover span.jp, a.btn_link2:hover span.jp{ display:inline; font-size:1.6rem; }

a:hover.btn_link, a:hover.btn_link2{
	color:#fff;
	background:#4d433c;
	text-decoration:none;
	border:1px solid #fff;
}

#footer {
	margin:20px auto;
	font-size:1.4rem;
	font-family:  'EB Garamond', EB Garamond;
	text-align:center;
	}

#footer a{
	margin-left:20px;
	color:#999;
}


#pageTop {
  position: fixed;
  bottom: 50px;
  right: 20px;
}
 
#pageTop a {
  display: block;
  z-index: 999;
  padding: 0;
	width:0;
	height:0;
  border: 24px solid transparent;
	border-bottom: 36px solid #DCDCDC;
  text-decoration: none;
  text-align: center;
	opacity: 0.7;
}
 
#pageTop a:hover {
  text-decoration: none;
  opacity: 1.0;
}




@media screen and (min-width: 1081px) and (max-width:1279px){
	
	.container{
		margin:0;
		padding:0;
	}

	.visual, .visual img{
		width:100%;
	}
	
	.access,
	.facilities,
	.guide,
	.price,
	.reservation,
	.map {
		display:block;
		position:relative;
		width:100%;
		margin:0;
		padding:40px 0;
	}
	
	
	.contact {
		margin:0;
		padding:30px 0;
		width:100%;
		background:#F3F1ED;
	}
	
	.access > .container img,
	.price > .container img,
	.map > .container img{
		display:block;
		float:left;
		padding-right:40px;
		width:67%;
	}
	
	.map > .container img{
		padding-right:40px;
	}
	
	.access .container .row,
	.price .container .row,
	.map .container .row{
		display:block;
		float:right;
		margin: 5% 2% 0 0;
		padding-right:0;
		width:31%;
	}
	

	.map .container .row{
		display:block;
		margin:1% 1% 0 0;
		padding:0 0 20px 0;
	}

	ol{
		display:block;
		width:100%;
		margin:0 auto;
		padding:0 1%;
		text-align:center;
	}
	
	ol li, ol li.end{
		margin:0 auto;
		padding:1% 1% 0;
		width:33%;
		text-align:center;
	}
	
	
	ol li img, ol li.end img{
		clear:both;
	}
	
	.facilities > .container{
		padding:0 40px;
		width:100%;
	}


	.facilities > .container img{
		width:100%;
		text-align:center;
	}
	
	.facilities > .container h2,
	.price > .container h2{
		color:#fff;
	}

	.reservation > .container .row{
		display:block;
		float:left;
		overflow:hidden;
		zoom:1;
		margin: 3% 0 0 4%;
		width:31%;	
	}

	.btn_link, .btn_link2{
		margin:10px auto;
	}
	
}


@media screen and (min-width: 481px) and (max-width:768px){

#menu-box li {
    display: inline-block;
    vertical-align: top;
    font-size: 2.0rem;
    line-height: 24px;
    letter-spacing: 0;
    white-space: normal;
		margin: 0 6px 0;
		width:90px;
		}
		
    #menu-box li a {
      display: block;
			}
      #menu-box li a:hover {
        text-decoration: none;
				}
				
				a.gnav{ display:block; margin:0 auto; width:70px; height:30px; }
				a.gnav2{ display:block; margin:0 auto; width:110px; height:30px; }
				a.gnav span.en, a.gnav2 span.en{ display:inline; text-align:center; }
				a.gnav:hover span.en, a.gnav2:hover span.en{ display:none; text-align:center; }
				a.gnav span.jp, a.gnav2 span.jp{ display:none;  text-align:center; }
				a.gnav:hover span.jp, a.gnav2:hover span.jp{ display:inline; font-size:1.6rem;  text-align:center;}

	#menu li.w90{
		width:60px;
	}
	#menu li.w120{
		width:110px;
	}

.container{
	margin:0;
	padding:0;
}

.visual, .visual img{
		width:100%;
	}
	
	
.access > .container img,
.price > .container img{
	margin:0 auto;
	padding:0;
	width:60%;
}

.access .container .row,
.price .container .row{
	margin:0;
	padding:0 3% 0 0;
	width:38%;
}

.reservation{
	padding:20px 0;
	height:230px;
}

.reservation .container .row{
	margin:0;
	padding:0 0 0 3%;
	width:58%;
	height:200px;
}

.reservation .container .row .btn_link{
	float:left;
	width:280px;
}

.map{
	padding:40px 0 0;
}

.map .container img{
	padding:0;
	width:65%;
}

.map .container row{
	margin:0;
	padding:0;
	width:38%;
}

.map span{ display:inline-block; } /*　改行有効　*/
.map .br-sp { display:none; }　/*　改行無効　*/

.contact{
	margin:0;
	padding:0;
}

}



@media screen and (max-width: 480px) {
	
	p{ margin:0; }
	
	#header{
		padding-bottom:20px;
	}
	
	#menu-box {
		display:none;  
	}
	
	#menu-box{
		display:block;
		width:100%;
		max-width:480px;
	}
	
	#menu li.w90{
		width:100%;
	}
	#menu li.w120{
		width:100%;
	}
	
	#menu-box ul{
		display:none;
		margin-top:4%;
		padding:0;
		border-top:1px solid #ccc;
	}
	
	#menu-box li {
		display:block;
		margin:0;
		width:98%;
		padding-left:2%;
		text-align:left;
		font-family:  'EB Garamond', EB Garamond, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		font-size:2.0rem;
		letter-spacing:0;
		border-bottom:1px solid #ccc;
	}
	
	#menu-box #toggle {
		display:block;
		}
	
	#menu-box #toggle #menu ul{
		margin:0;
		padding:0;
	}
	
  #menu-box #toggle #menu li {
    display: block;
    font-size: 2.4rem;
		}
    #menu-box #toggle #menu li a {
      display: block;
			padding-bottom:4%;
      color: #635C73;
			}
      #menu-box #toggle #menu li a:hover {
        text-decoration: none;
        color: #8d81ac;
				}
	

	#menu {
		display: none;
		margin:0;
		padding:0;
	}
	
	#menu li {
		margin:0;
		padding-left:12%;
		width: 100%;
		background:url(../img/i_link.png) 5% 50% no-repeat;
		background-size:4%;
	}
	
	#menu li a {
	display:block;
	padding: 3% 0 3% 0 ;
	background-color: #fff;
	color: #000;
	text-decoration: none;
	}
	
	a.gnav, a.gnav2{
		display:none;
	}
	
	#toggle {
		display: block;
		position: relative;
		width: 100%;
		margin:0;
	}
	#toggle a{
		display: block;
		position: relative;
		padding: 15px 0 15px;
		color:#FFF;
		text-decoration: none;
	}
	#toggle:before {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 20px;
		width: 30px;
		height: 25px;
		margin-top: -10px;
		background: #7C6F63;
	}
	#toggle a:before, #toggle a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 20px;
		width: 30px;
		height: 5px;
		background: #fff;
	}
	#toggle a:before {
		margin-top:-5px;
	}
	#toggle a:after {
		margin-top: 5px;
	}
	
	a.gnav span.en, a.gnav2 span.en{
		float:left;
	}
	
	a.gnav, a.gnav2{ width:auto; height:auto; }
	a.gnav span.jp, a.gnav2 span.jp{
		padding-left:30%;
		display:inherit;
		font-size:1.4rem;
		color:#999;
	}
	
	.row{
		padding:0;
	}
	
	.access,
	.facilities,
	.guide,
	.price,
	.map {
		display:block;
		table-layout:fixed;
		width:100%;
		padding:5% 0;
		background:#F3F1ED;
	}
	
	.facilities{
		background:#7C6F63;
		color:#fff;
		padding-bottom:0;
	}
	
	.price{
		display:block;
		background:#4D453F;
		color:#fff;
	}
	
	.guide{
		display:block;
	}
	
	.reservation {
		width:100%;
		padding:20px 0 0;
		display:block;
		color:#000;
		background:#D0C1B4 url(../img/index/r01_sp.jpg) 0 0 no-repeat;
		-moz-background-size:100% auto;
		background-size:100% auto;
		height:240px;
	}

	
	.contact {
		width:100%;
		padding:5%;
		}

	h2{
		display:block;
		font-size:1.8rem;
		line-height:2.0rem;
		padding:0;
		}
	
	.access > .container,
	.facilities > .container,
	.guide > .container,
	.price > .container{
		display:block;
		width:100%;
		padding:0;
	}
	
	.facilities > .container{
		display:table-cell;
		top:0;
		margin:0 auto;
	}
	
	.facilities > .container h2,
	.price > .container h2{
		display:block;
		color:#fff;
	}
	
	h2{ text-align:center; }
	
	.reservation h2, .reservation p{
		margin:0;
		text-align:left;
		line-height:2.0rem;
		width:55%;
	}

	.reservation h2{
		line-height:2.4rem;
		margin-bottom:2%;
		}
	

	.price > .container img{
		width:100%;
		padding:0 0 4% 0;
	}
	
	.reservation  > .container{
		display:block;
	}
	
	.access > .container .row,
	.facilities > .container .row,
	.guide > .container .row,
	.price > .container .row,
	.reservation > .container .row{
		display:block;
		font-size:1.4rem;
		margin:0 auto;
		width:100%;
		padding:0 5%;
	}
	
	.price > .container .row,
	.reservation > .container .row{
		width:100%;
		margin:0 auto;
		min-height:170px;
	}
	
	.reservation > .container .row{
		display:block;
		margin:0;
		padding:0 4%;
	}

	.facilities > .container .row{
		margin:0 auto;
		min-height:260px;
	}
	
	.facilities > .container img{
		margin:0 auto;
		width:90%;
	}
	
	ol{
		padding:0;
	}
	
	ol li, 	ol li.end{
		display:block;
		clear:both;
		float:none;
		width:100%;
		padding:0;
	}
	
	.facilities span, .guide span, .reservation span{ display:inline-block; } /*　改行有効　*/
	.br-sp { display:none; }　/*　改行無効　*/
	
	.facilities > .container .row,
	.guide > .container .row{
		float:none;
		text-align:center;
		margin:0 auto;
	}

	.guide > .container .row{
		min-height:280px;
	}
	
	.map > .container img{
		clear:both;
		display:block;
		float:none;
		margin:0 5%;
		text-align:center;
		width:100%;
	}
	
	.map > .container .row{
		margin:5% 5% 0;
		padding:0;
		float:none;
		width:90%;
		font-size:1.6rem;
	}
	
	.map a.btn_link2{
		clear:both;
		margin:5%;
		display:block;
		font-size:2.0rem;
		text-align:center;
	}
	
	.access > .container img,
	.guide > .container img{
		width:100%;
		margin-bottom:20px;
		padding:0;
	}
	
	.facilities span,
	.guide span{
		text-align:left;
	}

	.facilities > .container .btn_link2,
	.guide > .container .btn_link2,
	.contact .btn_link2{
		width:100%;
	}
	
	.contact .btn_link2{
		display:block;
		margin:5% 0 5%;
	}
		
	.btn_link, .btn_link2{
		display:block;
		margin:20px 5%;
		padding:0;
	}
	
	#pageTop {
  position: fixed;
	width:100%;
  bottom: 40px;
  left:0;
	}
	 
	#pageTop a {
		margin:0 auto;
		border: 18px solid transparent;
		border-bottom: 30px solid #DCDCDC;
	}
	
}

@media screen and (max-width: 414px) and (max-width: 479px) {
	.visual, .visual img{
		width:100%;
	}
	
}