@charset "UTF-8";

/* 固定==============================*/


html {font-size: 62.5%;}
body { overflow-y:scroll; padding: 0px; margin: 0px;
/*-webkit-text-size-adjust: 100%;  /*iPhoneの自動文字サイズ調整を解除*/ }*/
/*clearfix*/
div.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; min-height: 1px;} 

/*リセット */
/** { margin:0px; padding:0px; }*/
h1, h2, h3, h4, h5, h6 { clear: both; font-weight: normal; }    
ol, ul, li , dt ,dl, dd{ list-style: none; padding: 0px}
p,img,li { border:none; outline:none; margin:0px; padding:0px;}
img { background-repeat: no-repeat; background-size: contain; -ms-interpolation-mode:bicubic; max-width: 100%; height: auto; vertical-align: bottom}
address { font-style: normal; text-align: right; font-size: 1.2rem; float: right; clear: both; padding: 35px 0px 5px 0px; }
em { font-style: normal; font-weight: bold; display: inline; }
textarea { font-size: 100%; } /* area内文字sizeのブラウザ間での差異解除 */
object, embed { vertical-align: top;  }  /* flashの隙間をなくす */
strong { font-weight: bold; }
table , tr{ border-collapse: collapse; border-style: none; }
th  { background: #eee; white-space: nowrap }
th,td { display: table-cell; text-align: left; vertical-align: top;}
    table.noborder th, table.noborder td, .noborder { border-style: none; }
    table.nopadding th, table.nopadding td { margin: 0px; padding: 0px; }
    table.onborder th, table.onborder td{border: 1px solid #ccc;}
    table.onpadding5px th, table.onpadding5px td{ padding:5px}
dt { clear:both; float:left; }
dd { float:left;}
label:hover { cursor:pointer }

/*要素のpaddingとborderの幅が要素のwidthに影響しない*/
*, *:before, *:after { box-sizing: border-box; }

/* HTML5 setup ----------------------------------------------- */
header, article, aside, canvas, details, figcaption, figure, footer, hgroup, menu, nav, section{ display: block; position: relative; }
    
/* input設定 ----------------------------------------------- */
input[type='text'],textarea, input[type='password'], input[type='email'] { border: solid 1px #ccc; font-size:1.5rem; padding:5px; margin-bottom: 3px }
input[type='radio'] { margin-right: 5px }
select { margin-bottom: 2px; border: solid 1px #aaa; }
button { padding: 0px; margin: 0px; line-height: 2rem }

/* ボタン ----------------------------------------------- */
input[type='image'] { border: none;}
.buttonSubmitStyle { white-space:normal; padding:10px 45px; font-size:17px; border-radius:10px; cursor:pointer; color:#fff; margin: 10px 0px; line-height: 2.3rem}
.buttonSubmitStyleSmall { padding: 0px 10px; height: 30px }

.buttonColorBlue {
	border:1px solid #2985cc; 
	background: #449fe5; /* Old browsers */
	background: linear-gradient(to bottom, #449fe5 1%,#2b7cd8 100%); /* W3C */
}
.buttonColorBlue:hover { background:#449fe5}
.buttonColorBlue:active { background:#1165a6}


.buttonColorGray {
	border:1px solid #b5b5b5; 
	background: #999; /* Old browsers */
    background: linear-gradient(to bottom, #ccc 1%,#888 100%); /* W3C */
}
.buttonColorGray:hover { background:#bbb}
.buttonColorGray:active { background:#999}

@media screen and (min-width: 600px) {
	select { height: 46px; font-size: 18px; line-height: 2rem; color: #666;
		-webkit-appearance:list-menu;
		-moz-appearance:list-menu;
		appearance:list-menu;
		background: linear-gradient(to bottom, #fafafa 0%,#fff 100%); border: 1px solid #bbb; border-radius: 5px
	}
}


/*汎用設定==============================*/
.alignL { text-align: left; }
.alignC { text-align: center; }
.alignR { text-align: right; }
br.smaphoneOnly { display: none }
.center {text-align: center;}
.clearBoth, .clearboth { clear: both; height: 1px }
.error { color:red; background:#ffe5e5;}
.floatLeft {float: left;}
.floatRight {float: right;}
.hidden{ display: none; }
.indentHalf { margin-left: 1.5rem; }
.indentOne { margin-left: 3.0rem; }
.marginUnderP { margin-bottom: 10px }
.mini{ color: #777; font-size:80%; line-height: 1.6rem; }
.moreSmall { font-size: 80% }
.moreSmallDouble { font-size: 65% }
.moreBig { font-size: 130%;  line-height: 2.5rem;}
.moreBigDouble { font-size: 150% }
.opacity a img { transition: opacity 0.2s ease-in-out; }
.opacity a img:hover{ opacity: 0.8; filter: alpha(opacity=80); background: #fff; background-size: contain  }   
.opacityDIV a DIV { transition: opacity 0.2s ease-in-out; }
.opacityDIV a DIV:hover{ opacity: 0.8; filter: alpha(opacity=80); background: #fff; background-size: contain  }   

.smpHidden { display: inline; }
.tdVerticalMid td{ vertical-align:middle}
.txtS_Big { font-size: 2.2rem; font-weight: bold; line-height: 1.6rem; }
.txtS_Middle { font-size:2.0rem; line-height: 1.6rem; }
.txtS_Small { font-size:1.2rem}
.txtBlue { color: hsl(192, 50%, 40%)}
.txtSkyBlue {color: hsl(192, 50%, 70%);}
.txtGray { color: #777; }
.txtGreen{ color:hsl( 87, 28%, 40%)}
.txtOrange{color:#ff9500}
.txtPink{ color: hsl(345, 50%, 55%)} 
.txtRed{color: #e00;}
.txtYellow { color: #f2ea00 }
.txtShadow { text-shadow: 0px 0px 2px #000 }

a:link { text-decoration: none; color: hsl(192, 0%, 30%); }
a:visited { text-decoration: none; color: hsl(192, 0%, 30%); }
a:hover { text-decoration: underline; color: hsl(192, 0%, 30%);  }
a:active { background: #b2d7ff ; color: hsl(192, 0%, 30%); }

@font-face {
    font-family: "Bushcraft-Plants";
    src: url("../font/Bushcraft-Plants.woff") format("woff")
}






/* ==============================*/
/* 768px - 414px smartphone main*/
/* ==============================*/
/* common ==============================*/
/* ==============================*/

body, button, th, td, li, h1, h2, h3, h4, h5, h6 { font: 12px/160% '小塚ゴシック Pro','Kozuka Gothic Pro', Osaka, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif; letter-spacing: 0; position: relative; color: hsl(192, 0%, 10%); font-weight: 200}


.wrapper { position: relative; }
/*header*/
#header { text-align: center; padding: 20px 0px 15px; position: relative; z-index: 5 } 
#header #headerLogo img { width: 200px; } 
#header h1 { font-size: 90%; margin: 3px 0px 20px; color: hsl(192, 10%, 50%); letter-spacing: .2rem; padding: 0px 0px 0px 10px }
#header #headerOnFoot { font-size: 90%; margin: 0px 0px -5px; color: hsl(192, 10%, 50%); letter-spacing: .2rem; padding: 0px 0px 0px 10px }

#webReserveFixed { position: fixed; top: 0px; z-index: 80; }
#webReserveFixedLink img { transition: opacity 0.2s ease-in-out; }
#webReserveFixedLink img:hover { opacity: 0.9; filter: alpha(opacity=90) }   
#toTopBird { position: fixed; bottom: 10px; z-index: 80; width: 40px }


/*fadein*/
.fadein { opacity: 0; transform: translate(0,0); transition: all 1.5s; transform: translate(0,30px);
  &.scrollin{ opacity: 1; transform: translate(0, 0) !important; }
}


/*sidebar*/
#smpMenuOuter { display: none; width:100%; position: absolute; top: 0px; opacity: 0; z-index: 100; background: #fff;
    transition: height 300ms, opacity 300ms, top 300ms; 
    border-top: solid 1px hsl(192, 0%, 30%); ;
    border-bottom: solid 1px hsl(192, 0%, 30%);
}
#smpMenuOuter h3 { color: hsl(192, 0%, 30%); margin-bottom: 15px; text-align: left; font-size:3rem; font-family:'Josefin Sans'; text-align:center; }
#smpMenuOuter .reserveIcons h3 { margin-bottom: 45px; }
/*#smpMenuOuter .txtSmall { font-size: 40% }*/

#smpMenu, #smpMenuOuter .reserveIcons { margin: 30px auto 60px; width: 94%; }
#smpMenuOuter .reserveIcons ul { padding-bottom: 5px;  }

#humbergerMenu li { font-weight:300 }
#humbergerMenu li a { padding: 20px 10px 20px; display: block; border-bottom: dotted 1px hsl(192, 0%, 80%);}
#humbergerMenu li:first-child a { border-top: dotted 1px hsl(192, 0%, 80%);}
#humbergerMenu li a:hover{ background: hsl(21, 13%, 95%); opacity: .8 }

/* humbergerMenu menuButton ==============================*/
#menuButton { width: 42px; height:42px; position: fixed; top: 10px; right: 10px; z-index: 100; }
#menuButton span { display: block; background: #666; width: 24px; height: 2px; position: absolute; left: 9px; transition: all 0.25s; }
#menuButton span:first-child { top: 12px; }
#menuButton span:nth-child(2) { margin-top: -1px; top: 50%; }
#menuButton span:last-child {  bottom: 12px; }
#menuButton.menuOn span:first-child { transform: translateY(8px) rotate(45deg); }
#menuButton.menuOn span:nth-child(2) { opacity: 0; }
#menuButton.menuOn span:last-child { transform: translateY(-8px) rotate(-45deg); }




/*unique section ==============================*/

.reserveIcons { padding-left:0px; padding-right: 0px; text-align: center;}
.reserveIcons li { display: inline-block; font-weight: bold; }
.reserveIcons li:nth-child(2) { margin: 0px 15% }


/*footer common*/
#footerOuter { background: linear-gradient( to bottom, hsl(192, 0%, 95%), hsl(192, 0%, 100%)); clear: both; }
#footer { position: relative; text-align: center; padding: 50px 0px 0px;}
#footerLogo img { width: 200px; margin-bottom: 10px } 
#footer p { line-height: 1.8rem }
#footer p#footerSubTxt { font-size: 90%; margin-top: 1rem; line-height: 1.65rem }
#footerMenu { text-align: left; padding:0px }
#footerMenu li a { padding: 22px 5% 15px; display: block; border-bottom: 1px solid hsl(192, 0%, 60%) ; }
#footerMenu li a:hover { background: hsl(192, 0%, 40%); text-decoration: none; color: #fff}
#footerMenu li a#firstLine { border-top: 1px solid hsl(192, 0%, 60%) }
#footerInstagram { font-size:3rem; margin: 2rem auto 0rem; padding: 0px 10px }
#footerInstagram img { width:35px }

#copyright { clear: both; text-align: center; font-size: 90%; margin: 10px 0px 50px}




/*==============================*/
/*==============================*/





/**/
/*main*/
/* ==============================*/
/* 768px - 414px smartphone main*/
/* ==============================*/
/**/


/*for samll smartphone */
@media screen and (min-width: 375px) {
    .reserveIcons li:nth-child(2) { margin: 0px 10% }
    nav  { display: none; }
    #webReserveFixed { width: 60px; left:1rem }
    #toTopBird { right: 1rem; }

    #footerMap { padding: 20px 15% 55px; }

}
@media screen and (min-width: 507px) {
    #webReserveFixed { left: 8px; width: 70px }
    #footerMap { padding: 20px 25% 55px; }

}


/*for Tablet*/
@media screen and (min-width: 768px) {

}


/*for PC*/
@media screen and (min-width: 960px) {
    nav    { display: block; width: 100%; margin: 0px auto;}
    nav ul { margin: 30px auto 0px }
    nav li { display: inline-block; margin: 0px 30px;}
    nav li, nav li a {  font-family:'Josefin Sans'; font-weight: 400 }
    #menuButton { display: none; }

    #webReserveFixed { left: calc( 50% - 40rem ) ; width: 80px;}
    #toTopBird { right:10rem;}

    .reserveIcons li:nth-child(2) { margin: 0px 150px }
    #footerMap { width: 960px; padding: 20px 260px 55px; margin: 0px auto;}

}