@charset "utf-8";

html{}
body{padding:0;margin:0;}
body{font-family:'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
body{font-size:0px;line-height:1;}

/*-----------------------*/
body *{margin:0;padding:0;border:none;outline:none;font-size:inherit;color:inherit;vertical-align:top;text-align:inherit;transition:0.5s;}


/* #page
------------------*/
body>#page{font-size:0;line-height:1;}
body>#page{overflow:hidden;}
#page{width:auto;display:block;position:relative;z-index:1;text-align:center;}

/* header
--------------------*/
@charset "utf-8";

html{}
body{padding:0;margin:0;}
body{font-family: Quicksand, '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
body{font-size:0px;line-height:1;}

/*-----------------------*/
body *{margin:0;padding:0;border:none;outline:none;font-size:inherit;color:inherit;vertical-align:top;text-align:inherit;transition:0.5s;}

footer{display:none;}
/* #page
------------------*/
body>#page{font-size:0;line-height:1;}
body>#page{overflow:hidden;}
#page{width:auto;display:block;position:relative;z-index:1;text-align:center;}


img[src*='tp11.png']{width:100%;}



#itemList{position:relative;}

#addCartInfo.hide{height:0;opacity:0;}

#addCartInfo{width:100%;height:100%;opacity:1;
background:rgba(0,0,0,0.6);position:absolute;top:0%;
left:0;text-align:center;}

#addCartInfo span{font-size:20px;width:100%;position:absolute;top:50%;margin-top:-1.5em;
color:#fff;left:0;text-align:center;line-height:1.5;}
#addCartInfo span a{display:block;text-decoration:none;font-size:1em;width:50%;
margin:0 auto;min-width:200px;color:#000;border-radius:5px;
background:#fff;}

/*-----------------------------------*/
ul[class^='col']{display:block;}
ul[class^='col'] li{display:inline-block;vertical-align:top;}
ul[class^='col'] li a{display:block;text-decoration:none;outline:none;}

ul.col4 li{width:calc(24.1%);margin:1.2% 0 0 1.2%;}
ul.col4 li:nth-of-type(4n+1){margin-left:0;}

ul.col3 li{width:32%;margin:0 0 2% 2%;}
ul.col3 li:nth-of-type(3n+1){margin-left:0%;}

ul.col5 li{width:calc(20% - 4px);margin:5px 0 0 5px;}
ul.col5 li:nth-of-type(5n+1){margin-left:0;}

.itemBox ul>li>a{display:block;padding:0px;}
.itemBox ul>li>a>p{display:block;padding-top:5px;font-size:12px;line-height:20px;}

.itemBox ul>li>a>p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.itemBox ul>li>a>dl>dd[data-title]::before{content:attr(data-title);display:inline-block;
vertical-align:top;margin-right:0.5em;color:#fff;background:rgb(161, 0, 0);
font-size:12px;line-height:20px;vertical-align:top;padding:0 10px;
font-weight:normal;
}


.itemBox ul>li>a>figure{background:transparent no-repeat 50% 50%;background-size:100% 100%;}
.itemBox ul>li>a>figure{transition: .4s;}
.itemBox ul>li>a:hover>figure{box-shadow:0 0 0 5px  rgb(204, 0, 0) inset}


.itemBox ul>li>a>p span:after{display:inline-block;color:inherit;content:'円';}


.itemBox a figure{position:relative;display:block;}

.itemBox a figure::after{content:'';
display:block;font-size:80px;width:2em;height:2em;margin: -1em 0 0 -1em;
line-height:0;
background:rgba(0,0,0,0.2) url(../cs/cart_btn.png) no-repeat 50% 50%;background-size:50%;
position:absolute;top:50%;left: 50%;opacity:0;
transition:0.5s;border-radius:100%;z-index:0;
}


.itemBox a:hover figure::after{opacity:1;z-index:0;
transform:scale(0.5) ;border-radius:100%;}


/*-------------------------------------*/
@media screen and (max-width: 640px) {
.itemBox a figure::after{font-size:12vw;}
}


@media screen and (max-width: 480px){
header h2{background:#c00;color:#fff;}
header h2{line-height:30px !important;;font-size:18px !important;letter-spacing:1px;font-weight:bold;padding:5px 5px !important;;}

ul.col4 li{width:32%;margin:0 0 2% 2% !important;}
ul.col4 li:nth-of-type(3n+1){margin-left:0% !important;}
}