/* ===============================================
  * 共通 *
=============================================== */

.cicon__frame {
  --padding-vertical: calc(4 / 16 * 1rem);    /* Y軸方向の余白 */
  --padding-horizontal: calc(6 / 16 * 1rem);  /* X軸方向の余白 */
  --color-bg: transparent;                    /* 背景色 */
  --color-border: var(--color-font-primary);  /* 枠線の色 */
  --color-font: var(--color-font-primary);    /* フォントの色 */
  --font-family: var(--font-mixture);         /* フォントファミリー */
  --font-style: normal;                       /* フォントの書式 */
  --text-content: "PLACEHOLDER";              /* 表示する文字列 */

  padding: var(--padding-vertical) var(--padding-horizontal);
  background: var(--color-bg);
  border: solid 1px var(--color-border);

  color: var(--color-font);
  font-family: var(--font-family);
  font-size: calc(12 / 16 * 1rem);
  font-style: var(--font-style);
  line-height: 1;
}

.cicon__frame::before {
  content: var(--text-content);
}

.cicon__frame[data-cicon="1"] {
  --text-content: "NEW";
  --font-style: italic;
}
.cicon__frame[data-cicon="2"] {
  --text-content: "送料無料";
}
.cicon__frame[data-cicon="3"] {
  --color-border: #F02323;
  --color-font: #F02323;
  --font-style: italic;
  --text-content: "SALE";
}
.cicon__frame[data-cicon="4"] {
  --text-content: "限定商品";
}
.cicon__frame[data-cicon="5"] {
  --color-border: #0991E5;
  --color-font: #0991E5;
  --text-content: "ポイント5倍";
}
.cicon__frame[data-cicon="6"] {
  --color-border: #0991E5;
  --color-font: #0991E5;
  --text-content: "ポイント8倍";
}
.cicon__frame[data-cicon="7"] {
  --color-border: #0991E5;
  --color-font: #0991E5;
  --text-content: "ポイント10倍";
}
.cicon__frame[data-cicon="8"] {
  --color-border: #0991E5;
  --color-font: #0991E5;
  --text-content: "ポイントアップ中";
}
.cicon__frame[data-cicon="9"] {
  --color-border: #0991E5;
  --color-font: #0991E5;
  --text-content: "クーポン対象";
}
.cicon__frame[data-cicon="10"] {
  --text-content: "2点SET";
}
.cicon__frame[data-cicon="11"] {
  --text-content: "3点SET";
}
.cicon__frame[data-cicon="12"] {
  --text-content: "再入荷予定";
}
.cicon__frame[data-cicon="13"] {
  --text-content: "予約商品";
}
.cicon__frame[data-cicon="14"] {
  --text-content: "店頭受け取り対象外";
}
.cicon__frame[data-cicon="15"] {
  --text-content: "KID'S";
}
.cicon__frame[data-cicon="16"] {
  --text-content: "UTILITY";
}
.cicon__frame[data-cicon="17"] {
  --text-content: "SET";
}
.cicon__frame[data-cicon="18"] {
  --text-content: "偏光";
}
.cicon__frame[data-cicon="19"] {
  --text-content: "調光";
}
.cicon__frame[data-cicon="20"] {
  --text-content: "";
}
.cicon__frame[data-cicon="21"] {
  --text-content: "cicon-21";
}
.cicon__frame[data-cicon="22"] {
  --text-content: "cicon-22";
}
.cicon__frame[data-cicon="23"] {
  --text-content: "cicon-23";
}
.cicon__frame[data-cicon="24"] {
  --text-content: "cicon-24";
}
.cicon__frame[data-cicon="25"] {
  --text-content: "cicon-25";
}
.cicon__frame[data-cicon="26"] {
  --text-content: "cicon-26";
}
.cicon__frame[data-cicon="27"] {
  --text-content: "cicon-27";
}
.cicon__frame[data-cicon="28"] {
  --text-content: "cicon-28";
}
.cicon__frame[data-cicon="29"] {
  --text-content: "cicon-29";
}
.cicon__frame[data-cicon="30"] {
  --text-content: "";
}