/* ===================================================================
   SORA CardShop B2B — 検証用テーマ（本番には置かない）
   方針A「ホワイト × ライトブルー」の精度を上げた版。

   層の構成
     0  トークン      色・型・余白・角丸・影
     1  下地とリズム  本文の地、セクション間隔、コンテナ幅
     2  タイポグラフィ 見出し階層・本文・ラベル・数字
     3  分離の規則    面と罫線をどこに使い、どこで余白に任せるか
     4  部品          ボタン・入力・チップ・表
     5  画面          ヘッダー/フッター/トップ/カタログ/商品/カート/PSA10

   この層順でしか書かない。あとから下に例外を積み増さないこと。
   style.css のあとに読み込み、<link> 1行を外せば元に戻る。
   =================================================================== */


/* ═══ 0. トークン ═══════════════════════════════════════════════ */

:root {
  /* 面。白が主役で、淡いブルーは「意味がある時だけ」使う予算制の色 */
  --c-white:    #FFFFFF;
  --c-tint:     #F2F7FC;   /* ヒーローと合計欄など、数えるほどの箇所だけ */
  --c-tint-2:   #DCEBFA;   /* 選択中・強調。広い面には使わない */
  --c-well:     #FAFBFD;   /* 商品画像の下地。白い箱に見えない程度の差 */

  /* 罫線。従来は #DCEBFA を全部の枠に使っていて青い線が目立ちすぎたので、
     中立で極薄のものに替え、淡いブルーは意味のある色として温存する */
  --c-rule:     #E8EEF5;
  --c-rule-2:   #D4DFEA;

  /* 文字。濃さを3段に分け、ラベルまで真っ黒にしない */
  --c-ink:      #28333F;   /* 本文 */
  --c-ink-2:    #55657A;   /* 副文・説明 */
  --c-ink-3:    #607488;   /* ラベル・補助。白地で4.8:1（4.5以上を確保） */
  --c-head:     #14365C;   /* 見出し（ネイビーは文字にだけ） */

  /* 操作 */
  --c-blue:     #3478D4;
  --c-blue-dk:  #255FB0;
  --c-blue-bg:  rgba(52,120,212,0.06);

  /* 意味を持つ色。塗りつぶしではなく文字と点で示す */
  --c-ok:       #0F6B52;
  --c-warn:     #8A5A10;
  --c-ng:       #A33232;

  /* ブランドの金。PSA10（グレーディング品）だけに使い、
     通常カタログと質を分ける */
  --c-gold:     #96721F;   /* 白地で4.5:1。金の印象を保てる範囲で濃く */
  --c-gold-lt:  #E8D9B0;

  /* 型。7段で止める。これ以外のサイズを新しく作らない */
  --t-display:  clamp(40px, 5.6vw, 64px);
  --t-title:    clamp(26px, 3.0vw, 34px);
  --t-section:  20px;
  --t-lead:     17px;
  --t-body:     15px;
  --t-small:    13px;
  --t-label:    11px;

  /* 余白。4の倍数で、セクション間は大きく取る */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

  /* 角丸。直角3pxだけだったので、操作面にだけ丸みを与える */
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* 影。輪郭の代わりに、浮いているものにだけ薄く */
  --sh-1: 0 1px 2px rgba(20,54,92,0.05);
  --sh-2: 0 10px 30px -12px rgba(20,54,92,0.22);

  /* stage2-text-contrast.css が参照している変数。これまでは design-system.css が
     持っていたが、その読み込みをやめたので、テーマの文字色に揃えてここで持つ。
     どちらも白地で4.5:1以上（#55657A=5.95 / #607488=4.83）。 */
  --c-text-muted:  var(--c-ink-2);
  --c-text-subtle: var(--c-ink-3);

  /* 既存 style.css の変数へ橋渡し（個別に上書きして回らないため） */
  --accent: var(--c-blue);    --accent-dk: var(--c-blue-dk);
  --accent-lt: #6AA3E8;       --accent-bg: var(--c-blue-bg);
  --accent-glow: rgba(52,120,212,0.14);
  --gold: var(--c-blue);      --gold-dk: var(--c-blue-dk);
  --gold-bg: var(--c-blue-bg);--gold-glow: rgba(52,120,212,0.14);
  --bg: var(--c-white);       --surface: var(--c-white);
  --surface-2: var(--c-tint); --surface-3: var(--c-tint-2);
  --border: var(--c-rule);    --border-2: var(--c-rule-2);
  --ink: var(--c-ink);        --ink-2: var(--c-head);
  --body: var(--c-ink);       --text: var(--c-ink);
  --muted: var(--c-ink-2);    --text-muted: var(--c-ink-2);
  --dim: var(--c-ink-3);      --text-dim: var(--c-ink-3);
  --navy: var(--c-head);      --navy-light: #1E4A78;
  --navy-2: #1E4A78;          --navy-3: #33618F;
  --blue: var(--c-blue);      --blue-light: #6AA3E8;
  --blue-hover: var(--c-blue-dk); --blue-glow: rgba(52,120,212,0.10);
  --radius: var(--r-sm);      --radius-lg: var(--r);
  --radius-sm: 4px;           --radius-xl: var(--r-lg);
}


