@import url("https://www.ecshopserver.net/js/slick/slick.css");
@import url("https://www.ecshopserver.net/js/slick/slick-theme.css");
@import url("https://www.ecshopserver.net/js/lightbox2/css/lightbox.css");

/*写真と商品情報のwrap*/
.item-wrap{
	display: flex;
	gap: 0 20px;
}
/*写真エリアの横幅（外側）*/
#photoSCT{
	width: 400px;
}
/*各写真のwrap*/
.slickBox{
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FFF;
}
.slickBox a{
	display: flex;
  height:100%;
  justify-content: center;
	align-items: center;
}
.slickBox img{
	object-fit: contain;
  	max-width: 100%;
	max-height: 100%;
}
/*ドットのwrap（slickが生成）*/
.slick-dots{
	width: 100%;
	padding: 10px 0 0 ;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 2%;
	position: relative;
	bottom: 0;
}
/*ドット*/
.slick-dots li {
	height: initial;
	aspect-ratio: 1 / 1!important;
	width: 23.5%;/*4つで94、上記gapが6で100*/
	border: none;
	margin: 0;
}
/*ドットの中のブロック要素／背景画像を指定*/
.slick-dots li span {
	display: block;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/*border: 2px solid transparent;*/
	cursor: pointer;
}
/* アクティブ枠
.slick-dots li.slick-active span {
  border-color: #f00;       
} */
/*デフォで薄く、マウスオーバーとアクティブは濃く*/
.slick-dots li{
	opacity: 0.6;
	transition-duration: .2s;
}
.slick-dots li:hover,
.slick-dots li.slick-active{
	opacity: 1;
}