@charset "utf-8";

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

/*font*/
body{font-family:font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',
 Meiryo, sans-serif;}

 #gnav {font-family: 'PT Serif', serif;}

/*
==========================================================================
	Base Layout
==========================================================================
*/
/*ALL and Smart Phone*/

/*ヘッダー*/
#header{
	padding: 10px 0;
	background:#fff;
	text-align: center;
	behavior:url(../js/PIE.htc);/*IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使える*/
	-pie-background: ;
}
#header span{
	display: block;
}
#header .logo{
	max-width: 50%;
	margin-left:auto;
	margin-right: auto;
}

/*ナビ*/
#gnav{
	background: #fff;
	border-bottom:solid 3px #BBB42F;
}

#gnav ul{
	overflow: hidden;
}

#gnav li{
	float: left;
	width: 20%;
	text-align: center;
}

#gnav a{
	display: block;
	padding: 15px 10px;
	color: #555;
	font-size: 133%;
	text-decoration: none;
}

#gnav a:hover{
	background:#f6f6f6;
}

/*トップバナー*/
#topBanner{
	background: #f6f6f6;
}
#topBanner *{
	position: relative;
}

#topBanner .txt{
	position: absolute;
	z-index: 1;
	left:6.25%;
	bottom: 15.38%;
	color: #fff;
	text-shadow: 0 0 3px #000,0 0 5px #000,0 0 5px #000;
}

#topBanner .ph img { width:100%;}

/*リード文*/
#leadText {
	padding-top:1.5em;
	line-height: 1.7;
}

/*コンテンツ領域*/
.container{
	padding: 15px 10px;
}
.container:after{
	content: "";
	display: block;
	clear: both;
}

/*見出し*/
.hdg{
	margin-bottom: 15px;
	border-bottom: solid 1px #999900;
	font-family: 'Arapey', serif;
	font-style: italic;
}

.hdg a{
	display: block;
	padding: 5px 0;
	color:#4d941a;
	text-decoration: none;
	position: relative;
}
/*.hdg a:before{
	content: "more";
	position: absolute;
	right:15px;
	bottom:10px;*/
}
.hdg a:after{
	content: "";
	width: 0;
	height: 0;
	font-size: 0;
	border:transparent 4px solid;
	border-left-color:#4d941a;
	position: absolute;
	right:0;
	top:50%;
	margin-top:-2px;
}
.hdg a span{
	color:#990;
	font-size: 150%;
}


/*ギャラリー*/
.pic_box { width:100%; text-align: center;}
.pic_box li {display: inline-block; padding:1%; width:20%;-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;} 
.pic_box li img { width:100%; max-width:180px;}

@media screen and (-webkit-min-device-pixel-ratio:2) {
	.hdg a span:before{
		background: url(../img/icon-cup@2x.png) no-repeat;
		background-size:contain;
	}	
}

/*お知らせ*/
dl.info dt{
	clear: left;
	float: left;
	width: 6em;
	padding: 5px 0;
	border-top:#d8c7a0 1px dotted;
}

dl.info dd{
	overflow: hidden;
	padding: 5px 0 5px 15px;
	border-top:#d8c7a0 1px dotted;
}

dl.info :first-of-type{
	border-top:none;
}


/*お知らせ*/
#nav { font-family: 'Open Sans', sans-serif;}
#menu:after{
	content: "";
	display: block;
	clear: both;
}
#menu figure{
	float: left;
	width: 49%;
	text-align: center;
}
#menu figure:nth-of-type(odd){
	margin-right: 2%;
}
#menu figcaption{
	margin: 5px 0;
}
#menu b{
	display: block;
	font-weight: bold;
	font-size:83.33%;
}

/*スタッフ*/
#staff{
	background: #f1e7d2;
	padding: 4%;
}
#staff .ph,
#staff .txt{
	display: table-cell;
	vertical-align: middle;
}
#staff .ph{
	width: 38.0434%;
	text-align: center;	
}
#staff .ph img{
	border: #fff 2px solid;
}
#staff .txt{
	padding-left:10px;
}

/*バナー*/
#banner{
	text-align: center;
}
#banner li{
	margin-bottom: 5%;
}
#banner img{
	box-shadow: 0 0 5px #888;
	behavior:url(../js/PIE.htc);
}

