@charset "UTF-8";

/*-- productlist_original.css --*/
/* 商品一覧・検索 */

/* 上部 */
.l-container {
  padding-top: 285px;
  max-width: 1200px;
  margin: 0 auto;
}

.p-list_header__inner {
  justify-content: right;
  column-gap: 1.2rem;
}

/* カテゴリタイトル */
/* .l-container__row:has(.p-page_header) {
  display: none;
} */

.l-container__row:has(.p-page_header) {
  margin-top: 0 !important;
}

@media screen and (max-width: 719px) {
  .p-page_header {
    margin-top: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 下部banner.liquid表示されるので非表示 */
.l-container__row:has(.p-banner_section) {
  display: none;
}

/* 該当商品ないときおすすめでるので非表示 */
/* .p-zero-result {
  display: none !important;
}

.p-product_list__list{
  display: none !important;
} */

/* NEWアイコン */
.c-product_item__inner__eyecatch__tags__new {
  display: block !important;
}

/* パンくず */
.p-breadcrumbs {
  max-width: fit-content;
  width: 100%;
  margin: 1rem auto 0;
  padding: 0 !important;
  position: absolute;
  z-index: 1;
}

.p-category_tool {
  padding-right: 0;
  padding-left: 0;
}

.p-category_tool__inner {
  gap: 1.5rem;
}

/* 検索結果 */
.p-list_header__inner__title {
  font-size: 1.2rem !important;
  color: #333333 !important;
}

/* 検索結果　絞り込み条件 */
#add_product_async_view {
  position: relative;
}

.c-search_cond {
  position: absolute;
  top: 0;
  padding: 1rem 0 0;
}

.c-search_cond__label {
  font-size: 1.2rem;
  line-height: 2;
  margin-bottom: 0;
  color: #333333;
}

.c-search_cond__condition {
  padding: 3px 12px 0px;
}

.c-search_cond__condition__val {
  font-size: 1.2rem;
  color: #333333;
}

/* 全〇件 */
.c-list_tool__num {
  font-size: 1.2rem !important;
  color: #121212 !important;
  margin-right: 0;
}

/* ソート */
.c-select_sort {
  display: flex;
  align-items: center;
  position: relative;
  height: auto;
  font-size: 1.2rem;
}

.c-select_sort:after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #333333;
  border-right: solid 2px #333333;
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%) rotate(135deg);
  bottom: 0;
}

#select_sort {
  border: 1px solid #CCCCCC;
  border-radius: 18px;
  line-height: 1.2;
  padding: 1.2rem 6rem 1rem 2rem;
  cursor: pointer;
  font-size: 1.2rem;
}

/* 一覧 */
.p-product_list {
  padding-right: 0;
  padding-left: 0;
}

.p-product_list__list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14rem 9rem;
}

.p-product_list__list__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.c-product_item__inner__category {
  display: none;
}

.p-zero-result {
  max-width: 1200px;
  width: 100%;
}



@media screen and (min-width: 720px) {
  .p-product_list .medium-up--one-4 {
    width: 100%;
  }

  .p-product_list .medium-up--one-4:not(:nth-child(4n+1)) {
    margin-left: 0px;
  }

  .p-product_list .medium-up--one-4:nth-child(n+5) {
    margin-top: 0;
  }
}

/* アイキャッチ画像 */
.c-product_item__inner__eyecatch__img {
  margin-bottom: 0;
  /* padding: 38%; */
}

/* 商品名 */
.c-product_item__inner__title.u-text--subhead {
  font-size: 2.4rem !important;
  font-weight: 500;
  display: block;
  margin-right: 0;
  font-weight: 500;
  color: #121212 !important;
}

/* 価格 */
.c-product_item__inner__price.u-text--body {
  font-size: 2.4rem !important;
  color: #121212 !important;
  font-weight: 500;
}

.c-product_item__inner__price.u-text--body #price {
  font-size: 1.6rem;
}

/* ラベル */
.c-cart_item__badges {
  margin-top: 1.6rem;
}

.c-product_item__inner__badge {
  display: flex;
  align-items: end;
  gap: 2rem;
}

.c-product_item__inner__eyecatch__tags__new {
  border: 1px solid #ff0000 !important;
  color: #ff0000 !important;
  line-height: 1;
  padding: 7px 14px 4px;
  line-height: 1;
  font-size: 1.2rem;
  margin-top: 0;
}

