@charset "UTF-8";
/*
 * 商品検索（/search/）専用スタイル
 *
 * デザイナー向け編集ガイド
 * - 既存サイトとの衝突を避けるため、専用クラスは .sx-page 配下・sx- 接頭辞で管理する。
 * - 色・罫線・背景は、まず .sx-page 冒頭のデザイントークンを調整する。
 * - モバイルを基準に記述し、末尾で 768 / 1024 / 1440 / 1700px の順にレイアウトを拡張する。
 * - 本文だけ最大 1850px。共通ヘッダ・フッタの幅はこのファイルでは変更しない。
 * - 商品カードは「画像・商品説明・価格・性能」→「用途・仕様」→「構成」の順に並ぶ。
 * - sx-w0〜sx-w100、sx-badge--*、sx-use--*、sx-hero--* は表示データから動的に付くクラス。
 *
 * 主なセクション
 * 1. 共通トークン・ボタン・見出し
 * 2. ランディング／通常ページのヒーロー
 * 3. 絞り込み・検索結果ツール
 * 4. 商品カード・プロフィール・構成
 * 5. ページ送り・比較・FAQ・ガイド
 * 6. レスポンシブ調整
 *
 * @changelog
 *   2026-10-23  AI(Cursor)  初版作成
 *   2026-10-23  AI(Cursor)  通常の見出しを写真背景のパネル（.sx-top）に。PC の絞り込み欄の固定・内部スクロールをやめた
 *   2026-10-24  AI(Cursor)  明るい検査スタジオのヒーローと、肯定的な商品プロフィール・仕様タイルへ全面改修
 *   2026-10-24  AI(Cursor)  本文を最大 1850px に。性能バーを紺の単色系にしコメントをバー直後へ。カードの高さを圧縮
 *   2026-10-25  AI(Cursor)  性能バーを濃紺の筐体・シアンの発光枠・斜めセグメントを持つゲーミング調に改修
 *   2026-10-25  AI(Cursor)  4 本の性能バーが 1.2 秒以内に伸び切る演出に調整。100% は右端を垂直にした
 *   2026-10-25  AI(Cursor)  パーツ名を 1 行省略表示にし、フルHD時のプロフィール列を拡張
 *   2026-10-25  AI(Cursor)  商品・構成カードのリンク範囲と hover、その他構成のアコーディオン、カードの光演出を追加
 *   2026-10-25  AI(Cursor)  選択カテゴリの優先表示、フリーワード欄、カテゴリ一括開閉を追加
 *   2026-10-26  AI(Cursor)  未使用・重複定義を整理し、デザイナー向け編集ガイドを追加
 *   2026-10-26  AI(Cursor)  1440〜1699px の構成カードを2行程度に圧縮
 *   2026-10-28  AI(Cursor)  0 件のときの「こちらはいかがですか？」（.sx-suggest）を追加
 */

/* ==================== 1. 共通トークン・基本部品 ==================== */
/* ページ内の配色を変える場合は、個別ルールより先にこの変数を見直す。 */
.sx-page {
  --sx-key: #004896;
  --sx-key-dark: #00366f;
  --sx-key-pale: #eef4fb;
  --sx-sale: #c8102e;
  --sx-sale-pale: #fdf0f2;
  --sx-text: #1f2a37;
  --sx-muted: #4a5563;
  --sx-line: #d5dbe3;
  --sx-line-strong: #9aa6b5;
  --sx-bg-sub: #f4f6f9;
  --sx-theme: var(--sx-key);
  color: var(--sx-text);
  padding: 16px 0 56px;
  font-size: 16px;
  line-height: 1.6;
}

.sx-page *,
.sx-page *::before,
.sx-page *::after {
  box-sizing: border-box;
}

/* 本文だけ広げる。左右余白を含む実幅は最大 1850px。 */
.sx-wrap {
  max-width: 1850px;
  margin: 0 auto;
  padding: 0 16px;
}

.sx-page a {
  color: var(--sx-key);
}

.sx-page a:focus-visible,
.sx-page button:focus-visible,
.sx-page input:focus-visible,
.sx-page summary:focus-visible {
  outline: 3px solid var(--sx-key);
  outline-offset: 2px;
}

/* ボタン：primary＝主要導線、sub＝第2導線、ghost＝補助導線 */
.sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.sx-page .sx-btn--primary {
  background: var(--sx-key);
  border-color: var(--sx-key);
  color: #fff;
}

.sx-page .sx-btn--primary:hover {
  background: var(--sx-key-dark);
  border-color: var(--sx-key-dark);
}

.sx-page .sx-btn--sub {
  background: #fff;
  border-color: var(--sx-key);
  color: var(--sx-key);
}

.sx-page .sx-btn--sub:hover {
  background: var(--sx-key-pale);
}

