/*===============================================
　　全体レイアウト
===============================================*/

.bx-wrapper {
position: relative;
margin: 0 auto 0px;/*中央寄せ*/
padding: 0;
*zoom: 1;
border:1px solid #ccc;/*外枠線*/
padding:5px;
}

.bx-wrapper img {
max-width: 100%;
display: block;
}
.bx-wrapper .bx-viewport {
background: #fff;/*背景色*/

/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}
.bx-viewport{
height:auto!important;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}

/*===ページ数表示〇===*/
.bx-wrapper .bx-pager {
text-align: center;/*中央寄せ*/
font-size: .85em;/*サイズ*/
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;/*上余白*/
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;/*背景色*/
text-indent: -9999px;
display: block;
width: 10px;/*幅*/
height: 10px;/*高さ*/
margin: 0 5px;/*余白*/
outline: 0;
-moz-border-radius: 5px;/*角丸*/
-webkit-border-radius: 5px;/*角丸*/
border-radius: 5px;/*角丸*/
}
/*===ページ数表示・現在の表示頁●===*/
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;/*背景色*/
}

/*===次へ・戻るページ送りボタン===*/
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 0%;
margin-top: -16px;/*縦位置*/
outline: 0;
width: 32px;/*幅*/
height: 32px;/*高さ*/
text-indent: -9999px;
z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}


.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}

.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
div.bx-viewport{
margin:0 auto;/*リスト全体の余白中央寄せ*/
width:95%!important;/*リスト全体の幅*/
}

/*===============================================
　　PC
===============================================*/

/*--タイトル--*/
div.slidertitle{
background:#fff url(bg.png);/*タイトル背景画像*/
border-top:solid 1px #ccc;/*タイトル上線*/
border-left:solid 1px #ccc;/*タイトル左線*/
border-right:solid 1px #ccc;/*タイトル右線*/
font-weight:bold;/*文字太さ*/
padding:10px;/*余白*/
}
/*--タイトル日付--*/
div.slidertitle span.date{
font-size:0.8em;/*文字サイズ*/
font-weight:normal;/*文字太さ*/
}
/*--スライド内リスト--*/
.bxslider ul{
/*width:100%;*//*幅*/
list-style-type: none;/*リストなし*/
   margin:0 auto;/*余白*/
    padding: 0;/*余白*/
}
/*--各商品--*/
.bxslider ul li{
display:inline-block;
width:18%;/*幅*/
float:left;/*左づけ*/
list-style:none;/*リストの点なし*/
padding:5px 1% 0 1%;/*余白*/
}
.bxslider ul li img{
width:100%;/*画像幅*/
border:solid 1px #ccc;/*画像回り枠線*/
-webkit-transition: 0.3s ease-in-out; /*hover時にゆっくり変わる*/ 
    -moz-transition: 0.3s ease-in-out;  /*hover時にゆっくり変わる*/
    -o-transition: 0.3s ease-in-out;  /*hover時にゆっくり変わる*/
    transition: 0.3s ease-in-out; /*hover時にゆっくり変わる*/
opacity: 1;  /*透明度0*/
-moz-opacity: 1;/*透明度0/FF*/
    filter: alpha(opacity=100);/*透明度0/IE*/
}
.bxslider ul li img:hover{
 opacity: 0.6;  /*透明度0.6*/
 -moz-opacity: 0.6; /*透明度0.6/FF*/
    filter: alpha(opacity=60); /*透明度0.6/IE*/
}
/*--商品テキスト--*/
.bxslider ul li p{
padding:0 5px;
font-size:12px;/*文字サイズ*/
line-height:1.4em;
}
/*--商品価格--*/
.bxslider ul li p.price{
color:#ff0000;/*文字色*/
line-height:1.0em;
margin-top:-0.3em;

}
/*--税込表記--*/
.bxslider ul li p.price span.tax{
font-size:10px;/*文字サイズ*/
padding-left:5px;/*左余白*/
}
/*-ランキング表示--*/
.bxslider ul li.box{
padding-top:25px;/*上空白*/
margin-bottom:-25px;
}
/*--スライド送りボタン--*/
div.bx-controls-direction{
-webkit-transition: 0.3s ease-in-out;  /*hoverでゆっくり現れる*/
    -moz-transition: 0.3s ease-in-out;   /*hoverでゆっくり現れる*/
    -o-transition: 0.3s ease-in-out;   /*hoverでゆっくり現れる*/
    transition: 0.3s ease-in-out;   /*hoverでゆっくり現れる*/
opacity: 0;   /*通常時は透過100%*/
    filter: alpha(opacity=0);  /*通常時は透過100%*/
z-index:999;
height:100%;
}
div.bx-controls-direction:hover{
opacity: 1;  /*hover時に0%*/
    filter: alpha(opacity=100); /*hover時に0%*/
}
/*--次へボタン--*/