/* ═══ 1. 下地とリズム ═══════════════════════════════════════════ */

body {
  background: var(--c-white);
  color: var(--c-ink);
  font-size: var(--t-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(52,120,212,0.18); }

/* セクション間は余白で分ける。区切り線や色の帯を増やさない */
.stats-section,
.features-section,
.preorder-section,
.category-section { padding-block: var(--s8); }

@media (max-width: 768px) {
  .stats-section,
  .features-section,
  .preorder-section,
  .category-section { padding-block: var(--s7); }
}


/* ═══ 2. タイポグラフィ ═════════════════════════════════════════ */

/* 見出しは大きく・詰めて、本文は小さく・ゆったり。差をはっきり付ける */
.hero-title {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--c-head);
  text-wrap: balance;
}
.page-title,
.product-detail-title,
h1 {
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--c-head);
}
.category-label,
.preorder-subhead,
h2 {
  font-size: var(--t-section);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-head);
}
.hero-desc,
.page-subtitle,
.lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* ラベルは小さく・字間を開ける。太字を乱用しない */
.hero-badge,
.stat-label,
.section-eyebrow,
.sidebar-section-label,
.sidebar-label,
.currency-label,
.form-group label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* 数字は桁を揃える。卸サイトは価格と数量が主役 */
.price-jpy, .price-converted, .stat-number,
.cart-cell-price, .cart-cell-sub, .summary-row, .total,
.psa-count, input[type="number"] {
  font-variant-numeric: tabular-nums;
}


/* ═══ 3. 分離の規則 ═════════════════════════════════════════════ */
/*
   既定は「面なし・枠なし」。余白で分ける。
   面を敷くのは   : ヒーロー、合計欄、選択中の項目、注意書き1つ
   罫線を引くのは : 表の行、仕様の行など、情報が密で順番がある所だけ
   それ以外の箱は作らない。
*/

/* 以前は全要素に青い1px枠が付いていた。中立の極薄に統一する */
hr,
.footer-top,
.catalog-sortbar,
.psa-tabs { border-color: var(--c-rule); }

/* ページ見出しの縦線はやめ、サイズと余白だけで見出しを立てる */
.page-header {
  border-left: none;
  padding-left: 0;
  margin-bottom: var(--s7);
}
.page-subtitle { margin-top: var(--s2); }


/* ═══ 4. 部品 ═══════════════════════════════════════════════════ */

