/* SAIYASHOES — コンポーネントのクラス。色・余白・角丸は tokens.css の変数だけを使う。
   命名：ss-ブロック / ss-ブロック__要素 / ss-ブロック--種類 / 状態は is-* と aria-* */

/* ---------- 土台 ---------- */
.ss-page { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1.75; }
:where(.ss-page) a { color: inherit; }
.ss-container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-24); box-sizing: border-box; }
.ss-stack { display: flex; flex-direction: column; gap: var(--space-32); }
.ss-row { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-16); }
.ss-muted { color: var(--ink-muted); }
.ss-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.ss-hide-sp { }
.ss-show-sp { display: none; }
.ss-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .ss-container { padding-inline: var(--space-16); } }

/* フォーカス（全パーツ共通） */
.ss-page :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ss-header :focus-visible, .ss-comparebar :focus-visible { outline-color: var(--surface); }

/* ---------- ヘッダー ---------- */
.ss-header { position: relative; z-index: 30; background: var(--ink); color: var(--surface); }
.ss-header__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-12) var(--space-24); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); box-sizing: border-box; }
.ss-header__logo { display: flex; align-items: center; }
.ss-header__logo img { display: block; width: auto; height: var(--logo-pc); }
.ss-header__logo .is-sp { display: none; height: var(--logo-sp); }
.ss-header__search { flex: 1 1 200px; display: flex; }
.ss-header__search input { flex: 1; min-width: 0; height: var(--tap-min); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.ss-header__search input::placeholder { color: var(--ink-muted); }
.ss-header__nav { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: 14px; }
.ss-header__menu { display: none; }

/* グローバルナビ：押すと主要ページのリンク集（パネル）が開く */
.ss-gnav__btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-sm); background: none; color: var(--surface); font: inherit; font-size: 14px; cursor: pointer; position: relative; }
.ss-gnav__btn::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.ss-gnav__btn:hover { background: var(--ink-muted); }
.ss-gnav__btn[aria-expanded="true"] { font-weight: 700; }
/* 直接移動するリンク（お得情報・発売予定・マイページ）は「›」 */
.ss-gnav__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--space-12); border-radius: var(--radius-sm); color: var(--surface); text-decoration: none; font-size: 14px; }
.ss-gnav__link::after { content: "›"; font-size: 18px; line-height: 1; }
.ss-gnav__link:hover { background: var(--ink-muted); }
.ss-gnav__btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.ss-gnav__btn[aria-expanded="true"]::before { content: ""; position: absolute; left: var(--space-12); right: var(--space-12); bottom: 4px; height: 3px; border-radius: 2px; background: var(--cat); }
.ss-gnav__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.ss-gnav__panel[hidden] { display: none; }
.ss-gnav__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); box-sizing: border-box; }
.ss-gnav__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8) var(--space-16); }
.ss-gnav__all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.ss-gnav__all::after { content: "›"; font-size: 18px; line-height: 1; }
.ss-gnav__close { min-height: 36px; padding: 0 var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ss-gnav__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-16) var(--space-24); }
.ss-gnav__col { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.ss-gnav__col--wide { grid-column: span 2; }
.ss-gnav__title { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink-muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ss-gnav__links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 var(--space-16); }
.ss-gnav__links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 36px; padding-right: var(--space-8); font-size: 14px; color: var(--ink); text-decoration: none; }
.ss-gnav__links a::after { content: "›"; color: var(--ink-muted); font-size: 18px; line-height: 1; }
.ss-gnav__links a:hover { text-decoration: underline; }
.ss-gnav__sizes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ss-gnav__sizes .ss-chip { min-height: 36px; padding: 0 10px; }
.ss-gnav__sizes-label { font-size: 12px; font-weight: 700; width: 5.5em; }

