@charset "utf-8";

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

/* =================================
   基本・共通スタイル
================================= */

/* キャンペーンアイコン基本設定 */
.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;
}



/* =================================
   アイコン種類別スタイル
================================= */
/* セール（.-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,
span.-memberprice: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);
}
:where(.site_fashionwalker, .site_orobianco
) .catalog-campaignGroup > li.-coupon span:before {
  background-image: url(//media.aws.locondo.jp/contents/img/common/icon_coupon_white.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_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 .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_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;
}

[data-icon-layout="below-price"].site_fashionwalker .catalog-campaignGroup > li.-discount span, 
[data-icon-layout="below-price"].site_fashionwalker .catalog-campaignGroup > li.-coupon span {
  font-weight: 400;;
}


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


/* 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_danyu,
    .site_duvetica,
    .site_fitfit,
    .site_mango,
    .site_samantha,
    .site_starcrea,
    .site_uf,
    .site_reebok
  ) .product-discountIcon {
    width: calc(100% * (15/15));
    transform: translateY(-15px) scale(calc(15/15));
  }
  :is(
    .site_danyu,
    .site_duvetica,
    .site_fitfit,
    .site_mango,
    .site_samantha,
    .site_starcrea,
    .site_uf,
    .site_reebok
  ) .favorite-list .product-discountIcon {
    transform: translateY(-20px) scale(calc(14 / 15));
  }

  /* catalog-campaignGroup調整 */
  :is(
    .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_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;
}

/* =============================================================
   CRE_DEV-569 [data-icon-layout="below-price"] アイコン表示
   ============================================================= */


[data-icon-layout="below-price"] .catalog-campaignGroup,
[data-icon-layout="below-price"].site_royal .catalog-campaignGroup {
  top: 0;
  margin-top: 0;
  row-gap: var(--label-gap); /* 札が2行になったときの上下の間。アイコンの行と同じ値（_vars.css） */
  display: flex;
  transform: none;
  width: auto;
}
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .catalog_main .catalogList_item .catalog-campaignGroup {
  display: inline-flex;
  vertical-align: top;
  margin-top: 0;
}
@media (max-width: 769px) {
  /* mango の割引とクーポンの帯の文字を、帯の縦の真ん中に置く */
  [data-icon-layout="below-price"].site_mango .catalog-campaignGroup > li > span {
    box-sizing: border-box;
    padding-top: .5px;
  }
}
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .catalog-content .catalog-campaignGroup {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 769px) {
  /* 商品ページの閲覧履歴では札の行を出さない */
  .site_brandeli #product_contents .wrap_history_item .catalog-campaignGroup,
  .site_mango #product_contents .wrap_history_item .catalog-campaignGroup,
  .site_waja #product_contents .wrap_history_item .catalog-campaignGroup {
    display:none;
  }
}
[data-icon-layout="below-price"] .catalog-campaignGroup > li {
  display: inline-flex;
  flex-wrap: nowrap;
  flex-wrap: wrap;
  min-height: 15px;
  height: auto;
  transform-origin: top left;
}

[data-icon-layout="below-price"]:not(.site_brandeli) [data-campaign-group-display-none="true"] .catalog-campaignGroup {
  display: none;
}


@media (min-width: 768px) {
  [data-icon-layout="below-price"] .catalog-campaignGroup > li {
    min-height: 15px;
  }
  [data-icon-layout="below-price"]:is(
    .site_reebok,
    .site_mango,
    .site_magaseek /* ITCRE-85: 帯の高さをアイコンと同じにする（LOCONDO と同じ） */
  ) .catalog-campaignGroup > li {
    height: 16px;
  }
}
@media (max-width: 769px) {
  [data-icon-layout="below-price"] .catalog-campaignGroup > li > span {
    font-size: 9px;
    line-height: 1.5;
  }
  [data-icon-layout="below-price"]:is(
    .site_reebok,
    .site_mango,
    .site_magaseek /* ITCRE-85: 帯の高さをアイコンと同じにする（LOCONDO と同じ） */
  ) .catalog-campaignGroup > li {
    min-height: 14px;
    height: 14px;
  }
  [data-icon-layout="below-price"]:is(
    .site_reebok,
    .site_mango,
    .site_magaseek /* ITCRE-85: 帯の高さをアイコンと同じにする（LOCONDO と同じ） */
  ) .catalog-campaignGroup > li.-coupon span:before {
    width: calc(23px * (11/11));
  }
}