.c-cart_item__badges li {
  border: 1px solid #cccccc;
  padding: 7px 14px 4px;
  line-height: 1;
}

/* お気に入りアイコン */
.c-product_item__actions {
  right: 0;
  top: 0;
}

.c-product_item__button--favorite.u-color__btn--bg {
  content: " ";
  width: 22px;
  height: 20px;
  background: url(../../uploads/images/productlist-favorite.svg) no-repeat 0 0 !important;
  display: inline-block;
  margin: auto 8px auto auto;
  padding: 0;
  border: 0;
  border-radius: unset;
}

/* カートアイコン */
.c-product_item__form.c-product_item__form--cart {
  display: none;
}

/* ボタン */
.btn-add-async {
  border: 1px solid #FF0000;
  border-radius: 26px;
  color: #FF0000;
  height: 52px;
  /* min-width: 260px; */
  width: 100%;
  line-height: 52px;
  font-size: 1.6rem;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;

  position: relative;
  margin-top: 2rem;
  transition: all 0.3s;
}

.btn-add-async:hover {
  background-color: #FF0000;
  transition: all 0.3s;
}

.btn-add-async span {
  display: inline-block;
  width: 100%;
  /* height: 100%; */
  -webkit-transition: all 0.3s;
  -webkit-backface-visibility: hidden;
  -moz-transition: all 0.3s;
  -moz-backface-visibility: hidden;
  transition: all 0.3s;
  backface-visibility: hidden;
}

.btn-add-async:before {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 2.5;
  font-size: 180%;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  background-color: #FF0000;
}

.btn-add-async:active:before {
  background-color: #FF0000;
}

.btn-add-async:hover span {
  -webkit-transform: translateY(300%);
  -moz-transform: translateY(300%);
  -ms-transform: translateY(300%);
  transform: translateY(300%);
}

.btn-add-async:before {
  left: 0;
  top: -100%;
}

.btn-add-async:hover:before {
  top: 0;
}

.btn-add-async:before {
  content: "";
  background: url(../../uploads/images/productlist-cartbtn.svg) no-repeat center center;
}





/* バナー */
.p-product_list_banner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 4rem;
  display: none;
}

.p-product_list_banner__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: 2.9rem;
}

.p-product_list_banner img {
  border-radius: 12px;
}


