@media (max-width:800px) {
  .home-hero + .global-nav .gnav-thumb { width: 70px; height: 84px; background: none; border: none; }
}
@media (min-width:1240px) {
  .home-hero + .global-nav { padding-bottom: 0; }
}
@media (max-width:800px) {
  .home-hero + .global-nav { display: block; background: none; border-bottom: none; margin-bottom: 71px; }
}
@media (min-width:1240px) {
  .home-hero + .global-nav > ul > .gnav-item > a { height: auto; gap: 20px; padding: 0 4px; justify-content: flex-start; }
}
/* ==========================================================================
   FIX版 app.css(2026-09-18 SP・タブレット修正)
   元: ステージングの app.css 2026-09-18 17:23 版(3165行)。
   変更内容: 依頼_SP修正_20260918.md の §1〜§9・§11(@media (max-width: 800px))と
     §12(@media (min-width: 801px) and (max-width: 1100px))を、該当セレクタの元の定義に統合したもの。
     1180px以上のPC表示に関わる指定は変更していない。
   検証: 「元CSS + override_SP修正.css を末尾追記した状態」と、幅26段階×トップ・商品一覧・商品詳細の
     全要素の計算済みスタイルを比較して差分ゼロ。
   取り込み方: 依頼_SP修正_20260918.md の「FIX版 app.css について」を参照(17:23 以降の変更を消さないこと)
   ========================================================================== */
/* ==========================================================================
   FIX版 app.css(2026-09-18)
   元: ステージングの app.css 2026-09-18 10:04 版(2769行。09-16 17:59 版に「フラッシュとパンくずの重なり修正」が入ったもの)。
   変更内容:
     1. 末尾に追記されていた2ブロック(09-14 デザイナー指示 / 09-16 共通部分とトップページ)の規則を、同じセレクタの元の定義に統合(見た目の変更なし)
     2. 修正依頼(2026-09-18) A〜D の CSS を該当セレクタの元の定義に統合(A 追加修正4件 / B 文字色 --ink #333333 / C 商品一覧・商品詳細 / D SP版)
     3. 元の定義に統合すると後続の別セレクタに負ける規則(.bulk-box / .product-detail .ship-note / .product-detail .pd-desc / .uni-cartform 等)と、
        既存に同じセレクタが無い新規の規則は、末尾の「新規」セクションにまとめた
     4. 09-18 のフラッシュ修正(.container > .flash …)はそのまま残してある(末尾「§3」のコメントごと)
   検証: 元CSS+依頼CSSを末尾追記した状態と、幅26段階×トップ・商品一覧・商品詳細の全要素の計算済みスタイルを比較して差分ゼロ
   取り込み方: 依頼_まとめ_20260918.md の「FIX版 app.css について」を参照(09-18 10:04 以降の変更を消さないこと)
   ========================================================================== */
/* ============================================================
   自重堂オンラインショップ — Order Ledger design system
   白地 / ヘアライン / tabular-nums / 単一アクセント(cobalt)
   ============================================================ */
:root {
  /* --- 4色パレット (2026-09-09 船戸指示) ---
     #333333 濃い文字(2026-09-17 に #505050 から変更) / #8CA0B4 罫線・ホバー / #F5F5F5 背景 / #C03B1F アクセント。
     在庫OKの緑・入力必須の黄など、意味を持つ機能色のみ可読性優先で据え置く。 */
  --paper: #ffffff; /* Surfaces */
  --canvas: #f5f5f5;
  /* Ink */
  --ink: #333333;
  --ink-muted: #7c7c7c;
  /* 弱い文字(505050の淡色) */
  --line: #8ca0b4; /* Lines */
  /* 罫線 */
  --accent: #c03b1f; /* Signal (アクセント) */
  --accent-wash: #f7ece9;
  /* Semantic */
  --danger: #c03b1f;
  /* 副次的な地色・線色 */
  --ink-soft: #6a6a6a;
  /* 本文よりわずかに弱い文字。ボタンのhoverなど */
  --row-hover: #eef1f4;
  /* 表の行ホバー(8CA0B4の淡色) */
  --line-strong: #8ca0b4;
  /* 一段濃い区切り */
  --canvas-alt: #ececec;
  /* 帯・見出し背景 */
  --danger-wash: #f7ece9;
  /* エラー表示の地色 */
  --accent-hover: #9e3019;
  /* アクセントの濃色(ボタンhover) */
  --ok: #1d7a3e;
  /* 在庫あり・検証通過(機能色・据え置き) */
  --field: #fff8dd;
  /* 入力・選択してほしい場所の地色(機能色・据え置き) */
  --field-line: #e2c96b;
  /* 同・枠線 */
  --warn: #b8860b;
  /* 警告(機能色・据え置き) */
  --gutter: clamp(20px, 4vw, 72px); /* 全幅レイアウト: ビューポート連動の左右余白 (Takram参照) */
  /* 本文(main.container)の最大幅。ノートPC(約1400px)を上限とし、これを超える画面では
     本文を中央寄せして左右に余白を作る。ヘッダー・カテゴリnav・TOPバナー・フッターは全幅のまま。
     (2026-09-09 船戸指示 / 資料 PC版_ウィンドウサイズ大.pdf) */
  --content-max: 1400px;
  /* タイポグラフィ (可読性研究の値を高齢ユーザー向けに120%拡大: 本文20px×1.7) */
  --fs-body: 20px;
  --lh-body: 1.7;
  --fs-data: 17px;
  /* 表・UIの数値データ */
  --lh-data: 1.5;
  --fs-caption: 16px;
  --lh-caption: 1.6;
}
@media (max-width:800px) {
  :root { --gutter: 15px; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
input, select, textarea, button { border-radius: 0; font-family: inherit; }
/* ---- パンくずリスト ---- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size:14.4px; color: var(--ink-muted); margin-bottom: 32px;
}
.breadcrumb a { color: var(--ink-muted); }
.breadcrumb a:hover { color: var(--line); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb .current { color: var(--ink); }
/* ---- アンカージャンプ ---- */
.jump-link {
  float: right; font-size:15.6px; font-weight: 400;
  color: var(--accent) !important; text-decoration: underline;
}
[id] { scroll-margin-top: 16px; }
/* ---- 行頭カラースウォッチ ---- */
.row-swatch {
  display: inline-block; width: 14px; height: 14px;
  border: 1px solid rgba(23, 24, 26, 0.18);
  vertical-align: -2px; margin-right: 8px; background: var(--line);
}
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  font-feature-settings: "palt" 1;
  color: var(--ink);
  background: var(--canvas);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.01em;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--line); }
img { max-width: 100%; }
/* キーボード操作時のフォーカス位置を必ず見えるようにする。
   個別の :focus に outline:none を書くと詳細度でこの指定に勝ってしまい、
   キーボードだけの利用者が現在位置を見失う。border-color だけを変えること。 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ---- utilities ---- */
.eyebrow {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size:13px; font-weight: 600; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* ---- header ---- */
.site-header { background: var(--paper); }
/* 下罫線なし(2026-09-09 船戸指示) */
/* ヘッダ(2026-09-09 デザイン指示): ロゴマーク+店名 | 30px | 丸型の検索欄 | 30px | アイコン+ラベルのリンク列 | カート */
.header-inner {
  max-width: none; margin: 0; padding: 24px var(--gutter);
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 6px; }
.logo { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: 0.12em; white-space: nowrap; }
.logo small { display: none; }
/* キャッチコピーはロゴに出さない(デザイン指示) */
.header-search { flex: 1; display: flex; min-width: 220px; position: relative; }
.header-search input {
  flex: 1; padding: 7px 44px 7px 22px; border: 1px solid #c9c9c9; border-radius: 999px;
  font-size: 14px; line-height: 1.4; background: var(--paper); font-family: inherit;
  min-width: 0; /* inputの自動最小幅でボタンがフォーム外にはみ出すのを防ぐ */
}
@media (min-width:801px) {
  .header-search input { height: 30px; padding: 0 40px 0 28px; border-color: var(--ink); font-size: 13px; }
}
@media (max-width:800px) {
  .header-search input { height: 40px; border-color: var(--ink); font-size: 13px; }
}
.header-search input::placeholder { color: #9a9a9a; }
@media (min-width:801px) {
  .header-search input::placeholder { color: var(--line); }
}
@media (max-width:800px) {
  .header-search input::placeholder { color: var(--line); }
}
.header-search input:focus { border-color: var(--ink); }
/* 検索ボタンは入力欄の右端に虫めがねを重ねる */
.header-search button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (min-width:801px) {
  .header-search button { color: var(--accent); right: 12px; width: 24px; height: 24px; }
}
.header-search button:hover { color: var(--accent); }
.header-search .search-icon { width: 20px; height: 20px; }
@media (min-width:801px) {
  .header-search .search-icon { width: 19px; height: 19px; }
}
.header-links { display: flex; align-items: center; gap: 28px; }
.header-links a {
  font-size: 12px; color: var(--ink); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
@media (min-width:801px) {
  .header-links a { gap: 10px; font-size: 13px; }
}
.header-links a:hover { color: var(--line); text-decoration: none; }
/* PCでもSVGアイコン+ラベルで表示。旧テキストアイコン(♡・≡)は使わない */
.header-links .hl-icon { display: none; }
.header-links .hicon { display: block; width: 34px; height: 34px; stroke-width: 1.3; }
.header-links .soon {
  font-size:11px; color: var(--ink-muted);
  border: 1px solid var(--line); padding: 0 4px;
}
/* 検索トグルはPCでは非表示(ロゴマーク画像はPCでも店名の左に出す) */
.hicon { display: none; }
.search-toggle { display: none; }
.logo-sp { display: block; height: 46px; width: 46px; flex-shrink: 0; }
.hl-label { display: inline-flex; align-items: center; gap: 5px; }
/* ---- SP: 1段目=ロゴ+メニュー / 2段目=アイコン5個(2026-09-10 船戸指示・SPデザイン) ---- */
/* メニュー(ハンバーガー)はSP専用。PCはカテゴリナビが常時見えるため出さない */
.header-menu { display: none; }
@media (max-width: 800px) {
  .site-header { border-bottom: 1px solid var(--line); }
  .header-inner { padding: 0 15px; gap: 0; flex-wrap: wrap; align-items: center; min-height: 100px; }
  /* 1段目: ロゴ画像+店名を1行で。幅に合わせて字を伸縮させ、折り返さない */
  .brand { order: 1; margin-right: auto; display: flex; align-items: center; min-width: 0; }
  .logo {
    display: block; font-size: clamp(15px, 5vw, 26px); line-height: 1.2;
    width: auto; white-space: nowrap; margin-left: 8px; letter-spacing: 0.02em;
  }
  .logo small { display: none; }
  .logo-sp { display: block; height: 27px; width: 28px; flex-shrink: 0; }
  .header-menu {
    order: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: none; background: none;
    color: var(--ink); cursor: pointer; flex-shrink: 0;
  }
  .header-menu svg { width: 28px; height: 28px; }
  /* サイドメニューを持たない画面では出さない(display指定に負けないよう属性セレクタで) */
  .header-menu[hidden] { display: none; }
  /* 2段目: 検索・お気に入り・履歴・マイページ・カートを全幅に均等配置 */
  .hl-label { display: none; }
  .hicon, .header-links .hicon, .header-cart .hicon { display: block; width: 26px; height: 26px; }
  .header-links {
  order: 4;
  flex-basis: 100%;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 0 9px;
  height: 50px;
}
  .header-links a, .search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; color: var(--ink);
  }
  .search-toggle { border: none; background: none; cursor: pointer; }
  .logout-form { display: none; }
  /* ログアウトはマイページから */
  /* カートはアイコン+個数バッジ(リンク列の5つ目) */
  .header-cart {
    border: none; background: none; padding: 0; margin-left: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; position: relative;
  }
  .cart-badge {
    display: block; position: absolute; top: 2px; right: 0;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: #e60012; color: var(--paper);
    font-size: 11px; font-weight: 600; line-height: 17px; text-align: center;
    border-radius: 9px;
  }
  /* 検索バーはアイコンタップでアイコン列の下に全幅表示 */
  .header-search { display: none; flex-basis: 100%; min-width: 0; order: 5; margin: 2px 0 8px; }
  .site-header.search-open .header-search { display: flex; }
}
@media (min-width:801px) {
  .logo { display: none; }
  .logo-sp { width: 30px; height: 29px; }
}
/* ---- 中間幅(801〜1300px): 検索バーとリンク群が押し合って潰れるため検索バーを2段目へ
       (ログイン時のリンク群込みで1段に収まるのが実測1300px前後のため) ---- */
@media (min-width: 801px) and (max-width: 1300px) {
  .header-inner { gap: 12px 20px; }
  .brand { margin-right: auto; }
  .header-search { order: 10; flex-basis: 100%; min-width: 0; }
}
@media (min-width:801px) {
  .header-inner { padding: 26px var(--gutter); min-height: 100px; box-sizing: border-box; }
}
@media (min-width:1240px) {
  .header-inner { flex-wrap: nowrap; }
  .header-search { flex: 1 1 auto; min-width: 260px; margin-left: auto; max-width: 495px; }
}
@media (min-width:1440px) {
  .header-search { flex: 0 0 495px; }
}
/* カートはPCもアイコン+個数バッジ(赤)。テキストの「カート(n)」は出さない */
.header-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border: none; background: none;
  color: var(--ink) !important; margin-left: -4px;
}
.header-cart:hover { color: var(--line) !important; }
.header-cart .hicon { display: block; width: 38px; height: 38px; stroke-width: 1.3; }
.header-cart .hl-label { display: none; }
.cart-badge {
  display: block; position: absolute; top: 0; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #e60012; color: var(--paper);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border-radius: 9px;
}
/* SP: PC用の大きさ指定が後ろにあるため、ここで改めてSPの寸法に戻す */
@media (max-width: 800px) {
  .brand { gap: 0; }
  .header-links .hicon, .header-cart .hicon { width: 24px; height: 24px; stroke-width: 1.6; }
  .header-cart { width: 44px; height: 44px; margin-left: 0; }
  .cart-badge {
  top: 2px;
  right: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 400;
  line-height: 20px;
  border-radius: 10px;
  background: var(--accent);
}
}
@media (min-width:801px) {
  .cart-badge { min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; background: var(--accent); font-size: 10.5px; font-weight: 400; border-radius: 10px; }
  .header-links .hicon, .header-cart .hicon { display: none; }
  .brand { gap: 30px; }
}
/* ---- global nav (写真つきカテゴリメニュー) ---- */
.global-nav { background: var(--paper); border-bottom: 1px solid var(--line); }
.global-nav > ul {
  max-width: none; margin: 0; padding: 0 calc(var(--gutter) - 16px);
  display: flex; list-style: none; flex-wrap: wrap;
}
/* 1240px以上では全カテゴリを1行に収める。
   文字サイズ・左右余白・サムネイルを画面幅に応じて縮めて(1800pxで最大、1240pxで最小)、
   折り返しを止める。1240px未満は従来どおり折り返す(800px以下はSP用の指定) */
@media (min-width: 1240px) {
  /* overflow を付けるとドロップダウン(サブカテゴリ)がスクロール領域内に閉じ込められて
     見えなくなるため、折り返し禁止のみにする(1240px以上で収まることは確認済み)。
     広い画面ではカテゴリ間のアキを伸縮させ、画面幅いっぱいに均等配置する(PDF指示) */
  .global-nav > ul { flex-wrap: nowrap; justify-content: space-between; display: grid; grid-template-columns: repeat(12, 1fr); padding: 0 var(--gutter); }
}
@media (min-width:801px) and (max-width:1239px) {
  .global-nav > ul { display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 var(--gutter); }
}
.global-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px clamp(8px, 1.79vw - 14.2px, 18px) 10px; color: var(--ink);
  font-size: clamp(13px, 0.357vw + 8.57px, 15px);
  letter-spacing: 0.02em; white-space: nowrap;
}
/* ホバー・選択中は赤文字にせず、下線(黒)だけで示す(2026-09-09 船戸指示: 赤文字をやめる) */
.global-nav a:hover { color: var(--ink); box-shadow: none; text-decoration: none; }
.global-nav a.active { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
.gnav-thumb {
  width: clamp(52px, 4.29vw - 1.2px, 76px);
  height: clamp(44px, 3.21vw + 4.2px, 62px);
  background: var(--canvas);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gnav-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gnav-glyph { font-size:28px; color: var(--ink-muted); }
.global-nav a:hover .gnav-thumb { border-color: transparent; }
/* PC: 画像の枠・地色をなくして大きめに見せ、カテゴリの間は縦の区切り線で分ける(2026-09-09 船戸指示)。
   SPは従来どおり(枠付きサムネイル) */
@media (min-width: 801px) {
  .global-nav a { padding-top: 16px; padding-bottom: 12px; gap: 8px; }
  .gnav-thumb {
  width: 56px;
  height: 68px;
  background: none;
  border: none;
}
  .gnav-thumb img { mix-blend-mode: normal; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
  /* 「すべてのアイテム」は丸囲みの ALL */
  .gnav-glyph {
    width: 56px; height: 56px; border: 1px solid var(--ink-muted); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; letter-spacing: 0.08em; color: var(--ink-muted);
  }
  .gnav-item + .gnav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--line);
  pointer-events: none;
  display: none;
}
}
/* ラベルは2行分の高さで統一し、上下・左右とも中央に置く。
   2行になるまとめ項目(ポロシャツ/Tシャツ等)と1行の項目で縦位置が揃うようにする */
.gnav-label {
  line-height: 1.2; text-align: center;
  min-height: 2.4em; display: flex; align-items: center; justify-content: center;
}
@media (min-width:801px) {
  .gnav-label { font-size: 14px; line-height: 15px; min-height: 0; }
}
/* 中カテゴリのドロップダウン(ホバー/フォーカスで表示) */
.gnav-item { position: relative; border-left: none; }
@media (min-width:801px) {
  .gnav-item { border-left: none; }
}
.global-nav .gnav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  z-index: 50;
  background: var(--paper);
  border: 1px solid var(--ink);
  list-style: none;
  padding: 4px 0;
  box-shadow: 0 6px 18px rgba(23, 24, 26, 0.12);
  border-color: var(--line);
}
@media (min-width:1240px) {
  .global-nav .gnav-dropdown { top: calc(100% + 12px); }
}
.global-nav .gnav-item.open .gnav-dropdown { display: block; }
.gnav-dropdown li a {
  display: block;
  padding: 3px 18px;
  font-size: 16px;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: none;
}
.gnav-dropdown li a:hover { background: none; color: var(--line); box-shadow: none; }
.gnav-dropdown .gnav-dropdown-all a {
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* ドロップダウンが画面外に出ないよう端の項目は左寄せ */
.gnav-item:first-child .gnav-dropdown { left: 0; transform: none; }
.gnav-item:last-child .gnav-dropdown { left: auto; right: 0; transform: none; }
@media (max-width: 800px) {
  .gnav-thumb { width: 58px; height: 48px; }
  .global-nav a { padding: 10px 12px 8px; font-size:14px; }
}
/* ---- layout ---- */
.container { max-width: var(--content-max); margin: 0 auto; padding: 40px var(--gutter) 0; }
@media (max-width: 800px) {
  .container { padding: 16px var(--gutter) 0; }
}
.flash {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  color: var(--ink); padding: 12px 16px; margin-bottom: 24px;
  font-size:18px; line-height: var(--lh-caption);
}
/* フラッシュ文言に添える導線(大口はお問い合わせへ 等) */
.flash .flash-link { display: inline-block; margin-left: 10px; font-weight: 700; text-decoration: underline; color: inherit; white-space: nowrap; }
/* 数量入力の上限案内(商品ページ・カート) */
.qty-limit-note { display: none; margin-top: 6px; font-size: 13.5px; color: var(--danger); line-height: 1.5; }
.qty-limit-note.is-visible { display: block; }
.qty-limit-note a { color: var(--accent); text-decoration: underline; }
.flash-error { border-left-color: var(--danger); color: var(--danger); }
.page-title {
  font-size: clamp(31px, 2.9vw, 41px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.4;
  border-left: none; padding-left: 0; padding-bottom: 14px; margin-bottom: 32px;
  border-bottom: 2px solid var(--ink);
}
/* ---- ヒーローバナースライダー ---- */
/* TOPバナー帯: 本文(1400px上限)の外に出した全幅領域。左右は共通ガターだけ空ける。
   固定お知らせ(home-hero__news)は本文と幅を揃えて中央寄せ、スライダーは帯いっぱいに広げる */
.home-hero { padding: 10px var(--gutter) 0; border-top: 1px solid var(--line); }
.home-hero__news { max-width: var(--content-max); margin: 0 auto; }
.home-hero .hero-slider { margin-bottom: 32px; }
@media (min-width:801px) {
  .home-hero .hero-slider { margin-bottom: 30px; }
}
@media (max-width:800px) {
  .home-hero .hero-slider { margin-bottom: 61px; }
}
.hero-slider { position: relative; overflow: hidden; margin-bottom: 48px; }
.hero-track {
  display: flex; gap: 16px; align-items: stretch;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-slide {
  flex: 0 0 min(1130px, 85%);
  border: 1px solid var(--line); background: var(--paper);
  opacity: 0.45; transition: opacity 0.4s;
}
.hero-slide.active { opacity: 1; }
.hero-slide img { display: block; width: 100%; height: auto; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-size:21.6px;
  cursor: pointer; line-height: 1;
}
.hero-arrow:hover { border-color: var(--accent); color: var(--accent); }
.hero-prev { left: 12px; }
.hero-next { right: 12px; }
/* ドットは6pxの丸(選択中=濃いグレー、他=薄い青灰)を約20px間隔で並べる(2026-09-09 船戸指示)。
   見た目は小さいが、ボタン自体は高さ44pxでタップ領域を確保する(擬似要素でドットを描画) */
.hero-dots { display: flex; justify-content: center; gap: 0; margin-top: 8px; }
@media (max-width:800px) {
  .hero-dots { margin-top: 20px; }
}
.hero-dots button {
  width: 20px; height: 44px; padding: 0; border: none;
  background: none; cursor: pointer; display: grid; place-items: center;
}
@media (max-width:800px) {
  .hero-dots button { height: 24px; }
}
.hero-dots button::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #9fb3c8;
}
.hero-dots button.active::before { background: #555; }
.hero-dots button:hover::before { background: var(--ink-muted); }
/* ---- トップバナー (メインビジュアル下・2カラム) ---- */
.top-banners {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 0; /* スライダー下の余白はそのまま(2026-09-10 船戸指示: -28px → 0) */
}
.top-banner { display: block; border: 1px solid var(--line); overflow: hidden; }
@media (min-width:801px) {
  .top-banner { border: none; }
}
@media (max-width:800px) {
  .top-banner { border: none; }
}
.top-banner img { display: block; width: 100%; height: auto; }
a.top-banner:hover { border-color: var(--accent); opacity: 0.92; }
@media (min-width:801px) {
  a.top-banner:hover { border: none; }
}
@media (max-width: 800px) {
  .top-banners { grid-template-columns: 1fr; gap: 20px; }
}
@media (min-width:801px) and (max-width:999px) {
  .top-banners { grid-template-columns: 1fr; gap: 16px; }
}
/* ---- 商品グリッド (帳票グリッド: 1pxヘアライン共有) ---- */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (max-width:800px) {
  .product-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
}
/* 商品一覧は幅に応じて3列に落とさず、PCでは常に4列(#379。SPは2列) */
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) {
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:801px) and (max-width:1239px) {
  .product-grid, .product-grid--4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); background: var(--paper); }
}
.product-card {
  background: var(--paper); border: none; border-radius: 0;
  overflow: hidden; display: flex; flex-direction: column;
}
@media (min-width:801px) and (max-width:1239px) {
  .product-card { box-shadow: 1px 1px 0 0 var(--line); }
}
.product-card:hover { outline: 1px solid var(--accent); outline-offset: 0; box-shadow: none; outline-color: var(--accent); position: relative; z-index: 1; }
@media (min-width:801px) and (max-width:1239px) {
  .product-card:hover { box-shadow: 1px 1px 0 0 var(--line); }
}
.product-card a { display: flex; flex-direction: column; height: 100%; }
.product-card .thumb {
  aspect-ratio: 1; background: var(--paper); padding: 16px;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width:801px) {
  .product-card .thumb { aspect-ratio: auto; height: 278px; padding: 14px 0 0; align-items: flex-start; }
}
@media (max-width:800px) {
  .product-card .thumb { height: 183px; padding: 15px 0 0; align-items: flex-start; }
}
.product-card .thumb img { max-height: 100%; object-fit: contain; }
@media (min-width:801px) {
  .product-card .thumb img { width: 220px; height: 264px; max-height: 264px; object-fit: contain; }
}
@media (max-width:800px) {
  .product-card .thumb img { width: 140px; height: 168px; object-fit: contain; }
}
.product-card .info { padding: 12px 14px 16px; flex: 1; }
@media (min-width:801px) {
  .product-card .info { padding: 30px 14px 31px 29px; }
}
@media (max-width:800px) {
  .product-card .info { padding: 10px 8px 12px 16px; }
}
.product-card .brand { font-size:13px; color: var(--ink-muted); letter-spacing: 0.06em; }
@media (min-width:801px) {
  .product-card .brand { font-size: 14px; color: var(--accent); letter-spacing: 0; line-height: 1; }
}
@media (max-width:800px) {
  .product-card .brand { font-size: 11px; color: var(--accent); letter-spacing: 0; }
}
.product-card .name { font-size:17px; font-weight: 500; min-height: 2.6em; line-height: 1.6; }
@media (min-width:801px) {
  .product-card .name { font-size: 16px; font-weight: 400; line-height: 28px; min-height: 56px; margin-top: 14px; }
}
@media (max-width:800px) {
  .product-card .name { font-size: 14px; font-weight: 400; line-height: 23px; min-height: 46px; margin-top: 6px; }
}
.product-card:hover .name { color: var(--line); }
.product-card .price {
  font-family: "Noto Sans JP", sans-serif; font-size:19px; font-weight: 600; line-height: 1.3;
  color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 8px;
}
@media (min-width:801px) {
  .product-card .price { font-size: 16px; font-weight: 700; margin-top: 14px; line-height: 1.4; }
}
@media (max-width:800px) {
  .product-card .price { font-size: 14px; font-weight: 700; margin-top: 4px; }
}
.product-card .price small { font-size:13px; color: var(--ink-muted); font-weight: 400; }
@media (min-width:801px) {
  .product-card .price small { font-size: 14px; color: var(--ink); font-weight: 400; }
}
@media (max-width:800px) {
  .product-card .price small { font-size: 11px; color: var(--ink); font-weight: 400; }
}
/* ---- 一覧レイアウト ---- */
.list-layout { display: flex; gap: clamp(32px, 4vw, 64px); align-items: flex-start; }
/* stickyの中身が画面より背が高いと、下端までスクロールするまで追従が始まらず
   「追従が遅い」と感じる(#375/#410)。画面内に収めて内側をスクロールさせ、常に追従させる */
