@charset "utf-8";

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

/* =================================
   基本・共通スタイル
================================= */
/* 帯の大きさは catalogList_template.css の先頭の表で決める。
   HTML は .catalog-campaignGroup > li.-discount > span の形（li には種類の class だけを付ける）。
   「OFF」「%」「円」は下の :after で足すので、HTML には数だけを書く */

/* アイコンの行 */
.catalog-campaignGroup{
  display:inline-flex;
  flex-wrap:wrap;
  min-height: var(--icon-height);
  position:relative;
  top: 0;
  margin-top: 4px;
}
.catalog-campaignGroup > li{
  height: var(--icon-height);
  display: flex;
}

/* アイコン1つ */
.catalog-campaignGroup > li span{
  display: flex;
  align-items: center;
  padding: 0 .3em 0 .3em;
  font-size: var(--icon-text);
  line-height: 1;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
}
.catalog-campaignGroup > li span:after{
  letter-spacing: 0;
}

/* =================================
   アイコン種類別スタイル
================================= */
/* セール（.-discount）。会員価格（.-member）、SPECIAL PRICE（.-special）、OUTLET価格（.-outlet）も同じ赤 */
.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:is(.-member, .-special, .-outlet) span:after {
  content: none;
}

/* タイムセール（.-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;
}

/* シークレットセール（.-secretsale） */
.catalog-campaignGroup > li.-discount.-secretsale span {
  background: url(//media.aws.locondo.jp/contents/img/common/icon_secret-w.png) no-repeat rgba(237, 20, 61, .8) 4px 50%;
  background-size: auto 12px;
  padding: 0 4px 0 20px;
}

/* クーポン（.-coupon） */
.catalog-campaignGroup > li.-coupon span:before {
  content:"";
  display:inline-block;
  /* 高さはアイコンの高さ − 4px（上下の余白が 2px ずつの整数になる）。幅は画像の縦横比で決まる */
  height: calc(var(--icon-height) - 4px);
  aspect-ratio: 52 / 22;
  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: "%";
}
.catalog-campaignGroup > li.-coupon.-price span:after {
  content: "円";
}
html:lang(en) .catalog-campaignGroup > li.-coupon.-price span:after {
  content: "JPY";
}
.catalog-campaignGroup > li.-coupon span:after {
  margin-left:.1em;
}

/* あなただけクーポン（.-coupon.-personal） */
.catalog-campaignGroup > li.-coupon.-personal span {
  color: #fff;
  background-color: rgb(255 82 29 / 80%);
}
.catalog-campaignGroup > li.-coupon.-personal span:before {
  background-image: url(//media.aws.locondo.jp/contents/img/common/icon_coupon_white.svg);
}

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

/* =================================
   移行用。locondoweb の CRE_DEV-806 が本番に出たら、この区切りごと消す。
   あわせて pc/content-mypage.css と sp/smp-content-mypage.css のお気に入りの古い形の指定も消す
================================= */
.catalog-campaignGroup > li.-discount span.-memberprice:after {
  content: none;
}
.catalogList_item .product-discountIcon {
  display: flex;
  flex-wrap: wrap;
  min-height: var(--icon-height);
}
.catalogList_item .product-discountIcon > li {
  height: var(--icon-height);
  display: flex;
}
.catalogList_item .product-discountIcon > li > span {
  display: flex;
  align-items: center;
  padding: 0 .3em;
  font-size: var(--icon-text);
  line-height: 1;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
}
.catalogList_item .product-discountIcon :is(.icon_discountRate, .icon_discountRate_timeSale, .icon_memberPrice) {
  background-color: rgba(237, 20, 61, 0.8);
}
.catalogList_item .product-discountIcon .icon_discountRate_timeSale: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;
}
.catalogList_item .product-discountIcon .icon_couponRate:before {
  content: "";
  display: inline-block;
  height: calc(var(--icon-height) - 4px);
  aspect-ratio: 52 / 22;
  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;
}
.catalogList_item .product-discountIcon .icon_couponRate {
  color: #222;
  background-color: rgba(255, 218, 31, 0.8);
}
.catalogList_item .product-discountIcon .icon_novelty {
  background-color: rgba(102, 188, 39, .8);
}
.catalogList_item .product-discountIcon li.icon_discountRate_secretSale .icon_discountRate {
  background: url(//media.aws.locondo.jp/contents/img/common/icon_secret-w.png) no-repeat rgba(237, 20, 61, .8) 4px 50%;
  background-size: auto 12px;
  padding: 0 4px 0 20px;
}
/* ここまで 移行用 */

/* =================================
   表示制御ルール
================================= */
/* 表示する。共通テンプレートの JSP が style="visibility: hidden;" で隠しているので、ここで出す（LOCONDO で帯を出す指定はここだけ） */
.catalogList .catalog-campaignGroup{
  visibility:visible !important;
}