@charset "utf-8";

/* COMMON STYLE LIST ------------------------------------------------------

 01. ITEMIMAGE
 
 02. PRICES ITEMS
 
 03. VALIATION ITEMS
 
 04. OTHER ITEMS
 
 05. MEDIAQUERY for BIG SP SMALL TABLET
 
 06. MEDIAQUERY for SMARTPHONE


-------------------------------------------------------------------- */


/* 01. ITEMIMAGE
-------------------------------------------------------------------- */
.itemImage{
	float:left;
	width:42%;
	letter-spacing:-0.4em;
}

.itemImage img{
	width:100%;
	height:auto;
}

.itemImage figure{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:top;
}

.itemImage figure.main{
	margin-right:2%;
	width:73%;
}

.itemImage figure.thumb{
	width:20%;
}

.itemImage figure.thumb img{
	border:3px solid #CCC;
	margin-bottom:5px;
}


/* 02. PRICES ITEMS
-------------------------------------------------------------------- */
.prices{
	float:right;
	width:58%;
	background:#e0e0e0;
}

.prices dl{
	border-bottom:2px solid #353738;
}

.prices dl dt,
.prices dl dd{
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin:2% 1%;
	font-size:10.5pt;
	vertical-align:top;
}

.prices dl dt{
	width:30%;
}

.prices dl dd{
	width:62%;
}

ul.productnum{
	margin:2% 1%;
	padding:0;
}

ul.productnum li{
	position:static;
	display:inline-block;
	margin-right:1em;
}

ul.productnum li span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin-right:0.5em;
	padding:0.2em 0.5em;
	background:#FFF;
	font-size:9pt;
}

.buttonContainer{
	padding:10px 0;
	text-align:center;
}

.buttonContainer nav{
	width:60%;
}


/* 03. VALIATION ITEMS
-------------------------------------------------------------------- */
.valiation{
	clear:both;
	overflow:hidden;
}

.valiation .inner{
	width:115%;
	letter-spacing:-0.4em;
}

.valiation figure{
	margin:0 3% 3% 0;
	width:12%;
	display:inline-block;
	*display:inline;
	letter-spacing:normal;
	*zoom:1;
	vertical-align:top;
}

.valiation figure img{
	width:100%;
	height:auto;
}

.valiation figure figcaption{
	font-size:9pt;
}

.description{
	display:block;
	float:left;
}

/* 04. OTHER ITEMS
-------------------------------------------------------------------- */
.otherItem{
	margin-top:15px;
}

.otherItem article,
.otherItem h2{
	padding:0;
}

.otherItem .inner{
	width:115%;
	overflow:hidden;
	letter-spacing:-0.4em;
}

.otherItem article.loop{
	margin-bottom:15px;
	clear:both;
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin-right:3%;
	width:42%;
	letter-spacing:normal;
}

.otherItem article.loop h3{
	margin:0 0 10px;
	font-size:11pt;
	font-weight:bold;
	line-height:1.2;
}

.otherItem article.loop h3:before{
	margin:0;
	content:none;
}

.otherItem article.loop figure{
	width:40%;
	height:auto;
	float:left;
	margin-right:5%;
}

.otherItem article.loop figure img{
	width:100%;
	height:auto;
}

.otherItem article.loop div.itemInfo{
	width:55%;
	float:right;
}

.otherItem article.loop span{
	font-size:8pt;
}

.buttonRed.cart a{
	padding-left:0.5em;
}




/* 06. MEDIAQUERY for BIG SP SMALL TABLET
-------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	
	.editableArea{
		padding:0;
	}
	
	.itemImage,
	.prices{
		float:none;
	}
	
	.itemImage{
		margin:0 auto;
		padding:20px 0;
		width:70%;
	}
	
	.prices{
		padding:20px 3%;
		width:94%;
		border-top:2px solid #353738;
		border-bottom:2px solid #353738;
		background:none;
	}
	
	.prices dl{
		border:none;
	}
	
	ul.productnum li span{
		border:1px solid #E0E0E0;
	}
	
	.valiation,
	.description{
		margin:0 4%;
		width:92%;
	}
	
	.description{
		padding:0 0 1em;
	}
	
	.description{
		padding:0 0 1em;
	}

	.otherItem header{
		padding:20px 20px 0;
	}

	.otherItem header h2{
		margin:0;
	}

	.otherItem .inner{
		width:100%;
	}
	
	.otherItem .inner article{
		margin:10px 4%;
		width:92%;
	}
	
	.otherItem article.loop figure{
		width:40%;
		margin:0;
	}
	
	.otherItem article.loop figure img{
		width:90%;
	}

	.otherItem article.loop div.itemInfo{
		width:60%;
	}

}

/* 07. MEDIAQUERY for SMARTPHONE
-------------------------------------------------------------------- */
@media screen and (max-width: 480px) {

	.itemImage{
		width:75%;
	}
	
	.itemImage figure.main{
		float:none;
		width:100%;
	}
	
	.itemImage figure.thumb{
		float:none;
		width:100%;
	}
	
	.itemImage figure.thumb img{
		float:left;
		margin-right:2%;
		width:25%;
	}

}