.sx-page .sx-btn--ghost {
  background: var(--sx-bg-sub);
  border-color: var(--sx-line);
  color: var(--sx-text);
}

.sx-page .sx-btn--ghost:hover {
  border-color: var(--sx-line-strong);
}

.sx-btn--lg {
  min-height: 52px;
  padding: 14px 28px;
  font-size: 18px;
}

/* 下部コンテンツで共通使用する左帯付き見出し */
.sx-sec-title {
  position: relative;
  margin: 0 0 20px;
  padding-left: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
  word-break: auto-phrase;
}

.sx-sec-title::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: 0;
  width: 5px;
  border-radius: 3px;
  background: var(--sx-theme);
}

/* ==================== 2. ページ上部 ==================== */
/* ランディング用ヒーロー。テーマ色は帯・ラベル・数値・比較中行に連動する。 */
.sx-hero--gpu { --sx-theme: #0b6e4f; }
.sx-hero--cpu { --sx-theme: #004896; }
.sx-hero--sale { --sx-theme: #c8102e; }
.sx-hero--life { --sx-theme: #00766c; }
.sx-hero--creator { --sx-theme: #5b3fa0; }

.sx-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 32px;
  border: 1px solid var(--sx-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #f7f9fc 0%, #fff 70%);
  overflow: clip;
}

.sx-hero__body {
  order: 2;
  padding: 24px 20px 28px;
  border-top: 4px solid var(--sx-theme);
}

.sx-hero__eyebrow {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--sx-theme);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.sx-hero__title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--sx-text);
  text-wrap: balance;
  word-break: auto-phrase;
}

.sx-hero__lead {
  max-width: 42em;
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--sx-muted);
  line-break: strict;
  text-wrap: pretty;
}

.sx-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.sx-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  container-type: inline-size;
  padding: 10px 14px;
  border: 1px solid var(--sx-line);
  border-left: 4px solid var(--sx-theme);
  border-radius: 8px;
  background: #fff;
}

.sx-stat__label {
  font-size: 16px;
  color: var(--sx-muted);
}

.sx-stat__value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
}

/* container query 単位で、7桁価格も統計カード内へ収める。 */
.sx-stat__num {
  font-size: clamp(18px, 21cqi, 28px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--sx-theme);
  font-variant-numeric: tabular-nums;
}

.sx-stat__unit {
  font-size: 16px;
  font-weight: 700;
}

.sx-hero__action {
  margin: 0;
}

.sx-hero__visual {
  order: 1;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: #0d1520;
}

.sx-hero__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}

/* ランディング：選ぶときのポイント */
.sx-points {
  margin-top: 48px;
}

.sx-points__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.sx-point {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  padding: 20px;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: #fff;
}

.sx-point__no {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--sx-key-pale);
  color: var(--sx-key);
  font-size: 20px;
  font-weight: 800;
}

.sx-point__head {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
  word-break: auto-phrase;
}

.sx-point__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--sx-muted);
  line-break: strict;
  text-wrap: pretty;
}

/* 通常検索：背景写真の上に検索概要と人気条件を重ねる。 */
.sx-top {
  --sx-top-bg: #edf3f7;
  --sx-top-accent: #075aa8;
  position: relative;
  isolation: isolate;
  min-height: 390px;
  margin-bottom: 32px;
  border: 1px solid #d7e0e8;
  border-radius: 18px;
  background: var(--sx-top-bg);
  box-shadow: 0 18px 45px rgb(25 55 86 / 9%);
  color: var(--sx-text);
  overflow: clip;
}

.sx-top__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}

.sx-top__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

.sx-top__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(244 248 251 / 0.82) 0%, rgb(244 248 251 / 0.96) 58%, rgb(244 248 251 / 0.98) 100%);
}

.sx-top__body {
  padding: 32px 20px 28px;
}

.sx-top__title {
  max-width: 15em;
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.015em;
  color: #10263d;
  text-wrap: balance;
  word-break: auto-phrase;
}

.sx-top__title::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sx-top-accent), #56a9df);
}

/* リード文は縦幅を抑えるためスマホでは隠し、768px以上で表示する。 */
.sx-top__lead {
  display: none;
  max-width: 34em;
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.75;
  color: #42576c;
  line-break: strict;
  text-wrap: pretty;
}

.sx-top__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 540px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.sx-top__stats li {
  display: grid;
  grid-template-columns: auto auto;
  align-content: center;
  justify-content: start;
  column-gap: 4px;
  min-height: 78px;
  padding: 10px 12px;
  border: 1px solid rgb(128 156 181 / 28%);
  border-radius: 10px;
  background: rgb(255 255 255 / 72%);
  backdrop-filter: blur(4px);
}

.sx-top__stat-label {
  grid-column: 1 / -1;
  font-size: 16px;
  color: #52667a;
}