/* SP：メニューボタンから開く全画面のシート。中はアコーディオン */
.ss-menu { position: fixed; inset: 0; z-index: 40; background: var(--surface); color: var(--ink); overflow-y: auto; display: flex; flex-direction: column; }
.ss-menu[hidden] { display: none; }
.ss-menu__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--space-8) + env(safe-area-inset-top, 0px)) var(--space-16) var(--space-8); background: var(--ink); color: var(--surface); }
.ss-menu__bar strong { font-size: 15px; }
.ss-menu__bar button { min-height: var(--tap-min); padding: 0 var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: none; color: var(--surface); font: inherit; font-size: 13px; }
.ss-menu__list { display: flex; flex-direction: column; }
.ss-menu__top { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 var(--space-16); border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; }
.ss-menu__top::after { content: "›"; font-size: 22px; font-weight: 400; line-height: 1; color: var(--ink-muted); }
.ss-menu__sub { border-bottom: 1px solid var(--line); padding: var(--space-4) 0; }
.ss-acc__sum { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 var(--space-16) 0 36px; position: relative; font-size: 15px; font-weight: 700; cursor: pointer; }
.ss-acc__sum::-webkit-details-marker { display: none; }
.ss-acc__sum::before { content: ""; position: absolute; left: 20px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 1px; background: var(--cat); }
.ss-acc__sum::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.ss-acc[open] > .ss-acc__sum::after { transform: translateY(2px) rotate(-135deg); }
.ss-acc__body { padding: 0 var(--space-16) var(--space-12) 36px; display: flex; flex-direction: column; gap: var(--space-8); }
.ss-acc__body .ss-gnav__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-12); }
.ss-acc__body .ss-gnav__links a { min-height: var(--tap-min); border-bottom: 1px solid var(--line); }
.ss-acc__body .ss-gnav__sizes { gap: 6px; }
.ss-acc__body .ss-gnav__sizes-label { width: 100%; }
@media (prefers-reduced-motion: reduce) { .ss-gnav__btn::after, .ss-acc__sum::after { transition: none; } }
.ss-header__size { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--surface); text-decoration: none; font-size: 13px; box-sizing: border-box; }
@media (max-width: 640px) {
  .ss-header__inner { padding-inline: var(--space-16); gap: var(--space-12); }
  .ss-header__logo .is-pc { display: none; }
  .ss-header__logo .is-sp { display: block; }
}

/* 検索エリア（トップ・カテゴリトップ） */
.ss-searchband { background: var(--cat-soft); color: var(--ink); }
.ss-searchband__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-32) var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); box-sizing: border-box; }
.ss-searchband__form { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.ss-searchband__form .ss-input { flex: 1 1 280px; height: var(--cta-height); font-size: 16px; }

/* ---------- PR表記（小さな札） ---------- */
/* パンくずの右端（パンくずがないページは H1 の右）に置く。押すと広告表記ページへ */
.ss-crumbbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); }
.ss-crumbbar .ss-crumbs { flex: 1 1 auto; min-width: 0; }
.ss-pr-tag { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; text-decoration: none; box-sizing: border-box; }
.ss-pr-tag:hover { color: var(--ink); border-color: var(--ink); }
.ss-h1-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12); }
.ss-h1-row .ss-pr-tag { margin-top: 8px; }

/* ---------- パンくず ---------- */
.ss-crumbs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); font-size: 13px; color: var(--ink-muted); }
.ss-crumbs li + li::before { content: "›"; margin-right: var(--space-4); }
.ss-crumbs a { color: var(--ink-muted); }

/* ---------- フッター ---------- */

