@charset "utf-8";
/* 「香港特集」レスポンシブ 商品枠オンリーCSS */
#product {
  .is-page-top & {
    background: url("../images/bg_pattern_graph.gif") repeat 0 0 / min((33vw / 7.5), 33px);
  }
  .is-page-lowerlayer & {
    background: url("../images/bg_pattern_yellow.gif") repeat 0 0 / min((50vw / 7.5), 50px);
  }
  .section__inner {
    width: var(--default-width2);
    &::before {
      content: "";
      display: block;
      width: var(--default-width);
      height: min((80vw / 7.5), 60px);
      background: #000 url("../images/product_kazari.webp") repeat-x left center / auto 100%;
      border: min((5vw / 7.5), 5px) solid #4b4b4b;
      box-shadow: min((4vw / 7.5), 4px) min((4vw / 7.5), 4px) 0px 0px rgba(0, 0, 0, .18);
      margin: 0 auto min((50vw / 7.5), 56px);
    }
  }
}
#product-tour .base-button__wrapper, #product-other {
  width: var(--default-width);
  margin-left: auto;
  margin-right: auto;
}
.product-block {
  &:not(:first-child) {
    margin-top: min((105vw / 7.5), 60px);
  }
  .base-button__wrapper {
    --btn-yohaku-ue: min((40vw / 7.5), 30px);
    #product-other & {
      --btn-w: 100%;
      --btn-gap: calc((35 / var(--default-width-sp-val)) * 100%);
      grid-template-columns: repeat(auto-fit, calc((100% - var(--btn-gap)) / 2));
      max-width: 100%;
      grid-row-gap: min((35vw / 7.5), 20px);
      @media (width >=992px) {
        --btn-gap: calc((8 / var(--default-width-pc-val)) * 100%);
        grid-template-columns: repeat(auto-fit, calc((100% - (var(--btn-gap) * 3)) / 4));
      }
    }
  }
}
.product-block__title {
  text-align: center;
  width: min(var(--default-width-sp), 824px);
  margin: auto;
  font-family: var(--default-ff-gothic-rockn);
  font-size: min((36vw / 7.5), 30px);
  line-height: 1;
  letter-spacing: .2em;
  #product-tour & {
    position: relative;
    height: min((162vw / 7.5), 169px);
    display: grid;
    align-content: center;
    .is-sp & {
      margin-bottom: min((40vw / 7.5), 40px);
    }
    &::before, &::after {
      content: "";
      position: absolute;
      background: var(--ttl-ico-bg, url("../images/product_title_kazari_left.webp")) no-repeat 0 0 / cover;
      width: var(--ttl-ico-size-w, min((148vw / 7.5), 148px));
      height: var(--ttl-ico-size-h, min((106vw / 7.5), 106px));
    }
    &::before {
      top: min((50vw / 7.5), 24px);
      left: 0;
    }
    &::after {
      --ttl-ico-bg: url("../images/product_title_kazari_right.webp");
      --ttl-ico-size-w: min((154vw / 7.5), 180px);
      --ttl-ico-size-h: min((144vw / 7.5), 169px);
      bottom: 0;
      right: max((-6vw / 7.5), -13px);
    }
    .base-title__inner {
      display: grid;
      gap: .7em;
    }
    .base-title__text--main--text {
      font-size: min((60vw / 7.5), 44px);
      letter-spacing: 1px;
      color: #fff;
      font-family: var(--default-ff-gothic);
      font-weight: bold;
      text-shadow: var(--default-text-shadow);
    }
  }
}
/*.product__list*/
.product__list--wrapper {
  --slider-pagination-gap: min((9vw / 7.5), 7px);
  --slider-pagination-size-h: min((16vw / 7.5), 14px);
  --slider-pagination-size-h-active: min((22vw / 7.5), 19px);
  .is-sp & {
    --product-gap: calc(25vw / 7.5);
    padding-bottom: min((60vw / 7.5), 38px);
    .product__list--track {
      --product-yhaku-yoko: calc(68vw / 7.5);
      padding-left: var(--product-yhaku-yoko) !important;
      padding-right: var(--product-yhaku-yoko) !important;
    }
  }
  .is-pc & {
    --product-gap: 16px;
    --product-yohaku-btm: 37px;
    padding: 0 calc(28px - (var(--product-gap) / 2)) var(--product-yohaku-btm) !important;
    .splide__arrow {
      transform: translateY(calc(-50% - (var(--product-yohaku-btm) / 2)));
    }
  }
  .splide__pagination__page {
    border: var(--default-border);
  }
}
.product__list--item {
  width: calc(100% / 4);
  @media (width <=980px) {
    .is-pc & {
      width: calc(100% / 3);
    }
    .is-sp & {
      width: calc(365vw / 7.5);
    }
  }
  margin-bottom: var(--default-shadow-size);
  .product__list--data, .product__list--inner {
    height: 100%;
  }
  .product__list--inner {
    margin: 0 calc(var(--product-gap) / 2);
    background: #fff;
    display: grid;
    grid-template-rows: auto 1fr;
    color: inherit;
    border: var(--default-border);
    box-shadow: var(--default-shadow);
  }
}
.product__list--images {
  background: #ccc;
  padding-top: calc((628 / 944) * 100%);
  position: relative;
}
.product__list--image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.product__list--type {
  display: none;
}
.product__list--text-wrapper {
  display: flex;
  flex-direction: column;
  padding: min((13vw / 7.5), 10px);
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: .5px;
}
.product__list--title {
  font-size: min((18vw / 7.5), 16px);
  line-height: calc(24 / 18);
  font-weight: bold;
  margin-bottom: .75em;
}
.product__list--detail {
  font-size: min((16vw / 7.5), 12px);
  color: #333;
}
.product__list--price {
  margin-top: auto;
  padding-top: min((10vw / 7.5), 10px);
  font-size: min((16vw / 7.5), 10px);
  color: #555;
}
.product__list--minmax {
  font-size: min((24vw / 7.5), 18px);
  color: var(--default-color-red);
  letter-spacing: 0;
  ~ [class^="product__list--"] {
    margin-top: .25em;
  }
  + [class^="product__list--"] {
    margin-top: .5em;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .product__list--contents {
    margin-top: var(--default-hover-move-tate-size);
  }
  .product__list--track {
    padding-top: min((10vw / 7.5), 20px) !important;
  }
  .product__list--inner {
    transition: var(--default-hover-transition4);
    transform: var(--move-posi);
    &:hover {
      --move-posi: translateY(var(--default-hover-move-tate-size));
    }
  }
}