.sx-top__stat-num {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--sx-top-accent);
  font-variant-numeric: tabular-nums;
}

.sx-top__stat-unit {
  font-size: 16px;
  font-weight: 700;
}

.sx-top__quick {
  max-width: 700px;
}

.sx-top__quick-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #344b62;
}

/* 人気条件：スマホは横スクロール、768px以上は折り返し表示。 */
.sx-top__quick-list {
  display: flex;
  gap: 8px;
  margin: 0 -20px;
  padding: 0 20px 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.sx-top__quick-list li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.sx-page .sx-top__quick-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid #b8c8d8;
  border-radius: 999px;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 3px 12px rgb(45 77 107 / 7%);
  color: #143d64;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.sx-page .sx-top__quick-link:hover {
  border-color: var(--sx-key);
  background: #fff;
  color: var(--sx-key);
}

.sx-page .sx-top a:focus-visible {
  outline-color: var(--sx-key);
}

/* ==================== 3. 絞り込み・検索結果ツール ==================== */
/* モバイルは1列、1024px以上で「絞り込み 300px＋商品一覧」にする。 */
.sx-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* 絞り込み：外側detailsはモバイル用、各.sx-facetがカテゴリのdetails。 */
.sx-filter__summary::-webkit-details-marker,
.sx-facet__head::-webkit-details-marker,
.sx-configs__more-summary::-webkit-details-marker,
.sx-faq__q::-webkit-details-marker {
  display: none;
}

.sx-filter__box {
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: #fff;
}

.sx-filter__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.sx-filter__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--sx-key);
  border-bottom: 2px solid var(--sx-key);
  transform: rotate(45deg) translateY(-3px);
}

.sx-filter__box[open] > .sx-filter__summary::after {
  transform: rotate(-135deg) translateY(-3px);
}

.sx-filter__count {
  padding: 2px 10px;
  border-radius: 6px;
  background: var(--sx-key);
  color: #fff;
  font-size: 16px;
}

.sx-filter__body {
  padding: 0 16px 8px;
  border-top: 1px solid var(--sx-line);
}

.sx-filter__controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sx-line);
}

.sx-filter__controls[hidden] {
  display: none;
}

.sx-filter__control {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #b9c9d9;
  border-radius: 6px;
  background: #fff;
  color: var(--sx-key-dark);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.sx-filter__control:hover {
  border-color: var(--sx-key);
  background: var(--sx-key-pale);
}

.sx-facet {
  border-bottom: 1px solid var(--sx-line);
}

.sx-facet:last-child {
  border-bottom: 0;
}

.sx-facet__head {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.sx-facet__head::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  font-weight: 400;
  color: var(--sx-key);
}

.sx-facet[open] > .sx-facet__head::after {
  content: "−";
}

.sx-facet.is-active > .sx-facet__head {
  color: var(--sx-key);
}

.sx-facet__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
}

.sx-page .sx-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sx-line);
  border-radius: 6px;
  background: #fff;
  color: var(--sx-text);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}

.sx-page .sx-chip:hover {
  border-color: var(--sx-key);
  background: var(--sx-key-pale);
}

.sx-chip__count {
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-page .sx-chip.is-selected {
  border-color: var(--sx-key);
  background: var(--sx-key);
  color: #fff;
}

.sx-chip__off {
  padding-left: 8px;
  border-left: 1px solid rgb(255 255 255 / 50%);
  font-weight: 700;
}

.sx-keyword {
  padding: 0 0 14px;
}

.sx-keyword__label {
  display: block;
  margin-bottom: 6px;
  color: var(--sx-muted);
  font-size: 16px;
  line-height: 1.45;
}

.sx-keyword__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.sx-keyword__input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--sx-line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--sx-text);
  font: inherit;
  font-size: 16px;
}

.sx-keyword__submit {
  min-width: 64px;
  padding-inline: 12px;
}

.sx-page .sx-keyword__clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  font-size: 16px;
}

/* 件数・選択中の条件 */
.sx-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 16px;
  margin-bottom: 12px;
}

.sx-bar__title {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
}

.sx-bar__num {
  font-size: 32px;
  font-weight: 800;
  color: var(--sx-key);
  font-variant-numeric: tabular-nums;
}

.sx-bar__range {
  font-size: 16px;
  font-weight: 400;
  color: var(--sx-muted);
}

.sx-conds {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-page .sx-bar__guide {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
}

.sx-page .sx-cond {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sx-key);
  border-radius: 6px;
  background: var(--sx-key-pale);
  color: var(--sx-key-dark);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.sx-cond__off {
  padding-left: 8px;
  border-left: 1px solid var(--sx-line-strong);
  font-weight: 400;
}

.sx-conds__reset {
  display: inline-block;
  padding: 10px 4px;
  font-size: 16px;
}

.sx-notice {
  margin: 0 0 12px;
  padding: 12px 16px;
  border-left: 4px solid #b26a00;
  border-radius: 6px;
  background: #fff7e6;
  font-size: 16px;
}

/* 並べ替え・表示件数 */
.sx-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--sx-line);
  border-bottom: 1px solid var(--sx-line);
}