/*フッター*/
#contact{
	/*padding-top: 60px;
	background: #d8c7a0 url(../img/logo-foot.png) 10px 20px no-repeat;
	position: relative;*/
	background:#f6f6f6;
}
#contact .hdg02{
	margin-bottom: 10px;
	text-align: center;
	font-size: 160%;
	font-family: 'Arapey', serif;
	font-style: italic;
}

/*店舗情報*/
#shopInfo .ph{
	width: 46.66%;
	margin: 0 auto 10px;
	text-align: center;
}
#shopInfo .ph img{
	border: #fff 5px solid;
}
#shopInfo dl.info dt,
#shopInfo dl.info dd{
	padding: 3px 0;
}

/*地図*/
#ProArea {
	position: relative;
	padding:10px 0;
	/*height: 0;*/
	overflow: hidden;
	/*border: #fff 5px solid;*/
}
#ProArea iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

.txt_ttl { display:block; border-bottom:dotted 1px #4f4f4f; margin:10px 0;}
.s_txt { font-size:80%;}

/*SNS*/
#sns{
	text-align: center;
	background:#999999;
}
#sns li{
	display: inline-block;
	width: 65px;
	margin: 0 5px;
	color:#fff;
}
#sns a{
	display: block;
	height:45px;
	background: url(../img/icon-sns.png) center top no-repeat #fff;
	border-radius: 5px 5px 0px 0px;
	text-indent: -9999px;
	behavior:url(../js/PIE.htc);
	position: relative;
}
#sns .sns-fb a{
	background-position: 0 -60px;
}
#sns .sns-pin a{
	background-position: 0 -120px;
}

/*ギャラリー*/

.modal-content {
    position:fixed;
    display:none;
    z-index:2;
    margin:0;
    padding:10px 20px;
    border:2px solid #aaa;
    background:#fff;
}

.modal-content p {
    margin:0;
    padding:0;
}

.modal-overlay {
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}

.modal-open {
    color:#00f;
    text-decoration:underline;
}

.modal-open:hover {
    cursor:pointer;
    color:#f00;
}

.modal-close {
    color:#666;
    text-decoration:none;
}

.modal-close:hover {
    cursor:pointer;
    color:#f00;
}

@media screen and (-webkit-min-device-pixel-ratio:2){
	/*#sns a{
		background: url(../img/icon-sns@2x.png) center top no-repeat #fff;
		background-size:cover;
	}*/
}

/*コピーライト*/
#copyright{
	margin:1em 0;
	text-align: center;
	font-size:85%;
}

/*ページトップへ*/
#pagetop a{
	display: block;
	height: 40px;
	background: url(../img/pagetop.png) center center no-repeat;
	text-indent: -9999px;
}

/*SP Only*/
@media screen and (max-width:568px){
	#header{
		background-size:20%;
	}
	.oldie #header{
		background: none;
	}
	#contact{
		background-size:40%;
	}
	#toggle { display:none;}
	#banner{
		max-width: 70%;
		margin-left: auto;
		margin-right: auto;
	}
	/*スマホメニュー*/
	#gnav ul{
	    display: none;
	  }
	#gnav ul li{
	    width: 100%;
		border-bottom:dotted 1px #4f4f4f;
}

#toggle{
  display: block;
  position: relative;
  width: 100%;
  background: #666;
}
#toggle a{
  display: block;
  position: relative;
  padding: 12px 0 10px;
  border-bottom: 1px solid #444;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

#toggle:before{
	    display: block;
	    content: "";
	    position: absolute;
	    top: 50%;
	    left: 10px;
	    width: 20px;
	    height: 20px;
	    margin-top: -10px;
	    background: #fff;
	  }
	  #toggle a:before, #toggle a:after{
	    display: block;
	    content: "";
	    position: absolute;
	    top: 50%;
	    left: 10px;
	    width: 20px;
	    height: 4px;
	    background: #666;
	  }
	  #toggle a:before{
	    margin-top: -6px;
	  }
	  #toggle a:after{
	    margin-top: 2px;
	  }
	  	
	/*ギャラリー*/
.pic_box { width:100%; text-align: center;}
.pic_box li {display: inline-block; width:45%;-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;} 
.pic_box li img { width:100%;}
p.sp { text-align:center; margin:10px auto;}
	}	