.ss-footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; }
.ss-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-32) var(--space-24) var(--space-24); display: flex; flex-direction: column; gap: var(--space-24); box-sizing: border-box; }
.ss-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-24) 48px; }
.ss-footer__brand { flex: 1 1 220px; display: flex; flex-direction: column; gap: var(--space-8); max-width: 320px; }
.ss-footer__brand > a, .ss-footer__brand > img { align-self: flex-start; }
.ss-footer__brand img { display: block; height: 28px; width: auto; }
.ss-footer__tagline { margin: 0; color: var(--ink-muted); line-height: 1.6; }
.ss-footer__nav { flex: 3 1 480px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-16) var(--space-24); }
.ss-footer__col { display: flex; flex-direction: column; gap: var(--space-8); }
.ss-footer__col h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.ss-footer__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.ss-footer__links a { color: var(--ink-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.ss-footer__links a:hover { color: var(--ink); text-decoration: underline; }
.ss-footer__bottom { border-top: 1px solid var(--line); padding-top: var(--space-16); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-12) var(--space-24); }
.ss-footer__pr { margin: 0; color: var(--ink-muted); font-size: 12px; flex-basis: 100%; }
.ss-footer__legal { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); }
.ss-footer__legal a { color: var(--ink-muted); min-height: 32px; display: inline-flex; align-items: center; }
.ss-footer__copy { margin: 0; color: var(--ink-muted); font-size: 12px; font-family: var(--font-sans); }

/* ---------- ボタン ---------- */
.ss-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); min-height: var(--tap-min); padding: 0 var(--space-16); border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box; }
.ss-btn--primary { background: var(--cat); color: var(--ink); }
.ss-btn--primary:hover { filter: brightness(.94); }
.ss-btn--cv { background: var(--cv); color: var(--surface); }
.ss-btn--cv:hover { background: var(--cv-hover); }
.ss-btn--outline { background: var(--surface); border-color: var(--ink); color: var(--ink); font-weight: 400; }
.ss-btn--outline:hover { background: var(--bg); }
.ss-btn--text { background: none; color: var(--ink); text-decoration: underline; font-weight: 400; padding-inline: var(--space-4); }
.ss-btn--danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.ss-btn--lg { min-height: var(--cta-height); padding: 0 var(--space-24); border-radius: var(--radius-md); font-size: 16px; }
.ss-btn--sm { min-height: var(--chip-height); padding: 0 var(--space-12); }
.ss-btn--block { display: flex; width: 100%; }
.ss-btn[disabled], .ss-btn[aria-disabled="true"] { background: var(--line); border-color: var(--line-strong); color: var(--ink-muted); font-weight: 400; cursor: not-allowed; }

/* ---------- ラベル ---------- */
.ss-label { display: inline-flex; align-items: center; gap: var(--space-4); padding: 2px 8px; border-radius: var(--radius-xs); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.ss-label--saiyasu { background: var(--saiyasu); color: var(--ink); font-size: 13px; padding: 3px 10px; }
.ss-label--deal { background: var(--cat-soft); color: var(--ink); }
.ss-label--status { background: var(--ink); color: var(--surface); }
.ss-label--neutral { background: var(--line); color: var(--ink); }
.ss-label--outline { border: 1px solid var(--line-strong); color: var(--ink-muted); font-weight: 400; }

/* 特徴タグ */
.ss-tag { display: inline-flex; align-items: center; padding: 2px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-xs); font-size: 12px; color: var(--ink); text-decoration: none; }

/* ---------- 価格 ---------- */
.ss-price { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap; line-height: 1.15; }
.ss-price--hero { font-size: 52px; line-height: 1.05; }
.ss-price--lg { font-size: 28px; }
.ss-price--md { font-size: 22px; }
.ss-price--sm { font-size: 18px; font-weight: 600; }
.ss-price--was { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--ink-muted); text-decoration: line-through; }
.ss-price-eff { font-size: 13px; }
.ss-price-eff .ss-price { font-size: 24px; }
@media (max-width: 640px) { .ss-price--hero { font-size: 44px; } }

/* 最安値ボックス */
.ss-pricebox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.ss-pricebox__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); font-size: 13px; color: var(--ink-muted); }
.ss-pricebox__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.ss-pricebox__side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ss-pricebox__meta { font-size: 12px; color: var(--ink-muted); }
.ss-pricebox__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.ss-pricebox__actions .ss-btn--cv { flex: 1 1 200px; }

