/* ===============================================
▼おすすめ商品
=============================================== */
/*
   tplファイルのマークアップが同じ項目
   メインカラム用 2カラム時 [two_maincolumn_left]
                            [two_maincolumn_right]
   メインカラム用 3カラム時 [three_maincolumn]
   サイドカラム用           [side_column]
=============================================== */
/* 共通
----------------------------------------------- */
#recommend_area0 .bloc_body ,#recommend_area1 .bloc_body ,#recommend_area2 .bloc_body ,#recommend_area3 .bloc_body ,#recommend_area4 .bloc_body ,#recommend_area5 .bloc_body {
    margin-bottom: 10px;
    padding: 10px 0 10px;
    border: none;
}

/* サイドカラム用 */
.side_column #recommend_area .product_item {
    margin-bottom: 10px;
}

/* -----------------------------------------------
■　No.1 縦1列で表示
=============================================== */

/* 各アイテムのボックス
----------------------------------------------- */
#recommend_area1 .product_item, #recommend_area0 .product_item  {
	padding-bottom:10px;
	margin-bottom:10px;
	background:url(../img/background/line_dot_01.gif) repeat-x bottom;
}

/* 画像（読み込み画像と同じ大きさ）
----------------------------------------------- */
#recommend_area1 .bloc_body .productImage, #recommend_area0 .bloc_body .productImage {
    float: left;
	width:200px;
}

/*画像の枠
-----------------------------------------------*/
#recommend_area1 .bloc_body .productImage, #recommend_area0 .bloc_body .productImage {
	padding:5px;
	background-color:#FFF;
	border:#999 1px solid;
    margin:0 10px 0 0;
}

/* 説明ボックス（2カラム 他）
----------------------------------------------- */
#recommend_area1 .bloc_body .productContents, #recommend_area0 .bloc_body .productContents {
	float: left;
	width:70%;
}

/* 説明ボックス（3カラム）
----------------------------------------------- */
#three_maincolumn #recommend_area1 .bloc_body .productContents, #three_maincolumn #recommend_area0 .bloc_body .productContents {
	float: left;
	width:60%;
}

/* 商品名
----------------------------------------------- */
#recommend_area1 .productContents h3, #recommend_area0 .productContents h3 {
	padding-left:5px;
	border-left:#ccc 10px solid;
	font-size:130%;
	margin-bottom:5px;
}

/* 価格
----------------------------------------------- */
#recommend_area1 .bloc_body .productContents .price_area, #recommend_area0 .bloc_body .productContents .price_area {
	padding:0 0 5px 15px;
}

#recommend_area1 .bloc_body .productContents .sale_price, #recommend_area0 .bloc_body .productContents .sale_price {
	float:left;
	color:#C30;
}

#recommend_area1 .bloc_body .productContents .price, #recommend_area0 .bloc_body .productContents .price {
	float:left;
	font-size:150%;
	font-family:"Arial Black", Gadget, sans-serif;
	color: #EA0000;
	text-align:left;
}

#recommend_area1 .bloc_body .productContents .tax, #recommend_area0 .bloc_body .productContents .tax {
	display:none;
}

/* コメント
----------------------------------------------- */
#recommend_area1 .bloc_body .productContents .comment, #recommend_area0 .bloc_body .productContents .comment {
	clear:both;
	/*display:none;*/  /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}

/* -----------------------------------------------
■　No.2 縦2列で表示
=============================================== */

/* 各アイテムのボックス
----------------------------------------------- */
#recommend_area2 .product_item {
    float: left;
	width:50%;
	margin-bottom:10px;
}

/* 画像（読み込み画像と同じ大きさ）
----------------------------------------------- */
#recommend_area2 .bloc_body .productImage {
	width:130px;
}

/*画像の枠
-----------------------------------------------*/
#recommend_area2 .bloc_body .productImage {
	float:left;
	padding:5px;
	background-color:#FFF;
	border:#999 1px solid;
    margin:0 10px 5px 0;
}

/* 説明ボックス
----------------------------------------------- */
#recommend_area2 .bloc_body .productContents {
	float:left;
	width:45%;
	margin-bottom:15px;
}

/* 商品名
----------------------------------------------- */
#recommend_area2 .productContents h3 {
	font-size:120%;
	margin-bottom:5px;
}

/* 価格
----------------------------------------------- */
#recommend_area2 .bloc_body .productContents .price_area {
	padding:0 0 5px 0;
}

#recommend_area2 .bloc_body .productContents .sale_price {
	color:#C30;
}

#recommend_area2 .bloc_body .productContents .price {
	font-size:150%;
	font-family:"Arial Black", Gadget, sans-serif;
	color: #EA0000;
	text-align: right;
}

#recommend_area2 .bloc_body .productContents .tax {
	display:none;
}

/* コメント
----------------------------------------------- */
#recommend_area2 .bloc_body .productContents .comment {
	clear:both;
	/*display:none; */ /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}

#three_maincolumn #recommend_area2 .bloc_body .productContents .comment {
	clear:both;
	display:none;  /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}

/* -----------------------------------------------
■　No.3 縦3列で表示
=============================================== */

