@charset "utf-8";

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

/* =================================
   基本・共通スタイル
================================= */
/* アイコン下要素の位置調整
   ※ .lc-item__body をここ(ベース層=全サイト)に足さないこと: below-price では L440台の margin-top:0 で
     打ち消されて無意味な一方、overlay サイトのカートお気に入り等では -15px がそのまま効いて
     レイアウトが上に詰まる(6/12 QAフィードバックで撤去。本番にも無い行) */
.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,
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_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 （CRE_DEV-569: 旧モード専用に隔離。site_* と data-icon-layout は
   同一 body 要素のため複合形で書く） */
.site_brandeli:not([data-icon-layout="below-price"]) .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:not([data-icon-layout="below-price"]) .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.-secretsale span {
  color: #fff;
}
.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_harleydavidson */
.site_harleydavidson :is(
  .search-result .product-text,
  .catalog-content,
  .rankingPage .product-text
) {
  margin-top: -12px;
}

/* site_magaseek （CRE_DEV-569: below-price は素の15pxへ。旧 scale/width 補正は :not で旧モード専用に隔離。
   site_* と data-icon-layout は同一 body 要素のため複合形で書く） */
.site_magaseek:not([data-icon-layout="below-price"]) #top .catalog-campaignGroup {
  transform: scale(calc(13/16)) translateY(2px);
  width: calc((16/13) * 100%);
}

/* site_mango （CRE_DEV-569: 旧モード専用に隔離。below-price ではカート「最近チェック」も
   :464 系リセット(top:0/transform:none/width:auto)に任せる。site_* と data-icon-layout は
   同一 body 要素のため複合形で書く） */
.site_mango:not([data-icon-layout="below-price"]) .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調整 - 複数サイト共通（CRE_DEV-569: brandeli は below-price で素の15pxにするため :not で旧モード隔離。danyu/fineoutlet は非below-priceなので従来通り適用。site_* と data-icon-layout は同一 body 要素のため複合形で書く） */
  :is(
    .site_brandeli,
    .site_danyu,
    .site_fineoutlet
  ):not([data-icon-layout="below-price"]) .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;
}

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

[data-icon-layout="below-price"] .search-result .product-text,
[data-icon-layout="below-price"] .catalog-content,
[data-icon-layout="below-price"] :is(.ranking, .rankingPage) .product-text,
[data-icon-layout="below-price"] .lc-item__body {
  margin-top: 0;
}
[data-icon-layout="below-price"] .lc-item__body {
  padding-top: 10px;
}
[data-icon-layout="below-price"] .lc-item__body .lc-item__commodityName {
  color: #333;
}
[data-icon-layout="below-price"]:not(.site_waja) .lc-item__body .lc-item__price,
[data-icon-layout="below-price"]:not(.site_waja) .lc-item__body .lc-item__priceDiscount {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5;
  margin-bottom: 0;
}
[data-icon-layout="below-price"]:is(.site_waja) .lc-item__body .lc-item__price .lc-item__price__old {
  font-size: 9px;
}
[data-icon-layout="below-price"] .lc-item__body .lc-item__price {
  color: #333;
}

[data-icon-layout="below-price"] .catalog-campaignGroup,
[data-icon-layout="below-price"].site_fashionwalker .catalog-campaignGroup,
[data-icon-layout="below-price"].site_royal .catalog-campaignGroup {
  top: 0;
  margin-top: 0;
  display: flex;
  transform: none;
  width: auto;
}
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .catalog_main .catalogList_item .product-icon,
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .catalog_main .catalogList_item .product-icon.-bottom,
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .catalog_main .catalogList_item .catalog-campaignGroup {
  display: inline-flex;
  vertical-align: top;
  /* CRE_DEV-569 余白方式 案A(6/13): G2 は product-icon/campaignGroup とも margin-top:0 に揃え、
     余白は価格行(.priceLine / お気に入りは .priceWrap)の margin-bottom:4px へ移す。
     product-icon の PC margin-top:4px(=catalogList_template.css :685, specificity (0,3,0))は
     この G2 スコープ((0,5,0))で打ち消す。2行折返し時に2行目 UL へ margin-top が乗るのを防ぐのが目的。
     ※cart-favorite は priceLine/priceWrap 不在＋favsize相殺の既存設計のため対象外(margin-top:4px 維持)。
       below-price 全体の余白方式統一は CRE_DEV-666 へ申し送り済み(569 は G2 のみの暫定分岐) */
  margin-top: 0;
}
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .catalogList .product-icon > li:not(.icon-manual),
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .catalogList .product-icon > span:not(.icon-manual) {
  transform-origin: top right;
}
/* CRE_DEV-569: .cart-favorite はカートお気に入り(lc-item マークアップ)。.catalogList 外のため
   ブランドフォントを個別に拡張しないと boemfont のままになる（フォントは手動+fallback の従来スコープを維持）。 */