.sx-sort,
.sx-lines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sx-tools__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--sx-muted);
}

.sx-sort ul,
.sx-lines ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-page .sx-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sx-line);
  border-radius: 6px;
  background: #fff;
  color: var(--sx-text);
  font-size: 16px;
  text-decoration: none;
}

.sx-page a.sx-pill:hover {
  border-color: var(--sx-key);
  color: var(--sx-key);
}

.sx-pill.is-current {
  border-color: var(--sx-text);
  background: var(--sx-text);
  color: #fff;
  font-weight: 700;
}

/* ==================== 4. 商品カード ==================== */
/* hover時はカード全体をわずかに持ち上げ、性能バー開始時は::afterの光を通す。 */
.sx-cards {
  display: grid;
  gap: 28px;
}

.sx-card {
  position: relative;
  isolation: isolate;
  border: 1px solid #dce3ea;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(31 54 78 / 7%);
  scroll-margin-top: 80px;
  overflow: clip;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.sx-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: -35%;
  background:
    linear-gradient(135deg,
      transparent 0%,
      transparent 42%,
      rgb(255 255 255 / 0%) 45%,
      rgb(255 255 255 / 54%) 49%,
      rgb(76 195 255 / 18%) 52%,
      transparent 57%,
      transparent 100%);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-70%, -35%, 0);
}

.sx-card.is-meter-revealed::after {
  animation: sx-card-sheen 1425ms ease-out 80ms both;
}

.sx-card:focus-within {
  border-color: #76a8d8;
  box-shadow: 0 15px 36px rgb(20 74 128 / 14%), 0 0 0 2px rgb(0 72 150 / 8%);
}

@media (hover: hover) {
  .sx-card:hover {
    border-color: #76a8d8;
    box-shadow: 0 16px 40px rgb(20 74 128 / 15%), 0 0 0 2px rgb(0 72 150 / 7%);
    transform: translateY(-2px);
  }
}

@keyframes sx-card-sheen {
  0% {
    transform: translate3d(-70%, -35%, 0);
    opacity: 0;
  }
  16% {
    opacity: 0.72;
  }
  100% {
    transform: translate3d(70%, 35%, 0);
    opacity: 0;
  }
}

/* 上段：DOM順に依存せずgrid-areaで配置。スマホは価格を性能より先に見せる。 */
.sx-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "media" "info" "buy" "meters";
  gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #fff 0%, #fff 70%, #f6f9fc 100%);
}

.sx-card__media {
  grid-area: media;
  display: block;
  justify-self: center;
  width: 100%;
  max-width: 200px;
}

.sx-card__info {
  grid-area: info;
  min-width: 0;
}

.sx-card__top .sx-profile--capability {
  grid-area: meters;
  padding: 14px 0 0;
  border-top: 1px solid var(--sx-line);
  background: transparent;
}

.sx-card__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #f7fafc;
}

.sx-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.sx-badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--sx-line);
  border-radius: 6px;
  background: var(--sx-bg-sub);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--sx-text);
}

.sx-badge--sale {
  border-color: var(--sx-sale);
  background: var(--sx-sale);
  color: #fff;
}

.sx-badge--ship {
  border-color: #00766c;
  background: #e8f5f3;
  color: #005a52;
}

.sx-card__name {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sx-page .sx-card__name a {
  display: block;
  min-height: 44px;
  padding: 4px 0;
  color: var(--sx-text);
  text-decoration: none;
}

.sx-page .sx-card__name a:hover {
  color: var(--sx-key);
  text-decoration: underline;
}

.sx-card__brand {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--sx-muted);
}

.sx-card__catch {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--sx-muted);
  overflow-wrap: anywhere;
  line-break: strict;
}

.sx-card__points {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-card__points li {
  position: relative;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sx-card__points li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--sx-key);
}

.sx-card__buy {
  grid-area: buy;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #dce5ee;
  border-radius: 12px;
  background: linear-gradient(145deg, #f7fafc 0%, #eef4f9 100%);
}

.sx-page .sx-card__buy-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  border-radius: 8px;
  color: var(--sx-text);
  text-decoration: none;
}

.sx-page .sx-card__buy-link:hover .sx-price__label--model {
  text-decoration-thickness: 2px;
}

.sx-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.sx-price__label {
  font-size: 16px;
  color: var(--sx-muted);
}

.sx-price__label--model {
  align-self: flex-start;
  font-weight: 800;
  color: var(--sx-key);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sx-price__regular {
  font-size: 16px;
  color: var(--sx-muted);
}

.sx-price__main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
}