/* CRE_DEV-569: mypage お気に入りの discount/coupon バッジ */
[data-icon-layout="below-price"] .favorite_discount,
[data-icon-layout="below-price"] .favorite_coupon,
[data-icon-layout="below-price"] .favorite_discount .icon_salePercent,
[data-icon-layout="below-price"] .favorite_coupon .icon_couponRate {
  height: 15px;
}
[data-icon-layout="below-price"] :is(
  .section-myBrand,
  .section-campaignItems,
  .section-trendWord
) .catalog-campaignGroup {
  top: 0;
  margin-top: 4px;
  transform: none;
  width: auto;
}
/* CRE_DEV-569: TOPランキング5位以降(.section-ranking .catalog-item:nth-child(n+5)) */
body[data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]) .section-ranking .catalog-item:nth-child(n + 5) .catalog-campaignGroup {
  display: flex;
  top: 0;
  margin-top: 4px;
  transform: none;
  width: auto;
}
body[data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]) .section-ranking .catalog-item:nth-child(n + 5) .catalog-campaignGroup > li {
  min-height: 13px;
}
body[data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]) .section-ranking .catalog-item:nth-child(n + 5) .catalog-campaignGroup > li > span {
  font-size: 8px;
}

[data-icon-layout="below-price"]:is(
  .site_mango,
  .site_reebok
) :is(
  .boemTop,
  .fwTop,
  #top--ranking
) .catalog-campaignGroup {
  display: none;
}

@media (max-width: 640px) {
  body[data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]) .section-ranking .catalog-item:nth-child(n + 5) .catalog-campaignGroup {
    margin-top: 0;
  }
}