/* お得予報 */
.ss-forecast { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); font-size: 14px; }
.ss-forecast__title { display: flex; align-items: center; gap: var(--space-8); font-weight: 700; }
.ss-forecast__note { font-size: 12px; color: var(--ink-muted); }

/* ---------- チップ・タブ・性別の切り替え ---------- */
.ss-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--chip-height); padding: 0 var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; box-sizing: border-box; white-space: nowrap; }
.ss-chip:hover { border-color: var(--ink); }
/* 選択中：白地に2pxの黒枠と太字。塗りつぶさない */
.ss-chip.is-on, .ss-chip.is-selected, .ss-chip[aria-pressed="true"], .ss-chip[aria-selected="true"], .ss-chip[aria-current] { background: var(--surface); border: 2px solid var(--ink); padding: 0 11px; color: var(--ink); font-weight: 700; }
.ss-chip[aria-pressed="true"]::before, .ss-chip[aria-selected="true"]::before { content: "✓"; }
/* 候補の中の最安：チップは白のまま「最安」の小さな札を付ける */
.ss-chip__badge { background: var(--saiyasu); color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.4; padding: 0 6px; border-radius: var(--radius-xs); }
.ss-chip--lg { min-height: var(--tap-min); padding: 0 14px; font-size: 14px; }
.ss-chip__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--swatch, var(--bg)); flex: none; }
.ss-chip__remove { font-weight: 400; }
.ss-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }

/* カラーの丸 */
.ss-swatch { width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: 1px solid var(--line-strong); background: var(--swatch, var(--bg)); cursor: pointer; padding: 0; box-sizing: border-box; }
.ss-swatch.is-selected, .ss-swatch[aria-pressed="true"] { border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }
.ss-swatch--sm { width: 28px; height: 28px; }
.ss-swatch--multi { background: conic-gradient(var(--swatch-red), var(--swatch-yellow), var(--swatch-green), var(--swatch-blue), var(--swatch-purple), var(--swatch-red)); }
/* カラーで絞る（色の丸＋色名） */
.ss-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: var(--space-8); }
.ss-colors__item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--ink); text-decoration: none; text-align: center; }
.ss-colors__item.is-on .ss-swatch { border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--surface); }
.ss-colors__item.is-on { font-weight: 700; }
.ss-colors__count { font-size: 12px; color: var(--ink-muted); }

/* ---------- フォーム ---------- */
.ss-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.ss-input, .ss-select { height: var(--tap-min); padding: 0 var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 400; box-sizing: border-box; }
.ss-select--sm, .ss-input--sm { height: var(--chip-height); }
.ss-check { display: inline-flex; align-items: center; gap: var(--space-8); min-height: 32px; font-size: 14px; }
.ss-check input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }

/* ---------- カード ---------- */
.ss-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-16); }
.ss-card--link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.ss-card--link:hover { border-color: var(--line-strong); }
.ss-img { background: var(--bg); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ink-muted); font-size: 12px; }
.ss-img img { width: 100%; height: 100%; object-fit: contain; }

/* 商品カード（一覧の行） */
.ss-product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-16); display: flex; flex-wrap: wrap; gap: var(--space-16); }
.ss-product__img { width: 140px; height: 105px; flex: none; }
.ss-product__body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-product__brand { font-size: 12px; color: var(--ink-muted); }
.ss-product__name { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.ss-product__price { flex: 1 1 200px; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); text-align: right; }
.ss-product__note { font-size: 12px; color: var(--ink-muted); }
/* グリッド表示 */
.ss-product--grid { flex-direction: column; flex-wrap: nowrap; gap: var(--space-8); padding: 14px; }
.ss-product--grid .ss-product__body { flex: none; }
.ss-product--grid .ss-product__img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.ss-product--grid .ss-product__price { flex: none; flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; margin-top: auto; }

