@charset "UTF-8";
.top .top-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top .top-img li:nth-of-type(5) {
  margin-right: 0;
}
.items > div .detail ul.resale li:last-of-type {
  white-space: nowrap;
  margin-left: -2em;
}
.items > div .detail ul.resale.coffee li:last-of-type {
  margin-left: -2em;
}
.items > div .detail ul li.resale a::after, .items > div .detail ul li.new a::after {
    display: block;
    content: "";
    background: url(../common/images/icon-resale.svg) no-repeat;
    width: 15.3846153846vw;
    height: 15.3846153846vw;
    background-size: contain;
    position: absolute;
    left: -15px;
    bottom: -15px;
}
.items > div.right-pc .detail ul li.resale a::after, .items > div.right-pc .detail ul li.new a::after {
    top: 0;
}
.items > div .detail ul li.new a::after {
  background: url(../common/images/icon-new.svg) no-repeat;
  background-size: contain;
}
.items > div .detail ul li.sold a::after {
  background: url(../common/images/icon-sold-sp.svg) no-repeat !important;
  background-size: contain !important
}
.items > div.oyatsucookie .detail ul li:nth-of-type(1) {
  width: 70vw;
}
.contents ul li.news::after {
    display: block;
    content: "";
    background: url(../images/index/icon-news.svg) no-repeat;
    width: 75px;
    height: 36px;
    background-size: contain;
    position: absolute;
    right: -8px;
    top: 0;
}
@media (min-width: 600px) {
  .top {
    padding-bottom: 10px;
  }
  .top .top-img {
    grid-template-columns: 11fr 15fr 11fr;
    grid-auto-rows: auto;
    gap: 10px;
  }
  .top .top-img li {
    grid-row: initial !important;
    grid-column: initial !important;
  }
  .top .top-img li.tall {
    grid-row: span 2 !important;
  }
  .items > div .detail ul.resale li:last-of-type {
    margin-left: -6em;
    text-align: left;
  }
  .items > div .detail ul.resale.coffee li:last-of-type {
    margin-left: -6em;
    margin-bottom: 150px;
  }
  .items > div .detail ul li.resale a::after, .items > div .detail ul li.new a::after {
    max-width: 80px;
    width: 5.291005291vw;
    max-height: 80px;
    height: 5.291005291vw;
    bottom: -30px;
  }
  .items > div.oyatsucookie .detail ul li:nth-of-type(1) {
    max-width: 460px;
    width: 26vw;
    margin-top: -3vw;
  }
  .oyatsucookie .cart_info img {
    margin: 40px 0 -50px;
  }
  .items > div.right-pc.oyatsucookie .detail ul li.resale a::after, .items > div.right-pc.oyatsucookie .detail ul li.new a::after {
    top: 30px;
  }
}
@media (min-width: 1260px) { 
  .items > div .detail ul.resale li:last-of-type {
    margin-left: -5em;
    bottom: -5em;
  }
  .items > div .detail ul.resale.coffee li:last-of-type {
    margin-left: -4em;
  }
}

@media (max-width: 600px) {
  .top {
    padding-bottom: 4px;
  }
  .top .top-img {
    grid-template-columns: 8fr 6fr;
    grid-template-rows: 2fr 2fr auto auto;
    grid-template-areas:
      "image-B image-A"
      "image-B image-C"
      "image-D image-D"
      "image-D image-D"
      "image-E image-E"
      "image-E image-E";
    gap: 4px;
  }
  .top .top-img li:nth-of-type(1) {
    grid-area: image-A;
  }
  .top .top-img li:nth-of-type(2) {
    grid-area: image-B;
    aspect-ratio: 1 / 1;
  }
  .top .top-img li:nth-of-type(3) {
    grid-area: image-D;
  }
  .top .top-img li:nth-of-type(4) {
    grid-area: image-C;
  }
  .top .top-img li:nth-of-type(5) {
    grid-area: image-E;
  }
}