@charset "UTF-8";

html:has([class*="js-add-favorite-modal-area"].show),
html:has(.js-facet-container.show){
  overflow: hidden;
}

.global-contents__inner{
  padding-bottom: 3.7rem;
}

/* レイアウト */
.productlist__sort-filter{
  padding-inline: 1.5rem;
  display: grid;
  grid-template-columns: 60.8695% 1fr;
  gap: 0.5rem;
}

.productlist__filter--toggle{
  padding: 0.5rem 2rem;
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  background-color: var(--color-project-text);
  border-radius: 100vh;
  color: var(--color-white);
}

.productlist__filter--toggle.fixed{
  margin: 2.5rem 4.8rem 0 auto;
  position: sticky;
  bottom: 1rem;
  /* right: 4.8rem; */
  z-index: var(--zindex-floating-element);
  translate: 0 calc(100% + 1rem);
  transition: translate var(--transition-default);
}

.productlist__filter--toggle.fixed[data-state-visible="visible"]{
  translate: 0 0;
}

.productlist__sort-filter .productlist__sort--selector{
  padding-inline: 4.5rem 3.5rem;
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  line-height: 1;
  position: relative;
  z-index: 2;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-project-gray-light);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  background-image:
    url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2225%22%20viewBox%3D%220%200%2025%2025%22%3E%20%3Cg%20transform%3D%22translate(-891%20-539)%22%3E%20%3Crect%20width%3D%2225%22%20height%3D%2225%22%20transform%3D%22translate(891%20539)%22%20fill%3D%22none%22%2F%3E%20%3Cline%20x1%3D%2210.917%22%20transform%3D%22translate(894.214%20546.321)%22%20fill%3D%22none%22%20stroke%3D%22%23595757%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.25%22%2F%3E%20%3Cline%20x1%3D%228.348%22%20transform%3D%22translate(894.214%20551.5)%22%20fill%3D%22none%22%20stroke%3D%22%23595757%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.25%22%2F%3E%20%3Cline%20x1%3D%225.714%22%20transform%3D%22translate(894.214%20556.679)%22%20fill%3D%22none%22%20stroke%3D%22%23595757%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.25%22%2F%3E%20%3Cpath%20d%3D%22M2.5%2C0%2C1.719.893%2C0%2C2.857%22%20transform%3D%22translate(910.286%20555.754)%22%20fill%3D%22none%22%20stroke%3D%22%23595757%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.25%22%2F%3E%20%3Cline%20x2%3D%222.5%22%20y2%3D%222.857%22%20transform%3D%22translate(907.786%20555.754)%22%20fill%3D%22none%22%20stroke%3D%22%23595757%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.25%22%2F%3E%20%3Cline%20x2%3D%220.089%22%20y2%3D%2212.59%22%20transform%3D%22translate(910.196%20545.696)%22%20fill%3D%22none%22%20stroke%3D%22%23595757%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.25%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E'),
    url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%20%3Cg%20transform%3D%22translate(0%2018)%20rotate(-90)%22%3E%20%3Crect%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M350.727-1274.295l-5.914%2C5.192%2C5.914%2C5.192%22%20transform%3D%22translate(-338.706%201278.425)%22%20fill%3D%22none%22%20stroke%3D%22%23999%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%221.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-size: 2.5rem, 1.8rem;
  background-position: center left 1rem, center right 1.3rem;
}

.productlist__tab--control{
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.3rem;
  position: relative;
}

.productlist__tab--control::after{
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color-project-gray-light);
  z-index: -1;
}

.productlist__tab--control .productlist__tab--button{
  width: 100%;
  height: 5.5rem;
  display: grid;
  place-content: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  background-color: var(--color-project-gray-light);
  border-top: 2px solid var(--color-project-gray-light);
  color: var(--color-project-text);
}

.productlist__tab--control .productlist__tab--button[aria-selected="true"]{
  background-color: var(--color-white);
}

.productlist__tab--control .productlist__tab--button[aria-selected="false"] :where(span){
  opacity: 0.4;
}

.productlist__tab--control .productlist__tab--button:nth-of-type(1){
  border-right: 2px solid var(--color-project-gray-light);
  border-radius: 0 0.5rem 0 0;
}

.productlist__tab--control .productlist__tab--button:nth-of-type(2){
  border-left: 2px solid var(--color-project-gray-light);
  border-radius: 0.5rem 0 0 0;
}