[data-icon-layout="below-price"].site_mango :is(.catalogList, .cart-favorite) .product-icon > [class*="icon-"] {
  font-family: 'MangoSans-Regular', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', sans-serif;
}
/* CRE_DEV-569: アイコンtextの縦位置補正（手動/自動とも）。旧 SP のみ padding-top:2px（[class*="icon-"]限定＝auto未補正）で
   PC=上寄り・SP=下寄りだったため、> li, > span（手動/自動）に padding-top:1px を PC/SP 共通で付与（box-sizing:border-box で高さ不変）。
   ※エリア単位の微調整は QA で再確認（値は 1px 統一の暫定）。 */
[data-icon-layout="below-price"].site_mango :is(.catalogList, .cart-favorite) .product-icon > li,
[data-icon-layout="below-price"].site_mango :is(.catalogList, .cart-favorite) .product-icon > span {
  box-sizing: border-box;
  padding-top: 1px;
}
/* CRE_DEV-569: お気に入り一覧(mypage .favorite_list)の product-icon(catalog系アイコン)にも MangoSans＋縦補正。
   上の :is(.catalogList, .cart-favorite) フォントスコープは .favorite_list を含まず boemfont のままだったため補完（手動/自動とも > li）。 */
[data-icon-layout="below-price"].site_mango .favorite_list .product-icon > li {
  font-family: 'MangoSans-Regular', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', sans-serif;
  box-sizing: border-box;
  padding-top: 1px;
}
[data-icon-layout="below-price"].site_reebok :is(.catalogList, .cart-favorite) .product-icon > [class*="icon-"] {
  font-family: 'NeuePlakText', Lexend, Lato, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}
