Cacher is the code snippet organizer for pro developers

	/**
	 * SWIPERインスタンス追加
	 */
	addSwiper() {
		this.SWIPER = new Swiper('.swiper-container', {
			slidesPerView: 'auto',
			centeredSlides: true,
			loop: true,
			// autoplay: {
			// 	delay: 5000,
			// 	disableOnInteraction: false
			// },
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			}
		});
	}

// スライドショー
.swiper-container { width: 100%; }
.swiper-slide { width: 1000px; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.swiper-button-next,
.swiper-button-prev { width: 54px; height:563px; top: 0; margin: 0; background: rgba(0,0,0,0.5); transition: .15s ease-out background; outline: none !important;
	@include icofont($icofont-arw-thin) { @include top-left(50%,50%); margin: -14px 0 0 -5px; color: $color-01; font-size:2.8rem; font-weight: bold;}
	&:hover { background: rgba(0,0,0,0.8); }
}
.swiper-button-next { right: 0;}
.swiper-button-prev { left: 0;
	&:before { transform: rotate(180deg); margin-left: -15px; }
}
@include sp{
	.swiper-wrapper { height:56.3vw; }
	.swiper-slide { width:100%; height: 56.3vw;
		img { width: 100%; height: 100%; object-fit: cover; }
	}
	.swiper-button-next,
	.swiper-button-prev { width: 40px; height:40px; top:28.1vw; bottom: 0; margin-top: -20px;
		// border-bottom:1px solid #ddd; 
		background: none !important; 
		box-shadow:none; outline:none;
		&:before { margin-top: -10px; font-size: 2rem; }
		// &:hover { background:#fff; }
	}
	.swiper-button-prev {  
		&:before { transform: rotate(180deg); margin-left: -10px; }
	}
}

.swiper-container#js-swiper-slide
	.swiper-wrapper
		.swiper-slide: img(src="images/01/slide/01.jpg",alt="")
		.swiper-slide: img(src="images/01/slide/02.jpg",alt="")
		.swiper-slide: img(src="images/01/slide/03.jpg",alt="")
	.swiper-button-prev
	.swiper-button-next