/* レイアウトのためのスタイル */
.container {
  margin: auto;
}



.item_name {
  margin: 0px auto 10px ;
  text-align: center;
}

.main-img {
  max-height: 60vh;
  max-width: 100%;
  display: flex;
  aspect-ratio: 3 / 2;
  margin: auto;
}
.main-img img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  margin: auto;
  object-position: center;
}

/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  border: 1px solid red;
  transition: border .5s;
}

.sub-img {
  display: flex;
  margin-top: 10px;
}
.sub-img li {
  margin-right: 2%;
}
.sub-img li img {
  border: 1px solid transparent;
  transition: border .5s;
}
.sub-img img {
  cursor: pointer;
  width: 100%;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {


}


.btn07 a {
  margin: auto;
}


@media not all and (min-width: 1024px) {
}


/* レスポンシブデザイン */
@media (max-width: 1024px) {


}