@media (max-width: 769px) {
  /* CRE_DEV-569: mango product-icon の SP padding-top は上の base rule(1px)へ統合（旧2px→1px。下寄り解消）。campaignGroup span は据え置き。 */
  [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) .product-text {
  font-size: 0;
}
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .product-text {
  text-align: center;
}
@media (max-width: 769px) {
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .product-text {
    text-align: left;
  }
}
[data-icon-layout="below-price"].site_reebok .priceLine {
  align-items: baseline;
}
/* CRE_DEV-569 余白方式 案A(6/13): product-icon/campaignGroup を margin-top:0 にした分の「価格→アイコン」間隔(4px)を
   価格行の下マージンで作る。catalogList系は .priceLine、マイページお気に入りは .priceWrap。
   .priceWrap は content-mypage.css :6252 の margin-bottom:0((0,4,0))を G2((0,5,0))で上書き。
   cart-favorite は .product-text/.priceLine を持たない(lc-item)ため当たらず、margin-top:4px 維持で間隔確保。 */
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .product-text .priceLine {
  margin-bottom: 4px;
}
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .favoriteList_item .product-text .priceWrap {
  margin-bottom: 4px;
}
/* CRE_DEV-569 (6/13 G2_A021〜A024): cart-favorite は lc-item 構造で .product-text を持たない。
   左寄せの基点を .lc-item__body に置く（12 手順3b 案。PC/SP 共通）。
   ※ product-icon の上余白(margin-top:4px)は catalogList_template.css :686 に既存（favsize margin-bottom と相殺）のため本ファイルでは追加しない */
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .cart-favorite .lc-item__body {
  text-align: left;
}
[data-icon-layout="below-price"].site_reebok .product-text [class^="catalog_gender_"] {
  bottom: 0;
}
[data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .catalog-content {
  text-align: center;
}
[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) {
  [data-icon-layout="below-price"]:not(.site_mango):not(.site_reebok) .catalog-campaignGroup {
    margin-top: 1.5px;
  }
}
@media (max-width: 769px) {
  [data-icon-layout="below-price"]:is(.site_brandeli, .site_royal, .site_waja) .catalog-campaignGroup {
    margin-top: 1.5px;
  }
  [data-icon-layout="below-price"].site_fashionwalker .catalogList_item .trgFavItem {
    position: absolute;
    right: 0;
    top: 1px;
  }
  [data-icon-layout="below-price"].site_sws .catalogList_item .trgFavItem {
    top: 0;
  }
}
@media (min-width: 769px) {
  [data-icon-layout="below-price"].site_fashionwalker .product-text .priceLine .icon-favItemAdd {
    position: absolute;
    right: -9px;
    top: -3px;
  }
}
[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;
}

/* ranking 系 commodityName/commodity_name の余白 */
[data-icon-layout="below-price"] :is(.ranking, .rankingPage) .product-text :is(.commodityName, .commodity_name),
[data-icon-layout="below-price"] .lc-item__body .lc-item__commodityName {
  margin-bottom: 6px;
}

@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
  ) .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
  ) .catalog-campaignGroup > li {
    min-height: 14px;
    height: 14px;
  }
  [data-icon-layout="below-price"]:is(
    .site_reebok,
    .site_mango
  ) .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;
}
[data-icon-layout="below-price"] :is(
  .section-myBrand,
  .section-campaignItems,
  .section-trendWord
) .catalog-content {
  margin-top: 0;
}
/* 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;
}
body[data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]) .section-ranking .catalog-item:nth-child(n + 5) .catalog-content {
  margin-top: 0;
}

[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 .catalog-item .catalog-content {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
      "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo",
      sans-serif;
  }
  [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_fashionwalker
  ) #section-ranking [data-campaign-group-display-none="false"].-login .catalog-list .catalog-myBrandBtnSet {
    bottom: 18px;
  }

  [data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]):is(
    .site_royal,
  ) #section-ranking .catalog-list .catalog-myBrandBtnSet {
    bottom: 20px;
  }
  [data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]):is(
    .site_magaseek,
  ) #section-ranking .catalog-list .catalog-myBrandBtnSet {
    bottom: 16px;
  }
  [data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]):is(
    .site_magaseek
  ) #section-ranking .catalog-list .catalog-item:nth-child(n + 5) .catalog-myBrandBtnSet {
    bottom: 20px;
  }
  [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 .product-icon,
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .viewHistoryList .catalogList_item .product-icon.-bottom,
  [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;
  }
  /* CRE_DEV-569 FBリクエスト(6/12 改訂v2): PCカート/注文完了は「中央寄せ」へ統一（※6/10「カート左」仕様を上書き）。
     product-icon/campaignGroup を inline-flex 横並びにし、:512 の .product-text center 継承でグループ中央
     （reco :744 と同パターン。6/10 の product-icon text-align:left 強制は撤去）。
     注文完了 #orderComplete_recommend はカート人気(#cart_ranking)と同 catalogList_item マークアップ＝同値で中央横並び */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) :is(.cartPage, #orderComplete_recommend) .catalogList_item .product-icon,
  [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 へ移管 */
  }
  /* CRE_DEV-569 FBリクエスト(6/13 訂正版・G2_A007/A011): PC商品詳細の関連(.viewerRecoList)/人気(.product_detail_reco)は
     reebok・mango とも中央・横並び。v1 の mango=left 強制(icon=block の原因)は撤去し、reebok 同様 product-icon/campaignGroup を
     inline-flex 横並び化（カタログ面 :479-485 と同パターン）。:512 の .product-text text-align:center 継承でグループ中央。
     これにより mango PC reco の icon=block 起因の折返し(UL間 gap1.5px)も解消し sameRow 化 */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) :is(.viewerRecoList, .product_detail_reco) .catalogList_item .product-icon,
  [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 へ移管 */
  }
  /* CRE_DEV-569 FBリクエスト(6/12 改訂v2): お気に入り(マイページ .favorite-list / カート .cart-favorite)は
     PC でも「左寄せ」（他面と異なり中央化しない）。product-icon/campaignGroup を inline-flex 横並びにしつつ
     :512 の .product-text center を打ち消して左寄せ。※login-gated で実機未検証（コード由来マークアップで適用・報告書 判断事項参照） */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) :is(.favorite-list, .cart-favorite) .product-icon,
  [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;
  }
  /* CRE_DEV-569: お気に入り一覧(.favorite-list)は priceWrap margin-bottom:4px で価格→アイコン間隔を確保済のため、
     product-icon/campaignGroup の margin-top:4px は二重で不要 → 0 に（reco面 L772-777 と同じ「余白は価格行へ移管」方針）。
     cart-favorite は priceLine/priceWrap 不在のため上の 4px を維持。 */
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .favorite-list .product-icon,
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) .favorite-list .catalog-campaignGroup {
    margin-top: 0;
  }
  [data-icon-layout="below-price"]:is(.site_mango, .site_reebok) :is(.favorite-list, .cart-favorite) .product-text {
    text-align: left;
  }
  /* CRE_DEV-569 QAフィードバック(6/10): mango PCカート「最近チェック」(#cartRemind)は商品カード
     横幅が狭いため 12px ミニサイズを適用。小ユニット(min-height:13px/font 8px)同様の直接サイジングで、
     font は通常 PC 比率(icon 16px/9px・タグ span 16px/10px)に合わせ 12px 換算 */
  [data-icon-layout="below-price"].site_mango .cart-recentry .product-icon {
    min-height: 14px;
  }
  [data-icon-layout="below-price"].site_mango .cart-recentry .product-icon > li:not(.icon-manual),
  [data-icon-layout="below-price"].site_mango .cart-recentry .product-icon > span:not(.icon-manual) {
    height: 14px;
    line-height: 14px;
    font-size: 8.6px;
    min-width: 32px;
  }
  [data-icon-layout="below-price"].site_mango .cart-recentry .catalog-campaignGroup > li {
    min-height: 14px;
    height: 14px;
  }
  [data-icon-layout="below-price"].site_mango .cart-recentry .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"]:is(
    .site_magaseek
  ) .catalog-list .catalog-content > *:nth-child(n+2) {
    font-size: 11px;
    margin-top: 0;
  }
  [data-icon-layout="below-price"]:is(
    .site_magaseek
  ) .catalog-list .catalog-item .catalog-price {
    font-size: 13px;
  }
  [data-icon-layout="below-price"]:has([data-campaign-group-display-none="false"]):is(
    .site_royal,
  ) #section-ranking .catalog-list .catalog-myBrandBtnSet {
    bottom: 16px;
  }

  [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"]:has([data-campaign-group-display-none="false"]):is(
    .site_magaseek,
    .site_fashionwalker
  ) #section-ranking .catalog-list .catalog-myBrandBtnSet {
    bottom: 16px;
  }
  [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 .product-icon,
  [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 .product-icon,
  [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 .product-icon,
  [data-icon-layout="below-price"]:is(.site_reebok, .site_mango) .cart-favorite .catalog-campaignGroup {
    display: inline-flex;
    vertical-align: top;
    margin-top: 4px;
  }

  [data-icon-layout="below-price"]:is(.site_reebok, .site_mango) :is(.viewerRecoList, .product_detail_reco, .cartPage, .viewHistoryList, #orderComplete_recommend) .catalogList_item .product-icon {
    margin-top: 0;
  }
  /* 価格行側で余白を持つ。.priceLine が対象面の価格行クラス */
  [data-icon-layout="below-price"]:is(.site_reebok, .site_mango) :is(.viewerRecoList, .product_detail_reco, .cartPage, .viewHistoryList, #orderComplete_recommend) .catalogList_item .priceLine {
    margin-bottom: 4px;
  }

}