/*==================================================
スライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/
img{
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/

.gallery{
	margin:0 0 5px 0;
}

.gallery li{
list-style:none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: -10%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 6px solid #ccc;/*矢印の色*/
    border-right: 6px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:87%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
	cursor: pointer;
	outline: none;
    list-style:none;
    width: 16%;
}

.choice-btn li img{
    width: 100%;
}

.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
    width: 100%;
}

.choice-btn .slick-track {
	transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
}


@media screen and (max-width:1270px) {
    .slick-next {
    right: 2%;
    transform: rotate(45deg);
}
.slick-prev, .slick-next {
    top: 0%;
}
}


@media screen and (max-width:991.98px) {
    
    /*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    top: 0%;

}

.slick-prev {/*戻る矢印の位置と形状*/
    left:85%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:1.0%;
    transform: rotate(45deg);
}



}

@media screen and (max-width: 767.98px) {
.slick-prev, .slick-next {
    height: 15px;
    width: 15px;
}
    
    .slick-prev, 
.slick-next {
    top: -3%;

}
    
    .slick-next {
        right: 8%;
        transform: rotate(45deg);
    }
    
    .slick-prev {
        left: 75%;
        transform: rotate(-135deg);
    }
    
    .slick-prev, .slick-next {
    border-top: 3px solid #ccc;
    border-right: 3px solid #ccc;
}
}

@media screen and (min-width: 320px)  {
   .choice-btn .slick-track {
    transform: unset !important;
    display: none;
}
}