@charset "UTF-8";
/* =========================================================
   ラケットケース特設サイト 専用スタイル
   - ブランドカラー、共通レイアウト
   - メインビジュアル
   - ケースタイプ
   - 製品絞り込み／製品カード
   ※共通ヘッダー・フッターは既存サイト側のCSSを使用します。
   ※特設サイト側の指定は #case-special 配下に限定し、共通領域へ干渉させません。
   ========================================================= */

#case-special {
  --magenta: #ff4291;
  --gray: #999999;
  --gray2: #dddddd;
  --black: #080808;
  --dark: #2c3236;
  --light: #ffffff;
  --light-gray: #eff0f1;
  --border: #d7d7d7;
  --text: #111111;
  --muted: #666666;
  --container: 1180px;
  --header-height: 76px;
}

/* ---------- 基本設定 ---------- */
#case-special,
#case-special * {
  box-sizing: border-box;
}

#case-special {
  margin: 0;
  color: var(--text);
  background: var(--light);
  font-family: YakuHanJP, "Noto Sans JP", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.7;
}

#case-special img {
  display: block;
  max-width: 100%;
}

#case-special a {
  color: inherit;
  text-decoration: none;
}

#case-special button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

#case-special .container {
  width: min(calc(100% - 40px), var(--container));
  margin-inline: auto;
}

#case-special .section {
  padding: 108px 0;
}

#case-special .section-light {
  background: #fff;
}

#case-special .section-dark {
  color: #fff;
  background: var(--dark);
}

#case-special .section-gray {
  background: var(--gray2);
}

#case-special .eyebrow {
  margin: 0 0 16px;
  color: var(--magenta);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

#case-special .section-heading {
  max-width: 720px;
  margin-bottom: 50px;
}

#case-special .section-heading h2 {
  margin: 0 0 16px;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.18;
  letter-spacing: -0.035em;
}

#case-special .section-heading p:last-child {
  margin: 0;
  color: var(--muted);
}

/* 製品一覧見出しは下の絞り込みボックス幅を基準に折り返す */
#case-special .product-lineup-heading {
  width: 100%;
  max-width: none;
}

#case-special .product-lineup-title {
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  scroll-margin-top: calc(var(--header-height) - 110px);
}

#case-special .product-lineup-title__second {
  display: inline;
}

#case-special .product-lineup-title.is-wrapped .product-lineup-title__second {
  display: block;
}

/* 空結果時の共通ボタン */
#case-special .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

#case-special .button--dark {
  color: #fff;
  background: var(--dark);
}

#case-special .button--dark:hover,
#case-special .button--dark:focus-visible {
  background: #111;
}

/* =========================================================
   メインビジュアル
   - 固定の横長画像を2枚連結してCSSのみで無限ループ
   - JavaScriptの画像抽選・プリロード処理には依存しない
   - 背景は #f5f5f5 固定
   ========================================================= */
#case-special .page-intro {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 620px;
  padding-top: 0;
  overflow: hidden;
  isolation: isolate;
  background: #f5f5f5;
}

#case-special .page-intro__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #f5f5f5;
  pointer-events: none;
  user-select: none;
}

#case-special .hero-product-marquee {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f5f5f5;
}

/*
  メインビジュアルはJavaScriptを使わず、同じ横長画像を2枚連結してCSSのみでループする。
  現在は1周40秒で設定。表示速度は .hero-product-marquee__track の animation で管理する。
*/
#case-special .hero-product-marquee__track {
  display: inline-flex;
  height: 100%;
  vertical-align: top;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: heroProductScroll 40s linear infinite;
}

#case-special .hero-product-marquee__image {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 文字視認性を確保する黒の半透明レイヤー */
#case-special .page-intro__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: none;
}

#case-special .page-intro__content {
  position: relative;
  z-index: 2;
  align-self: center;
}

#case-special .page-intro h1 {
  margin: 0;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

#case-special .page-intro__content > p:last-child {
  max-width: 580px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

@keyframes heroProductScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   ケースタイプ
   - PCは4カラム、スマートフォンは2カラム
   - カードを押すと対応する特性を選択して製品一覧へ移動
   ========================================================= */
#case-special .type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

#case-special .type-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#case-special .type-card:hover {
  border-color: #bdbdbd;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

#case-special .type-card:focus-visible {
  outline: 3px solid rgba(255, 66, 145, 0.35);
  outline-offset: 3px;
}

#case-special .type-card__image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f5f5f5;
}

#case-special .type-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#case-special .type-card__body {
  padding: 20px 14px 18px;
}

