/* ---Initialize--- */
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,p,form,input,textarea,th,td,dl,dt,dd{margin: 0;padding: 0;font-weight: nomal;}
table{border-collapse: collapase;border-spacing: 0;}
img{border: 0; vertical-align: bottom;}
ul,ol{list-style: none;}
caption,th{text-align: left;}
h1,h2,h3,h4,h5,h6{font-size: 100%; font-weight: nomal;}

/* ---/Initialize--- */

/* ---Body--- */

body{
 font-family: 'メイリオ',Meiryo,'ヒラギノ丸ゴ Pro W4', 'Hiragino Maru Gothic Pro','Verdana','ＭＳ Ｐゴシック', sans-serif;
 font-size: 12px;
 line-height: 150%;
 letter-spacing: 0.1em;
 background-color: #BFBFBF;
 background-image: url(../img/simplback.jpg);
 color: #222;
}

a:link { color: #635727; text-decoration: underline;}
a:visited { color: #635727; text-decoration: none;}
a:active { color: #808000; text-decoration: none;}
a:hover { color: #808000; text-decoration: none;position: relative;top: 1px;}

.left-box{
	float:left;
	margin:2px;
	
}

.m6{ margin:6px;
}
.clear{ clear:both;}

.p8{ padding:8px;}

.divNone{
	display:none;
}

.tLeft{
	text-align:left;}
	
	.bG{
		border:1px solid #7C7C7C;
	}
	.bW{
		border:1px solid #ffffff;
	}

.webfont{
	font-family: 'Spectral', serif;
}

.bdG{
	background-color:#E5E5E5;
}

#topimage{
	line-height:0;
	padding:0;
	margin:0;
}

.imga{
	width:100%;
	height:auto;
}

/* ---/Body--- */


/* ---Body-wrap--- */
#body-wrap{
 width: 100%;
 text-align: center;
 margin-bottom: 0;
 padding-bottom: 0;
}

.right{
 text-align: right;
}
/* ---/Body-wrap--- */

/* ---Header--- */
#header{
 width: 900px;
 padding-bottom: 10px;
 margin: 1 auto;
 text-align: center;
}
#header-menu ul li{
 display: inline;
}

/* ---/Header--- */

/* ---Footer--- */
#footer-wrap{
 width: 100%;
 text-align: center;
 background-image: url(../img/bg-footer.jpg);
 clear: both;
 padding-top: 10px;
}
#footer{
 width: 900px;
 height: 260px;
 margin: 0 auto;
 text-align: left;
 background: url(../img/footer-point.png) bottom right no-repeat;
 color: #fff;
}
/* ---/Footer--- */

/* ---Index--- */
.indexDiv{
	overflow:hidden;	line-height:0;
}
.indexDiv img{ 
width:98%;
height:auto;
line-height:0;
}

#gallaly{
 width:100%;
 height:auto;
 margin-bottom:10px; 
 text-align: center;
 overflow:hidden;
}

.fadein{
 position:relative;
}
.fadein img { position:absolute; left:0; top:0; }


.spBk{
	background:url(../img/cafeBk.jpg) no-repeat;
	text-align:right;
	width:100%;
	height:270px;
	vertical-align:middle;
}


.itBk{
	background:url(../img/itembk.jpg) no-repeat;
	text-align:right;
	width:100%;
	height:270px;
	vertical-align:middle;
}

#contents-wrap{
 width:900px;
 margin: 0 auto; 
 padding-bottom: 10px;
}


#common-menu{
 margin: 0 auto;  
 text-align: center;
 overflow: hidden;
 padding-left: 24px;
}
#common-menu ul{
 display: block;
}
#common-menu ul li{
 float:left;
 width: 244px;
 text-align: left;
 margin-left: 20px;
 margin-right: 20px;
}
#common-menu ul li p{
 width:244px;
}
.cm-img{
 border: 2px #fff solid;
}

#shopinfo{
 clear: both;
 margin-top: 40px;
 margin-bottom: 20px;
 overflow: auto;
}
#about{
 width:480px;
 background-image: url(../img/bg-sub.jpg);
 position: relative;
 text-align: left;
 float: left;
}
#about-title{
 position: absolute;
 top:0;
 left:0;
}
#about p{
 padding: 60px 5px 10px 5px ;
}
#about img{
 text-align: right;
}

#access{
 width: 360px;
 background-color: #fff; 
 position: relative;
 text-align: left;
 float: right;
}
#access-title{
 position: absolute;
 top:0;
 left:0;
}

#map_canvas{
 position: absolute;
 top:60px;
 left:5px;
}
#access p{
 padding: 270px 5px 10px 5px ;
}

/* ---/Index--- */

/* ---Information--- */
.info-cat{
 padding:5px;
 text-align: left;
 clear: both;
}
.info-img{
 float: left;
 margin: 0;
 padding: 0;
}
.detial-info{
 float: right;
 width: 400px;
 
}

.info-cat p{
 padding: 3px 0 5px 0;
}

/* ---/Information--- */

/* ---Item--- */
.item-cat{
 padding:5px;
 text-align: left;
 clear: both;
}
.item-img{
 float: left;
 margin: 0;
 padding: 0;
}

.item-imgs{
 float: left;
 margin: 0;
 padding: 0;
}

.item-pickup{
 width:480px;
 height: 80px;
 background: url(../img/item-pickup.png) no-repeat top left;
 margin-top: 5px; 
}
.pick-imgs{
 padding-left: 145px;
 padding-top: 4px;
}
.pick-imgs img{
 border:1px dotted #808000;
 margin-left: 2px;
}

.detail-cat{
 float: right;
 width: 400px;
 
}

.item-cat p{
 padding: 3px 0 0 0;
}

.bold{
 padding:3px 0 3px 0;
 margin: 3px 0 3px 0;
 font-size: 14px;
 color: #635727;
}

.itemOne img{
	height:300px; width:auto;
}
/* ---/Item--- */

/* ---Cafe--- */
.cafe-cat{
 padding:5px;
 text-align: left;
 clear: both;
}
.cafe-img{
 float: left;
 margin: 0;
 padding: 0;
}
.detial-cafe{
 float: right;
 width: 480px;
 
}
.cafe-about{
 margin:10px 10px 5px 0;
 padding: 10px 10px 16px 10px;
 border: 1px dotted #808000;
}

.cafe-cat p{
 padding: 3px 0 0 0;
}

/* ---/Cafe--- */


@media screen and (max-width: 768px) {
	img{
		width:100%;
		height:auto;
	}
	
#topinfo{
	height:auto;
}

#gallaly{
 width:100%;
 height:auto;
 min-height:100%;
 margin-bottom:10px; 
 text-align: center;
 overflow:hidden;
}

}


@media screen and (max-width: 768px) {

	img.clear.left-box.p8 {
	    padding: 0;
	    margin: 0;
	}


	.col-8.p8 {
	    padding: 0;
	    margin: 0;
	}

	.col-4.bdG.p8 {
	    padding: 10px 0;
	    text-indent: 0.5em;
	}

	.col-12.bdG.p8 {
	    padding: 10px 0;
	}

	.col-4.p8 {
	    padding: 0;
	}

	.col-4.p8 .text-center {
	    padding: 10px;
	}



}



p.sp_l {
    font-size: 14px;
    line-height: 1.5;
}


@media screen and (max-width: 768px) {
p.sp_l {
    font-size: 3.73vw;
    line-height: 1.5;
    text-align:left;
}

p.sp_l img {
    margin: 0 auto;
    text-align: center;
    display: block;

}