/* ==EXP-DS1== 共通デザイントークン定義。ここは定義だけで、既存ルールの書き換えはしていない。 */
:root {
  /* 1) 文字サイズ階層 */
  --ds-fs-h1: 40px;   /* ページ最上位の見出し */
  --ds-fs-h2: 28px;   /* セクション見出し */
  --ds-fs-h3: 20px;   /* カード見出し・小見出し */
  --ds-fs-body: 16px; /* 本文 */
  --ds-fs-cap: 13px;  /* 補足・注記・ラベル */

  /* 2) 行間 */
  --ds-lh-tight: 1.25; /* 見出し（和文は字面が大きいため広め） */
  --ds-lh-base: 1.7;   /* 本文（長い文章を載せるため広め） */
  --ds-lh-snug: 1.4;   /* 補足・ボタン内・UIラベル */

  /* 3) 色（白背景での可読性を保証。補足色は 4.5:1 以上） */
  --ds-c-text: #1d1d1f;        /* 本文   白背景とのコントラスト比 16.8:1 */
  --ds-c-sub: #6e6e73;         /* 補足   白背景とのコントラスト比 5.07:1（旧 #888888 は 3.5:1 で不合格） */
  --ds-c-border: #d2d2d7;      /* 枠線 */
  --ds-c-bg: #ffffff;          /* 背景（基本面） */
  --ds-c-bg-sub: #f5f5f7;      /* 背景（沈めた面） */
  --ds-c-accent: #2977f2;      /* アクセント（塗り面・ボタン背景用）既存 --fa の既定値と同値 */
  --ds-c-accent-ink: #1f6fe5;  /* アクセント（白背景に文字/リンクとして置く用）白背景 4.70:1 */
  --ds-c-on-accent: #ffffff;   /* アクセント面の上に載せる文字色 */

  /* 4) 角丸と影（各1種＋強調1種） */
  --ds-radius: 12px;    /* 既定の角丸 */
  --ds-radius-lg: 18px; /* 大きめの角丸（カード用） */
  --ds-shadow: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --ds-shadow-lg: 0 8px 24px rgba(15,23,42,.12);
  /* 影は使いすぎない。既定は極薄1種、強調は本当に浮かせたい要素だけに限る。 */

  /* 5) 余白スケール（4の倍数・6段階） */
  --ds-sp-1: 4px;   /* アイコンと文字の隙間 */
  --ds-sp-2: 8px;   /* ラベルと入力欄 */
  --ds-sp-3: 16px;  /* 段落間・カード内の行間隔 */
  --ds-sp-4: 24px;  /* カードの内側余白 */
  --ds-sp-5: 48px;  /* セクション内の塊どうし／スマホのセクション間隔 */
  --ds-sp-6: 72px;  /* PCのセクション間隔 */

  /* 6) ボタン高さ（標準＋小） */
  --ds-btn-h: 48px;      /* 主ボタンの高さ（押しやすさ優先） */
  --ds-btn-h-sm: 36px;   /* 小さいボタンの高さ */
  --ds-btn-px: 24px;
  --ds-btn-px-sm: 16px;
}
/* ==/EXP-DS1== */
/* ==EXP-DS1C== 絶対配置キャンバス向けの縮小スケール
   EXP-DS1 の値は「箱が中身に合わせて伸びる」流し込みレイアウト向けの既定値。
   ビルダーで作る公開サイトは1つ1つの箱が固定の高さ(pc.h / mobile.h)を持つ絶対配置なので、
   同じ字面でも一回り小さい段が要る。実際のサイトデータと突き合わせて確定した値をここに置く。EXP-DS1 側は1つも書き換えていない。
   行間は両者で既に一致しているため作り直していない（--ds-lh-tight/base/snug をそのまま使う）。 */
