/*
 * Shop list gallery styles.
 * 本番化を前提にした恒久ファイルです。test 固有の名称は使っていません。
 * 固定ページ本文全体を <div class="shoplist-gallery-page">...</div> で囲んだ場合のみ効きます。
 */
.shoplist-gallery-page .shop-gallery {
  width: 100%;
}

.shoplist-gallery-page .shop-gallery__main,
.shoplist-gallery-page .shop-gallery__main li {
  margin: 0;
  padding: 0;
}

.shoplist-gallery-page .shop-gallery__main a {
  display: block;
  width: 100%;
  aspect-ratio: 54 / 38;
  overflow: hidden;
  background: #f4f4f4;
}

.shoplist-gallery-page .shop-gallery__main img,
.shoplist-gallery-page .shop-gallery .bx-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 既存 pages.css の .shoplist .right .bx-wrapper .bx-viewport { height: 380px !important; } を上書きします。 */
.shoplist-gallery-page .shoplist .right .bx-wrapper .bx-viewport {
  height: auto !important;
}

.shoplist-gallery-page .shop-gallery__pager {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.shoplist-gallery-page .shop-gallery__pager a {
  flex: 0 0 var(--shop-gallery-thumb-width, calc((100% - 30px) / 6));
  display: block;
  aspect-ratio: 10 / 7;
  overflow: hidden;
  margin-right: 0;
  background: #f4f4f4;
}

.shoplist-gallery-page .shop-gallery__pager img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shoplist-gallery-page .shop-gallery__pager a.active,
.shoplist-gallery-page .shop-gallery__pager a:hover {
  opacity: .65;
}

@media screen and (max-width: 810px) {
  .shoplist-gallery-page .shop-gallery__pager {
    display: none;
  }
}