/* ランキングの行 */
.ss-rank { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px var(--space-16); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); }
.ss-rank__no { font-family: var(--font-num); font-weight: 700; font-size: 32px; width: 44px; text-align: center; }

/* 統計タイル */
.ss-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-12); }
.ss-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px var(--space-16); display: flex; flex-direction: column; gap: var(--space-4); }
.ss-stat__label, .ss-stat__note { font-size: 12px; color: var(--ink-muted); }

/* ---------- 表 ---------- */
.ss-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ss-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ss-table th, .ss-table td { padding: 10px var(--space-12); text-align: left; vertical-align: middle; }
.ss-table thead th { background: var(--line); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ss-table tbody tr { border-top: 1px solid var(--bg); }
.ss-table__shop { font-weight: 700; }
.ss-table__mall { font-size: 12px; color: var(--ink-muted); font-weight: 400; }

/* サイズ×カラーの価格表 */
.ss-matrix { width: 100%; border-collapse: collapse; font-size: 14px; text-align: center; }
.ss-matrix th { padding: 10px var(--space-12); font-size: 12px; color: var(--ink); }
.ss-matrix thead th { background: var(--line); }
.ss-matrix tbody th { text-align: left; color: var(--ink); font-size: 14px; }
.ss-matrix tbody tr { border-top: 1px solid var(--bg); }
.ss-matrix td { padding: 6px; }
.ss-matrix__cell { display: block; padding: var(--space-8) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 18px; color: var(--ink); text-decoration: none; }
.ss-matrix__cell:hover { background: var(--bg); }
.ss-matrix__cell.is-cheapest { background: var(--saiyasu-soft); font-weight: 700; }
.ss-matrix__cell.is-best { background: var(--saiyasu); color: var(--ink); font-weight: 700; }
.ss-matrix__cell.is-selected { outline: 2px solid var(--ink); outline-offset: -2px; }
.ss-matrix__cell.is-none { color: var(--line-strong); pointer-events: none; }

/* ---------- 価格推移グラフ ---------- */
.ss-chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.ss-chart svg { width: 100%; height: auto; display: block; }
.ss-chart__axis { stroke: var(--line-strong); fill: none; }
.ss-chart__line { stroke: var(--ink); stroke-width: 3; fill: none; }
.ss-chart__line--eff { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 4; }
.ss-chart__band { fill: var(--cat-soft); }
.ss-chart__low { fill: var(--saiyasu); stroke: var(--ink); }
.ss-chart__text { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-sans); }
.ss-chart__tick { stroke: var(--line-strong); }
.ss-chart__grid { stroke: var(--line); }
.ss-chart__month { fill: var(--ink-muted); font-size: 12px; font-family: var(--font-sans); text-anchor: middle; }
.ss-chart__year { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font-sans); text-anchor: middle; }
.ss-legend { display: flex; flex-wrap: wrap; gap: var(--space-16); font-size: 12px; color: var(--ink-muted); }
.ss-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.ss-legend__key { width: 18px; height: 3px; background: var(--ink); }
.ss-legend__key--eff { height: 0; background: none; border-top: 2px dashed var(--line-strong); }
.ss-legend__key--band { width: 14px; height: 10px; background: var(--cat-soft); }

/* ---------- 見出し ---------- */
/* 見た目は ss-h1〜ss-h4（tokens.css）。要素の h1〜h4 と同じレベルのクラスを付ける */
.ss-page h1, .ss-page h2, .ss-page h3, .ss-page h4 { margin: 0; text-wrap: balance; }
.ss-h-sub { font-size: 13px; font-weight: 400; color: var(--ink-muted); margin-left: var(--space-8); }
/* 見出しの飾り：カテゴリカラー（cat）で強弱をつける。文字の色は ink のまま */
.ss-h1::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--cat); }
.ss-h2 { position: relative; padding-left: 14px; }
.ss-h2::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 5px; border-radius: 3px; background: var(--cat); }
.ss-h3 { position: relative; padding-left: 16px; }
.ss-h3::before { content: ""; position: absolute; left: 0; top: calc(.75em - 4px); width: 8px; height: 8px; border-radius: 2px; background: var(--cat); }
.ss-h--plain { padding-left: 0; }
.ss-h--plain::before, .ss-h--plain::after { display: none; }