/* PC */
@media (min-width: 769px) {
  [data-icon-layout="below-price"]:is(
    .site_magaseek,
    .site_fashionwalker
  ) .section-ranking [data-campaign-group-display-none="false"] .catalog-item .catalog-campaignGroup {
    display: flex;
    top: 0;
  }
  [data-icon-layout="below-price"]:is(
    .site_magaseek
  ) [data-campaign-group-display-none="true"] .catalog-list .catalog-campaignGroup {
    display: none;
  }
  [data-icon-layout="below-price"]:is(
    .site_magaseek
  ) :is(.section-history, .section-favorite) .catalog-list .catalog-content > .catalog-campaignGroup {
    display: flex;
  }
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .viewHistoryList .catalogList_item .catalog-campaignGroup {
    display: inline-flex;
    vertical-align: top;
    margin-top: 0; /* CRE_DEV-569 案A: 余白は .priceLine margin-bottom:4px へ移管 */
  }
  /* CRE_DEV-569: PCカート(最近チェック/人気)は上段 product-icon / 下段 campaignGroup の2段固定。
     .product-icon の li は inline-flex(インラインレベル)で .product-text の text-align:center を
     継承し中央寄せ済み。campaignGroup は below-price リセットで display:flex(ブロックレベル)になり
     justify-content 既定の左詰めになるため、中央寄せのみ追記 */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .cartPage .catalogList_item .catalog-campaignGroup {
    justify-content: center;
  }
  /* カートと注文完了は、割引とクーポンの帯を横に並べ、.product-text の中央揃えで真ん中に置く */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) :is(.cartPage, #orderComplete_recommend) .catalogList_item .catalog-campaignGroup {
    display: inline-flex;
    vertical-align: top;
    margin-top: 0; /* CRE_DEV-569 案A: 余白は .priceLine margin-bottom:4px へ移管 */
  }
  /* 商品ページの「見た人は」と人気アイテムも、帯を横に並べて .product-text の中央揃えで真ん中に置く（block だと折り返す） */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) :is(.viewerRecoList, .product_detail_reco) .catalogList_item .catalog-campaignGroup {
    display: inline-flex;
    vertical-align: top;
    margin-top: 0; /* CRE_DEV-569 案A: 余白は .priceLine margin-bottom:4px へ移管 */
  }
  /* お気に入り（マイページとカート）は、帯を横に並べたうえで左に寄せる */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) :is(.favorite-list, .cart-favorite) .catalog-campaignGroup {
    display: inline-flex;
    vertical-align: top;
    margin-top: 4px;
  }
  /* お気に入り一覧は価格の行の下の余白で間を取るので、帯の上の余白は付けない（カートのお気に入りは価格の行が無いので 4px のまま） */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .favorite-list .catalog-campaignGroup {
    margin-top: 0;
  }
  [data-icon-layout="below-price"].site_mango :is(.cart-recentry, #cart_ranking, #fav) .catalog-campaignGroup > li {
    min-height: 14px;
    height: 14px;
  }
  [data-icon-layout="below-price"].site_mango :is(.cart-recentry, #cart_ranking, #fav) .catalog-campaignGroup > li > span {
    font-size: 8.6px;
  }
  /* [data-icon-layout="below-price"].site_mango .cart-recentry .catalog-campaignGroup > li > span::before {
    width: calc(22px * (11 / 11));
  } */
}
/* SP */
@media (max-width: 769px) {
  [data-icon-layout="below-price"] :is(
    .section-myBrand,
    .section-campaignItems,
    .section-trendWord
  ) .catalog-campaignGroup > li {
    min-height: 13px;
  }
  [data-icon-layout="below-price"] :is(
    .section-myBrand,
    .section-campaignItems,
    .section-trendWord
  ) .catalog-campaignGroup > li > span {
    font-size: 8px;
  }

  [data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]):is(
    .site_royal
  ) .section-ranking .catalog-item .catalog-campaignGroup {
    margin-top: 0;
  }
  [data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]):is(
    .site_royal
  ) .section-ranking .catalog-item .catalog-campaignGroup > li > span {
    font-size: 8px;
  }
  [data-icon-layout="below-price"]:is(
    .site_magaseek
  ) [data-campaign-group-display-none="true"] .catalog-list .catalog-campaignGroup {
    display: none;
  }
  [data-icon-layout="below-price"]:is(
    .site_magaseek
  ) :is(.section-history, .section-favorite) .catalog-list .catalog-content > .catalog-campaignGroup {
    display: flex;
  }
  /* CRE_DEV-569 FBリクエスト(6/12 改訂v2): SP は全面 inline-flex 横並び・左寄せ維持で統一（reebok・mango 共通）。
     揃えは両サイトとも左寄せ（:514 の SP-left を活かし product-text には触らない＝SP は価格が左のため中央化しない。中央化は PC のみ）。
     mango は .-discount 表示で最大3要素（product-icon＋cg内 discount/coupon li）→ inline-flex で折返し許容・重なりなし。
     対象面（v2面別仕様表 SP=全面左寄せ）:
       .search-result(検索結果/v4)・viewerRecoList/product_detail_reco(商品詳細reco/手順1)・
       .cartPage(カート人気#cart_ranking+最近チェック#cartRemind)・.viewHistoryList(閲覧履歴)・
       #orderComplete_recommend(注文完了)・.favorite-list/.cart-favorite(お気に入り)。
     ※ .viewHistoryList / #orderComplete_recommend / .favorite-list / .cart-favorite は QA で login-gated/データ無のため
       実機未検証（コード由来マークアップで適用。報告書「判断を仰ぐ事項」参照）。mango PC は min-width:769px 内のため不変 */
  /* CRE_DEV-569 案A(6/13): SP も catalogList系＋favorite-list は margin-top:0 とし余白を価格行へ移管。
     cart-favorite のみ margin-top:4px 維持(PC と同じ分離理由) */
  [data-icon-layout="below-price"]:is(.site_reebok, .site_mango) :is(.search-result, .viewerRecoList, .product_detail_reco, .cartPage, .viewHistoryList, #orderComplete_recommend, #reco_category, #history) .catalogList_item .catalog-campaignGroup,
  [data-icon-layout="below-price"]:is(.site_reebok, .site_mango) .favorite-list .catalog-campaignGroup {
    display: inline-flex;
    vertical-align: top;
    margin-top: 0;
  }
  [data-icon-layout="below-price"]:is(.site_reebok, .site_mango) .cart-favorite .catalog-campaignGroup {
    display: inline-flex;
    vertical-align: top;
    margin-top: 4px;
  }

}