#case-special .type-card h3 {
  width: 100%;
  margin: 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

#case-special .type-card__capacity {
  margin: 0;
  color: var(--magenta);
  font-weight: 700;
}

#case-special .type-card__description {
  margin: 16px 0 0;
  color: var(--muted);
}

/* =========================================================
   製品絞り込みパネル
   - 特性はAND条件
   - カラーはOR条件
   - 追加すると0件になる条件はJSでdisabledにする
   ========================================================= */
#case-special .product-controls {
  display: block;
  padding: 0;
  margin-bottom: 18px;
  background: #fff;

  border-radius: 5px;
  scroll-margin-top: calc(var(--header-height) + 12px);
}

#case-special .filter-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}

#case-special .control-title {
  margin: 0;
  font-weight: 800;
}

#case-special .control-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

#case-special .filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 6px 10px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
}

#case-special .filter-toggle__icon {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;

  transform: rotate(-135deg) translate(-1px, -1px);
  transition: transform 0.25s ease;
}

#case-special .product-controls.is-collapsed .filter-toggle__icon {
  transform: rotate(45deg) translateY(-2px);
}

#case-special .filter-panel__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.28s ease;
}

#case-special .filter-panel__body-inner {
  min-height: 0;
  overflow: hidden;
}

#case-special .product-controls.is-collapsed .filter-panel__body {
  grid-template-rows: 0fr;
}

#case-special .product-controls.is-collapsed .filter-panel__header {
  border-bottom-color: transparent;
}

#case-special .filter-area {
  padding: 22px 24px 26px;
  scroll-margin-top: calc(var(--header-height) + 10px);
}

#case-special .clear-filter {
  padding: 4px 0;
  color: var(--dark);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

#case-special .clear-filter:disabled {
  opacity: 0.38;
  cursor: default;
}

#case-special .filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#case-special .filter-button {
  min-height: 44px;
  padding: 8px 16px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
}

#case-special .filter-button:hover:not(:disabled),
#case-special .filter-button:focus-visible:not(:disabled) {
  border-color: var(--dark);
}

#case-special .filter-button.is-active {
  color: #fff;
  background: var(--magenta);
  border-color: var(--magenta);
}

#case-special .filter-button:disabled,
#case-special .filter-button.is-unavailable {
  color: #aaa;
  background: #eee;
  border-color: #ddd;
  cursor: not-allowed;
  opacity: 0.62;
  filter: grayscale(1);
}

/* ---------- イメージカラー選択 ---------- */
#case-special .color-filter-area {
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

#case-special .color-filter-buttons {
  display: grid;
  grid-template-columns: repeat(9, minmax(72px, 1fr));
  gap: 14px 10px;
}

#case-special .color-filter-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 2px;
  color: var(--text);
  background: transparent;
  border: 0;
  cursor: pointer;
}

#case-special .color-filter-button__circle {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 3px transparent;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

#case-special .color-filter-button__label {
  display: block;
  min-height: 2.8em;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

#case-special .color-filter-button:hover:not(:disabled) .color-filter-button__circle,
#case-special .color-filter-button:focus-visible .color-filter-button__circle {
  transform: scale(1.06);
}

#case-special .color-filter-button:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 4px;
}

#case-special .color-filter-button.is-active .color-filter-button__circle {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px var(--magenta);
  transform: scale(1.05);
}

/* 選択中カラーは円の中央にチェックマークを表示 */
#case-special .color-filter-button.is-active .color-filter-button__circle::after {
  content: "✓";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: rgba(0, 0, 0, 0.62);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

/* 0件になるカラーは半透明＋斜線で操作不可を示す */
#case-special .color-filter-button.is-unavailable,
#case-special .color-filter-button:disabled {
  color: #aaa;
  cursor: not-allowed;
  opacity: 0.5;
}

#case-special .color-filter-button.is-unavailable .color-filter-button__circle::before,
#case-special .color-filter-button:disabled .color-filter-button__circle::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 6px,
    rgba(100, 100, 100, 0.72) 6px 9px
  );
}