/* --- ボタン：形を1つに統一し、強さだけ3段 --- */
.btn,
.btn-hero-primary,
.btn-hero-secondary,
.btn-register {
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0;
  padding: 11px 22px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-navy, .btn-accent, .btn-gold, .btn-register, .btn-hero-primary {
  background: var(--c-blue);
  color: var(--c-white);
  border: 1px solid var(--c-blue);
}
.btn-navy:hover, .btn-accent:hover, .btn-gold:hover,
.btn-register:hover, .btn-hero-primary:hover {
  background: var(--c-blue-dk);
  border-color: var(--c-blue-dk);
  color: var(--c-white);
  opacity: 1;
}
.btn-outline, .btn-hero-secondary {
  background: var(--c-white);
  color: var(--c-blue);
  border: 1px solid var(--c-rule-2);
}
.btn-outline:hover, .btn-hero-secondary:hover {
  border-color: var(--c-blue);
  color: var(--c-blue-dk);
  background: var(--c-white);
}
.btn-ghost { color: var(--c-ink-2); }
.btn-ghost:hover { background: var(--c-tint); color: var(--c-head); }

/* 削除は目的ではないので、赤い塊をやめて控えめな文字にする。
   押し間違いを減らしつつ、必要な時には見つかる強さを残す */
.btn-danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--c-ink-3);
  font-weight: 500;
  padding: 7px 12px;
}
.btn-danger:hover {
  background: transparent;
  border-color: rgba(163,50,50,0.28);
  color: var(--c-ng);
}

/* --- 入力欄：枠は薄く、合焦したときだけ青 --- */
input, select, textarea {
  background: var(--c-white);
  border: 1px solid var(--c-rule-2);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: var(--t-small);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-blue);
  outline: 2px solid rgba(52,120,212,0.18);
  outline-offset: 0;
}
input::placeholder, textarea::placeholder { color: var(--c-ink-3); }

/* --- 状態の表示：塗りバッジをやめ、点 + 文字にする ---
   箱を減らしつつ、在庫と予約の違いは色で残す（発注の判断に要る） */
.oos-badge,
.low-stock-badge,
.preorder-badge {
  position: absolute;
  top: var(--s3);
  left: var(--s3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(6px);
  border: none;
  border-radius: var(--r-pill);
  padding: 3px 10px 3px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  box-shadow: var(--sh-1);
}
.oos-badge::before,
.low-stock-badge::before,
.preorder-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.oos-badge        { color: var(--c-ink-2); }
.oos-badge--ask   { color: var(--c-ok); }
.low-stock-badge  { color: var(--c-warn); }
.preorder-badge   { color: var(--c-blue-dk); }

/* 新着は状態ではなく告知なので、点を付けず青で塗る。右上に置いて
   左上の在庫チップとぶつからないようにする */
.new-badge {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  z-index: 2;
  background: var(--c-blue);
  color: var(--c-white);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* 在庫の表示も塗りをやめ、点 + 文字に揃える（カタログのチップと同じ考え方） */
.stock-tag {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: var(--t-small);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stock-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.stock-tag.in-stock  { color: var(--c-ok); }
.stock-tag.low-stock { color: var(--c-warn); }
.stock-tag.oos       { color: var(--c-ink-2); }

/* 価格の代わりに出る「要問い合わせ」。価格と同じ大きさで並びを崩さない */
.price-ask {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ok);
  letter-spacing: -0.02em;
}

/* --- 注意書き：1ページに1つまで。枠線は左の細い線だけ --- */
.psa-lead-notice,
.notice {
  background: var(--c-tint);
  border: none;
  border-left: 2px solid var(--c-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s4) var(--s5);
}

/* --- 表：縦罫線を全部やめ、行の区切りだけ残す --- */
table { border-collapse: collapse; }
table th,
.cart-table th {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-rule-2);
  color: var(--c-ink-3);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: var(--s3);
}
table td {
  border: none;
  border-bottom: 1px solid var(--c-rule);
}


/* ═══ 5. 画面 ═══════════════════════════════════════════════════ */

/* ───── ヘッダー ─────
   高さ48pxと既存のナビ動作はそのまま。間隔と文字の強弱だけ整える */
.site-header {
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-rule);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.96);
  border-bottom-color: var(--c-rule-2);
}
.header-logo { gap: 9px; margin-right: var(--s6); }
.header-logo .logo-sora { color: var(--c-head); font-weight: 700; letter-spacing: -0.02em; }
.header-logo .logo-shop { color: var(--c-ink-3); font-weight: 400; letter-spacing: -0.01em; }
.header-nav .nav-link {
  color: var(--c-ink-2);
  font-weight: 500;
  font-size: var(--t-small);
}
.header-nav .nav-link:hover { color: var(--c-head); }
.header-nav .nav-link.active { color: var(--c-blue); }
.hamburger span { background: var(--c-ink); }

