@charset "UTF-8";
@import url('./reset.css');
@import url('https://fonts.googleapis.com/css?family=Raleway:300');
/*---------------------------
common
---------------------------*/
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100;}
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200;}
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; }
@font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: bold; }
body { font-family: "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif; -webkit-text-size-adjust: 100%; line-height:1.5; font-size: 14px; width: 100%; background: #f6f4ee; color: #333;}
body.fixed { position: fixed;}
body * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
h2, h3, h4, strong { font-weight: normal}
ul li { list-style-type: none; margin: 0; padding:0; }
img { height: auto; vertical-align: bottom; width: 100%; }
a { color: #927317; text-decoration: none;}
.RW{ font-family: 'Raleway', sans-serif;}
a:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -webkit-transition: all .3s; transition: all .3s;}

.btn a { display: inline-block; position: relative; z-index: 2; overflow: hidden; width: 100%;}
.btn a:hover { color: #927317 !important}
.btn a::before, .btn a::after { position: absolute; z-index: -1; display: block; content: ''; }
.btn a, .btn a::before, .btn a::after { -webkit-transition: all .3s; transition: all .3s; }
.btn a::after { left: -100%; top: 0; width: 100%; height: 100%; }
.btn a:hover::after { left: 0; top: 0; background-color: rgb(255,255,255); }
/*---- header ----*/
.fixedBox { position: fixed; top: 0; z-index: 10000; left: 0; width: 100%; height: 80px;}
#prcoReserve a, #dueledReserve a{ background: #f6f4ee; display: block; border: 1px solid #c9bb8f; color: #4b3901; height: 60px; text-align: center; padding: 1.2em 0; border-top: none}
#dueledReserve a{ border-left: none; background: #f7f0f3; color: #4a011e !important}
#reserveBtn { overflow: hidden; position: absolute; right: 60px; top: 0; z-index: 1001;}
#reserveBtn li { float: left; width: 12em;}
#spMenu { top: 0; position: absolute; width: 100%; line-height: 1;}
#spMenu .inner { width: 100%; position: relative;}
/* Fixed */
.mobile-head { width: 100%; z-index: 20000; position: relative; }
.global-nav { position: absolute; top: -700px; width: 100%; text-align: center; padding: 0 0 10px; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; z-index: 1000; background: #c9bb8f; font-family: 'Raleway', sans-serif;}
.global-nav ul.menu { position: static; right: 0; bottom: 0; }
.global-nav ul.menu li { float: none; position: static; }
.nav-toggle { display: block; }
/* Toggle Button */
.nav-toggle { position: absolute; right: 0; top: 0; width: 60px; height: 60px; cursor: pointer; z-index: 1001; padding: 0 10px; background: #c9bb8f}
.nav-toggle div { position: relative;}
.nav-toggle span { display: block; position: absolute; height: 5px; width: 100%; background: #ffffff; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
.nav-toggle span:nth-child(1) { top: 15px;}
.nav-toggle span:nth-child(2) { top: 25px;}
.nav-toggle span:nth-child(3) { top: 35px;}
.open .nav-toggle span:nth-child(1) { top: 25px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg);}
.open .nav-toggle span:nth-child(2) { width: 0; left: 50%; }
.open .nav-toggle span:nth-child(3) { top: 25px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg);}
.open .global-nav { -moz-transform: translateY(760px); -webkit-transform: translateY(760px); transform: translateY(760px);}
/* menu */
.global-nav .scrollBox { overflow-y: scroll; overflow-scrolling: touch; width: 1024px; margin: 0 auto; padding: 40px 0; text-align: center; color: #fff; letter-spacing: 0.1em;}
.global-nav ul.menu { overflow: hidden;}
.global-nav ul.menu li { float: left; width: 25%; padding: 10px 5px;}
.global-nav ul.menu li div { border-bottom: 1px solid #fff; margin-bottom: 20px;}
.global-nav ul.menu li a { padding: 20px 0; position: relative; color: #fff; display: block;}

.global-nav .snsLink p.ttl { font-size: 20px; margin-bottom: 20px;}
.global-nav .snsLink ul { overflow: hidden; margin-bottom: 40px;}
.global-nav .snsLink ul li { float: left; padding: 10px; width: 50%;}
.global-nav .snsLink ul li div { background: #fff; border: 1px solid #d2c8ad; padding: 20px 50px;}
.global-nav .snsLink ul li p.name { font-size: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #d2c8ad; color: #333;}
.global-nav .snsLink ul li ul { margin: 0;}
.global-nav .snsLink ul li ul li { padding: 20px 30px; display: inline; float: none; width: auto;}
.global-nav .snsLink ul li ul li img { vertical-align: middle; width: auto}

.global-nav .snsLink ul.blogLink li a { display: block; background: #fff; border: 1px solid #d2c8ad; padding: 20px 0; font-size: 20px;}
.global-nav .snsLink ul.blogLink li a:hover { color: #fff !important; }
.global-nav .snsLink ul.blogLink li a:hover::after { top: 0; background-color: #d8c899 }

/*---- contents ----*/
#contents .inner { width: 1024px; margin: 0 auto; padding: 80px 0;}

/*---- footer ----*/
footer { text-align: center; font-size: 80%; padding: 40px 0 100px; font-family: 'Raleway', sans-serif; background: #f6f4ee;}