﻿@charset "utf-8";

/* slick
---------------------------------------*/


.slick-slider{max-width:100vw;overflow:hidden;}
.slick-dots{display:block;text-align:center;}
.slick-dots li{display: inline-block !important;margin:0 5px;
padding: 0;cursor: pointer;background:#eee;}

.slick-dots{padding:9px 0;}
.slick-dots li{width: 12px;height: 12px;border-radius:100%;}
.slick-dots li button{width: 12px;height:12px;font-size:0 !important;}

.slick-dots li button{background:transparent;display: block;width: 20px;height: 5px;cursor: pointer;outline: none;font-size:0 !important;border-radius:100%;border:0;}
.slick-dots li:hover,.slick-dots li:focus{outline: none;}
.slick-dots li:hover,.slick-dots li:focuse{opacity: 1;}
.slick-dots li.slick-active{opacity: 1;background:#bfa451;}

.slick-arrow{position:absolute;display:block;background:rgba(0,0,0,0) no-repeat 50% 50%;border-radius:0%;width:30px;height:30px;border:0;z-index:1;top:50%;margin-top:-50px;outline: none;font-size:0 !important;cursor:pointer;}


.slick-arrow:before{
content:'';display:block;width:80%;
height:80%;background:transparent no-repeat 50% 50%;margin:0;
/*background-image:linear-gradient(-45deg,#000 50%,transparent 50%);*/
background-size:100% 100%;transform-origin:50% 50%;transform:rotate(-45deg);
color:#999;box-shadow:-2px 0 0 inset,0 -2px 0 0 inset;
}


.slick-next{right:0;}
.slick-prev{left:0;transform:scale(-1,1)}


@media screen and (min-width: 480px) {

.slick-dots{padding:9px 0;}
.slick-dots li{width: 12px;height: 12px;border-radius:100%;}
.slick-dots li button{width: 12px;height:12px;font-size:0 !important;}
.slick-arrow{width:30px;height:30px;}

}



/* #subSlide
----------------*/
#subSlide{width:1350px;margin:0 auto;padding:10px 0}

#subSlide .slick-next{right:-0px;}
#subSlide .slick-prev{left:-0px;transform:scale(-1,1)}


#subSlide li>a{display:block;text-align:center;padding:0 10px;box-sizing:border-box !important;}
#subSlide .slick-arrow{width:20px;height:20px;margin-top:-10px;}
#subSlide .slick-arrow{position:absolute;display:block;
border:0;border-radius:0;z-index:1;outline: none;font-size:0 !important;border-radius:100%;}


#subSlide .slick-arrow{top:50%;opacity:0;transition:0.5s;}
#subSlide .slick-arrow{opacity:1 !important;}


#subSlide .slick-arrow::before{color:#000;width:50%;height:50%;margin:0 auto 0 20%;}


/* #mainSlide
----------------*/
#mainSlide{max-width:1160px;margin:0 auto;}
#mainSlide li img{max-width:1145px;margin:0 auto;}

#mainSlide,
#mainSlide .slick-list,
#mainSlide .slick-slider{overflow:visible !important;}

/* 全画面
#mainSlide,
#mainSlide .slick-list,
#mainSlide .slick-slider{overflow:visible !important;}
*/

#mainSlide li img{width:100%;}
#mainSlide li>a{display:block;}
#mainSlide .slick-arrow{width:35px;height:35px;margin-top:-15px;}
#mainSlide .slick-arrow{position:absolute;display:block;
background-color:rgba(255,255,255,0.8);border:0;border-radius:0;z-index:1;outline: none;font-size:0 !important;border-radius:100%;}

/*
#mainSlide .slick-dots{position:absolute;bottom:0;width:100%;}
*/

#mainSlide .slick-arrow{top:50%;opacity:0;transition:0.5s;}
#mainSlide .slick-arrow{opacity:1 !important;}


#mainSlide .slick-arrow::before{color:#000;width:40%;height:40%;margin:0 auto 0 20%;}


