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

h1, h2, h3, h4, h5, h6, div, p, ul, li, header, footer, nav, html, body, figure, section{
	margin: 0;
	padding: 0;
}

a{
	color: #3e3e3e;
	text-decoration: none;
}

body, html{
	font-size: 14px;
	color: #3E3E3E;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

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

.container, nav ul{
	width: 1024px;
	height: auto;
	margin: 0 auto;
}

ul{
	list-style: none;
}

/* multi language section 
********************************************/
	.foreign{
		width: 100%;
		height: auto;
		padding: 5px 0;
		margin-bottom: 10px;
		background: #E9D7DC;
		color: #842f4f;
		font-weight: bold;
	}
	
	.foreign .container{
		text-align: right;
	}

/* header 
********************************************/
header{
	width: 100%;
	height: auto;
	margin: 0 0 20px 0;
	padding: 10px 0 0 0;
}

.headerInner:after{
	content: "";
	display: block;
	clear: both;
	overflow: auto;
}

.headerInner{
	margin: 0 auto 10px auto;
}

.headerInner h1{
	font-size: 24px;
	font-weight: bold;
	color: #842f4f;
	width: 25%;
	height: auto;
	margin: 0;
	float: left;
}

.headerInner h1 a:hover{
	opacity: 0.75;
}

.headerInner h1 img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: none;
}


/* reserved phone and form
********************************************/
.headerInner .reserve{
	width: 20%;
	height: auto;
	float: right;
	text-align: right;
}

.reserve select{
	display:block;
	margin-bottom: 10px;
	border: 1px solid #842f4f;
	border-radius: 3px;
	padding: 5px;
	background: #842f4f;
	color: #FFF;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	cursor: pointer;
}

.reserve select:hover{
	background: #C49FAD;
}

/* each shops businessTime
/////////////////////////////////////////////
********************************************/
.businessTime{
	float: left;
	width: 37%;
	text-align: center;
}

.businessTime table{
	text-align: center;
	margin: 0 auto;
}

.businessTime table th{
	font-size: 18px;
	color: #842f4f;
	text-align: left;
}

.businessTime table td{
	text-align: left;
}

.businessTime table td:first-child{
	font-weight: bold;
	padding-right: 10px;
}


/* each shops reserveButton
/////////////////////////////////////////////
********************************************/
.reserveButton{
	float: left;
	width: 37%;
	text-align: center;
}

.reserveButton table{
	margin: 0 auto;
	border-collapse: separate;
}

.reserveButton table tr td{
	width: 100%;
	height: auto;
	color: #842f4f;
}

.reserveButton table tr td a{
	
	display: block;
	padding: 5px 10px;
	color: #842f4f;
	border: 1px solid #842f4f;
	border-radius: 5px;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-weight: bold;
	
}

.reserveButton table tr td a:hover{
	background: #842f4f;
	color: #FFF;
}


/* navigation
********************************************/

nav{
	width: 100%;
	height: auto;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d37f9f+0,842f4f+100 */
background: #d37f9f; /* Old browsers */
background: -moz-linear-gradient(top,  #d37f9f 0%, #842f4f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #d37f9f 0%,#842f4f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #d37f9f 0%,#842f4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d37f9f', endColorstr='#842f4f',GradientType=0 ); /* IE6-9 */
	
}

nav ul:after{
	content: "";
	display: block;
	clear: both;
	overflow: auto;
}


nav ul li{
	float: left;
	width:16.66%;
	height: auto;
	position: relative;
	z-index: 1;
}

nav ul li a{
	display: block;
	width: auto;
	padding: 10px 10px;
	color: #FFF;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-left: 1px solid #FFF;
	text-align: center;
}

nav ul li a:hover{
	background: #842f4f;
}

nav ul li:last-child a{
	border-right: 1px solid #FFF;
}

.shoplist{
	position: absolute;
	display: none;
	z-index: 999;
	top:auto;
	left:auto;
}

#menu li:hover ul.shoplist{
	display: block;
}

.shoplist li{
	float: none;
}

.shoplist li a{
	border-left: none;
	border-right: none;
	border-bottom: 1px dashed #FFF;
	background: rgba(0,0,0,.75);
}

.shoplist li:last-child a{
	border-bottom: none;
}

.shoplist li a:hover{
	background: rgba(102,102,102,.75);
	
}

