@charset "UTF-8";
/* ==========================================================================
   商品バッジ  product_badge.css
   --------------------------------------------------------------------------
   ColorMeの「付加画像」（商品登録画面で商品名に付けるNEW・SALE等のGIFアイコン）を、
   CSSのcontentプロパティでオリジナルデザインのSVGバッジに差し替える。

   ・対応範囲（同系統ならどのアイコンを選んでも同じ新デザインになる）
       NEW系      icons1〜15  → 緑のNEWバッジ
       SALE系     icons16〜24 → 赤のSALEバッジ
       オススメ系 icons25〜33 → オレンジのオススメバッジ
       残りわずか icons63〜65 → グレーの残りわずかバッジ
   ・上記以外（icons34〜62：値下げ・SOLD OUT・再入荷・送料無料など）は
     標準GIFのまま表示される。使う場合はこのファイルにグループを1つ追加する
   ・content差し替え非対応の古いブラウザでは従来GIFにフォールバック（表示は消えない）
   ・SVG内の日本語はUTF-8パーセントエンコード（ASCIIのみ）。EUC-JPページでも化けない
   ・更新時は別名にリネーム（例: product_badge_v2.css）し、共通テンプレートHTML欄の
     <link>を更新すること（CDNキャッシュは?v=では消えないため）。旧版はFTPから削除する
   ========================================================================== */

/* --------------------------------------------------------------------------
   基本サイズ（付加画像アイコン全般）
   バッジの高さを19pxに揃え、商品名との間に余白を取る。
   margin-rightの!importantは、ColorMeが付けるインラインstyle（margin:0px）に勝つため
   -------------------------------------------------------------------------- */
img.new_mark_img1 {
  height: 19px;
  vertical-align: middle;
  margin-right: 6px !important;
}

/* --------------------------------------------------------------------------
   NEW系（icons1〜15）→ 緑 #238e2f・キラキラアイコン
   -------------------------------------------------------------------------- */
img.new_mark_img1[src*="icons1.gif"],
img.new_mark_img1[src*="icons2.gif"],
img.new_mark_img1[src*="icons3.gif"],
img.new_mark_img1[src*="icons4.gif"],
img.new_mark_img1[src*="icons5.gif"],
img.new_mark_img1[src*="icons6.gif"],
img.new_mark_img1[src*="icons7.gif"],
img.new_mark_img1[src*="icons8.gif"],
img.new_mark_img1[src*="icons9.gif"],
img.new_mark_img1[src*="icons10.gif"],
img.new_mark_img1[src*="icons11.gif"],
img.new_mark_img1[src*="icons12.gif"],
img.new_mark_img1[src*="icons13.gif"],
img.new_mark_img1[src*="icons14.gif"],
img.new_mark_img1[src*="icons15.gif"] {
  content: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='51' height='19'><rect width='51' height='19' rx='9.5' fill='%23238e2f'/><g transform='translate(7 4.5) scale(.5)' fill='%23fff'><path d='M8 1l1.9 4.6L14.5 7.5 9.9 9.4 8 14 6.1 9.4 1.5 7.5 6.1 5.6 8 1z'/><path d='M15.5 10.5l1.1 2.6 2.6 1.1-2.6 1.1-1.1 2.6-1.1-2.6-2.6-1.1 2.6-1.1 1.1-2.6z'/></g><text x='20' y='9.5' dominant-baseline='central' font-family='Lato,sans-serif' font-size='10' font-weight='700' fill='%23fff' textLength='24' lengthAdjust='spacingAndGlyphs'>NEW</text></svg>");
}

/* --------------------------------------------------------------------------
   SALE系（icons16〜24）→ 赤 #e5242f・タグアイコン
   -------------------------------------------------------------------------- */