#mainSlide .slick-slide img{opacity:1;transition:1s;}
#mainSlide .slick-center img{opacity:1;}
#mainSlide .slick-slide img:hover {opacity:0.7;}





@media screen and (min-width: 1200px) {
#mainSlide .slick-arrow{opacity:0;transition:0.5s;}
#mainSlide .slick-next{right:calc(46.7% - 560px);}
#mainSlide .slick-prev{left:calc(46.7% - 560px);transform:scale(-1,1)}

}

/* #cookSlide
----------------*/
#cookSlide{max-width:840px;margin:0 auto;}
#cookSlide li img{max-width:840px;margin:0 auto;}

#cookSlide,
#cookSlide .slick-list,
#cookSlide .slick-slider{overflow:hidden !important;}
#cookSlide .slick-arrow{width:30px;height:30px;margin-top:-30px;}
#cookSlide .slick-arrow{position:absolute;display:block;border:0;border-radius:0;z-index:1;outline: none;font-size:0 !important;border-radius:100%;}

/* 全画面
#cookSlide,
#cookSlide .slick-list,
#cookSlide .slick-slider{overflow:visible !important;}
*/

/*#cookSlide li img{width:100%;}
#cookSlide li>a{display:block;}*/


/*
#cookSlide .slick-dots{position:absolute;bottom:0;width:100%;}
*/

/*#cookSlide .slick-arrow{top:50%;opacity:0;transition:0.5s;}
#cookSlide .slick-arrow{opacity:1 !important;}


#cookSlide .slick-arrow::before{color:#000;width:40%;height:40%;margin:0 auto 0 20%;}


#cookSlide .slick-slide img{opacity:0.4;transition:1s;}
#cookSlide .slick-center img{opacity:1;}





@media screen and (min-width: 840px) {
#cookSlide .slick-arrow{opacity:0;transition:0.5s;}
#cookSlide .slick-next{right:calc(50% - 560px);}
#cookSlide .slick-prev{left:calc(50% - 560px);transform:scale(-1,1)}

}*/

/* .itemList
----------------*/


.iWrap{padding:0px 10px;}
/*.iWrap a{box-shadow:-1px 0 0 0  #ccc,1px 0 0 0 #ccc;display:block;}*/

.iImg{background:transparent no-repeat 50% 50%;background-size:cover;}
.iImg img{width:100%;}
.iInfo{text-align:center;font-size:11px;line-height:20px;padding:5px 0px 0;text-align:left;}
.iPrice{color:#c00;padding:5px 0 00;margin:0;text-align:center;}
.iPrice p{display:inline-block;font-size:1.4em}
.iPrice p::after{}
.iPrice[data-tax]::after{content:'円(税込)';}
.iPrice[data-tax='0']::after{content:'円(税抜)';}

.itemList li{vertical-align:top;}
.itemList li a{position:relative;overflow:hidden;text-decoration:none;}


@media screen and (max-width: 480px) {
.itemList li>a .iPrice p::before{display:none;}
.itemList li>a .iPrice p::after{font-size:10px;}
}


#page[data-id="pickItem"]{max-width:1100px;margin:0 auto;}



/*
li[data-rank] .iWrap{position:relative;}
li[data-rank] .iWrap::before{content:'';display:block;
line-height:20px;text-align:left;
text-indent:10px;background:#E72617;color:#fff;font-size:12px;text-align:center;
}

li[data-rank="1"] .iWrap::before{content:'1位';}
li[data-rank="2"] .iWrap::before{content:'2位';}
li[data-rank="3"] .iWrap::before{content:'3位';}
li[data-rank="4"] .iWrap::before{content:'4位';}
li[data-rank="5"] .iWrap::before{content:'5位';}
li[data-rank="6"] .iWrap::before{content:'6位';}
li[data-rank="7"] .iWrap::before{content:'7位';}
li[data-rank="8"] .iWrap::before{content:'8位';}
li[data-rank="9"] .iWrap::before{content:'9位';}
li[data-rank="10"] .iWrap::before{content:'10位';}
*/
