@charset "euc-jp";
/* ============================================
   panorama_商品一覧_A.css
   付加画像（NEW/SALE等）表示修正版
   修正日: 2025-12-15
   ============================================ */

.category-desc img {
  max-width: 100%;
  width: inherit;
  height: auto;
}
.category-desc_2 {
  padding-top: 2em;
}

/* sub category & sub group */

.grp-lst {
  margin-bottom: 40px;
}
.grp-lst-unit {
  display: block;
}

.grp-lst-img {
  display: block;
  margin: 0 auto;
  background: #fff;
}
  .grp-lst-img:hover {
    opacity: 0.8;
  }

.grp-lst-name {
  display: block;
  margin: 4px 0;
  padding: 0;
  font-size: 15px;
}

@media only screen and (max-width: 768px) {
  .grp-lst-unit a {
    display: block;
    padding: .5em 0;
    color: #444;
    text-decoration: none;
  }
  .grp-lst-name {
    font-size: 11px;
  }
}

/* ============================================
   【修正箇所】商品一覧画像の最適化
   付加画像（icons1.gif等）を除外するセレクタに変更
   ============================================ */

/* 商品メイン画像のみに適用（付加画像クラスを除外） */
.prd-lst-unit > a.prd_lst_link > img,
.prd-lst-unit a.prd_lst_link img:not(.new_mark_img1):not(.new_mark_img2) {
  /* アスペクト比を維持しながらコンテナにフィット */
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
  
  /* 読み込み中の表示改善 */
  background-color: #f5f5f5;
}

/* ============================================
   【追加】付加画像（NEW/SALE等のアイコン）のスタイル
   カラーミーショップの付加画像機能対応
   ============================================ */

/* 付加画像の基本スタイル - 前方表示（商品名の前） */
.prd-lst-unit .new_mark_img1,
.prd-lst-unit img.new_mark_img1 {
  width: auto !important;
  height: auto !important;
  max-width: 60px !important;
  max-height: 20px !important;
  min-width: 0 !important;
  display: inline !important;
  vertical-align: middle;
  margin-right: 4px;
  margin-bottom: 0;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background-color: transparent !important;
}

/* 付加画像の基本スタイル - 後方表示（商品名の後） */
.prd-lst-unit .new_mark_img2,
.prd-lst-unit img.new_mark_img2 {
  width: auto !important;
  height: auto !important;
  max-width: 60px !important;
  max-height: 20px !important;
  min-width: 0 !important;
  display: inline !important;
  vertical-align: middle;
  margin-left: 4px;
  margin-bottom: 0;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background-color: transparent !important;
}

/* 属性セレクタでも念のため指定（より確実に） */
.prd-lst-unit img[src*="img.shop-pro.jp/img/new/icons"] {
  width: auto !important;
  height: auto !important;
  max-width: 60px !important;
  max-height: 20px !important;
  display: inline !important;
  vertical-align: middle;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background-color: transparent !important;
}

/* ============================================
   【追加】商品名エリアのスタイル調整
   付加画像と商品名が適切に並ぶように
   ============================================ */

/* 商品名を含むspan要素 */
.prd-lst-unit .prd-lst-name {
  display: block;
  line-height: 1.4;
}

/* 商品名リンク内のレイアウト */
.prd-lst-unit .prd-lst-name a {
  display: inline;
  vertical-align: middle;
}

/* ============================================
   【追加】SOLD OUT / 割引ラベルのスタイル
   Tailwind CSSとの競合を防止
   ============================================ */

/* SOLD OUTラベル */
.prd-lst-unit span.text-gray-400.font-bold,
.prd-lst-unit .text-gray-400.font-bold {
  font-size: 13px !important;
  letter-spacing: 0.5px;
  display: inline-block;
}

/* 割引率ラベル（○○%OFF!!） */
.prd-lst-unit span[class*="bg-red-500"],
.prd-lst-unit .bg-red-500 {
  font-size: 10px !important;
  padding: 2px 6px !important;
  line-height: 1.2 !important;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
}

/* Tailwind text-xs の強制適用 */
.prd-lst-unit .text-xs {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

/* ============================================
   【追加】レスポンシブ対応
   ============================================ */

@media only screen and (max-width: 768px) {
  /* スマートフォンでの付加画像サイズ調整 */
  .prd-lst-unit .new_mark_img1,
  .prd-lst-unit .new_mark_img2,
  .prd-lst-unit img[src*="img.shop-pro.jp/img/new/icons"] {
    max-width: 50px !important;
    max-height: 16px !important;
  }
  
  /* スマートフォンでのラベルサイズ調整 */
  .prd-lst-unit span[class*="bg-red-500"] {
    font-size: 9px !important;
    padding: 1px 4px !important;
  }
}

@media only screen and (max-width: 480px) {
  /* 小さい画面での付加画像サイズ */
  .prd-lst-unit .new_mark_img1,
  .prd-lst-unit .new_mark_img2,
  .prd-lst-unit img[src*="img.shop-pro.jp/img/new/icons"] {
    max-width: 40px !important;
    max-height: 14px !important;
  }
}