@charset "UTF-8";
/*///////////////////////////////////////////////////////////////////////

おすすめ商品

///////////////////////////////////////////////////////////////////////*/
/* ========================================================================================================
カードタイプ
========================================================================================================*/
.recomsys-feature {
  --content-margin: 21px;
  margin: 0 var(--content-margin) 20px;
}
.recomsys-feature_ttl.-band {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 20px;
  padding: 0 20px;
  background-color: #c40000;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
}
.recomsys-feature_ttl.-txt {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
}
.recomsys-feature_ttl.-vertex {
  margin-bottom: 34px;
  font-size: 22px;
  text-align: center;
}
.recomsys-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 12px;
  margin-bottom: 30px;
}
.recomsys-feature-item {
  display: block;
  width: 213px;
  color: #333;
  text-decoration: none;
}
.recomsys-feature-fig {
  position: relative;
}
.recomsys-feature-fig span {
  position: absolute;
  top: -17px;
  right: 0px;
  display: block;
  width: 52px;
  height: 45px;
  text-indent: -9000px;
  overflow: hidden;
}
.recomsys-feature-fig span[id$=s_rank1], .recomsys-feature-fig span#rank1_s {
  background: url(/public/img/img_ranking/icon_s_ranking1.png) no-repeat 0 0;
}
.recomsys-feature-fig span[id$=s_rank2], .recomsys-feature-fig span#rank2_s {
  background: url(/public/img/img_ranking/icon_s_ranking2.png) no-repeat 0 0;
}
.recomsys-feature-fig span[id$=s_rank3], .recomsys-feature-fig span#rank3_s {
  background: url(/public/img/img_ranking/icon_s_ranking3.png) no-repeat 0 0;
}
.recomsys-feature_pic {
  margin-bottom: 5px;
}
.recomsys-feature_pic img {
  border-radius: 6px;
  width: 213px;
  height: 160px;
  -o-object-fit: contain;
     object-fit: contain;
}
.recomsys-feature_maker {
  position: absolute;
  top: 6px;
  left: 6px;
}
.recomsys-feature_name {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.recomsys-feature-price {
  display: flex;
  align-items: center;
}
.recomsys-feature-price * {
  color: #f00;
}
.recomsys-feature-price_ttl {
  margin-right: 8px;
  font-size: 12px;
}
.recomsys-feature-price_txt {
  display: flex;
  align-items: flex-end;
  line-height: 1;
}
.recomsys-feature-price_num {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
}
.recomsys-feature-price_unit {
  font-size: 12px;
}

/* ====================================================
画面ごとの設定
====================================================*/
.recomsys-feature.-recom-page {
  margin-top: 34px;
}
.recomsys-feature.-recom-page .recomsys-feature-list.-partial li:nth-of-type(n+13) {
  display: none;
}
.recomsys-feature.-recom-page .recomsys-feature-more {
  --btn-height: 55px;
  --padding-top: 135px;
  --padding-bottom: 36px;
  position: relative;
  top: -248px;
  margin-bottom: calc((var(--padding-top) + var(--padding-bottom) + var(--btn-height)) * -1);
  padding: var(--padding-top) 0 var(--padding-bottom);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 42%, rgb(255, 255, 255) 100%);
  text-align: center;
}
@media  {
  .recomsys-feature.-recom-page .recomsys-feature-more {
    top: -249px;
  }
}
.recomsys-feature.-recom-page .recomsys-feature-more a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--btn-height);
  padding: 0 58px 0 50px;
  border: 1px solid #2467c5;
  border-radius: 10px;
  color: #2467c5;
  font-size: 20px;
  text-decoration: none;
}
@media  {
  .recomsys-feature.-recom-page .recomsys-feature-more a {
    display: flex;
    justify-content: center;
    width: 28vw;
    margin: 0 auto;
  }
}
.recomsys-feature.-recom-page .recomsys-feature-more a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 30px;
  display: inline-block;
  width: 11px;
  height: 19px;
  margin: auto 0;
  background: url(/sp2/public/img/common/icon_next-moderatecobaltblue.svg) left top no-repeat;
  background-size: contain;
  transform: rotate(90deg);
}
.recomsys-feature.-sttop {
  margin: 50px var(--content-margin) 50px;
}
.recomsys-feature.-item-menu {
  margin-bottom: 38px;
}
.recomsys-feature.-item-menu .recomsys-feature_ttl.-band {
  margin-left: calc(var(--content-margin) * -1);
  margin-right: calc(var(--content-margin) * -1);
}
.recomsys-feature.-noresult {
  margin: 70px var(--content-margin) 70px;
}
.recomsys-feature.-ememo {
  margin-bottom: 88px;
}
.recomsys-feature.-wishlist {
  margin-bottom: 70px;
}
.recomsys-feature.-form-complete {
  margin: 55px var(--content-margin) 75px;
}

