/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* layout */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/



/* body
---------------------------------------------------- */
body {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #000;
line-height:1.6em;
font-size:100%;
text-align:center;
background: url(../images/bk01.png) repeat-x 0 0;
}


@media screen and (max-width:479px)
{
body { font-size: 16px; }
}


/*link
---------------------------------------------------- */
A {text-decoration: none;} 
A:link { color: #C03; } 
A:visited { color:#C03; }
A:active { color:#C03; }
A:hover { color:#C03; text-decoration: underline; }










/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* layout */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/









.WP { margin: 0 auto; padding:20px; }

header { text-align:center; padding:0 0 20px 0; }
header h1 { margin:20px auto; }

.shipinfo p { padding-top:10px; font-size:75%; line-height:140%; }

#hours { clear:both; background:url(../images/h01.png) no-repeat 0 0; padding:35px 0 0 0; margin-bottom:20px; }


#main { clear:both; text-align:left; }


#product01 { clear:both; margin-bottom:20px; }
#product01 img { width:100%; border:1px solid #CCC; }


#product02 { clear:both; }
#product02 li { width:100%; padding-bottom:20px; }
#product02 li img { width:100%; border:1px solid #CCC; }


#product03 { clear:both; margin-bottom:10px; }
#product03 li { width:100%; border-bottom:1px dotted #666; padding:8px 0; text-align:center; }
#product03 li img { width:100%; border:1px solid #CCC; margin-bottom:5px; }
#product03 li h5 { font-size:120%; }


#product01 img,#product02 li img {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

#product03 li {
	padding-right: 10px;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}


 /* nav
---------------------------------------------------- */
.nav01 { margin-bottom:20px; }
.nav01 li { border-bottom:1px dotted #666; padding:4px 0; }
.nav01 li a { color:#000; }



 /* section
---------------------------------------------------- */
.sec01 { overflow:hidden; margin-bottom:60px; }
.sec02,.sec03,.sec04,.sec06,.sec07 { margin-bottom:20px; }
.sec05 { background:#F8EFCB url(../images/h02.png) no-repeat 30px 30px; padding:30px 30px 30px 110px; margin-bottom:40px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}



 /* article
---------------------------------------------------- */
.art01 { margin:0 0 100px 0; clear:both; }
.art01 h6 { color:#666; font-size:75%; font-weight:normal; }
.art01 h3 { color:#C00; font-size:120%; margin-bottom:10px; }
.art01 img { width:48%; float:left; margin:0 20px 20px 0; }


.art02 { margin:0 0 60px 0; clear:both; }
.art02 h3 { color:#C00; font-size:120%; margin-bottom:10px; }
.art02 h6 { font-size:75%; font-weight:normal; background: #E8E8E8; padding:2px 10px; margin-bottom:10px; text-align:right; }
.art02 h5 {}
.art02 img { width:30%; float:left; margin:0 20px 20px 0; }
.art02 nav { margin:10px 0 0 0; }



 /* h01-h06
---------------------------------------------------- */
.h201 { background:url(../images/ls01.gif) no-repeat 0 0.2em; padding-left:28px; font-size:120%; margin-bottom:20px; clear:both; }
.h202 { background:url(../images/ls01.gif) no-repeat 0 0.2em; padding-left:28px; font-size:120%; margin:0 0 20px 0; clear:both; border-bottom:1px dotted #666; padding-bottom:10px; }
.h301 { color:#C00; font-size:120%; padding:0 0 10px 0; clear:both; }
.h401 { color:#999900; }
.h402 { margin:20px 0; text-align:center; clear:both; }
.h403 { background: #E8E8E8; padding:4px 10px; margin-bottom:10px; font-size:120%; }
.h501 { color:#C00; }
.h501 span { font-size:80%; }
.h601 { color:#666; font-weight:normal; font-size:75%; }
.h602 { font-weight:normal; color:#990; }

.h-btn { margin:20px 0; text-align:center; }



/* P
---------------------------------------------------- */
.copyright { font-size:75%; color:#666; }
.psmaller { font-size:90%; }
.caption { color:#666; margin:0.5em 0; }



 /* span
---------------------------------------------------- */
.sp01 { color:#C00; font-size:120%; }



 /* div
---------------------------------------------------- */
.dv01 { margin:15px 0 20px 0; }



/* list
---------------------------------------------------- */
ul.shops { margin:10px 0; }
ul.shops li { list-style: disc; margin-left:1.25em; margin-bottom:1em; line-height:1.5em; }
ul.shops li span { color:#990; font-size:85%; }


.links h5 { background:url(../images/ls02.png) no-repeat 0 0.25em; padding-left:20px; padding-bottom:5px; }
.links p { padding-left:20px; }
.links li { padding-bottom:20px; }


/* btn
---------------------------------------------------- */
.btn01 { background:#C00; padding:10px 15px; font-weight:bold; }
.btn01 a { color:#FFF; }
.btn02 {  background:url(../images/ls02.png) no-repeat 0 0.25em; padding-left:16px; padding-bottom:5px; }





.box01 { text-align:center; }
.box01 img { margin:0 auto; }
.box02 { background:#F8EFCB; padding:10px 15px; margin-bottom:10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.flpic { float:left; margin:0 15px 15px 0; }
.flpic02 { float:left; margin:0 15px 10px 0; }



#scrollUp {
    background-image: url(../images/btn01.png);
    bottom: 20px;
    right: 20px;
    width: 60px;    /* Width of image */
    height: 60px;   /* Height of image */
}



footer { clear:both; padding:20px 0 40px 0; margin:auto; text-align:center; }
footer div.footadd { background:#F8EFCB; padding:20px; margin-bottom:10px; }
footer div.footadd h5 { font-size:120%; }

.newslist h6 { color:#990; font-weight:normal; }
.newslist p { margin-bottom:20px; }
.newslist p a { color:#000; }


/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
.sec05 { margin-bottom:60px; background:#F8EFCB url(../images/h03.png) no-repeat center 20px; padding:90px 20px 20px 20px; }
.flpic { margin-bottom:20px; width:100%; }
.pic100 { margin-bottom:20px; width:90%; }
.box01 img { width:90%; height: auto; }
.art01 img { width:100%; margin-bottom:20px; }
.art02 img { width:100%; margin-bottom:20px; }

}






@media screen and (min-width:768px){/*768px 以上の画面幅て適用する CSS*/

.shipinfo p { font-size:90%; }
header { height:160px; }
header h1 { width:50%; float:left; text-align:left; }
.shipinfo { width:50%; float:right; text-align:right; line-height:1.5em; }
#hours { clear:both; background:url(../images/h01.png) no-repeat 0 0; height:30px; padding:0 0 0 150px; margin:20px 0; }



#product02 li { width:50%; }
#product03 { border:1px dotted #666; padding:8px; margin-right:20px; }
#product03 li { width:33.3%; border-bottom:none; }


.sec02 { width:25%; }
.sec03 { width:50%; }
.sec04 { width:25%; }
.sec06 { width:50%; }
.sec07 { width:33.3%; }



#product01,#product02 li,#product03 li,.sec02,.sec03,.sec04,.links li {
	padding-right: 20px;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

.sec06,.sec07 {
	padding-right: 30px;
	float: left;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

.box01 img { width:370px; margin:auto; }
.newslist h6 { width:9em; float:left; }
.newslist p { padding-left:10em; }

.links li { width:25%; }
.nav01 { border-bottom:1px dotted #666; padding:4px 0; }
.nav01 li { float:left; border-bottom:none; padding-right:40px; }


}




@media screen and (min-width:1024px){/*1024px 以上の画面幅て適用する CSS*/

.WP { width:1000px; margin: 0 auto; text-align:left; }

}