@charset "Shift-JIS";

/**//*!
*  - v1.5.0
* Homepage:http://bqworks.com/slider-pro/
* Author:bqworks
* Author URL:http://bqworks.com/
*/

.slider-pro{
position:relative;
margin:0 auto;
-moz-box-sizing:content-box;
box-sizing:content-box;}

.sp-slides-container{
position:relative;
box-shadow:0 0 0 #fff,0 0 3px #fff ,0 0 10px #fff ,0 0 5px #fff ,0 0 20px #adf1ff ,0 0 20px #adf1ff;}

.sp-mask{
position:relative;
overflow:hidden;}

.sp-slides{
position:relative;
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;}

.sp-slide{position:absolute;}
.sp-slide img{width:100%;}

.sp-image-container{
overflow:hidden;}

.sp-image{
position:relative;
display:block;
border:none;}

.sp-no-js{
overflow:hidden;
max-width:100%;}

@media screen and (max-width:1100px){
.slider-pro{margin:0 auto;}}

/*button*/
.sp-buttons{
position:relative;
width:100%;
text-align:center;
padding-top:10px;
filter:drop-shadow(2px 2px 2px rgba(0,0,0,.5));}
.sp-rtl .sp-buttons{direction:rtl;}
.sp-button{
width:18px;
height:15px;
background-image:url(../images/top/slide/btn_off.png);
background-size:cover;
background-repeat:no-repeat;
margin:0 4px;
display:inline-block;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
cursor:pointer;
filter:drop-shadow(2px 2px 1px rgba(0,0,0,.5));}
.sp-selected-button{background-image:url(../images/top/slide/btn_on.png);}

@media screen and (max-width:1200px){
.sp-buttons{padding-top:10px;}
.sp-button{width:18px; height:15px;}}

@media screen and (max-width:640px){
.sp-buttons{padding-top:5px;}}

/*arrow*/
.sp-previous-arrow,.sp-next-arrow{
display:block;
position:absolute;
top:44%;
width:46px;
height:68px;
background-size:cover;
filter:drop-shadow(2px 2px 1px rgba(0,0,0,.5));}

.sp-previous-arrow{left:-70px; background-image:url(../images/top/slide/slide01.png);}
.sp-next-arrow{right:-70px; background-image:url(../images/top/slide/slide02.png);}

.sp-previous-arrow:hover,
.sp-next-arrow:hover{cursor:pointer;}

@media screen and (max-width:640px){
.sp-previous-arrow,.sp-next-arrow{width:50px; height:61px;}
.sp-previous-arrow{left:-50px;}
.sp-next-arrow{right:-50px;}}

@media screen and (max-width:480px){
.sp-button{width:10px; height:8px;}}

/*fade animation*/
.sp-fade-full-screen{opacity:0;
-webkit-transition:opacity 0.5s;
transition:opacity 0.5s;}

.slider-pro:hover .sp-fade-full-screen{opacity:1;}