@charset "utf-8";

/* ---------------------------------------------------------------------------------
base */

*{ box-sizing: border-box;　max-height: 100%;}


@media(max-width:750px){
	
body{ font-size:160%; }

}



img{ vertical-align:bottom;-ms-interpolation-mode: bicubic;}

a{ color:#da7601;text-decoration: none;}
a:visited{ color:#da7601;text-decoration: none;}
a:active{ color:#1fa1ad;text-decoration:none;}
a:hover{ color:#1fa1ad;text-decoration:none;}

html,body{ height:100%; }

body{ background:#fff; color:#333;
font-family: 'M PLUS 1p',"メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka,  sans-serif;
}
#wrapper{ height:100%;}

@media(max-width:750px){


}


/* ---------------------------------------------------------------------------------
common */




a
*{ box-sizing:border-box;}
p{font-size:90%; line-height: 1.5em;max-height:99999999px;}


a > img{ width:100%;}
.imgbox img{ width:100%;}



.fadein {  transform: translateY(20px);  opacity : 0;  transition: all 0.7s  ease-out;}
.faderight {  transform: translateX(20px);  opacity : 0;  transition: all 0.7s  ease-out;}

.ease__float{animation:float 4.4s ease-out infinite;transform-origin:50% 50%}

.arwBtn{ display:block; color:#fff; font-weight:bold; background:hsla(0,0%,0%,0.48);border:none;
 font-size:16px; text-align:center;padding:15px; position:relative; margin-left:auto; margin-right:auto;

/* box-shadow */
box-shadow:-2px 0px 0px -50px #000;

/* border-radius */
border-radius:8px;

}

.arwBtn::after{
	content:"";
	display:block;
	width:8px;
	height:8px;
	border-top:2px solid #000 !important;
	border-right:2px solid #000 !important;
    border:none;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:20px;
	top:50%;
	margin-top:-4px;
}

.arwBtn:hover{ text-decoration:none; background-color:#000;}




@media(max-width:750px){



.arwBtn{

display:block; color:#fff; font-weight:bold; background:hsla(0,0%,0%,0.5);
font-size:22px; text-align:center;padding:20px; position:relative; margin-left:auto; margin-right:auto;

/* box-shadow */
box-shadow:-2px 0px 0px -50px #75dc90;

/* border-radius */
border-radius:7px;

}

.arwBtn::after{
	content:"";
	display: block;
	width:16px;
	height:16px;
	border-top:4px solid #fff;
	border-right:4px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:20px;
	top:50%;
	margin-top:-10px;
}

.arwBtn:hover{ text-decoration:none; background:hsla(0,0%,0%,0.9);}




}


h1 img,
h2 img,
h3 img,
p img,
span img,
a img{ width: 100%;}


#contents{padding-top:157px;}


.sec h2{ width: 500px; margin: 0 auto 50px auto;}
#Intro h2{ width: 500px; margin: 0 auto 50px auto;}
#gallery h2{ width: 500px; margin: 0 auto 50px auto;}
#instagram h2{ width: 500px; margin: 0 auto 50px auto;}
.otherArea h2{width: 500px; margin: 0 auto 50px auto;}

.otherArea >.inner{width: 700px; margin:0 auto}

@media(max-width:750px){

.sec h2{ width: 700px; }
#Intro h2{ width: 700px; }
.otherArea h2{ width: 700px; }

#contents{padding-top:100px;}

}



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

#headerBlock{ width: 100%; position: absolute; height:157px; overflow: hidden;}

#gHeader{height: 112px; background: url(../images/common/headerBG.png); background-size:100px;}
#gHeader >.inner{ width: 1000px; margin: 0 auto; position: relative;}

#gHeader >.inner h1{ position: absolute; font-weight: normal; font-size: 12px; top: 3px;left:96px; color: #aaa}
#gHeader >.inner p{ position: absolute;}
#gHeader .logo{ width:330px;   top:23px; left: 0;}
#gHeader .contact{ width: 257px;top: 43px; left: 509px;}
#gHeader .twitter{ width: 35px; top:53px;  left: 781px;}
#gHeader .instagram{ width: 35px; top: 53px; left:825px;}
#gHeader .reserve{ width: 130px; top: 48px; left: 870px; }

#gHeader >.inner ul{ width: 325px; height: 32px; position: absolute; display: block; right:0; 
background: url(../images/common/otherMenuBg.png) no-repeat left top;text-align: center;
background-size: cover;}
#gHeader >.inner ul li{color: #666; display: inline-block;font-size: 12px; padding-top: 10px; line-height: 1em;}
#gHeader >.inner ul li a{ color: #666;}
#gHeader >.inner ul li a:hover{ color: #222; position: relative; top:0.5px;}



@media(max-width:750px){

#headerBlock{ height:100px; position: fixed; z-index: 90;}
#gHeader >.inner{ width: 100%; }
#gHeader >.inner h1{ text-indent: 100%;white-space: nowrap;overflow: hidden;}

#gHeader .logo{ width: 287px;   top:22px; left: 20px;}
#gHeader .contact{display: none;}
#gHeader .twitter{display: none;}
#gHeader .instagram{ display: none;}
#gHeader .reserve{ width: 180px; top: 20px; left: 450px; }
    #gHeader >.inner ul{display: none;}
}



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


nav{ height: 45px; background:url(../images/common/nav_bg.png) repeat-x left top; background-size:auto 45px;}

nav >.inner{ width: 1000px; margin: 0 auto;}

nav >.inner ul li{ height:43px; float:left; }
nav >.inner ul li.nav00 a{width:49px;}
nav >.inner ul li.nav01 a{width:119px;}
nav >.inner ul li.nav02 a{width:119px;}
nav >.inner ul li.nav03 a{width:119px;}
nav >.inner ul li.nav04 a{width:119px;}
nav >.inner ul li.nav05 a{width:119px;}
nav >.inner ul li.nav06 a{width:119px;}
nav >.inner ul li.nav07 a{width:119px;}
nav >.inner ul li.nav08 a{width:118px;}

nav >.inner ul li a{ display: block; height: 100%; width:100%; text-indent: 100%;white-space: nowrap;overflow: hidden;}
nav >.inner ul li.nav00 a{background:url(../images/common/nav_00.png) no-repeat left top;background-size:auto 43px; width:49px;}
nav >.inner ul li.nav01 a{background:url(../images/common/nav_01.png) no-repeat left top;background-size:auto 43px; width:119px;}
nav >.inner ul li.nav02 a{background:url(../images/common/nav_02.png) no-repeat left top;background-size:auto 43px; width:119px;}
nav >.inner ul li.nav03 a{background:url(../images/common/nav_03.png) no-repeat left top;background-size:auto 43px; width:119px;}
nav >.inner ul li.nav04 a{background:url(../images/common/nav_04a.png) no-repeat left top;background-size:auto 43px; width:119px;}
nav >.inner ul li.nav05 a{background:url(../images/common/nav_05.png) no-repeat left top;background-size:auto 43px; width:119px;}
nav >.inner ul li.nav06 a{background:url(../images/common/nav_06.png) no-repeat left top;background-size:auto 43px; width:119px;}
nav >.inner ul li.nav07 a{background:url(../images/common/nav_07.png) no-repeat left top;background-size:auto 43px; width:119px;}
nav >.inner ul li.nav08 a{background:url(../images/common/nav_08.png) no-repeat left top;background-size:auto 43px; width:118px;}

nav >.inner ul li a:hover{opacity: 0.6;}

@media(max-width:750px){

    nav{display: none;}

}




/* ---------------------------------------------------------------------------------
moreBtn */

p.moreBtn{padding: 0 0 80px; width: auto;text-align:center;  }
p.moreBtn a{
    display: inline-block;
padding: 10px 60px;
border-radius:7px;
border:2px solid #000000;
{borderWidth:2,borderColor:"#000000",borderRadius:7}   
    
}

p.moreBtn a:hover{background: #ccc;}

p.moreBtn a span{ vertical-align: middle; line-height: 1em; color: #000;}
p.moreBtn a span:before{
 content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 28px;/*画像の幅*/
  height: 19px;/*画像の高さ*/
    position: relative;
  background-image: url(../images/common/arrow.png);
  background-repeat: no-repeat;
  background-size: 19px 19px;
    top:-2px;
  vertical-align: middle;
}


@media(max-width:750px){

p.moreBtn{padding: 100px 0; width: auto;text-align:center;  }
p.moreBtn a{
padding: 30px 100px;
border-radius:7px;
border:3px solid #000000;
    
{borderWidth:2,borderColor:"#000000",borderRadius:7}   
    
}

p.moreBtn a:hover{background: #ccc;}

p.moreBtn a span{ vertical-align: middle; line-height: 1em; color: #000;
    font-size: 34px;}
p.moreBtn a span:before{
 content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 49px;/*画像の幅*/
  height: 38px;/*画像の高さ*/
    position: relative;
  background-image: url(../images/common/arrow.png);
  background-repeat: no-repeat;
  background-size: 38px 38px;
    top:-4px;
  vertical-align: middle;
}


}





p.moreBtn.white a{
border:2px solid #fff;
{borderWidth:2,borderColor:"#fff",borderRadius:7}   
    
}

p.moreBtn.white a span{ color: #fff !important;}
p.moreBtn.white a:hover{background: #822b20;}

p.moreBtn.white a span{ vertical-align: middle; line-height: 1em; color: #000;}
p.moreBtn.white a span:before{
  background-image: url(../images/common/arrow2.png);
}


@media(max-width:750px){

p.moreBtn.white a{
padding: 30px 100px;
border-radius:7px;
border:3px solid #fff;
    
{borderWidth:2,borderColor:"#fff",borderRadius:7}   
    
}

p.moreBtn.white a:hover{background: #822b20;}

p.moreBtn.white a span{ vertical-align: middle; line-height: 1em; color: #fff;
    font-size: 34px;}
p.moreBtn.white a span:before{
  background-image: url(../images/common/arrow2.png);
}


}

/* ---------------------------------------------------------------------------------
Archive */




/* ---------------------------------------------------------------------------------
reserve */


#reserve{ padding:75px 0 100px; background: #f5f5f5;}
#reserve >.inner{width: 600px; margin: 0 auto;}

#reserve p.intro{line-height: 2em; margin-bottom: 2em;}

#reserve p.btn{text-align: center; display: block; margin: 0 auto;}
#reserve p.btn img{width: 300px;}

@media(min-width:751px){
#reserve p.intro{text-align: center;}
#reserve p.btn{text-align: center;}
}


@media(max-width:750px){
#reserve >.inner{width: auto; margin: 0 auto;}
#reserve p.intro{text-align: center;}
#reserve p.btn{text-align: center; width: 80%;}
#reserve p.btn img{width:100%;}

}





/* ---------------------------------------------------------------------------------
goto */


#reserve2{ padding:75px 0 100px; background: #f5f5f5;}
#reserve2 >.inner{width: 800px; margin: 0 auto;}

.goto{}
.goto .h3box{ width: auto; background:#1babde; display: table;}
.goto .h3box h3{ width: 30%; display: table-cell; }
.goto .h3box p{ color: #fff; display: table-cell; vertical-align: middle;}

.gotoCont{ background: #fff;}
.gotoCont >.inner{padding: 20px}

.gotoCont ul{ margin-bottom: 20px;}
.gotoCont ul li{ width:32%; margin-right: 2%; float: left;}

.gotoCont ul:before,
.gotoCont ul:after {content: " ";display:table;}
.gotoCont ul:after {clear: both;}
.gotoCont ul{*zoom: 1;}

.goto35{ padding-bottom: 20px; border-bottom: 1px solid #999; margin-bottom: 20px;}

.tabi{ display: table;margin-bottom: 20px;}
.tabi a{display: table-cell; vertical-align: middle; width: 30%;}
.tabi p{display: table-cell; vertical-align: middle; padding-left: 20px;}

.gotoContact{border-top:1px solid #999; padding: 50px;}
.gotoContact h4{text-align: center; margin-bottom: 30px;}
.gotoContact h4 img{width: 270px;}
.gotoContact p{ text-align: center;}
.gotoContact p a{ color: #666 !important; font-size: 250%; font-weight: bold;}
.gotoContact p span{font-size: 120%; display: block; padding-top: 1em;}

@media(min-width:751px){
	#subPage section#reserve2.sec >.inner {
    width: 800px;
    margin: 0 auto;}

#subPage section#reserve2.sec .goto .h3box h3 {
    width: 30%;
    display: table-cell;
	text-align: center;
}

.gotoCont ul li:last-child{ margin-right: 0;}
}


@media(max-width:750px){
#reserve2 >.inner{width: auto; margin: 0 auto;}
	#subPage section#reserve2.sec >.inner {
    width: auto;}
#subPage section#reserve2.sec .goto .h3box h3 {
    width: 90%;
    display: block;
	margin-bottom: 0;
	text-align: center;
}
	
.goto{}
.goto .h3box{ width: auto; background:#1babde; display: block;}
.goto .h3box h3{ width: 100%; display: block; text-align: center;}
.goto .h3box h3 img{width: 70%;}
.goto .h3box p{ color: #fff; display: block; vertical-align: middle;padding: 0 1.5em 1.5em; font-size: 110%;}

.gotoCont{ background: #fff;}
.gotoCont >.inner{padding: 40px}

.gotoCont ul{ margin-bottom: 20px;}
.gotoCont ul li{ width:48%; margin-right: 4%; float: left;margin-bottom: 20px;}
.gotoCont ul li:nth-child(2n){ margin-right: 0;}

.goto35{ padding-bottom: 40px; border-bottom: 1px solid #999; margin-bottom: 40px;}
.tabi{ display: block;}
.tabi a{display: block; vertical-align: middle; width: 80%; margin: 0 auto 30px;}
.tabi p{display: block; vertical-align: middle; padding-left: 0; font-size: 110%;} 

.gotoContact h4 img{width: 80%;margin-bottom: 1em;}
.gotoContact p{ text-align: center;}
.gotoContact p a{ color: #666 !important; font-size: 220%; font-weight: bold;}
.gotoContact p span{font-size: 140%; display: block; padding-top: 1em;}
}









/* ---------------------------------------------------------------------------------
footer */

footer{ }

#ft01{background: #e2e2e2; padding: 1.3em;}
#ft02{background: #1fa1ad; padding:40px;}
#ft03{background: #232323; padding: 1.65em; color: #ccc;}
#ft01 >.inner{ width: 1000px; margin: 0 auto;}
#ft02 >.inner{ width: 1000px; margin: 0 auto; text-align: center;}
#ft03 >.inner{ width: 1000px; margin: 0 auto;}


#ft01 a{ color: #333; font-size: 14px;}
#ft01 a:hover{ color: #da7601;}
#ft02 img{width: 250px; font-size: 14px;}


@media(max-width:750px){

    #ft01 {display: none;}
    #ft02{border-top: 15px solid #e2e2e2;}
#ft01 >.inner{ width: auto; margin: 0 auto;}
#ft02 >.inner{ width: auto; margin: 0 auto; text-align: center;}
#ft03 >.inner{ width: auto; margin: 0 auto;}

}


.zeroMargin{ margin: 0 !important;padding:0 !important;}

.clear{ clear:both;}
.tac{ text-align:center !important;}

@media(min-width:751px){
.sp{ display:none !important;}
} /* Responsive End */

@media(max-width:750px){
.pc{ display:none !important; }
} /* Responsive End */

@media(max-width:750px){
.tac_pc{ text-align:left !important;}
.tac_sp{ text-align:center !important;}
}

@media(min-width:751px){
.tac_pc{ text-align:center !important;}
.tac_sp{ text-align:left !important;}
}