.sx-price__num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--sx-text);
  font-variant-numeric: tabular-nums;
}

.sx-price__regular + .sx-price__main .sx-price__num {
  color: var(--sx-sale);
}

.sx-price__yen {
  font-size: 18px;
  font-weight: 700;
}

.sx-card__cta {
  width: 100%;
}

.sx-card__customize {
  width: 100%;
  white-space: nowrap;
}

/* 商品プロフィール：性能・用途・装備を肯定的な「得意領域」として見せる。 */
.sx-card__profile {
  display: grid;
  gap: 1px;
  border-top: 1px solid var(--sx-line);
  background: var(--sx-line);
}

.sx-profile {
  min-width: 0;
  padding: 14px 16px;
  background: #fff;
}

.sx-profile__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--sx-text);
}

.sx-profile__title::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--sx-key);
}

.sx-meters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
}

/* 性能バー：1行目は「項目名｜バー｜評価コメント」、2行目は実パーツ名。 */
.sx-meter {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-width: 0;
}

.sx-meter__label {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--sx-text);
}

.sx-meter__body {
  display: grid;
  grid-template-columns: minmax(56px, 168px) minmax(6.5em, 1fr);
  justify-content: start;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  margin: 0;
}

.sx-meter__track {
  position: relative;
  display: block;
  height: 20px;
  padding: 3px;
  border: 1px solid #48bff5;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgb(59 104 139 / 58%) 0, rgb(10 34 57 / 18%) 42%, rgb(2 14 30 / 72%) 100%),
    repeating-linear-gradient(128deg, #132f49 0 31px, #0b223a 31px 62px);
  box-shadow:
    0 0 0 1px #071b34,
    0 0 5px rgb(0 178 255 / 56%),
    inset 0 0 0 1px rgb(147 222 255 / 42%),
    inset 0 2px 3px rgb(255 255 255 / 14%),
    inset 0 -3px 5px rgb(0 4 15 / 68%);
  overflow: visible;
}

.sx-meter__track::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 2px;
  border: 1px solid rgb(132 220 255 / 34%);
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgb(0 191 255 / 24%);
  pointer-events: none;
}

.sx-meter__fill {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgb(196 255 255 / 48%) 0, transparent 34%, rgb(0 72 255 / 18%) 100%),
    repeating-linear-gradient(128deg, rgb(255 255 255 / 12%) 0 31px, rgb(1 80 255 / 7%) 31px 62px),
    linear-gradient(90deg, #17e8c4 0%, #04d9df 28%, #00aaf2 54%, #0870ed 76%, #073dd9 100%);
  box-shadow:
    0 0 5px #00e5ff,
    0 0 11px rgb(0 153 255 / 72%),
    inset 0 1px 2px rgb(255 255 255 / 56%),
    inset 0 -2px 3px rgb(0 45 186 / 42%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

.sx-meter__fill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(128deg, transparent 0 30px, rgb(115 239 255 / 52%) 31px, transparent 33px 62px);
}

.sx-meter__fill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px 1px #fff, 0 0 8px 3px #00d9ff;
  opacity: 0.78;
  transform: translateY(-50%);
}

.sx-meter__fill.sx-w100 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.sx-meter__profile {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--sx-key-dark);
  overflow-wrap: anywhere;
}

.sx-motion-ready .sx-meter__fill {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.sx-motion-ready .sx-meter.is-revealed .sx-meter__fill {
  animation: sx-meter-grow 800ms linear forwards;
}

.sx-motion-ready .sx-meter:nth-child(2).is-revealed .sx-meter__fill { animation-delay: 80ms; }
.sx-motion-ready .sx-meter:nth-child(3).is-revealed .sx-meter__fill { animation-delay: 160ms; }
.sx-motion-ready .sx-meter:nth-child(4).is-revealed .sx-meter__fill { animation-delay: 240ms; }

.sx-motion-ready .sx-meter.is-revealed .sx-meter__fill.sx-w100 {
  animation-name: sx-meter-grow-full;
}

@keyframes sx-meter-grow {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    filter: brightness(1.45);
  }
  78% {
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    filter: brightness(1.18);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
    filter: brightness(1);
  }
}

@keyframes sx-meter-grow-full {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    filter: brightness(1.45);
  }
  78% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: brightness(1.18);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: brightness(1);
  }
}

