@charset "utf-8";
/* CSS Document */
/*■原則改変しない■*/

/*タグ掲載・商品リスト設定
ULのクラスに
【item】+【item_pc●】+【item_sp●】の3つをスペース区切りで指定する
PCとSPの並び個数をそれぞれ●の数字で制御します
挙動がおかしければ聞いてください

※画像だけの場合は【item_image】クラスを追加でボーダーを除去

※セットもあるよ
【item】+【item_set●】でスペース区切りで指定する
これはPC/SPの並び固定なので気を付けて(PCとSPのクラスはいらない)

※おまけクラス…追加でデザイン変更
【item_redprice】 価格を赤字に
*/
ul.item_box * { box-sizing:border-box;}
ul.item_box {margin:15px 0 ;font-size:0; padding:0; width:100%;list-style:none;}
ul.item_box, ul.item_box li {box-sizing:border-box; text-align:center;}
ul.item_box li {display:inline-block; font-size:13px; padding:10px 10px 0 10px; background:#FFF; position:relative; margin:0;}
ul.item_box li::after  {content:"";display:block; width:100%; border-bottom:1px solid #CCC;}
ul.item_box li+ li {border-left:1px solid #CCC;}

ul.item_box li p {margin:0 auto; padding:1%; text-align:center; font-family:"Century Gothic", Futura, sans-serif;}
ul.item_box li p.brandname {font-size:1.0em; line-height:1.4em; margin-top:5px;}
ul.item_box li p.price {font-size:1.5em; font-weight:normal; padding-bottom:10px;}
ul.item_box li p.price::before {content:"\0a5"; margin-left:-0.28em;}/*円マーク*/
ul.item_box li a {text-decoration:none; color:inherit;}
ul.item_box li a:hover {opacity:0.7;}
ul.item_redprice li p.price {color:#D00;}
ul.item_image li::after, ul.item_image li+ li, ul.item_image li {border:none;padding:2px; background:none;}

ul.item_box li div.event {display:block;font-size:1.2rem; border-top:4px double #222; text-align:left; padding-bottom:5px;}
ul.item_box li div.event span.label {display:inline-block; color:#FFF; margin:3px 6px 3px 3px;  background:#E33; padding:5px 10px; border-radius:5px;}

@media screen and (max-width: 768px) {
/*SP用リスト設定
SPは1～3個並びまで

※右側に1px余白でボーダーを引いてるのを改行時点で調整(border-right:1px solid #CCC;）
*/
ul.item_sp1 li {width:100%; border-left:none; font-size:1.7rem;border-left:none;}

ul.item_sp2 li {width:50%; font-size:1.2rem;}
ul.item_sp2 li:nth-child(2n+1) {border-left:none;}

ul.item_sp3 li {width:33%; font-size:0.9rem;}
ul.item_sp3 li:nth-child(3n+1) {border-left:none;}
}

ul.item_sp3 li div.saleitem div.saleitem_4 { font-size:1.45em; color:#D00; margin:3px 3px 3px 12px;}

@media screen and (min-width: 768px) {
/*PC用リスト設定
PCは2～6個並びまで

※左側に1px余白でボーダーを引いてるのを改行時点で調整(border-left:none;）
*/
ul.item_pc2 li {width:50%; font-size:1.5rem;}
ul.item_pc2 li:nth-child(2n+1) {border-left:none;}

ul.item_pc3 li {width:33%; font-size:1.3rem;}
ul.item_pc3 li:nth-child(3n+1) {border-left:none;}

ul.item_pc4 li {width:25%;}
ul.item_pc4 li:nth-child(4n+1) {border-left:none;}

ul.item_pc5 li {width:20%;}
ul.item_pc5 li:nth-child(5n+1) {border-left:none;}

ul.item_pc6 li {width:16.6%;}
ul.item_pc6 li:nth-child(6n+1) {border-left:none;}

ul.item_pc6 li div.saleitem div.saleitem_4 { font-size:1.4em; color:#D00; margin:3px 3px 3px 12px;}



/*PC・SPセットリスト設定
便利なセットタイプ

item_set1　⇒SP2、PC4
item_set2　⇒SP3、PC6

*/
@media screen and (max-width: 768px) {
ul.item_set1 li {width:50%; font-size:1.2rem;} /*　SP2並び　*/
ul.item_set1 li:nth-child(2n+1) {border-left:none;}
ul.item_set2 li {width:33%;  font-size:0.9rem} /*　SP3並び　*/
ul.item_set2 li:nth-child(3n+1) {border-left:none;}
ul.item_set3 li {width:50%;  font-size:1.2rem} /*　SP2並び　*/
ul.item_set3 li:nth-child(3n+1) {border-left:none;}

}

@media screen and (min-width: 768px) {
ul.item_set1 li {width:24.5%;}
ul.item_set1 li:nth-child(4n+1) {border-left:none;}
ul.item_set2 li {width:16.6%;border-left:none;}
ul.item_set2 li:nth-child(6n+1) {}
ul.item_set3 li {width:50%;border-left:none;} /*　PC2並び　*/
ul.item_set3 li:nth-child(2n+1) {border-left:none;}

}