@charset "utf-8";
/* CSS Document */


/* ==================================================
   商品一覧：4商品 デザイン調整用
   対象：#itemList .column4
================================================== */

#main-column .column-set p {
  text-align: left !important;
}


/* ==================================================
   01. 商品名
   最大2行まで表示し、3行目以降は非表示
================================================== */

#itemList .column4 h2 {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  margin: 10px 0 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
  overflow: hidden !important;

  line-height: 1.5 !important;
}

#itemList .column4 h2 a {

  /* --- フォントサイズ --- */
   font-size: 14px !important; 

  /* --- 太さ --- */
  /* font-weight: 500 !important; */

  /* --- 文字色 --- */
  /* color: #222222 !important; */

  /* --- 最大2行まで表示 --- */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  line-height: 1.5 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  max-height: 3em !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* 念のため、h2直下にa以外の文字が出ても3行目は見せない */
#itemList .column4 h2 {
  clip-path: inset(0) !important;
}


/* ==================================================
   02. 商品カード全体
   Gridで各要素の表示位置を固定

   1段目：商品画像
   2段目：商品名
   3段目：OFF率
   4段目：元価格 ＋ 販売価格 ＋ 税込
   5段目：送料無料
   6段目：レビュー
   7段目：在庫表示
   8段目：お気に入り
================================================== */

#itemList .column4 {
  display: grid !important;

  grid-template-columns:
    auto
    auto
    auto
    1fr !important;

  grid-template-areas:
    "thumb    thumb    thumb    thumb"
    "title    title    title    title"
    "discount discount discount discount"
    "oldprice saleprice tax      rest"
    "shipping shipping shipping shipping"
    "review   review   review   review"
    "stock    stock    stock    stock"
    "wish     wish     wish     wish" !important;

  /*
    商品名より下の高さを統一
    thumbは画像自身の高さ
    titleはCSSで52px固定済み
  */
  grid-template-rows:
    auto
    52px
    27px
    23px
    22px
    30px
    0
    34px !important;

  column-gap: 6px !important;
  row-gap: 0 !important;

  align-items: baseline !important;
}

/* ==================================================
   03. 商品画像
================================================== */

#itemList .column4 .itemThumb-wrap {
  grid-area: thumb !important;
}


/* ==================================================
   04. 商品名
================================================== */

#itemList .column4 h2 {
  grid-area: title !important;
}


/* ==================================================
   05. セール価格

   .fx_price
   .sp_price

   という外側の箱をなくして、
   中身を商品カードのGridに直接参加させる
================================================== */

#itemList .column4 .fx_price,
#itemList .column4 .sp_price {
  display: contents !important;
}


/* ==================================================
   06. ○％OFF

   必ず価格より上の段に表示
================================================== */

#itemList .column4 .sp_price > .discount_rate {
  grid-area: discount !important;

  justify-self: start !important;
  align-self: end !important;

  display: inline-block !important;

  width: auto !important;

  margin: 0 0 0 0 !important;
  padding: 3px 5px !important;

  background: #ef5555 !important;
  color: #ffffff !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  border-radius: 1px !important;

  text-align: left !important;

  white-space: nowrap !important;
}


/* ==================================================
   07. 元価格
================================================== */

#itemList .column4 .fx_price > .strike {
  grid-area: oldprice !important;

  justify-self: start !important;
  align-self: baseline !important;

  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px !important;
  font-weight: 400 !important;

  color: #666666 !important;

  line-height: 1.4 !important;

  white-space: nowrap !important;
}


/* 元価格の数字 */

#itemList .column4 .fixed_price {
  font-size: 12px !important;
  font-weight: 400 !important;

  color: #666666 !important;
}


/* 元価格側の「税込」は非表示 */

#itemList .column4 .strike .taxin {
  display: none !important;
}



/* ==================================================
   08. セール販売価格
================================================== */

#itemList .column4 .sp_price > .selling_price {
  grid-area: saleprice !important;

  justify-self: start !important;
  align-self: baseline !important;

  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 17px !important;
  font-weight: 600 !important;

  color: #ff6f6f !important;

  line-height: 1.3 !important;

  white-space: nowrap !important;
}


/* ==================================================
   09. セール価格の税込
================================================== */

#itemList .column4 .sp_price > .taxin {
  grid-area: tax !important;

  justify-self: start !important;
  align-self: baseline !important;

  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 11px !important;
  font-weight: 400 !important;

  color: #ff6f6f !important;

  line-height: 1.3 !important;

  white-space: nowrap !important;
}


/* ==================================================
   10. セール商品の送料無料
================================================== */