img.new_mark_img1[src*="icons16.gif"],
img.new_mark_img1[src*="icons17.gif"],
img.new_mark_img1[src*="icons18.gif"],
img.new_mark_img1[src*="icons19.gif"],
img.new_mark_img1[src*="icons20.gif"],
img.new_mark_img1[src*="icons21.gif"],
img.new_mark_img1[src*="icons22.gif"],
img.new_mark_img1[src*="icons23.gif"],
img.new_mark_img1[src*="icons24.gif"] {
  content: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='53' height='19'><rect width='53' height='19' rx='9.5' fill='%23e5242f'/><g transform='translate(7 4.5) scale(.4167)' fill='%23fff'><path d='M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z'/></g><text x='20' y='9.5' dominant-baseline='central' font-family='Lato,sans-serif' font-size='10' font-weight='700' fill='%23fff' textLength='26' lengthAdjust='spacingAndGlyphs'>SALE</text></svg>");
}

/* --------------------------------------------------------------------------
   オススメ系（icons25〜33）→ サイトのアクセントオレンジ #e8731f・星アイコン
   -------------------------------------------------------------------------- */
img.new_mark_img1[src*="icons25.gif"],
img.new_mark_img1[src*="icons26.gif"],
img.new_mark_img1[src*="icons27.gif"],
img.new_mark_img1[src*="icons28.gif"],
img.new_mark_img1[src*="icons29.gif"],
img.new_mark_img1[src*="icons30.gif"],
img.new_mark_img1[src*="icons31.gif"],
img.new_mark_img1[src*="icons32.gif"],
img.new_mark_img1[src*="icons33.gif"] {
  content: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='67' height='19'><rect width='67' height='19' rx='9.5' fill='%23e8731f'/><g transform='translate(7 4.5) scale(.4167)' fill='%23fff'><path d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/></g><text x='20' y='9.5' dominant-baseline='central' font-family='sans-serif' font-size='10' font-weight='700' fill='%23fff' textLength='40' lengthAdjust='spacingAndGlyphs'>%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1</text></svg>");
}

/* --------------------------------------------------------------------------
   残りわずか（icons63〜65）→ グレー #666・砂時計アイコン
   -------------------------------------------------------------------------- */
img.new_mark_img1[src*="icons63.gif"],
img.new_mark_img1[src*="icons64.gif"],
img.new_mark_img1[src*="icons65.gif"] {
  content: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='77' height='19'><rect width='77' height='19' rx='9.5' fill='%23666666'/><g transform='translate(7 4.5) scale(.4167)' fill='%23fff'><path d='M18 22l-.01-6L14 12l3.99-4.01L18 2H6v6l4 4-4 3.99V22h12zM8 7.5V4h8v3.5l-4 4-4-4z'/></g><text x='20' y='9.5' dominant-baseline='central' font-family='sans-serif' font-size='10' font-weight='700' fill='%23fff' textLength='50' lengthAdjust='spacingAndGlyphs'>%E6%AE%8B%E3%82%8A%E3%82%8F%E3%81%9A%E3%81%8B</text></svg>");
}

/* --------------------------------------------------------------------------
   商品タイトルの行間調整（バッジの有無に関わらず1.6emで統一）
   バッジ高さ19pxが標準の行間（1.26em〜1.3em）にぎりぎりで、2行に折り返す
   タイトルが詰まって見えるため広げる。バッジ付きの行だけ広げると同じ一覧内で
   行間が不揃いになるので、商品タイトルは一律で揃える。
   対象: 商品一覧・検索結果・トップおすすめ（.item_name）、
         商品詳細の見出し（.product_name）、売れ筋ランキング（#bestseller系のh3）
   ※h3全般には掛けない（「Customers who bought…」等のセクション見出しまで
     広がってしまうため）。ランキング以外のh3はバッジ付きのときだけ対象にする
   ※!importantは必須。既存指定にIDセレクタ（#bestseller_rank ul li h3 等、
     common_v3.0.css:474）が含まれ、クラスの詳細度では勝てないため
   -------------------------------------------------------------------------- */
.item_name,
.product_name,
#bestseller ul li h3,
#bestseller_rank ul li h3,
#bestseller_rank2 ul li h3,
h3:has(img.new_mark_img1) {
  line-height: 1.6em !important;
}