/* ───── トップ：ヒーロー ─────
   中央揃えの一列をやめ、左に文章・右に実際の商品を置く。
   最初の画面で「何を売っているか」が写真で伝わるようにする */
.hero {
  background: linear-gradient(180deg, var(--c-tint) 0%, var(--c-white) 78%);
  min-height: 0;
  padding: var(--s8) var(--s7) var(--s7);
  text-align: left;
  display: block;
}
.hero-content {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
}
/* 商品写真が出せる時だけ2段組にする。出せない時に右側が
   大きく空くのを避ける */
.hero-content:has(.hero-shelf) {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.hero-copy { max-width: 30rem; }
.hero-badge {
  display: block;
  margin-bottom: var(--s5);
  color: var(--c-blue-dk);
}
.hero-badge::before, .hero-badge::after { display: none; }
.hero-desc { margin: var(--s4) 0 var(--s6); max-width: 26rem; }
.hero-actions { justify-content: flex-start; gap: var(--s3); }

/* 右側：実際の商品写真を段違いに3点。枠も影も付けず、商品だけを見せる */
.hero-shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  align-items: center;
}
/* 商品写真はどれも白背景で撮られているので、淡いブルーの地に置くと
   白い矩形が浮いて見える。白のタイルとして揃え、影で段差を作る */
.hero-shelf figure {
  margin: 0;
  background: var(--c-white);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  padding: var(--s3);
}
.hero-shelf img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 中央を一段大きく、左右を下げる。棚に並べたような奥行きを出す */
.hero-shelf figure:nth-child(1) { transform: translateY(var(--s5)) scale(0.94); }
.hero-shelf figure:nth-child(2) { transform: translateY(calc(-1 * var(--s3))); z-index: 1; }
.hero-shelf figure:nth-child(3) { transform: translateY(var(--s4)) scale(0.94); }

@media (max-width: 900px) {
  .hero { padding: var(--s7) var(--s5) var(--s6); }
  /* :has() のほうが詳細度が高いので、こちらも同じ形で打ち消す */
  .hero-content,
  .hero-content:has(.hero-shelf) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }
  .hero-copy { max-width: none; }
  .hero-desc { max-width: none; }
  /* 文章の下に横一列。段違いはやめ、サイズを揃える */
  .hero-shelf { gap: var(--s3); }
  .hero-shelf figure:nth-child(1),
  .hero-shelf figure:nth-child(2),
  .hero-shelf figure:nth-child(3) { transform: none; }
  .hero-actions > * { flex: 0 0 auto; }
}

/* ───── トップ：配送・決済の表示 ─────
   ロゴは縦横比がばらばらなので、幅ではなく「高さ」を揃える。
   ロゴごとに字面の大きさが違うため、見た目が同じ大きさに見えるよう
   箱の高さを一定にして中で上下中央に置く。 */
.pay-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
}
.pay-mark {
  display: inline-flex;
  align-items: center;
  height: 21px;              /* ここを変えると全部まとめて変わる */
  opacity: 0.78;
  transition: opacity 0.15s;
}
.pay-mark:hover { opacity: 1; }
.pay-mark img {
  height: 100%;
  width: auto;
  display: block;
}
/* ロゴの使用許可が要るものは、同じ高さの文字で並べて行を揃える */
.pay-mark--word {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-ink-2);
}

/* ───── トップ：実績の数字 ─────
   箱に入れず、余白と罫線1本で区切る */
.stats-section { background: var(--c-white); }
.stats-grid {
  max-width: 1280px; margin: 0 auto;
  border-top: 1px solid var(--c-rule);
  padding-top: var(--s7);
  gap: var(--s6);
}
.stats-grid > * { border: none !important; }
.stat-number {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--c-head);
  line-height: 1.05;
}
.stat-label { margin-top: var(--s2); }

