@charset "utf-8";

body {
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px;
}

.single-goods__inner {
  display: grid;
  width: 100%;
  margin: 0 auto;
  background: #000;
}
.single-goods__col3 {
  order: 1;
}


.single-goods__main-img-list {
  margin-bottom: 2.666666666666667vw; /* 10px:375px */
}
.single-goods__main-img-list-item {
  display: none;
}
.single-goods__main-img-list-item.active {
  display: block;
}
.single-goods__main-img-list-item img {
  width: 100%;
  height: auto;
}
.single-goods__main-img-list-item .no-image {
  border: 1px solid #333;
}
.single-goods__sub-img-list {
  display: grid;
  gap: 1.3333333333333335vw; /* 5px:375px */
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 5.333333333333334vw; /* 20px:375px */
}
.single-goods__sub-img-list-item {
  aspect-ratio: 1 / 1;
}
.single-goods__sub-img-list-item--link {
  contain: content;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #000;
  border: 1px solid #111;
  cursor: pointer;
}
.single-goods__sub-img-list-item--link.active::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: auto;
  background: rgba(255,255,255,0.3);
}
.single-goods__sub-img-list-item--link img {
  width: 100%;
  height: auto;
}


.single-goods__name {
  margin-bottom: .5em;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
}
.single-goods__price {
  margin-bottom: .2em;
  color: #97843a;
  font-weight: bold;
}
.single-goods__price span {
  font-size: 10px;
}
hr {
  background: #666;
  border: none;
  height: 1px;
  margin: 1.6em 0;
}
.single-goods__spec, .single-goods__info {
  line-height: 1.75;
}
.single-goods__note {
  font-size: 10px;
  line-height: 1.75;
}
.single-goods__ec-btn {
  width: 53.333333333333336vw; /* 200px */
  height: 13.333333333333334vw; /* 50px */
  margin: 9.333333333333334vw auto 0; /* 35px */
}
.single-goods__ec-btn--link {
  display: grid;
  width: 100%;
  height: 100%;
  background: url(image/btn_ec.png) center/100% auto no-repeat;
  color: #fff;
  cursor: pointer;
  place-items: center;
}
.single-goods__ec-btn--link:visited, .single-goods__ec-btn--link:focus {
  color: #fff;
}


/* tab & pc */
@media (min-width: 700px) { /* iframe基準 */
  .single-goods__inner {
    gap: 2.604166666666667vw; /* 20px:768px */
    grid-template-columns: 1fr 1.5fr;
    padding: 5.208333333333334vw; /* 40px:768px*/
  }
  .single-goods__main-img-list {
    margin-bottom: 1.3020833333333335vw; /* 10px:768px */
  }
  .single-goods__sub-img-list {
    gap: 0.6510416666666667vw; /* 5px:768px */
    margin-bottom: 0;
  }
  .single-goods__sub-img-list-item--link {
    transition: .5s;
  }
  .single-goods__sub-img-list-item--link:hover {
    opacity: .6;
  }
  .single-goods__ec-btn {
    width: 26.041666666666668vw; /* 200px:768px */
    height: 6.510416666666667vw; /* 50px:768px */
    margin-top: 0;
  }
}

/* pc */
@media (min-width: 960px) { /* iframe基準 */
  body {
    font-size: 14px;
  }

  .single-goods__inner {
    gap: 2.083333333333333vw; /* 40px:1920px*/
    padding: 2.083333333333333vw; /* 40px:1920px*/
  }
  .single-goods__main-img-list {
    margin-bottom: 1.0416666666666665vw; /* 20px:1920px */
  }
  .single-goods__sub-img-list {
    gap: 0.5208333333333333vw; /* 10px:1920px */
  }
  .single-goods__name {
    font-size: 24px;
  }
  .single-goods__price span {
    font-size: 12px;
  }
  hr {
    margin: 1.75em 0;
  }
  .single-goods__note {
    font-size: 12px;
  }
  .single-goods__ec-btn {
    width: 15.625vw; /* 300px */
    min-width: 240px;
    height: 3.90625vw; /* 75px */
    min-height: 60px;
  }
  .single-goods__ec-btn--link {
    transition: .5s;
  }
  .single-goods__ec-btn--link:hover {
    opacity: .6;
  }
}