/* カラー絞り込み用の9カテゴリ */
#case-special .color-swatch--black {
  background: #111;
}
#case-special .color-swatch--white {
  background: #fff;
  border-color: #bdbdbd;
}
#case-special .color-swatch--gray-silver {
  background: linear-gradient(135deg, #6f7378, #f0f1f2 48%, #969ca2);
}
#case-special .color-swatch--red-pink-magenta {
  background: linear-gradient(135deg, #e31535, #ff4291 58%, #8a1d5d);
}
#case-special .color-swatch--blue-navy {
  background: linear-gradient(135deg, #1769d2, #0b255f);
}
#case-special .color-swatch--green-turquoise {
  background: linear-gradient(135deg, #58d9a0, #0d9da6);
}
#case-special .color-swatch--yellow-orange {
  background: linear-gradient(135deg, #ffd43b, #ff7a00);
}
#case-special .color-swatch--purple {
  background: linear-gradient(135deg, #a967e8, #552178);
}
#case-special .color-swatch--gold {
  background: linear-gradient(
    135deg,
    #8f6918 0%,
    #d7b34b 30%,
    #fff0a1 50%,
    #b88622 75%,
    #e3c45c 100%
  );
}

/* =========================================================
   表示モード・結果表示
   ========================================================= */
#case-special .product-view-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 14px;
}

/* 1色表示／全色表示は10px離して独立表示 */
#case-special .display-mode-buttons {
  display: inline-flex;
  gap: 10px;
  border: 0;
  background: transparent;
}

#case-special .display-mode-button {
  min-height: 40px;
  padding: 7px 16px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#case-special .display-mode-button.is-active {
  color: #fff;
  background: var(--magenta);
  border-color: var(--magenta);
}

#case-special .display-mode-button:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

#case-special .product-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}

#case-special .product-status p {
  margin: 0;
}

#case-special .product-status strong {
  color: var(--text);
  font-size: 18px;
}

#case-special .product-status__filters {
  width: 100%;
  line-height: 1.55;
  text-align: left;
}

/* =========================================================
   製品一覧／製品カード
   - PCは4カラム、スマートフォンは2カラム
   - カード本体と製品画像は完全に静的
   - 「製品詳細を見る」リンクのみホバー変化を残す
   ========================================================= */
#case-special .product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  opacity: 1;
  transition: opacity 180ms ease;
}

/* 絞り込み・表示モード変更時のフェードアウト */
#case-special .product-grid.is-fading-out {
  opacity: 0;
}

#case-special .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 5px;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* 外部CSSに hover / active 指定があってもカードを変化させない */
#case-special .product-card:hover,
#case-special .product-card:active,
#case-special .product-card:focus,
#case-special .product-card:focus-within {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--border) !important;
  background: #fff !important;
}

#case-special .product-card__image {
  aspect-ratio: 1 / 1;
}

/* 製品画像領域はクリック・タップ・ホバーの対象外 */
#case-special .product-card__media {
  position: relative;
  overflow: hidden;
  background: #f5f5f5 !important;
  pointer-events: none !important;
  cursor: default !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}

#case-special .product-card__media:hover,
#case-special .product-card__media:active,
#case-special .product-card:hover .product-card__media,
#case-special .product-card:active .product-card__media,
#case-special .product-card:focus-within .product-card__media {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  background: #f5f5f5 !important;
}

#case-special .product-card__media img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* 外部CSSの「カードhover時に画像拡大」も明示的に無効化 */
#case-special .product-card:hover .product-card__media img,
#case-special .product-card:active .product-card__media img,
#case-special .product-card:focus-within .product-card__media img,
#case-special .product-card__media:hover img,
#case-special .product-card__media:active img {
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
}

/* 画像が存在しない場合は背景色のみ表示 */
#case-special .product-card__media.has-image-error img {
  display: none;
}

#case-special .product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 14px 14px;
}

#case-special .product-card h3 {
  width: 100%;
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* 1色表示時：添付のクローズアップ画像を色玉として使用 */
#case-special .product-card__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: clamp(30px, 3.2vw, 50px);
  margin: 0 0 12px;
}

#case-special .product-color-thumb {
  display: block;
  width: clamp(30px, 3.2vw, 40px);
  height: clamp(30px, 3.2vw, 40px);
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 50%;
  background: #f5f5f5;
  cursor: default;
  pointer-events: none;
}

#case-special .product-color-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* --------------------------------------------------
   製品カード内の色玉
   hover / tap時に拡大・移動・色変更させない
-------------------------------------------------- */
#case-special .product-color-thumb,
#case-special .product-color-thumb:hover,
#case-special .product-color-thumb:active,
#case-special .product-card:hover .product-color-thumb {
  transform: none !important;
  scale: 1 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

#case-special .product-color-thumb img,
#case-special .product-color-thumb:hover img,
#case-special .product-color-thumb:active img,
#case-special .product-card:hover .product-color-thumb img {
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  opacity: 1 !important;
}

#case-special .product-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 14px;
  list-style: none;
}

#case-special .product-card__features li {
  padding: 5px 8px;
  background: var(--light-gray);
  border-radius: 2px;
  font-size: 11px;
}