.sidebar {
  width: 230px; flex-shrink: 0; position: sticky; top: 24px;
  max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain;
}
.sidebar section { background: none; border: none; border-radius: 0; margin-bottom: 32px; overflow: visible; }
.sidebar h3 {
  background: none; color: var(--ink); font-size:15.6px; font-weight: 700;
  padding: 0 0 8px; border-bottom: 1px solid var(--ink);
}
.sidebar ul { list-style: none; }
.sidebar li a {
  display: block; padding: 9px 0; font-size:15.6px; color: var(--ink);
  border-top: 1px solid var(--line);
}
.sidebar li:first-child a { border-top: none; }
.sidebar li a:hover { color: var(--line); }
.sidebar li a.active {
  background: none; font-weight: 700; color: var(--ink);
  border-left: 2px solid var(--accent); padding-left: 10px;
}
.sidebar .soon { font-size:12px; color: var(--ink-muted); border: 1px solid var(--line); padding: 0 4px; margin-left: 4px; }
.sidebar a.cat-parent { font-weight: 600; }
/* 商品別で探す: 中カテゴリはアコーディオンで開閉する */
.sidebar .cat-acc-list { list-style: none; }
.sidebar .cat-acc-row { display: flex; align-items: stretch; }
.sidebar .cat-acc-row .cat-parent { flex: 1; min-width: 0; }
.sidebar .cat-acc-toggle {
  flex: 0 0 44px; background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--ink-muted);
}
.sidebar .cat-acc-toggle::before {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s; margin-top: -4px;
}
@media (min-width:801px) {
  .sidebar .cat-acc-toggle::before { width: 9px; height: 9px; border-width: 1px; }
}
.sidebar .cat-acc.is-open > .cat-acc-row .cat-acc-toggle::before { transform: rotate(225deg); margin-top: 4px; }
.sidebar .cat-acc-toggle:hover { color: var(--line); }
.sidebar .cat-acc:not(.is-open) > .cat-children { display: none; }
.sidebar .cat-children { list-style: none; }
.sidebar .cat-children li a {
  padding-left: 14px; font-size:15px; color: var(--ink-muted);
  border-top: 1px dashed var(--line);
}
.sidebar .cat-children li a:hover { color: var(--line); }
.sidebar .cat-children li a.active { color: var(--ink); padding-left: 22px; }
.list-main { flex: 1; min-width: 0; }
/* サイドメニューのドロワー用パーツ(PCでは非表示) */
.sidebar-toggle, .sidebar-backdrop, .sidebar-drawer-head { display: none; }
@media (max-width: 800px) {
  /* 縦積み時は align-items: flex-start を解除して全幅に。
     (flex-startのままだと子がfit-content幅になり、表の内容幅までページが広がる) */
  .list-layout { flex-direction: column; align-items: stretch; }
  .list-main { width: 100%; max-width: 100%; }
  /* 開閉ボタン(コンテンツ最上部に表示)。
     いまはヘッダのメニュー(ハンバーガー)から開くため非表示にしている
     (2026-09-10 船戸指示。要素は残す — ヘッダのボタンがこれをクリックして開くため) */
  .sidebar-toggle {
    display: none; align-items: center; gap: 10px;
    width: 100%; padding: 12px 14px; margin-bottom: 4px;
    border: 1px solid var(--line); background: var(--paper);
    font-size: 15px; font-weight: 600; color: var(--ink);
    font-family: inherit; cursor: pointer;
  }
  .sidebar-toggle-icon { display: inline-flex; flex-direction: column; gap: 4px; }
  .sidebar-toggle-icon span { width: 18px; height: 2px; background: var(--ink); }
  /* サイドバーは左からのドロワーに収納 */
  .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  margin: 0;
  padding: 70px 37px 48px 33px;
  background: var(--paper);
  z-index: 1200;
  max-height: none;
  /* PC用のsticky内スクロール指定を打ち消す */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-105%);
  transition: transform 0.25s ease;
  overflow-x: hidden;
}
  .sidebar.open { transform: none; box-shadow: 0 0 44px rgba(23, 24, 26, 0.35); }
  .sidebar-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  border: none;
  padding: 0;
  margin: 0;
  height: 0;
  overflow: visible;
}
  .sidebar-close {
  border: none;
  background: none;
  font-size: 0;
  color: transparent;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  position: absolute;
  top: 22px;
  right: 18px;
  width: 30px;
  height: 30px;
}
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1190;
    background: rgba(23, 24, 26, 0.45);
  }
  .sidebar-backdrop[hidden] { display: none; }
  /* ドロワー表示中は背面のスクロールを止める */
  body.sidebar-locked { overflow: hidden; }
}
@media (min-width:801px) {
  .list-main { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}
@media (min-width:801px) {
  .sidebar { position: static; max-height: none; overflow: visible; }
}
/* ---- 商品詳細 ---- */
.product-detail {
  display: block; background: var(--paper);
  border: 1px solid var(--line); border-radius: 0; padding: clamp(20px, 3vw, 48px);
}
.product-detail .detail-main { display: flex; gap: clamp(32px, 4vw, 72px); }
/* flex子のmin-width:auto対策(内側の表などで列が広がりページがはみ出すのを防ぐ) */
.product-detail .detail-main > * { min-width: 0; }
@media (min-width:801px) and (max-width:1100px) {
  .product-detail .detail-main > * { width: 100%; }
}
@media (min-width:801px) and (max-width:1239px) {
  .product-detail .detail-main > * { width: 100%; }
}
.product-detail img { max-width: 100%; }
@media (max-width: 800px) {
  .product-detail { padding: 15px; overflow-x: clip; }
  .product-detail .detail-main { flex-direction: column; }
  /* サイズ表はコンテンツ幅で表示(あふれる場合はラッパーで横スクロール) */
  .size-table { min-width: 0; width: 100%; }
  .size-table th, .size-table td { padding: 7px 8px; font-size: 13.5px; }
}
@media (min-width:801px) {
  .product-detail .detail-main { gap: 60px; }
}
@media (min-width:801px) and (max-width:1100px) {
  .product-detail .detail-main { flex-direction: column; }
}
@media (min-width:801px) and (max-width:1239px) {
  .product-detail .detail-main { flex-direction: column; }
}
@media (min-width:801px) {
  .product-detail { padding: 60px; }
}
@media (min-width:801px) and (max-width:1239px) {
  .product-detail { padding: 30px; }
}
@media (min-width:1240px) and (max-width:1399px) {
  .product-detail { padding: clamp(30px, calc(30px + (100vw - 1240px) * 0.1875), 60px); }
}
/* 商品詳細の情報カラム(2026-09-09 船戸指示・デザイン画像): 上60px、各パーツの間は50px */
.product-detail .info { padding-top: 12px; }
/* 枠の余白48px + 12px = 60px */
.pd-brand { color: var(--accent); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
@media (min-width:801px) {
  .pd-brand { font-size: 16px; font-weight: 400; color: var(--accent); margin-bottom: 8px; }
}
@media (max-width:800px) {
  .pd-brand { font-size: 15px; font-weight: 400; color: var(--accent); }
}
.pd-mode {
  margin-top: 50px; height: 75px; display: flex; align-items: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 700;
}
.product-detail .uni-select { margin-top: 50px; }
.product-detail .ship-note { margin: 50px 0 0; padding: 14px 16px; border: 1px solid #ddd; border-left: 1px solid #ddd; }
.product-detail .uni-cartform { margin-top: 50px; }
@media (min-width:801px) {
  .product-detail .uni-cartform { margin-top: 50px; gap: 10px; }
}
.pd-bulk-link { margin: 50px 0 0; font-size: 15px; }
@media (min-width:801px) {
  .pd-bulk-link { margin-top: 50px; font-size: 16px; text-align: center; }
}
.pd-bulk-link a { color: var(--accent); text-decoration: underline; }
.product-detail .contact-tel { margin-top: 50px; margin-bottom: 0; border-left: 1px solid var(--line); padding: 16px 20px; }
@media (min-width:801px) {
  .product-detail .contact-tel {
  margin-top: 50px;
  min-height: 90px;
  padding: 11px 20px 0 27px;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 22px;
  row-gap: 2px;
  font-size: 16px;
  align-content: start;
  line-height: 1.5;
}
}
@media (max-width:800px) {
  .product-detail .contact-tel {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 12px;
  gap: 2px;
}
}
.pd-fav { margin-top: 20px; }
@media (min-width:801px) {
  .pd-fav { margin-top: 20px; }
}
.pd-fav .btn, .pd-fav form { display: block; width: 100%; }
.pd-fav .btn { text-align: center; }
@media (min-width:801px) {
  .pd-fav .btn { height: 46px; padding: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 400; border-color: var(--line); color: var(--ink); background: var(--paper); }
}
.pd-desc { margin-top: 50px; padding-top: 50px; border-top: 1px solid var(--line); }
@media (max-width: 800px) {
  .product-detail .info { padding-top: 0; }
  .pd-mode { margin-top: 32px; height: 75px; box-sizing: border-box; display: flex; align-items: center; font-size: 18px; font-weight: 400; margin: 50px 0; }
  .product-detail .uni-select, .product-detail .ship-note, .product-detail .uni-cartform, .pd-bulk-link, .product-detail .contact-tel { margin-top: 28px; }
  .pd-desc { margin-top: 32px; padding-top: 32px; }
}
@media (min-width:801px) {
  .pd-desc { font-size: 16px; line-height: 30px; }
  .pd-mode { font-size: 20px; font-weight: 400; }
  .product-detail .info { padding-top: 0; }
}
@media (min-width:1240px) and (max-width:1399px) {
  .product-detail .info { flex: 0 0 400px !important; }
}
/* 白枠内の続き見出し: 別枠に見えないようヘアラインで軽く区切る */
.section-title--inbox { margin-top: 48px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
/* 画像カラムと商品説明カラムは5:5(2026-09-09 船戸指示)。SPは1カラム(下の指定で100%) */
.product-detail .photo { flex: 1 1 0; min-width: 0; }
/* PC: スクロールしても画像列が product-detail の枠内で追従する(枠の下端で止まる)。2026-09-09 船戸指示 */
@media (min-width: 801px) {
  .product-detail .photo { position: sticky; top: 24px; align-self: flex-start; }
}
@media (max-width: 800px) {
  .product-detail .photo { width: 100%; }
}
@media (min-width:801px) and (max-width:1100px) {
  .product-detail .photo { position: static; }
}
@media (min-width:801px) and (max-width:1239px) {
  .product-detail .photo { position: static; }
}
@media (min-width:1240px) and (max-width:1399px) {
  .product-detail .photo { flex: 1 1 0; min-width: 0; }
}
.product-detail h1 { font-size: clamp(25px, 2.2vw, 31px); font-weight: 700; line-height: 1.5; margin-bottom: 6px; }
.product-detail .hinban { color: var(--ink-muted); font-size:15.6px; margin-bottom: 12px; }
@media (min-width:801px) {
  .product-detail .hinban { font-size: 14px; color: var(--ink); margin-top: 22px; }
}
@media (max-width:800px) {
  .product-detail .hinban { font-size: 13px; }
}
.product-detail .price-main {
  font-family: "Noto Sans JP", sans-serif; font-size:31px; font-weight: 600; line-height: 1.2;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
@media (min-width:801px) {
  .product-detail .price-main { font-size: 32px; font-weight: 700; }
}
@media (max-width:800px) {
  .product-detail .price-main { font-size: 25px; font-weight: 700; }
}
.product-detail .desc {
  margin: 20px 0; white-space: pre-line;
  font-size:19px; line-height: 1.8; max-width: 42em;
}
.badge {
  display: inline-block; background: var(--paper); color: var(--ink-muted);
  font-size:13px; font-weight: 500; letter-spacing: 0.04em;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 0; margin-right: 6px;
}
.badge.season { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.badge.proc { background: var(--paper); color: var(--accent); border-color: var(--accent); }
.notice-box {
  border: 1px dashed var(--line); color: var(--ink); background: var(--paper);
  padding: 14px 18px; font-size:17px; line-height: 1.7; margin: 24px 0; border-radius: 0;
}
/* ---- 加工指示の A案/B案 比較(検討が終わったら不要になる) ---- */
.ab-switch {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--line); padding: 10px 14px; margin-bottom: 16px;
  font-size: 15px; color: var(--ink-muted);
}
.ab-switch .ab-tag {
  font-size: 13px; font-weight: 700; color: var(--accent);
  border: 1px solid var(--accent); padding: 2px 8px;
}
.ab-switch a { color: var(--accent); text-decoration: underline; margin-left: auto; }
.proc-add-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* ボタンの右に並べる。幅が足りず折り返したときは右端に寄せる */
.ab-link { font-size: 14px; color: var(--accent); text-decoration: underline;
  white-space: nowrap; margin-left: auto; }
/* ---- B案: 加工指示を「重ねて表示」する(集中モード) ----
   ヘッダー・グローバルナビ・フッターは出さず、入力だけが目に入る状態にする。 */
body.proc-lightbox {
  background: rgba(23, 24, 26, .72);
  min-height: 100vh; padding: 24px 16px;
}
/* カートから重ねて開いたとき(iframe)は、暗幕は親側が出す */
body.proc-embed { background: transparent; padding: 0; }
body.proc-lightbox main.container {
  background: var(--paper); border: 1px solid var(--line);
  max-width: 960px; margin: 0 auto; padding: 0 32px 32px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}
body.proc-embed main.container { box-shadow: none; border: none; max-width: 100%; }
/* 枠の見出し(常に上に貼り付く) */
.lb-head {
  position: sticky; top: 0; z-index: 5;
  margin: 0 -32px 20px; padding: 14px 32px 12px;
  background: var(--paper); border-bottom: 1px solid var(--ink);
}
.lb-head-row { display: flex; align-items: center; gap: 16px; }
.lb-title { font-size: 21px; font-weight: 700; line-height: 1.4; }
.lb-title .lb-sub {
  display: block; font-size: 14px; font-weight: 400; color: var(--ink-muted); margin-top: 2px;
}
/* ライトボックス見出し右のアクション(従来方式リンク+閉じる) */
.lb-head-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.lb-classic-link { font-size: 14px; color: var(--accent); text-decoration: underline; white-space: nowrap; }
.lb-classic-link:hover { opacity: 0.8; }
.lb-close {
  flex: none; width: 40px; height: 40px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer; border-radius: 0;
}
.lb-close:hover { background: var(--canvas); border-color: var(--ink); }
@media (max-width: 800px) {
  .lb-head-actions { gap: 8px; }
  .lb-classic-link { font-size: 12.5px; }
}
/* カート側の暗幕。iframe で加工指示の画面を重ねる */
.lb-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(23, 24, 26, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.lb-backdrop iframe {
  width: min(960px, 100%); height: 100%; border: 1px solid var(--line);
  background: var(--paper); box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}
body.lb-open { overflow: hidden; }
@media (max-width: 800px) {
  body.proc-lightbox { padding: 0; }
  body.proc-lightbox main.container { padding: 0 16px 24px; border: none; }
  .lb-head { margin: 0 -16px 16px; padding: 14px 16px; }
  .lb-title { font-size: 18px; }
  .lb-backdrop { padding: 0; }
  .lb-backdrop iframe { width: 100%; height: 100%; border: none; }
}
/* ステップの進行グラフィック(1 → 2 → 3 → 4)。
   sticky の見出しに入れて、いまどこにいるかが常に見えるようにする */
.pstep-flow {
  list-style: none; margin: 14px 0 2px; padding: 0;
  display: flex;
}
.pstep-flow li {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* 丸と丸を結ぶ線。済んだ区間はアクセント色になる */
.pstep-flow li:not(:first-child)::before {
  content: ""; position: absolute; top: 23px; right: 50%;
  width: 100%; height: 2px; background: var(--line);
}
.pstep-flow li.is-done:not(:first-child)::before,
.pstep-flow li.is-current:not(:first-child)::before { background: var(--accent); }
/* 進行方向を示す矢じり(区間の中央) */
.pstep-flow li:not(:first-child)::after {
  content: ""; position: absolute; top: 18px; left: -6px;
  border: 6px solid transparent; border-left: 9px solid var(--line); border-right: none;
}
.pstep-flow li.is-done:not(:first-child)::after,
.pstep-flow li.is-current:not(:first-child)::after { border-left-color: var(--accent); }
.pstep-flow .dot {
  position: relative; z-index: 1;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 2px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink-muted);
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: transform .15s, border-color .15s, background .15s;
}
.pstep-flow .lbl { font-size: 13.5px; color: var(--ink-muted); line-height: 1.3; text-align: center; }
/* いまの段: 塗り+少し大きく */
.pstep-flow li.is-current .dot {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: scale(1.12); box-shadow: 0 0 0 5px var(--accent-wash);
}
.pstep-flow li.is-current .lbl { color: var(--ink); font-weight: 700; }
/* 済んだ段: ✓。クリックで戻れる */
.pstep-flow li.is-done { cursor: pointer; }
.pstep-flow li.is-done .dot { border-color: var(--accent); color: var(--accent); }
.pstep-flow li.is-done .num { display: none; }
.pstep-flow li.is-done .dot::after { content: "✓"; font-size: 22px; }
.pstep-flow li.is-done:hover .dot { background: var(--accent-wash); }
.pstep-flow li.is-done:hover .lbl { color: var(--line); text-decoration: underline; }
.pstep[hidden] { display: none; }
.pstep-nav {
  display: flex; align-items: center; gap: 16px; margin-top: 24px;
  border-top: 1px solid var(--line); padding-top: 18px;
}
.pstep-nav .pstep-count {
  margin-left: auto; font-size: 15px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.pstep-nav [data-step-next] { min-width: 200px; }
/* ステップ入力のエラー(下部ナビ横と、表示中の段の見出し直下の2か所)。
   赤文字だけでは見落とされたため、赤地に白文字で目立たせる(2026-09-06 船戸指示) */
.pstep-error, .js-step-err {
  margin-top: 12px; background: var(--danger); color: #fff;
  padding: 12px 16px; font-size: 15.6px; font-weight: 700; line-height: 1.5;
}
/* .field-error と併用しているため、文字色は後勝ちにならないよう詳細度を上げる */
.js-step-err, .field-error.js-step-err { margin: 0 0 14px; color: #fff; }
.js-step-err::before { content: "⚠ "; }
@media (max-width: 800px) {
  .pstep-flow { margin-top: 10px; }
  .pstep-flow .dot { width: 34px; height: 34px; font-size: 15px; }
  .pstep-flow li:not(:first-child)::before { top: 17px; }
  .pstep-flow li:not(:first-child)::after { top: 12px; border-width: 5px; border-left-width: 7px; }
  .pstep-flow li.is-done .dot::after { font-size: 16px; }
  .pstep-flow .lbl { font-size: 11px; }
  .pstep-nav { flex-wrap: wrap; }
  .pstep-nav .btn { flex: 1; }
  .pstep-nav .pstep-count { order: -1; width: 100%; margin-left: 0; text-align: center; }
}
/* ---- 郵便番号からの住所入力 ---- */
.zip-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zip-msg {
  display: block; margin-top: 6px; font-size: 13px; color: var(--ink-muted); line-height: 1.6;
}
.zip-msg.is-ok { color: var(--accent); font-weight: 700; }
.zip-msg.is-error { color: var(--danger); font-weight: 700; }
/* ---- 管理画面: 入金反映の案内バナー ----
   銀行振込の消込は毎日の運用作業。注文詳細の先頭で見落とさないようにする */
.paid-banner {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 2px solid var(--accent); background: var(--accent-wash);
  padding: 14px 18px; margin: 16px 0;
}
.paid-banner-text { flex: 1; min-width: 280px; font-size: 15.6px; line-height: 1.7; }
.paid-banner-text strong { font-size: 17px; color: var(--accent); }
.paid-banner-text .sub { color: var(--ink-muted); font-size: 13.5px; }
.paid-banner form { flex: none; }
/* ---- 直送(注文者と異なるお届け先) ---- */
.ship-toggle {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); padding: 16px 18px; cursor: pointer;
  font-size: 17px; line-height: 1.7;
}
.ship-toggle:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.ship-toggle input { margin-top: .4em; width: 20px; height: 20px; flex: none; }
.ship-toggle-sub { display: block; font-size: 15px; color: var(--ink-muted); margin-top: 2px; }
#ship-to-fields { margin-top: 20px; }
/* 見落とすと受け取り拒否につながる案内。地色を付けて本文と区別する */
.ship-warn {
  border: 2px solid var(--danger); background: var(--danger-wash);
  padding: 14px 18px; margin: 0 0 20px; font-size: 17px; line-height: 1.75;
}
.ship-warn strong { display: block; color: var(--danger); font-size: 18px; }
.ship-warn span { display: block; margin-top: 4px; }
.ship-warn span strong { display: inline; font-size: inherit; }
/* ---- 商品ギャラリー ---- */
.gallery-main {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--paper);
}
.gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (min-width:801px) {
  .gallery-thumbs { gap: 15px; margin-top: 25px; }
}
@media (max-width:800px) {
  .gallery-thumbs { gap: 12px; margin-top: 25px; }
}
.gallery-thumb {
  width: 64px; height: 64px; padding: 2px; background: var(--paper); cursor: pointer;
  border: 1px solid var(--line); border-radius: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
@media (min-width:801px) {
  .gallery-thumb { width: calc((100% - 45px) / 4); height: auto; padding: 0; aspect-ratio: 90 / 108; }
}
@media (max-width:800px) {
  .gallery-thumb { width: calc((100% - 36px) / 4); height: auto; aspect-ratio: 70 / 84; padding: 0; }
}
.gallery-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--accent); }
/* ---- 購入テーブル (台帳: 横ヘアラインのみ) ---- */
/* 一括購入マトリクスは品番によってサイズ列が増える。列数は商品次第で上限が無いため、
   画面幅に関係なく、収まらないときは表の中だけを横スクロールさせる。
   以前は max-width:800px の中にだけ書いていたため、801px以上でサイズ列の多い品番が
   表の外にはみ出していた。 */
.buy-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.buy-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: var(--fs-data); line-height: var(--lh-data); }
.buy-table th {
  background: var(--paper); color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  font-size:14.4px; font-weight: 600; letter-spacing: 0.04em; text-align: left;
  padding: 12px; border: none; border-bottom: 2px solid var(--ink);
}
.buy-table td { padding: 11px 12px; border: none; border-bottom: 1px solid var(--line); }
.buy-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.buy-table .ctr { text-align: center; }
.buy-table tbody tr:hover { background: var(--row-hover); }
.buy-table tr.color-head td {
  background: var(--canvas); font-weight: 700; letter-spacing: 0.02em;
  border-left: none; border-top: 1px solid var(--ink); border-bottom: none;
}
.buy-table tr.color-head:hover td { background: var(--canvas); }
.buy-table input.qty {
  width: 64px; padding: 8px; border: 1px solid var(--line); border-radius: 0;
  text-align: right; font-family: "Noto Sans JP", sans-serif; font-size:18px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.buy-table input.qty:focus { border-color: var(--ink); }
.buy-table input.qty.filled { border-color: var(--accent); background: var(--accent-wash); }
/* タブレット〜小さめのノートPC。ここで少し詰めておくと、サイズ列が10前後までは
   横スクロールなしで収まる。それを超える品番はスクロールに任せる。 */
@media (max-width: 1200px) {
  .buy-table th, .buy-table td { padding: 10px 8px; }
  .buy-table input.qty { width: 56px; padding: 7px 6px; }
}
.stock-ok { color: var(--ink-muted); font-size:14.4px; }
.stock-ok::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  background: var(--ink-muted); margin-right: 6px; vertical-align: 1px;
}
.stock-low { color: var(--danger); font-size:14.4px; }
.stock-out { color: var(--ink-muted); font-size:14.4px; }
/* ---- sticky合計バー (台帳ストリップ) ---- */
/* 一括購入の白枠(2026-09-09 船戸指示・デザイン画像): 上60px・下60px、見出しは上下罫線の帯(75px) */
.bulk-box { padding: 60px 56px 60px; }
.bulk-title {
  height: 75px; display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 17px; font-weight: 700; letter-spacing: 0.04em; margin: 0;
}
.bulk-notes { font-size: 13.5px; line-height: 1.9; color: var(--ink); margin: 22px 0 30px; }
.bulk-box .buy-table th { font-weight: 400; border-bottom: 1px solid var(--line); padding: 12px 16px; }
@media (min-width:801px) {
  .bulk-box .buy-table th { font-size: 16px; font-weight: 400; color: var(--ink); padding: 0 12px; height: 50px; }
}
@media (min-width:801px) and (max-width:1239px) {
  .bulk-box .buy-table th { white-space: nowrap; }
}
.bulk-box .buy-table td { padding: 13px 16px; }
@media (min-width:801px) {
  .bulk-box .buy-table td { padding: 0 12px; height: 50px; font-size: 16px; }
}
@media (max-width:800px) {
  .bulk-box .buy-table td { overflow-wrap: anywhere; }
}
.bulk-box .buy-table tr.color-head td { border-top: none; background: var(--canvas); font-weight: 400; }
@media (min-width:801px) {
  .bulk-box .buy-table tr.color-head td { height: 50px; background: var(--canvas); font-size: 16px; }
}
.bulk-box .buy-table input.qty { width: 88px; text-align: center; }
@media (min-width:801px) {
  .bulk-box .buy-table input.qty { width: 85px; height: 30px; padding: 0; font-size: 18px; font-weight: 400; text-align: center; color: var(--ink); }
}
@media (max-width:800px) {
  .bulk-box .buy-table input.qty { width: 100%; max-width: 52px; height: 32px; padding: 0; font-size: 14px; }
}
@media (min-width:801px) and (max-width:999px) {
  .bulk-box .buy-table input.qty { width: 64px; }
}
/* 再入荷通知の登録行: 表の続きとして罫線で区切る(赤枠・赤地は使わない) */
.restock-box { padding: 14px 16px 16px; border-bottom: 1px solid var(--line); font-size: 15px; }
@media (min-width:801px) {
  .restock-box { padding: 14px 0 16px; font-size: 16px; }
}
.restock-box__row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.restock-box__row input { flex: 1; min-width: 240px; padding: 9px 14px; border: 1px solid var(--line); font-size: 15px; }
@media (min-width:801px) {
  .restock-box__row input { max-width: 583px; height: 30px; padding: 0 10px; font-size: 14px; }
}
@media (max-width: 800px) {
  .bulk-box { padding: 28px 12px 32px; }
  .bulk-title { height: 75px; font-size: 18px; display: flex; align-items: center; justify-content: center; font-weight: 400; flex-direction: column; text-align: center; line-height: 1.5; }
  .bulk-notes { font-size: 13px; margin: 16px 0 20px; }
}
@media (min-width:801px) {
  .bulk-notes { font-size: 14px; line-height: 24px; margin: 24px 0 30px; }
  .bulk-title { font-size: 20px; font-weight: 400; letter-spacing: 0; }
}
.bulk-footer {
  position: sticky; bottom: 0; background: var(--paper); color: var(--ink);
  border-top: none; border-radius: 0;
  padding: 16px 0; margin-top: 34px;   /* 表との間は50px(余白16px+34px) */
  display: flex; align-items: baseline; justify-content: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.bulk-footer .eyebrow { margin: 0; align-self: center; }
@media (min-width:801px) {
  .bulk-footer .eyebrow { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
}
@media (max-width:800px) {
  .bulk-footer .eyebrow { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
}
.bulk-footer .sum { font-size:15.6px; color: var(--ink-muted); }
@media (min-width:801px) {
  .bulk-footer .sum { font-size: 16px; color: var(--ink); }
}
.bulk-footer .sum strong {
  font-family: "Noto Sans JP", sans-serif; font-size:36px; font-weight: 600; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; margin: 0 4px;
}
.bulk-footer .sum strong.has-value { color: var(--accent); }
.bulk-footer .btn { margin-left: auto; }
/* ---- ボタン ---- */
.btn {
  display: inline-block; padding: 12px 24px; border: 1px solid transparent; border-radius: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size:17px; font-weight: 600; line-height: 1; letter-spacing: 0.02em;
  cursor: pointer; text-align: center;
}
/* 狭い削除列で「削/除」と1文字ずつ縦に折れないように(#407) */
.cart-table .cell-remove .btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
/* 使えないボタンは見えたまま薄くする(帳票発行の回数切れ・カード注文の請求書など) */
.btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* 主要ボタン: 黒背景×白文字(ユニクロ式)。ホバーは青ではなくダークグレー */
.btn-primary, .btn-navy { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover, .btn-navy:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); opacity: 1; }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--canvas-alt); color: var(--ink); border-color: var(--ink); opacity: 1; }
.btn-danger-ghost { background: var(--paper); color: var(--danger); border-color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-wash); }
.btn-sm { padding: 8px 16px; font-size:15.6px; }
/* ---- スマホ: ボタンは全幅を基本に(ユーザビリティ優先。管理画面は除外) ---- */
@media (max-width: 800px) {
  .btn { display: block; width: 100%; }
  .admin-shell .btn { display: inline-block; width: auto; }
  /* 画像つきグローバルナビは非表示(カテゴリはドロワーメニューから) */
  .global-nav { display: none; }
  /* 商品詳細: 数量ステッパーを1行使いにし「カートに入れる」を全幅で改行 */
  .uni-cartform { flex-direction: column; }
  .qty-stepper { width: auto; flex: none; display: inline-flex; }
  .qty-stepper input { flex: 1; width: auto; }
  .qty-stepper button { width: 56px; }
  .uni-cartform .btn { max-width: none; }
  /* 一括購入マトリクス: セルを詰めて画面内に収める(横スクロールは共通指定) */
  .buy-table th, .buy-table td { padding: 9px 6px; font-size: 13.5px; }
  .buy-table input.qty { width: 52px; padding: 6px 4px; font-size: 16px; }
  /* sticky合計バー: 「まとめてカートに入れる」を全幅で改行 */
  .bulk-footer { padding: 12px 14px; gap: 4px 14px; position: static; margin-top: 50px; }
  .bulk-footer .sum strong { font-size: 26px; }
  .bulk-footer .btn { flex-basis: 100%; margin-left: 0; }
}
@media (min-width:801px) {
  .bulk-footer { margin-top: 50px; }
}
@media (min-width:1240px) {
  .global-nav { padding-bottom: 37px; }
}
@media (min-width:801px) {
  .global-nav { border-bottom: 1px solid var(--line); }
  .bulk-footer .btn { width: 260px; height: 45px; padding: 0; font-size: 16px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; }
  .bulk-footer .sum strong { font-size: 40px; font-weight: 400; color: var(--ink); }
}
/* ---- セクション (バイリンガル見出し) ---- */
.section-title {
  font-size:23px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.5;
  background: none; color: var(--ink);
  padding: 0 0 12px; border-radius: 0;
  margin-top: 64px; border-bottom: 1px solid var(--ink);
}
.section-title .eyebrow { color: var(--ink-muted); }
.section-body {
  background: var(--paper); border: 1px solid var(--line); border-top: none;
  padding: 24px; border-radius: 0;
}
/* スマホ: 画面幅375pxではこの24pxが効いて中身の実効幅が約285pxまで減るため詰める */
@media (max-width: 800px) {
  .section-body { padding: 16px 12px; }
}
/* トップ用: 見出しは番号なし・中央揃え・文字幅だけの下線。上100px/下50px、中身は枠なし(2026-09-09 船戸指示) */
.section-title--center {
  text-align: center; font-size: 24px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.4;
  margin: 100px 0 50px; padding: 0; border-bottom: none;
  /* 下線は文字幅だけ(見出し全幅の罫線にしない) */
  text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; text-decoration-color: var(--ink-muted);
}
.section-body--plain { background: none; border: none; padding: 0; }
@media (max-width: 800px) {
  .section-title--center { font-size: 20px; margin: 80px 0 40px; font-weight: 400; }
}
@media (min-width:801px) {
  .section-title--center { font-size: 26px; font-weight: 400; }
}
/* ---- カート ---- */
.cart-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: var(--fs-data); line-height: 1.6; }
.cart-table th {
  background: var(--paper); color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  font-size:14.4px; font-weight: 600; letter-spacing: 0.04em; text-align: left;
  padding: 12px; border: none; border-bottom: 2px solid var(--ink);
}
.cart-table td { padding: 12px; border: none; border-bottom: 1px solid var(--line); vertical-align: top; }
.cart-table input.qty {
  padding: 8px; border: 1px solid var(--line); border-radius: 0; text-align: right;
  font-family: "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums; font-size: 16px;
}
/* iOS Safari は font-size 16px 未満の入力欄にフォーカスすると自動でズームし、
   レイアウトが跳ねる。スマホでは全フォーム部品を 16px 以上に底上げする
   (より詳細なセレクタで大きく指定している欄はそのまま) */
@media (max-width: 800px) {
  input, select, textarea { font-size: 16px; }
}
/* 中身の寄せは列クラスで持つ(スマホのカード表示で上書きするため、インラインでは書かない) */
.cart-table .cell-price, .cart-table .cell-subtotal { text-align: right; }
.cart-table .cell-qty, .cart-table .cell-remove { text-align: center; }
/* スマホ: 6列は物理的に収まらないため、1商品=1カードに組み替える。
   単価・数量・小計は「ラベル+値」の行にして、見出し行は非表示にする。
   .cart-cards はセルに cell-* クラスと data-label を付けた表だけに付けること
   (checkout/order_history 等の素の .cart-table に当たるとラベルが消えるため) */
@media (max-width: 800px) {
  .cart-cards, .cart-cards tbody { display: block; }
  .cart-cards thead { display: none; }
  .cart-cards tr { display: block; border: 1px solid var(--line); background: var(--paper); padding: 14px; }
  .cart-cards tr + tr { margin-top: 16px; }
  .cart-cards td { display: block; padding: 0; border-bottom: none; }
  .cart-cards .cell-product { padding-bottom: 12px; }
  .cart-cards td[data-label] {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 10px 0; border-top: 1px dashed var(--line); text-align: right;
  }
  .cart-cards td[data-label]::before {
    content: attr(data-label); flex-shrink: 0;
    font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-muted);
  }
  .cart-cards .cell-proc { border-top: 1px dashed var(--line); padding-top: 10px; }
  .cart-cards .cell-remove { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
  /* クーポンの「適用」はスマホの全幅ボタン化から除外(入力欄と同じ行に置くため)。
     入力欄はブラウザ既定の最小幅(size=20相当)を持ち flex でも縮まないため、min-width を外す */
  .coupon-form .btn { display: inline-block; width: auto; flex-shrink: 0; }
  .coupon-form input { min-width: 0; }
}
.proc-box {
  background: var(--paper); border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 0; padding: 10px 12px; font-size:15.6px; margin-top: 6px;
}
/* 購入手続き: 倉庫取り寄せの同意ボックス。黄色の地色(--field=入力してほしい場所の色)で目立たせる */
.stock-consent {
  background: var(--field); border: 2px solid var(--warn); border-radius: 0;
  padding: 16px; margin: 0 0 16px;
}
.stock-consent__title { display: block; color: var(--accent); font-size: 17px; }
.stock-consent__text { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 8px 0; }
.stock-consent__note { font-size: 14px; color: var(--ink); }
.stock-consent__check {
  display: flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.stock-consent__check input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.proc-none {
  background: var(--paper); border: 1px dashed var(--line); border-radius: 0;
  padding: 10px 12px; font-size:15.6px; margin-top: 6px; color: var(--ink-muted);
}
/* カート: 加工の適用点数バッジ(同一商品の一部だけ加工するときの見落とし防止) */
.proc-amount-badge {
  display: inline-block; background: var(--accent-wash); color: var(--accent);
  border: 1px solid var(--accent); padding: 1px 8px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 名入れ刺繍: 入力(6) + 見本画像(4) の2カラム */
.emb-layout {
  display: grid; grid-template-columns: 6fr 4fr; gap: 24px; align-items: start;
}
/* 見本も同様に画面内に収めて常時追従(#375) */
.emb-samples { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
/* ステップ入力では貼り付く見出し(.lb-head)が上に重なるため、その高さの分だけ
   下に付ける。高さはJSが --lb-head-h に入れる(#375 差し戻し: 見本の上部が見切れる) */
.proc-lightbox .emb-samples {
  top: calc(var(--lb-head-h, 0px) + 16px);
  max-height: calc(100vh - var(--lb-head-h, 0px) - 32px);
}
.emb-sample {
  border: 1px solid var(--line); background: var(--paper);
  padding: 16px; border-radius: 0; margin-bottom: 16px;
}
.emb-sample:last-child { margin-bottom: 0; }
.emb-sample h4 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.emb-sample img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.emb-sample .note {
  font-size: 14px; color: var(--ink-muted); line-height: 1.6; margin-top: 8px;
}
@media (max-width: 800px) {
  .emb-layout { grid-template-columns: 1fr; gap: 16px; }
  .emb-samples { position: static; }
}
/* 加工指示フォームの料金サマリ(入力に応じてリアルタイム更新される合計) */
.fee-summary {
  background: var(--accent-wash); border: 1px solid var(--accent);
  border-left-width: 4px; border-radius: 0;
  padding: 16px 20px; margin-top: 16px; font-size: 17px; line-height: 1.6;
}
.fee-summary .fee-label {
  display: block; font-weight: 700; color: var(--accent);
  font-size: 15.6px; letter-spacing: 0.02em; margin-bottom: 4px;
}
.fee-summary .fee-total {
  font-size: 22px; font-weight: 700; color: var(--ink);
  font-family: "Noto Sans JP", sans-serif; font-variant-numeric: tabular-nums;
}
.totals-box {
  background: var(--paper); border: 1px solid var(--line); border-radius: 0;
  padding: 24px 28px; max-width: 480px; margin-left: auto; margin-top: 24px;
}
.totals-box .row { display: flex; justify-content: space-between; padding: 5px 0; font-size:17px; }
/* 金額は折り返さない(SPで「-500 / 円」「35,220 / 円」と2行に割れていた)。長いラベル側を折り返す */
.totals-box .row span:first-child { min-width: 0; }
.totals-box .row span:last-child { font-variant-numeric: tabular-nums; font-family: "Noto Sans JP", sans-serif; white-space: nowrap; flex-shrink: 0; margin-left: 12px; }
.totals-box .grand {
  border-top: 2px solid var(--ink); margin-top: 10px; padding-top: 12px;
  font-size:23px; font-weight: 700; color: var(--ink);
}
/* ---- 納期・返品のご案内(partials/terms_notice) ---- */
.terms-notice {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-top: 24px;
}
.terms-notice .terms-block {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 18px 22px; font-size: var(--fs-caption); line-height: var(--lh-caption);
}
.terms-notice h3 {
  font-size: 16.5px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--ink); margin-bottom: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.terms-notice ul { list-style: none; }
.terms-notice li { padding-left: 1em; text-indent: -1em; margin-bottom: 4px; }
.terms-notice li::before { content: "・"; }
@media (max-width: 800px) {
  .terms-notice { grid-template-columns: 1fr; }
}
/* ---- マイページ 注文詳細: 配送状況・お届け先・支払方法 ---- */
.order-status-box {
  background: var(--accent-wash); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 16px 20px; margin-bottom: 20px;
  display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center;
}
.order-status-box .order-status-step { font-size: 17px; }
.order-status-box .label {
  display: block; font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-muted); margin-bottom: 2px;
}
.order-info-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.order-info-card {
  background: var(--paper); border: 1px solid var(--line); padding: 16px 20px;
  font-size: 16px; line-height: 1.7;
}
.order-info-card h3 {
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-muted); margin-bottom: 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
@media (max-width: 800px) {
  .order-status-box { flex-direction: column; align-items: flex-start; gap: 10px; }
  .order-info-grid { grid-template-columns: 1fr; }
}
/* ---- フォーム ---- */
.form-table { width: 100%; border-collapse: collapse; background: var(--paper); }
.form-table th {
  width: 200px; background: var(--canvas); text-align: left;
  padding: 12px; border: 1px solid var(--line);
  font-size:17px; font-weight: 500; vertical-align: top;
}
.form-table td { padding: 12px; border: 1px solid var(--line); }
/* 文字を入力する欄はすべて同じ見た目にする。
   type を書き漏らすとブラウザ既定のまま(幅も文字サイズも違う)になるため、
   新しい type を使うときはここにも足すこと。
   色は入力幅が内容で決まるため、意図的に含めない。
   日付(お届け希望日)は素の欄のままだと高さ・枠が他と揃わないため含める。 */
.form-table input[type=text], .form-table input[type=email], .form-table input[type=number],
.form-table input[type=tel], .form-table input[type=password], .form-table input[type=url],
.form-table input[type=search], .form-table input[type=date],
.form-table select, .form-table textarea {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 0;
  font-size:19px; line-height: 1.5; font-family: inherit;
  width: 100%; max-width: 480px; background: var(--paper);
}
.form-table input:focus, .form-table select:focus, .form-table textarea:focus {
  border-color: var(--ink);
}
/* スマホ: 項目名列(200px固定)が入力欄を約100px幅まで潰してしまうため、
   項目名と入力欄を縦に積む。width の !important は
   個別ビューのインライン指定(style="width:180px" 等)を打ち消すため */
@media (max-width: 800px) {
  .form-table, .form-table tbody, .form-table tr { display: block; }
  .form-table th, .form-table td { display: block; width: auto !important; border: none; }
  .form-table tr { border: 1px solid var(--line); }
  .form-table tr + tr { margin-top: -1px; }
  .form-table th { padding: 10px 12px 8px; }
  .form-table td { padding: 0 12px 14px; }
  /* 確認画面: 項目名の折り返し禁止を解除し、メールアドレス等の長い連続文字列を折り返す */
  .confirm-table th { white-space: normal; }
  .confirm-table td { overflow-wrap: anywhere; }
}
.required::after {
  content: "必須"; font-size:12px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent); border: 1px solid var(--accent); background: var(--paper);
  padding: 1px 6px; border-radius: 0; margin-left: 8px;
  /* 「必/須」と2行に折れないように。幅が足りないときはバッジごと次の行へ */
  display: inline-block; white-space: nowrap;
}
/* フォーム表の「必須」バッジは、ラベルの長さに関わらず常にラベルの下の定位置に揃える(#406。
   ラベル横に置くと項目名の長さ次第で横に付いたり折り返したりして配置がまちまちになる) */
.form-table th.required::after { display: block; width: fit-content; margin: 4px 0 0; }
/* 画面上部・項目まとめのエラー枠。赤地に白文字で目立たせる(2026-09-06 船戸指示) */
.errors {
  background: var(--danger); border: none;
  color: #fff; padding: 14px 18px; border-radius: 0; margin-bottom: 24px; font-size:17px; font-weight: 600;
}
.errors ul { margin-left: 18px; }
.errors a { color: #fff; text-decoration: underline; }
/* 注意書き(エラーではない案内。過去の加工内容を反映したときの確認事項など) */
.notice {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--danger);
  color: var(--danger); padding: 12px 18px; margin-bottom: 24px; font-size: 17px;
}
.notice ul { margin-left: 18px; }
/* 各入力欄の直下に出すエラー(どこを直せばよいかを迷わせない) */
.field-error {
  color: var(--danger); font-size: 14.4px; font-weight: 600;
  margin-top: 4px; line-height: 1.5;
}
.field-error::before { content: "⚠ "; }
.field-hint {
  color: var(--ink-muted); font-size: 14.4px;
  margin-top: 4px; line-height: 1.5;
}
/* 割引行の下に出す注記(加工料金は割引対象外) */
.discount-note { font-size: 13px; color: var(--ink-muted); }
.discount-note span:last-child { display: none; }
/* 入力しなかった場合の扱いなど、エラーではないが目立たせたい注意書き(エラーの赤と区別して青) */
.field-caution {
  color: var(--accent); font-size: 14.4px; font-weight: 600;
  margin-top: 4px; line-height: 1.5;
}
/* パスワード欄の表示切替(public/js/password-toggle.js が自動で付ける) */
.pw-toggle-wrap { position: relative; display: inline-block; vertical-align: middle; }
.pw-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: var(--ink-muted); padding: 0;
}
.pw-toggle:hover { color: var(--ink); }
/* パスワードポリシーの一括提示(partials/password_checklist)。満たした条件に✓ */
.pw-checklist {
  list-style: none; margin-top: 6px; font-size: 14.4px; line-height: 1.6;
  color: var(--ink-muted);
}
.pw-checklist li::before { content: "○ "; }
.pw-checklist li.is-ok { color: var(--ok); font-weight: 600; }
.pw-checklist li.is-ok::before { content: "✓ "; }
/* ---- 加工指示フォーム ---- */
.option-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.option-card {
  border: 1px solid var(--line); border-radius: 0; padding: 16px;
  cursor: pointer; background: var(--paper); display: block; font-size:17px;
}
.option-card:hover { border-color: var(--accent); }
.option-card.selected { border-color: var(--accent); background: var(--accent-wash); }
.option-card .fee { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* 加工の種類を選ぶカードに、仕上がりの写真・図を添える。
   文字だけでは「どんな加工なのか」が伝わらないため。 */
.option-card.has-figure { position: relative; padding-top: 12px; }
.option-card .option-figure {
  display: block; width: 100%; max-width: 190px;
  height: 118px; object-fit: contain; object-position: center;
  margin: 8px auto 10px; background: var(--paper);
  border: 1px solid var(--line);
}
.option-card .option-hint {
  display: block; margin-top: 6px;
  font-size: var(--fs-caption); line-height: 1.5; color: var(--ink-muted);
}
/* 加工パネル内の説明図(位置・サイズ・縫い方・採寸) */
.proc-figure { margin: 12px 0 4px; }
.proc-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); background: var(--paper);
}
.proc-figure figcaption {
  margin-top: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: var(--ink-muted);
}
/* 図版は横に長いものが多いので、狭い画面では横スクロールさせて潰さない */
.proc-figure.wide { overflow-x: auto; }
.proc-figure.wide img { min-width: 560px; }
/* 採寸方法など縦に大きい写真は高さを抑える(入力欄が画面外へ押し出されないように) */
.proc-figure.tall img { max-height: 320px; width: auto; margin: 0 auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative;   /* 中のラジオを absolute で隠すため */
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 0;
  padding: 6px 12px; cursor: pointer; font-size:15.6px; background: var(--paper);
}
.chip:hover { border-color: var(--accent); }
.chip.selected { border-color: var(--accent); background: var(--accent-wash); font-weight: 600; }
/* チップの中のラジオは見た目上は隠すが、フォーカスは受け取れるようにする。
   display:none にするとタブ順から外れ、糸色・書体・バランスといった加工の必須項目が
   キーボードだけでは選択できなくなる(実際にそうなっていた)。
   矢印キーでのグループ内移動はブラウザ標準の挙動に任せる。 */
.chip input[type="radio"], .chip input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
  pointer-events: none;
}
/* 隠したラジオにフォーカスが当たっていることをチップ側で示す */
.chip:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip .swatch { width: 14px; height: 14px; border-radius: 0; border: 1px solid rgba(23, 24, 26, 0.2); }
.radio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.radio-grid label {
  border: 1px solid var(--line); border-radius: 0; padding: 10px 12px;
  cursor: pointer; font-size:15.6px; background: var(--paper); display: block;
}
.radio-grid label:hover { border-color: var(--accent); }
.radio-grid label.selected { border-color: var(--accent); background: var(--accent-wash); font-weight: 600; }
/* ---- 刺繍位置: 仕上がり図を直接押して選ぶ ----
   ラジオは残したまま画面から隠す(消すとキーボード操作とスクリーンリーダーで選べなくなる)。
   フォーカスはカード側の枠で見せる。 */