.sx-meter__value {
  grid-column: 1 / -1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--sx-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-uses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 用途タイル：左帯が濃いほど、その用途を得意とする。 */
.sx-use {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 7px 12px;
  border: 1px solid #dfe7ef;
  border-left: 4px solid #a9bacb;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 16px;
}

.sx-use--lv3 { border-left-color: var(--sx-key); }
.sx-use--lv2 { border-left-color: #4a7fb8; }
.sx-use--lv1 { border-left-color: #8ea6bf; }

.sx-use__label {
  color: var(--sx-muted);
  line-height: 1.4;
}

.sx-use__word {
  font-weight: 800;
  line-height: 1.4;
  color: var(--sx-text);
  overflow-wrap: anywhere;
}

.sx-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.sx-spec {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 7px 12px 8px;
  border: 1px solid #e0e6ed;
  border-top: 3px solid #b3c3d4;
  border-radius: 8px;
  background: #fff;
}

.sx-spec dt {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--sx-muted);
}

.sx-spec dd {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.sx-spec__main {
  font-weight: 800;
  color: var(--sx-text);
  overflow-wrap: anywhere;
}

.sx-spec__sub {
  color: var(--sx-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* 構成ラインナップ：標準構成の下に、その他構成をdetailsで格納する。 */
.sx-configs {
  margin-top: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--sx-line);
  border-radius: 0 0 16px 16px;
  background: #f6f8fb;
}

.sx-configs__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sx-key-dark);
}

.sx-configs__count {
  font-weight: 400;
  color: var(--sx-muted);
}

.sx-configs__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-configs__more {
  margin-top: 10px;
}

.sx-configs__more-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #c8d5e2;
  border-radius: 8px;
  background: #fff;
  color: var(--sx-key-dark);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.sx-configs__more-summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.sx-configs__more-summary span {
  margin-left: 8px;
  margin-right: 14px;
  font-weight: 400;
  color: var(--sx-muted);
}

.sx-configs__more[open] .sx-configs__more-summary {
  border-color: #8eb1d3;
  background: #edf5fc;
}

.sx-configs__more[open] .sx-configs__more-summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.sx-configs__list--other {
  margin-top: 8px;
}

.sx-configs__more:not([open]) > .sx-configs__list {
  display: none;
}

.sx-config {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.sx-config:hover,
.sx-config:focus-within {
  border-color: #94b7d8;
  background: #f0f7fd;
  box-shadow: 0 5px 15px rgb(22 81 137 / 9%);
}

.sx-page .sx-config__detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border-radius: 6px;
  color: var(--sx-text);
  text-decoration: none;
}

.sx-config__spec {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.sx-config__icons {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 4px;
}

.sx-config__icons img {
  display: block;
  flex: 0 0 auto;
  max-width: none;
}

.sx-config__text {
  display: flex;
  flex: 1 1 10em;
  flex-direction: column;
  min-width: 10em;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.sx-config__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.sx-config__regular {
  font-size: 16px;
  color: var(--sx-muted);
}

.sx-config__num {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.sx-config__regular + .sx-config__num {
  color: var(--sx-sale);
}

.sx-config__ex {
  font-size: 16px;
  color: var(--sx-muted);
}

.sx-config__detail-button {
  width: 100%;
}

.sx-config__customize {
  width: 100%;
  white-space: nowrap;
}

/* ==================== 5. 一覧下・補足コンテンツ ==================== */
/* 一覧下：ページ送りと表示件数 */
.sx-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin-top: 28px;
}

.sx-pager {
  flex: 1 1 100%;
  order: -1;
}

.sx-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-page .sx-pager__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--sx-line);
  border-radius: 6px;
  background: #fff;
  color: var(--sx-text);
  font-size: 16px;
  text-decoration: none;
}

.sx-page a.sx-pager__item:hover {
  border-color: var(--sx-key);
  color: var(--sx-key);
}

.sx-pager__item.is-current {
  border-color: var(--sx-key);
  background: var(--sx-key);
  color: #fff;
  font-weight: 700;
}

.sx-pager__gap {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--sx-muted);
}

/* 0 件・エラー */
.sx-empty {
  padding: 32px 20px;
  border: 1px dashed var(--sx-line-strong);
  border-radius: 10px;
  background: var(--sx-bg-sub);
  text-align: center;
}

.sx-empty__title {
  margin: 0 0 12px;
  font-size: 24px;
}

.sx-empty__text {
  margin: 0 0 16px;
  font-size: 16px;
  line-break: strict;
}

.sx-empty__links {
  margin: 0;
}

/* 0 件のときの「こちらはいかがですか？」（語から拾った条件、または条件なしのおすすめ順） */
.sx-suggest {
  margin-top: 40px;
}

.sx-suggest__head {
  margin-bottom: 20px;
}

.sx-suggest__head .sx-sec-title {
  margin-bottom: 8px;
}

.sx-suggest__lead {
  margin: 0;
  color: var(--sx-muted);
  font-size: 16px;
  line-break: strict;
  text-wrap: pretty;
}

.sx-suggest__cond {
  color: var(--sx-text);
}

.sx-suggest__more {
  margin: 24px 0 0;
  text-align: center;
}

.sx-suggest__more .sx-btn {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* 比較表 */
.sx-compare,
.sx-faq,
.sx-related,
.sx-guide {
  margin-top: 48px;
}

.sx-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.sx-compare__table thead {
  display: none;
}

.sx-compare__table tbody,
.sx-compare__table tr,
.sx-compare__table th {
  display: block;
}

.sx-compare__table tr {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: #fff;
}

.sx-compare__table tr.is-current {
  border: 2px solid var(--sx-theme);
  background: var(--sx-key-pale);
}

.sx-compare__table td {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  word-break: keep-all;
}

.sx-compare__table td[data-label]::before {
  content: attr(data-label);
  flex: 0 0 7em;
  color: var(--sx-muted);
}

.sx-compare__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 800;
  text-align: left;
}

.sx-compare__here {
  padding: 0 8px;
  border-radius: 6px;
  background: var(--sx-theme);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.sx-compare__perf {
  min-width: 0;
}

.sx-compare__track {
  flex: 1 1 auto;
  min-width: 80px;
  height: 12px;
  border-radius: 6px;
  background: #e2e7ee;
  overflow: clip;
}

.sx-compare__fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--sx-key);
}