.productlist__tab--control .productlist__tab--button .tab-item__name{
  font-family: var(--font-main);
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
}

.productlist__tab--control .productlist__tab--button .tab-item__count{
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  line-height: 1;
}

.productlist__tab--content.show{
  margin-top: 2rem;
}

.productlist__tab--content:not(.show){
  display: none !important;
}

.productlist__heading{
  margin-block: 2rem 1.5rem;
  padding-inline: 1.5rem;
  font-size: 1.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

@media (min-width: 768px){
  .productlist-container{
    margin-top: 6.6rem;
    display: grid;
    grid-template-columns: 17.5% 1fr;
    column-gap: 4.1666%;
  }

  .productlist__tabarea{
    display: grid;
    grid-template-columns: 1fr 17rem;
  }

  .productlist__tab--control{
    margin-top: 0;
    display: flex;
    column-gap: 0.8rem;
    grid-area: 1/1/2/3;
  }

  .productlist__sort-filter{
    padding-inline: 0;
    width: 100%;
    display: block;
    grid-area: 1/2/2/3;
  }

  .productlist__sort-filter .productlist__sort--selector{
    padding-block: 1.1rem;
    width: 100%;
  }

  .productlist__tab--control .productlist__tab--button{
    width: 24.4680%;
    display: flex;
    align-items: center;
  }

  .productlist__tab--control .productlist__tab--button .tab-item__name{
    font-size: 1.6rem;
  }

  .productlist__tab--control .productlist__tab--button .tab-item__count{
    font-size: 1.1rem;
  }

  .productlist__tab--control .productlist__tab--button:nth-of-type(1){
    border-left: 2px solid var(--color-project-gray-light);
    border-radius: 0.5rem 0.5rem 0 0;
  }

  .productlist__tab--control .productlist__tab--button:nth-of-type(2){
    border-right: 2px solid var(--color-project-gray-light);
    border-radius: 0.5rem 0.5rem 0 0;
  }
}

@media (hover: hover) {
  .productlist__tab--control .productlist__tab--button:hover{
    opacity: 1;
  }
}

/* 商品一覧 */
.productlist__container{
  --grid-column: 2;

  display: grid;
  grid-template-columns: repeat(var(--grid-column), 1fr);
  gap: 3rem 0.5rem;
}

.productlist-message{
  margin-block: 2rem;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.productFavoriteModalArea{
  display: none;
}

.product-item{
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.product-item :where(a){
  text-decoration: none;
  color: inherit;
}

.product-item__soldout{
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  line-height: 1.2188;
  z-index: 2;
  background-color: rgb(89 87 87 / 0.4);
  color: var(--color-white);
}

.product-item__image{
  position: relative;
}

.product-item__image .product-item__add-favorite{
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 5;
}

.product-item__details{
  padding: 1rem 1.5rem 0;
}

.product-item__color{
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.product-item__color .product-item__color--tip{
  width: 1.2rem;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.product-item__color .product-item__color--tip :where(img){
  width: 100%;
  height: 100%;
}

.product-item__icon-list{
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.product-item__icon-list:not(:empty){
  margin-top: 1rem;
}

.product-item__icon-list > *{
  width: auto;
  height: 1.8rem;
}

.product-item__icon-item{
  padding: 0.4rem 0.5rem;
  font-size: 1rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  line-height: 1;
  border: 1px solid var(--color-project-gray-light);
  color: var(--color-project-text);
}

.product-item__icon-item[data-icon-no="1"]{
  background-color: var(--color-project-text);
  border-color: var(--color-project-text);
  color: var(--color-white);
}

.product-item__icon-item[data-icon-no="2"]{
  background-color: var(--color-project-red);
  border-color: var(--color-project-red);
  color: var(--color-white);
}

.product-item__name{
  margin-top: 1rem;
  display: block;
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.product__price{
  margin-top: 1.2rem;
}

.product__price .product__price--item{
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.product__price .product__price--discount{
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.product__price .product__price--discount .product__price--item{
  color: var(--color-project-red);
}

.product__price .product__price--discountrate:not(:empty){
  padding: 0.1rem 0.8rem;
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  background-color: rgb(217 39 39 / 0.1);
  border-radius: 100vh;
  color: var(--color-project-red);
}

@media (min-width: 768px) {
  .productlist__container{
    --grid-column: 4;
    gap: 3rem 1.2rem;
  }

  .product-item__details{
    padding: 1.2rem 0 0;
  }

  .product-item__soldout{
    font-size: 1.8rem;
  }

  .product-item__color .product-item__color--tip{
    width: 1.4rem;
  }
}

/* お気に入り登録モーダル */
.add-favorite-modal__area{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-default), visibility var(--transition-default);
}

.add-favorite-modal__area.show{
  opacity: 1;
  visibility: visible;
}

.add-favorite-modal__bg{
  width: 100%;
  height: 100%;
  background-color: rgb(89 87 87 / 0.7);
}

.add-favorite-modal{
  width: 92%;
  max-width: 40rem;
  height: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-white);
  border-radius: 1rem;
  overflow: hidden;
}

.add-favorite-modal__heading{
  padding: 1.2rem 1.5rem;
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  background-color: var(--color-project-gray-light);
}

.add-favorite-modal__heading--title{
  grid-column: 2/3;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
}

.add-favorite-modal__content{
  padding: 3rem 0;
}

.add-favorite-modal__message{
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
}

.add-favorite-modal .c-button__secondary{
  margin-top: 2rem;
  margin-inline: auto;
  width: 63.7681%;
  min-width: unset;
}

.add-favorite-modal[data-modal-type="add-favorite"]{
  width: 100%;
  height: 66.4vh;
  max-width: 60rem;
  display: grid;
  grid-template-rows: auto 1fr;
  top: auto;
  bottom: 0;
  transform: translate(-50%, 0);
  border-radius: 1rem 1rem 0 0;
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__content{
  padding: 0;
  display: grid;
  grid-template-rows: auto 100%;
  overflow: auto;
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__item--color-name{
  margin-top: 1rem;
  display: block;
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-align: center;
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__item-name{
  padding: 0.9rem 1.5rem;
  position: sticky;
  top: 0;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  line-height: 1.5;
  background-color: var(--color-white);
  border-bottom: 0.4rem solid var(--color-project-white);
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__list{
  padding: 2rem 1.5rem;
  height: fit-content;
  display: grid;
  gap: 3rem;
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__item--image{
  height: fit-content;
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__item{
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 2rem;
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__variation--item:first-of-type{
  border-top: 1px solid var(--color-project-gray-light);
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__variation--item{
  padding: 0.8rem 0;
  display: grid;
  grid-template-columns: auto 1fr 2.8rem;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--color-project-gray-light);
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__variation--size,
.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__variation--stock{
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

.add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__variation--stock[data-has-stock="False"]{
  color: var(--color-project-red);
}

.add-favorite-modal[data-modal-type="add-favorite"] .added .add-favorite-modal__variation-icon--shape{
  fill: var(--color-project-pink-primary);
  stroke: var(--color-project-pink-primary);
}


@media (min-width: 768px) {
  .add-favorite-modal[data-modal-type="add-favorite"]{
    max-height: 60dvh;
    display: grid;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    border-radius: 1rem;
  }

  .add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__item-name{
    padding-inline: 3rem;
  }

  .add-favorite-modal[data-modal-type="add-favorite"] .add-favorite-modal__list{
    padding: 2rem 4rem;
  }
}

/* お気に入り登録結果モーダル */
.productlist-content .product__favorite--popup {
  width: min(35rem, 90%);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  display: grid;
  row-gap: 2rem;
  padding: 4rem;
  position: fixed;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}
.productlist-content .product__favorite--popup .c-button {
  min-width: 0;
}

/* 特集一覧 */
.featurelist__container{
  --grid-column: 2;

  padding-inline: 1.5rem;
  display: grid;
  grid-template-columns: repeat(var(--grid-column), 1fr);
  gap: 2.5rem 1.2rem;
}

.feature-item{
  text-decoration: none;
  color: inherit;
}

.feature-item .feature-item__image :where(img){
  aspect-ratio: 1;
  object-fit: cover;
}

.feature-item .feature-item__name{
  margin-top: 1rem;
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .featurelist__container{
    --grid-column: 4;

    padding-inline: 0;
    gap: 3rem 1.2rem;
  }

  .feature-item .feature-item__name{
    margin-top: 1.5rem;
    font-size: 1.4rem;
  }
}

/* 商品閲覧履歴 */
.productlist-history:not(:has(.product__history)){
  display: none !important;
}

.productlist-history{
  padding: 4rem 0 0;
  border-top: 0.6rem solid var(--color-project-white);
}

@media (min-width: 768px) {
  .productlist-history{
    padding: 7rem 0 0;
  }
}