@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --color-gold-base: #B79519;
  --color-white-base: #ffffff;
  --color-red-base: #EA4E59;
  --color-green-base: #5C9181;
  --color-orange-base: #FF6517;
  --color-black-base: #0D0D0D;
  --color-blue-base: #4AAEBF;
  --color-purple-base: #8A5A80;
  --color-gray-base: #E5E7EB;
  --color-beige-base: #F5F1E8;
  --color-text-black-base: #333333;
  --color-text-dark-gray-base: #656565;
  --color-text-gray-base: #9A9A9A;
  --color-text-light-gray-base: #dedede;
  --color-text-yellow-base: #ECC35D;
  --color-text-purple-base: #AA0CA0;
  --color-text-red-base: #F20505;
  --color-text-green-base: #1A6344;
  --color-text-orange-base: #E97735;
  --color-text-blue-base: #5364CE;
  --bg-gold: var(--color-gold-base);
  --bg-white: var(--color-white-base);
  --bg-red: var(--color-red-base);
  --bg-green: var(--color-green-base);
  --bg-orange: var(--color-orange-base);
  --bg-black: var(--color-black-base);
  --bg-blue: var(--color-blue-base);
  --bg-purple: var(--color-purple-base);
  --bg-gray: var(--color-gray-base);
  --bg-beige: var(--color-beige-base);
  --text-black: var(--color-text-black-base);
  --text-dark-gray: var(--color-text-dark-gray-base);
  --text-gray: var(--color-text-gray-base);
  --text-light-gray: var(--color-text-light-gray-base);
  --text-yellow: var(--color-text-yellow-base);
  --text-purple: var(--color-text-purple-base);
  --text-red: var(--color-text-red-base);
  --text-green: var(--color-text-green-base);
  --text-orange: var(--color-text-orange-base);
  --text-blue: var(--color-text-blue-base);
  --text-primary: var(--text-black);
  --text-secondary: var(--text-dark-gray);
  --text-light: var(--text-light-gray);
  --bg-primary: var(--bg-white);
  --bg-dark: var(--bg-black);
  --bg-light: var(--bg-gray);
  --border-color: var(--text-light-gray);
  --color-gold: var(--bg-gold);
  --color-white: var(--bg-white);
  --color-black: var(--bg-black);
  --color-card-border: #E8E6E0;
  --color-badge-standard-light: #f0b01a;
  --color-badge-standard-dark: #d89410;
  --color-badge-limited-light: #e85a70;
  --color-badge-limited-dark: #d63d55;
  --color-badge-regular-light: #4db6ac;
  --color-badge-regular-dark: #3d9a92;
  --color-category-bg: #dfc37d;
  --color-tag-text: #F06159;
  --font-family-base: "Jost", 'Noto Sans JP', Arial, sans-serif;
  --font-family-english: "Jost", sans-serif;
  --font-family-japanese: 'Noto Sans JP', sans-serif;
  --font-size-base: clamp(0.875rem, 0.8125rem + 0.3333vw, 1rem);
  --font-size-xs: 0.75em;
  --font-size-sm: 0.875em;
  --font-size-base-em: 1em;
  --font-size-md: 1.125em;
  --font-size-lg: 1.25em;
  --font-size-xl: 1.5em;
  --font-size-2xl: 2em;
  --font-size-3xl: 2.5em;
  --font-size-4xl: 3em;
  --font-size-5xl: 3.5em;
  --font-size-fixed-xs: 0.75rem;
  --font-size-fixed-sm: 0.875rem;
  --font-size-fixed-base: 1rem;
  --font-size-fixed-md: 1.125rem;
  --font-size-fixed-lg: 1.25rem;
  --font-size-fixed-xl: 1.5rem;
  --font-size-fixed-2xl: 2rem;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-5xl: 12rem;
  --space-em-3xs: 0.25em;
  --space-em-2xs: 0.5em;
  --space-em-xs: 0.75em;
  --space-em-sm: 1em;
  --space-em-md: 1.5em;
  --space-em-lg: 2em;
  --space-em-xl: 3em;
  --space-em-2xl: 4em;
  --space-cqi-xs: 1cqi;
  --space-cqi-sm: 2cqi;
  --space-cqi-md: 3cqi;
  --space-cqi-lg: 5cqi;
  --space-cqi-xl: 8cqi;
  --spacing-xs: var(--space-em-xs);
  --spacing-sm: var(--space-em-sm);
  --spacing-md: var(--space-em-md);
  --spacing-lg: var(--space-em-lg);
  --spacing-xl: var(--space-em-xl);
  --spacing-2xl: var(--space-em-2xl);
  --spacing-3xl: 6em;
  --container-sm: 36rem;
  --container-md: 48rem;
  --container-lg: 62rem;
  --container-xl: 75rem;
  --container-xxl: 87.5rem;
  --border-width-thin: 1px;
  --border-width-base: 2px;
  --border-width-thick: 4px;
  --border-width: var(--border-width-thin);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-2xl: 0 30px 60px -15px rgb(0 0 0 / 0.3);
  --shadow-gold: 0 10px 20px -5px rgb(183 149 25 / 0.3);
  --shadow-red: 0 10px 20px -5px rgb(234 78 89 / 0.3);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-base: all var(--duration-base) var(--ease-in-out);
  --transition-slow: all var(--duration-slow) var(--ease-in-out);
  --transition-discrete:
    opacity var(--duration-base) var(--ease-in-out),
    scale var(--duration-base) var(--ease-in-out),
    overlay var(--duration-base) var(--ease-in-out) allow-discrete,
    display var(--duration-base) var(--ease-in-out) allow-discrete;
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 1080;
  --container-max-width: 75rem;
  --container-wide: 87.5rem;
  --container-narrow: 56.25rem;
  --container-tight: 43.75rem;
  --content-max-width: 65ch;
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-portrait: 3 / 4;
  --aspect-landscape: 4 / 3;
  --aspect-ultrawide: 21 / 9;
  --wave-height: clamp(3rem, 10vw, 11.5rem);
  --wave-fill: #EEEAE0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: high) {
  :root {
    --border-width: var(--border-width-thick);
  }
}
/****** 商品一覧 product-list ******/
.product-list {
  padding-block-end: var(--space-lg);
  /* ===========================
    絞り込みセクション
    =========================== */
}
@media (max-width: 991px) {
  .product-list .narrow-down .narrow-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.25em;
  }
  .product-list .narrow-down .narrow-grid .narrow-item {
    display: contents;
  }
  .product-list .narrow-down .narrow-grid .filter-header {
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125em;
    padding: 0.625em 0.25em;
    cursor: pointer;
    border-radius: 0.5em;
    position: relative;
    transition: background-color var(--filter-transition-duration);
  }
  .product-list .narrow-down .narrow-grid .filter-header.is-active {
    background-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));
  }
  .product-list .narrow-down .narrow-grid .filter-icon {
    inline-size: 36px;
    block-size: auto;
    flex-shrink: 0;
  }
  .product-list .narrow-down .narrow-grid .filter-label {
    margin: 0;
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
  }
  .product-list .narrow-down .narrow-grid .filter-label br {
    display: none;
  }
  .product-list .narrow-down .narrow-grid .filter-label::after {
    content: none;
  }
  .product-list .narrow-down .narrow-grid .filter-badge {
    position: absolute;
    inset-block-start: 0.25em;
    inset-inline-end: 0.25em;
    min-inline-size: 1.25em;
    block-size: 1.25em;
    display: grid;
    align-content: center;
    justify-content: center;
    background: var(--color-orange-base);
    color: var(--bg-white);
    font-size: 0.625rem;
    font-weight: var(--font-weight-bold);
    border-radius: 50%;
    line-height: 1;
  }
  .product-list .narrow-down .narrow-grid .filter-badge[hidden] {
    display: none;
  }
  .product-list .narrow-down .narrow-grid .filter-body {
    grid-column: 1/-1;
    grid-row: 2;
    display: none;
  }
  .product-list .narrow-down .narrow-grid .filter-body.is-open {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--filter-transition-duration), transform var(--filter-transition-duration);
    transition-behavior: allow-discrete;
  }
  @starting-style {
    .product-list .narrow-down .narrow-grid .filter-body.is-open {
      opacity: 0;
      transform: translateY(-0.5em);
    }
  }
  .product-list .narrow-down .narrow-grid .filter-body__inner {
    padding: 1em 0.5em;
    border-block-start: var(--border-width-thin) solid light-dark(#E8E6E0, #444);
  }
}
@media (min-width: 992px) {
  .product-list .narrow-down .narrow-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  .product-list .narrow-down .narrow-grid .narrow-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .product-list .narrow-down .narrow-grid .filter-header {
    flex-shrink: 0;
    inline-size: 4.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
  }
  .product-list .narrow-down .narrow-grid .filter-icon {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }
  .product-list .narrow-down .narrow-grid .filter-label {
    position: absolute;
    inset-block-start: 45%;
    inset-inline-start: 53%;
    transform: translate(-50%, -50%);
    inline-size: 100%;
    color: var(--bg-white);
    z-index: 10;
    pointer-events: none;
    margin: 0;
    font-size: 0.5rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-wrap: balance;
  }
  .product-list .narrow-down .narrow-grid .filter-label::after {
    content: "";
    display: block;
    background-image: url(/assets/images/product/tag2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 40%;
    block-size: 15px;
    margin-block-start: var(--space-3xs);
  }
}
@media (min-width: 992px) and (min-width: 1200px) {
  .product-list .narrow-down .narrow-grid .filter-label {
    font-size: 0.75rem;
  }
}
@media (min-width: 992px) {
  .product-list .narrow-down .narrow-grid .narrow-item:last-of-type .filter-label::after {
    background-image: url(/assets/images/product/sharp2.png);
  }
  .product-list .narrow-down .narrow-grid .narrow-item--keyword {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-block-start: var(--space-sm);
    border-block-start: var(--border-width-thin) solid light-dark(#E8E6E0, #444);
  }
  .product-list .narrow-down .narrow-grid .narrow-item--keyword .filter-body {
    flex: 1;
    min-inline-size: 0;
  }
  .product-list .narrow-down .narrow-grid .filter-body {
    flex: 1;
    min-inline-size: 0;
  }
  .product-list .narrow-down .narrow-grid .filter-badge {
    display: none;
  }
}
.product-list .narrow-down .keyword-search__input {
  inline-size: 100%;
  padding: 0.5em 0.75em;
  border: var(--border-width-base) solid light-dark(#ccc, #555);
  border-radius: var(--filter-radius);
  font-size: var(--font-size-fixed-base);
  line-height: var(--line-height-base, 1.5);
  transition: border-color var(--filter-transition-duration);
}
.product-list .narrow-down .keyword-search__input:focus {
  outline: none;
  border-color: var(--color-orange-base);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}
.product-list .narrow-down .keyword-search__input::placeholder {
  color: light-dark(var(--text-gray), #777);
  font-size: 0.875em;
}
.product-list .narrow-down .filter-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: center;
  margin-block-start: var(--space-sm);
  flex-wrap: wrap;
}
.product-list .narrow-down .filter-actions__submit {
  padding: 0.625em 2em;
  background: var(--color-orange-base);
  color: var(--bg-white);
  border: none;
  border-radius: var(--filter-radius);
  font-size: var(--font-size-fixed-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--filter-transition-duration), transform var(--filter-transition-duration);
}
.product-list .narrow-down .filter-actions__submit:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}
.product-list .narrow-down .filter-actions__submit:active {
  transform: translateY(0);
}
.product-list .narrow-down .filter-actions__clear {
  padding: 0.625em 1.5em;
  background: none;
  color: light-dark(var(--text-dark-gray), var(--text-gray));
  border: var(--border-width-base) solid light-dark(#ccc, #555);
  border-radius: var(--filter-radius);
  font-size: var(--font-size-fixed-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--filter-transition-duration), border-color var(--filter-transition-duration);
}
.product-list .narrow-down .filter-actions__clear:hover {
  color: light-dark(var(--text-black), #e0e0e0);
  border-color: light-dark(var(--text-black), #e0e0e0);
}
.product-list .narrow-down .filter-actions__count {
  font-size: var(--font-size-fixed-sm);
  color: var(--color-orange-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.product-list .narrow-down .filter-actions__count[hidden] {
  display: none;
}
@media (max-width: 767px) {
  .product-list .narrow-down .filter-actions__count {
    width: 100%;
    display: block;
    text-align: center;
  }
}
.product-list .narrow-down .filter-readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.25em 0.75em;
  font-size: var(--font-size-fixed-xs);
  color: light-dark(var(--text-dark-gray), var(--text-gray));
  background: none;
  border: var(--border-width-thin) solid light-dark(#E8E6E0, #444);
  border-radius: 1em;
  cursor: pointer;
  transition: color var(--filter-transition-duration), border-color var(--filter-transition-duration);
}
.product-list .narrow-down .filter-readmore::after {
  content: "+";
  font-weight: var(--font-weight-bold);
}
.product-list .narrow-down .filter-readmore.is-expanded::after {
  content: "−";
}
.product-list .narrow-down .filter-readmore:hover {
  color: var(--color-orange-base);
  border-color: var(--color-orange-base);
}
.product-list {
  /* ===========================
    アクティブフィルター表示エリア
    =========================== */
}
.product-list .active-filters {
  margin-block-end: calc(var(--filter-spacing) * 1.5);
  text-align: center;
}
.product-list .filter-clear-all {
  padding-inline: 2em;
  padding-block: 0.75em;
  border: var(--border-width-base) solid var(--color-orange-base);
  border-radius: var(--filter-radius);
  background: transparent;
  color: var(--color-orange-base);
  font-size: var(--font-size-fixed-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--filter-transition-duration), color var(--filter-transition-duration), transform var(--filter-transition-duration);
  transition-behavior: allow-discrete;
}
@starting-style {
  .product-list .filter-clear-all {
    opacity: 0;
    transform: translateY(-10px);
  }
}
.product-list .filter-clear-all {
  opacity: 1;
  transform: translateY(0);
}
.product-list .filter-clear-all:hover {
  background: var(--color-orange-base);
  color: var(--bg-white);
  transform: translateY(-2px);
}
.product-list .filter-clear-all:active {
  transform: translateY(0);
}
.product-list {
  /* ===========================
     商品グリッド（モダンCSS + レスポンシブ）
     =========================== */
}
.product-list .list-display {
  background-color: var(--bg-beige);
}
.product-list .list-display .list-grid {
  display: grid;
  gap: 1em;
  padding-block-end: var(--space-xl);
  grid-template-columns: repeat(5, 1fr); /* デフォルト: 5カラム（PC） */
  /* 992px以下: 3カラム */
}
@media (max-width: 991px) {
  .product-list .list-display .list-grid {
    grid-template-columns: repeat(3, 1fr);
    padding-block-end: var(--space-lg);
  }
}
.product-list .list-display .list-grid {
  /* 768px以下: 2カラム */
}
@media (max-width: 767px) {
  .product-list .list-display .list-grid {
    grid-template-columns: repeat(2, 1fr);
    padding-inline: var(--space-sm);
  }
}
.product-list .list-display .list-grid {
  /* 576px以下: 1カラム（オプション） */
}
@media (max-width: 575px) {
  .product-list .list-display .list-grid {
    grid-template-columns: 1fr;
  }
}
.product-list {
  /* ===========================
     商品カード（最新版：バッジシステム統合）
     =========================== */
}
.product-list .list-card {
  position: relative;
  container-type: inline-size; /* コンテナクエリ対応 */
  background-color: var(--bg-white);
  border: var(--border-width-thin) solid #E8E6E0;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: box-shadow var(--duration-base) var(--ease-in-out), transform var(--duration-base) var(--ease-in-out);
}
@starting-style {
  .product-list .list-card {
    opacity: 0;
    transform: translateY(1em);
  }
}
.product-list .list-card:hover {
  box-shadow: 0 0.25em 0.9375em light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
  transform: translateY(-0.25em);
}
.product-list .list-card:hover .product-image img {
  transform: translate(-50%, -50%) scale(1.05);
}
.product-list .list-card {
  /* レスポンシブ調整 */
}
@media (max-width: 991px) {
  .product-list .list-card .card-content {
    padding: 0.75em;
  }
  .product-list .list-card .card-content h3.title,
  .product-list .list-card .card-content .title {
    font-size: var(--font-size-fixed-sm);
  }
}
@media (max-width: 767px) {
  .product-list .list-card .card-content {
    padding: 1em;
  }
  .product-list .list-card .card-content h3.title,
  .product-list .list-card .card-content .title {
    font-size: 0.9rem;
  }
}
@media (max-width: 575px) {
  .product-list .list-card .product-image {
    padding-block-start: 75%; /* 4:3に変更 */
  }
  .product-list .list-card .card-content {
    padding: 1.25em;
  }
  .product-list .list-card .card-content h3.title,
  .product-list .list-card .card-content .title {
    font-size: var(--font-size-fixed-base);
    min-block-size: auto;
  }
}
.product-list {
  /* ===========================
     商品画像（figure要素 + バッジシステム）
     =========================== */
}
.product-list .product-image {
  position: relative;
  inline-size: 100%;
  padding-block-start: 100%; /* 正方形(1:1)を維持 */
  margin: 0;
  background-color: light-dark(#fafafa, #1a1a1a);
}
.product-list .product-image img {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  max-inline-size: 90%;
  max-block-size: 90%;
  object-fit: contain;
  transition: transform var(--duration-base) var(--ease-in-out);
}
.product-list .product-image[data-saletype]::before {
  content: "";
  position: absolute;
  inset-block-start: -0.75em;
  inset-inline-start: -0.75em;
  inline-size: 4em;
  block-size: 4em;
  z-index: 1;
  mask-image: url("data:image/svg+xml,%3Csvg width='82' height='82' viewBox='0 0 82 82' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.7166 1.07169L48.6782 5.70687C49.5678 6.53748 50.8119 6.87095 51.9971 6.59643L58.612 5.0628C60.6507 4.59031 62.707 5.77726 63.3167 7.77898L65.2964 14.2742C65.651 15.4383 66.5617 16.349 67.7258 16.7036L74.221 18.6833C76.2227 19.293 77.4106 21.3493 76.9372 23.388L75.4036 30.0029C75.1291 31.1881 75.4625 32.4331 76.2931 33.3218L80.9283 38.2834C82.3572 39.8126 82.3572 42.1874 80.9283 43.7166L76.2931 48.6782C75.4625 49.5678 75.1291 50.8119 75.4036 51.9971L76.9372 58.612C77.4097 60.6507 76.2227 62.707 74.221 63.3167L67.7258 65.2964C66.5617 65.651 65.651 66.5617 65.2964 67.7258L63.167 74.221C62.707 76.2227 60.6507 77.4106 58.612 76.9372L51.9971 75.4036C50.8119 75.1291 49.5669 75.4625 48.6782 76.2931L43.7166 80.9283C42.1874 82.3572 39.8126 82.3572 38.2834 80.9283L33.3218 76.2931C32.4322 75.4625 31.1881 75.1291 30.0029 75.4036L23.388 76.9372C21.3493 77.4097 19.293 76.2227 18.6833 74.221L16.7036 67.7258C16.349 66.5617 15.4383 65.651 14.2742 65.2964L7.77898 63.3167C5.77726 62.707 4.58943 60.6507 5.0628 58.612L6.59643 51.9971C6.87095 50.8119 6.53748 49.5669 5.70687 48.6782L1.07169 43.7166C-0.357229 42.1874-0.357229 39.8126 1.07169 38.2834L5.70687 33.3218C6.53748 32.4322 6.87095 31.1881 6.59643 30.0029L5.0628 23.388C4.59031 21.3493 5.77726 19.293 7.77898 18.6833L14.2742 16.7036C15.4383 16.349 16.349 15.4383 16.7036 14.2742L18.6833 7.77898C19.293 5.77726 21.3493 4.58943 23.388 5.0628L30.0029 6.59643C31.1881 6.87095 32.4331 6.53748 33.3218 5.70687L38.2834 1.07169C39.8126-0.357229 42.1874-0.357229 43.7166 1.07169Z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='82' height='82' viewBox='0 0 82 82' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.7166 1.07169L48.6782 5.70687C49.5678 6.53748 50.8119 6.87095 51.9971 6.59643L58.612 5.0628C60.6507 4.59031 62.707 5.77726 63.3167 7.77898L65.2964 14.2742C65.651 15.4383 66.5617 16.349 67.7258 16.7036L74.221 18.6833C76.2227 19.293 77.4106 21.3493 76.9372 23.388L75.4036 30.0029C75.1291 31.1881 75.4625 32.4331 76.2931 33.3218L80.9283 38.2834C82.3572 39.8126 82.3572 42.1874 80.9283 43.7166L76.2931 48.6782C75.4625 49.5678 75.1291 50.8119 75.4036 51.9971L76.9372 58.612C77.4097 60.6507 76.2227 62.707 74.221 63.3167L67.7258 65.2964C66.5617 65.651 65.651 66.5617 65.2964 67.7258L63.3167 74.221C62.707 76.2227 60.6507 77.4106 58.612 76.9372L51.9971 75.4036C50.8119 75.1291 49.5669 75.4625 48.6782 76.2931L43.7166 80.9283C42.1874 82.3572 39.8126 82.3572 38.2834 80.9283L33.3218 76.2931C32.4322 75.4625 31.1881 75.1291 30.0029 75.4036L23.388 76.9372C21.3493 77.4097 19.293 76.2227 18.6833 74.221L16.7036 67.7258C16.349 66.5617 15.4383 65.651 14.2742 65.2964L7.77898 63.3167C5.77726 62.707 4.58943 60.6507 5.0628 58.612L6.59643 51.9971C6.87095 50.8119 6.53748 49.5669 5.70687 48.6782L1.07169 43.7166C-0.357229 42.1874-0.357229 39.8126 1.07169 38.2834L5.70687 33.3218C6.53748 32.4322 6.87095 31.1881 6.59643 30.0029L5.0628 23.388C4.59031 21.3493 5.77726 19.293 7.77898 18.6833L14.2742 16.7036C15.4383 16.349 16.349 15.4383 16.7036 14.2742L18.6833 7.77898C19.293 5.77726 21.3493 4.58943 23.388 5.0628L30.0029 6.59643C31.1881 6.87095 32.4331 6.53748 33.3218 5.70687L38.2834 1.07169C39.8126-0.357229 42.1874-0.357229 43.7166 1.07169Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.product-list .product-image[data-saletype=standard]::before {
  background-color: light-dark(#f0b01a, #d89410);
}
.product-list .product-image[data-saletype=limited]::before {
  background-color: light-dark(#e85a70, #d63d55);
}
.product-list .product-image[data-saletype=regular]::before {
  background-color: light-dark(#4db6ac, #3d9a92);
}
.product-list .product-image[data-saletype]::after {
  position: absolute;
  inset-block-start: 0.25em;
  inset-inline-start: 0.25em;
  inline-size: 3.5em;
  block-size: 3.5em;
  display: grid;
  align-content: center;
  justify-content: center;
  color: var(--bg-white);
  font-size: 0.65em;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-align: center;
  z-index: 2;
  text-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.3);
  white-space: pre-line;
}
.product-list .product-image[data-saletype=standard]::after {
  content: "Standard\a定番";
}
.product-list .product-image[data-saletype=limited]::after {
  content: "Limited\a限定";
}
.product-list .product-image[data-saletype=regular]::after {
  content: "Seasonal\a定期";
}
.product-list {
  /* ===========================
     商品リンク（全体リンクオーバーレイ）
     =========================== */
}
.product-list .product-link {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-color: transparent;
  transition: background-color var(--duration-base) ease;
}
.product-list .product-link:hover {
  background-color: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
}
.product-list .product-link:focus-visible {
  outline: var(--border-width-base) solid light-dark(#f0b01a, #d89410);
  outline-offset: -0.25em;
}
.product-list {
  /* ===========================
     カードコンテンツ
     =========================== */
}
.product-list .card-content {
  padding: 0.9375em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  flex: 1;
  justify-content: space-between;
  /* 商品名（h3） */
}
.product-list .card-content h3.title,
.product-list .card-content .title {
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  min-block-size: 2.8em; /* 2行分の高さを確保 */
  margin: 0;
  text-wrap: balance;
  color: light-dark(var(--text-black), #e0e0e0);
  /* 度数・容量 */
}
.product-list .card-content h3.title + div,
.product-list .card-content .title + div {
  font-size: 0.75em;
  color: light-dark(var(--text-dark-gray), var(--text-gray));
  margin-block-end: 0.75em;
}
.product-list .card-content {
  /* カテゴリー（p） */
}
.product-list .card-content > p {
  display: inline-block;
  background-color: #dfc37d;
  color: light-dark(var(--bg-white), var(--bg-black));
  font-size: 0.6875em;
  padding-block: 0.1875em;
  padding-inline: 0.9375em;
  border-radius: 0.1875em;
  margin-block-end: 0.625em;
  max-inline-size: none;
  text-wrap: balance;
}
.product-list .card-content {
  /* タグ（div > p） */
}
.product-list .card-content .product-tags {
  font-size: 0.6875em;
  color: #F06159;
  margin: 0;
  max-inline-size: none;
  display: flex;
  gap: var(--space-3xs);
}
.product-list {
  /* ===========================
     コンテナクエリでさらに細かく調整
     =========================== */
}
@container (inline-size < 180px) {
  .product-list .card-content h3.title,
  .product-list .card-content .title {
    font-size: var(--font-size-fixed-xs);
    min-block-size: auto;
  }
  .product-list .card-content h3 + div,
  .product-list .card-content .title + div {
    font-size: 0.65em;
  }
}

#new-products .item {
  position: relative;
}
#new-products .item .inner {
  background-color: var(--bg-beige);
}
#new-products .item .inner .img-row {
  background-color: #EEEEEE;
}

.btn-clear {
  border: solid 1px var(--color-black-base);
  padding: 0.5rem 0.75rem;
}

@starting-style {
  #new-product,
  #product-filter-list {
    opacity: 0;
  }
}
#new-product,
#product-filter-list {
  transition: opacity 0.2s ease;
  opacity: 1;
}