/* ========================================================================================================
カルーセルタイプ
========================================================================================================*/
.recomsys-carousel_ttl.-txt {
  margin: 0 20px 18px;
  font-size: 20px;
  font-weight: 600;
}
.recomsys-carousel-list {
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  margin: 0 0 30px 20px;
}
.recomsys-carousel-list::-webkit-scrollbar {
  display: none;
}
.recomsys-carousel-list li {
  flex: none;
  width: 160px;
  margin-right: 25px;
  padding-top: 25px;
}
.recomsys-carousel-item {
  display: block;
  color: #333;
  text-decoration: none;
}
.recomsys-carousel-fig {
  position: relative;
}
.recomsys-carousel_rank {
  position: absolute;
  top: -17px;
  right: 0px;
  display: flex;
  flex-direction: column;
}
.recomsys-carousel-fig span {
  display: block;
  width: 52px;
  height: 45px;
  text-indent: -9000px;
  overflow: hidden;
}
.recomsys-carousel-fig span[id$=s_rank1], .recomsys-carousel-fig span#rank1_s {
  background: url(/public/img/img_ranking/icon_s_ranking1.png) no-repeat 0 0;
}
.recomsys-carousel-fig span[id$=s_rank2], .recomsys-carousel-fig span#rank2_s {
  background: url(/public/img/img_ranking/icon_s_ranking2.png) no-repeat 0 0;
}
.recomsys-carousel-fig span[id$=s_rank3], .recomsys-carousel-fig span#rank3_s {
  background: url(/public/img/img_ranking/icon_s_ranking3.png) no-repeat 0 0;
}
.recomsys-carousel_pic img {
  width: 160px;
  height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
}
.recomsys-carousel_maker {
  position: absolute;
  top: 0px;
  left: 0px;
}
.recomsys-carousel_name {
  margin: 5px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.1ex;
  max-height: 100%; /* AndroidのChrome：font-size大きい不具合対応 */
}
.recomsys-carousel-price_ttl {
  color: #333;
  font-size: 12px;
  line-height: 1.25;
}
.recomsys-carousel-price_txt {
  display: flex;
  align-items: center;
  padding-left: 4px;
  color: #f00;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.recomsys-carousel .recomsys-feature-price_txt {
  display: flex;
  align-items: center;
  padding-left: 4px;
  color: #f00;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.recomsys-carousel .recomsys-feature-price_num {
  font-size: inherit;
}

.recomsys-carousel .recomsys-feature-price_unit {
  font-size: inherit;
}

/* ====================================================
画面ごとの設定
====================================================*/
.recomsys-carousel.-item-execute {
  margin-top: 15px;
  margin-bottom: 50px;
}
.recomsys-carousel.-item-detail {
  margin-bottom: 40px;
}

/* ====================================================
もっと見るリンク
====================================================*/
.recomsys-show-more.-btn {
  text-align: center;
}
.recomsys-show-more.-btn a {
  --height: 43px;
  display: inline-flex;
  align-items: center;
  height: var(--height);
  padding: 0 36px;
  border: 1px solid #b4b4b4;
  color: #333;
  border-radius: calc(var(--height) / 2);
  text-decoration: none;
}
.recomsys-show-more.-txt {
  text-align: right;
}
.recomsys-carousel .recomsys-show-more.-txt {
  margin-right: 17px;
}

.recomsys-show-more.-txt a {
  padding-right: 17px;
  background: url(/public/img/common/icon_next-strongsapphireblue.svg) right center no-repeat;
  background-size: 8px auto;
  color: #0034ca;
  text-decoration: none;
}/*# sourceMappingURL=recommend-system.css.map */