@charset "utf-8";

/* ==============================
  キャンペーンアイコン
  ・セール（.-discount）
  ・クーポン（.-coupon）
  ・タイムセール（.-timesale）
  ・シークレットセール（.-secretsale）
  ・ノベルティ（.-novelty）
============================== */

/* =================================
   基本・共通スタイル
================================= */
/* アイコン下要素の位置調整 */
.search-result .product-text,
.catalog-content,
.rankingPage .product-text{
  margin-top: -15px;
}

/* キャンペーンアイコン基本設定 */
.catalog-campaignGroup{
  display:inline-flex;
  flex-wrap:wrap;
  min-height: 15px;
  transform: scale(calc(15/16));
  /* 元サイズheight:16px の時 min-height:15px; なら (15/16) */
  transform-origin:top left;
  width:calc((16/15) * 100%);
  /* 元サイズheight:16px の時 min-height:15px; なら (16/15) */
  max-width: max-content;
  position:relative;
  top: -15px;
}
.catalog-campaignGroup > li{
  height: 16px;
  display: flex;
}

.catalog-campaignGroup > li span{
  display: flex;
  align-items: center;
  padding: 0 .3em 0 .3em;
  /* この指定が元サイズ */
  font-size: 10px;
  color: #fff;
  letter-spacing: .02em;
}
.catalog-campaignGroup > li span:after{
  letter-spacing: 0;
}
/* 小ユニット用のリサイズ調整 */
:is(
  .section-myBrand,
  .section-campaignItems,
  .section-trendWord
) .catalog-campaignGroup {
  transform: scale(calc(13/16));
  width: calc((16/13) * 100%);
  transform-origin: top left;
  min-height: 13px;
  top: -13px;
}

:is(
  .section-myBrand,
  .section-campaignItems,
  .section-trendWord
) .catalog-content {
  margin-top: -13px;
}

/* =================================
   アイコン種類別スタイル  
================================= */
/* セール（.-discount） */
.catalog-campaignGroup > li.-discount span {
  background-color: rgba(237, 20, 61, 0.8);
}
.catalog-campaignGroup > li.-discount span:after {
  content: "OFF";
  margin-left: 0.1em;
}
.catalog-campaignGroup > li.-discount.-special span:after,
.catalog-campaignGroup > li.-discount.-outlet span:after,
span.-specialprice:after{
  display: none !important;
  margin-left: 0 !important;
}