.radio-grid--figures { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.radio-grid--figures label {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px; text-align: center; line-height: 1.45;
}
.radio-grid--figures label input[type="radio"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.radio-grid--figures label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pos-fig {
  width: 100%; max-width: 200px; aspect-ratio: 1 / 1; object-fit: contain;
  background: #fff; border: 1px solid var(--line); display: block;
}
/* ロゴの仕上がりサイズ図は正方形に無理に収めず、画像本来の縦横比で表示(上下余白を出さない) */
.pos-fig--logo { aspect-ratio: auto; height: auto; }
.pos-fig--none {
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; color: var(--ink-muted); background: var(--canvas);
}
.pos-name { font-size: 14.8px; }
.radio-grid--figures label.selected .pos-fig { border-color: var(--accent); }
.piece-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.piece-row .piece-no {
  flex: 0 0 64px; font-size:15.6px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; text-align: right;
}
.piece-row input {
  flex: 1; min-width: 160px; max-width: 260px;
  padding: 9px 12px; border: 1px solid var(--line); font-size:18px;
}
.piece-row input:focus { border-color: var(--ink); }
.emb-preview {
  border: 1px solid var(--line); border-radius: 0; background: var(--canvas);
  color: var(--ink); padding: 32px; text-align: center; font-size:29px; margin-top: 10px;
  overflow-wrap: anywhere;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 120px;
}
.emb-preview .emb-preview-line { line-height: 1.3; }
/* 段数が増えるほど1段あたりの文字は小さく刺繍されるため、比率を見た目にも反映する */
.emb-preview[data-lines="2"] .emb-preview-line { font-size: 0.78em; }
.emb-preview[data-lines="3"] .emb-preview-line { font-size: 0.62em; }
/* 未入力の段は薄く出して、何段組みになるかが分かるようにする */
.emb-preview .is-placeholder { color: var(--ink-muted); opacity: 0.45; }
/* ---- 加工指示フォームのスマホ対応 ---- */
@media (max-width: 800px) {
  .option-cards { grid-template-columns: 1fr; }
  .radio-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .radio-grid label { padding: 12px 10px; }
  /* 図つきは2列。図が潰れない大きさを保つ */
  .radio-grid--figures { grid-template-columns: 1fr 1fr; gap: 8px; }
  .radio-grid--figures label { padding: 8px; gap: 6px; }
  .pos-name { font-size: 14px; }
  /* タップ領域を確保 */
  .chips { gap: 6px; }
  .chip { padding: 9px 12px; font-size: 15px; }
  /* 1着ごとの文字入力は縦積みにして各入力を全幅に */
  .piece-row { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
  .piece-row .piece-no { flex: none; text-align: left; font-weight: 600; }
  .piece-row input { width: 100%; min-width: 0; max-width: none; }
  .emb-preview { padding: 22px 14px; font-size: 24px; }
  .step-nav { flex-wrap: wrap; gap: 4px 10px; margin-bottom: 20px; }
  .step-nav span { font-size: 13px; }
  /* 説明文つきの長い選択肢(支払方法など)は2列に押し込まず1列で */
  .radio-grid.radio-grid--stack { grid-template-columns: 1fr; }
}
/* ============================================================
   入力してほしい場所を地色で示す(.form-guide を付けたフォーム内)

   加工指示は選ぶ項目が多く、どこを触ればよいのか分かりにくい。
   「まだ触っていない入力・選択肢」を薄い黄色にし、済んだものは
   通常の地色(選択肢は選択済みの青)に変わるようにしている。
   送信時に足りない項目は赤くする(.is-missing)。
   ============================================================ */
.form-guide input[type="text"],
.form-guide input[type="number"],
.form-guide input[type="tel"],
.form-guide input[type="email"],
.form-guide input[type="file"],
.form-guide textarea,
.form-guide select {
  background: var(--field);
  border-color: var(--field-line);
}
/* 任意項目(備考など)まで黄色にすると「全部埋めないといけない」ように見えるため、
   必須でないものは data-optional を付けて通常の地色に戻す */
.form-guide [data-optional] { background: var(--paper); border-color: var(--line); }
/* 入力済みの欄は役目を終えたので通常の地色に戻す */
.form-guide input.is-filled,
.form-guide textarea.is-filled { background: var(--paper); border-color: var(--line); }
/* 自動で値が入る欄(加工する点数)は、変更できることが伝わるよう常に色を残す */
.form-guide input[data-guide-always] { background: var(--field); border: 1px solid var(--field-line); }
/* 選択肢(カード・チップ)は、未選択のあいだだけ黄色。選ぶと従来どおり青 */
.form-guide .option-card:not(.selected),
.form-guide .radio-grid label:not(.selected),
.form-guide .chip:not(.selected) { background: var(--field); border-color: var(--field-line); }
/* 位置の図そのものは白のまま(図の中の色を邪魔しない) */
.form-guide .radio-grid--figures label:not(.selected) .pos-fig { background: #fff; }
/* 選べない選択肢(残り0点・対象外)は黄色にしない */
.form-guide .option-card.disabled { background: var(--paper); border-color: var(--line); }
/* チェックボックスの行。チェックが入るまで黄色 */
.form-guide .check-guide { display: block; background: var(--field); border: 1px solid var(--field-line); padding: 10px 12px; }
.form-guide .check-guide.is-checked { background: var(--paper); border-color: var(--line); }
/* 送信しようとして足りなかった項目は赤地にする */
.form-guide .is-missing,
.form-guide input.is-missing,
.form-guide textarea.is-missing,
.form-guide select.is-missing { background: var(--danger-wash); border-color: var(--danger); }
.form-guide .is-missing .option-card:not(.selected),
.form-guide .is-missing label:not(.selected),
.form-guide .is-missing .chip:not(.selected) { background: var(--danger-wash); border-color: var(--danger); }
.form-guide .is-missing .pos-fig { background: #fff; }
/* ---- 画像ズームビューア ---- */
.gallery-main img, .feature-photo img { cursor: zoom-in; }
.zoom-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(23, 24, 26, 0.92);
  display: flex; flex-direction: column;
}
.zoom-overlay[hidden] { display: none; }
.zoom-stage {
  flex: 1; margin: 24px 24px 0; background-color: var(--paper);
  background-repeat: no-repeat; background-size: 220%;
  background-position: 50% 50%; cursor: zoom-out;
  border: 1px solid var(--line);
}
.zoom-hint {
  color: var(--paper); text-align: center; padding: 12px;
  font-size:14.4px; letter-spacing: 0.06em;
}
@media (max-width: 800px) {
  .zoom-stage { background-size: 300%; margin: 12px 12px 0; }
}
/* ---- 通常購入 (ユニクロ式セレクタ) ---- */
.uni-select { margin-top: 4px; }
.uni-label { font-size:15.6px; color: var(--ink-muted); }
@media (min-width:801px) {
  .uni-label { font-size: 18px; color: var(--line); }
}
@media (max-width:800px) {
  .uni-label { font-size: 18px; color: var(--line); }
}
.uni-label strong { color: var(--ink); font-weight: 600; margin-left: 4px; }
@media (min-width:801px) {
  .uni-label strong { font-size: 18px; font-weight: 400; color: var(--ink); margin-left: 6px; }
}
@media (max-width:800px) {
  .uni-label strong { font-size: 18px; font-weight: 400; color: var(--ink); }
}
.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (min-width:801px) {
  .swatch-row { gap: 10px; margin-top: 19px; }
}
.swatch-btn {
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  border: 1px solid rgba(23, 24, 26, 0.18);
}
@media (min-width:801px) {
  .swatch-btn {
  width: 45px;
  height: 45px;
  padding: 5px;
  border: 1px solid var(--line);
  background-clip: content-box !important;
}
}
@media (max-width:800px) {
  .swatch-btn { width: 45px; height: 45px; padding: 5px; border: 1px solid var(--line); background-clip: content-box !important; }
}
.swatch-btn:hover { outline: 1px solid var(--accent); outline-offset: 2px; }
@media (min-width:801px) {
  .swatch-btn:hover { outline: 1px solid transparent; border-color: var(--ink); }
}
.swatch-btn.selected { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (min-width:801px) {
  .swatch-btn.selected { outline: 1px solid transparent; border-color: var(--ink); }
}
/* 再入荷通知の登録(在庫切れ選択時のライトボックス) */
.restock-modal {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(23, 24, 26, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.restock-modal[hidden] { display: none; }
.restock-modal__panel {
  background: var(--paper); border: 1px solid var(--line);
  width: 100%; max-width: 440px; padding: 24px 28px;
  box-shadow: 0 8px 32px rgba(23, 24, 26, 0.25);
}
.restock-modal__panel h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.restock-modal__item { font-size: 15.6px; line-height: 1.6; margin-bottom: 6px; }
.restock-modal__note { font-size: 14.4px; color: var(--ink-muted); margin-bottom: 14px; }
.restock-modal__panel input[type=email] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); font-size: 17px;
}
.restock-modal__panel input[type=email]:focus { border-color: var(--ink); }
.restock-modal__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 800px) {
  .restock-modal__actions .btn { flex: 1; width: auto; }
}
/* 全サイズ在庫切れのカラー: 斜線を重ねる(白フチ付きで濃色スウォッチでも見えるように)。
   非表示にはしない — ラインナップに存在することは見せ、選ぶと「在庫なし」表示になる */
.swatch-btn.soldout { position: relative; }
.swatch-btn.soldout::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 2.5px), var(--paper) calc(50% - 2.5px), var(--paper) calc(50% + 2.5px), transparent calc(50% + 2.5px)),
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(23, 24, 26, 0.8) 50%, transparent calc(50% + 1px));
  background-blend-mode: normal;
}
@media (min-width:801px) {
  .swatch-btn.soldout::after { inset: 5px; }
}
.size-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (min-width:801px) {
  .size-row { gap: 10px; margin-top: 12px; }
}
.size-btn {
  min-width: 52px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-family: "Noto Sans JP", sans-serif; font-size:17px; font-weight: 600;
  cursor: pointer;
}
@media (min-width:801px) {
  .size-btn {
  min-width: 45px;
  height: 45px;
  padding: 0 10px;
  border: 1px solid var(--line);
  color: var(--line);
  font-size: 18px;
  font-weight: 400;
}
}
@media (max-width:800px) {
  .size-btn { width: 45px; min-width: 45px; height: 45px; padding: 0; font-size: 18px; font-weight: 400; }
}
.size-btn:hover:not(:disabled):not(.selected) { border-color: var(--ink); }
@media (min-width:801px) {
  .size-btn:hover:not(:disabled):not(.selected) { border-color: var(--ink); color: var(--ink); }
}
.size-btn.selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (min-width:801px) {
  .size-btn.selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}
