﻿.bx-wrapper {
position:relative;
padding:0;
-ms-touch-action:pan-y;
touch-action:pan-y;
}

.bx-wrapper img {
max-width:100%;
display:block;
width:100%;
height:100%;
}

.bxslider {
margin:0;
padding:0
}

ul.bxslider {
list-style:none
}

.bx-viewport {
-webkit-transform:translatez(0)
}

.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
position:absolute;
bottom:10px;
width:100%
}

.bx-wrapper .bx-loading {
min-height:50px;
background:url(../img/loading.gif) center center no-repeat #fff;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:2000
}

.bx-wrapper .bx-pager {
text-align:center;
font-size:.85em;
font-family:Arial;
font-weight:700;
color:#666;
padding-top:20px
}

.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.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus,
.bx-wrapper .bx-pager.bx-default-pager a:hover {
background:#000
}

.bx-wrapper .bx-controls-auto .bx-controls-auto-item,
.bx-wrapper .bx-pager-item {
display:inline-block;
vertical-align:bottom
}

.bx-wrapper .bx-pager-item {
font-size:0;
line-height:0
}

.bx-wrapper .bx-prev {
display: none;
left:10px;
background:url(images/controls.png) 0 -32px no-repeat
}

.bx-wrapper .bx-prev:focus,.bx-wrapper .bx-prev:hover {
background-position:0 0
}

.bx-wrapper .bx-next {
display: none;
right:10px;
background:url(images/controls.png) -43px -32px no-repeat
}

.bx-wrapper .bx-next:focus,.bx-wrapper .bx-next:hover {
background-position:-43px 0
}

.bx-wrapper .bx-controls-direction a {
position:absolute;
top:50%;
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 {
text-align:center
}

.bx-wrapper .bx-controls-auto .bx-start {
display:block;
text-indent:-9999px;
width:10px;
height:11px;
outline:0;
background:url(images/controls.png) -86px -11px no-repeat;
margin:0 3px
}

.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus,
.bx-wrapper .bx-controls-auto .bx-start:hover {
background-position:-86px 0
}

.bx-wrapper .bx-controls-auto .bx-stop {
display:block;
text-indent:-9999px;
width:9px;
height:11px;
outline:0;
background:url(images/controls.png) -86px -44px no-repeat;
margin:0 3px
}

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

.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
}

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

.bx-wrapper .bx-caption span {
color:#fff;
font-family:Arial;
display:block;
font-size:.85em;
padding:10px
}



.bx-pager{
width: 100%;
text-align: center;
position: absolute;
top: 300px;   /* ページャーの縦位置指定 */
}

.bx-pager a{
display: inline-block; /* text-align: centerでセンター寄せしているので、インライン要素にしつつ、margin: 0 0 0 5px;での調整がしたいので */
width: 10px;
height: 0;
padding-top: 10px;
background:url(../js/bxslider/slide_pointer.png) no-repeat 0 0;
margin: 0 8px 0 8px;   /* ページャーの間隔調整 */
zoom: 1;
overflow: hidden;
}

.bx-pager a:first-child {  /* margin: 0 0 0 5px;の5pxを一番左の物だけ解除 */ }

/* ページャーのロールオーバー・現在位置の指定 */
.bx-pager a:hover{background:url(../js/bxslider/slide_pointer.png) no-repeat 0 -10px; }
.bx-pager a.pager-active{background:url(../js/bxslider/slide_pointer.png) no-repeat 0 -10px;}