/* ページネーション */
.p-pagenation_link {
  max-width: 1200px;
  width: 100%;
  margin: 6rem auto 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.p-pagenation_link a,
.p-pagenation_link span {
  width: 60px;
  height: 60px;
  display: block;
  text-align: center;
  line-height: 60px;
  font-size: 2.4rem;
}

.p-pagenation_link a {
  color: #707070;
}

.p-pagenation_link span {
  background-color: #FDDDC7;
  border-radius: 50%;
  color: #333333;
}

.p-pagenation_link img {
  width: 16px;
}

.p-pagenation_link__prev,
.p-pagenation_link__next {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* ==============================
  幅調整
============================== */
@media screen and (max-width: 1280px) {
  .l-container {
    padding: 0 5vw;
  }
}

/*--- max-width: 1280pxここまで ---*/

@media screen and (max-width: 1024px) {}

/*--- max-width: 1280pxここまで ---*/

@media screen and (max-width: 920px) {}
  
  /*--- max-width: 920pxここまで ---*/

/* ==============================
  SP
============================== */
@media screen and (max-width: 768px) {

  .l-container {
    padding: 0;
  }

  .l-container__row {
    width: 89.84vw;
    margin: 0 auto;
    padding-bottom: 1vw;
  }


  .p-list_header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  /* カテゴリタイトル */
  .l-container__row:has(.p-page_header) {
    padding-bottom: 5vw;
    margin-top: 16px !important;
  }

  .p-page_header__inner__title {
    margin-bottom: 0;
  }

  .p-page_header__inner__lead {
    display: none;
  }


  /* 下部灰色部分調整 */
  body .l-wrapper-none {
    background-color: #F7F7F7 !important;
  }

  main {
    background-color: #ffffff !important;
  }


  /* バナー */
  .p-product_list_banner {
    overflow: scroll;
    margin: 0 auto 5.21vw;
  }

  .p-product_list__inner__item {
    width: 36.2vw;
  }

  .p-product_list_banner img {
    border-radius: 1.56vw;
  }

  /* 上部パンくず */
  .p-breadcrumbs--pc {
    display: block;
    margin-left: 5.21vw;
  }

  /* 下部パンくず */
  .p-breadcrumbs--sp {
    padding: 7.81vw 5.21vw 2.6vw !important;
    background: initial !important;
    position: initial;
    background: #F7F7F7 !important;
    border-radius: 0;
    /* margin: 7.81vw 0 0; */
    width: 100%;
    max-width: 100%;
  }

  .p-breadcrumbs--sp+.p-breadcrumbs--sp {
    margin-top: 2.6vw;
  }

  .p-breadcrumbs--sp .c-breadcrumbs {
    border-radius: 0;
    margin-top: 0;
    padding: 0;
    background-color: #F7F7F7 !important;
  }

  /* 検索結果 */
  .p-list_header__inner__title {
    margin-right: auto;
    margin-bottom: 0;
    width: 100%;
    font-size: 3.6vw !important;
  }

  .p-list_header {
    padding-right: 0;
    padding-left: 0;
  }

  /* 絞り込み条件 */
  .c-search_cond {
    position: initial;
  }

  .c-search_cond__label {
    font-size: 2.08vw;
    margin-bottom: 0;
    display: flex;
    align-items: center;
  }

  .c-search_cond__condition__val {
    font-size: 2.08vw;
  }

  .c-search_cond__condition {
    margin: auto 0;
    height: fit-content;
    padding: 1.5vw;
  }

  /* 全〇件 */
  .c-list_tool__num {
    font-size: 3.6vw !important;
  }


  .p-category_tool__inner {
    display: flex;
    justify-content: flex-end;
    margin: 4rem auto 0;
  }

  /* ソート */
  .c-select_sort {
    font-size: 3.6vw;
  }

  .c-select_sort:after {
    width: 2vw;
    height: 2vw;
    border-top: solid 1px #333333;
    border-right: solid 1px #333333;
    right: 2.86vw;
  }

  #select_sort {
    border-radius: 5.13vw;
    line-height: 1.2;
    padding: 3vw 9.11vw 1.6vw 4.69vw;
    font-size: 3.6vw;
  }

  /* 一覧 */
  .p-product_list__list {
    grid-template-columns: 1fr 1fr;
    gap: 11.72vw 15.63vw;
    margin-top: 10.42vw;
  }

  .p-product_list .medium-up--one-4 {
    width: 100%;
  }

  .p-product_list .medium-up--one-4:nth-child(even) {
    margin-left: 0;
  }
  

  /* お気に入り */
  .c-product_item__button--favorite.u-color__btn--bg {
    width: 3.65vw;
    height: 3.39vw;
    background-size: contain !important;
  }

  /* 商品名 */
  .c-product_item__inner__title.u-text--subhead {
    font-size: 3.13vw !important;
  }

  .c-product_item__inner__price.u-text--body {
    font-size: 3.13vw !important;
  }

  .c-product_item__inner__price.u-text--body #price {
    font-size: 2.08vw;
  }

  /* ラベル */
  .c-cart_item__badges {
    margin-top: 2.08vw;
  }

  .c-cart_item__badges li {
    /* padding: 0.91vw 1.8vw; */
    padding: 0.91vw 1.8vw 0.7vw;
  }

  .c-product_item__inner__badge {
    gap: 2.6vw;
  }

  .c-product_item__inner__eyecatch__tags__new {
    /* padding: 0.91vw 1.8vw; */
    padding: 0.91vw 1.8vw 0.7vw;
    font-size: 1.56vw;
  }



  /* ボタン */
  .btn-add-async {
    border-radius: 3.91vw;
    height: 7.81vw;
    line-height: 7.81vw;
    font-size: 2.34vw;
    margin-top: 2.6vw;
  }

  .btn-add-async:before {
    background-size: 4vw;
  }

  /* ページネーション */
  .p-pagenation_link {
    margin: 0 auto;
    /* margin: 13.02vw auto 0; */
    justify-content: center;
    padding-bottom: 7.81vw;
  }

  .p-pagenation_link a,
  .p-pagenation_link span {
    width: 7.81vw;
    height: 7.81vw;
    line-height: 7.81vw;
    font-size: 3.13vw;
  }

  .p-pagenation_noitem {
    width: 89.84vw;
    margin: 0 auto;
  }

}

/*--- max-width: 768pxここまで ---*/