.size-btn:disabled {
  color: var(--line-strong); cursor: not-allowed;
  background: linear-gradient(to top right,
    var(--paper) calc(50% - 1px), var(--line) 50%, var(--paper) calc(50% + 1px));
}
/* 在庫切れサイズ: 斜線を入れるが選択は可能(選ぶと「在庫なし」表示+再入荷通知ボタン) */
.size-btn.soldout:not(.selected) {
  color: var(--ink-muted);
  background: linear-gradient(to top right,
    var(--paper) calc(50% - 1px), var(--line-strong) 50%, var(--paper) calc(50% + 1px));
}
.uni-price {
  font-family: "Noto Sans JP", sans-serif; font-size:29px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 18px 0 6px; display: flex; align-items: baseline; gap: 12px;
}
@media (min-width:801px) {
  .uni-price { margin: 54px 0 0; font-size: 27px; font-weight: 700; gap: 16px; flex-wrap: wrap; }
}
@media (max-width:800px) {
  .uni-price { flex-wrap: wrap; }
}
.uni-stock { font-size:14.4px; font-weight: 400; color: var(--ink-muted); }
@media (min-width:801px) {
  .uni-stock { font-size: 16px; color: var(--line); }
}
@media (max-width:800px) {
  .uni-stock { font-size: 16px; }
}
.ship-note { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 8px 0 4px;
  padding: 8px 12px; background: var(--canvas); border-left: 2px solid var(--accent); }
