@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 p {font-family:"Century Gothic", Futura, 'Avenir-Light',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", 'Noto Sans Japanese', sans-serif;}
}

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; line-height:2em;border:2px solid #BEEBE9;}
ul.item_box li::after  {content:"";display:block; width:100%;}
ul.item_box li+ li {}

ul.item_box li p {margin:0 auto; padding:1%; text-align:center; font-family:"Century Gothic", Futura, sans-serif;vertical-align:bottom;}
ul.item_box li p.brandname {font-size:1em; line-height:1.5em; margin-top:5px; height:2.4em;}
ul.item_box li p.price {color:#D00; font-size:1.5em; font-weight:bold; padding-bottom:10px;margin-top:20px;}
ul.item_box li p.price::before {content:"\0a5"; margin-left:-0.28em;}/*円マーク*/
ul.item_box li p.saleprice {color:#D00; font-size:1.5em; font-weight:bold; padding-bottom:10px;margin-top:0px;}
ul.item_box li p.saleprice::before {content:"\0a5"; margin-left:-0.28em;}/*円マーク*/
ul.item_box li p.normalprice {color:#000; font-size:1em; padding-bottom:10px;margin-top:0px;text-decoration: line-through;}
ul.item_box li p.normalprice::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 {padding:2px; background:none;}

ul.item_box li div.event {display:block;font-size:1.2rem; 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; }

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

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

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;}
}
@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(1) {border-bottom:none;}
ul.item_pc2 li:nth-child(2) {border-bottom:none; border-left: none;}
ul.item_pc2 li:nth-child(4) {border-left:none;}
ul.item_pc2 li:nth-child(5) {border-top:none;}

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

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

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

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


}
/*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;}

}