@charset "UTF-8";

#slider{width:100%;margin:0 auto;padding:0;}
.slide-item img{width:100%;height: auto;}
#thumbnail-list{width:1000px;margin:0 auto;padding:0 0 60px;flex-wrap:wrap;text-align:center;letter-spacing:-1em}
.thumbnail-item{display:inline-block;letter-spacing:0;width:15%;margin:0 5px;box-sizing:border-box;position:relative;cursor:hand;cursor:pointer;vertical-align: top;}
.thumbnail-item:after{content:'';background-color:rgba(255,255,255,.5);position:absolute;display:block;top:0;left:0;width:100%;height:100%;opacity:1;transition:.3s opacity linear}.thumbnail-item.thumbnail-current:after{opacity:0}
.thumbnail-item img{width:100%;margin:0 auto}
.thumbnail-item p{font-size:12px;line-height:20px;position:inherit;bottom:inherit;width:100%;text-align:center;opacity:.5}
.thumbnail-current p{opacity:1}

img.prev-arrow {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
left:2%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
z-index: 1;
}
img.next-arrow {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
right:2%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
z-index: 1;
}
.slick-slide .pc,
.thumbnail-item .pc{display: block;}
.slick-slide .tab,
.thumbnail-item .tab{}
.slick-slide .sph,
.thumbnail-item .sph{display: none;}

@media screen and (max-width:959px){
#slider,#thumbnail-list{width:100%;margin:0 auto}
#slider{min-width:inherit;padding:0;}
.slide-item img{width:100%}
#thumbnail-list{padding:0 0 5%;flex-wrap:wrap;text-align:center;letter-spacing:-1em}
.thumbnail-item{display:inline-block;letter-spacing:0;width:15%;margin:0 1%;box-sizing:border-box;position:relative;vertical-align: top;}
.thumbnail-item:after{content:'';background-color:rgba(255,255,255,.5);position:absolute;display:block;top:0;left:0;width:100%;height:100%;opacity:1;transition:.3s opacity linear}
.thumbnail-item.thumbnail-current:after{opacity:0}
.thumbnail-item img{width:100%;margin:0 auto}
.thumbnail-item p{font-size:12px;line-height:18px;position:inherit;bottom:inherit;width:100%;text-align:center;opacity:.5}
.thumbnail-current p{opacity:1}

.slick-slide .pc,
.thumbnail-item .pc{display: block;}
.slick-slide .tab,
.thumbnail-item .tab{}
.slick-slide .sph,
.thumbnail-item .sph{display: none;}
}
@media screen and (max-width:767px){
#slider,#thumbnail-list{width:100%;margin:0 auto}
#slider{min-width:inherit;padding:0;}
.slide-item img{width:auto;height: 100vw;}
#thumbnail-list{padding:0 0 5%;flex-wrap:wrap;text-align:center;letter-spacing:-1em}
.thumbnail-item{display:inline-block;letter-spacing:0;width:23%;margin:0 1% 0 0;box-sizing:border-box;position:relative;vertical-align: top;}
.thumbnail-item:after{content:'';background-color:rgba(255,255,255,.5);position:absolute;display:block;top:0;left:0;width:100%;height:100%;opacity:1;transition:.3s opacity linear}
.thumbnail-item.thumbnail-current:after{opacity:0}
.thumbnail-item img{width:100%;margin:0 auto;}
.thumbnail-item p{font-size:10px;line-height:16px;position:inherit;bottom:inherit;width:100%;text-align:center;opacity:.5}
.thumbnail-current p{opacity:1}

img.prev-arrow {
width: 28px;
height: 28px;
position: absolute;
top: 50%;
left:2%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
z-index: 1;
}
img.next-arrow {
width: 28px;
height: 28px;
position: absolute;
top: 50%;
right:2%;
transform: translateY(-50%);
-webkit- transform: translateY(-50%);
z-index: 1;
}

.slick-slide .pc,
.thumbnail-item .pc{display: none;}
.slick-slide .tab,
.thumbnail-item .tab{}
.slick-slide .sph,
.thumbnail-item .sph{display: block;}

}




#slider{
  opacity: 0;
  transition: opacity 1s linear;
}
#slider.slick-initialized{
  opacity: 1;
}