@charset "UTF-8";
/*
|---------------------------------------------------------------
| fs-recommend.css
|---------------------------------------------------------------
*/
:root {
  --mbs-recommend-gap: 10px;
  --mbs-recommend-shadow-gap: 10px;
}
@media (min-width: 750.02px) {
  :root {
    --mbs-recommend-gap: 20px;
    --mbs-recommend-navigation-size: var(--mbs-slider-navigation-size);
  }
}

/*
 * FR Template: mb2025-fr-products
------------------------------------------------*/
.mbr-lineup {
  display: block;
  width: 100%;
}
.mbr-lineup a {
  color: inherit;
  text-decoration: none !important;
}
.mbr-lineup__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mbr-lineup__list__item {
  container-type: inline-size;
  display: flex;
}

.mbr-product {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--mbs-recommend-gap, 10px) * 1.25);
  font-size: 12px;
  font-size: clamp(12px, 5.56cqw, 14px);
}
.mbr-product-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  color: #1e1e1e;
  background-color: #ffffff;
  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
}
.mbr-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.mbr-product-name {
  display: block;
  width: 100%;
  margin: 0 0 0.5em;
  font-size: 1em;
  font-weight: 700;
}

.mbr-product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 0.5em;
  font-size: 1.29em;
  font-weight: 700;
}
.mbr-product-price__main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.mbr-product-price__main__value {
  display: block;
  font-family: var(--mbs-font-family-en, inherit);
}
.mbr-product-price__main__addon {
  display: block;
  font-size: 0.56em;
}
.mbr-product-price__addon {
  font-size: 0.56em;
}

/*--------------- Price format ---------------*/
.mbr-product-price__main__value::before {
  content: "¥";
}
.mbr-product-price__main__addon {
  display: none;
}

/*
 * CC
------------------------------------------------*/
.mbjs-recommend-wrapper:not(.js--active) {
  display: none !important;
}

.mbjs-recommend[class*=is-slider] {
  container-type: inline-size;
  overflow: hidden;
  position: relative;
}
@media (max-width: 750px) {
  .mbs-container .mbjs-recommend[class*=is-slider] {
    width: auto;
    margin-left: calc(-1 * var(--mbs-container-padding));
    margin-right: calc(-1 * var(--mbs-container-padding));
  }
  .mbs-container .mbjs-recommend[class*=is-slider] .mbr-lineup {
    padding-left: 25px;
    padding-right: 25px;
    overflow: visible;
  }
}
@media (min-width: 750.02px) {
  .mbjs-recommend[class*=is-slider] {
    padding: 0 calc(var(--mbs-recommend-navigation-size) * 2);
  }
}
.mbjs-recommend[class*=is-slider] .mbr-lineup {
  width: auto;
  margin-left: calc(-1 * var(--mbs-recommend-shadow-gap));
  margin-right: calc(-1 * var(--mbs-recommend-shadow-gap));
  padding-left: calc(var(--mbs-recommend-shadow-gap, 0px));
  padding-right: calc(var(--mbs-recommend-shadow-gap, 0px));
}
.mbjs-recommend[class*=is-slider] .mbr-lineup:not(.swiper-initialized) .mbr-lineup__list {
  width: 100%;
  display: grid;
  gap: var(--mbs-recommend-gap, 0);
}
@media (max-width: 750px) {
  .mbjs-recommend[class*=is-slider] .mbr-lineup:not(.swiper-initialized) .mbr-lineup__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mbjs-recommend[class*=is-slider] .mbr-lineup:not(.swiper-initialized) .mbr-lineup__list__item:nth-child(n+3) {
    display: none;
  }
}
@media (min-width: 750.02px) {
  .mbjs-recommend[class*=is-slider] .mbr-lineup:not(.swiper-initialized) .mbr-lineup__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .mbjs-recommend[class*=is-slider] .mbr-lineup:not(.swiper-initialized) .mbr-lineup__list__item:nth-child(n+6) {
    display: none;
  }
}

/*--------------- Swiper pagination ---------------*/
@media (min-width: 750.02px) {
  .mbr-lineup-pagination {
    display: none !important;
  }
}
.mbr-lineup-pagination {
  --swiper-pagination-bullet-inactive-opacity: 0;
  display: flex;
  max-width: 66.67%;
  margin: 15px auto 0;
  border-bottom: 1px solid #dddddd;
  position: static;
}
.mbr-lineup-pagination .swiper-pagination-bullet {
  display: block;
  width: 0;
  height: 3px;
  background: none;
  margin: 0 !important;
  transform: translateY(1px);
  border-radius: 0;
  flex-grow: 1;
  flex-basis: 0;
}
.mbr-lineup-pagination .swiper-pagination-bullet-active {
  background: #000000;
}

/*--------------- Swiper navigation ---------------*/
@media (max-width: 750px) {
  .mbr-lineup-button-prev,
  .mbr-lineup-button-next {
    display: none !important;
  }
}
.mbr-lineup-button-prev,
.mbr-lineup-button-next {
  top: 33%;
  top: 9.4cqw;
  margin: auto;
  transform: translateY(-50%);
}
.mbr-lineup-button-prev::after,
.mbr-lineup-button-next::after {
  content: "";
  width: var(--mbs-recommend-navigation-size);
  height: var(--mbs-recommend-navigation-size);
  background: none;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: #000000;
}

.mbr-lineup-button-prev {
  left: calc(var(--mbs-recommend-navigation-size) * 0.22);
  right: auto;
}
.mbr-lineup-button-prev::after {
  transform: rotate(-135deg);
}

.mbr-lineup-button-next {
  left: auto;
  right: calc(var(--mbs-recommend-navigation-size) * 0.22);
}
.mbr-lineup-button-next::after {
  transform: rotate(45deg);
}

/*
 * 商品リストパーツ カスタマイズ
------------------------------------------------*/
.mbs-fs-p-product-wrapper:not(.js--active) {
  display: none;
}

.mbs-fs-p-product {
  --mbs-fs-p-product-gap: calc(var(--mbs-recommend-gap, 10px) * 1.25);
  container-type: inline-size;
  display: block;
  width: 100%;
  position: relative;
}
@media (min-width: 750.02px) {
  .mbs-fs-p-product {
    padding: 0 calc(var(--mbs-recommend-navigation-size) * 2);
  }
}
.mbs-fs-p-product.js--active .fs-c-productListCarousel {
  display: none;
}
.mbs-fs-p-product .mbr-lineup {
  width: auto;
  margin-left: calc(-1 * var(--mbs-recommend-shadow-gap));
  margin-right: calc(-1 * var(--mbs-recommend-shadow-gap));
  padding-left: calc(var(--mbs-recommend-shadow-gap, 0px));
  padding-right: calc(var(--mbs-recommend-shadow-gap, 0px));
}
.mbs-fs-p-product .mbr-lineup .fs-c-productListItem {
  max-width: 100%;
  flex-basis: auto;
}