.main {
  padding-top: var(--header-height);
}

@media (min-width: 1024px) {
  .main {
    background: url(../../image/doc/bestseller/bg.jpg) no-repeat bottom center;
  }
}
.bookshelfs__icon {
  display: block;
  width: 100%;
  height: 3.2rem;
  margin: 2rem 0 1.5rem;
  background: url(../../image/common/icon/icon__swipe.svg) no-repeat center/contain;
}
.bookshelfs__ttl {
  display: none;
  padding: 5rem 0 7rem;
  font-weight: 600;
  font-size: 5rem;
}

@media (min-width: 1024px) {
  .bookshelfs__icon {
    display: none;
  }
  .bookshelfs__ttl {
    display: block;
  }
}
.bookshelf__item {
  --bookshelf-shadow: 3.6rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: var(--bookshelf-shadow);
  padding: 0 1.6rem;
}
.bookshelf__item::before {
  position: absolute;
  left: 0;
  bottom: calc(var(--bookshelf-shadow) * -1);
  width: 100%;
  height: var(--bookshelf-shadow);
  background: url(../../image/doc/bestseller/bookshelf__shadow.svg) no-repeat center/100%;
  content: "";
}
.bookshelf__item::after {
  --height: .9rem;
  position: absolute;
  left: 0;
  bottom: calc(var(--height) * -1);
  width: 100%;
  height: var(--height);
  border-radius: 0 0 0.3rem 0.3rem;
  background: transparent linear-gradient(90deg, #C6C6C6 0%, #CBCBCB 7%, #D7D7D7 29%, #DCDCDC 50%, #D7D7D7 71%, #CBCBCB 93%, #C6C6C6 100%) 0% 0% no-repeat;
  content: "";
}
.bookshelf__link {
  display: flex;
  align-items: flex-end;
  width: 27.777%;
}
.bookshelf__link--wide {
  width: 40.277%;
}
.bookshelf img {
  width: 100%;
}

@media (min-width: 1024px) {
  .bookshelf__item {
    --bookshelf-shadow: 4.2rem;
    padding: 0 2rem;
  }
  .bookshelf__link {
    width: 28.229%;
  }
  .bookshelf__link--wide {
    width: 40.542%;
  }
}
@media (min-width: 1024px) {
  .swiper {
    width: 89.4rem;
    margin: 0 auto;
  }
  .swiper-wrapper {
    display: flex;
    justify-content: space-between;
  }
  .swiper-slide {
    width: 41.722%;
  }
}

/*# sourceMappingURL=bestseller.css.map */