@charset "utf-8";
/* CSS Document */

/*【スライド大枠】
-------------------------------------------------------------
…ボタンを含めたスライダーの最大幅（600px）と、next/prevボタン画像の指定
flexsliderの仕様を上書き
-------------------------------------------------------------*/
/*中身によって高さを可変させる場合は高さを指定しない*/
.slideWrap { margin: 0 auto; padding: 0; width: 999px;}
.hbslider { border: none !important; margin: 0 auto; padding: 0; position:relative; -webkit-box-sizing: border-box; box-sizing: border-box; }
.hbslider .flex-viewport { margin: 0 auto; overflow:hidden !important; width:999px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.flexslider-container { position:relative;}


/*Prev/Nextボタン
--------------------------------------------*/
.hbslider .flex-direction-nav { font-size: 0; line-height: 0; margin: 0 auto; width:100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
.hbslider .flex-direction-nav li { display:inline-block; }

.hbslider .flex-direction-nav li a.flex-prev { background:url(/bc/images/shop_top_hobby/20180328_hobby_slider_prev.png) no-repeat; display:block; height:65px; overflow:hidden; position:absolute; left: -80px !important; top:45%; text-indent: 100%; white-space:nowrap; width:65px; z-index: 10;}
.hbslider .flex-direction-nav li a.flex-next { background:url(/bc/images/shop_top_hobby/20180328_hobby_slider_next.png) no-repeat; display:block; height:65px; overflow:hidden; position:absolute; right:-80px !important; top:45%; text-indent: 100%; white-space:nowrap; width:65px; z-index: 10;}

/*prev/nextボタンを常に表示させる
（※この指定を消すと、スライダーhover時にだけ現れるボタンになります）*/
.hbslider .flex-direction-nav a { opacity: 1;}

.hbslider .flex-control-nav { bottom: 0;}

/*【スライド中身】
-------------------------------------------------------------
…まとめてスライドする部分の最大幅（999px）と、中身1つ1つのサイズと装飾

※何個ずつスライドするかについてはJSのほうで指定しています。
-------------------------------------------------------------*/
.slides { margin: 0 auto; padding: 0; -webkit-box-sizing:padding-box; box-sizing:padding-box; }
.slides ul {font-size: 0; line-height: 0; margin: 0 auto !important; padding: 0 0 20px 0; -webkit-box-sizing:padding-box; box-sizing:padding-box; }

.slides ul li { display:inline-block; margin: 0 auto 10px auto; padding: 0 0 10px 0; vertical-align:top; width:33.33%; -webkit-box-sizing:padding-box; box-sizing:padding-box;}
.slides ul li:nth-child(-n+3) { border-bottom: solid 1px #ccc;}



/*リンクの挙動
backface-visibility: hidden;　…Chromeでhover時に1px挙動するのを防ぐため
zoom:1;　…IEでhover時に1px挙動するのを防ぐため
--------------------------------------------*/
.slides ul li img {backface-visibility: hidden;  height:auto !important; margin: 0 0 3px 0; width:100%; filter:alpha(opacity=100); -ms-filter:"alpha(opacity=100)"; opacity:1; transition:all ease-in-out .25s; -webkit-transition:all ease-in-out .25s; zoom:1;}

/*【！】1商品ごとのpaddingはここで取る*/
.slides ul li a { display: block; line-height: 0; padding: 0 2%}

.slides ul li a:hover img,
.slides ul li a:active img { filter:alpha(opacity=90); -ms-filter:"alpha(opacity=90)"; opacity:0.9; }
.slides ul li a:focus { outline:none;} 


/*基本のテキスト
--------------------------------------------*/
/*商品名*/
/*※高さ揃えるJSだと実行時に若干ガタつくので、JSは辞めて高さ固定*/
.slides ul li span { display:inline-block; font-size:11px; height: 30px; line-height:13px; margin:0; overflow: hidden; padding:0 0 0 12px; text-indent:-12px; vertical-align: top;}

/*商品名冒頭に「▲」を付ける*/
.slides ul li span:before { content:"\25B2"; display:inline-block; height:14px; line-height:14px; margin:0 1px 0 0; padding: 0 0 0 12px; text-indent:-12px; vertical-align:top; width:11px; -webkit-box-sizing:border-box; box-sizing:border-box; } 


/*バナー上のテキスト
--------------------------------------------*/
/*※高さ揃えるJSだと実行時に若干ガタつくので、JSは辞めて高さ固定*/
/**/
.slides ul li div.slhead{ display: inline-block; font-size: 0; min-height: 20px; line-height: 0; margin: 0 0 2px 0; padding:0; text-indent: 0; vertical-align: baseline; width: 100%;}
.slides ul li div.slhead:before { display: none;}

/*次月アイコン*/
.slides ul li div.slhead big { background: #fff; border: 2px solid #f00; border-radius: 3px; color: #f00; display: inline-block; font-size:10px; font-weight: bold; line-height:11px; margin:0 3px 0 0; padding:2px 3px 0 3px; vertical-align: top; width: auto; -webkit-box-sizing:border-box; box-sizing:border-box; }

/*発送月アイコン*/
.slides ul li div.slhead small { background: #fff; border: 2px solid #666; border-radius: 3px; color: #333; display: inline-block; font-size:10px; font-weight: bold; line-height:11px; margin:0 3px 0 0; padding:2px 3px 0 3px; vertical-align: top; width: auto; -webkit-box-sizing:border-box; box-sizing:border-box; }

/*その他テキスト*/
.slides ul li div.slhead strong { display: inline-block; font-size:11px; line-height:11px; margin:0; padding:4px 0 0 0; vertical-align: top; -webkit-box-sizing:border-box; box-sizing:border-box; }