div.bx-controls-direction a.bx-prev {
background: url(slide_left.png) no-repeat 0 50%;/*次へボタン*/
left:0px;/*左からの位置*/
width:35px;/*画像幅*/
height:100%;/*hover有効高さ*/
}
 
div.bx-controls-direction .bx-prev a:hover {
background-position:0 50%;
}


/*--スライド戻しボタン--*/
div.bx-controls-direction a.bx-next{
width:35px;/*画像幅*/
height:100%;/*hover有効高さ*/
right: 0px;/*右からの位置*/
  background-image:url(slide_right.png);/*戻るボタン*/
background-position: 0 50%;/*背景位置*/
background-repeat:no-repeat;/*背景繰り返し*/
}

div.bx-controls-direction .bx-next:hover {
background-position:0 50%;
}

/*===============================================
　　スマートフォン
===============================================*/
/*--スライド送りボタン--*/
.bxslid_sp div.bx-controls-direction{
opacity: 1;  
    filter: alpha(opacity=0);   
position:relative;
bottom:0;

}
.bxslid_sp .bx-wrapper .bx-controls-direction a {
position:relative;
}
.bxslid_sp div.bx-viewport{
margin:0 auto;/*リスト全体の余白中央寄せ*/
width:100%!important;/*リスト全体の幅*/
height:auto!important;
}

/*スマートフォン用戻るボタン*/
.bxslid_sp div.bx-controls-direction a.bx-prev {
background:url(left.png) no-repeat 0 100%;/*ボタン背景*/
width:35px;/*ボタン画像幅*/
height:35px;/*ボタン画像高さ*/
padding-top:30px;/*ボタン画像上空白*/
float:left;
}
.bxslid_sp div.bxslid_sp div.bx-wrapper .bx-prev:hover {
background-position:0 100%;
}


/*--スライド次へボタン--*/
.bxslid_sp div.bx-controls-direction a.bx-next{
width:35px;/*ボタン画像幅*/
height:35px;/*ボタン画像高さ*/
  background-image:url(right.png);/*ボタン背景*/
background-repeat:no-repeat;/*画像繰り返し*/
background-position: 0 100%;/*画像位置*/
padding-top:30px;/*ボタン画像上空白*/
float:right;/*右つけ*/
right: 10px;/*右からの位置*/
}

.bxslid_sp div.bx-wrapper .bx-next:hover {
background-position:0 100%;
}


/*--スライドタイトル--*/
div.slidertitle{
background:#fff url(bg.png);/*タイトル背景*/
border-top:solid 1px #ccc;/*タイトル上枠線*/
border-left:solid 1px #ccc;/*タイトル左枠線*/
border-right:solid 1px #ccc;/*タイトル右枠線*/
font-weight:bold;/*文字太さ*/
padding:10px;/*余白*/
}
div.slidertitle span.date{
margin-left:10px;/*日付空白*/
font-size:0.8em;/*フォントサイズ*/
font-weight:normal;/*文字太さ*/
}
/*--スライド内リスト--*/

.bxslider_sp ul{
margin:0 auto;/*文字太さ*/
width:100%;/*幅*/
list-style-type: none;/*リスト点なし*/
    margin: 0;
    padding: 0;
}
/*--各商品--*/
div.bxslider_sp ul li{
display: inline-block;
width:31%!important;/*商品ブロック幅*/
float:left;
list-style:none;
margin-bottom:-13px;
padding:5px 1% 0 1%;/*余白*/
}
/*--各商品画像--*/
.bxslider_sp ul li img{
width:100%;
border:solid 1px #ccc;/*枠線*/ 
}
/*--商品テキスト--*/
.bxslider_sp ul li p{
font-size:12px;/*文字サイズ*/
padding:0 5px;
line-height:1.2em;
}
/*--商品価格--*/
.bxslider_sp ul li p.price{
color:#ff0000;/*文字色*/
line-height:1.0em;
margin-top:-0.3em;

}
/*--税込表記--*/
.bxslider_sp ul li p.price span.tax{
font-size:10px;/*文字サイズ*/
padding-left:5px;
}