@charset "utf-8";

#header{
	background:url(../imgs/headerAlwaysL.png) no-repeat;
}

#alwaysOpenDesWrapper{
	font-size:16px;
	margin-left:320px;
	padding:5px 2px 5px 0;
}

#alwaysOpenDes{
	border:2px solid #C0A92C;
	border-radius:5px;
	padding:7px 14px;
}

.comBox{
	border:2px solid #C0A92C;
	border-radius:2px;
	margin-bottom: 5px;
	margin-right:2px;
	padding:0;
}

.comPhoto{
	min-height:185px;
	float:left;
	padding-top:25px;
	width:200px;
}

.comPhoto img{
	width:100%;
}

.comContents{
	overflow:hidden;
	padding-top:15px;
	padding-left:5px;
}

.comTitle{
	margin-top:5px;
}

.comTitle span{
	font-size:28px;
	line-height:32px;
}

.comSpec{
	margin-top:14px;
	font-size:21px;
	line-height:24px;
}

.comMarks{
	margin-top:14px;
	padding-right:7px;
}

.comMarks span{
	padding-right:7px;
}

.comMarks img{
	vertical-align:text-bottom;
	padding-right:5px;
}

.comDes{
	margin-top:14px;
}

.comLink{
	margin:14px 0;
}

.item{
	background-color:white;
	border:1px solid #ccc;
	border-radius:2px;
	margin-bottom:5px;/*削除予定*/
	min-height:250px;/*あった方がいい*/
	max-width:200px;
	float:left;
	position:relative;
}


.orderTable{
	border-collapse:collapse;
	border-spacing:0px;
	border:1px solid #CCC;
	margin:14px 2px;
	width:99.5%;
}

.orderTable .price img{
	vertical-align:middle;
	margin-right:5px;
}

.orderTable td{
	border:1px solid #CCC;
	height:54px;
	min-height:54px;
	padding:5px;
}

.orderTable td a{
	color:#900;
}

.item .itemInner{
}


.itemInner .ocrnoCatnameSpec{
	background-color:#eee;
	padding-left:5px;
}

.itemInner .ocrnoCatnameSpec .ocrno{
	font-size:12px;
}

.itemInner .ocrnoCatnameSpec .catname{
	font-size:14px;
	line-height:14px;
}

.itemInner .ocrnoCatnameSpec .spec{
}


.itemInner .prices{
	text-align:right;
	text-wrap:none;
	overflow:hidden;
}


.itemInner .notaxprice{
	font-size:20px;
	font-weight:600;
	padding-left:7px;
}

.itemInner .intaxprice{
	font-weight:bold;
}


.orderTable td.itemInner{
	background-color:#eee;
	padding:0;
	max-width:200px;
	min-width:170px;
	width:200px;
}

.orderAlways{
	border:1px solid #eee;
	background-color:#eee;
	padding:4px 14px 4px 0;
	margin-top:14px;
	text-align:right;
}

.orderTable .orderAlways{
	margin-top:0;
}


.orderAlways .orderInfo{
	background-color:#eee;
	color:#1f1fa9;
	font-size:12px;
	margin:2px 4px 2px 0;
}

.orderAlways .oqty{
	display:inline-block;
	float:right;
	height:24px;
	text-align:right;
	margin-right:2px;
	padding:3px;
	width:40px;
}

.orderAlways .orderButton{
	background-color:#fd6;
	border-radius:3px;
	border:1px solid #f90;
	cursor:pointer;
	display:inline-block;
	float:right;
	height:25px;
	padding:4px;
	margin-left:4px;
	margin-right:4px;
	width:4em;
	text-align:center;
}

.orderAlways .oqtyDown,
.orderAlways .oqtyUp{
	background-repeat:no-repeat;
	cursor:pointer;
	float:right;
	width:23px;
	height:23px;
	margin-right:2px;
}


.orderAlways .oqtyDown{
	background-image:url(/marks/arrowDown.svg);
}

.orderAlways .oqtyUp{
	background-image:url(/marks/arrowUp.svg);
}

.orderAlways .oqtyDown{
	padding-right:4px;
}

.orderAlways .oqtyUp{
	padding-left:4px;
}

#items{
	float:left;
	padding-left:2px;
	padding-rigth:2px;
	min-height:1000px;
}


.mark{
	display:block;
	z-index:1000;
	position:absolute;
	left:2px;
}

.mark.mark1{
	top:2px;
}

.mark.mark2{
	top:39px;
}

.mark.mark3{
	top:76px;
}

.markAuto{
	display:block;
	z-index:1000;
	position:absolute;
	top:2px;
	right:2px;
}

.markB{
	display:block;
	z-index:1000;
	position:absolute;
	top:-31px;
}

.markB2{
	display:block;
	z-index:1000;
	position:absolute;
	top:-35px;
}

.markFavorite{
	display:block;
	z-index:1000;
	position:absolute;
	top:-35px;
	right:2px;
}

.markFavorite.noDisp{
	display:none;
}


#orderTop{
	background-color: white;
  margin-bottom:2px;
  margin-top:2px;
}

#memInfo,
#toKago{
	background-color:white;
	border:2px solid #C0A92C;
	border-radius:8px;
	color:black;
	float:left;
	height:65px;
	margin-right:1px;
	overflow:hidden;
	padding-bottom:5px;
}

#memInfo{
	background-repeat:no-repeat;
	background-position:5px 5px;
	background-image:url(../imgs/memInfoAlways.png);
	padding-left:52px;
	padding-top:5px;
	width:45%;
	min-width:320px;/*ng!320px*/
}

.pager{
	margin:5px 0 5px 0px;
}

