/* ******************************************************************** */ 
/*                  Generated by: http://csscreator.com                 */
/* ******************************************************************** */

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@charset "utf-8";

/* pc */
@media screen and (min-width: 361px) {

	/*----------------------- 共通  -------------------------*/
/*
	*{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	}
	html{height:100%;}*/
	html, body{
		margin:0;
		padding:0;
		font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif,;
		float: left;
		background-color:#ffffff;
	 }


	#pagewidth{
		width:360px;
		float: none;
		clear: both;
		margin: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		background-color:#ffffff;
		text-align:center;
		font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif,;
		font-size: 12px;
		position: relative;
		z-index: 0;
	} 
	/*---------- MAIN COLUMN -----------*/ 
	#maincol{
		background-color: #FFFFFF;
		position: relative;
		width:360px;
		height:0px;
		float:left;
		text-align: left;
		padding: 0px;
		margin: 0px;
		z-index: 3000;
	 }
	 
	#maincol2{
		background-color: #FFFFFF;
		position: relative;
		width:360px;
		/*height:80px;*/
		float:left;
		text-align: left;
		padding: 0px;
		margin: 5px;
	 }
	 
	#leftcol{
		width:357px;
		float:left;
		position:relative;
		background-color:#ffffff;
		padding: 0px;
		clear: none;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		z-index: auto;
	 }


	/*---------- MENU 1 -----------*/
	#menu1{
		text-align:left;
	    width:100%;
	    height:569px;
	    line-height:0;
		margin: 0px;
		padding: 0px;
		float:non;
	}



	#menu1 ul{
		margin: 0px;
		padding: 0px;
		z-index: 2;
	/*
	width:800px;
	text-align:left;
	*/
	}
	#menu1 li{
		float:left;
		position:relative;
		list-style-type: none;
		/*list-style-position: outside;*/
		z-index: 2;
	/**
		display: inline;
		margin: 0px;
		padding: 0px;
	**/
	}
	#menu1 li a{
		background: url(../images/menu1_over.jpg) left top no-repeat;
		display:-moz-inline-box;  /* Firefox2 */
		display:inline-block;
	}

	/***

	#menu1 li.logo a {
	background-position: 200px 55px;}
	#menu1 li.top a{
	margin-right:0px;
	margin-bottom:0px;
	background-position: 0 0;}
	#menu1 li.menu a {
	background-position: 0px -55px;}
	#menu1 li.store a {
	background-position: 0px -110px;}
	#menu1 li.koubou a{
	background-position: 0px -165px;}
	#menu1 li.shop a{
	background-position: 0px -220px;}
	#menu1 li.blog a{
	background-position: 0px -275px;}
	#menu1 li.facebook a{
	background-position: 0px -330px;}
	#menu1 li a:hover{
	position: static;
	}
	#menu1 li a:hover img , #menu1 li#current a img{
	position: relative;	z-index: -5;
	}

	***/

	/*---------- MENU 2 -----------*/
	#menu2{
		text-align:left;
		width:165px;
		height:500px;
		line-height:0;
		float:left;
		margin: 0px;
		padding: 0px;
	}
	#menu2 ul{
		margin: 0px;
		padding: 0px;
	/*
	width:800px;
	text-align:left;
	*/
	}
	#menu2 li{
		float:left;
		position:relative;
		z-index: 2;
		list-style-type: none;
		list-style-position: outside;
		display: inline;
		margin: 0px;
		padding: 0px;
	}
	#menu2 li a{
		background: url(../images/menu2_over.jpg) left top no-repeat;
		display:-moz-inline-box;/* Firefox2 */
		display:inline-block;
	}


	#menu2 li.myaccount a{
	margin-right:0px;
	margin-bottom:0px;
	background-position: 0 0;}
	#menu2 li.yummy a {
	background-position: 0px -54px;}
	#menu2 li.allergy a {
	background-position: 0px -85px;}
	#menu2 li.limit a{
	background-position: 0px -115px;}
	#menu2 li.logistic a{
	background-position: 0px -145px;}
	#menu2 li.pay a{
	background-position: 0px -175px;}
	#menu2 li.faq a{
	background-position: 0px -205px;}
	#menu2 li.review a{
	background-position: 0px -235px;}
	#menu2 li a:hover{
	position: static;
	}
	#menu2 li a:hover img , #menu2 li#current a img{
	position: relative;	z-index: -5;
	}

	#footerupper{
		float:right;
		margin-top: 20px;
		width: 100%;
		clear: none;
		display: block;
		height: 20px;
	}

	#footerlower{
		float: left;
		width: 100%;
		margin-top: 10px;
		display: block;
		clear: both;
		height: 30px;
	}

	#copyright{
		float:left;
		position: relative;
		left: 100px;
		display: inline-block;

	}

	/*---------- FOOTER MENU -----------*/
	#footermenu{
		text-align:right;
		/*width:100%;*/
	    height:16px;
		line-height:0;
		float:right;
		margin: 0px;
		padding: 0px;
		width: 100%;
		display: block;
		clear: both;
	}
	#footermenu ul{
		margin: 0px;
		padding: 0px;
		text-align:right;
		float: right;
	/*
	width:800px;
	text-align:left;
	*/
	}
	#footermenu li{
		float:left;
		position:relative;
		z-index: 2;
		list-style-type: none;
		list-style-position: outside;
		display: inline;
		margin: 0px;
		padding: 0px;
	}
	#footermenu li a{
		background: url(../images/footermenu_over.jpg) left top no-repeat;
		display:-moz-inline-box;/* Firefox2 */
		display:inline-block;
	}


	#footermenu li.tokushou a{
	margin-right:0px;
	margin-bottom:0px;
	background-position: 0 0;}
	#footermenu li.pay a {
	background-position: -121px 0px;}
	#footermenu li.logistic a {
	background-position: -228px 0px;}
	#footermenu li.privacy a{
	background-position: -338px 0px;}
	#footermenu li.contact a{
	background-position: -444px 0px;}
	#footermenu li.company a{
	background-position: -500px 0px;}
	#footermenu li.sitemap a{
	background-position: -545px 0px;}
	#footermenu li a:hover{
	position: static;
	}
	#footermenu li a:hover img , #footermenu li#current a img{
	position: relative;	z-index: -5;
	}




	 
	/* ******************************************************************** */ 
	/* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
	/* ******************************************************************** */
	.clearfix:after {
	 content: "."; 
	 display: block; 
	 height: 0; 
	 clear: both; 
	 visibility: hidden;
	 }
	 
	.clearfix{display: inline-block;}

	/* Hides from IE-mac \*/
	* html .clearfix{height: 1%;}
	.clearfix{
		display: inline;
		float: left;
		margin: 0px;
		padding: 0px;
		text-align: left;
		overflow: visible;
	}
	/* End hide from IE-mac */  


}

 
/* smartPhone */
@media screen and (max-width: 360px) {

	/*----------------------- 共通  -------------------------*/
/*
	*{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	}
	html{height:100%;}*/
	html, body{
		margin:0;
		padding:0;
		font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif,;
		float: left;
		background-color:#ffffff;
	 }


	#pagewidth{
		width:360px;
		float: none;
		clear: both;
		margin: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		background-color:#ffffff;
		text-align:center;
		font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif,;
		font-size: 9px;

	} 
	/*---------- MAIN COLUMN -----------*/ 
	#maincol{
		background-color: #FFFFFF;
		position: relative;
		width:360px;
		height:0px;
		float:left;
		text-align: left;
		padding: 0px;
		margin: 0px;
	 }
	 
	#leftcol{
		width:357px;
		float:left;
		position:relative;
		background-color:#ffffff;
		padding: 0px;
		clear: none;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
	 }


	/*---------- MENU 1 -----------*/
	#menu1{
		text-align:left;
	    width:100%;
	    height:569px;
	    line-height:0;
		margin: 0px;
		padding: 0px;
		float:non;
	}



	#menu1 ul{
		margin: 0px;
		padding: 0px;
		z-index: 2;
	/*
	width:800px;
	text-align:left;
	*/
	}
	#menu1 li{
		float:left;
		position:relative;
		list-style-type: none;
		/*list-style-position: outside;*/
		z-index: 2;
	/**
		display: inline;
		margin: 0px;
		padding: 0px;
	**/
	}
	#menu1 li a{
		background: url(../images/menu1_over.jpg) left top no-repeat;
		display:-moz-inline-box;  /* Firefox2 */
		display:inline-block;
	}

	/***

	#menu1 li.logo a {
	background-position: 200px 55px;}
	#menu1 li.top a{
	margin-right:0px;
	margin-bottom:0px;
	background-position: 0 0;}
	#menu1 li.menu a {
	background-position: 0px -55px;}
	#menu1 li.store a {
	background-position: 0px -110px;}
	#menu1 li.koubou a{
	background-position: 0px -165px;}
	#menu1 li.shop a{
	background-position: 0px -220px;}
	#menu1 li.blog a{
	background-position: 0px -275px;}
	#menu1 li.facebook a{
	background-position: 0px -330px;}
	#menu1 li a:hover{
	position: static;
	}
	#menu1 li a:hover img , #menu1 li#current a img{
	position: relative;	z-index: -5;
	}

	***/

	/*---------- MENU 2 -----------*/
	#menu2{
		text-align:left;
		width:165px;
		height:500px;
		line-height:0;
		float:left;
		margin: 0px;
		padding: 0px;
	}
	#menu2 ul{
		margin: 0px;
		padding: 0px;
	/*
	width:800px;
	text-align:left;
	*/
	}
	#menu2 li{
		float:left;
		position:relative;
		z-index: 2;
		list-style-type: none;
		list-style-position: outside;
		display: inline;
		margin: 0px;
		padding: 0px;
	}
	#menu2 li a{
		background: url(../images/menu2_over.jpg) left top no-repeat;
		display:-moz-inline-box;/* Firefox2 */
		display:inline-block;
	}


	#menu2 li.myaccount a{
	margin-right:0px;
	margin-bottom:0px;
	background-position: 0 0;}
	#menu2 li.yummy a {
	background-position: 0px -54px;}
	#menu2 li.allergy a {
	background-position: 0px -85px;}
	#menu2 li.limit a{
	background-position: 0px -115px;}
	#menu2 li.logistic a{
	background-position: 0px -145px;}
	#menu2 li.pay a{
	background-position: 0px -175px;}
	#menu2 li.faq a{
	background-position: 0px -205px;}
	#menu2 li.review a{
	background-position: 0px -235px;}
	#menu2 li a:hover{
	position: static;
	}
	#menu2 li a:hover img , #menu2 li#current a img{
	position: relative;	z-index: -5;
	}

	#footerupper{
		float:right;
		margin-top: 20px;
		width: 100%;
		clear: none;
		display: block;
		height: 20px;
	}

	#footerlower{
		float: left;
		width: 100%;
		margin-top: 10px;
		display: block;
		clear: both;
		height: 30px;
	}

	#copyright{
		float:left;
		position: relative;
		left: 100px;
		display: inline-block;

	}

	/*---------- FOOTER MENU -----------*/
	#footermenu{
		text-align:right;
		/*width:100%;*/
	    height:16px;
		line-height:0;
		float:right;
		margin: 0px;
		padding: 0px;
		width: 100%;
		display: block;
		clear: both;
	}
	#footermenu ul{
		margin: 0px;
		padding: 0px;
		text-align:right;
		float: right;
	/*
	width:800px;
	text-align:left;
	*/
	}
	#footermenu li{
		float:left;
		position:relative;
		z-index: 2;
		list-style-type: none;
		list-style-position: outside;
		display: inline;
		margin: 0px;
		padding: 0px;
	}
	#footermenu li a{
		background: url(../images/footermenu_over.jpg) left top no-repeat;
		display:-moz-inline-box;/* Firefox2 */
		display:inline-block;
	}


	#footermenu li.tokushou a{
	margin-right:0px;
	margin-bottom:0px;
	background-position: 0 0;}
	#footermenu li.pay a {
	background-position: -121px 0px;}
	#footermenu li.logistic a {
	background-position: -228px 0px;}
	#footermenu li.privacy a{
	background-position: -338px 0px;}
	#footermenu li.contact a{
	background-position: -444px 0px;}
	#footermenu li.company a{
	background-position: -500px 0px;}
	#footermenu li.sitemap a{
	background-position: -545px 0px;}
	#footermenu li a:hover{
	position: static;
	}
	#footermenu li a:hover img , #footermenu li#current a img{
	position: relative;	z-index: -5;
	}




	 
	/* ******************************************************************** */ 
	/* Clearfix: http://csscreator.com/attributes/containedfloat.php        */
	/* ******************************************************************** */
	.clearfix:after {
	 content: "."; 
	 display: block; 
	 height: 0; 
	 clear: both; 
	 visibility: hidden;
	 }
	 
	.clearfix{display: inline-block;}

	/* Hides from IE-mac \*/
	* html .clearfix{height: 1%;}
	.clearfix{
		display: inline;
		float: left;
		margin: 0px;
		padding: 0px;
		text-align: left;
		overflow: visible;
	}
	/* End hide from IE-mac */  

}