/* タイムセール（.-timesale） */
.catalog-campaignGroup > li.-discount.-timesale span:before {
  content:"";
  display:inline-block;
  width: 10px;
  height: 10px;
  background-image: url(//media.aws.locondo.jp/contents/img/common/icon_timesale.svg);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-right: .2em;
}

/* クーポン（.-coupon） */
.catalog-campaignGroup > li.-coupon span:before {
  content:"";
  display:inline-block;
  width: calc(25px * (11/11));
  height: 11px;
  /* svg 実サイズ11px * 25px */
  background-image: url(//media.aws.locondo.jp/contents/img/common/icon_coupon.svg);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin-right: .3em;
}
:lang(en) .catalog-campaignGroup > li.-coupon span:before {
  background-image: url(//media.aws.locondo.jp/contents/img/common/icon_coupon_en.svg);
}
.catalog-campaignGroup > li.-coupon span {
  color: #222;
  background-color: rgba(255, 218, 31, 0.8);
}
.catalog-campaignGroup > li.-coupon.-rate span:after {
  content: "%" !important;
}
body:not(:has(.search-result)) .catalog-campaignGroup > li.-coupon.-price span:after {
  content: "円" !important;
}
.catalog_bottom_contents .catalog-campaignGroup > li.-coupon.-price span:after {
  content: "円" !important;
}
html:lang(en) body:not(:has(.search-result)) .catalog-campaignGroup > li.-coupon.-price span:after {
  content: "JPY" !important;
}
html:lang(en) .catalog_bottom_contents .catalog-campaignGroup > li.-coupon.-price span:after {
  content: "JPY" !important;
}
.catalog-campaignGroup > li.-coupon span:after,
.catalog-campaignGroup > li.-sale span:after{
  margin-left:.1em;
}

/* ノベルティ（.-novelty） */
.catalog-campaignGroup > li.-novelty span {
  color: #fff;
  background-color: rgba(27, 191, 127, .8);
}

/* シークレットセール（.-secretsale） */
.catalog-campaignGroup > li.-secretsale span {
  color: #ec335f;
  background-color: rgba(0, 0, 0, .8);
  opacity: 1;
  font-weight: 700;
}
.catalog-campaignGroup > li.-secretsale span:before {
  display: inline-block;
  font-family: "lcicon";
  content: "\EA55";
  font-size: 13px;
  margin-right: .1em;
}

/* =================================
   サイト固有調整（デスクトップ・共通）
================================= */

/* 複数サイト共通 */
/* catalog-campaignItem調整 */
:is(
  .site_brandeli,
  .site_fashionwalker,
  .site_unbillion
) :is(
  .catalog,
  .ranking
) .catalog-campaignItem:last-child {
  margin-bottom: inherit;
}

/* トップランキング非表示 */
:is(
  .site_mango,
  .site_reebok
  ) :is(
    .boemTop,
    .fwTop,
    #top--ranking
    )
    .catalog-campaignGroup{
  visibility:hidden;
}

/* 閲覧履歴非表示 */
:is(
  .site_akakura,
  .site_clarks,
  .site_descente,
  .site_duvetica,
  .site_evol,
  .site_fascinate,
  .site_steady,
  .site_stt,
  .site_sws
) #history_item .catalog-campaignGroup {
  visibility: hidden !important;
}

/* site_abe */
.site_abe .ranking .catalog-campaignItem:last-child{
  margin-bottom: 1px;
}
.site_abe .catalog-campaignGroup > li.-coupon span{
  transform-origin: bottom left;
}

/* site_brandeli */
.site_brandeli .section-myBrand .catalog-campaignGroup{
  transform: scale(calc(15 / 16));
  top: -15px;
}
.site_brandeli .catalog-campaignGroup > li.-discount span{
  background-color:rgba(255, 78, 78, .9);
}
.site_brandeli .-memberprice:after{
  display: none !important;
  margin-left: 0 !important;
}
.site_brandeli .catalog-campaignGroup > li.-coupon span {
  background-color:rgba(253, 223, 91, .8);
}
.site_brandeli .brandeliTop .catalogList .catalog-campaignGroup{
  transform: translateY(-16px);
  min-height: 16px;
}

/* site_charles */
.site_charles .catalog-campaignGroup > li span{
  line-height:1;
}
.site_charles .catalogList .catalog-campaignGroup {
  visibility:visible !important;
  top: 6px;
  margin-bottom: 16px;
  min-height: initial;
}
.site_charles .wrap_history_item .catalog-campaignGroup{
  visibility:hidden !important;
}

/* site_clarks */
.site_clarks #cartRemind .catalog-campaignGroup{
  visibility:hidden !important;
}

/* site_fashionwalker */
.site_fashionwalker .catalog-campaignGroup > li.-discount span {
  background-color: rgba(255, 94, 116, .8);
  font-weight: 600;
}
.site_fashionwalker .catalog-campaignGroup > li.-discount span:after {
  font-weight: 400;
}
.site_fashionwalker .catalog-campaignGroup > li.-coupon span:before {
  background-image: url(//media.aws.locondo.jp/contents/img/common/icon_coupon_white.svg);
}
.site_fashionwalker .catalog-campaignGroup > li.-coupon span {
  color: #fff;
  background-color: rgba(233, 140, 247, .8);
  font-weight: 600;
}

/* site_fila */
.site_fila .newArrival_item .catalog-campaignGroup{
  opacity:0;
}

/* site_harleydavidson */
.site_harleydavidson :is(
  .search-result .product-text,
  .catalog-content,
  .rankingPage .product-text
) {
  margin-top: -12px;
}

/* site_magaseek */
.site_magaseek #top .catalog-campaignGroup {
  transform: scale(calc(13/16)) translateY(2px);
  width: calc((16/13) * 100%);
}
.site_magaseek .product .wrap_history_item .catalog-campaignGroup {
  transform: scale(calc(13/16));
  width: calc((16/13) * 100%);
  transform-origin: top left;
  min-height: 13px;
  top: -13px;
}

/* site_mango */
.site_mango .cartPage .cart-recentry .catalog-campaignGroup{
  transform: scale(calc(12/16));
  width: calc((16/12) * 100%);
  top: -12px;
}

/* site_reebok */
.site_reebok .catalog-campaignGroup > li.-discount{
  display:none;
}

/* site_sws */
.site_sws #viewerRecoList .catalog-campaignGroup{
  visibility:hidden !important;
}