.shoplist li:last-child a{
	border-right: none;
}



/*slicknav settings
*************************************************************/
nav ul#menu{
	display: block;
}

.slicknav_menu{
	display: none;
}
.fa-chevron-circle-right, .fa-chevron-circle-down{
	font-size: 14px;
}

/* slicknav coloring and so on
************************************************************/

.slicknav_nav li{
	border-top: 1px dashed #FFF;
}

.slicknav_menu{
	background: #842f4f !important;
}

.slicknav_menu .slicknav_icon-bar{
	background: #FFF;
}

.slicknav_menu a:hover{
	color: #D4ADAD !important;
	background: none !important;
	text-decoration: underline;
}

.slicknav_btn{
	background: #A2557D !important;
}

.slicknav_nav .slicknav_row:hover {
  background: none !important;
}
.slicknav_nav a:hover {
  background: none !important;
}


/* footer
*************************************************************/
footer{
	width: 100%;
	height: auto;
	color: #FFF;
	background: #842f4f;
	margin: 0;
	padding: 10px 0 5px;
}

footer .container h2{
	font-size: 18px;
	margin-bottom: 10px;
	width: 100%;
}

footer .container .recruit{
	width: 100%;
	font-size: 14px;
	font-weight: normal;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.recruit a{
	color: #FFF;
	text-decoration: underline;
}

.recruit a:hover{
	text-decoration: none;
}

.recruit a i{
	margin-right: 10px;
}

footer .container ul{
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

footer .container ul:after{
	content: "";
	display: block;
	clear: both;
	overflow: auto;
}

footer .container ul li{
	float: left;
	width: 25%;
	margin: 0;
	padding: 0;
}

footer .container ul li a{
	display:block;
	padding: 5px 10px;
	color: #FFF;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
}

footer .container ul li a:hover{
	color: #842f4f;
	background: #FFF;
}

footer .container ul li a i{
	margin-right: 5px;
}

/* copyright
******************************************************/
.copy{
	width: 100%;
	height: auto;
	text-align: center;
}

/*
******************************************************
media query
********************************************************
*/
@media screen and (max-width: 1023px){
	.container, nav ul{
		width: 769px;
	}
	
	.headerInner h1{
		width: 33%;
	}
	
	.headerInner .reserve{
		width: 23%;
	}
	
	.headerInner .businessTime{
		width: 34%;
	}
	
	.headerInner .reserveButton{
		width: 33%;
	}
}

@media screen and (max-width: 789px){
	.container, nav ul{
		width: 540px;
	}
	
	.headerInner{
		margin: 0 auto;
	}
	
	.headerInner h1{
		width: 50%;
	}
	
	.headerInner .businessTime{
		float: none;
		width: 34%;
	}
	
	.headerInner .reserveButton{
		float: none;
		width: 33%;
	}
	
		/* reserved phone and form
	********************************************/
	.headerInner .reserve{
		width:35%;
		height: auto;
		float: right;
		text-align: right;
	}
	
	
	/* navigation
	********************************************/
	header nav ul#menu{
		display: none;
	}
	.slicknav_menu{
		display: block;
	}
	.shoplist{
		position: static;
	}
	
	.shoplist li a{
		border: none;
		background: none;
	}
	
	.shoplist li a:hover{
		color: #FFF;
	}
	
	/*footer
	/////////////////////////////////////////////*/
	footer .container ul li{
		float: none;
		width: 100%;
		margin: 0;
	}
	
	footer .container ul li a{
		text-align: left;
	}	
}

@media screen and (max-width: 560px){
	.container, nav ul{
		width: 320px;
	}
	
	.headerInner h1{
		width: 100%;
		height: auto;
		margin-bottom: 10px;
		float: none;
	}
	
	
	/* reserved phone and form
	********************************************/
	.headerInner .reserve{
		float: none;
		width: 100%;
		height: auto;
		display: block;
	}
	
	.reserve:after{
		content:"";
		display: block;
		clear: both;
		overflow: hidden;
	}
	
	.reserve select{
		display: block;
		float: left;
		margin: 10px 0 0 0;
		padding: 5px;
		font-size: 12px;
		width: 48%;
		text-align: center;
	}
	
	.reserve select:last-child{
		margin-left: 10px;
	}
	

}