/* catalogList_template.css */
@layer assets {

:where(.catalogList)>li{
  /* 上書き前提のデフォルト */
  width:130px;
}

.catalogList .product-text {
  padding-top: 10px;
}
.product-text .brandName {
  display: block;
  font-size: var(--font-size-s);
  font-weight:600;
  line-height: 1.1;
  color: var(--text-base-grey-dark);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  position: relative;
  margin-bottom:.5em;
}
/* quickview.cssの影響を打ち消す */
html .catalogList .brandNameLine{
  margin-bottom:0;
}

.product-text .brandName:has(.trgMute:hover) {
  background: var(--color-base-grey-light-high);
  border-radius: 4px;
}

.product-text .commodityName {
  display: inline-block;
  width: 100%;
  font-size: calc(var(--font-size-s) - 1px);
  line-height: 1.1;
  color: var(--text-base-grey-dark-high);
  overflow: hidden;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: .65em;
}
.product-text .priceLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.product-text .priceLine > p {
  width: 100%;
}
.product-text .regular_price,
.product-text .special_price {
  font-size: var(--font-size-m);
  font-weight:600;
  line-height: 1;
  letter-spacing: .04em;
  margin-bottom: .5em;
}
.site_docomo .product-text :is(.regular_price, .special_price){
  font-size: calc(var(--font-size-s) + 2px);
}
.product-text .special_price .-proper {
  display: none;
  font-size: .9em;
  color: #999;
  text-decoration-line: line-through;
}
.product-text .priceLine .icon-favItemAdd {
  position: absolute;
  right: 0;
}
.product-text .regular_price {
  color: var(--text-base-grey-dark);
}
.product-text .special_price {
  color: #FF0030;
}
.product-text .suffixTax {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  transform-origin: center left;
}
.catalogList_item>a:hover .product-text {
  opacity: .6;
}
.catalogList .regular_price .suffixTax {
  color: #999;
}
.catalogList .special_price .suffixTax {
  color: rgba(199, 0, 11, .8);
}
/* 付与ポイント */
.acquisition_point{
  font-size: 11px;
  font-weight: 500;
  color: #cc0033;
}

/*-- ミュートブランド --*/
.trgMute {
  /* display: none; */
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: all .64s ease;
}
.trgMute::before {
  font-family: "Phosphor";
  content: "\E224";
  color: var(--color-base-black);
  font-size: 18px;
  font-weight: 400;
  position: absolute;
  right: 3px;
}
.catalogList_item a:hover .trgMute {
  display: inline-block;
  opacity: .4;
}
.catalogList_item a:hover .trgMute::before {
  opacity: 1;
}
.catalogList_item a .trgMute:hover {
  opacity: 1;
}


/* デスクトップビューポート (769px以上) */
@media (min-width: 769px) {
.catalogList .product-text {
  padding-right: 8px;
  padding-left:.2em !important;
}
  
}

/* モバイルビューポート (769px以下) */
@media (max-width: 769px) {
  .product-text {
    width: 100%;
    padding: 8px 8px 0 .2em;
    font-feature-settings: "palt" 1;
    letter-spacing:.07em;
  }
  .search-result .product-text {
    padding-left:8px;
  }
  .product-text .brandNameLine {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .product-text .brandName {
    letter-spacing: .04em;
  }
  body:not(:has(#searchBrandName)) .product-text .brandName {
    width: calc(100% - 0px);
  }

  /* 価格行 */
  .product-text .priceLine {
    justify-content: flex-start;
  }
  .search-result .product-text .priceLine{
    font-size: var(--font-size-m);
  }
  .site_docomo .search-result .priceLine :is(.regular_price, .special_price){
    margin-bottom: .6em;
  }
  .regular_price.special_price{
    color: #c03;
  }

  .product-text .special_price,
  .product-text .regular_price {
    letter-spacing: .02em;
    font-feature-settings: "palt";
  }
  .catalogList_item>a:hover .product-text {
    opacity: 1;
  }
}


/* 商品画像の縦横比率 */
/* 変数 --ratio (例：5/7), --ratio-inverse (例：7/5) */
.catalogList .product-image {
  box-sizing: border-box;
  background-color: #fefefe;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.catalogList .product-image,
.catalogList .product-image:before {
  aspect-ratio: var(--ratio);
}
.catalogList .product-image:before {
  content: "";
  display: block;
  width: 100%;
  background-color: rgba(0, 0, 0, .02);
  position: absolute;
  top: 0;
  left: 0;
}
.catalogList .product-image.-square:hover:before{
  opacity:0;
}
.catalogList .product-image > img {
  width: calc(100% * var(--ratio-inverse));
  max-width: initial;
  height:auto;
  margin: 0 !important;
}
.catalogList .product-image.-square > img {
  width: 100%;
}

/* 正方形カテゴリ画像を長方形枠にトリミングなしで配置 */
.site_docomo .catalogList_item.-square .product-image > img{
  width: 100%;
}

/* ランキング順位 */
:where(
  #brand_ranking_list,
  #brand_category_ranking,
  #category_ranking_list
) .catalogList > li{
  position:relative;
}
:where(
  #brand_ranking_list,
  #brand_category_ranking,
  #category_ranking_list
) .badge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  background: #666;
  color: #fff;
  width: 20px;
  height: 20px;
  font-size:12px;
}
.catalogList li:nth-of-type(1) .badge {
  background-color: #FC0;
  color: #222;
}
.catalogList li:nth-of-type(2) .badge {
  background: #87ACAC;
}
.catalogList li:nth-of-type(3) .badge {
  background: #94684D;
}
.catalogList .badge em{
  font-style:normal;
}

}

.site_docomo :is(
  #brand_ranking_list,
  #brand_category_ranking,
  #category_ranking_list
) .catalogList .badge{
  display: flex !important;
}

/* swiper-button */
#brand_category_ranking,
#recently_viewed_item,
#brand_ranking_list,
#category_ranking_list,
#history,
#cart_ranking,
#cartRemind,
#orderComplete_recommend,
#zeroResult_recommend_item,
.wrap_catalogList{
  position:relative;
}
.swiper ~ [class^="swiper-button-"]{
  background-color:red;
  z-index:10;
  border-radius: 50%;
  background: rgba(34, 34, 34, 0.7);
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  top:112px;
  transition:.2s;
}
:is(
  #brand_ranking_list,
  #category_ranking_list,
  #history,
  #cart_ranking,
  #cartRemind,
  #orderComplete_recommend) 
  [class^="swiper-button-"]
{
  top:124px
}
.swiper ~ .swiper-button-prev{
  left:0;
  transform:translateX(-50%);
}
.swiper ~ .swiper-button-next{
  right:0;
  transform:translateX(50%);
}
.swiper ~ [class^="swiper-button-"]:after{
  content: "\E13A";
  font-family: "Phosphor";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #fff;
}
.swiper ~ .swiper-button-prev:after{
  transform: translateY(-50%) rotate(180deg);
}
.swiper ~ .swiper-button-disabled{
  opacity:0 !important;
}

/* ランキングのミュート お気に入りアイコン */
.section-ranking .-login .catalog-myBrandBtnSet{
  display: inline-flex;/* ログイン */
  visibility:visible !important;
  gap:0 5px;
}
.section-ranking .catalog-myBrandBtnSet span {
  cursor: pointer;
}
.section-ranking .catalog-myBrandBtnSet span i{
  color: #aaa;
  width: 20px;
  height: 20px;
  font-size: 20px;
  background: transparent;
}
.section-ranking .catalog-myBrandBtnSet span i:hover{
  opacity:.7;
}
.section-ranking .catalog-myBrandBtnSet{
  display: none;/* 未ログイン */
  position:absolute;
  right: 2px;
  bottom: 2px;
}
.section-ranking .btn_addMyBrand i:before{
  content:"\e5f0";
  font-family: "Phosphor";
  font-style:normal;
}
.section-ranking .btn_addMuteBrand i:before{
  content:"\e224";
  font-family: "Phosphor";
  font-style:normal;
}