.is-current .sx-compare__fill {
  background: var(--sx-theme);
}

.sx-compare__score {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.sx-compare__price {
  font-weight: 700;
}

.sx-page .sx-compare__table th {
  background: transparent;
  color: var(--sx-text);
}

.sx-page .sx-compare__table thead th {
  background: var(--sx-bg-sub);
}

.sx-compare__link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.sx-compare__note {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--sx-muted);
  line-break: strict;
}

/* 幅クラス：性能バーと比較表で共用。48/72/86は商品プロフィール専用段階。 */
.sx-w0 { width: 0; }
.sx-w5 { width: 5%; }
.sx-w10 { width: 10%; }
.sx-w15 { width: 15%; }
.sx-w20 { width: 20%; }
.sx-w25 { width: 25%; }
.sx-w30 { width: 30%; }
.sx-w35 { width: 35%; }
.sx-w40 { width: 40%; }
.sx-w45 { width: 45%; }
.sx-w48 { width: 48%; }
.sx-w50 { width: 50%; }
.sx-w55 { width: 55%; }
.sx-w60 { width: 60%; }
.sx-w65 { width: 65%; }
.sx-w70 { width: 70%; }
.sx-w72 { width: 72%; }
.sx-w75 { width: 75%; }
.sx-w80 { width: 80%; }
.sx-w85 { width: 85%; }
.sx-w86 { width: 86%; }
.sx-w90 { width: 90%; }
.sx-w95 { width: 95%; }
.sx-w100 { width: 100%; }

/* よくある質問 */
.sx-faq__list {
  display: grid;
  gap: 10px;
}

.sx-faq__item {
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: #fff;
}

.sx-faq__q {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.sx-faq__q::before {
  content: "Q";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--sx-key);
  color: #fff;
  font-weight: 800;
}

.sx-faq__q::after {
  content: "+";
  margin-left: auto;
  font-size: 22px;
  color: var(--sx-key);
}

.sx-faq__item[open] > .sx-faq__q::after {
  content: "−";
}

.sx-faq__q-text {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.sx-faq__a {
  margin: 0;
  padding: 0 16px 16px 60px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--sx-text);
  line-break: strict;
  text-wrap: pretty;
}