/* ---------- 見出し・セクション ---------- */
.ss-section { display: flex; flex-direction: column; gap: var(--space-12); }
.ss-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-8); }
.ss-section__head h2 { margin: 0; }
.ss-section__sub { font-size: 13px; font-weight: 400; color: var(--ink-muted); }
.ss-ruled { margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }

/* ---------- お知らせ・在庫切れ ---------- */
.ss-notice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px var(--space-16); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); font-size: 14px; }
.ss-notice__text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.ss-notice__text strong { font-size: 15px; }

/* ---------- 絞り込みパネル ---------- */
.ss-filter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-16); display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; }
.ss-filter__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-filter__group legend, .ss-filter__title { font-size: 14px; font-weight: 700; margin-bottom: 6px; padding: 0; }
.ss-filter__link { display: flex; justify-content: space-between; align-items: center; min-height: 36px; font-size: 14px; color: var(--ink); }
.ss-filter__count { font-size: 12px; color: var(--ink-muted); display: inline-block; text-decoration: none; }

/* ---------- ページ送り ---------- */
.ss-pager { display: flex; justify-content: center; gap: var(--space-8); padding: var(--space-8); }
.ss-pager a { min-width: var(--tap-min); height: var(--tap-min); padding: 0 var(--space-12); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; box-sizing: border-box; }
.ss-pager a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 700; }

/* ---------- 比較バー ---------- */
.ss-comparebar { position: sticky; bottom: 0; background: var(--ink); color: var(--surface); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-16); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-12); font-size: 14px; }

/* ---------- SPで出すもの ---------- */
/* 絞り込み・並び替えのバー（一覧ページの上、SPだけ） */
.ss-filterbar { display: none; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: var(--space-8) 0; gap: var(--space-8); }
.ss-filterbar .ss-btn { flex: 1 1 0; }
/* 画面下に固定するCVバー（モデル詳細・SKUページ、SPだけ） */
.ss-cvbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--surface); border-top: 1px solid var(--line); padding: var(--space-8) max(var(--space-16), env(safe-area-inset-right, 0px)) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)) max(var(--space-16), env(safe-area-inset-left, 0px)); align-items: center; gap: var(--space-12); }
.ss-cvbar__price { display: flex; flex-direction: column; line-height: 1.2; }
.ss-cvbar__price small { font-size: 12px; color: var(--ink-muted); }
.ss-cvbar .ss-btn--cv { flex: 1 1 auto; }
/* 横にスクロールするチップの列 */
.ss-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ss-chips--scroll::-webkit-scrollbar { display: none; }