.uni-cartform { display: flex; gap: 12px; margin-top: 10px; align-items: stretch; }
.qty-stepper { display: flex; border: 1px solid var(--line); background: var(--paper); }
.qty-stepper button {
  width: 44px; min-height: 44px; border: none; background: var(--paper); font-size:20.4px;
  cursor: pointer; color: var(--ink);
}
@media (min-width:801px) {
  .qty-stepper button { width: 45px; min-height: 45px; height: 45px; font-size: 18px; color: var(--ink); }
}
.qty-stepper button:hover { color: var(--accent); }
.qty-stepper input {
  width: 56px; min-height: 44px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-size:19px; -moz-appearance: textfield;
}
@media (min-width:801px) {
  .qty-stepper input { width: 45px; min-height: 45px; height: 45px; font-size: 18px; color: var(--ink); }
}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.uni-cartform .btn { flex: 1; max-width: 320px; }
@media (min-width:801px) {
  .uni-cartform .btn { flex: none; width: 260px; height: 45px; padding: 0; font-size: 16px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; }
}
@media (min-width:801px) and (max-width:1399px) {
  .uni-cartform .btn { flex: 1 1 auto; width: auto; min-width: 170px; max-width: 260px; }
}
.size-table--compact th, .size-table--compact td { padding: 6px 14px; font-size:15.6px; }
@media (min-width:801px) {
  .size-table--compact th, .size-table--compact td { height: 50px; padding: 0 8px; font-size: 16px; font-weight: 400; text-align: center; border-bottom: 1px solid var(--line); }
}
/* 後方の .size-table { min-width: 480px } に負けないよう詳細度を上げる */
.size-table.size-table--compact { min-width: 0; width: 100%; }
@media (min-width:801px) {
  .size-table.size-table--compact { font-size: 16px; }
}
/* ---- 特徴紹介 ---- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 800px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature-card { border: none; border-radius: 0; overflow: hidden; background: var(--paper); }
.feature-photo {
  aspect-ratio: 4 / 3; background: var(--canvas); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width:801px) {
  .feature-photo { aspect-ratio: 290 / 348; }
}
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.feature-card h3 { font-size:18px; font-weight: 700; padding: 14px 16px 0; color: var(--ink); line-height: 1.5; }
@media (min-width:801px) {
  .feature-card h3 { font-size: 16px; font-weight: 500; line-height: 24px; padding: 30px 30px 0; }
}
.feature-card p { font-size:18px; padding: 8px 16px 18px; color: var(--ink); line-height: 1.8; }
@media (min-width:801px) {
  .feature-card p { font-size: 14px; line-height: 24px; padding: 6px 30px 24px; }
}
/* ---- サイズ表 ---- */
.size-table { border-collapse: collapse; font-size:17px; min-width: 480px; background: var(--paper); }
.size-table th, .size-table td {
  border: none; border-bottom: 1px solid var(--line);
  padding: 9px 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.size-table thead th {
  background: var(--paper); color: var(--ink); font-size:14.4px; font-weight: 600;
  letter-spacing: 0.04em; border-bottom: 2px solid var(--ink);
}
.size-table tbody th { background: var(--canvas); font-weight: 600; }
/* ---- マイページ ---- */
.mypage-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
}
.mypage-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mypage-tabs {
  display: flex; gap: 0; margin-top: 20px;
  border-bottom: 1px solid var(--ink);
}
.mypage-tabs a {
  padding: 12px 28px; font-size:17px; color: var(--ink-muted);
  border: 1px solid transparent; border-bottom: none;
}
.mypage-tabs a:hover { color: var(--line); text-decoration: none; }
.mypage-tabs a.active {
  color: var(--ink); font-weight: 700;
  background: var(--paper); border-color: var(--ink);
  box-shadow: inset 0 3px 0 var(--accent);
}
@media (max-width: 800px) {
  .mypage-tabs a { padding: 10px 14px; font-size:15.6px; }
}
/* ---- 見積書 ---- */
.quote-sheet {
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 56px); max-width: 900px;
}
.quote-title { font-size: 33.6px; font-weight: 700; letter-spacing: .2em; }
/* スマホ: 全角字間.2emの表題が幅160px超になり見積番号ブロックと同居できないため縮める */
@media (max-width: 800px) {
  .quote-title { font-size: 26px; letter-spacing: .12em; }
}
@media print {
  .site-header, .global-nav, .site-footer, .no-print, .flash { display: none !important; }
  body { background: var(--paper); }
  .container { padding: 0; max-width: none; }
  .quote-sheet { border: none; padding: 0; max-width: none; }
}
@media (min-width:801px) {
  .container { padding-top: 60px; }
}
/* ---- 移植ガイドページ ---- */
.guide-content { background: var(--paper); border: 1px solid var(--line); padding: clamp(20px, 3vw, 48px); }
.guide-content img { max-width: 100%; height: auto; display: block; margin: 12px auto; }
.guide-content h1, .guide-content h2 {
  font-size:23px; font-weight: 700; margin: 40px 0 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ink);
}
/* 見出しは本文(--fs-body: 20px)より必ず大きくする。h4は本文と同サイズまで許容(太字で区別) */
.guide-content h3 { font-size:21px; font-weight: 700; margin: 28px 0 12px; }
.guide-content h4 { font-size:20px; font-weight: 700; margin: 20px 0 8px; }
.guide-content h1:first-child, .guide-content h2:first-child, .guide-content h3:first-child { margin-top: 0; }
.guide-content p { margin-bottom: 12px; }
.guide-content ul, .guide-content ol { margin: 0 0 12px 22px; }
.guide-content table { border-collapse: collapse; margin: 12px 0; }
.guide-content th, .guide-content td { border: 1px solid var(--line); padding: 8px 14px; font-size:17px; }
.guide-content th { background: var(--canvas); }
/* ボタンはリンク色を継がない。継ぐと .btn-primary の黒背景に青文字が乗って読めなくなる */
.guide-content a:not(.btn) { color: var(--accent); text-decoration: underline; }
/* ---- FAQ ---- */
.faq-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.faq-toc a {
  border: 1px solid var(--line); background: var(--paper);
  padding: 8px 16px; font-size:15.6px;
}
.faq-toc a:hover { border-color: var(--accent); color: var(--line); text-decoration: none; }
.faq-body { padding: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary {
  display: flex; align-items: baseline; gap: 12px;
  padding: 16px 20px; cursor: pointer; font-weight: 500; font-size:18px;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; margin-left: auto; color: var(--ink-muted);
  font-family: "Noto Sans JP", sans-serif; font-size:21.6px; flex-shrink: 0;
}
.faq-item[open] summary::after { content: "−"; color: var(--accent); }
.faq-item summary:hover { color: var(--line); }
.faq-q {
  flex: 0 0 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  font-family: "Noto Sans JP", sans-serif; font-size:15.6px; font-weight: 600;
}
.faq-q--a { background: var(--paper); color: var(--accent); border: 1px solid var(--accent); }
.faq-a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 20px 18px; font-size:18px; line-height: 1.8;
  color: var(--ink);
}
/* flexの子は既定で縮まないため、長いURL等でSPの画面幅をはみ出す。
   min-width:0 で縮められるようにし、長い文字列は折り返す */