:root {
  /* 7) 文字サイズ（キャンバス用。DS1 の小さい側を1段下げたもの） */
  --ds-fs-h1-c:    44px; /* ヒーロー見出し PC   （実データ 44px） */
  --ds-fs-h1-c-sp: 26px; /* ヒーロー見出し スマホ（実データ 26px） */
  --ds-fs-h2-c:    28px; /* セクション見出し    （DS1 --ds-fs-h2 と同値） */
  --ds-fs-h3-c:    19px; /* カード見出し・小見出し（DS1 20px の1px下） */
  --ds-fs-body-c:  14px; /* 本文                （DS1 16px の2px下） */
  --ds-fs-cap-c:   12px; /* 補足・注記・ラベル  （DS1 13px の1px下） */

  /* 8) 色（キャンバス用スレート系。かっこ内は背景に対するコントラスト比） */
  --ds-c-text-c:       #0f172a; /* 白地の本文・見出し   17.85:1 */
  --ds-c-sub-c:        #64748b; /* 白地の補足            4.76:1 */
  --ds-c-bg-dark:      #0b1220; /* 濃色帯・フッターの地           */
  --ds-c-text-on-dark: #cbd5e1; /* 濃色地の本文         12.61:1 */
  --ds-c-sub-on-dark:  var(--t802-sub, #64748b); /* 濃色地の補足          7.30:1
        ※白地に置くと 2.56:1 で国際基準を満たさない。白地の補足は --ds-c-sub-c を使うこと。 */
}
/* ==/EXP-DS1C== */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    font-family: 'Noto Sans JP', sans-serif;
    background: #f4f6fb;
    color: /* ==EXP-T1146== */ var(--ds-c-text-c, #0f172a) /* ==/EXP-T1146== */;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  #stage-wrap { position: relative; width: 100%; overflow: hidden; }
  #stage { position: relative; transform-origin: 0 0; }
/* ==EXP-T0916== 広い画面で版面(1200px)の左右にできる余白が「色の違う帯」に見える問題。
   版面いっぱいに敷かれた装飾の帯（ヒーロー/フッター等）だけを画面の端まで伸ばす。
   版面の幅と中央寄せ自体は変えない（レイアウトを崩さないため）。 */
#stage .ob.sb-fb916 {
  left: var(--sb-fb-l, 0px) !important;
  width: var(--sb-fb-w, 100%) !important;
}
/* ==/EXP-T0916== */
  .ob { position: absolute; }
  .ob, .ob * { box-sizing: border-box; }
  .ob a { color: inherit; text-decoration: none; display: block; width: 100%; height: 100%; }
  .ob-text {
    white-space: pre-wrap; word-break: break-word;
    margin: 0; padding: 0; text-decoration: none;
  }
/* ==EXP-T0564== 見出しタグ(h1〜h3)に差し替えても見た目が1pxも変わらないようにする。
   ブラウザ既定の h1{font-size:2em;font-weight:bold} を打ち消し、div だったときと同じ
   「親から継承」に戻す。文字サイズ・太さは描画側がインラインで指定するのでそちらが勝つ。 */
  h1.ob-text, h2.ob-text, h3.ob-text {
    font-size: inherit; font-weight: inherit; margin: 0; padding: 0;
  }
/* ==/EXP-T0564== */
/* ==EXP-T1239== interactive-demo のスマホ見出しを表示幅に合わせる */
@media (max-width: 480px) {
  #sbob_ob_itx_hd > .ob-text {
    font-size: clamp(28px, 8vw, 34px) !important;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
/* ==/EXP-T1239== */
  .ob-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; cursor: pointer; text-decoration: none;
    transition: transform .16s ease, filter .16s ease;
    /* builder の .ob-btnview と完全に同じメトリクスにする */
    margin: 0; padding: 0; line-height: 1.2;
    text-align: center; white-space: pre-wrap; word-break: break-word; box-sizing: border-box;
  }
  .ob-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
  /* リンク付きボタンは<a>になり .ob a { display:block } が勝ってしまうため、flex中央寄せを明示的に優先させる */
  .ob a.ob-btn { display: flex; }
  .ob img { width: 100%; height: 100%; display: block; }
  .ob iframe { width: 100%; height: 100%; border: 0; display: block; }
  .ob video, .ob audio { width: 100%; display: block; }
  .ob video { height: 100%; object-fit: cover; }
  .sb-form { width: 100%; height: 100%; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
  .sb-form h3 { font-size: 16px; font-weight: 800; }
  .sb-form label { font-size: 12px; font-weight: 700; color: #55617a; display: block; margin-bottom: 4px; }
  .sb-form input, .sb-form textarea {
    width: 100%; border: 1.5px solid #dbe4f2; border-radius: 10px; padding: 10px 12px;
    font-size: 14px; font-family: inherit; background: #fff; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .sb-form input:focus, .sb-form textarea:focus { border-color: var(--fa, #2977f2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa, #2977f2) 18%, transparent); }
  .sb-form textarea { min-height: 84px; resize: vertical; }
  /* ==EXP-FORM== */
  .sb-form select { width: 100%; padding: 10px 12px; border: 1.5px solid #dbe4f2; border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; }
  .sb-form-opts { display: flex; flex-wrap: wrap; gap: 8px 14px; }
  /* ==EXP-T1557== チェック項目はラベル全体を44px以上の押下領域にする */
  .sb-form-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: #334155; cursor: pointer; font-weight: 600; }
  .sb-form-opt input { accent-color: var(--fa, #2977f2); width: 15px; height: 15px; }
  .sb-form-consent { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: #55617a; line-height: 1.6; cursor: pointer; }
  /* ==/EXP-T1557== */
  .sb-form-consent input { accent-color: var(--fa, #2977f2); width: 15px; height: 15px; margin-top: 2px; flex: none; }
  .sb-form-miss { outline: 2px solid #ef4444; outline-offset: 2px; border-radius: 6px; }
  .sb-form button {
    border: 0; border-radius: 999px; padding: 12px 20px; font-size: 14px; font-weight: 800;
    color: #fff; background: var(--fa, #2977f2); cursor: pointer; font-family: inherit;
    transition: transform .15s ease, filter .15s ease;
  }
  .sb-form button:hover { transform: translateY(-1px); filter: brightness(1.07); }
  .sb-form .ok-msg { font-size: 14px; font-weight: 700; color: #16a34a; }

  /* ギャラリー */
  .sb-gallery { width: 100%; height: 100%; overflow: auto; display: grid; }
  .sb-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
  .sb-lightbox {
    position: fixed; inset: 0; z-index: 99999; background: rgba(10,14,25,.9);
    display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out;
  }
  .sb-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; }

  /* FAQ */
  .sb-faq { width: 100%; height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
  .sb-faq-item { border: 1.5px solid #e4eaf5; border-radius: 16px; background: #fff; overflow: hidden; }
  .sb-faq-q {
    padding: 13px 16px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 10px;
    user-select: none;
  }
  .sb-faq-q::before { content: 'Q'; color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); font-weight: 900; } /* ==EXP-RD== 読みやすさ */
  .sb-faq-q::after { content: '+'; margin-left: auto; font-weight: 900; color: var(--t802-sub, #64748b); transition: transform .2s ease; }
  .sb-faq-item.open .sb-faq-q::after { transform: rotate(45deg); }
  .sb-faq-a { display: none; padding: 0 16px 14px 38px; color: #475569; line-height: 1.8; white-space: pre-wrap; }
  .sb-faq-item.open .sb-faq-a { display: block; }

  /* テーブル */
  .sb-table { width: 100%; height: 100%; overflow: auto; }
  .sb-table table { width: 100%; border-collapse: collapse; background: #fff; }
  .sb-table th, .sb-table td { border: 1px solid #e4eaf5; padding: 9px 12px; text-align: left; }
  .sb-table th { background: color-mix(in srgb, var(--fa, #2977f2) 10%, #fff); font-weight: 800; }

  /* SNS */
  .sb-socials { width: 100%; height: 100%; display: flex; align-items: center; flex-wrap: wrap; }
  .sb-socials a { display: inline-flex; width: auto; height: auto; transition: transform .15s ease; }
  .sb-socials a:hover { transform: translateY(-3px); }
  .sb-socials svg { display: block; }

  /* マーキー */
  .sb-marquee { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; }
  .sb-marquee-inner { display: inline-flex; white-space: nowrap; will-change: transform; animation: sb-mq linear infinite; }
  .sb-marquee-inner span { padding-right: 60px; }
  @keyframes sb-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* 商品 */
  .sb-products { width: 100%; height: 100%; overflow: auto; display: grid; align-content: start; }
  /* ==EXP-T1439== スマホの商品カードを1列にして説明文の極端な縦長化を防ぐ */
  @media (max-width: 480px) {
    .sb-products { grid-template-columns: minmax(0, 1fr) !important; }
  }
  /* ==/EXP-T1439== */
  .sb-prod {
    background: #fff; border: 1.5px solid #e4eaf5; border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease;
  }
  .sb-prod:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,23,42,.10); }
  .sb-prod-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: linear-gradient(135deg,#eef2f9,#f8fafc); }
  .sb-prod-ph {
    width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fa, #2977f2) 82%, #0b1120), color-mix(in srgb, var(--fa, #2977f2) 45%, #0b1120));
    color: rgba(255,255,255,.92); font-weight: 900; letter-spacing: .04em; overflow: hidden; position: relative;
  }
  .sb-prod-ph::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 85% 15%, rgba(255,255,255,.28), transparent 55%);
  }
  .sb-prod-ph span { font-size: 22px; text-shadow: 0 2px 10px rgba(0,0,0,.25); padding: 0 14px; text-align: center; }
  .sb-prod-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
  .sb-prod-title { font-size: 14px; font-weight: 800; min-height: 44px; display: flex; align-items: center; } /* ==EXP-T0992== */
  .sb-prod-desc { font-size: /* ==EXP-T1146== */ var(--ds-fs-cap-c, 12px) /* ==/EXP-T1146== */; color: /* ==EXP-T1146== */ var(--ds-c-sub-c, #64748b) /* ==/EXP-T1146== */; line-height: 1.7; white-space: pre-wrap; flex: 1; }
  .sb-prod-price { font-size: 16px; font-weight: 900; color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); } /* ==EXP-RD== 読みやすさ */
  .sb-prod-stock { font-size: 12px; color: #475569; font-weight: 700; } /* ==EXP-RD== 読みやすさ */
  .sb-prod button {
    border: 0; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 800;
    min-height: 44px; /* ==EXP-CLIP10== 押しやすさの目安44pxに */
    color: #fff; background: var(--fa, #2977f2); cursor: pointer; font-family: inherit; margin-top: 6px;
    transition: filter .15s ease;
  }
  .sb-prod button:hover { filter: brightness(1.08); }
  .sb-prod button:disabled { background: #cbd5e1; cursor: not-allowed; }

  /* チャット */
  .sb-chat { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
  .sb-chat-head { padding: 12px 16px; font-weight: 800; font-size: 14px; color: #fff; background: var(--fa, #2977f2); }
  .sb-chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f9fd; }
  .sb-chat-msg { max-width: 86%; }
  .sb-chat-name { font-size: /* ==EXP-T1146== */ var(--ds-fs-cap-c, 12px) /* ==/EXP-T1146== */; font-weight: 800; color: /* ==EXP-T1146== */ var(--ds-c-sub-c, #64748b) /* ==/EXP-T1146== */; margin-bottom: 2px; }
  .sb-chat-bubble {
    display: inline-block; background: #fff; border: 1px solid #e4eaf5; border-radius: 4px 14px 14px 14px;
    padding: 8px 12px; font-size: 14px; line-height: 1.6; word-break: break-word; white-space: pre-wrap;
  }
  .sb-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #edf1f8; background: #fff; }
  .sb-chat-form input {
    border: 1.5px solid #dbe4f2; border-radius: 10px; padding: 9px 11px; font-size: 14px; font-family: inherit; outline: none;
  }
  .sb-chat-form input:focus { border-color: var(--fa, #2977f2); }
  .sb-chat-form .nm { width: 92px; flex: none; }
  .sb-chat-form .tx { flex: 1; min-width: 0; }
  .sb-chat-form button {
    border: 0; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 800;
    color: #fff; background: var(--fa, #2977f2); cursor: pointer; font-family: inherit; flex: none;
  }

  /* 購入モーダル */
  .sb-modal-overlay {
    position: fixed; inset: 0; z-index: 99998; background: rgba(10,14,25,.55);
    display: flex; align-items: center; justify-content: center; padding: 18px;
  }
  .sb-modal {
    background: #fff; border-radius: 20px; width: 100%; max-width: 430px; max-height: 92vh; overflow: auto;
    padding: 26px 24px; box-shadow: 0 40px 90px rgba(10,14,25,.35);
  }
  .sb-modal h3 { font-size: 16px; font-weight: 900; margin-bottom: 4px; }
  .sb-modal .sub { font-size: /* ==EXP-T1146== */ var(--ds-fs-cap-c, 12px) /* ==/EXP-T1146== */; color: /* ==EXP-T1146== */ var(--ds-c-sub-c, #64748b) /* ==/EXP-T1146== */; margin-bottom: 16px; line-height: 1.7; }
  .sb-modal label { display: block; font-size: 12px; font-weight: 800; color: #55617a; margin: 12px 0 4px; }
  .sb-modal input, .sb-modal textarea, .sb-modal select {
    width: 100%; border: 1.5px solid #dbe4f2; border-radius: 10px; padding: 10px 12px;
    font-size: 14px; font-family: inherit; outline: none; background: #fff;
  }
  .sb-modal input:focus, .sb-modal textarea:focus { border-color: var(--fa, #2977f2); }
  .sb-modal textarea { min-height: 64px; resize: vertical; }
  .sb-modal .row { display: flex; gap: 10px; margin-top: 20px; }
  .sb-modal .row button {
    flex: 1; border: 0; border-radius: 999px; padding: 12px; font-size: 14px; font-weight: 800;
    cursor: pointer; font-family: inherit;
  }
  .sb-modal .row .go { color: #fff; background: var(--fa, #2977f2); }
  .sb-modal .row .cancel { color: #55617a; background: #eef2f9; }
  .sb-modal .total { font-size: 16px; font-weight: 900; margin-top: 10px; }
  .sb-modal .ok-box { text-align: center; padding: 10px 0; }
  .sb-modal .ok-box .big { font-size: 16px; font-weight: 900; color: #16a34a; margin-bottom: 10px; }
  .sb-modal .code-box {
    background: #f1f5f9; border-radius: 10px; padding: 12px; font-size: 12px; margin: 10px 0;
    word-break: break-all; text-align: left; line-height: 1.8;
  }
  .sb-order-check {
    position: fixed; right: 14px; bottom: 14px; z-index: 9990;
    background: #fff; color: #163067; border: 1.5px solid #dfe6f2;
    font-size: 12px; font-weight: 800; padding: 9px 14px; border-radius: 999px; cursor: pointer;
    box-shadow: 0 8px 22px rgba(22,48,103,.12); font-family: inherit;
  }

  /* ===== システムページ（購入・注文確認・ログイン・出品・DMなどの専用ページ） ===== */
  .sb-syspage { min-height: 100vh; padding: 40px 18px 70px; }
  body.has-nav .sb-syspage { padding-top: 94px; }
  .sb-syspage-inner { max-width: 540px; margin: 0 auto; }
  .sb-back {
    display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent;
    color: #55617a; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit;
    padding: 8px 4px; margin-bottom: 8px;
  }
  .sb-back:hover { color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); } /* ==EXP-RD== 読みやすさ */
  .sb-syspage-card {
    background: #fff; border: 1px solid #e7ecf5; border-radius: 20px; padding: 30px 26px;
    box-shadow: 0 18px 50px rgba(15,23,42,.07);
  }
  .sb-syspage h1 { font-size: 20px; font-weight: 900; margin-bottom: 4px; }
  .sb-syspage .sub { font-size: /* ==EXP-T1146== */ var(--ds-fs-cap-c, 12px) /* ==/EXP-T1146== */; color: /* ==EXP-T1146== */ var(--ds-c-sub-c, #64748b) /* ==/EXP-T1146== */; margin-bottom: 14px; line-height: 1.8; }
  .sb-syspage label { display: block; font-size: 12px; font-weight: 800; color: #55617a; margin: 14px 0 5px; }
  .sb-syspage input, .sb-syspage textarea, .sb-syspage select {
    width: 100%; border: 1.5px solid #dbe4f2; border-radius: 10px; padding: 11px 13px;
    font-size: 14px; font-family: inherit; outline: none; background: #fff;
  }
  .sb-syspage input:focus, .sb-syspage textarea:focus, .sb-syspage select:focus {
    border-color: var(--fa, #2977f2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa, #2977f2) 15%, transparent);
  }
  .sb-syspage textarea { min-height: 72px; resize: vertical; }
  .sb-syspage .row { display: flex; gap: 10px; margin-top: 22px; }
  .sb-syspage .row button {
    flex: 1; border: 0; border-radius: 999px; padding: 13px; font-size: 14px; font-weight: 800;
    cursor: pointer; font-family: inherit;
  }
  .sb-syspage .row .go { color: #fff; background: var(--fa, #2977f2); }
  .sb-syspage .row .go:hover { filter: brightness(1.07); }
  .sb-syspage .row .cancel { color: #55617a; background: #eef2f9; }
  .sb-syspage .total { font-size: 16px; font-weight: 900; margin-top: 14px; }
  .sb-syspage .ok-box { text-align: center; padding: 10px 0; }
  .sb-syspage .ok-box .big { font-size: 18px; font-weight: 900; color: #16a34a; margin-bottom: 10px; }
  .sb-syspage .code-box {
    background: #f1f5f9; border-radius: 10px; padding: 12px 14px; font-size: 12px; margin: 10px 0;
    word-break: break-all; text-align: left; line-height: 1.8;
  }
  /* ==EXP-CPY== 納品内容・注文番号のコピーボタン */
  .sb-cbx-h {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 0 7px; white-space: normal; word-break: normal;
  }
  .sb-cbx-h > span { font-size: /* ==EXP-T1146== */ var(--ds-fs-cap-c, 12px) /* ==/EXP-T1146== */; font-weight: 800; color: /* ==EXP-T1146== */ var(--ds-c-sub-c, #64748b) /* ==/EXP-T1146== */; }
  .sb-cbx-btn {
    border: 1.5px solid #dbe4f2; background: #fff; color: #163067; font-family: inherit;
    font-size: 12px; font-weight: 800; padding: 8px 14px; min-height: 36px; border-radius: 999px;
    cursor: pointer; flex: none; line-height: 1; white-space: nowrap;
  }
  .sb-cbx-btn:hover { border-color: var(--fa, #2977f2); color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); } /* ==EXP-RD== 読みやすさ */
  .sb-cbx-btn.ok { background: #16a34a; border-color: #16a34a; color: #fff; }
  /* ==/EXP-CPY== */
  .sb-buy-prod { display: flex; gap: 14px; padding: 14px; border: 1.5px solid #e7ecf5; border-radius: 16px; margin-bottom: 4px; }
  .sb-buy-prod img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; }
  .sb-buy-prod .t { font-size: 14px; font-weight: 800; line-height: 1.5; }
  .sb-buy-prod .pr { font-size: 16px; font-weight: 900; color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); margin-top: 4px; } /* ==EXP-RD== 読みやすさ */
  .sb-buy-prod .stk { font-size: 12px; color: #475569; font-weight: 700; margin-top: 2px; } /* ==EXP-CLIP10== 薄すぎ解消 */
  .sb-dm-page {
    display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 380px;
    background: #fff; border: 1px solid #e7ecf5; border-radius: 20px; overflow: hidden;
    box-shadow: 0 18px 50px rgba(15,23,42,.07);
  }

  /* 並び替えセレクト（検索・カテゴリと並ぶ） */
  .sb-sort {
    align-self: flex-start; width: auto; padding: 8px 30px 8px 12px; border: 1.5px solid #dbe3ee;
    border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; color: #55617a;
    background: #fff; outline: none; cursor: pointer;
  }
  .sb-dark .sb-sort { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #eef2f9; }

  /* ==EXP-AST== 矢印リンク（marrrt風マイクロインタラクション） */
  /* 以前ここにセレクタ行の無い「宣言だけの塊」が残っており、CSSが次の { まで
     読み進める性質で、直後の .sb-linkarrow.pill の規則まで巻き込んで無効化していた。
     塊の中身は後方の ==EXP-F2/I== の定義で同じか上書きされるものだけだったため
     取り除き、.sb-linkarrow.pill を有効に戻した。基本の見た目は ==EXP-F2/I== が持つ。 */
  .sb-linkarrow.pill { border-color: var(--la-c, #13234a); border-radius: 999px; }
  .sb-linkarrow .la-ar { display: inline-block; transition: transform .22s ease; }
  .sb-linkarrow.fx-invert:hover { background: var(--la-c, #13234a); color: var(--la-inv, #fff); }
  .sb-linkarrow.fx-invert:hover .la-ar { transform: translateX(4px); }
  .sb-linkarrow.fx-slide:hover .la-ar { transform: translateX(6px); }
  .sb-linkarrow.fx-underline .la-tx {
    background: linear-gradient(currentColor, currentColor) no-repeat left 100% / 0% 1.5px;
    transition: background-size .25s ease; padding-bottom: 2px;
  }
  .sb-linkarrow.fx-underline:hover .la-tx { background-size: 100% 1.5px; }

  .sb-countdown { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
  .sb-countdown .lb { font-size: 14px; font-weight: 800; opacity: .75; }
  .sb-countdown .tm { font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .04em; }

  /* 画像読み込み失敗時のフォールバック */
  .sb-img-fallback {
    background: linear-gradient(135deg, #e8eef7, #f6f9fc) !important;
    position: relative;
  }
  .sb-img-fallback::after {
    content: '画像なし';
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #b3c0d4; letter-spacing: .04em;
  }

  /* 会員アカウント */
  .sb-account { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
  .sb-acc-head { padding: 12px 16px; font-weight: 800; font-size: 14px; color: #fff; background: var(--fa, #2977f2); }
  .sb-acc-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
  .sb-acc-hello { font-size: 14px; line-height: 1.8; }
  .sb-acc-tabs { display: flex; gap: 6px; }
  .sb-acc-tabs button {
    flex: 1; border: 1.5px solid #dbe4f2; background: #fff; color: #55617a; border-radius: 10px;
    padding: 8px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit;
  }
  .sb-acc-tabs button.on { background: var(--fa, #2977f2); color: #fff; border-color: transparent; }
  .sb-account input {
    width: 100%; border: 1.5px solid #dbe4f2; border-radius: 10px; padding: 10px 12px;
    font-size: 14px; font-family: inherit; outline: none;
  }
  .sb-account input:focus { border-color: var(--fa, #2977f2); }
  .sb-acc-go, .sb-acc-logout {
    border: 0; border-radius: 999px; padding: 11px; font-size: 14px; font-weight: 800;
    color: #fff; background: var(--fa, #2977f2); cursor: pointer; font-family: inherit;
  }
  .sb-acc-logout { background: #eef2f9; color: #55617a; }
  .sb-acc-msg { font-size: 12px; color: #dc2626; line-height: 1.7; }

  /* フリマ */
  .sb-market { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
  .sb-mk-head {
    display: flex; align-items: center; gap: 10px; padding: 10px 4px 12px; font-size: 16px; font-weight: 800;
  }
  .sb-mk-head span { flex: 1; }
  .sb-mk-post {
    border: 0; border-radius: 999px; padding: 7px 15px; font-size: 12px; font-weight: 800;
    color: #fff; background: var(--fa, #2977f2); cursor: pointer; font-family: inherit;
  }
  .sb-mk-grid { flex: 1; overflow: auto; display: grid; gap: 12px; align-content: start; }
  .sb-mk-card { background: #fff; border: 1.5px solid #e4eaf5; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
  .sb-mk-card img, .sb-mk-noimg { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
  .sb-mk-noimg { background: linear-gradient(135deg, #eef2f9, #f8fafc); }
  .sb-mk-b { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .sb-mk-t { font-size: 14px; font-weight: 800; }
  .sb-mk-sold { font-size: 12px; background: #fee2e2; color: #b91c1c; padding: 2px 7px; border-radius: 999px; font-weight: 900; }
  .sb-mk-d { font-size: /* ==EXP-T1146== */ var(--ds-fs-cap-c, 12px) /* ==/EXP-T1146== */; color: /* ==EXP-T1146== */ var(--ds-c-sub-c, #64748b) /* ==/EXP-T1146== */; line-height: 1.7; white-space: pre-wrap; flex: 1; }
  .sb-mk-p { font-size: 16px; font-weight: 900; color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); } /* ==EXP-RD== 読みやすさ */
  /* ==EXP-T0798== */ .sb-mk-seller { font-size: 12px; color: var(--t802-sub, #64748b); font-weight: 700; } /* ==/EXP-T0798== */
  .sb-mk-note { font-size: 12px; color: var(--t802-sub, #64748b); }
  .sb-mk-dm, .sb-mk-mine button {
    border: 0; border-radius: 999px; padding: 8px; font-size: 12px; font-weight: 800;
    color: #fff; background: var(--fa, #2977f2); cursor: pointer; font-family: inherit; margin-top: 4px;
  }
  .sb-mk-mine { display: flex; gap: 6px; }
  .sb-mk-mine button { flex: 1; background: #eef2f9; color: #55617a; }
  .sb-mk-mine button.del { background: #fee2e2; color: #b91c1c; }

  /* DM */
  .sb-dmbox { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
  .sb-dm-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 800; font-size: 14px;
    color: #fff; background: var(--fa, #2977f2);
  }
  .sb-dm-head { justify-content: space-between; }
  .sb-dm-owner {
    border: 0; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 800;
    background: rgba(255,255,255,.22); color: #fff; cursor: pointer; font-family: inherit;
  }
  .sb-dm-threads { flex: 1; overflow: auto; }
  .sb-dm-thread { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
  .sb-dm-thread:hover { background: #f8fafc; }
  .sb-dm-peer { font-size: 14px; font-weight: 800; }
  .sb-dm-last { font-size: 12px; color: var(--t802-sub, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb-dm-modal { display: flex; flex-direction: column; height: 70vh; max-height: 560px; }
  .sb-dm-mhead {
    display: flex; align-items: center; justify-content: space-between; padding: 13px 16px;
    font-weight: 800; font-size: 14px; color: #fff; background: var(--fa, #2977f2);
  }
  .sb-dm-mhead button { border: 0; background: transparent; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
  .sb-dm-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f7f9fd; }
  .sb-dm-msg { display: flex; }
  .sb-dm-msg.me { justify-content: flex-end; }
  .sb-dm-bub {
    max-width: 78%; background: #fff; border: 1px solid #e4eaf5; border-radius: 4px 14px 14px 14px;
    padding: 8px 12px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  }
  .sb-dm-msg.me .sb-dm-bub { background: var(--fa, #2977f2); color: #fff; border-color: transparent; border-radius: 14px 4px 14px 14px; }
  .sb-dm-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #edf1f8; background: #fff; }
  .sb-dm-form input {
    flex: 1; min-width: 0; border: 1.5px solid #dbe4f2; border-radius: 10px; padding: 9px 11px;
    font-size: 14px; font-family: inherit; outline: none;
  }
  .sb-dm-form input:focus { border-color: var(--fa, #2977f2); }
  .sb-dm-form button {
    border: 0; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 800;
    color: #fff; background: var(--fa, #2977f2); cursor: pointer; font-family: inherit; flex: none;
  }

  /* ===== ダーク背景に置かれたビルトインUIの自動反転 ===== */
  .sb-dark.sb-faq .sb-faq-item,
  .sb-dark .sb-faq-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
  .sb-dark .sb-faq-q { color: #eef2f9; }
  .sb-dark .sb-faq-a { color: #b8c3d4; }
  .sb-dark.sb-form h3, .sb-dark .sb-form h3 { color: #eef2f9; }
  .sb-dark.sb-form label, .sb-dark .sb-form label { color: #a7b3c6; }
  .sb-dark.sb-form input, .sb-dark.sb-form textarea,
  .sb-dark .sb-form input, .sb-dark .sb-form textarea {
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #eef2f9;
  }
  .sb-dark.sb-form input::placeholder, .sb-dark.sb-form textarea::placeholder { color: #7b8798; }
  .sb-dark .sb-table table { background: transparent; color: #dbe3ee; }
  .sb-dark .sb-table th, .sb-dark .sb-table td { border-color: rgba(255,255,255,.14); }
  .sb-dark .sb-table th { background: rgba(255,255,255,.07); color: #eef2f9; }
  .sb-dark.sb-chat, .sb-dark .sb-chat { background: rgba(255,255,255,.04); }
  .sb-dark .sb-chat-log { background: rgba(0,0,0,.22); }
  .sb-dark .sb-chat-bubble { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #eef2f9; }
  .sb-dark .sb-chat-name { color: #97a3b6; }
  .sb-dark .sb-chat-form { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.12); }
  .sb-dark .sb-chat-form input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #eef2f9; }
  .sb-dark.sb-account, .sb-dark .sb-account { background: rgba(255,255,255,.04); }
  .sb-dark .sb-acc-body { color: #dbe3ee; }
  .sb-dark .sb-account input { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #eef2f9; }
  .sb-dark .sb-acc-tabs button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #b8c3d4; }
  .sb-dark .sb-acc-logout { background: rgba(255,255,255,.09); color: #dbe3ee; }
  .sb-dark .sb-mk-head { color: #eef2f9; }
  .sb-dark .sb-mk-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
  .sb-dark .sb-mk-t { color: #eef2f9; }
  .sb-dark .sb-mk-d { color: #a7b3c6; }
  .sb-dark .sb-mk-mine button { background: rgba(255,255,255,.09); color: #dbe3ee; }
  .sb-dark .sb-mk-noimg { background: rgba(255,255,255,.06); }
  .sb-dark.sb-dmbox, .sb-dark .sb-dmbox { background: rgba(255,255,255,.04); }
  .sb-dark .sb-dm-thread { border-bottom-color: rgba(255,255,255,.10); }
  .sb-dark .sb-dm-thread:hover { background: rgba(255,255,255,.06); }
  .sb-dark .sb-dm-peer { color: #eef2f9; }
  .sb-dark .sb-img-fallback { background: rgba(255,255,255,.06) !important; }
  .sb-dark .sb-img-fallback::after { color: #6f7d92; }

  /* 検索・カテゴリ絞り込み */
  .sb-filter { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-bottom: 2px; }
  .sb-search {
    width: 100%; padding: 10px 14px; border: 1.5px solid #dbe3ee; border-radius: 999px;
    font: inherit; font-size: 14px; outline: none; background: #fff; color: #16233d;
  }
  .sb-search:focus { border-color: var(--fa, #2977f2); }
  .sb-cats { display: flex; flex-wrap: wrap; gap: 6px; }
  .sb-cat {
    padding: 5px 13px; border-radius: 999px; border: 1.5px solid #dbe3ee; background: #fff;
    font-size: 12px; font-weight: 800; color: #64748b; cursor: pointer; font-family: inherit;
    transition: .15s;
  }
  .sb-cat:hover { border-color: var(--fa, #2977f2); color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); } /* ==EXP-RD== 読みやすさ */
  .sb-cat.on { background: var(--fa, #2977f2); border-color: var(--fa, #2977f2); color: #fff; }
  .sb-empty { grid-column: 1 / -1; font-size: 12px; color: var(--t802-sub, #64748b); padding: 16px 10px; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 150px; border: 1.5px dashed rgba(148,163,184,.35); border-radius: 16px; }
  /* 空状態のときはウィジェットの残り高さいっぱいまで広げ、下に不自然な余白が出ないようにする */
  .sb-empty { flex: 1; }
  .sb-prod-cat {
    display: inline-block; align-self: flex-start; padding: 2px 9px; border-radius: 999px;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* ==EXP-RD== 12.5px化で長い名前が2行に折り返るのを防ぐ */
    background: rgba(41,119,242,.10); color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); font-size: 12px; font-weight: 800; /* ==EXP-RD== 読みやすさ */
  }
  /* 画像/動画ギャラリー */
  .sb-media { position: relative; }
  .sb-media video { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #0b1220; }
  .sb-media-nav {
    position: absolute; inset: auto 0 8px 0; display: flex; justify-content: center; gap: 5px;
  }
  .sb-media-dot {
    width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55);
    border: 0; padding: 0; cursor: pointer;
  }
  .sb-media-dot.on { background: #fff; width: 16px; border-radius: 999px; }
  .sb-media-count {
    position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px;
    background: rgba(9,15,30,.60); color: #fff; font-size: 12px; font-weight: 800;
  }
  .sb-dark .sb-search { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #eef2f9; }
  .sb-dark .sb-cat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #b8c3d4; }
  .sb-dark .sb-cat.on { background: var(--fa, #2977f2); color: #fff; }


  /* ===== 固定ナビバー ===== */
  #sb-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    display: flex; align-items: center; gap: 18px; padding: 0 22px;
    height: 60px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(120,130,150,.14);
    font-family: inherit;
  }
  #sb-nav .nv-brand { font-size: 16px; font-weight: 900; cursor: pointer; white-space: nowrap; }
  #sb-nav .nv-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  #sb-nav .nv-link, #sb-nav-menu .nv-link {
    padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 700;
    cursor: pointer; border: 0; background: transparent; color: inherit; font-family: inherit;
    opacity: .82; transition: .15s;
  }
  #sb-nav .nv-link:hover, #sb-nav-menu .nv-link:hover { opacity: 1; background: rgba(120,130,150,.12); }
  #sb-nav .nv-link.on, #sb-nav-menu .nv-link.on {
    opacity: 1; box-shadow: inset 0 -2.5px 0 currentColor; border-radius: 9px 9px 3px 3px;
  }
  .sb-more-wrap { grid-column: 1/-1; display: flex; justify-content: center; padding: 8px 0 2px; }
  .sb-more-btn {
    border: 1.5px solid var(--fa, #2977f2); color: color-mix(in srgb, var(--fa, #2977f2) 76%, #08101f); background: transparent; /* ==EXP-RD== 読みやすさ */
    border-radius: 999px; padding: 9px 24px; font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit; transition: .15s;
  }
  .sb-more-btn:hover { background: var(--fa, #2977f2); color: #fff; }
  /* ==EXP-T0886== */
  #sb-nav .nv-acc {
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px; font-weight: 900; flex: none; font-family: inherit;
  }
  #sb-nav .nv-burger {
    display: none; width: 44px; height: 44px; border: 0; background: transparent;
    cursor: pointer; color: inherit; padding: 10px; flex: none; margin-left: auto;
  }
  /* ==/EXP-T0886== */
  /* ==EXP-T0089== アカウント導線の用途を画面上に明記 */
  #sb-nav .nv-acc.nv-acc-labeled {
    width: auto; min-width: 44px; padding: 0 15px; border-radius: 999px; gap: 7px;
    white-space: nowrap; line-height: 1;
  }
  #sb-nav .nv-acc.nv-acc-labeled svg { width: 18px; height: 18px; flex: none; }
  #sb-nav .nv-acc.nv-acc-labeled .nv-acc-label { font-size: 13px; font-weight: 800; }
  /* ==/EXP-T0089== */
  #sb-nav .nv-burger svg { width: 100%; height: 100%; }
  #sb-nav-menu {
    position: fixed; top: 60px; left: 0; right: 0; z-index: 899; display: none;
    flex-direction: column; padding: 8px 12px 14px; gap: 2px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(120,130,150,.16);
  }
  #sb-nav-menu .nv-link { text-align: left; font-size: 14px; padding: 12px 14px; }
  #sb-acc-menu {
    position: fixed; top: 62px; right: 14px; z-index: 901; display: none;
    min-width: 200px; background: #fff; border: 1px solid #e4eaf5; border-radius: 16px;
    box-shadow: 0 18px 44px rgba(15,23,42,.18); overflow: hidden; font-size: 14px;
  }
  #sb-acc-menu .am-name { padding: 12px 16px 10px; font-weight: 900; border-bottom: 1px solid #eef2f9; }
  #sb-acc-menu button {
    display: block; width: 100%; text-align: left; padding: 11px 16px; border: 0;
    background: none; font: inherit; cursor: pointer; color: #334155;
  }
  #sb-acc-menu button:hover { background: #f4f6fb; }
  @media (max-width: 680px) {
    #sb-nav { height: 54px; padding: 0 14px; }
    #sb-nav .nv-links { display: none; }
    #sb-nav .nv-burger { display: block; }
    #sb-nav-menu { top: 54px; }
    #sb-acc-menu { top: 56px; }
  }
  body.has-nav #sb-order-check { z-index: 890; }

  /* ==EXP-NAVG== 固定ナビの左右余白を本文カラムの縦ラインに合わせる。
     値は JS が --sb-navpad に入れる（本文の左余白 × 実際の拡大率）。
     JS が動かなかった場合は従来どおり PC 22px / スマホ 14px に落ちる。 */
  /* EXP-SCL が 1023px 以下で padding を一括指定しているので、
     body を足して詳細度で勝たせる（相手のブロックは書き換えない）。 */
  body #sb-nav { padding-left: var(--sb-navpad, 22px); padding-right: var(--sb-navpad, 22px); }
  #sb-acc-menu { right: var(--sb-navpad, 14px); }
  @media (max-width: 1023px) {
    body #sb-nav { padding-left: var(--sb-navpad, 14px); padding-right: var(--sb-navpad, 14px); }
  }
  /* ==/EXP-NAVG== */

  /* ==EXP-SCL== 表示がスマホ版面に切り替わる幅(1024px未満)まで、ナビも同じ形にそろえる */
  @media (max-width: 1023px) {
    #sb-nav { height: 54px; padding: 0 14px; }
    #sb-nav .nv-links { display: none; }
    #sb-nav .nv-burger { display: block; }
    #sb-nav-menu { top: 54px; }
    #sb-acc-menu { top: 56px; }
  }
  /* ==/EXP-SCL== */

  /* ==EXP-M2== スマホ検証で見つかった不具合の修正 */
  /* ドロワーは背後が透けると宙に浮いて見えるので不透明にし、FABより前面へ */
  #sb-nav-menu {
    z-index: 9995;
    box-shadow: 0 18px 40px rgba(10,14,25,.18);
  }
  #sb-nav-menu .nv-link {
    min-height: 46px;              /* 指で押せる大きさ（44px以上） */
    display: flex; align-items: center;
  }
  /* ドロワーを開いている間の背景（外側タップで閉じる領域） */
  #sb-nav-scrim {
    position: fixed; inset: 0; z-index: 9994; background: rgba(10,14,25,.28);
    display: none;
  }
  body.sb-nav-open #sb-nav-scrim { display: block; }
  body.sb-nav-open { overflow: hidden; }
  /* 固定ボタンはホームインジケータ/ブラウザ下部バーを避ける */
  #sb-order-check {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 下の操作要素と重なっている間は薄く+タップを透過させる（購入導線を塞がない） */
  #sb-order-check.sb-fab-yield {
    opacity: .28; pointer-events: none;
  }
  /* ==/EXP-M2== */


  .center-card {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  }
  .card {
    background: #fff; border-radius: 20px; padding: 44px 40px; max-width: 420px; width: 100%;
    text-align: center; box-shadow: 0 30px 70px rgba(15,23,42,.12);
  }
  .card h2 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
  .card p { font-size: 14px; color: #55617a; line-height: 1.8; }
  /* ==EXP-ERRUI== エラー画面の導線 */
  .card .errui-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px;
  }
  .card .errui-btn {
    appearance: none; border: 1px solid #d7dee9; background: #fff; color: #33405c;
    font-size: 14px; font-weight: 700; font-family: inherit; text-decoration: none;
    padding: 11px 20px; min-height: 44px; border-radius: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .card .errui-btn.errui-primary { background: #2977f2; border-color: #2977f2; color: #fff; }
  .card .errui-btn:hover { filter: brightness(.96); }
  /* ==/EXP-ERRUI== */
  .spinner {
    width: 34px; height: 34px; border: 3px solid #e2e8f0; border-top-color: #2977f2;
    border-radius: 50%; margin: 0 auto 18px; animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  #preview-badge {
    position: fixed; top: 14px; right: 14px; z-index: 9999;
    background: linear-gradient(120deg,#fe893d,#f7b733); color: #fff;
    font-size: 12px; font-weight: 800; padding: 8px 16px; border-radius: 999px;
    box-shadow: 0 8px 20px rgba(254,137,61,.4); display: none;
  }
  /* ==EXP-A(v5登記簿: hover/anim/bg)== */
  .ob.sb-hv-lift, .ob.sb-hv-grow, .ob.sb-hv-shrink, .ob.sb-hv-glow, .ob.sb-hv-brighten,
  .ob.sb-hv-underline, .ob.sb-hvbg, .ob.sb-hvc {
    transition: transform var(--sb-tr,.25s) ease, box-shadow var(--sb-tr,.25s) ease,
                filter var(--sb-tr,.25s) ease, background var(--sb-tr,.25s) ease,
                color var(--sb-tr,.25s) ease, opacity var(--sb-tr,.25s) ease;
  }
  .ob.sb-hv-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(15,23,42,.18); }
  .ob.sb-hv-grow:hover { transform: scale(1.045); }
  .ob.sb-hv-shrink:hover { transform: scale(.955); }
  .ob.sb-hv-glow:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 10px 36px rgba(41,119,242,.5); }
  .ob.sb-hv-brighten:hover { filter: brightness(1.13); }
  .ob.sb-hv-underline:hover { text-decoration: underline; text-underline-offset: 4px; }
  .ob.sb-hvbg:hover { background: var(--sb-hvbg) !important; }
  .ob.sb-hvc:hover, .ob.sb-hvc:hover .ob-btn, .ob.sb-hvc:hover .ob-text { color: var(--sb-hvc) !important; }
  @media (prefers-reduced-motion: no-preference) {
    .ob.sb-anim {
      opacity: 0;
      transition: opacity var(--sb-adur,.6s) ease var(--sb-adel,0s),
                  transform var(--sb-adur,.6s) cubic-bezier(.22,.8,.28,1) var(--sb-adel,0s),
                  filter var(--sb-adur,.6s) ease var(--sb-adel,0s);
    }
    .ob.sb-anim-up { transform: translateY(30px); }
    .ob.sb-anim-down { transform: translateY(-30px); }
    .ob.sb-anim-left { transform: translateX(40px); }
    .ob.sb-anim-right { transform: translateX(-40px); }
    .ob.sb-anim-zoom { transform: scale(.9); }
    .ob.sb-anim-blur { filter: blur(10px); }
    .ob.sb-anim.sb-in { opacity: var(--sb-op,1); transform: none; filter: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ob.sb-anim { opacity: var(--sb-op,1); }
  }
  /* ==/EXP-A== */
  /* ==EXP-C: メディア系オブジェクト== */
  .sb-slider{position:relative;width:100%;height:100%;overflow:hidden;}
  .sb-slider.empty{background:repeating-conic-gradient(#eef2f9 0 25%, #fff 0 50%) 0 0/16px 16px;}
  .sb-slider-track{display:flex;width:100%;height:100%;transition:transform .5s ease;}
  .sb-slider-track img{width:100%;height:100%;flex:0 0 100%;object-fit:cover;}
  .sb-slider-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:7px;justify-content:center;z-index:2;}
  .sb-slider-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:transform .2s ease, background .2s ease;}
  .sb-slider-dots button.on{background:#fff;transform:scale(1.3);}
  .sb-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(15,23,42,.45);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .2s ease;}
  .sb-slider-arrow.prev{left:10px;} .sb-slider-arrow.next{right:10px;}
  .sb-slider-arrow:hover{background:rgba(15,23,42,.72);}
  .sb-ba{position:relative;width:100%;height:100%;overflow:hidden;}
  .sb-ba.empty{background:repeating-conic-gradient(#eef2f9 0 25%, #fff 0 50%) 0 0/16px 16px;}
  .sb-ba > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .sb-ba-bar{position:absolute;top:0;bottom:0;width:2.5px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.45);pointer-events:none;z-index:2;}
  .sb-ba-bar::after{content:'\2194';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:#fff;color:#334155;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;box-shadow:0 2px 10px rgba(0,0,0,.3);}
  .sb-ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3;}
  .sb-ba-label{position:absolute;top:10px;font-size:12px;font-weight:800;color:#fff;background:rgba(15,23,42,.55);padding:3px 10px;border-radius:999px;pointer-events:none;z-index:2;}
  .sb-ba-label.a{left:10px;} .sb-ba-label.b{right:10px;}
  .sb-bgvideo{position:relative;width:100%;height:100%;overflow:hidden;background:#0f172a;}
  .sb-bgvideo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .sb-bgvideo-dim{position:absolute;inset:0;}
  .sb-iconobj{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
  .sb-iconobj svg{width:72%;height:72%;}
  .sb-dividerobj{width:100%;height:100%;line-height:0;}
  .sb-dividerobj svg{width:100%;height:100%;display:block;}
  .sb-mapframe{width:100%;height:100%;border:0;display:block;}
  /* ==EXP-F2/I: linkarrow + hover invert == */
  .sb-linkarrow, .ob a.sb-linkarrow{width:100%;height:100%;display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;font-weight:800;color:var(--la-c,#13234a);cursor:pointer;transition:background var(--sb-tr,.22s) ease,color var(--sb-tr,.22s) ease,opacity var(--sb-tr,.22s) ease;}
  .sb-linkarrow .la-a{display:inline-block;transition:transform .22s ease;}
  .sb-linkarrow:hover .la-a{transform:translateX(5px);}
  .sb-linkarrow.pill, .ob a.sb-linkarrow.pill{border:1.5px solid var(--la-c,#13234a);border-radius:999px;justify-content:center;padding:0 18px;}
  .sb-linkarrow.pill:hover, .ob a.sb-linkarrow.pill:hover{background:var(--la-c,#13234a);color:#fff;}
  .sb-linkarrow:not(.pill):hover, .ob a.sb-linkarrow:not(.pill):hover{opacity:.8;}
  .ob.sb-hv-invert{transition:background var(--sb-tr,.25s) ease,color var(--sb-tr,.25s) ease;}
  .ob.sb-hv-invert:hover{background:var(--sb-hvbg,#13234a) !important;}
  .ob.sb-hv-invert:hover .ob-text,.ob.sb-hv-invert:hover .ob-btn{color:var(--sb-hvc,#ffffff) !important;}
  /* ==/EXP-F2/I== */
  .sb-dialog-overlay {
    position: fixed; inset: 0; z-index: 99999; background: rgba(10,14,25,.45);
    display: flex; align-items: center; justify-content: center; padding: 18px;
  }
  .sb-dialog {
    background: #fff; border-radius: 20px; width: 100%; max-width: 340px;
    padding: 22px 20px 18px; box-shadow: 0 40px 90px rgba(10,14,25,.35);
    animation: sbDlgIn .16s ease;
  }
  @keyframes sbDlgIn { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
  .sb-dialog .msg { font-size: 14px; font-weight: 600; color: #1e2b45; line-height: 1.8; white-space: pre-wrap; word-break: break-word; }
  .sb-dialog .btns { display: flex; gap: 10px; margin-top: 18px; }
  .sb-dialog .btns button { flex: 1; border: 0; border-radius: 999px; padding: 11px; font-size: 14px; font-weight: 800; cursor: pointer; font-family: inherit; }
  .sb-dialog .ok { color: #fff; background: var(--fa, #2977f2); }
  .sb-dialog .cancel { background: #eef2f8; color: #43506b; }
  /* ==EXP-DLGTAP== ダイアログ操作を44px以上のタップ領域にする */
  .sb-dialog .btns button { min-height: 44px; }
  /* ==/EXP-DLGTAP== */
  /* ==EXP-MO== 追加ホバー4種・出現アニメ3種・ページ切替アニメ */
  .ob.sb-hv-tilt:hover { transform: perspective(700px) rotateX(4deg) rotateY(-4deg) scale(1.02); }
  .ob.sb-hv-shine { overflow: hidden; }
  .ob.sb-hv-shine::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; }
  .ob.sb-hv-shine:hover::after { left: 130%; }
  .ob.sb-hv-borderdraw:hover { box-shadow: inset 0 0 0 2.5px var(--sb-hvbg, #2977f2); transition: box-shadow .3s ease; }
  .ob.sb-hv-pulse:hover { animation: sbMoPulse 1s ease-in-out infinite; }
  @keyframes sbMoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
  .ob.sb-anim-flip { transform: perspective(700px) rotateY(55deg); }
  .ob.sb-anim-bounce { transform: translateY(34px); }
  .ob.sb-anim-bounce.sb-in { animation: sbMoBounce .65s cubic-bezier(.34,1.56,.64,1); }
  @keyframes sbMoBounce { 0% { transform: translateY(34px); opacity: 0; } 60% { transform: translateY(-8px); } 100% { transform: translateY(0); opacity: 1; } }
  .ob.sb-anim-wipe { clip-path: inset(0 100% 0 0);
    transition: clip-path var(--sb-adur, .6s) ease var(--sb-adel, 0s), opacity var(--sb-adur, .6s) ease var(--sb-adel, 0s); }
  .ob.sb-anim-wipe.sb-in { clip-path: inset(0 0 0 0); }
  #stage-wrap.sb-pgt-fade { animation: sbPgFade .3s ease; }
  #stage-wrap.sb-pgt-slide { animation: sbPgSlide .32s ease; }
  #stage-wrap.sb-pgt-zoom { animation: sbPgZoom .3s ease; }
  @keyframes sbPgFade { from { opacity: 0; } }
  @keyframes sbPgSlide { from { opacity: 0; transform: translateY(26px); } }
  @keyframes sbPgZoom { from { opacity: 0; transform: scale(.985); } }
  /* ==/EXP-MO== */
  /* ==EXP-CTA-HIERARCHY== GameVault: 補助CTAを一次購入ボタンより控えめなアウトラインにする。
     目印を2つ併記しているのは、まだ両方が必要だからです。勝手に片方を消さないでください。 */
  .ob[style*="left: 490px; top: 1940px; width: 220px; height: 48px"][style*="background: rgb(230, 0, 51)"],
  .ob[style*="left: 60px; top: 2216px; width: 170px; height: 48px"][style*="background: rgb(230, 0, 51)"],
  .ob[style*="left: 645px; top: 2216px; width: 170px; height: 48px"][style*="background: rgb(230, 0, 51)"],
  .ob[style*="left: 100px; top: 3340px; width: 200px; height: 48px"][style*="background: rgb(230, 0, 51)"],
  .ob[style*="left: 44px; top: 3576px; width: 160px; height: 48px"][style*="background: rgb(230, 0, 51)"],
  .ob[style*="left: 44px; top: 3786px; width: 160px; height: 48px"][style*="background: rgb(230, 0, 51)"] {
    background: #fff !important;
    border: 2px solid #e60033;
    box-shadow: none !important;
  }
  .ob[style*="left: 490px; top: 1940px; width: 220px; height: 48px"] > .ob-btn,
  .ob[style*="left: 60px; top: 2216px; width: 170px; height: 48px"] > .ob-btn,
  .ob[style*="left: 645px; top: 2216px; width: 170px; height: 48px"] > .ob-btn,
  .ob[style*="left: 100px; top: 3340px; width: 200px; height: 48px"] > .ob-btn,
  .ob[style*="left: 44px; top: 3576px; width: 160px; height: 48px"] > .ob-btn,
  .ob[style*="left: 44px; top: 3786px; width: 160px; height: 48px"] > .ob-btn {
    color: #b0121a !important;
  }
  /* ==/EXP-CTA-HIERARCHY== */


  :root {
    --t802-sub: #64748b;
    --t802-badge-bg: color-mix(in srgb, var(--fa, #2977f2) 12%, transparent);
    --t802-badge-fg: color-mix(in srgb, var(--fa, #2977f2) 72%, #08101f);
    --t802-badge-bd: color-mix(in srgb, var(--fa, #2977f2) 25%, transparent);
    --t802-acc-fg: color-mix(in srgb, var(--fa, #2977f2) 72%, #08101f);
    --t802-btn-bg: color-mix(in srgb, var(--fa, #2977f2) 85%, #08101f);
  }
  .cl { position: relative; }
  .cl::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .sb-prod-stock, .pd-stock, .ec-stock { font-weight: 900 !important; color: #334155 !important; }


  :root {
    /* 9) カードとボタン（絶対配置キャンバスの部品用。EXP-DS1/DS1C は書き換えていない） */
    --ds-card-r:  16px;                            /* カードの角丸  12/14/16 → 16 */
    --ds-card-bc: #e5e7eb;                         /* カードの枠線色 #e5e5e5/#eeeeee/#e4eaf5 → #e5e7eb */
    --ds-card-bw: 1px;                             /* カードの枠線幅 1/1.5 → 1 */
    --ds-card-sh: 0 2px 8px rgba(15,23,42,.10);    /* カードの影（既存の shadow:sm と同値） */
    --ds-btn-fs-c: 15px;                           /* ボタンの文字 12/13/14.5/15 → 15 */
    --ds-btn-h-c-sm: 44px;                         /* カードの中の小さいボタンの高さ */
  }
  /* カード本体（枠線は色・幅・種別を別々に指定する。
     こうしておくと .sb-dark 側の border-color 指定がこれまでどおり勝つ） */
  .sb-prod, .sb-mk-card {
    border-width: var(--ds-card-bw);
    border-style: solid;
    border-color: var(--ds-card-bc);
    border-radius: var(--ds-card-r);
    box-shadow: var(--ds-card-sh);
  }
  /* カードの中のボタン。高さ44pxは既存のまま、文字だけ 13px/12px → 15px に揃える。
     min-height はスマホ側の補正（--m44-hit）を消さないよう、ここでは触らない。 */
  .sb-prod button { font-size: var(--ds-btn-fs-c); }
  .sb-mk-dm, .sb-mk-mine button {
    font-size: var(--ds-btn-fs-c);
    min-height: var(--ds-btn-h-c-sm);
    padding: 10px 16px;
  }


/* ==EXP-K== ページャ */
.sb-pager { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 6px; padding: 16px 0 4px; flex-wrap: wrap; }
.sb-pager button { border: 1.5px solid #dbe4f2; background: #fff; color: #334155; border-radius: 10px;
  padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.sb-pager button.on { background: var(--fa, #2977f2); border-color: transparent; color: #fff; }
.sb-pager button:disabled { opacity: .4; cursor: default; }
.sb-dark .sb-pager button { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #e2e8f0; }


  #sb-order-check.sb-fab-soft { opacity: .34; transition: opacity .18s ease; }
  #sb-order-check.sb-fab-soft:hover,
  #sb-order-check.sb-fab-soft:focus,
  #sb-order-check.sb-fab-soft:active { opacity: 1; }


  /* 文字を隠していないと分かったときは、はっきり読める濃さに戻す。
     EXP-M2 の「操作要素の上ではタップを透過」(sb-fab-yield)は尊重して上書きしない。 */
  body #sb-order-check.sb-fab-clear:not(.sb-fab-yield) { opacity: 1 !important; }
  /* どこへ逃げても文字の上になるときだけ薄くする */
  body #sb-order-check.sb-fab-hush:not(.sb-fab-yield) { opacity: .5 !important; }
  body #sb-order-check.sb-fab-hush:not(.sb-fab-yield):hover,
  body #sb-order-check.sb-fab-hush:not(.sb-fab-yield):focus,
  body #sb-order-check.sb-fab-hush:not(.sb-fab-yield):active { opacity: 1 !important; }
  /* ==EXP-T0722== 逃げ場がない商品一覧を下へ読む間は本文を覆わないよう画面外へ退避する */
  body #sb-order-check.sb-fab-offscreen {
    transform: translateY(calc(100% + 24px)) !important;
    opacity: 0 !important; pointer-events: none !important;
  }
  /* ==/EXP-T0722== */
  /* 文字を避けて上へずらす。EXP-M2 の bottom:!important に詳細度で勝つ形で指定する */
  body #sb-order-check.sb-fab-gap {
    bottom: calc(var(--sb-fab-gap, 14px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 逃げ場が無いときだけ丸いアイコンに畳む（覆う幅を111px→44pxに減らす）。
     文字は font-size:0 で見えなくするだけなので、読み上げには残る。 */
  body #sb-order-check.sb-fab-mini {
    box-sizing: border-box; width: 44px; height: 44px; padding: 0 !important;
    font-size: 0 !important; border-radius: 999px !important; overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23163067%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12v18l-3-2-3%202-3-2-3%202z%22%2F%3E%3Cpath%20d%3D%22M9.5%208.5h5M9.5%2012.5h5%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
  }


  .sb-prod-openable .sb-prod-title,
  .sb-prod-openable .sb-prod-img,
  .sb-prod-openable .sb-prod-ph { cursor: pointer; }
  .sb-prod-openable .sb-prod-title:hover { text-decoration: underline; }
  .sb-prod-openable .sb-prod-title:focus-visible,
  .sb-prod-openable .sb-prod-img:focus-visible,
  .sb-prod-openable .sb-prod-ph:focus-visible { outline: 2px solid var(--fa, #2977f2); outline-offset: 2px; }
  #sb-pd-scrim {
    position: fixed; inset: 0; background: rgba(11,17,32,.55); z-index: 9995;
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  #sb-pd-card {
    background: #fff; border-radius: 20px; width: min(560px, 100%); max-height: 88vh; overflow: auto;
    box-shadow: 0 24px 60px rgba(15,23,42,.28); position: relative;
    font-family: inherit; color: #13234a;
  }
  #sb-pd-card .pd-close {
    position: absolute; top: 10px; right: 10px; min-width: 44px; min-height: 44px;
    border: 0; background: rgba(255,255,255,.9); border-radius: 999px; cursor: pointer;
    font-size: 20px; font-weight: 900; color: #334155; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  #sb-pd-card .pd-hero { width: 100%; aspect-ratio: 4/3; max-height: 34vh; object-fit: cover; display: block; background: #eef2f9; }
  #sb-pd-card .pd-ph {
    width: 100%; aspect-ratio: 4/3; max-height: 26vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2b3a55, #0b1120); color: rgba(255,255,255,.92);
    font-weight: 900; font-size: 20px; text-align: center; padding: 0 16px; box-sizing: border-box;
  }
  #sb-pd-card .pd-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; }
  #sb-pd-card .pd-cat { font-size: 12px; font-weight: 800; color: #64748b; }
  #sb-pd-card .pd-title { font-size: 19px; font-weight: 900; line-height: 1.45; }
  #sb-pd-card .pd-desc { font-size: 14px; color: #33415c; line-height: 1.9; white-space: pre-wrap; }
  #sb-pd-card .pd-price { font-size: 22px; font-weight: 900; }
  #sb-pd-card .pd-stock { font-size: 12px; color: #475569; font-weight: 700; }
  #sb-pd-card .pd-buy {
    position: sticky; bottom: 4px; z-index: 2;
    margin-top: 6px; border: 0; border-radius: 999px; min-height: 48px; padding: 0 20px;
    box-shadow: 0 6px 20px rgba(15,23,42,.22);
    font-size: 16px; font-weight: 800; color: #fff; background: var(--pdfa, #2977f2);
    cursor: pointer; font-family: inherit;
  }
  #sb-pd-card .pd-buy[disabled] { background: var(--t802-sub, #64748b); cursor: not-allowed; }
  #sb-pd-card .pd-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
  #sb-pd-card .pd-thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 1.5px solid #e4eaf5; }

#t1418-newsbtn{position:fixed;right:18px;bottom:18px;z-index:900;border:0;border-radius:999px;padding:12px 18px;background:#13234a;color:#fff;font:800 14px system-ui;box-shadow:0 10px 28px #13234a55;cursor:pointer;display:none}#t1418-news{position:fixed;inset:0;z-index:10000;background:#f8fafc;overflow:auto;color:#13234a;font-family:system-ui}#t1418-news[hidden]{display:none}#t1418-news main{width:min(900px,calc(100% - 32px));margin:auto;padding:28px 0 70px}.t1418-card{display:grid;grid-template-columns:160px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid #dbe4ea;cursor:pointer}.t1418-card img,.t1418-hero{width:100%;max-height:440px;object-fit:cover;border-radius:12px}.t1418-body{white-space:pre-wrap;line-height:1.9;font-size:16px}.t1418-back{min-width:44px;min-height:44px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;font-weight:800}@media(max-width:600px){.t1418-card{grid-template-columns:1fr}.t1418-card img{max-height:190px}}

  /* ---- (4) 「注文状況を確認」ボタンの読みやすさ（画面幅によらず効かせる） ----
     11.5px→15px。高さも36px→44pxにして押しやすくする。
     文字を隠すときの薄さ .5 は、白地に #163067 を重ねると 2.9:1 で
     国際基準の 4.5:1 に届かないため .72（=5.4:1）に上げる。 */
  body #sb-order-check {
    font-size: 16px; min-height: 44px; padding: 10px 18px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1.2;
  }
  body #sb-order-check.sb-fab-hush:not(.sb-fab-yield) { opacity: .72 !important; }

  @media (max-width: 820px) {
    /* ---- (4) 本文は14px以上、ボタンの中の文字は15px以上 ---- */
    .sb-prod-desc        { font-size: 14px; }
    .sb-prod-stock       { font-size: 14px; }
    .sb-prod button      { font-size: 16px; }
    .sb-more-btn         { font-size: 16px; }
    .sb-cat              { font-size: 14px; }
    .sb-empty            { font-size: 14px; }
    .sb-search           { font-size: 16px; }  /* iOSで入力時に画面が勝手に拡大するのも防ぐ */
    .sb-modal .row .go,
    .sb-modal .row .cancel { font-size: 16px; }
    .sb-modal .code-box  { font-size: 14px; }
    #sb-acc-menu         { font-size: 14px; }
    /* 白地の補足文字は 4.76:1 の既定色にそろえる（--ds-c-sub-c と同じ考え方） */
    .sb-prod-desc        { color: #64748b; }

    /* ---- (3) カテゴリ名が「モンスターストラ…」と切れる件。1行固定→2行まで折り返す ---- */
    .sb-prod-cat {
      white-space: normal; text-overflow: clip; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
      line-height: 1.35; word-break: break-word;
    }

    /* ---- (1) タップできる要素を最小 46px に ----   ==EXP-T1143== 44px -> 46px
       ページ本体(#stage)は画面幅に合わせて縮小表示されるため、46pxと書いても
       実際には45pxしか出ない。--m44-hit に「縮小しても46pxになる値」をJSが入れる。
       46px という数字は EXP-T0797 の --min-tap と同じ。画面の中で最小サイズが
       44px と 46px に割れていたので、こちら側を 46px に寄せて一本化した。 */
    .sb-prod button { min-height: var(--m44-hit, 46px); flex: none; }
    .sb-more-btn    { min-height: var(--m44-hit, 46px); }
    .sb-cat         { min-height: var(--m44-hit, 46px); display: inline-flex; align-items: center; }
    .sb-cats        { gap: 8px; }
    /* 見た目の大きさは変えずに、透明な当たり判定だけ広げる */
    .ob-btn { position: relative; }
    .ob-btn::after {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: max(100%, var(--m44-hit, 46px)); height: max(100%, var(--m44-hit, 46px));
      transform: translate(-50%, -50%);
    }
    /* 固定ナビは縮小の外なので実寸でよい（大きさは下の EXP-T0797 が 46px に上書きする） */
    #sb-nav .nv-burger, #sb-nav .nv-acc { position: relative; }
    #sb-nav .nv-burger::after, #sb-nav .nv-acc::after {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: max(100%, 44px); height: max(100%, 44px);
      transform: translate(-50%, -50%);
    }

    /* ==EXP-T0797== スマホ表示でのタップ要素サイズ不足を 46px に統一・文字サイズ拡大 */
    :root { --min-tap: 46px; }
    /* ==EXP-T1143== #stage は画面幅に合わせて縮小表示されるので、46px と書くと
       実際には45pxしか出ない。中だけ「縮小しても46pxになる値」(--m44-hit) に
       読み替える。#stage の外（ヘッダーのナビ・ダイアログの閉じるボタン）は
       縮小がかからないので上の 46px のまま。これで画面のどこでも実測46pxになる。 */
    #stage { --min-tap: var(--m44-hit, 46px); }
    .sb-tabs-btn { min-height: var(--min-tap); padding: 12px 16px; }
    .sb-prod-title, .ob-btn { position: relative; }
    /* ==EXP-T1300== 見える箱そのものも実寸44px以上にする（AREA-CARD）。
       当たり判定は下の ::after で実測45.8pxあり、箱の外2pxを押すと商品説明が開くのも確認済み。
       ただし箱の高さは 44px × ステージ縮小0.975 = 実寸41.8px しかなく、
       指が当たる範囲が見た目から分からない（測定でも毎回41pxと報告される）。
       縮小補正つきの --m44-hit を使い、見た目の箱と当たり判定を一致させる。 */
    .sb-prod-title { min-height: var(--m44-hit, 46px); }
    /* ==/EXP-T1300== */
    .sb-prod-title::after, .ob-btn::after {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: max(100%, var(--min-tap)); height: max(100%, var(--min-tap));
      transform: translate(-50%, -50%);
    }
    .sb-notice .cl, .cl { min-width: var(--min-tap) !important; min-height: var(--min-tap) !important; }
    .cl::after {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: max(100%, var(--min-tap)); height: max(100%, var(--min-tap));
      transform: translate(-50%, -50%);
    }
    #sb-nav .nv-burger::after, #sb-nav .nv-acc::after {
      width: max(100%, var(--min-tap)) !important; height: max(100%, var(--min-tap)) !important;
    }
    /* 説明文・規約リンクの文字サイズ確保 */
    .sb-prod-desc, footer a, .sbla1-sc a, .sb-site-desc { font-size: 14px !important; }
    /* カテゴリ文字切れ対策 */
    .sb-prod-cat {
      white-space: normal !important; text-overflow: clip !important; overflow: hidden !important;
      display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important;
      line-height: 1.35 !important; word-break: break-word !important;
    }
    /* ==/EXP-T0797== */

    /* ==EXP-T1022== スマホでのタップ可能領域（CTAやヘッダーアイコン）の実寸確保 */
    .sb-notice a { min-height: 44px !important; padding-top: 10px !important; padding-bottom: 10px !important; }
    #sb-nav .nv-burger, #sb-nav .nv-acc { min-width: 44px !important; min-height: 44px !important; padding: 10px !important; }
    /* ==/EXP-T1022== */

    /* ==EXP-T1051== ステージ縮小後も会員登録CTAを実寸44px以上に保つ */
    .sb-notice a { min-height: var(--m44-hit, 46px) !important; }
    /* ==/EXP-T1051== */

    /* ==EXP-T1024== 共有ボタン・配色切替・お知らせのリンクの当たり判定を44px相当へ
       #stage は画面幅に合わせて縮小表示されるため、40pxで作った丸は実測39pxになる。
       見た目を変えずに済むよう、透明な擬似要素だけを広げる（EXP-M44 と同じ考え方）。
       共有ボタンの間隔は10pxあり、片側2.5pxずつ広げても隣とは重ならない。 */
    .sb-share a, .sb-share button,
    .sb-thsw button,
    .sb-notice a { position: relative; }
    .sb-share a::after, .sb-share button::after,
    .sb-thsw button::after,
    .sb-notice a::after {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: max(100%, var(--m44-hit, 46px));
      height: max(100%, var(--m44-hit, 46px));
      transform: translate(-50%, -50%);
    }
    /* ==/EXP-T1024== */

    /* ---- (2) ページ末尾に、固定ボタンの高さ＋余白ぶんの空きを作る ----
       高さと色は下のJSが入れる。JSが動かなければ空きは0で従来どおり。 */
    body::after {
      content: ''; display: block;
      height: var(--m44-tail, 0px);
      background: var(--m44-tailbg, transparent);
    }
  }