@charset "utf-8";

.swiper-container {
width:350px;
margin: 10px auto;
}
#swiper01 .swiper-button-prev, 
#swiper01 .swiper-button-next,
#swiper02 .swiper-button-prev, 
#swiper02 .swiper-button-next {
opacity: 0;
transition: opacity 1s;
}
#swiper01 .swiper-button-prev.hover, 
#swiper01 .swiper-button-next.hover,
#swiper02 .swiper-button-prev.hover, 
#swiper02 .swiper-button-next.hover {
opacity: 1;
}
#swiper01 .swiper-button-prev.swiper-button-disabled.hover, 
#swiper01 .swiper-button-next.swiper-button-disabled.hover,
#swiper02 .swiper-button-prev.swiper-button-disabled.hover, 
#swiper02 .swiper-button-next.swiper-button-disabled.hover {
opacity: 0.35;
}
/*
* {
box-sizing: border-box;
}
*/
.swiper-slide img {
max-width: 100%;
}
.swiper-slide .slide-content .caption {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-size: 16px;
background-color: #666;
padding: 3px 8px;
}
/* サムネイルでアクティブなものには枠線を表示 */
.thumbs-slider .swiper-slide-thumb-active img {
border: 4px solid #F6B5B6;
border: 3px solid #007aff;
box-sizing: border-box;
}
/* アクティブでないサムネイル */
.thumbs-slider .swiper-slide {
opacity: 0.8;
box-sizing: border-box;
}
/* アクティブなサムネイル */
.thumbs-slider .swiper-slide-thumb-active {
opacity: 1;
box-sizing: border-box;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: #fff;
}
.swiper-lazy-preloader {
top: 210px;/*高さ420pxより*/
margin-top: -21px;
}

@media screen and (max-width: 480px){
.swiper-container {
max-width: 100%;
height:auto;
margin: 8px auto 16px;
}
.swiper-lazy-preloader {
top: 50%;/*高さ可変なのでデフォルト値に戻す*/
margin-top: -21px;
}
}