/* 各アイテムのボックス
----------------------------------------------- */
#recommend_area3 .product_item {
    float: left;
	width:33%;
	margin-right:1px;
	margin-bottom:15px;
}

/* 画像（読み込み画像と同じ大きさ）
----------------------------------------------- */
#recommend_area3 .bloc_body .productImage {
	width:170px;
}

/*画像の枠
-----------------------------------------------*/
#recommend_area3 .bloc_body .productImage {
	padding:5px;
	background-color:#FFF;
	border:#999 1px solid;
    margin:0 5px 5px 0;
}

/* 商品名
----------------------------------------------- */
#recommend_area3 .productContents h3 {
	border-bottom:#999 1px dotted;
}

/* 説明ボックス
----------------------------------------------- */
#recommend_area3 .bloc_body .productContents {
	padding-right:10px;
}

/* 価格
----------------------------------------------- */
#recommend_area3 .bloc_body .productContents .sale_price {
	display:none;
}

#recommend_area3 .bloc_body .productContents .price {
	font-size:130%;
	font-family:"Arial Black", Gadget, sans-serif;
	color: #EA0000;
	text-align: right;
}

#recommend_area3 .bloc_body .productContents .tax {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#666;
	font-size:80%;
}

/* コメント（2カラム 他）
----------------------------------------------- */
#recommend_area3 .bloc_body .productContents .comment {
	border-left:#CCC 1px solid;
	padding-left:5px;
	/*display:none;*/  /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}

/* コメント（3カラム 他）
----------------------------------------------- */
#three_maincolumn #recommend_area3 .bloc_body .productContents .comment {
	display:none;  /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}

/* -----------------------------------------------
■　No.4 縦4列で表示
=============================================== */

/* 各アイテムのボックス
----------------------------------------------- */
#recommend_area4 .product_item {
    float: left;
	width:25%;
	margin-bottom:15px;
}

/* 画像（読み込み画像と同じ大きさ）
----------------------------------------------- */
#recommend_area4 .bloc_body .productImage {
	width:130px;
}

/*画像の枠
-----------------------------------------------*/
#recommend_area4 .bloc_body .productImage {
	padding:3px;
	background-color:#FFF;
	border:#999 1px solid;
    margin:0 5px 5px 0;
}

/* 商品名
----------------------------------------------- */
#recommend_area4 .productContents h3 {
	border-bottom:#999 1px dotted;
}

/* 説明ボックス
----------------------------------------------- */
#recommend_area4 .bloc_body .productContents {
	padding-right:10px;
}

/* 価格
----------------------------------------------- */
#recommend_area4 .bloc_body .productContents .sale_price {
	display:none;
}

#recommend_area4 .bloc_body .productContents .price {
	font-size:110%;
	font-family:"Arial Black", Gadget, sans-serif;
	color: #EA0000;
	text-align: right;
}

#recommend_area4 .bloc_body .productContents .tax {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#666;
	font-size:90%;
}

/* コメント（2カラム 他）
----------------------------------------------- */
#recommend_area4 .bloc_body .productContents .comment {
	border-left:#CCC 1px solid;
	padding-left:5px;
	/*display:none;*/  /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}

/* コメント（3カラム 他）
----------------------------------------------- */
#three_maincolumn #recommend_area4 .bloc_body .productContents .comment {
	display:none;  /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}

/* -----------------------------------------------
■　No.5 縦5列で表示
=============================================== */

/* 各アイテムのボックス
----------------------------------------------- */
#recommend_area5 .product_item {
    float: left;
	width:20%;
	margin-bottom:15px;
}

/* 画像（読み込み画像と同じ大きさ）
----------------------------------------------- */
#recommend_area5 .bloc_body .productImage {
	width:105px;
}

/*画像の枠
-----------------------------------------------*/
#recommend_area5 .bloc_body .productImage {
	padding:3px;
	background-color:#FFF;
	border:#999 1px solid;
    margin:0 5px 5px 0;
}

/* 商品名
----------------------------------------------- */
#recommend_area5 .productContents h3 {
	border-bottom:#999 1px dotted;
}

/* 説明ボックス
----------------------------------------------- */
#recommend_area5 .bloc_body .productContents {
	padding-right:10px;
}

/* 価格
----------------------------------------------- */
#recommend_area5 .bloc_body .productContents .sale_price {
	display:none;
}

#recommend_area5 .bloc_body .productContents .price {
	font-size:110%;
	font-family:"Arial Black", Gadget, sans-serif;
	color: #EA0000;
	text-align: right;
}

#recommend_area5 .bloc_body .productContents .tax {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#666;
	font-size:90%;
}

#three_maincolumn #recommend_area5 .bloc_body .productContents .tax {
	display:none;
}

/* コメント（2カラム 他）
----------------------------------------------- */
#recommend_area5 .bloc_body .productContents .comment {
	border-left:#CCC 1px solid;
	padding-left:5px;
	/*display:none;*/  /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}

/* コメント（3カラム 他）
----------------------------------------------- */
#three_maincolumn #recommend_area5 .bloc_body .productContents .comment {
	display:none;  /* ←非表示：「display:none;」 表示：「/*display:none;*/」 */
}