@media (min-width: 768px) {
  :root {
    --logoSize: 308px;
  }
}
@media (min-width: 768px) and (max-width: 1600px) {
  :root {
    --logoSize: calc(120/768 * 100vw);
  }
}

body {
  background: url(../img/background_wallpaper@sp.webp) repeat-y;
  background-size: contain;
}
@media (min-width: 768px) {
  body {
    background: url(../img/background_wallpaper.webp) repeat-y;
    background-size: contain;
  }
}

.header {
  background: none;
}
@media (min-width: 768px) {
  .header__nav {
    display: flex;
    justify-content: space-between;
  }
}
@media (min-width: 768px) {
  .header .logo {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(18px + var(--promotionalBannerHeight));
    margin: auto;
    transition: opacity 0.3s ease, top 0.3s ease;
  }
}

.wrapper {
  padding: 0;
}
@media (max-width: 767px) {
  .wrapper {
    padding-top: var(--promotionalBannerHeight);
    transition: padding-top 0.3s ease;
  }
}

.mainContents {
  max-width: 100%;
  padding: 0;
}
.mainContents .itemList .goodsList {
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
@media (min-width: 1024px) {
  .mainContents .itemList .goodsList {
    grid-template-columns: repeat(4, 25%);
  }
}
.mainContents .itemList .goodsList .swiper-wrapper {
  margin: 0;
}

.mainContents.noItems {
  margin-top: 180px;
}

.itemListNoItem {
  padding: 80px 20px 0;
}

@media (max-width: 768px) {
  .mainContents.noItems {
    margin-top: 80px;
  }
  .itemListNoItem {
    padding: 80px 15px 0;
  }
}