.faq-a > div { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.faq-a a { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; word-break: break-all; }
.faq-a p { margin-bottom: 8px; }
.faq-a p:last-child { margin-bottom: 0; }
/* ---- 売上分析 ---- */
.anl-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.anl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.anl-tile { background: var(--paper); padding: 18px 20px; }
.anl-tile--hero { background: var(--accent-wash); }
.anl-tile-value {
  font-family: "Noto Sans JP", sans-serif; font-size:32px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 4px;
}
.anl-tile--hero .anl-tile-value { color: var(--accent); font-size:38px; }
.anl-tile-value small { font-size:15px; font-weight: 400; color: var(--ink-muted); margin-left: 4px; }
.anl-chart { width: 100%; }
.anl-bar { cursor: pointer; }
.anl-bar:hover { fill: var(--accent-hover); }
.anl-tooltip {
  position: absolute; z-index: 200; pointer-events: none;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; font-size:14px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.anl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 1000px) {
  .anl-two-col { grid-template-columns: 1fr; }
}
.hbar-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.hbar-row:last-child { border-bottom: none; }
.hbar-label { flex: 0 0 150px; font-size:15px; }
.hbar-track { flex: 1; height: 16px; background: var(--canvas); border: 1px solid var(--line); }
.hbar-fill { display: block; height: 100%; background: var(--accent); min-width: 2px; }
.hbar-value { flex: 0 0 150px; text-align: right; font-size:15px; font-weight: 600; }
.hbar-value small { font-weight: 400; color: var(--ink-muted); }
/* ---- 管理画面 ---- */
.admin-header { background: var(--paper); border-bottom: 2px solid var(--ink); }
.admin-header .header-inner { color: var(--ink); }
/* 列数の多い表をスマホで横スクロールさせる汎用ラッパー
   (商品詳細の一括購入表と同じ扱い。表自体は縮めず、読める幅を保つ) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 日本語は1文字ずつ折り返せてしまい、列が潰れて縦書き状態になるので最低幅を確保する */
@media (max-width: 800px) {
  .table-scroll > .admin-table { min-width: 640px; }
}
.admin-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: var(--fs-data); line-height: var(--lh-data); }
.admin-table th {
  background: var(--canvas); color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
  font-size:14.4px; font-weight: 600; letter-spacing: 0.04em; text-align: left;
  padding: 11px 12px; border: none; border-bottom: 2px solid var(--ink);
}
.admin-table td { padding: 11px 12px; border: none; border-bottom: 1px solid var(--line); }
.admin-table tbody tr:hover { background: var(--row-hover); }
/* 狭い列でボタン・バッジが折り返して縦長にならないように(列は内容に合わせて広がる) */
.admin-shell .btn { white-space: nowrap; }
.admin-shell .badge { white-space: nowrap; }
.admin-table select { white-space: nowrap; }
/* ---- お問い合わせ(L-05) ---- */
.inq-status {
  display: inline-block; font-size: 12.5px; font-weight: 700; padding: 2px 9px;
  white-space: nowrap; border: 1px solid;
}
.inq-status--open { background: var(--hi-wash, #fbeceb); color: var(--danger); border-color: var(--danger); }
.inq-status--in_progress { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
.inq-status--waiting { background: #fbf3df; color: #9a6f08; border-color: #c9a24a; }
.inq-status--resolved { background: #e7f3ea; color: #1d7a3e; border-color: #1d7a3e; }
.inq-status--closed { background: var(--canvas); color: var(--ink-muted); border-color: var(--line-strong, #c6c6c0); }
.admin-table tr.is-unread td { background: var(--hi-wash, #fbeceb); }
.inq-thread { display: flex; flex-direction: column; gap: 12px; }
.inq-msg { border: 1px solid var(--line); padding: 12px 14px; }
.inq-msg--customer { background: var(--paper); border-left: 3px solid var(--ink-muted); }
.inq-msg--staff { background: var(--accent-wash); border-left: 3px solid var(--accent); }
.inq-msg--system { background: none; border: none; padding: 2px 4px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.inq-msg-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 14px; flex-wrap: wrap; }
.inq-msg-body { white-space: pre-wrap; line-height: 1.7; font-size: 15px; }
.inq-dl { display: grid; grid-template-columns: 5em 1fr; gap: 4px 10px; font-size: 14px; margin: 0; }
.inq-dl dt { color: var(--ink-muted); }
.inq-dl dd { margin: 0; }
@media (max-width: 800px) {
  .inq-layout { grid-template-columns: 1fr !important; }
}
/* ページネーションは .pager 系(vendor/pagination/ledger.blade.php)に一本化した。
   以前は手書きの「前へ / n / m / 次へ」(.pagination)と ->links() の2系統が
   混在しており、同じ機能なのに画面ごとに見た目と情報量が違っていた。 */
/* ---- フッター(明るい地・濃い文字。2026-09-09 PDF準拠) ---- */
.site-footer { background: var(--canvas); border-top: 1px solid var(--line); color: var(--ink); margin-top: 64px; }
@media (min-width:801px) {
  .site-footer { background: var(--paper); border-top: none; margin-top: 100px; }
}
@media (max-width:800px) {
  .site-footer { background: var(--paper); border-top: none; margin-top: 80px; }
}
.site-footer .inner { max-width: none; margin: 0; padding: 48px var(--gutter); font-size: var(--fs-caption); line-height: var(--lh-caption); background: var(--canvas); }
@media (min-width:801px) {
  .site-footer .inner { background: var(--paper); padding: 97px var(--gutter) 45px; }
}
@media (max-width:800px) {
  .site-footer .inner { background: var(--paper); padding: 80px 15px 80px; }
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--line); text-decoration: underline; }
.footer-top { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-start; margin-bottom: 24px; }
.footer-brand { min-width: 260px; }
@media (min-width:801px) {
  .footer-brand { min-width: 0; }
}
.footer-logo { font-weight: 700; font-size: 18px; letter-spacing: .02em; }
@media (min-width:801px) {
  .footer-logo { display: flex; align-items: center; gap: 30px; text-decoration: none; }
}
@media (max-width:800px) {
  .footer-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
}
.footer-tel { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (min-width:801px) {
  .footer-tel { margin-top: 25px; }
}
@media (max-width:800px) {
  .footer-tel { margin-top: 25px; }
}
.footer-tel-label { flex-shrink: 0; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; letter-spacing: .1em; }
.footer-tel-num { font-size: 24px; font-weight: 700; color: var(--ink); }
.footer-tel-note { color: var(--ink-muted); font-size: 13px; }
.footer-nav { columns: 2; column-gap: 64px; margin: 0; }
.footer-nav a { display: block; padding: 6px 0; break-inside: avoid; }
@media (min-width:801px) {
  .footer-nav a { padding: 0; line-height: 36px; font-size: 16px; }
}
@media (max-width:800px) {
  .footer-nav a { padding: 0; line-height: 36px; font-size: 16px; }
}
.footer-copy { color: var(--ink-muted); margin-top: 8px; }
@media (min-width:801px) {
  .footer-copy { font-size: 10px; color: var(--ink); text-align: right; margin-top: 69px; }
}
@media (max-width:800px) {
  .footer-copy { font-size: 10px; color: var(--ink); text-align: center; margin-top: 80px; }
  .footer-top { flex-direction: column; gap: 20px; }
  .footer-nav { columns: 1; display: block; margin-top: 80px; }
}
@media (min-width:801px) {
  .footer-nav { columns: auto; display: grid; grid-template-columns: 215px auto; grid-template-rows: repeat(5, 36px); grid-auto-flow: column; margin-top: 85px; }
  .footer-top { flex-direction: column; gap: 0; margin-bottom: 0; }
}
/* ---- ステップ表示 ---- */
.step-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.step-nav span {
  flex: 0 0 auto; text-align: left; padding: 0 0 6px; background: none;
  font-size:15.6px; border-radius: 0; color: var(--ink-muted);
  display: flex; align-items: center; gap: 8px;
}
.step-nav span.active { background: none; color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }
.step-nav span:not(:last-child)::after {
  content: ""; height: 1px; background: var(--line); min-width: 32px; margin-left: 12px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
/* ===== トップ: お知らせ・ブランドカード ===== */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list li:last-child { border-bottom: none; }
.news-list a { display: flex; gap: 20px; align-items: baseline; padding: 12px 4px; color: var(--ink); text-decoration: none; }
.news-list a:hover span { color: var(--line); text-decoration: underline; }
.news-list time { color: var(--ink-muted); font-size: var(--fs-caption); white-space: nowrap; }
/* トップのお知らせ: 白帯の行(日付は赤枠・右端に丸矢印)+丸い「お知らせ一覧」ボタン(2026-09-09 船戸指示) */
.home-news { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d0d0d0; border-bottom: 1px solid #d0d0d0; background: var(--paper); }
.home-news li + li { border-top: 1px solid #d0d0d0; }
.home-news a { display: flex; align-items: center; gap: 26px; padding: 26px 24px 26px 26px; color: var(--ink); text-decoration: none; }
.home-news a:hover .home-news__title { text-decoration: underline; }
.home-news__date {
  flex-shrink: 0; font-size: 13px; letter-spacing: 0.06em; line-height: 1;
  color: var(--accent); border: 1px solid var(--accent); padding: 5px 8px;
}
@media (min-width:801px) {
  .home-news__date { width: 100px; height: 20px; line-height: 18px; box-sizing: border-box; padding: 0; font-size: 13px; text-align: center; }
}
@media (max-width:800px) {
  .home-news__date { width: 79px; height: 30px; line-height: 28px; box-sizing: border-box; padding: 0; font-size: 13px; text-align: center; flex: none; order: 1; }
}
.home-news__title { flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; }
.home-news__arrow {
  flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--ink); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.home-news__arrow svg { width: 16px; height: 16px; }
/* 下はフッターの余白(64px)と合わせて100pxにする */
.home-news__more { text-align: center; margin: 50px 0 36px; }
/* 丸いボタン(枠線・白地) */
.btn-pill {
  display: inline-block; min-width: 216px; padding: 15px 32px; border: 1px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font-size: 15px; letter-spacing: 0.06em; text-align: center; text-decoration: none;
}
.btn-pill:hover { background: var(--canvas); text-decoration: none; }
@media (max-width: 800px) {
  .home-news a { flex-wrap: nowrap; gap: 0 16px; padding: 0 20px; height: 105px; box-sizing: border-box; align-items: center; }
  .home-news__title { flex-basis: calc(100% - 44px); order: 2; flex: 1; font-size: 14px; line-height: 22px; }
  .home-news__arrow { order: 3; margin-left: 0; width: 28px; height: 28px; }
  .home-news__more { margin-top: 28px; margin: 40px 0 0; }
  .btn-pill { min-width: 180px; padding: 0 24px; height: 46px; box-sizing: border-box; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (min-width:801px) {
  .btn-pill { min-width: 200px; height: 46px; box-sizing: border-box; padding: 0 24px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
  .home-news__more { margin: 50px 0 0; }
  .home-news a { height: 75px; box-sizing: border-box; padding: 0 25px; gap: 25px; }
}
/* ブランドはロゴだけを3列に並べる。枠線なし・ロゴは大きめ(2026-09-09 船戸指示: 枠線をなくして120%程度に) */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* スマホは3列だとロゴが潰れるので2列 */
@media (max-width: 800px) {
  .brand-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (min-width:801px) {
  .brand-grid { gap: 0; }
}
.brand-card { display: block; background: var(--paper); text-decoration: none; color: var(--ink); transition: background-color .15s; }
@media (min-width:801px) {
  .brand-card { border: 1px solid var(--line); margin: 0 -1px -1px 0; }
}
@media (max-width:800px) {
  .brand-card { border: 1px solid var(--line); margin-bottom: -1px; }
}
.brand-card:hover { background: #fafafa; }
/* 内側の高さ 135px(従来112pxの約120%) */
.brand-card-img { display: flex; align-items: center; justify-content: center; height: 175px; padding: 0; }
/* ロゴ画像(218×64px)には1pxの灰色枠が焼き込まれているため clip-path で縁を切り落とす。
   幅いっぱい(width:100%)に拡大し、等倍を超えて約120%で表示する(max-width では等倍止まりになる) */
.brand-card-img img { width: 100%; height: auto; max-height: 100%; clip-path: inset(3px); }
@media (min-width:801px) {
  .brand-card-img img { width: 100%; height: 100%; object-fit: contain; clip-path: none; }
}
@media (max-width:800px) {
  .brand-card-img img { width: 100%; height: 100%; object-fit: contain; clip-path: none; }
}
.brand-card-noimg { font-weight: 700; font-size: 19px; }
@media (max-width: 800px) {
  .brand-card-img { height: 157px; padding: 0; }
}
@media (min-width:801px) {
  .brand-card-img { height: 150px; padding: 0; }
}
/* ===== 上部固定のお知らせ(グレーの帯・タイトルのみ中央揃え・左右の矢印で切り替え) ===== */
.news-ticker {
  display: flex; align-items: center; gap: 8px;
  margin: 6px calc(-1 * var(--gutter)) 14px;   /* 左右は home-hero の余白を打ち消して全幅の帯にする */
  padding: 0 28px; min-height: 60px; background: #f2f2f2;
}
.news-ticker__items { flex: 1; min-width: 0; text-align: center; }
.news-ticker__item { display: none; color: var(--ink); font-size: 16px; line-height: 1.5; padding: 14px 0; text-decoration: none; }
.news-ticker__item.is-active { display: block; }
.news-ticker__item:hover { text-decoration: underline; }
.news-ticker__arrow {
  flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: none; background: none;
  color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.news-ticker__arrow svg { width: 22px; height: 22px; }
@media (min-width:801px) {
  .news-ticker__arrow svg { width: 18px; height: 18px; stroke-width: 1; }
}
.news-ticker__arrow:hover { color: var(--ink-muted); }
@media (max-width: 800px) {
  .news-ticker { padding: 0 8px; min-height: 48px; margin-bottom: 10px; }
  .news-ticker__item { font-size: 12px; padding: 0; letter-spacing: 0.1em; line-height: 50px; }
}
@media (min-width:801px) {
  .news-ticker__item { font-size: 14px; padding: 0; }
}
/* ===== 固定ページのブロック ===== */
.page-blocks { max-width: 980px; margin: 0 auto; }
.page-blocks .pb-heading { font-size: 26px; font-weight: 700; border-left: 4px solid var(--accent); padding-left: 14px; margin: 36px 0 14px; }
.page-blocks .pb-heading.h3 { font-size: 21px; border-left-width: 3px; }
.page-blocks .pb-text { font-size: var(--fs-body); line-height: 1.9; margin: 14px 0; white-space: pre-line; }
.page-blocks .pb-image { margin: 22px 0; text-align: center; }
.page-blocks .pb-image img { max-width: 100%; height: auto; }
.page-blocks .pb-image figcaption { font-size: 14px; color: var(--ink-muted); margin-top: 6px; }
.page-blocks .pb-button { margin: 26px 0; text-align: center; }
.page-blocks .pb-divider { border: none; border-top: 1px solid var(--line); margin: 32px 0; }
.page-standalone { padding: 40px clamp(20px, 4vw, 72px); }
/* ===== 管理画面: 左サイドメニュー ===== */
.admin-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 0; min-height: calc(100vh - 140px); }
.admin-shell.no-side { display: block; }
.admin-side { border-right: 1px solid var(--line); background: var(--paper); padding: 12px 0; }
/* 項目数が多く縦に長いので、メニュー自身をスクロールさせて本文と独立させる */
.admin-nav {
  position: sticky; top: 0; display: flex; flex-direction: column;
  max-height: 100vh; overflow-y: auto; overscroll-behavior: contain;
}
/* メニューの分類見出し(注文・顧客 / 商品・在庫 など) */
.admin-nav .nav-group {
  display: block; padding: 8px 12px 3px; margin: 5px 0 1px;
  border-top: 1px solid var(--line);
  font-size: 10.5px; letter-spacing: 0.1em;
}
.admin-nav .nav-group:first-child { border-top: none; margin-top: 0; padding-top: 2px; }
.admin-nav a { display: block; padding: 5px 12px 5px 17px; color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500; line-height: 1.35; border-left: 3px solid transparent; }
.admin-nav a:hover { color: var(--accent); background: var(--canvas); text-decoration: none; }
.admin-nav a.active { color: var(--accent); font-weight: 700; border-left-color: var(--accent); background: var(--accent-wash); }
.admin-nav .nav-badge {
  display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
  color: #fff; background: var(--danger); border-radius: 9px; vertical-align: middle;
}
.admin-main { padding: 20px clamp(16px, 2.5vw, 40px) 60px; min-width: 0; }
.admin-shell.no-side .admin-main { max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) {
  .admin-shell { display: block; }
  .admin-side { border-right: none; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 0 10px; }
  .admin-nav a { border-left: none; border-bottom: 2px solid transparent; padding: 8px 10px; }
  .admin-nav a.active { border-bottom-color: var(--accent); background: none; }
  .admin-nav .eyebrow { display: none !important; }
}
/* 2次倉庫(取り寄せ)の出荷目安ラベル */
.stock-backorder { color: var(--accent); font-weight: 700; font-size: 13px; white-space: nowrap; }
/* サイトマップ(HTML) */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 8px; }
.sitemap-h { font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 24px 0 10px; }
.sitemap-h:first-child { margin-top: 0; }
.sitemap-col ul { list-style: none; margin: 0; padding: 0; }
.sitemap-col li { margin: 4px 0; }
.sitemap-col a { color: var(--ink); text-decoration: none; }
.sitemap-col a:hover { color: var(--line); text-decoration: underline; }
.sitemap-cats > li > a { font-weight: 600; }
.sitemap-cats ul { margin: 2px 0 8px 14px; }
.sitemap-cats ul a { color: var(--ink-muted); font-size: 14.5px; }
.sitemap-brands { columns: 2; }
/* 銀行振込の振込先案内(注文完了・注文詳細) */
.bank-transfer-box {
  margin-top: 10px; padding: 14px 18px; background: var(--paper);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.bank-transfer-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bank-transfer-amount span { font-size: 14.4px; color: var(--ink-muted); }
.bank-transfer-amount strong { font-size: 24px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* 一覧カードの在庫なし表示(価格の右に小さく) */
.soldout-flag { color: var(--danger); font-weight: 700; font-size: 12.5px; margin-left: 6px; white-space: nowrap; }
/* サイドバー: 各分類は先頭5件だけ表示し「すべて表示 +」で開閉する */
.sb-collapsible.is-collapsed > li:nth-child(n+6) { display: none; }
/* 「more +」: 左に下線付きの more、右端に + (開いたら close −)。2026-09-09 船戸指示 */
.sb-more {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: 12px 12px 10px; margin: 0;
  color: var(--ink); font-size: 14.4px; font-weight: 600; cursor: pointer;
  font-family: inherit; text-align: left;
}
.sb-more__label { text-decoration: underline; text-underline-offset: 4px; }
.sb-more__sign { font-size: 20px; font-weight: 400; line-height: 1; color: var(--ink-muted); }
@media (min-width:801px) {
  .sb-more__sign { font-size: 14px; font-weight: 400; color: var(--ink); }
}
.sb-more:hover .sb-more__label { color: var(--ink-muted); }
/* 商品一覧の並び替え・表示件数ツールバー */
.list-toolbar {
  display: flex; gap: 20px; justify-content: flex-end; align-items: center;
  flex-wrap: wrap; margin: 0 0 16px; font-size: 15px; color: var(--ink-muted);
}
/* 件数は左端に(セレクト群は右寄せのまま) */
.list-toolbar .list-count { margin-right: auto; color: var(--ink); font-size: 15.5px; }
@media (min-width:801px) {
  .list-toolbar .list-count { font-size: 14px; color: var(--ink); }
}
@media (max-width:800px) {
  .list-toolbar .list-count { font-size: 14px; color: var(--ink); }
}
.list-toolbar select {
  margin-left: 6px; padding: 8px 10px; border: 1px solid var(--line);
  background: var(--paper); font-size: 16px; color: var(--ink); border-radius: 0;
}
@media (min-width:801px) {
  .list-toolbar select {
  margin: 0;
  height: 30px;
  padding: 0 28px 0 8px;
  font-size: 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7'><path d='M0.5 0.5 L7 6.5 L13.5 0.5' fill='none' stroke='%23505050' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
}
@media (max-width:800px) {
  .list-toolbar select { height: 30px; padding: 0 28px 0 8px; font-size: 14px; width: 110px; }
  .list-toolbar { justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink); }
}
@media (min-width:801px) {
  .list-toolbar {
  min-height: 70px;
  margin: 0;
  padding: 0;
  gap: 0 21px;
  font-size: 14px;
  color: var(--ink);
  align-items: center;
}
}
/* ===== 商品一覧の絞り込み(アコーディオン) ===== */
.list-filter-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-size: 16px; cursor: pointer; border-radius: 0;
}
@media (min-width:801px) {
  .list-filter-toggle { height: 30px; padding: 0 10px; font-size: 14px; }
}
.list-filter-toggle:hover, .list-filter-toggle.is-active { border-color: var(--accent); color: var(--accent); }
.list-filter-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.list-filter-chev { display: inline-block; font-size: 18px; line-height: 1; transition: transform .15s; }
.list-filter-toggle[aria-expanded="true"] .list-filter-chev { transform: rotate(90deg); }
.list-filter {
  border: 1px solid var(--line); background: #fff; padding: 16px 18px; margin: -6px 0 16px;
}
.lf-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.lf-group { border: none; padding: 0; margin: 0; min-width: 0; }
.lf-group--wide { grid-column: 1 / -1; }
.lf-group legend { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; color: var(--ink); }
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.lf-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px;
  border: 1px solid var(--line); background: #f0efeb; font-size: 14.5px; cursor: pointer;
  line-height: 1.4;
}
.lf-chip:hover { border-color: var(--accent); }
.lf-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); font-weight: 600; }
.lf-chip input { margin: 0; accent-color: var(--accent); }
.lf-price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lf-price input { width: 110px; padding: 6px 8px; border: 1px solid var(--line); font-size: 16px; }
.lf-keyword { display: flex; }
.lf-keyword-input { width: 100%; max-width: 420px; padding: 8px 10px; border: 1px solid var(--line); font-size: 16px; }
.lf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
/* 選択中の条件(× で外せる) */
.list-filter-active { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 14px; font-size: 14.5px; }
@media (min-width:801px) {
  .list-filter-active { margin-bottom: 16px; }
}
.lf-active-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 10px;
  border: 1px solid var(--accent); color: var(--accent); background: var(--paper); text-decoration: none;
}
.lf-active-chip span { font-size: 15px; line-height: 1; }
.lf-active-chip:hover { background: var(--accent-wash); }
.lf-active-clear { color: var(--ink-muted); text-decoration: underline; margin-left: 4px; }
@media (max-width: 800px) {
  .lf-groups { grid-template-columns: 1fr; gap: 12px; }
  .list-filter { padding: 12px; }
  .lf-actions .btn { flex: 1; }
}
/* ===== ページネーション ===== */
.pager { display: flex; align-items: center; gap: 0 20px; flex-wrap: wrap; font-size: 16px; margin-top: 40px; justify-content: flex-start; }
@media (min-width:801px) {
  .pager { gap: 0 40px; }
}
@media (max-width:800px) {
  .pager { row-gap: 12px; column-gap: 12px; }
}
@media (min-width:801px) and (max-width:1023px) {
  .pager { flex-wrap: wrap; }
}
.pager-btn { display: inline-block; padding: 7px 13px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; }
.pager-btn:hover { border-color: var(--accent); color: var(--line); text-decoration: none; }
.pager-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
.pager-btn.disabled { color: var(--ink-muted); pointer-events: none; }
.pager-dots { color: var(--ink-muted); padding: 0 4px; }
.pager-count { margin-left: auto; color: var(--ink-muted); font-size: 14px; }
@media (max-width:800px) {
  .pager-count { flex: 0 0 100%; margin-left: 0; text-align: right; }
}
/* 購入導線に出す電話問い合わせ先(設定 > 会社情報 で番号を入れると表示される) */
.contact-tel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--paper); padding: 12px 16px; margin: 16px 0; font-size: 15.6px;
}
.contact-tel-label { font-weight: 700; }
.contact-tel-no {
  font-size: 21px; font-weight: 700; color: var(--accent);
  text-decoration: none; letter-spacing: 0.02em;
}
.contact-tel-no:hover { text-decoration: underline; }
.contact-tel-hours, .contact-tel-note { color: var(--ink-muted); font-size: 14px; }
@media (max-width: 800px) {
  .contact-tel { flex-direction: column; gap: 4px; height: 110px; box-sizing: border-box; }
  .contact-tel-no { font-size: 24px; font-weight: 400; }
}
/* 加工指示: 名簿の貼り付け(1着ずつ別の文字を一括入力する) */
.roster-paste { border: 1px solid var(--line); background: var(--paper); margin-bottom: 14px; }
.roster-paste > summary {
  cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: 15.6px;
  background: var(--accent-wash); color: var(--accent);
}
.roster-paste > summary:hover { text-decoration: underline; }
.roster-body { padding: 14px; }
.roster-lead { margin: 0 0 8px; font-size: 15px; line-height: 1.7; }
.roster-help { margin: 0 0 12px 18px; padding: 0; font-size: 14px; color: var(--ink-muted); line-height: 1.7; }
#roster-input {
  width: 100%; padding: 10px; border: 1px solid var(--line);
  font-size: 16px; line-height: 1.6; font-family: inherit; resize: vertical;
}
.roster-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
#roster-result { font-size: 14.4px; font-weight: 600; }
/* メールアドレス未確認の案内(マイページ) */
.verify-notice {
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--danger); border-left-width: 4px; background: var(--paper);
  padding: 14px 18px; margin: 16px 0; font-size: 15.6px; line-height: 1.7;
}
.verify-notice .verify-mail { font-weight: 700; }
.verify-notice .verify-help { display: block; font-size: 14px; color: var(--ink-muted); }
/* ご注文内容の確認画面 */
.confirm-table th { white-space: nowrap; }
.confirm-table td { font-size: 17px; }
.confirm-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
/* 確認画面: 下部は主ボタン(お支払いに進む)のみを中央に置く */
.confirm-actions--stacked { flex-direction: column; gap: 18px; justify-content: center; }
/* セクション見出し右のアクションリンク(修正・カートに戻る)。ユニクロ式 */
.section-title-action {
  float: right; font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.5;
  margin-top: 6px; color: var(--accent); text-decoration: underline;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.section-title-action:hover { opacity: 0.75; }
@media (max-width: 800px) {
  .section-title-action { font-size: 14px; margin-top: 4px; }
}
@media (max-width: 800px) {
  .confirm-actions { flex-direction: column; align-items: stretch; }
  .confirm-actions form, .confirm-actions .btn { width: 100%; }
  .confirm-actions .btn { text-align: center; }
}
/* 裾上げの縫い方の比較(2枚並べる) */
.hem-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) {
  .hem-compare { grid-template-columns: 1fr; }
}
/* ---- 名入れ刺繍・裾上げ加工ガイド(pages/naire) ---- */
.naire-nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 24px; }
.naire-nav a {
  display: inline-block; padding: 8px 14px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: var(--fs-data); color: var(--ink);
}
.naire-nav a:hover { border-color: var(--accent); color: var(--line); }
/* 図版は横並び。狭い画面では縦に積む */
.naire-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.naire-figs img { width: 100%; height: auto; border: 1px solid var(--line); background: var(--paper); }
/* 本文中の図版が原寸で飛び出さないようにする */
.page-naire img { max-width: 100%; height: auto; }
/* 表組みの画像(料金表・一覧表): スマホ幅まで縮めると文字が読めなくなるため、
   縮小はほどほどにして横スクロールで原寸を見られるようにする */
.fig-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 800px) {
  .fig-scroll img { min-width: 640px; max-width: none; }
}
/* ---- 加工指示: 画面下に固定する加工名・料金バー ----
   入力欄が縦に長く、下までスクロールすると「いま何をいくらで頼んでいるか」が
   視界から消えてしまうため、常に見える位置に出す。 */
.proc-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--paper); border-top: 2px solid var(--ink);
  box-shadow: 0 -2px 12px rgba(23, 24, 26, 0.10);
}
.proc-sticky[hidden] { display: none; }
.proc-sticky-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.proc-sticky-info { flex: 1; min-width: 220px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.proc-sticky-name { font-weight: 700; font-size: 17px; }
.proc-sticky-spec { font-size: var(--fs-caption); color: var(--ink-muted); }
.proc-sticky-calc { font-size: var(--fs-caption); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.proc-sticky-total { display: flex; align-items: baseline; gap: 8px; }
.proc-sticky-total .label { font-size: 13px; color: var(--ink-muted); }
.proc-sticky-total strong { font-size: 26px; font-weight: 700; color: var(--accent); }
.proc-sticky .btn { flex-shrink: 0; }
/* バーの高さぶん、ページ末尾が隠れないように余白を足す */
body.has-proc-sticky { padding-bottom: calc(var(--proc-sticky-h, 96px) + 20px); }
@media (max-width: 800px) {
  .proc-sticky-inner { padding: 10px 14px; gap: 8px 12px; }
  .proc-sticky-info { width: 100%; }
  .proc-sticky-name { font-size: 15.6px; }
  .proc-sticky-total strong { font-size: 22px; }
  .proc-sticky .btn { flex: 1; }
  body.has-proc-sticky { padding-bottom: calc(var(--proc-sticky-h, 140px) + 20px); }
}
/* ===== 管理画面: 簡易WYSIWYG(よくある質問の回答・固定ページの本文) ===== */
.wysiwyg { border: 1px solid var(--line); background: var(--paper); }
.wysiwyg-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 5px 6px; border-bottom: 1px solid var(--line); background: var(--canvas);
}
.wysiwyg-btn {
  border: 1px solid transparent; background: none; color: var(--ink);
  font: inherit; font-size: 12.5px; line-height: 1.4; padding: 4px 8px; cursor: pointer;
}
.wysiwyg-btn:hover { border-color: var(--line); background: var(--paper); }
.wysiwyg-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.wysiwyg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.wysiwyg-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px }
.wysiwyg-area {
  min-height: 150px; max-height: 60vh; overflow-y: auto;
  padding: 10px 12px; font-size: 15px; line-height: 1.8;
}
/* 入力欄なのでフォーカス位置は必ず見えるようにする(outline:none にしない) */
.wysiwyg-area:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px }
/* 編集中も本番の見え方に近づける(見出しだけ大きすぎないよう抑える) */
.wysiwyg-area p { margin: 0 0 10px }
.wysiwyg-area p:last-child { margin-bottom: 0 }
.wysiwyg-area h3 { font-size: 17px; font-weight: 700; margin: 14px 0 8px }
.wysiwyg-area h4 { font-size: 15.5px; font-weight: 700; margin: 12px 0 6px }
.wysiwyg-area ul, .wysiwyg-area ol { margin: 0 0 10px 22px }
.wysiwyg-area li { margin: 2px 0 }
.wysiwyg-area blockquote {
  margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--line); color: var(--ink-muted);
}
.wysiwyg-area a { color: var(--accent); text-decoration: underline }
.wysiwyg.is-source textarea { display: block !important; width: 100%; border: none; padding: 10px 12px }
/* 固定ページ: WYSIWYGで書いた本文(改行はタグで入るので pre-line は効かせない) */
.page-blocks .pb-text.pb-rich { white-space: normal }
.page-blocks .pb-rich p { margin: 0 0 14px }
.page-blocks .pb-rich h3 { font-size: 21px; font-weight: 700; margin: 28px 0 12px }
.page-blocks .pb-rich h4 { font-size: 18px; font-weight: 700; margin: 20px 0 8px }
.page-blocks .pb-rich ul, .page-blocks .pb-rich ol { margin: 0 0 14px 24px }
.page-blocks .pb-rich li { margin: 4px 0 }
.page-blocks .pb-rich blockquote {
  margin: 16px 0; padding: 8px 16px; border-left: 3px solid var(--line); color: var(--ink-muted);
}
.page-blocks .pb-rich a { color: var(--accent); text-decoration: underline }
/* お知らせ: WYSIWYGで書いた本文 */
.wysiwyg-body p { margin: 0 0 8px }
.wysiwyg-body p:last-child { margin-bottom: 0 }
.wysiwyg-body ul, .wysiwyg-body ol { margin: 8px 0 8px 22px }
.wysiwyg-body li { margin: 3px 0 }
.wysiwyg-body h3 { font-size: 17px; font-weight: 700; margin: 12px 0 6px }
.wysiwyg-body h4 { font-size: 15.5px; font-weight: 700; margin: 10px 0 5px }
.wysiwyg-body a { color: var(--accent); text-decoration: underline }
.wysiwyg-body blockquote {
  margin: 10px 0; padding: 6px 14px; border-left: 3px solid var(--line); color: var(--ink-muted);
}
/* よくある質問: WYSIWYGで書いた回答 */
.faq-a ul, .faq-a ol { margin: 8px 0 8px 22px }
.faq-a li { margin: 3px 0 }
.faq-a h3 { font-size: 17px; font-weight: 700; margin: 12px 0 6px }
.faq-a h4 { font-size: 15.5px; font-weight: 700; margin: 10px 0 5px }
.faq-a blockquote {
  margin: 10px 0; padding: 6px 14px; border-left: 3px solid var(--line); color: var(--ink-muted);
}
/* 管理画面の並べ替え列見出し: ▲▼を常に薄く出し、有効な向きだけ濃くする */
.sort-th .sort-arrows { display: inline-flex; flex-direction: column; margin-left: 4px; vertical-align: middle; line-height: 0.75; font-size: 9px; }
.sort-th .sort-arrows span { color: var(--ink-muted); opacity: .35; }
/* いま並べている向きだけ黄色。もう一方は薄いまま(2026-09-08 船戸指示) */
.sort-th .sort-arrows .on { color: #f2b705; opacity: 1; text-shadow: 0 0 1px rgba(0,0,0,.25); }
.sort-th:hover .sort-arrows span:not(.on) { opacity: .6; }
/* ============================================================
   2026-09-09 スマホ表示の不具合まとめ修正
   ============================================================ */
/* 一括購入: 在庫超過の入力欄を赤くし、欄の直下にもエラーを出す(下端まで行かなくても気づける) */
.bulk-qty.is-over { border-color: var(--danger) !important; background: var(--danger-wash); }
.qty-over-msg { margin-top: 4px; font-size: 12px; color: var(--danger); line-height: 1.4; text-align: right; }
/* 過去の加工内容カード: 長いロゴファイル名を折り返す(枠からはみ出さない) */
.past-proc { min-width: 0; }
.past-proc > span, .past-proc strong { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 800px) {
  /* 見出し内の操作リンク(入力内容を修正する等): 長い見出しと重ならないよう下段に回し、右端に寄せる。
     <button>(入力内容を修正する)は display:block でも幅が文字幅のままで text-align が効かず左に残っていたため、
     margin-left:auto で右へ寄せる(<a> のカートに戻ると同じ位置になる) */
  .section-title-action { float: none; display: block; width: max-content; max-width: 100%; margin: 8px 0 0 auto; text-align: right; }
}
/* ===== SPのTOPバナー: 左右余白なしの全幅1枚送り + 白丸の送りボタン
       (2026-09-10 船戸指示・SPデザイン) ===== */
@media (max-width: 800px) {
  .home-hero { padding-left: 0; padding-right: 0; padding-top: 0; }
  /* お知らせ帯は home-hero の余白を打ち消していたぶんを戻す(余白が0になったため) */
  .news-ticker { margin-left: 0; margin-right: 0; height: 50px; background: var(--canvas); margin-top: 0; margin-bottom: 0; }
  .hero-track { gap: 0; }
  /* 1枚を画面幅いっぱいに。隣が見えないので枠線と減光はしない */
  .hero-slide { flex-basis: 100%; border: none; opacity: 1; }
  /* 送りボタンは白丸+細いシェブロン。画像の上に重ねる */
  .hero-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  /* タップ領域44px確保 */
  background: rgba(255, 255, 255, 0.92);
  color: #4a4a4a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  font-size: 0;
  /* マークアップの←→は使わず、下の擬似要素で描く */
}
  .hero-arrow:hover { border: none; color: #4a4a4a; }
  .hero-arrow::before {
    content: ""; width: 9px; height: 9px;
    border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  }
  .hero-prev { left: 14px; }
  .hero-next { right: 14px; }
  .hero-prev::before { transform: rotate(45deg); margin-left: 3px; }
  .hero-next::before { transform: rotate(-135deg); margin-right: 3px; }
}
@media (min-width:801px) {
  .news-ticker { min-height: 60px; margin: -10px 0 10px; margin-bottom: 0; }
  .hero-next::before { transform: rotate(-135deg); margin-right: 4px; }
  .hero-next { right: 20px; }
  .hero-prev::before { transform: rotate(45deg); margin-left: 4px; }
  .hero-prev { left: 20px; }
  .hero-arrow::before { content: ""; width: 9px; height: 9px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; }
  .hero-arrow:hover { border: none; color: var(--accent); background: #fff; }
  .hero-arrow { width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: var(--ink); font-size: 0; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
  .hero-slide { flex: 0 0 62.5%; }
  .hero-track { gap: 6px; }
  .home-hero { padding-left: 0; padding-right: 0; }
}
/* 画像ズーム: スマホで背後がスクロールしない・指のパンを妨げない */
.zoom-overlay { touch-action: none; overscroll-behavior: contain; }
.zoom-stage { touch-action: none; }
@media (max-width: 800px) {
  /* 商品メイン画像: 縦長でも上下が切れず全体が見えるよう、正方形固定をやめて画像に合わせる */
  .gallery-main { aspect-ratio: 405 / 486; min-height: 0; max-height: none; }
  .gallery-main img { max-height: 100%; }
}
@media (min-width:801px) {
  .gallery-main { aspect-ratio: 405 / 486; }
}
/* 会員登録の操作ボタン: SPで横並びのまま「同意して登録する」が折り返さないよう余白と字間を詰める(#register-actions) */
@media (max-width: 800px) {
  .register-actions .btn {
    flex: 1;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    letter-spacing: 0;
    white-space: nowrap;
  }
}
/* ===== サイドメニュー: カード + アコーディオン(2026-09-09 船戸指示・SP版デザイン) ===== */
.sb-quick { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
@media (min-width:801px) {
  .sb-quick { gap: 15px; margin-bottom: 15px; }
}
@media (max-width:800px) {
  .sb-quick { gap: 15px; margin-bottom: 15px; }
}
/* 注文履歴(濃色ボタン) */
.sb-order {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; padding: 14px 16px;
}
@media (min-width:801px) {
  .sb-order { height: 50px; box-sizing: border-box; padding: 0 21px 0 20px; font-size: 16px; font-weight: 400; }
}
@media (max-width:800px) {
  .sb-order { height: 50px; box-sizing: border-box; padding: 0 21px 0 20px; font-size: 16px; font-weight: 400; }
}
.sb-order:hover { color: var(--paper); background: var(--ink-soft); }
.sb-order .sb-chev { width: 18px; height: 18px; flex-shrink: 0; }
@media (min-width:801px) {
  .sb-order .sb-chev { width: 14px; height: 14px; stroke-width: 1.2; }
}
/* 名入れ刺繍・裾上げ加工(赤枠プロモカード) */
.sb-naire { display: block; border: 2px solid var(--accent); background: var(--paper); padding: 14px; }
@media (min-width:801px) {
  .sb-naire { padding: 0; border: 1px solid var(--accent); line-height: 0; }
}
@media (max-width:800px) {
  .sb-naire { padding: 0; border: 1px solid var(--accent); line-height: 0; }
}
.sb-naire-main { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.sb-naire-main .sb-ico { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; }
.sb-naire-title { font-weight: 700; font-size: 16px; color: var(--ink); line-height: 1.4; letter-spacing: .06em; }
.sb-naire:hover .sb-naire-title { color: var(--ink); }
.sb-naire-btn { display: block; text-align: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; padding: 8px; }
.sb-naire:hover .sb-naire-btn { background: var(--accent-hover); color: #fff; }
/* ご案内カード(アイコン + ラベル + 右矢印) */
.sb-card {
  display: flex; align-items: center; gap: 12px; background: var(--paper);
  border: 1px solid var(--line); padding: 12px 14px; color: var(--ink);
  font-weight: 600; font-size: 14px; line-height: 1.35;
}
@media (min-width:801px) {
  .sb-card { height: 75px; box-sizing: border-box; padding: 0 21px 0 20px; gap: 9px; font-size: 16px; font-weight: 400; line-height: 20px; padding-left: 11px; }
}
@media (max-width:800px) {
  .sb-card { height: 75px; box-sizing: border-box; padding: 0 21px 0 20px; gap: 19px; font-size: 16px; font-weight: 400; line-height: 20px; }
}
.sb-card:hover { color: var(--ink); border-color: var(--accent); }
.sb-card .sb-ico { width: 26px; height: 26px; flex-shrink: 0; color: var(--ink); }
@media (min-width:801px) {
  .sb-card .sb-ico { display: none; }
}
@media (max-width:800px) {
  .sb-card .sb-ico { width: 24px; height: 24px; }
}
.sb-card-label { flex: 1; min-width: 0; }
.sb-card .sb-chev { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-muted); }
@media (min-width:801px) {
  .sb-card .sb-chev { width: 14px; height: 14px; color: var(--ink); stroke-width: 1.2; }
}
.sb-card.active { border-color: var(--accent); }
/* 「〜で探す」アコーディオン */
.sidebar .sb-acc { margin-bottom: 10px; }
@media (min-width:801px) {
  .sidebar .sb-acc { margin-bottom: 0; }
}
@media (max-width:800px) {
  .sidebar .sb-acc { margin-bottom: 0; }
}
.sb-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--paper); border: none; cursor: pointer;
  font-weight: 700; font-size: 15px; padding: 11px 14px; text-align: left; font-family: inherit;
}
@media (min-width:801px) {
  .sb-acc-head { height: 50px; box-sizing: border-box; padding: 0 17px; font-size: 16px; font-weight: 400; }
}
@media (max-width:800px) {
  .sb-acc-head { height: 50px; box-sizing: border-box; padding: 0 17px; font-size: 14px; font-weight: 400; }
}
.sb-acc-head:hover { background: var(--ink-soft); }
.sb-acc-chev {
  width: 8px; height: 8px; flex-shrink: 0; margin: -4px 0 0 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
@media (min-width:801px) {
  .sb-acc-chev { width: 9px; height: 9px; border-width: 1px; }
}
.sb-acc.is-open .sb-acc-chev { transform: rotate(225deg); margin-top: 4px; }
.sb-acc:not(.is-open) .sb-acc-body { display: none; }
/* 開いた中身は枠線なし・背景は周りと同じ(2026-09-09 船戸指示)。
   行の区切り線は矢印ボタンまで含めた行全体に引き、文字は14px内側に置く */
.sb-acc-body { border: none; background: transparent; padding: 0; }
.sb-acc-body > ul > li { border-top: 1px solid var(--line); }
.sb-acc-body > ul > li:first-child { border-top: none; }
/* 文字の頭は見出し「〜で探す」の文字(左14px)と揃える。中カテゴリ・選択中(左に2pxの赤線)も同じ位置 */
.sidebar .sb-acc-body li a, .sidebar .sb-acc-body .cat-children li a { border-top: none; padding-left: 14px; padding-right: 8px; }
@media (min-width:801px) {
  .sidebar .sb-acc-body li a, .sidebar .sb-acc-body .cat-children li a { padding: 0 8px 0 17px; line-height: 50px; font-size: 14px; font-weight: 400; }
}
@media (max-width:800px) {
  .sidebar .sb-acc-body li a, .sidebar .sb-acc-body .cat-children li a { padding: 0 8px 0 17px; line-height: 50px; font-size: 14px; font-weight: 400; }
}
.sidebar .sb-acc-body li a.active, .sidebar .sb-acc-body .cat-children li a.active { padding-left: 12px; border-left: 2px solid var(--accent); }
@media (min-width:801px) {
  .sidebar .sb-acc-body li a.active, .sidebar .sb-acc-body .cat-children li a.active { padding-left: 15px; }
}
.sb-acc-body .sb-more { padding-left: 14px; padding-right: 14px; border-top: 1px solid var(--line); }
@media (min-width:801px) {
  .sb-acc-body .sb-more { height: 50px; box-sizing: border-box; padding: 0 17px; font-size: 16px; font-weight: 400; }
}
@media (max-width:800px) {
  .sb-acc-body .sb-more { height: 50px; box-sizing: border-box; padding: 0 17px; font-size: 14px; font-weight: 400; }
}
/* 商品別で探すのカテゴリも一定数で「すべて表示」に畳む */
.cat-acc-list.is-collapsed > li:nth-child(n+8) { display: none; }
/* 受注一覧: 備考・管理メモの2列を足したぶん、他の列が潰れないよう最低幅を確保する
   (足りない幅は .table-scroll で横スクロール) */
.orders-table { min-width: 1480px; }
/* 備考・管理メモ列: 60文字までを折り返して表示し、続きはマウスホバー(title)で見せる(30→60文字。列幅は170pxのまま行数で吸収。2026-09-24 船戸指示) */
.admin-table td.order-memo, .admin-table th.order-memo {
  width: 170px; max-width: 170px; font-size: 13px; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.admin-table td.order-memo span[title] { cursor: help; }
.admin-table td.order-memo .order-memo-empty { color: var(--ink-muted); cursor: default; }
/* ============================================================
   デザイナー指示(2026-09-14、資料/JICHODO_EC_レイアウト_0908/商品一覧_デザイン指示・商品詳細_デザイン指示)
   PC版カンプ(幅1400px)の数値に合わせた上書き。SP(800px以下)は従来の指定を維持する。
   社内ガイドラインの下限(文字14px以上)に合わせ、カンプの13px・12pxは14pxにしている。
   ============================================================ */
/* ---- 共通: ヘッダー下端→見出しブロック 60px(パンくずはその中) ---- */
@media (min-width: 801px) {
  .list-main .breadcrumb { font-size: 14px; color: var(--ink); margin: 0 0 14px; }
  .list-main .breadcrumb a { color: var(--ink); }
  .list-main .breadcrumb a:hover { color: var(--line); } /* 2026-09-21 追加修正 R-2: ホバー色(まとめ C-9) */
  /* フッター(margin-top 64px)との間を100pxに */
}
@media (max-width:800px) {
  .list-main .breadcrumb { font-size: 12px; margin: 0 0 30px; }
}
/* ---- 商品一覧: 見出しブロック(50px)・罫線1px・帯(70px) ---- */
@media (min-width: 801px) {
  .page-title.list-title {
    font-size: 30px; font-weight: 400; line-height: 50px; letter-spacing: 0;
    height: 50px; padding: 0; margin: 0; border-bottom: 1px solid var(--line);
    display: flex; align-items: baseline; gap: 18px;
  }
  .list-title-count { font-size: 14px; font-weight: 400; color: var(--ink); }
  .list-toolbar label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); }
  .list-toolbar select[name="sort"] { width: 110px; }
  .list-toolbar select[name="per_page"] { width: 110px; }
}
@media (max-width:800px) {
  .list-toolbar label { font-size: 14px; color: var(--ink); }
  .list-title-count { font-size: 14px; font-weight: 400; color: var(--ink); }
  .page-title.list-title { font-size: 30px; font-weight: 400; line-height: 50px; height: 50px; display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid var(--line); }
}
/* ---- 商品カード(247.5×450、画像220×264、ブランド行は赤) ---- */
@media (min-width: 801px) {
  .product-card .name .badge.season { height: 20px; line-height: 1; padding: 0 6px 1px; font-size: 14px; border-color: var(--ink); margin-left: 6px; vertical-align: 2px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
}
@media (max-width:800px) {
  .product-card .name .badge.season { font-size: 11px; height: 17px; line-height: 15px; padding: 0 4px; }
}
/* ---- ページネーション(枠なしテキスト型) ---- */
.pager .pager-btn { border: none; padding: 0; background: none; color: var(--ink); font-size: 16px; line-height: 1; }
@media (max-width:800px) {
  .pager .pager-btn { font-size: 14px; }
}
.pager .pager-btn:hover { color: var(--line); text-decoration: underline; } /* 2026-09-21 追加修正 R-3: ホバー色(まとめ C-9) */
/* 現在ページ: カンプでは強調なし(要確認)。位置が分かるよう下線だけ付ける */
.pager .pager-btn.active { background: none; color: var(--ink); font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.pager .pager-btn.disabled { color: var(--line); }
.pager .pager-prev, .pager .pager-next { font-size: 14px; display: inline-flex; align-items: center; gap: 20px; }
@media (max-width:800px) {
  .pager .pager-prev, .pager .pager-next { gap: 6px; }
}
/* 矢印: 27pxの線+塗り三角(8.5×7px)。文字ではなくSVG(擬似要素の背景)で描く */
.pager .pager-prev::before, .pager .pager-next::after {
  content: ""; width: 27px; height: 7px; flex: none; background-repeat: no-repeat; background-size: 27px 7px;
}
.pager .pager-prev::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='27' height='7' viewBox='0 0 27 7'><path d='M8.5 3.5H27' stroke='%23505050' stroke-width='1'/><path d='M0 3.5L8.5 0V7Z' fill='%23505050'/></svg>"); }
.pager .pager-next::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='27' height='7' viewBox='0 0 27 7'><path d='M0 3.5H18.5' stroke='%23505050' stroke-width='1'/><path d='M27 3.5L18.5 0V7Z' fill='%23505050'/></svg>"); }
.pager .pager-prev:hover::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='27' height='7' viewBox='0 0 27 7'><path d='M8.5 3.5H27' stroke='%23c03b1f' stroke-width='1'/><path d='M0 3.5L8.5 0V7Z' fill='%23c03b1f'/></svg>"); }
.pager .pager-next:hover::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='27' height='7' viewBox='0 0 27 7'><path d='M0 3.5H18.5' stroke='%23c03b1f' stroke-width='1'/><path d='M27 3.5L18.5 0V7Z' fill='%23c03b1f'/></svg>"); }
.pager .pager-prev.disabled::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='27' height='7' viewBox='0 0 27 7'><path d='M8.5 3.5H27' stroke='%238ca0b4' stroke-width='1'/><path d='M0 3.5L8.5 0V7Z' fill='%238ca0b4'/></svg>"); }
.pager .pager-next.disabled::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='27' height='7' viewBox='0 0 27 7'><path d='M0 3.5H18.5' stroke='%238ca0b4' stroke-width='1'/><path d='M27 3.5L18.5 0V7Z' fill='%238ca0b4'/></svg>"); }
.pager .pager-dots { padding: 0; color: var(--ink); }
.pager .pager-count { color: var(--line); font-size: 14px; }
@media (min-width:801px) and (max-width:1023px) {
  .pager .pager-count { flex: 0 0 100%; text-align: right; }
}
/* ---- 商品一覧: 縦の余白 ---- */
@media (min-width: 801px) {
  .list-main .product-grid { margin-top: 0; }
}
/* ---- 商品詳細: 白ボックス(パディング60px、左右405px+間60px) ---- */
@media (min-width: 801px) {
  .product-detail .photo, .product-detail .info { flex: 1 1 0; }
  /* メイン画像 405×486、サムネイル 90×108 を4列(横15px・縦15px) */
  .gallery-thumb.active { border-color: var(--ink); }
  /* 商品名まわり */
  .product-detail .info h1 { font-size: 26px; font-weight: 400; line-height: 36px; margin: 0; letter-spacing: 0; }
  .product-detail .info h1 .badge.season { height: 22px; line-height: 20px; padding: 0 8px; font-size: 14px; border-color: var(--ink); vertical-align: 4px; margin-left: 8px; }
  .price-main { font-size: 27px; font-weight: 700; margin-top: 24px; line-height: 1.3; }
  .price-main small { font-size: 16px; font-weight: 400; color: var(--ink); margin-left: 2px; }
  .pd-mode strong { font-weight: 700; margin-right: 2px; }
  /* カラー・サイズ選択 */
  /* 選択・ホバーは枠線で示す(以前の outline 表示は透明にして無効化。:focus-visible の輪郭は残す) */
  .uni-label--size { margin-top: 32px; }
  /* 選択後の価格・在庫 */
  .uni-price #sel-price { white-space: nowrap; }
  .uni-price small { font-size: 16px; font-weight: 400; color: var(--ink); margin-left: 2px; }
  /* サイズ表: 見出し行・サイズ列とも背景なし・通常ウェイト(後方の .size-table th の地色に勝たせる) */
  .product-detail .size-table--compact th, .product-detail .size-table--compact thead th { background: none; font-weight: 400; color: var(--ink); }
  /* 送料説明ボックス: 枠なし・背景 #f5f5f5 */
  .product-detail .ship-note {
    margin: 50px 0 0; padding: 18px 20px 20px; border: none; background: var(--canvas);
    font-size: 14px; line-height: 24px; color: var(--ink);
  }
  .product-detail .ship-note b { font-weight: 700; }
  .product-detail .ship-note span { color: var(--ink); }
  /* 数量ステッパー(45px×3)+カートボタン(260×45) */
  /* 電話相談(405×90、枠1px、赤の左線なし) */
  .product-detail .contact-tel-label { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.06em; line-height: 1.5; position: relative; top: -3px; }
  .product-detail .contact-tel-no { font-size: 24px; font-weight: 400; }
  .product-detail .contact-tel-hours, .product-detail .contact-tel-note { grid-column: 1 / -1; font-size: 14px; color: var(--ink); }
  /* お気に入り(405×46) */
  .pd-fav .btn:hover { border-color: var(--ink); background: var(--paper); }
  .pd-fav-heart { font-size: 20px; color: var(--accent); line-height: 1; }
  /* 説明文 */
  /* サイズ表: 見出しは上下罫線の帯(50px)中央揃え、行50px、横罫線のみ */
  .size-chart-title {
    margin: 50px 0 0; height: 50px; display: flex; align-items: center; justify-content: center;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    font-size: 16px; font-weight: 400; letter-spacing: 0;
  }
  .size-table--compact thead th { border-bottom: 1px solid var(--line); }
  .size-chart-note { font-size: 14px; line-height: 24px; color: var(--ink); margin-top: 38px; }
}
@media (max-width:800px) {
  .size-chart-note { margin: 38px 0 35px; font-size: 14px; line-height: 24px; color: var(--ink); }
  .uni-price #sel-price { white-space: nowrap; }
  .product-detail .contact-tel-no { font-size: 24px; font-weight: 400; line-height: 1.4; }
  .product-detail .contact-tel-label { font-weight: 400; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
  .size-chart-title { font-size: 16px; font-weight: 400; text-align: center; height: 50px; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 50px; }
  .pd-mode strong { font-weight: 700; }
  .product-detail .info h1 { font-size: 25px; font-weight: 400; line-height: 36px; }
}
/* ---- 一括購入ボックス(2つ目)・特徴ボックス(3つ目) ---- */
@media (min-width: 801px) {
  .bulk-box { margin-top: 25px; padding: 60px; }
  .bulk-title strong { font-weight: 700; margin-right: 2px; }
  .bulk-box .buy-table { font-size: 16px; }
  .bulk-box .buy-table td.buy-variant { padding-left: 48px; }
  .bulk-box .row-swatch { width: 16px; height: 16px; border: 1px solid var(--ink); }
  .bulk-box .buy-table .num, .bulk-box .buy-table .ctr { font-size: 16px; }
  .bulk-box .buy-table input.qty:focus { border-color: var(--ink); }
  .bulk-box .restock-btn { width: 85px; height: 30px; padding: 0; font-size: 14px; font-weight: 400; border-color: var(--line); color: var(--ink); }
  .restock-box__row input::placeholder { color: var(--line); }
  .restock-box__row .btn { width: 260px; height: 30px; padding: 0; font-size: 14px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; }
  .feature-box { margin-top: 25px; padding: 60px; }
  /* 特徴が3件未満のとき、空のマスが罫線色で塗られないよう、グリッドの地色ではなくカードの枠線で格子を描く */
  .feature-box .feature-grid { margin-top: 60px; gap: 0; background: none; border: none; padding: 0 1px 1px 0; }
  .feature-box .feature-card { border: 1px solid var(--line); margin: 0 -1px -1px 0; }
  .feature-note { margin-top: 25px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
}
@media (max-width:800px) {
  .bulk-box .buy-table td.buy-variant { padding-left: 4px; }
  .bulk-box .buy-table { table-layout: fixed; width: 100%; font-size: 12px; }
  .bulk-title strong { font-weight: 700; }
}
/* ---- Cookie使用同意バナー(画面下固定。2026-09-16 船戸指示) ---- */
.cookie-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
  padding: 14px var(--gutter);
}
@media (max-width:800px) {
  .cookie-consent { padding: 12px var(--gutter) 14px; }
}
.cookie-consent__inner {
  max-width: var(--content-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap;
}
.cookie-consent__text { margin: 0; flex: 1 1 480px; font-size: 14px; line-height: 1.6; color: var(--ink); }
@media (max-width:800px) {
  .cookie-consent__text { font-size: 14px; flex-basis: 100%; }
}
.cookie-consent__text a { color: var(--accent); text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 10px; flex: none; }
@media (max-width:800px) {
  .cookie-consent__actions { width: 100%; }
}
.cookie-consent__actions .btn { padding: 10px 20px; font-size: 15px; font-weight: 400; white-space: nowrap; }
@media (max-width:800px) {
  .cookie-consent__actions .btn { flex: 1; width: auto; }
}
/* ============================================================
   デザイン修正依頼(資料/JICHODO_EC_レイアウト_0908/依頼_共通部分とトップページ_20260916.md)。
   §番号は依頼mdの項目。PC(801px以上)のカンプ合わせ。横幅が要る指定(§1 検索窓・§2 12等分)は 1240px 以上にだけ入れる。
   画像素材は /img/common/ /img/brand/ /img/category/(依頼の「画像素材」フォルダをそのまま配置)。
   ============================================================ */
/* §5 トップ メインバナー: 中央スライド=ウィンドウ幅の62.5%、帯は全幅、両脇との隙間6px */
/* §1 §2 のうち幅が必要なもの: 1240px以上(カテゴリナビが1段に収まる幅)だけ */
@media (min-width: 1240px) {
  /* セル直下の a だけに効かせる(.global-nav a だとドロップダウン内の a にも当たる) */
  .global-nav > ul > .gnav-item > a { height: 100px; box-sizing: border-box; padding: 0 4px 3px; gap: 0; justify-content: space-between; position: relative; }
  /* hover/現在位置の下線はセルの8px下(セル内は画像68px+2行ラベルでほぼ満杯) */
  .global-nav > ul > .gnav-item > a:hover, .global-nav > ul > .gnav-item > a.active { box-shadow: none; }
  .global-nav > ul > .gnav-item > a:hover::after, .global-nav > ul > .gnav-item > a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--ink); }
  /* ドロップダウンは hover下線のすぐ下(セル下端+12px)から開き、隙間は透明の::afterで埋めてホバーを切らさない */
  .global-nav .gnav-item.open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
}
@media (min-width:801px) and (max-width:1239px) {
  .global-nav > ul > .gnav-item > a { padding-left: 4px; padding-right: 4px; }
}
@media (min-width: 801px) {
  /* ---------- §1 ヘッダー上段 ---------- */
  /* PCはロゴタイプ画像 */
  .logo-type { display: block; height: 26px; width: auto; }
  /* 右上アイコンとカートは画像(icon_*.png)。SVGはSP用に残す */
  .header-links .hicon-img { display: block; width: 25px; height: 25px; }
  .header-cart .hicon-img--cart { width: 31px; height: 22px; }
  /* ---------- §2 カテゴリナビ(全幅共通: 罫線・画像サイズ) ---------- */
  .gnav-item:last-child { border-right: none; }
  /* ---------- §3 サイドバー / 見出し・白ボックスの上端(ヘッダー下端+60px。パンくずはその中) ---------- */
  .container .breadcrumb { margin: -52px 0 28px; }
  /* フラッシュ(「カートに追加しました」等)が先に出るページでは、パンくずを引き上げるとフラッシュに重なる(2026-09-18 船戸指摘)。
     引き上げ分はフラッシュ側に移し、直後のパンくずは通常位置にする */
  .container > .flash, .container > .flash-error { margin-top: -52px; }
  .container > .flash ~ .breadcrumb, .container > .flash-error ~ .breadcrumb,
  .container.has-flash .breadcrumb { margin-top: 0; }   /* 2026-09-24: 親のクラス(layouts/app)でも同じ扱いにする */
  .sb-order .sb-order-icon { display: block; width: 28px; height: 28px; margin-right: 11px; }
  .sb-order > span:not(.sb-order-icon) { flex: 1; }   /* 2026-09-22 注文履歴ボタン: アイコンが span になったため文字の span だけを伸ばす */
  .sb-naire img { display: block; width: 100%; height: auto; }
  .sb-card .sb-ico-img { display: block; width: 38px; height: 38px; flex-shrink: 0; }
  .sb-acc + .sb-acc { border-top: 1px solid var(--line); }
  .sidebar a.cat-parent, .sidebar .sb-acc-body .num { font-weight: 400; }
  /* ---------- §4 フッター(白地・罫線なし、ロゴと電話番号は画像、リンクはロゴの下に2列) ---------- */
  .footer-logo .footer-logo-mark { width: 30px; height: 29px; }
  .footer-logo .footer-logo-type { height: 28px; width: auto; }
  .footer-tel img { display: block; width: 398px; height: auto; }
  /* ---------- §6 サブバナー(画像に枠が描かれているので外側の枠は出さない) ---------- */
  /* ---------- §7 ブランドタイル(330×150、枠線共有、タイル画像は cover) ---------- */
  .brand-card--tile .brand-card-img img { object-fit: contain; width: 66.7%; height: 66.7%; }
  /* ---------- §8 職業から探す(3列×4行、各セル330×75、枠線共有) ---------- */
  .job-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0 1px 1px 0; }
  .job-card { display: flex; align-items: center; justify-content: center; gap: 18px; height: 75px; border: 1px solid var(--line); margin: 0 -1px -1px 0; color: var(--ink); font-size: 18px; line-height: 1.25; text-decoration: none; background: var(--paper); }
  .job-card img { width: 26px; height: 26px; flex-shrink: 0; }
  .job-card:hover { color: var(--accent); text-decoration: none; background: var(--canvas); }
  /* ---------- §9 トップ: お知らせ帯・お知らせ一覧・縦の余白 ---------- */
  /* home-hero の上パディング10pxを打ち消してヘッダー直下に */
  .home-news, .home-news li + li { border-color: var(--line); }
  /* フッターの margin-top 100px だけにする(旧: 36px+64px) */
}
@media (max-width:800px) {
  .home-news, .home-news li + li { border-color: var(--line); }
  .sidebar a.cat-parent, .sidebar .sb-acc-body .num { font-weight: 400; }
  .sb-acc + .sb-acc { border-top: 1px solid var(--line); }
  .job-card img { width: 22px; height: 22px; }
  .job-card { display: flex; align-items: center; justify-content: center; gap: 10px; height: 60px; border: 1px solid var(--line); margin: 0 -1px -1px 0; color: var(--ink); font-size: 15px; line-height: 1.25; text-decoration: none; }
  .job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0 1px 1px 0; }
  .sb-naire img { display: block; width: 100%; height: auto; }
  .footer-tel img { display: block; width: 189px; height: auto; }
  .footer-logo .footer-logo-type { height: 19px; width: auto; }
  .footer-logo .footer-logo-mark { width: 28px; height: 27px; }
}
/* SP: ヘッダー右上のアイコンはSVGのまま(画像アイコンはPC用)。
   ロゴタイプ画像・サイドバー(ドロワー)の画像アイコンは修正依頼 2026-09-18 §D-1・§D-3 でSPにも出す */
@media (max-width: 800px) {
  .hicon-img { display: none; }
  /* §D-1 1段目: ロゴマーク28×27 + ロゴタイプ画像(高さ19px)。テキストロゴは使わない */
  .logo-type { display: block; height: 19px; width: auto; }
  .header-inner .brand .logo { display: none; }
  /* §D-3 ドロワー: 注文履歴の白い時計・ご案内カードの画像アイコン(PCと同じ) */
  .sb-order .sb-order-icon { display: block; width: 20px; height: 20px; margin-right: 19px; }
  .sb-order > span:not(.sb-order-icon) { flex: 1; }   /* 2026-09-22 注文履歴ボタン: アイコンが span になったため文字の span だけを伸ばす */
  .sb-card .sb-ico-img { display: block; width: 24px; height: 24px; flex-shrink: 0; }
  .sb-card .sb-ico { display: none; }
}
/* ---- override_まとめ.css のうち既存に同じセレクタが無いもの(新規) ---- */
@media (min-width:801px) {
  .brand-card--tile .brand-card-img { display: flex; align-items: center; justify-content: center; }
  .buy-table .stock-ok, .buy-table .stock-out { color: var(--ink); }
  .product-detail .pd-desc { margin-top: 50px; font-size: 18px; line-height: 32px; }
  .product-detail .size-table--compact thead th { font-size: 16px; }
  .pd-desc .badge { font-size: 16px; color: var(--ink); border-color: var(--line); height: 23px; line-height: 21px; padding: 0 8px; }
  .pd-desc .badge + span { font-size: 14px; line-height: 24px; color: var(--ink); }
  .gallery-dots { display: flex; justify-content: center; gap: 15px; margin-top: 25px; }
  .gallery-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--line); cursor: pointer; }
  .gallery-dots span.active { background: var(--ink); }
  .gallery-dots + .gallery-thumbs { margin-top: 25px; }
  .product-detail .contact-tel-no, .product-detail .contact-tel-note { line-height: 1.5; }
}
@media (max-width:800px) {
  .header-inner .brand { height: 50px; gap: 8px; }
  .sidebar-drawer-head strong { display: none; }
  .sidebar-close::before, .sidebar-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1px; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg); }
  .sidebar-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .product-detail .price-main small { font-size: 15px; font-weight: 400; }
  .size-btn:not(.selected):not(.soldout) { color: var(--line); border-color: var(--line); }
  .product-detail .ship-note { border: none; background: var(--canvas); padding: 18px 20px 20px; font-size: 14px; line-height: 24px; margin-top: 50px; }
  .uni-cartform { flex-direction: row; align-items: center; gap: 10px; }
  .qty-stepper button, .qty-stepper input { width: 45px; min-height: 45px; height: 45px; flex: none; }
  .uni-cartform .btn.btn-primary { flex: none; width: 170px; height: 45px; min-height: 45px; padding: 0; font-size: 16px; font-weight: 400; display: inline-flex; align-items: center; justify-content: center; }
  .btn.btn-ghost { height: 46px; font-size: 16px; font-weight: 400; border-color: var(--line); }
  .product-detail .pd-desc { margin-top: 50px; padding-top: 50px; font-size: 16px; line-height: 30px; }
  /* §D-4 職業から探す: SPは1列×12行(各345×78.5、枠線共有)。アイコン24pxを左155pxの位置に、ラベル18px */
  .job-grid { grid-template-columns: 1fr; }
  .job-card { justify-content: center; padding-left: 0; height: 78.5px; gap: 16px; font-size: 18px; white-space: nowrap; }
  .job-card img { width: 24px; height: 24px; }
  .job-card br { display: none; }
  /* §D-7 スライドインジケーター(PCと同じ: メイン画像の25px下・直径5px・20pxピッチ)。サムネイルはその25px下 */
  .gallery-dots { display: flex; justify-content: center; gap: 15px; margin-top: 25px; }
  .gallery-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--line); cursor: pointer; }
  .gallery-dots span.active { background: var(--ink); }
  .gallery-dots + .gallery-thumbs { margin-top: 25px; }
}
/* ==========================================================================
   SP版(幅800px以下)の崩れ修正(2026-09-18)
   ========================================================================== */
