@charset "UTF-8";
/* ==========================================
 Layout
============================================*/
/* ==========================================
 Contents
============================================*/
/** 商品コンテナ **/
.product {
  color: #2a2a2a;
  font-size: var(--sz-24);
  font-weight: 400;
  line-height: 1.5;
  padding-block: var(--sz-38) var(--sz-35);
}

/** 商品見出し **/
.product__heading {
  text-align: center;
  font-size: var(--sz-50);
  font-weight: 700;
  line-height: 1.53;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sz-38);
}
.product__heading::after {
  content: "";
  display: block;
  width: var(--sz-454);
  height: 1px;
  background-color: var(--color-primary);
}

/** 商品本文 **/
/** 検索ナビゲーション **/
.search-nav {
  margin-bottom: var(--sz-50);
}

.search-nav-select {
  display: flex;
  justify-content: flex-end;
  gap: var(--sz-12);
}

.search-nav-select .form-select {
  font-size: var(--sz-28);
  color: inherit;
  width: auto;
}

/** 商品一覧 **/
.product__shelf {
  margin-bottom: var(--sz-30);
}

.product__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sz-50) var(--sz-30);
}

/** 商品画像 **/
.product__image {
  display: grid;
  gap: var(--sz-12);
  position: relative;
}
.product__image img {
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  border: var(--sz-3) solid var(--color-primary);
}

/** 商品タグ **/
.product__tags {
  position: absolute;
  top: var(--sz-8);
  right: var(--sz-8);
  display: flex;
  flex-direction: column;
  gap: var(--sz-6);
}

.product__tag {
  color: #fff;
  font-size: var(--sz-18);
  font-weight: bold;
  line-height: 2.1;
  background-color: var(--bg-color, var(--color-primary));
  width: var(--sz-72);
  display: flex;
  padding: 0.2em 0.4em;
  align-items: center;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.5em) 50%, 100% 100%, 0 100%);
}
.product__tag.tag_1 {
  --bg-color: #ff5177;
}
.product__tag.tag_2 {
  --bg-color: #6fa2ff;
}
.product__tag.tag_3 {
  --bg-color: #f7931e;
}

/** 商品情報 **/
.product__info {
  display: grid;
  gap: var(--sz-4);
}

/** 商品名 **/
.product__name {
  font-feature-settings: "palt";
  font-size: var(--sz-30);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  /*** 長い商品名の省略表示 ***/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: -moz-min-content;
  height: min-content;
}

/** 商品価格 **/
.product__price {
  font-size: var(--sz-32);
  font-weight: 700;
  line-height: 1.31;
  /*** 通貨単位 ***/
  /*** 割引ありの場合の売価 ***/
  /*** 割引ありの場合の定価 ***/
}
.product__price small {
  font-size: 75%;
}
.product__price:has(s) {
  color: var(--color-pink);
}
.product__price s {
  text-decoration-color: var(--color-pink);
  text-decoration-thickness: var(--sz-2);
  font-size: var(--sz-24);
  font-weight: 400;
  color: var(--color-gray);
}
.product__price s small {
  font-size: 100%;
}

/** 商品詳細ボタン **/
.product__btn-detail {
  color: #fff;
  background-color: var(--color-primary);
  font-size: var(--sz-32);
  font-weight: 400;
  line-height: 1.75;
  text-decoration: none;
  text-align: center;
}

/** 商品アクション **/
.product__actions {
  margin-bottom: var(--sz-25);
}

.product__numberInput {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1em;
  font-size: var(--sz-28);
  font-weight: bold;
  line-height: 1.25;
}

.product__numberInput .form-control {
  display: inline-block;
  border-radius: var(--sz-5);
  color: inherit;
  border-color: #7a7a7a;
  width: 5em;
  font-size: var(--sz-28);
}

/** ページネーション **/
.ec-pager {
  color: var(--color-primary);
  font-size: var(--sz-28);
}

.ec-pager .ec-pager__item--active {
  background: #e5e5e5;
}

@media screen and (min-width: 992px) {
  /** 商品ブロック **/
  /** 商品見出し **/
  .product__heading {
    font-size: var(--sz-50);
    margin-bottom: var(--sz-23);
  }
  /** 商品本文 **/
  .product__body {
    padding-inline: var(--sz-10);
  }
  /** 検索ナビゲーション **/
  .search-nav {
    margin-bottom: var(--sz-38);
  }
  .search-nav-select {
    gap: var(--sz-12);
  }
  .search-nav-select .form-select {
    font-size: var(--sz-16);
  }
  /** 商品一覧 **/
  .product__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sz-28) var(--sz-30);
  }
  /** 商品画像 **/
  .product__image {
    gap: var(--sz-6);
  }
  /** 商品タグ **/
  .product__tags {
    top: var(--sz-4);
    right: var(--sz-4);
    gap: var(--sz-4);
  }
  .product__tag {
    font-size: var(--sz-14);
    width: var(--sz-56);
    line-height: 1.2;
  }
  /** 商品情報 **/
  /** 商品名 **/
  .product__name {
    font-size: var(--sz-20);
  }
  /** 商品価格 **/
  .product__price {
    font-size: var(--sz-20);
    /*** 通貨単位 ***/
    /*** 割引ありの場合の売価 ***/
    /*** 割引ありの場合の定価 ***/
  }
  .product__price:has(s) {
    font-size: var(--sz-20);
  }
  .product__price s {
    font-size: 75%;
  }
  /** 商品詳細ボタン **/
  .product__btn-detail {
    font-size: var(--sz-20);
  }
  /** 商品アクション **/
  .product__actions {
    margin-bottom: var(--sz-15);
  }
  .product__numberInput {
    font-size: var(--sz-16);
  }
  .product__numberInput .form-control {
    font-size: var(--sz-18);
  }
}