/* 関連する条件 */
.sx-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-page .sx-related__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--sx-line);
  border-radius: 8px;
  background: #fff;
  color: var(--sx-text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.sx-page .sx-related__link::after {
  content: "›";
  color: var(--sx-key);
  font-size: 20px;
}

.sx-page .sx-related__link:hover {
  border-color: var(--sx-key);
  background: var(--sx-key-pale);
}

/* 目安の見方 */
.sx-guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.sx-guide__block {
  padding: 20px;
  border: 1px solid var(--sx-line);
  border-radius: 10px;
  background: var(--sx-bg-sub);
}

.sx-guide__head {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.sx-guide__text {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
  line-break: strict;
  text-wrap: pretty;
}

.sx-guide__uses {
  display: grid;
  gap: 12px;
  margin: 0;
}

.sx-guide__uses dt {
  font-weight: 700;
}

.sx-guide__uses dd {
  margin: 0;
  line-height: 1.75;
  line-break: strict;
}

/* ==================== 6. レスポンシブ調整 ==================== */
/* タブレット以上：カード上段を2列化し、比較表を通常のtable表示へ戻す。 */
@media (width >= 768px) {
  .sx-top__body {
    padding: 44px 44px 40px;
  }

  .sx-top__title {
    font-size: 38px;
  }

  .sx-top__lead {
    display: block;
  }

  .sx-top__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 620px;
  }

  .sx-top__stat-num {
    font-size: 28px;
  }

  .sx-top__quick-list {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .sx-hero__stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .sx-points__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sx-card__top {
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-areas: "media info" "media buy" "meters meters";
    column-gap: 20px;
    padding: 18px 20px;
  }

  .sx-card__media {
    align-self: start;
  }

  .sx-meters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }

  .sx-uses {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sx-specs {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }

  .sx-profile {
    padding: 12px 20px;
  }

  .sx-configs {
    padding: 12px 20px 16px;
  }

  .sx-config {
    align-items: center;
  }

  .sx-page .sx-config__detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17em) auto;
  }

  .sx-config__detail-button,
  .sx-config__customize {
    width: auto;
  }

  .sx-config__customize {
    justify-self: end;
  }

  .sx-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-compare__table thead {
    display: table-header-group;
  }

  .sx-compare__table {
    display: table;
  }

  .sx-compare__table tbody {
    display: table-row-group;
  }

  .sx-compare__table tr {
    display: table-row;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .sx-compare__table tr.is-current {
    border: 0;
  }

  .sx-compare__table th,
  .sx-compare__table td {
    display: table-cell;
    padding: 12px;
    border-bottom: 1px solid var(--sx-line);
    vertical-align: middle;
  }

  .sx-compare__table thead th {
    border-bottom: 2px solid var(--sx-line-strong);
    font-weight: 700;
    text-align: left;
  }

  .sx-compare__table td[data-label]::before {
    content: none;
  }

  .sx-compare__here {
    display: inline-block;
    margin-left: 8px;
  }

  .sx-compare__perf {
    width: 34%;
  }

  .sx-compare__perf .sx-compare__track {
    display: inline-block;
    width: calc(100% - 5em);
    vertical-align: middle;
  }

  .sx-compare__score {
    display: inline-block;
    margin-left: 8px;
  }
}

/* PC：絞り込みを左列へ置き、カード上段を「画像・説明・価格」の3列にする。 */
@media (width >= 1024px) {
  .sx-top__bg::after {
    background: linear-gradient(90deg, rgb(247 250 252 / 0.98) 0%, rgb(247 250 252 / 0.92) 39%, rgb(247 250 252 / 0.48) 57%, rgb(247 250 252 / 0) 76%);
  }

  .sx-top__body {
    max-width: 740px;
    min-height: 430px;
    padding: 50px 56px 46px;
  }

  .sx-top__title {
    font-size: 42px;
  }

  .sx-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: 440px;
  }

  .sx-hero__body {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 40px 40px 44px;
    border-top: 0;
    border-left: 6px solid var(--sx-theme);
  }

  .sx-hero__title {
    font-size: 36px;
  }

  .sx-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-hero__visual {
    order: 2;
    aspect-ratio: auto;
    min-height: 100%;
  }

  .sx-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
  }

  .sx-filter__summary {
    cursor: default;
  }

  .sx-filter__summary::after {
    display: none;
  }

  .sx-card__top {
    grid-template-columns: 160px minmax(0, 1fr) 240px;
    grid-template-areas: "media info buy" "meters meters meters";
  }

  /* 使い方・仕様は見出しを左に置き、中身を横 1 列に並べて高さを抑える */
  .sx-card__profile .sx-profile {
    display: grid;
    grid-template-columns: 9.5em minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  .sx-card__profile .sx-profile__title {
    margin: 8px 0 0;
  }

  .sx-uses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-page .sx-config__detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 16em) auto;
  }
}

/* 広いPC：ヒーローと商品上段の横幅を拡張する。 */
@media (width >= 1440px) {
  .sx-hero {
    min-height: 500px;
  }

  .sx-hero__title {
    font-size: 40px;
  }

  .sx-card__top {
    grid-template-columns: 190px minmax(0, 1fr) 260px;
  }

  .sx-uses {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 中間幅は余白をOS欄だけに集めず、価格へ配分して2行程度に収める。 */
  .sx-config {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
  }

  .sx-page .sx-config__detail {
    grid-template-columns: minmax(12em, 1fr) minmax(21.5em, 24em) auto;
    gap: 14px;
  }
}

/* フルHD級：上段を「画像・説明・性能バー・価格」の4列にし、1商品を低く保つ。 */
@media (width >= 1700px) {
  .sx-card__top {
    grid-template-columns: 180px minmax(0, 1fr) minmax(390px, 30%) 250px;
    grid-template-areas: "media info meters buy";
  }

  .sx-card__top .sx-profile--capability {
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid var(--sx-line);
  }

  .sx-meters {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-meter__body {
    grid-template-columns: minmax(56px, 150px) minmax(6.5em, 1fr);
  }

  .sx-config {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
  }

  .sx-page .sx-config__detail {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
  }

  .sx-config__text {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 12px;
  }

  .sx-config__price {
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* OSで動きを減らす設定が有効な場合は、スクロール演出を止める。 */
  .sx-page * {
    scroll-behavior: auto;
  }
}