@charset "UTF-8";

/* アクティブな画像の枠線を変更 */
.sub-img li.current img {
  border: 2px solid #8c3;
  transition: border .5s;
}
/* レイアウトのためのスタイル */
.container {
  margin: 0px auto 0;
  max-width: 320px;
}
.main-img {
  height: 320px;
  width: 320px;
}
.main-img img {
  height: auto;
  width: 100%;
}
.sub-img {
  display: flex;
  width:320px;
  padding-top: 15px;
/*  margin-top: 10px;*/
	flex-wrap: wrap;
}
.sub-img li {
  margin-right: 2%;
/*  width: calc(96% / 5);*/
  width: calc(94% / 4);
}
.sub-img li:nth-child(4n) {
  margin-right: 0;
}
.sub-img li img {
  border: 2px solid transparent;
  transition: border .5s;
}
.sub-img img {
  cursor: pointer;
  width: calc(100% - 10px);
  padding: 5px;
}