/* =================================
   サイト固有調整（モバイル用・640px以下）
================================= */
@media (max-width: 640px) {

  /* 複数サイト共通 */
  /* product-discountIcon調整 - 複数サイト共通 */
  :is(
    .site_akakura,
    .site_danyu,
    .site_duvetica,
    .site_fitfit,
    .site_fitflop,
    .site_mango,
    .site_passover,
    .site_samantha,
    .site_starcrea,
    .site_sfw,
    .site_uf,
    .site_reebok
  ) .product-discountIcon {
    width: calc(100% * (15/15));
    transform: translateY(-15px) scale(calc(15/15));
  }
  :is(
    .site_akakura,
    .site_danyu,
    .site_duvetica,
    .site_fitfit,
    .site_fitflop,
    .site_mango,
    .site_passover,
    .site_samantha,
    .site_starcrea,
    .site_sfw,
    .site_uf,
    .site_reebok
  ) .favorite-list .product-discountIcon {
    transform: translateY(-20px) scale(calc(14 / 15));
  }

  /* catalog-campaignGroup調整 - 複数サイト共通 */
  :is(
    .site_brandeli,
    .site_danyu,
    .site_fineoutlet
  ) .ranking .catalog-campaignGroup {
    transform: scale(calc(15 / 16));
  }

  /* 共通調整 */
  .column--2 .catalogList_item .product-discountIcon {
    width: calc(100% * (15/15));
    transform: translateY(-15px) scale(calc(15/15));
  }

  /* site_charles */
  .site_charles .product-discountIcon {
    min-height: initial;
  }
  .site_charles .product-discountIcon {
    transform: translateY(5px) scale(calc(14/15));
  }
  .site_charles .favorite-list .product-discountIcon {
    transform: translateY(-5px) scale(calc(14/15));
  }
  .site_charles .column--2 .product-discountIcon {
    transform: translateY(5px) scale(calc(15/15)) !important;
  }

  /* site_fashionwalker */
  .site_fashionwalker .product-discountIcon li span {
    font-weight: 600;
  }
  .site_fashionwalker .product-discountIcon [class^="icon_discountRate"] {
    background-color: rgba(255, 94, 116, .8);
  }
  .site_fashionwalker .product-discountIcon .icon_couponRate {
    color: #fff;
    background-color: rgba(233, 140, 247, .8);
  }
  .site_fashionwalker .icon_couponRate:before {
    background-image: url(//media.aws.locondo.jp/contents/img/common/icon_coupon_white.svg);
  }
  .site_fashionwalker .product-discountIcon .icon_novelty {
    color: #fff;
    background-color: rgba(41, 217, 148, .8);
  }

  /* site_fila */
  .site_fila #smp_main_content #history_item .catalog-campaignGroup{
    visibility: hidden !important;
  }

  /* site_reebok */
  .site_reebok .product-discountIcon [class^="icon_discountRate"] {
    display: none;
  }

/* メディアクエリ閉じ */
}

/* =================================
   表示制御ルール
================================= */
/* PCは デフォルト非表示 */
.product_contents #history_item .catalog-campaignGroup{
  visibility:hidden !important;
}
/* 表示する */
body:not(.site_descente) .catalogList .catalog-campaignGroup{
  visibility:visible !important;
}