@charset "utf-8";
/* history-section.css（PC と SP）
   閲覧履歴（.section-history）の一覧。LOCONDO トップと LOCOLET トップの共通部品（CRE_DEV-837）。
   商品は共通テンプレート（#catalogList_template）で描く。
   PC と SP は画面幅ではなく HTML の作りで見分ける（LOCONDO は PC 用と SP 用の HTML を端末で出し分けている）。
   - PC: UIkit のスライダー（.uk-slider）で横に送る。画像だけ
   - SP: 横スクロールの枠（.historyList-wrap）に並べる。画像とブランド名と商品名
   見出しと枠の余白は、それぞれのページの CSS で持つ。

   並び
   1. PC と SP で共通
   2. PC（.uk-slider）
   3. SP（.historyList-wrap） */

/* ==============================
   1. PC と SP で共通
   ============================== */
.section-history .catalogList_item {
  position: relative;
  overflow: hidden;
}
.section-history .catalogList_item > a {
  display: block;
  color: #333;
  text-decoration: none;
}
/* 画像の枠は正方形で、縦長の商品は上をそろえて下を切る（切り方は catalogList_template.css の「2. 画像トリミング」） */
.section-history .catalogList_item .product-image {
  --ratio: 1/1;
  background-color: #fff;
}
/* アイコン、マイブランドとミュートのボタン、割引とクーポンの帯、価格は出さない */
.section-history .catalogList_item :is(.product-icon, .catalog-myBrandBtnSet, .catalog-campaignGroup, .priceLine) {
  display: none;
}
/* 「閲覧履歴がないため『おすすめ商品』を表示しています」 */
.section-history .note {
  display: block;
  text-align: center;
  color: #999;
  margin-bottom: 12px;
}

/* ==============================
   2. PC（.uk-slider）
   ============================== */
.section-history .uk-slider {
  position: relative;
}
/* 一覧は uk-slider-items（UIkit が flex で横に並べる）。折り返さず、間は gap で持つ */
.section-history .uk-slider .catalogList {
  flex-wrap: nowrap;
  gap: 5px;
}
/* 1画面に10件 */
.section-history .uk-slider .catalogList_item {
  display: block;
  width: calc((786px - 45px) / 10);
}
.section-history .uk-slider .catalogList_item > a:hover .product-image {
  opacity: .7;
}
/* 文字は出さない（画像だけ） */
.section-history .uk-slider .catalogList_item .product-text {
  display: none;
}
/* 左右の送りボタン */
.section-history a.uk-position-small {
  right: 5px;
  top: 50%;
  background-color: rgba(0, 0, 0, .2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  z-index: 10;
  transition: .2s;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: .8;
}
.section-history a.uk-position-small:hover {
  opacity: 1;
  border: 1px solid #fff;
}
.section-history a.uk-position-small svg {
  color: #fff;
  width: 15px;
  height: 15px;
}

/* ==============================
   3. SP（.historyList-wrap）
   ============================== */
.section-history .historyList-wrap {
  overflow-x: scroll;
  overflow-y: hidden;
}
.section-history .historyList-wrap .catalogList {
  display: flex;
  gap: 4px;
  padding: 0 12px;
}
/* 右端にも左端と同じくらいの余白を作るための空の文字（LOCONDO トップの横スクロールの一覧と同じ作り） */
.section-history .historyList-wrap .catalogList::after {
  content: "スペース開けたい";
  color: #fff;
}
.section-history .historyList-wrap .catalogList_item {
  width: 106px;
  box-sizing: border-box;
  flex-shrink: 0;
}