/* ---------- レスポンシブ（640px以下＝SP） ---------- */
@media (max-width: 640px) {
  .ss-page { font-size: 15px; }
  .ss-hide-sp { display: none !important; }
  .ss-show-sp { display: revert; }
  .ss-stack { gap: var(--space-24); }
  .ss-h1 { font-size: 22px; }
  .ss-h2 { font-size: 18px; }
  .ss-h3 { font-size: 16px; }

  /* ヘッダー：1行目 ロゴ＋マイサイズ、2行目 検索、3行目 メニュー（横スクロール） */
  .ss-header__inner { gap: var(--space-8) var(--space-12); padding-block: var(--space-8); }
  .ss-header__logo { flex: 1 1 auto; }
  .ss-header__size { order: 2; min-height: 36px; padding: 0 var(--space-12); }
  .ss-header__search { order: 3; flex-basis: 100%; }
  .ss-header__nav, .ss-gnav__panel { display: none !important; }
  .ss-header__menu { display: inline-flex; order: 2; align-items: center; min-height: 36px; padding: 0 var(--space-12); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: none; color: var(--surface); font: inherit; font-size: 13px; }
  .ss-crumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .ss-searchband__inner { padding: var(--space-24) var(--space-16); }

  /* 最安値ボックス：CVは横いっぱい、補助ボタンは半分ずつ */
  .ss-pricebox__actions .ss-btn--cv { flex-basis: 100%; }
  .ss-pricebox__actions .ss-btn--outline { flex: 1 1 0; padding-inline: var(--space-8); }
  .ss-cvbar { display: flex; }

  /* 商品カード（行）：画像を小さく、価格は名前の下に */
  .ss-product { gap: var(--space-12); padding: var(--space-12); }
  .ss-product__img { width: 96px; height: 72px; }
  .ss-product__body { flex-basis: calc(100% - 108px); }
  .ss-product__name { font-size: 16px; }
  .ss-product__price { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: var(--space-8); text-align: left; }
  .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .ss-product--grid { padding: var(--space-8); }
  .ss-product--grid .ss-price--lg { font-size: 22px; }

  /* ランキング：ボタンは横いっぱい */
  .ss-rank { gap: var(--space-12); padding: var(--space-12); }
  .ss-rank__no { font-size: 24px; width: 28px; }
  .ss-rank .ss-btn--cv { flex-basis: 100%; }

  /* ショップ一覧：表をカードの縦積みに（.ss-table--stack） */
  .ss-table--stack { min-width: 0 !important; }
  .ss-table--stack thead { display: none; }
  .ss-table--stack tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-12); padding: var(--space-12); }
  .ss-table--stack td { padding: 0; display: flex; gap: var(--space-8); align-items: baseline; font-size: 13px; }
  .ss-table--stack td[data-label]::before { content: attr(data-label); color: var(--ink-muted); font-size: 12px; min-width: 5em; }
  .ss-table--stack td.ss-price { font-size: 16px; }
  .ss-table--stack td.ss-price--md { font-size: 20px; }
  .ss-table--stack td:first-child { grid-column: 1 / -1; display: block; margin-bottom: var(--space-4); }
  .ss-table--stack td:last-child { grid-column: 1 / -1; margin-top: var(--space-8); }
  .ss-table--stack td:last-child .ss-btn { width: 100%; min-height: var(--tap-min); }

  /* サイズ×カラー表：横スクロール、サイズの列を固定 */
  .ss-matrix tbody th, .ss-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .ss-matrix thead th:first-child { background: var(--line); }
  .ss-matrix__cell { font-size: 16px; }

  /* 統計タイル・グラフ */
  .ss-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .ss-stat .ss-price--lg { font-size: 22px; }
  .ss-chart { padding: var(--space-12); }

  /* 絞り込みパネル：ページ上部のバーから開く全画面シート */
  .ss-filterbar { display: flex; }
  .ss-filter { display: none; }
  .ss-filter.is-open { display: flex; position: fixed; inset: 0; z-index: 20; border-radius: 0; overflow-y: auto; padding: calc(var(--space-16) + env(safe-area-inset-top, 0px)) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); }

  /* 比較バー：画面下いっぱい */
  .ss-comparebar { border-radius: 0; margin-inline: calc(var(--space-16) * -1); }

  .ss-footer__inner { padding: var(--space-24) var(--space-16) var(--space-16); gap: var(--space-16); }
  .ss-has-cvbar .ss-footer__inner { padding-bottom: calc(var(--space-16) + 80px); }
  .ss-footer__brand { max-width: none; flex-basis: 100%; }
  .ss-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
  .ss-footer__bottom { flex-direction: column; align-items: flex-start; }
  .ss-pager a:not([aria-current]):not(:last-child):not(:first-child) { display: none; }
}