/* ───── カタログ ─────
   商品105件がそれぞれ「枠付きカード + 色付き画像箱」の二重の箱だった。
   枠と背景を外し、余白で分ける。視線は写真 → 商品名 → 価格の順に落とす */
/* 列は 1fr 指定だが、1fr は minmax(auto, 1fr) なので中身が長いとその列だけ広がる。
   幅が違うと画像枠（比率固定）の高さも変わり、カードがずれる。最小幅を0にして
   どの列も必ず同じ幅にする */
.product-grid { gap: var(--s6) var(--s5); }
/* 列数そのものは画面幅ごとの既存指定に任せ、子の最小幅だけ0にする */
.product-grid > *,
.product-grid .product-card { min-width: 0; }

.product-card-link { display: block; }
.product-card {
  background: transparent;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.18s ease;
}
.product-card-link:hover .product-card { transform: translateY(-3px); }

.product-img-wrap {
  background: var(--c-well);
  border: none;
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow 0.18s ease;
}
.product-card-link:hover .product-img-wrap { box-shadow: var(--sh-2); }
.product-img-placeholder {
  color: var(--c-ink-3);
  font-size: var(--t-small);
  background: var(--c-well);
}

/* カードの高さを揃える。
   商品名は1〜3行とまちまちで、「Release:」の行も商品によって有無が変わる。
   そのままだと価格と購入ボタンの位置がカードごとにずれるので、
   (1) 名前は行数ぶんの高さを必ず確保し、(2) 価格から下はカードの下端に寄せる。 */
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-body {
  padding: var(--s3) var(--s1) 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink);
  letter-spacing: -0.005em;
  min-height: calc(1.5em * 2);      /* 既定は2行ぶん */
}
/* カタログ本体は3行まで折り返す指定なので、確保する高さも3行ぶんに合わせる
   （ここが2行のままだったのが、不揃いのいちばんの原因） */
.catalog-main .product-name { min-height: calc(1.5em * 3); }

/* 価格より下をひとかたまりとして下端へ。間に入る「Release:」行などの差は、
   名前と価格のあいだの余白が吸収する */
.product-body > .price-row,
.product-body > .price-ask,
.product-body > .price-locked,
.product-body > .price-sold,
.product-body > .price-tba { margin-top: auto; }

.price-sold { font-size: 14px; font-weight: 700; color: var(--c-ng); }
.price-sold--lg { font-size: 15px; font-weight: 800; }
.price-tba { font-size: 13px; font-weight: 600; font-style: italic; color: var(--c-warn); }
/* 価格を商品名より強くする。卸では価格が判断の中心 */
.price-row { margin-top: var(--s2); align-items: baseline; gap: var(--s2); }
.price-jpy {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-head);
  letter-spacing: -0.02em;
}
.price-converted { font-size: var(--t-small); color: var(--c-ink-3); font-weight: 400; }

/* 見出しは余白で立てる。左の色バーをやめる */
.category-label,
.preorder-subhead {
  border-left: none;
  border-bottom: none;
  padding: 0;
  margin: 0 0 var(--s5);
  text-transform: none;
}
.preorder-subhead span,
.category-label span {
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--c-ink-3);
  letter-spacing: 0;
}
/* 予約セクションの頭。商品より目立たせない小さなラベルにする */
.section-eyebrow {
  color: var(--c-warn);
  margin-bottom: var(--s5);
}
.preorder-card { border: none !important; }

/* サイドバー：ひとつずつ箱に入っていたのをやめ、文字の一覧にする */
.catalog-sidebar { border-right: 1px solid var(--c-rule); }
.sidebar-cat-link {
  border: none;
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  font-size: 14px;
  font-weight: 400;
  padding: 7px var(--s3);
}
.sidebar-cat-link:hover { background: var(--c-tint); color: var(--c-head); }
.sidebar-cat-link.active {
  background: var(--c-tint-2);
  color: var(--c-head);
  font-weight: 600;
}
.catalog-sortbar {
  border-bottom: 1px solid var(--c-rule);
  border-top: none;
  background: transparent;
}

