@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
img{
 width: 100%;
 height: auto;
 vertical-align: bottom;/*画像の下にできる余白を削除*/
}

.gallery{
 margin:0 0 5px 0;
}
@media screen and (max-width: 767px){
 ul.gallery {
 height:100vw;
 overflow: hidden;
 }
}
/*矢印の設定*/
.gallery li:nth-child(2n-1) {display:block; height:500px; overflow: hidden;}
.gallery li:nth-child(2n) {background: #d1f6fd;}
.gallery li a img{height:500px;object-fit: cover;}


/*戻る、次へ矢印の位置*/
.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);
}

/*選択するサムネイル画像の設定*/
ul.choice-btn{height:120px; overflow: hidden;}
.choice-btn li{
 cursor: pointer;
 outline: none;
 background:#333;
}

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

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