@media (max-width: 800px) {
  /* --- ヘッダー: ロゴマークとロゴタイプが接していたので間隔を入れる(左寄せのまま) --- */
  /* --- お知らせ帯: ヘッダーの直下・帯の直下にメインバナー(カンプ SP p1/p4) --- */
  /* --- メインバナー下: ドットは画像の20px下、ドットの80px下にサブバナー --- */
  /* .container の上パディング16pxが加わるので、ドット下80pxにするには margin-bottom を64pxにする */
  /* --- 職業から探す: 1行に収め、アイコンの位置をそろえたまま全体を中央に置く
         (カンプの x=155 は345px幅に長いラベルが入らないため、ラベル枠を固定幅にして中央寄せ) --- */
  .job-card span { width: 180px; }
  /* --- 商品詳細: 電話相談ボックス。flex-direction:column + flex-wrap:wrap + 高さ固定で
         項目が2列に割れて注記が右にはみ出していた。折り返しを止めて縦3行・中央揃えにする --- */
  .product-detail .contact-tel-note { font-size: 14px; line-height: 1.5; color: var(--ink); }
  /* --- 選択後の価格・在庫: 価格は改行させない。在庫は収まらなければ次の行へ --- */
  /* --- サイズ表: 前後の余白と注記の文字サイズ(SPには指定が無く20px/34pxのままだった) --- */
  /* --- 一括購入の見出し: display:flex の子要素(「一括購入」と「(サイズ・カラー別に…)」)が
         それぞれ折り返して「一括購 / 入」のように割れていた → 縦2行に分ける --- */
  /* --- 商品詳細のメイン画像: max-height が 82vh のため、枠(405:486)より縦長の画像
         (例: 71216 は450×600)が枠から縦にはみ出し、overflow:hidden で上下が切れていた --- */
  /* --- 一括購入: 表が455pxで横スクロールになり、カラー名が1文字ずつ折り返していた。
         画面幅に収める(列幅を固定し、文字と入力欄を小さくする) --- */
  .bulk-box .buy-scroll { overflow-x: visible; }
  .bulk-box .buy-table th, .bulk-box .buy-table td { height: auto; padding: 10px 4px; font-size: 12px; line-height: 1.5; }
  /* th に style="width:45%" 等が直接書かれているため、SPの列幅はこちらで上書きする(在庫列が狭すぎて1文字ずつ折り返していた) */
  .bulk-box .buy-table th:nth-child(1) { width: 38% !important; }
  .bulk-box .buy-table th:nth-child(2) { width: 17% !important; }
  .bulk-box .buy-table th:nth-child(3) { width: 27% !important; }
  .bulk-box .buy-table th:nth-child(4) { width: 18% !important; }
  /* 「在庫なし(14日以内に出荷目安)」は nowrap 指定のままだと列からはみ出してページに横スクロールが出る */
  .bulk-box .buy-table .stock-backorder { white-space: normal; font-size: 11px; }
  .bulk-box .restock-btn { width: 100%; max-width: 56px; height: 32px; padding: 0; font-size: 11px; line-height: 1.2; }
  /* --- 商品一覧のページ送り: 件数は下の行へ --- */
}
@media (min-width:801px) and (max-width:999px) {
  .bulk-box .buy-table th, .bulk-box .buy-table td { padding-left: 8px; padding-right: 8px; }
}
@media (min-width:801px) {
  .job-card span { width: 112px; }
}
/* ==========================================================================
   タブレット幅(801〜1100px)
   ========================================================================== */