/* 「すべて表示」ボタン。
   以前は白地に細い線・小さな青文字で、ただの飾りの線に見えた。お客様が「商品はこれだけ」と
   思い込んだため（2026-10-28）、淡い水色の面 + 青の枠 + 紺の太字にし、現在地
   （Showing 16 of 32）を 2 行目に出す。「Add to Cart」の塗りつぶしの青とは別物に見せる。 */
.pg-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: var(--s6) 0 0;          /* 下はセクションの余白に任せる */
  padding: 16px 20px;
  border: 1.5px solid var(--c-blue);
  border-radius: var(--r-sm);
  background: var(--c-tint-2);
  color: var(--c-head);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pg-more-main {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.pg-more-main::after {            /* 下向きの山形: まだ下に続くことを示す */
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0 3px 10px;
  border-right: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: rotate(45deg);
}
.pg-more-sub {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-ink-2);
}
.pg-more:hover {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}
.pg-more:hover .pg-more-sub { color: var(--c-white); }
.pg-more:hover .pg-more-main::after { border-color: var(--c-white); }
@media (max-width: 768px) {
  .pg-more { margin: var(--s5) 0 0; padding: 14px 16px; min-height: 56px; }
  .pg-more-main { font-size: 16px; }
}

/* ───── 商品詳細 ─────
   写真を主役にし、購入に要る情報（価格 → 在庫 → 操作）を一列に。
   発売日・EAN は箱をやめ、罫線1本ずつの定義リストにする */
.product-detail-img-wrap {
  background: var(--c-well);
  border: none;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.product-detail-grid { gap: var(--s8); align-items: start; }
.spec-list { margin: var(--s5) 0 var(--s6); }
.spec-list--top { margin-top: 0; }
.spec-list > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--c-rule);
  font-size: var(--t-small);
}
.spec-list dt, .spec-list .k { color: var(--c-ink-3); }
.spec-list dd, .spec-list .v { color: var(--c-ink); font-weight: 500; margin: 0; }

/* ───── カート ─────
   表の罫線と背景を削り、金額の階層だけで読ませる */
.cart-table-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
}
.cart-table th { padding-bottom: var(--s3); }
.cart-table td { padding-block: var(--s5); }
.cart-cell-name { font-size: 14px; font-weight: 500; color: var(--c-ink); }
.cart-cell-price { color: var(--c-ink-2); }
.cart-cell-sub { font-weight: 600; color: var(--c-head); }
.cart-cell-img img { border-radius: var(--r-sm); background: var(--c-well); }

