/*==================================================
スライダーのためのcss
===================================*/
/*画像の横幅を100%にしてレスポンシブ化*/
img {
    width: 100%;
    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: 42%;
    cursor: pointer;
    /*マウスカーソルを指マークに*/
    outline: none;
    /*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;
    /*矢印の色*/
    border-right: 2px solid #ccc;
    /*矢印の色*/
    height: 25px;
    width: 25px;
}

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

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

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

.choice-btn li {
    cursor: pointer;
    outline: none;
    background: #333;
    width: 20% !important;
    list-style: none;
}

.choice-btn li img {
    opacity: 0.4;
    /*選択されていないものは透過40%*/
}

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