.page,
.pagerCurr,
.pagerNext,
.pagerPrev{
	float:left;
	font-size:16px;
	background-color:#fd6;
	border:1px solid #FF9900;
	border-radius:3px;
	min-width:7em;
	padding:3px 7px;
	text-align:center;
}

.page.selected{
	background-color:#f90;
	color:white;
}

.pagerCurr{
	background-color:#FF9900;
	color:white;
}

.page{
	margin-right:3px;
	min-width:2em;
}

.pagerCurr{
	margin-right:3px;
}

.pagerNext,
.pagerPrev{
	margin-left:0.5em;
}



.separator{
	display:none;
	clear:both;
}

#toKago{
	background-repeat:no-repeat;
	background-position:2px 5px;
	background-image:url(../imgs/kagoAlways.png);
	padding-left:55px;
	padding-top:5px;
	width:29%;
	min-width:160px;
}


@media only screen and (min-width: 769px){
	
	.separator.sp4{
		display:block;
	}

	#arrows{
		display:none;
	}

	.item{
		margin-right:2px;
		width:197px;
	}

	#items{
		width:800px;
	}

	#pcMenu{
		display:block;
		float:left;
		width:200px;/* whole=menu+items */
	}

	.pcMenuItem{
		background-color:#fd6;
		background-size:35px;
		background-position:2px;
		background-repeat:no-repeat;
		display:block;
		font-size:16px;
		height:45px;
		padding-top:12px;
		padding-left:45px;
		border-bottom:1px solid #bbb;
		width:198px;
	}
	
	.pcMenuItem.ocrno{
		background-size:25px;
		height:30px;
		padding-top:6px;
		padding-left:40px;
	}
	
	.pcMenuItem.linesDouble{
		font-size:14px;
		line-height:14px;	
		padding-top:10px;
	}
	
	.pcMenuItem:not(.menuTypeSelector):hover{
		border-bottom:1px solid white;
		color:white;
		background-color:#f90;
	}

	#menuOpener,
	#menuOpener2,
	#tabSmaMenu{
		display:none;
	}
	
}

@media only screen and (max-width: 768px){
	#alwaysOpenDesWrapper{
		margin-left:2px;
		padding-top:62px;
	}

	#alwaysOpenDes{
	}

	#header{
		background:url(../imgs/headerAlwaysS.png) no-repeat;
		height:auto;
	}

	#arrows{
		display:none;/*block;*/
		position:fixed;
		bottom:0;
		right:0;
		width:25%;
		z-index:1000;
	}
	
	#arrows img{
		bottom:0;
		opacity:1;
		position:fixed;
		right:0;
	}

	#items{
		width:100%;/*wholeが調整してくれる*/
	}

	.pagerNext,
	.pagerPrev{
		margin:5px 8px 0 0;
	}
	
	#menuOpener,
	#menuOpener2{
		display:block;
		float:right;
		height:50px;
		margin-right:10px;
		margin-top:5px;
		width:40px;
	}
	
	#menuOpener2{
		margin-top:-30px;
	}
	#pcMenu{
		display:none;
	}

	#whole{
		position:relative;
	}

	#tabSmaMenu{
		background-color:white;
		border-radius:10px;
		border:3px solid #C0A92C;
		display:none;
		padding:5px 2px;
		position:absolute;
		width:100%;
		z-index:2000;
	}

	#tabSmaOcrnoMenu{
		background-color:white;
		display:none;
		padding:9px 0 9px 1px;
		width:100%;
	}
	
	#tabSmaOcrnoMenu li{
		background-color:#FFDD66;
		background-size:35px;
		background-position:5px;
		background-repeat:no-repeat;
		display:block;
		float:left;
		margin:0 0 2px 2px;
		overflow:hidden;
		padding-top:12px;
		padding-left:10px;
		width:49%;
	}
	
	#tabSmaOcrnoMenu li.toTop{
		background-image:url(/imgsMenu35/top.png);
		padding-left:45px;
	}
		

	#tabSmaOcrnoMenu li{
		font-size:14px;
		height:35px;
	}

	#tabSmaOcrnoMenu  ul:after{
		clear:both;
		content:"";
		display:block;
	}

	#tabSmaOcrnoMenu .linesDouble {
		font-size:12px;
		line-height:12px;	
		padding-top:8px;
	}
}

@media only screen and (min-width: 580px) and (max-width: 768px){
	.item{
		margin-right:0.3%;
		width:33.0%;
	}

	.separator.sp3{
		display:block;
	}
}

@media only screen and (max-width: 579px){
	.comPhoto{
		max-width:40%;
	}
}

@media only screen and (min-width: 421px) and (max-width: 579px){
	.item{
		margin-right:2px;
		width:197px;
	}

	.separator.sp2{
		display:block;
	}

}


@media only screen and (max-height: 481px){
}


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

	.orderAlways .orderButton{
		height:30px;
		padding-top:7px;
		width:42px;
	}
	
	.orderAlways .oqty{
		font-size:15px;
		height:28px;
		width:36px;
	}
	
	.orderAlways .oqtyDown,
	.orderAlways .oqtyUp{
		background-size:28px 28px;
		width:28px;
		height:28px;
	}
	
	.page,
	.pagerCurr,
	.pagerNext,
	.pagerPrev{
		padding-bottom:7px;
		padding-top:8px;
	}

	.separator.sp2{
		display:block;
	}

	#toKago{
		width:50%;
	}
	
	#toKago{
		margin-bottom:1px;
		margin-left:1px;
		margin-right:0;
		min-width:158px;
	}
	
	#memInfo{
		margin:0 2px 2px 1px;
		width:99.2%;
		min-width:319px;
	}

}

/*
●iPhone

    iPhone 4s      320px x 480px
    iPhone 5s      320px x 568px
    iPhone 6/7     375px x 667px
    iPhone 6/7Plus 414px x 736px
*/