.cart-summary {
  background: transparent;
  border: 1px solid var(--c-rule);
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.summary-row {
  border: none;
  padding-block: var(--s3);
  color: var(--c-ink-2);
  font-size: 14px;
}
.summary-row.total,
.cart-totals .total {
  border-top: 1px solid var(--c-rule-2);
  margin-top: var(--s3);
  padding-top: var(--s5);
  font-size: var(--t-section);
  font-weight: 700;
  color: var(--c-head);
}

/* ───── PSA10 ─────
   鑑定済みシングルは通常カタログと商品の質が違う。
   金の細い線と、広い余白、黒に近い見出しでプレミアム側に寄せる。
   金はここだけに使い、ブランドの格を担わせる */
.psa-hero {
  background: var(--c-white) !important;
  border-bottom: 1px solid var(--c-rule);
  padding: var(--s9) var(--s5) var(--s7) !important;
}
.psa-hero .eyebrow {
  color: var(--c-gold) !important;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.22em;
}
.psa-hero .eyebrow::after {
  content: '';
  display: block;
  width: 34px; height: 1px;
  background: var(--c-gold-lt);
  margin: var(--s3) auto 0;
}
.psa-hero h1 {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--c-head);
}
.psa-hero p { font-size: var(--t-lead) !important; color: var(--c-ink-2) !important; }
.psa-hero-search {
  border: 1px solid var(--c-rule-2) !important;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.psa-hero-search input { font-size: 15px; }
.psa-hero-search button {
  background: var(--c-head) !important;
  color: var(--c-white) !important;
  font-weight: 600 !important;
}
.psa-hero-search button:hover { background: #0E2745 !important; }
.psa-tab { font-size: 14px; font-weight: 500; color: var(--c-ink-2); }
.psa-tab.active {
  color: var(--c-head) !important;
  font-weight: 700;
  border-bottom-color: var(--c-gold) !important;
}
/* グレーディング品のカードは、金の細い下線で通常商品と区別する */
.psa-wrap .product-img-wrap { background: var(--c-white); box-shadow: inset 0 0 0 1px var(--c-rule); }
.psa-wrap .product-card-link:hover .product-img-wrap { box-shadow: inset 0 0 0 1px var(--c-gold-lt), var(--sh-2); }
.psa-wrap .price-jpy { color: var(--c-head); }
.psa-pager .current {
  background: var(--c-head) !important;
  border-color: var(--c-head) !important;
}

/* ───── 注文履歴 ─────
   追跡番号のボタンが何個も並ぶ注文で、注文番号が「ORD-／20261015-／008」と
   3行に折れていた。番号は折らず、ボタン側が折り返して残りの幅を使う。 */
.order-header { gap: var(--s4) var(--s5); }
.order-header > div:first-child { flex: none; }
.order-header > div:last-child { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
.order-id {
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ───── お問い合わせ ─────
   WhatsApp を主役に。FAQ への案内を先に置き、メールは最後に小さく添える。 */
.contact-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-block: 1px solid var(--c-rule);
  margin: 0 0 var(--s6);
}
.contact-lead p { margin: 0; flex: 1 1 18rem; color: var(--c-ink-2); }
.contact-lead .btn { flex: none; }

.contact-main { max-width: 34rem; }
.contact-main h2 {
  font-size: var(--t-title);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-head);
  margin: 0 0 var(--s4);
}
.contact-main > p { color: var(--c-ink-2); margin: 0 0 var(--s5); }

/* 「Ask for Price」から来たときに、送られる文面をそのまま見せる */
.contact-prefill {
  background: var(--c-tint);
  border-left: 2px solid var(--c-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s3) var(--s4);
  font-size: var(--t-small);
  color: var(--c-ink);
  margin: 0 0 var(--s5);
}
.contact-wa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #128C4A;
  border: 1px solid #128C4A;
  color: #fff;
  padding: 13px 26px;
  font-size: 15px;
}
.contact-wa:hover { background: #0E7540; border-color: #0E7540; color: #fff; }
.contact-number {
  font-size: var(--t-small);
  color: var(--c-ink-3);
  margin: var(--s3) 0 0;
  font-variant-numeric: tabular-nums;
}
.contact-email-note {
  margin: var(--s7) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--c-rule);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}
.contact-email-note a { color: var(--c-blue); text-decoration: underline; }

/* ───── フッター ─────
   淡いブルーの帯をやめ、白地に罫線1本。ページ本体と地続きにする */
footer {
  background: var(--c-white);
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-rule);
  padding-block: var(--s8) var(--s6);
}
footer span { color: var(--c-blue); }
footer a, .footer-col a, .footer-email { color: var(--c-ink-2); font-size: 14px; }
footer a:hover, .footer-col a:hover, .footer-email:hover { color: var(--c-blue); }
.footer-brand-name { color: var(--c-head); font-size: var(--t-section); font-weight: 700; }
.footer-address { color: var(--c-ink-3); }
.footer-col-title { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.12em; color: var(--c-ink-3); }
.footer-bottom { color: var(--c-ink-3); font-size: var(--t-small); }
.footer-top { border-bottom-color: var(--c-rule); }
.footer-social-icon {
  background: transparent;
  border: 1px solid var(--c-rule-2);
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
}
.footer-social-icon:hover { border-color: var(--c-blue); color: var(--c-blue); }

/* ───── ログイン画面の左パネル ───── */
.auth-left {
  background: var(--c-tint);
  color: var(--c-head);
  border-right: 1px solid var(--c-rule);
}
.auth-left * { color: inherit; }