/* 製品詳細リンクだけは操作可能・ホバー変化あり */
#case-special .product-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  min-height: 25px;
  padding: 8px 12px;
  margin: auto auto 0;
  color: #fff;
  background: var(--magenta);
  border: 1px solid var(--magenta);
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s,
    border-color 0.2s;
}

#case-special .product-card__link:hover,
#case-special .product-card__link:focus-visible {
  color: var(--magenta);
  background: #fff;
  border-color: var(--magenta);
}

#case-special .product-card__link:focus-visible {
  outline: 2px solid #222;
  outline-offset: 2px;
}

#case-special .empty-state {
  padding: 70px 24px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
}

#case-special .empty-state p {
  margin: 0 0 20px;
  font-weight: 700;
}

/* =========================================================
   スクロール表示アニメーション
   ========================================================= */
#case-special .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

#case-special .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1100px) {
  #case-special .color-filter-buttons {
    grid-template-columns: repeat(5, minmax(72px, 1fr));
  }
}

@media (max-width: 900px) {
  #case-special .type-grid,
  #case-special .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #case-special {
    --header-height: 64px;
  }

  #case-special .container {
    width: min(calc(100% - 28px), var(--container));
  }

  #case-special .page-intro {
    min-height: 520px;
  }

  #case-special .page-intro__overlay {
    background: rgba(0, 0, 0, 0.62);
  }

  #case-special .page-intro h1 {
    font-size: 45px;
  }

  #case-special .page-intro__content > p:last-child {
    font-size: 14px;
  }

  #case-special .section {
    padding: 76px 0;
  }

  #case-special .section-heading {
    margin-bottom: 34px;
  }

  #case-special .section-heading h2 {
    font-size: 34px;
  }

  /* ケースタイプはスマートフォンも2列 */
  #case-special .type-grid {
    gap: 10px;
  }

  #case-special .type-card__body {
    padding: 12px 8px;
  }

  #case-special .type-card h3 {
    margin-bottom: 4px;
    font-size: 15px;
    line-height: 1.25;
  }

  #case-special .type-card__capacity {
    font-size: 12px;
    line-height: 1.5;
  }

  #case-special .type-card__description {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.65;
  }

  #case-special .filter-panel__header {
    min-height: 56px;
    padding: 11px 14px;
  }

  #case-special .filter-toggle {
    padding-right: 2px;
    font-size: 11px;
  }

  #case-special .filter-area {
    padding: 0px 14px 5px;
  }

  #case-special .control-title-row {
    align-items: flex-start;
  }

  #case-special .filter-buttons {
    gap: 7px;
  }

  #case-special .filter-button {
    min-height: 40px;
    padding: 7px 11px;
    font-size: 12px;
  }

  #case-special .color-filter-area {
    padding-top: 18px;
    margin-top: 18px;
  }

  #case-special .color-filter-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px 6px;
  }

  #case-special .color-filter-button {
    gap: 6px;
  }

  #case-special .color-filter-button__circle {
    width: 40px;
    height: 40px;
  }

  #case-special .color-filter-button__label {
    min-height: 2.8em;
    font-size: 9px;
  }

  #case-special .color-filter-button.is-active .color-filter-button__circle::after {
    width: 21px;
    height: 21px;
    font-size: 13px;
  }

  #case-special .display-mode-button {
    min-height: 38px;
    padding: 6px 9px;
    font-size: 10px;
  }

  #case-special .product-grid {
    gap: 10px;
  }

  #case-special .product-card__body {
    padding: 11px 8px 10px;
  }

  #case-special .product-card h3 {
    margin-bottom: 7px;
    font-size: 13px;
  }

  #case-special .product-card__colors {
    gap: 5px;
    min-height: 30px;
    margin-bottom: 9px;
  }

  #case-special .product-color-thumb {
    width: 25px;
    height: 25px;
  }

  #case-special .product-card__features {
    gap: 4px;
    margin-bottom: 10px;
  }

  #case-special .product-card__features li {
    padding: 3px 5px;
    font-size: 8px;
    line-height: 1.4;
  }

  #case-special .product-card__link {
    width: 82%;
    min-height: 30px;
    padding: 6px 5px;
    font-size: 13px;
  }
}

/* OS側でアニメーション軽減が指定されている場合 */
@media (prefers-reduced-motion: reduce) {
  #case-special .hero-product-marquee__track {
    animation: none;
    transform: translateX(-6%);
  }

  #case-special .product-grid {
    transition: none;
  }

  #case-special .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}