#itemList .column4 .sp_price > .sps-freeShippingLabel {
  grid-area: shipping !important;

  justify-self: start !important;

  display: block !important;

  width: auto !important;

  margin: 4px 0 0 0 !important;
  padding: 0 !important;

  color: #35380A !important;

  font-size: 13px !important;
  font-weight: 400 !important;

  line-height: 1.4 !important;

  text-align: left !important;

  white-space: nowrap !important;
}


/* ==================================================
   11. 不要な価格ラベルを非表示
================================================== */

#itemList .column4 .selling_price_str,
#itemList .column4 .special_price_str,
#itemList .column4 .fixed_price_str {
  display: none !important;
}


/* ==================================================
   12. 通常商品

   セールではない商品の価格エリア

   セール商品の配置と高さを合わせるため、
   3～5段目をまとめて使用
================================================== */

#itemList .column4 .price {
  grid-column: 1 / -1 !important;
  grid-row: 3 / 6 !important;

  display: grid !important;

  grid-template-columns:
    auto
    auto
    1fr !important;

  grid-template-rows:
    27px
    auto
    auto !important;

  column-gap: 2px !important;
  row-gap: 0 !important;

  min-height: 66px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  text-align: left !important;

  align-items: baseline !important;
}


/* ==================================================
   13. 通常商品の販売価格
================================================== */

#itemList .column4 .price > .selling_price {
  grid-column: 1 !important;
  grid-row: 2 !important;

  justify-self: start !important;

  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 17px !important;
  font-weight: 600 !important;

  color: #35380A !important;

  line-height: 1.3 !important;

  white-space: nowrap !important;
}


/* ==================================================
   14. 通常商品の税込
================================================== */

#itemList .column4 .price > .taxin {
  grid-column: 2 !important;
  grid-row: 2 !important;

  justify-self: start !important;

  display: inline-block !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 11px !important;
  font-weight: 400 !important;

  color: #35380A !important;

  line-height: 1.3 !important;

  white-space: nowrap !important;
}


/* ==================================================
   15. 通常商品の送料無料
================================================== */

#itemList .column4 .price > .sps-freeShippingLabel {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;

  justify-self: start !important;

  display: block !important;

  width: auto !important;

  margin: 4px 0 0 0 !important;
  padding: 0 !important;

  color: #35380A !important;

  font-size: 13px !important;
  font-weight: 400 !important;

  line-height: 1.4 !important;

  text-align: left !important;

  white-space: nowrap !important;
}


/* ==================================================
   16. 販売価格の￥マーク
================================================== */

#itemList .column4 .selling_price::first-letter {

  /* --- ￥マークのサイズ --- */
  /* font-size: 12px !important; */

  /* --- ￥マークの太さ --- */
  /* font-weight: 400 !important; */

  /* --- ￥マークの色は親要素と同じ --- */
}


/* ==================================================
   17. 星＋レビューエリア
================================================== */

#itemList .column4 .review-summary-container {
  grid-area: review !important;

  height: 30px !important;
  min-height: 30px !important;

  margin: 0 !important;

  box-sizing: border-box !important;

  text-align: left !important;
}


/* ==================================================
   18. 星
================================================== */

#itemList .column4 .starRating .ukmcustomfont {

  /* --- 星の大きさ --- */
  /* font-size: 17px !important; */

  /* --- 星の色 --- */
  color: #D9AD33 !important;
}


/* ==================================================
   19. レビュー件数
================================================== */

#itemList .column4 .reviewNumber {

  /* --- フォントサイズ --- */
  /* font-size: 12px !important; */

  /* --- 太さ --- */
  /* font-weight: 400 !important; */

  /* --- 文字色 --- */
  /* color: #777777 !important; */
}


/* ==================================================
   20. 星＋件数 全体
================================================== */

#itemList .column4
.review-summary-container
.ukomistarRatingSummarySection {

  /* --- 上の余白 --- */
  /* margin-top: 5px !important; */

  /* --- 下の余白 --- */
  /* margin-bottom: 8px !important; */

  text-align: left !important;
}


/* ==================================================
   21. 在庫表示
================================================== */

#itemList .column4 .sps-itemList-stockDisp {
  grid-area: stock !important;
}


/* ==================================================
   22. お気に入り登録：エリアそのもの
================================================== */

#itemList .column4 p[class^="sps-wishArea"] {
 /* grid-area: wish !important;

  height: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;

  box-sizing: border-box !important;*/

  /* --- 上の余白 --- */
  /* margin-top: 10px !important; */

  /* --- 表示する --- */
  /* display: block !important; */

  /* --- 完全に非表示 --- */
   display: none !important; 
}