/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  border: 2px solid #4c96ff;
  background-color: rgb(77, 151, 255, 0.1);
  transition: border 0.3s;
}
/* レイアウトのためのスタイル */
.container {
  margin: 50px auto 0;
  max-width: 500px;
}
.main-img {
  height: auto;
  width: 100%;
}
.main-img img {
  height: auto;
  width: 100%;
}
.sub-img {
  display: flex;
  margin-top: 10px;
}
.sub-img li {
  margin-right: 2%;
  width: calc(96% / 3);
  list-style: none;
}

.sub-img li img {
  border: 2px solid transparent;
  transition: border 0.3s;
}
.sub-img img {
  cursor: pointer;
  width: 100%;
}