@charset "utf-8";

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

/* =================================
   基本・共通スタイル
================================= */
/* 帯の大きさ（PC 16px と文字 10px、SP 14px と文字 9px）。ここ1か所で決める。
   検索一覧の .product-discountIcon（catalogList_template.css）も高さはこの変数で描く。文字の大きさはページの CSS のまま。
   main.jsp が全ページで読むので、catalogList_template.css はこの変数があるものとして書いている */
:root {
  --discountIcon-height: 16px;
  --discountIcon-font-size: 10px;
}
@media (max-width: 769px) {
  :root {
    --discountIcon-height: 14px;
    --discountIcon-font-size: 9px;
  }
}

/* キャンペーンアイコン基本設定 */
.catalog-campaignGroup{
  display:inline-flex;
  flex-wrap:wrap;
  min-height: var(--discountIcon-height);
  position:relative;
  top: 0;
  margin-top: 4px;
}
.catalog-campaignGroup > li{
  height: var(--discountIcon-height);
  display: flex;
}

.catalog-campaignGroup > li span{
  display: flex;
  align-items: center;
  padding: 0 .3em 0 .3em;
  font-size: var(--discountIcon-font-size);
  color: #fff;
  letter-spacing: .02em;
}
.catalog-campaignGroup > li span:after{
  letter-spacing: 0;
}

/* =================================
   アイコン種類別スタイル  
================================= */
/* セール（.-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);
}
.catalog-campaignGroup > li.-coupon span {
  color: #222;
  background-color: rgba(255, 218, 31, 0.8);
}
.catalog-campaignGroup > li.-coupon.-rate span:after {
  content: "%" !important;
}
.catalog-campaignGroup > li.-coupon.-price span:after {
  content: "円" !important;
}
html:lang(en) .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;
}

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