@media (min-width: 801px) and (max-width: 1100px) {
  /* この幅では .detail-main を縦積みにしているのに画像列の position:sticky が残っていて、
     下に積んだカラー選択などが画像の上を通ってしまう。追従を切る */
}
/* ==========================================================================
   PC・タブレット(幅801px以上): 職業から探す のアイコンの縦位置をそろえる
   ========================================================================== */
@media (min-width: 801px) {
  /* 3列とも中央寄せのため、ラベルの長さでアイコンの位置が1枚ずつずれていた。
     ラベル枠を固定幅にして、どの幅・どの列でもアイコンが同じ位置に来るようにする(文字サイズは18pxのまま) */
}
/* ページ送り: 前後2ページ版(.pager--pc)と前後1ページ版(.pager--sp)をテンプレートが両方出すので、幅で片方だけ表示する
   (修正依頼 2026-09-18 SP修正 §10。SPは番号の間隔も詰めて1行に収める) */
@media (min-width: 801px) {
  .pager--sp { display: none; }
}
@media (max-width: 800px) {
  .pager--pc { display: none; }
  /* 総ページ数が3桁(139ページ等)でも1行に収まるよう、番号の間隔と矢印の間隔を詰め、文字は14px(ガイドラインの下限) */
}
/* ---- override.css のうち既存に同じセレクタが無いもの(新規) ---- */
@media (min-width:1240px) {
  .global-nav > ul > .gnav-item > a:hover::after { display: none; }
}
.home-hero + .global-nav { border-bottom: none; background: none; }
.gnav-dropdown .gnav-dropdown-all { margin-top: 4px; }
@media (min-width:801px) {
  .home-hero + .global-nav .gnav-thumb { width: 70px; height: 84px; flex-shrink: 0; }
  .home-hero + .global-nav > ul > .gnav-item > a { gap: 20px; padding-top: 0; padding-bottom: 0; }
  .home-hero + .global-nav { margin-bottom: 7px; } /* 2026-09-21 追加修正 R-1: ナビ下の余白(まとめ C-2b) */
  .sidebar .sb-acc-body li a { font-size: 16px; }
  .sidebar .sb-acc-body .cat-children li a { font-size: 16px; }
  .home-hero + .global-nav + .container .product-card .price { font-size: 20px; }
  .home-hero + .global-nav + .container .product-card .name .badge.season { font-size: 13px; }
}
@media (max-width:800px) {
  .home-hero + .global-nav > ul { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 27px; row-gap: 7px; }
  .home-hero + .global-nav a { padding: 0; gap: 20px; font-size: 14px; }
  .home-hero + .global-nav .gnav-thumb img { mix-blend-mode: normal; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
  .home-hero + .global-nav .gnav-label { font-size: 14px; line-height: 20px; min-height: 40px; align-items: flex-start; }
  .home-hero + .global-nav .gnav-dropdown, .home-hero + .global-nav .gnav-item.open .gnav-dropdown { display: none; }
}
/* ---- override_中間幅.css のうち既存に同じセレクタが無いもの(新規) ---- */
@media (min-width:801px) and (max-width:1239px) {
  .bulk-box .buy-table td:first-child { white-space: nowrap; }
  .bulk-box .stock-backorder { white-space: normal; }
  .bulk-box .buy-table th:nth-child(3), .bulk-box .buy-table td:nth-child(3) { min-width: 120px; }
}
@media (min-width:801px) and (max-width:999px) {
  .bulk-box .buy-table th, .bulk-box .buy-table td, .bulk-box .buy-table tr.color-head td { font-size: 14px; }
}

/* ==========================================================================
   表示速度の改善(2026-09-18 依頼 §4、2026-09-21 反映): PC 用の PNG アイコンを <img> から背景画像に変更。
   <img> は display:none でもダウンロードされるため、SP で使わない 10 点が毎回読み込まれていた。
   背景画像は表示されている要素にしか読み込まれない。寸法・位置の指定は既存の .hicon-img / .sb-ico-img / .sb-order-icon のまま
   ========================================================================== */
.hicon-img, .sb-ico-img, .sb-order-icon { background-position: center; background-repeat: no-repeat; background-size: contain; }
.hicon-img--favorite { background-image: url(/img/common/icon_favorite.png); }
.hicon-img--history { background-image: url(/img/common/icon_history.png); }
.hicon-img--login { background-image: url(/img/common/icon_login.png); }
.hicon-img--cart { background-image: url(/img/common/icon_cart.png); }
.sb-order-icon { background-image: url(/img/common/side_icon_history_white.png); }
.sb-ico-img--guide { background-image: url(/img/common/side_icon_guide.png); }
.sb-ico-img--faq { background-image: url(/img/common/side_icon_faq.png); }
.sb-ico-img--houjin { background-image: url(/img/common/side_icon_houjin.png); }
.sb-ico-img--contact { background-image: url(/img/common/side_icon_contact.png); }
.sb-ico-img--catalog { background-image: url(/img/common/side_icon_catalog.png); }