/*Small Tablet*/
@media screen and (min-width:569px){
	body{
		font-size: 87.5%;
	}
	#toggle { display:none;}
	#topBanner .txt{
		font-size:162.5%;
	}
	
	#leadText{
		text-align: center;
		font-size: 120%;
	}
	#menu figure,
	.oldie #menu figure{
		width: 32%;
		margin-right: 2%;	
	}
	/*
#menu figure:nth-of-type(3n){
		margin-right: 0;
	}
*/
	#menu figure.last{
		margin-right: 0;
	}
	
	#staff,
	#banner{
		display: table-cell;
		vertical-align: middle;
	}
	#staff,
	.oldie #staff{
		width: 70%;
	}
	#banner{
		padding-left: 2%;
	}
	#banner li:last-child{
		margin-bottom: 0;
	}

	#contact .hdg02{
		text-align: left;
		padding-bottom:2px;
		border-bottom:dotted 1px #4f4f4f;
	}
	#shopInfo { width:100%; }
	/*#shopInfo{
		float: left;
		width:59.4594%;	
	}*/
	#map{
		float: right;
		width:38.7387%;
	}
	
	#shopInfo .ph{
		float: left;
		width: 200px;
		margin-right: 3%;
	}
	#shopInfo .info{
		float: left;
		width: 65.1515%;
		overflow: hidden;
	}
	#sns{
		clear: both;
	}
p.sp { text-align:center; margin:10px auto;}

}

/*Tablet-PC*/
@media screen and (min-width:768px){
	body{
		font-size: 100%;
	}
	#main{
		margin:0 auto;
		width: 80.27%; /* 780/1110 */
	}
	#toggle { display:none;}
	#side{
		float: right;
		width: 27.027%; /* 300/1110 */
	}
	#staff,
	#banner{
		display: block;
		width: 100%;
	}
	#banner{
		padding-left:0;
	}
	#staff{
		width: 100% !important;
		padding: 10% 0;
	}
	#staff .ph,
	#staff .txt{
		display: block;
		width: 58.3333%;
		margin-left: auto;
		margin-right: auto;
		font-size:75%;
	}
	#staff .ph img {margin:0 auto;}
	footer{
		position: relative;
	}
	#pagetop{
		position: absolute;
		right:0;
		bottom:-10px;
		z-index: 1;
		width: 70px;
		height: 40px;
	}
	
	#main ul.contents2 { width:100%; margin-top:20px;}
	#main ul.contents2 li{ display:inline-block; width:50%; text-align:center; padding:15px;
	-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;}
	#main ul.contents2 li img{ width:100%;}
	p.sp { display:none;}
}


/*PC*/
@media screen and (min-width:1130px){
	#gnav ul,
	#topBanner >div{
		width: 1130px;
		margin: 0 auto;
	}
	#toggle { display:none;}
	.container,
	#contact .container{
		width: 1110px;
		margin: 0 auto;
	}
	
	#sns{
		position: absolute;
		top:50%;
		margin-top:-80px;
	}
	#sns li{
		display: block;
		margin: 8px 0;
	}
	#sns a{
		border-radius: 0 5px 5px 0;
		behavior:url(../js/PIE.htc);
	}
	/*ギャラリー*/
.pic_box { width:100%; text-align: center;}
.pic_box li {display: inline-block; padding:1%; width:20%;-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;} 
.pic_box li img { width:100%; max-width:180px;}

p.sp { display:none;}

}


.pic_box li img { cursor:pointer;}

/*tinybox*/
.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(../images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(../images/close.png) no-repeat}
.tclose:hover {background-position:0 -30px}

#error {background:#ff6969; color:#fff; text-shadow:1px 1px #cf5454; border-right:1px solid #000; border-bottom:1px solid #000; padding:0}
#error .tcontent {padding:10px 14px 11px; border:1px solid #ffb8b8; -moz-border-radius:5px; border-radius:5px}
#success {background:#2ea125; color:#fff; text-shadow:1px 1px #1b6116; border-right:1px solid #000; border-bottom:1px solid #000; padding:10; -moz-border-radius:0; border-radius:0}
#bluemask {background:#4195aa}
#frameless {padding:0}
#frameless .tclose {left:6px}