@charset "UTF-8";

html,body{overflow-x:hidden}

body{
	font-family:"ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","helvetica","arial",sans-serif;
	margin:0;
	max-height:100%;
	-webkit-text-size-adjust:100%
}

img{
	height:auto;
	max-width:100%
}

a{
	display:inline-block;
	max-width:100%;
	text-decoration:none
}

h1,h2,h3,h4,h5,h6{font-size:small}

img{vertical-align:bottom}

ul{list-style-type:none}

.ib-m>*{
	display:inline-block;
	float:none;
	vertical-align:middle
}

.ul-1>*>*{
	display:table-cell;
	vertical-align:top
}

[data-hover="a"]{
	-webkit-transition:opacity .5s;
	transition:opacity .5s
}

.a{opacity:.5}

a:hover{text-decoration:none}

/**/

#header{position:relative}

#header img{vertical-align:middle}

#header-box{
	margin:auto;
	max-width:1560px;
	width:95%
}

#header-box>*{padding:2% 0}

#logo{
	position:absolute;
	text-align:center;
	top:-60%;
	width:100%
}

#nav{padding-top:1%}

#nav>*{display:inline}

#nav a{margin-left:5%}

/**/

#footer-back{background:#1eb2e9}

#footer-box{
	margin:auto;
	max-width:1300px;
	width:95%
}

#footer-box>*{margin-top:5%}

#footer-nav{padding:5% 0}

#footer-nav>div{
	display:inline-block;
	vertical-align:top
}

#footer-nav>div+div{margin-left:4%}

#footer-nav ul{
	display:inline-block;
	margin:15px 0 0 30px;
	padding:0;
	vertical-align:top
}

#footer-nav li+li{margin-top:10px}

#footer-nav p{
	background:url(../img/common/img-1.png) no-repeat center left;
	color:#fff;
	margin:0;
	padding-left:30px
}

#footer-nav a{color:#fff}

#footer-logo{text-align:center}

#footer-logo>small{
	color:#fff;
	display:block;
	font-size:12px;
	padding:1% 0
}

/**/

#menu-box{
	border-radius:10px;
	background:#21b3e9;
	padding:5px 10px;
	position:fixed;
	right:10px;
	top:10px;
	z-index:2000
}

#menu{
	cursor:pointer;
	height:45px;
	position:relative;
	width:45px
}

#menu>*{
	background:#fff;
	height:5px;
	position:absolute;
	width:100%
}

.close{opacity:1}

.close>*{
	-webkit-transition:top .5s .5s,-webkit-transform .5s;
	transition:top .5s .5s,transform .5s
}

.close>.menu-1{top:5px}

.close>.menu-2{top:20px}

.close>.menu-3{top:35px}

.open .close>*{
	-webkit-transition:top .5s,-webkit-transform .5s .5s;
	transition:top .5s,transform .5s .5s
}

.open .close>.menu-1,
.open .close>.menu-2{
	top:20px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg)
}

.open .close>.menu-3{
	top:20px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg)
}

#side{
	background:#fff;
	height:100%;
	max-width:300px;
	overflow:auto;
	position:fixed;
	right:0;
	top:0;
	-webkit-transform:translateX(100%);
	transform:translateX(100%);
	-webkit-transition:-webkit-transform .5s;
	transition:transform .5s;
	z-index:1500;
	width:100%
}

#side>*{
	display:table;
	height:100%;
	width:100%
}

#side-cell{
	display:table-cell;
	vertical-align:middle
}

#side-cell>ul{
	display:table;
	margin:auto;
	padding:0;
	text-align:center
}

#side-cell li{margin:15px 0}

#side-cell li:last-child>a{color:#21b3e9}

#side-cell a{
	color:#000;
	font-size:20px;
	font-weight:bold;
	position:relative
}

#side-cell div{
	background:#21b3e9;
	bottom:0;
	height:4px;
	left:0;
	margin:auto;
	position:absolute;
	right:0;
	-webkit-transition:width .5s;
	transition:width .5s;
	width:0
}

#side-cell .menu>div{width:100%}

.open#side{
	-webkit-transform:translateX(0);
	transform:translateX(0)
}

/**/

.close:hover{opacity:1}

@media(max-width:1500px){
	#nav a{margin-left:2%}
}

@media(max-width:1090px){
	#nav>*{display:block}
}

@media(max-width:991px){
	#logo{
		margin-bottom:2%;
		position:static
	}
}

@media(max-width:767px){#map-box{display:none;}
	#header .row>*{text-align:center}
}

@media(max-width:550px){
	#footer-nav>div{display:block}
	
	#footer-nav>div+div{margin:4% 0}
	
	#reservation{display:none;}
}

#menu-box{display:none}

@media(max-width:385px){
	#header-box{display:none}
	
	#logo>a{max-width:50%}
	
	#menu-box{
    display:block;
    height: 55px;}
}

#reservation{
	bottom:0;
	height:131px;
	margin:auto;
	position:fixed;
	top:0;
	z-index:1;
}