/* ===== 商品管理画面 スプレッドシートスタイル ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* チェックボックスの横の文字は、押してオン・オフするためのものなので、
   クリックしても文字が選択状態にならないようにする。
   （素早く2回押すと単語が青く反転してしまい、押し間違えたように見えるため）
   クラス名がばらばらなので、チェックボックスを含むlabelをまとめて指定している。 */
label:has(input[type="checkbox"]) {
  user-select: none;
}

/* ===== 全体レイアウト ===== */
.管理画面 {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f8f0ff 0%, #f0f4ff 50%, #fff5f5 100%);
  font-family: -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  color: #2D3748;
}

/* ===== ツールバー ===== */
/* ボタンが増えても2行にならないよう、折り返さずに必ず1行に収める。
   入りきらないボタンは「≫」メニューへ入る（.ツール群を参照） */
.ツールバー {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px 8px;
  padding: 10px 16px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

/* ツールバーのボタンをまとめる入れ物。余った幅ぶんだけ受け取る */
.ツール群 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

/* ボタンの幅を測るためだけの行。見えないが、常に全部のボタンが並んでいる */
.ツール群計測枠 {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.ツール群計測 {
  display: flex;
  gap: 8px;
  width: max-content;
}

/* 入りきらなかったボタンをまとめて開く「≫」 */
.ツールバーボタン.あふれボタン {
  padding: 5px 12px;
  font-size: 14px;
  background: #6B7280;
}

.ツールバーボタン.あふれボタン:hover {
  background: #374151;
}

/* 出力中など、いま動いている作業の表示（押せないが目立たせる） */
.ツールバーボタン.作業中,
.ツールバーボタン.作業中:disabled {
  background: #EEF2FF;
  color: #4338CA;
  cursor: default;
}

.検索ボックス {
  width: 240px;
  flex-shrink: 0;
  padding: 6px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  color: #374151;
}

.検索ボックス:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
}

.検索ボックス::placeholder {
  color: #D1D5DB;
}

/* 戻る・進むボタン */
.履歴ボタン群 {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.履歴ボタン {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #374151;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  color: white;
}

.履歴ボタン:hover:not(:disabled) {
  background: #1F2937;
}

.履歴ボタン:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.リセットボタン {
  flex-shrink: 0;
  padding: 5px 14px;
  border: none;
  border-radius: 20px;
  background: #374151;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}

.リセットボタン:hover {
  background: #1F2937;
}

/* --- 統一ツールバーボタン --- */
.ツールバーボタン {
  padding: 5px 14px;
  border: none;
  border-radius: 20px;
  background: #374151;
  color: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.4;
}

.ツールバーボタン:hover {
  background: #1F2937;
}

.ツールバーボタン:disabled {
  background: #9CA3AF;
  cursor: not-allowed;
}

/* 先頭の1000件を表示したあと、残りを裏で読み込んでいる間の進捗表示 */
.読込進捗 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;   /* リロードボタンと一緒に右端へ寄せる */
  padding: 4px 10px;
  border-radius: 20px;
  background: #EEF2FF;
  color: #4F46E5;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.読込進捗スピナー {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid #C7D2FE;
  border-top-color: #4F46E5;
  border-radius: 50%;
  animation: リロード回転 0.8s linear infinite;
}

.読込失敗 {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 20px;
  background: #FEF2F2;
  color: #DC2626;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.リロードボタン {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-left: 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: white;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;
  align-self: center;
}

.リロードボタン.右寄せ {
  margin-left: auto;
}

.リロードボタン:hover:not(:disabled) {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.リロードボタン:active:not(:disabled) {
  background: #F3F4F6;
}

.リロードボタン:disabled {
  cursor: not-allowed;
  color: #9CA3AF;
}

.リロードボタン svg {
  display: block;
  flex-shrink: 0;
}

.リロードボタン.リロード中 svg {
  animation: リロード回転 0.8s linear infinite;
}

@keyframes リロード回転 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.ユーザーエリア {
  margin-left: auto;
  position: relative;
  flex-shrink: 0;
}

.メールアドレス {
  color: #6B7280;
  font-size: 12px;
  cursor: pointer;
  padding: 5px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  transition: all 0.15s;
  font-weight: 500;
}

.メールアドレス:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.メールアドレス.未設定 {
  color: #DC2626;
  border-color: #FCA5A5;
}

.ユーザーメニューアドレス {
  padding: 8px 16px 6px;
  font-size: 11px;
  color: #9CA3AF;
  border-bottom: 1px solid #F3F4F6;
  white-space: nowrap;
}

.ユーザーメニュー {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 4px 0;
  min-width: 120px;
}

.ユーザーメニュー button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: #64748B;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}

.ユーザーメニュー button:hover {
  background: #F1F5F9;
}

/* ===== ツールメニュー：1ボタンから複数アクションを選ぶドロップダウン（ビープライス／設定など） ===== */
.ツールメニューラッパー {
  position: relative;
  display: inline-block;
}
.ツールメニュー背景 {
  position: fixed;
  inset: 0;
  z-index: 99;
}
.ツールメニュー {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  padding: 4px 0;
  min-width: 260px;
  /* 「≫」でまとめて出すときに横に伸びすぎないようにする */
  max-width: min(560px, 92vw);
}
.ツールメニュー見出し {
  padding: 7px 16px 5px;
  font-size: 11px;
  color: #9CA3AF;
  border-bottom: 1px solid #F3F4F6;
  white-space: nowrap;
}
.ツールメニュー button {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}
.ツールメニュー button:hover {
  background: #F1F5F9;
}
/* 実行中など、いま押せない項目 */
.ツールメニュー button:disabled {
  color: #9CA3AF;
  cursor: not-allowed;
}
.ツールメニュー button:disabled:hover {
  background: none;
}
.ツールメニュー button .説明 {
  display: block;
  font-size: 11px;
  color: #94A3B8;
  margin-top: 1px;
  white-space: normal;   /* 説明が長いときは折り返す（メニューが横に伸びないように） */
}

/* ===== エクスポートモーダル（対象＋形式を選んで出力） ===== */
.エクスポートモーダル {
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 460px;
  max-width: 92vw;
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px 22px;
}

.エクスポートモーダル見出し {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 14px;
}

.エクスポート節 {
  margin-bottom: 16px;
}

.エクスポート節ラベル {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 7px;
  letter-spacing: 0.02em;
}

.エクスポート対象選択 {
  display: flex;
  gap: 8px;
}

.エクスポート対象 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.エクスポート対象:hover {
  border-color: #CBD5E1;
}

.エクスポート対象.選択中 {
  border-color: #374151;
  background: #F8FAFC;
}

.エクスポート対象.無効 {
  opacity: 0.5;
  cursor: not-allowed;
}

.エクスポート形式一覧 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.エクスポート形式グループ {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.02em;
}

.エクスポート形式グループ.区切り {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #E5E7EB;
}

.エクスポート形式 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  cursor: pointer;
}

.エクスポート形式:hover {
  border-color: #CBD5E1;
  background: #FAFAFA;
}

.エクスポート形式.選択中 {
  border-color: #374151;
  background: #F8FAFC;
}

.エクスポート形式 input {
  margin-top: 2px;
  flex-shrink: 0;
}

.エクスポート形式中身 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.エクスポート形式題 {
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}

.エクスポート形式説明 {
  font-size: 11.5px;
  color: #6B7280;
  line-height: 1.5;
}

.エクスポートモーダルフッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.エクスポート注記 {
  font-size: 11px;
  color: #9CA3AF;
  flex: 1;
}

.エクスポート進捗表示 {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  flex: 1;
}

.エクスポートフッターボタン群 {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.エクスポートキャンセル {
  padding: 8px 16px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: white;
  color: #6B7280;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.エクスポートキャンセル:hover:not(:disabled) {
  background: #F9FAFB;
}

.エクスポート実行ボタン {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: #374151;
  color: white;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.エクスポート実行ボタン:hover:not(:disabled) {
  background: #1F2937;
}

.エクスポート実行ボタン:disabled,
.エクスポートキャンセル:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== 保存エラー通知 ===== */
.保存エラーバー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  background: #FEF2F2;
  border-bottom: 1px solid #FECACA;
  color: #DC2626;
  font-size: 13px;
  flex-shrink: 0;
}

.保存エラーバー button {
  border: none;
  background: none;
  color: #DC2626;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}

.撮影済み通知バー {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #1e3a5f;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10002;
  max-width: 90vw;
}

.撮影済み通知バー button {
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* 請求書確定→発送自動作成の通知（撮影済み通知バーと同型） */
.発送作成通知バー {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #1e3a5f;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 10002;
  max-width: 90vw;
}

.発送作成通知バー button {
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ===== フィルターバー ===== */
.フィルターバー {
  padding: 6px 16px;
  background: #FAFAFA;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

.フィルターバー.折りたたみ {
  padding: 4px 16px;
}

.フィルターヘッダー {
  display: flex;
  align-items: center;
}

.ユーザー名未設定警告 {
  margin-left: auto;
  color: #DC2626;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding-right: 8px;
}

.フィルター展開ボタン {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  padding: 4px 8px 4px 2px;
  border-radius: 6px;
  font-family: inherit;
}

.フィルター展開ボタン:hover {
  color: #374151;
  background: #F3F4F6;
}

.フィルター矢印 {
  font-size: 9px;
  transition: transform 0.15s;
  display: inline-block;
}

.フィルター矢印.展開中 {
  transform: rotate(90deg);
}

.フィルター適用バッジ {
  background: #4F46E5;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ===== 色ツールバー（スプレッドシート風） ===== */
.色ツールバー {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.色ツールバー区切り {
  width: 1px;
  height: 20px;
  background: #E5E7EB;
  margin: 0 6px;
}

.色ツール項目 {
  position: relative;
  display: inline-flex;
}

.色ツールボタン {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  font-family: inherit;
  color: #374151;
  transition: background 0.12s, border-color 0.12s;
}

.色ツールボタン:hover:not(:disabled) {
  background: #F3F4F6;
  border-color: #E5E7EB;
}

.色ツールボタン:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.色ツールアイコン {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.色ツールアイコン.文字アイコン {
  font-weight: 700;
  font-size: 14px;
  color: #374151;
  border-bottom: 3px solid #DC2626;
  padding-bottom: 1px;
  height: 16px;
}

.色ツールアイコン.枠アイコン {
  font-size: 16px;
  color: #6B7280;
}

.色ツール矢印 {
  font-size: 8px;
  color: #9CA3AF;
}

.色ツールクリア {
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  margin-left: 4px;
  transition: all 0.12s;
}

.色ツールクリア:hover:not(:disabled) {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #DC2626;
}

.色ツールクリア:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ===== 色パレットポップオーバー ===== */
.色パレットポップ {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 10px;
  min-width: 230px;
}

.色パレットなし {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 8px;
  transition: all 0.12s;
}

.色パレットなし:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
  color: #374151;
}

.色パレットなし印 {
  font-size: 14px;
  color: #9CA3AF;
}

.色パレットグリッド {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  margin-bottom: 10px;
}

.色パレットセル {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.08s, box-shadow 0.08s;
}

.色パレットセル:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 1;
  position: relative;
}

.色パレット履歴 {
  padding: 8px 0;
  margin-bottom: 4px;
  border-top: 1px solid #F3F4F6;
}

.色パレット履歴ラベル {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.色パレット履歴グリッド {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
}

.色パレットカスタム {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #F3F4F6;
}

.色パレットカスタムトグル {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.色パレットカスタムトグル:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.色パレットカスタムスウォッチ {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.色パレットカスタムラベル文字 {
  font-size: 11px;
  color: #374151;
  font-weight: 600;
  flex: 1;
  text-align: left;
}

.色パレットカスタム値 {
  font-family: monospace;
  font-size: 10px;
  color: #9CA3AF;
}

/* ネイティブカラー入力はラベル全体に透明オーバーレイ。
   ラベルの click がこの input に委譲され、ネイティブピッカーがラベル位置で開く。 */
.色パレットカスタム隠し入力 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.色パレットカスタム適用 {
  background: #4F46E5;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}

.色パレットカスタム適用:hover {
  background: #4338CA;
}

/* ===== 出品ストア色エディタ ===== */
.色ツール出品ボタン {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.色ツール出品ボタン:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
}

.色ツール出品ボタン.展開中 {
  background: #EEF2FF;
  border-color: #4F46E5;
  color: #4338CA;
}

.色ツール出品アイコン {
  font-size: 13px;
}

.色ツール出品ラベル {
  font-size: 11px;
}

.出品色エディタ {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 380px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.出品色エディタヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品色エディタタイトル {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
}

.出品色エディタ全リセット {
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.出品色エディタ全リセット:hover {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #DC2626;
}

.出品色エディタ本体 {
  overflow-y: auto;
  padding: 6px 10px 10px;
}

.出品色行 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid #F9FAFB;
}

.出品色行:last-child {
  border-bottom: none;
}

.出品色プレビュー {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.出品色名称 {
  flex: 1;
  font-size: 12px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.出品色入力ラベル {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: #9CA3AF;
  cursor: pointer;
}

.出品色入力印 {
  font-size: 10px;
}

.出品色入力 {
  width: 22px;
  height: 22px;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  background: #FFFFFF;
}

.出品色行リセット {
  background: transparent;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9CA3AF;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: all 0.12s;
}

.出品色行リセット:hover:not(:disabled) {
  background: #F3F4F6;
  color: #374151;
}

.出品色行リセット:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.フィルター内容 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 6px 0 2px;
}

.フィルター選択ラッパー {
  position: relative;
}

.フィルター選択ボタン {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.15s;
  color: #374151;
  font-family: inherit;
  white-space: nowrap;
}

.フィルター選択ボタン:hover {
  border-color: #D1D5DB;
  background: #F9FAFB;
}

.フィルター選択ボタン.適用中 {
  border-color: #4F46E5;
  background: #EEF2FF;
  font-weight: 600;
}

.フィルター選択矢印 {
  font-size: 8px;
  color: #9CA3AF;
}

.フィルターポップ {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  margin-top: 4px;
  min-width: 160px;
  max-width: 260px;
}

.フィルタークリア {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  border-bottom: 1px solid #F3F4F6;
  background: none;
  font-size: 11px;
  color: #6366F1;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.フィルタークリア:hover {
  background: #F9FAFB;
}

/* フィルターポップ内の絞込検索ボックス */
.フィルター内検索 {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px;
  padding: 4px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.フィルター内検索:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.フィルター内ヒットなし {
  padding: 8px 12px;
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
  text-align: center;
}

/* 空欄項目（フィルターポップの一番上に表示するチェックボックス） */
.フィルターポップ項目.空欄項目 {
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
  font-style: italic;
  color: #6B7280;
}
.フィルターポップ項目.空欄項目.選択中 {
  background: #ECFDF5;
  color: #047857;
  font-weight: 600;
}

/* 日付クイック空欄トグル */
.日付クイック空欄 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 8px;
  padding: 6px 8px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FAFAFA;
  font-size: 12px;
  cursor: pointer;
  color: #6B7280;
  font-style: italic;
}
.日付クイック空欄:hover {
  background: #F3F4F6;
}
.日付クイック空欄.選択中 {
  background: #ECFDF5;
  border-color: #10B981;
  color: #047857;
  font-weight: 600;
  font-style: normal;
}
.日付クイック空欄 input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #10B981;
  cursor: pointer;
}

.フィルターポップリスト {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.フィルターポップ項目 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
  color: #374151;
}

.フィルターポップ項目:hover {
  background: #F9FAFB;
}

.フィルターポップ項目.選択中 {
  font-weight: 600;
}

.フィルターポップ項目 input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #4F46E5;
  cursor: pointer;
  flex-shrink: 0;
}

/* 日付範囲入力（カレンダーボタン付きテキスト入力） */
.日付フィルター入力欄 {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.日付範囲入力 {
  border: none;
  outline: none;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  color: #374151;
  width: 82px;
  letter-spacing: 0.3px;
}

.日付範囲入力::placeholder {
  color: #C0C0C0;
  font-size: 11px;
}

.日付カレンダー隠し {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.日付カレンダーボタン {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 11px;
  padding: 0 1px;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.日付カレンダーボタン:hover {
  opacity: 1;
}

.日付範囲区切り {
  color: #9CA3AF;
}

/* 日付クイック選択（月・年・カレンダー / 直接入力） */
.日付範囲ラッパー {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.日付クイックボタン {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #E5E7EB;
  background: white;
  cursor: pointer;
  font-size: 12px;
  color: #374151;
  padding: 5px 12px;
  border-radius: 8px;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.日付クイックボタン:hover {
  border-color: #6366F1;
  color: #4F46E5;
}

.日付クイックボタン.適用中 {
  border-color: #4F46E5;
  background: #EEF2FF;
  color: #4F46E5;
  font-weight: 600;
}

.日付クイックボタン.開 {
  border-color: #4F46E5;
}

.日付クイックラベル {
  color: #6B7280;
  font-weight: 600;
}

.日付クイックボタン.適用中 .日付クイックラベル {
  color: #4F46E5;
}

.日付クイック範囲 {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.日付クイック矢印 {
  font-size: 9px;
  color: #9CA3AF;
}

.日付クイックポップ {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 10px;
  min-width: 280px;
  font-size: 12px;
  font-weight: 400;
}

/* 画面右寄り配置時はポップを右寄せ（左に広げる）に反転 */
.日付クイックポップ.右寄せ {
  left: auto;
  right: 0;
}

.日付クイックセクション {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #F3F4F6;
}

.日付クイック即時,
.日付クイッククリア {
  border: 1.5px solid #E5E7EB;
  background: white;
  color: #374151;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.日付クイック即時:hover {
  border-color: #6366F1;
  color: #4F46E5;
}

.日付クイッククリア {
  margin-left: auto;
  color: #9CA3AF;
}

.日付クイッククリア:hover {
  border-color: #DC2626;
  color: #DC2626;
}

.日付クイック見出し {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 4px 0 4px 0;
}

.日付クイックグリッド {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.日付クイック年ボタン {
  border: 1.5px solid #E5E7EB;
  background: white;
  color: #374151;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.日付クイック年ボタン:hover {
  border-color: #6366F1;
  color: #4F46E5;
}

.日付クイック年ボタン.選択中 {
  background: #4F46E5;
  border-color: #4F46E5;
  color: white;
}

.日付クイック月グリッド {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.日付クイック月ボタン {
  border: 1.5px solid #E5E7EB;
  background: white;
  color: #374151;
  padding: 5px 4px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.日付クイック月ボタン:hover {
  border-color: #6366F1;
  color: #4F46E5;
  background: #EEF2FF;
}

.日付クイック範囲指定 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.日付クイック範囲指定 .日付フィルター入力欄 {
  flex: 1;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  padding: 4px 8px;
  background: white;
  transition: border-color 0.15s;
}

.日付クイック範囲指定 .日付フィルター入力欄:focus-within {
  border-color: #6366F1;
}

.日付クイック範囲指定 .日付範囲入力 {
  width: 100%;
}

.チェック済みフィルター {
  padding: 5px 12px;
  border: 1.5px solid #E8E0F0;
  border-radius: 8px;
  font-size: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.チェック済みフィルター:hover {
  border-color: #FFD93D;
}

.チェック済みフィルター.適用中 {
  border-color: #FFD93D;
  background: #FFFBEB;
  font-weight: 600;
}

/* ===== テーブルコンテナ ===== */
.テーブルコンテナ {
  flex: 1;
  overflow: auto;
  min-height: 0;
  margin: 0 16px 4px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(108, 92, 231, 0.08);
}

.テーブルコンテナ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.テーブルコンテナ::-webkit-scrollbar-thumb {
  background: #D4C8E8;
  border-radius: 4px;
}

.テーブルコンテナ::-webkit-scrollbar-corner {
  background: transparent;
}

/* ===== スプレッドシート テーブル ===== */
.スプレッドシート {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

/* ===== ヘッダー ===== */
.スプレッドシート thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #374151;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 8px;
  padding-right: 12px;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 2px solid #1F2937;
  user-select: none;
  letter-spacing: 0.3px;
}

.スプレッドシート thead th.ソート可能 {
  cursor: pointer;
}

.スプレッドシート thead th.ソート可能:hover {
  background: #1F2937;
}

.ソートマーク {
  font-size: 11px;
  opacity: 0.9;
}

/* リサイズハンドル */
.リサイズハンドル {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 1;
}

.リサイズハンドル:hover,
.リサイズハンドル:active {
  background: rgba(255, 255, 255, 0.3);
}

/* ===== 仮想スクロール余白 ===== */
.仮想余白 {
  padding: 0 !important;
  border: none !important;
}

/* ===== セル ===== */
.スプレッドシート tbody td {
  padding: 0;
  border-bottom: 1px solid #F0EDF5;
  border-right: 1px solid #F0EDF5;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 36px;
  vertical-align: middle;
  background: white;
}

/* 行背景は状態色（tr の inline style）を継承 */
.スプレッドシート tbody td {
  background: inherit;
}

/* ホバー行 — 少しだけ暗くする */
.スプレッドシート tbody tr:hover td {
  filter: brightness(0.96);
}

/* 固定列の背景 — 行色を引き継ぎつつ不透明に */
.スプレッドシート tbody td.固定セル {
  background: inherit;
  border-right: 2px solid #EDE8F5;
}

.スプレッドシート tbody tr:hover td.固定セル {
  filter: brightness(0.96);
}

/* 計算列 — 行色の上にうっすら紫を乗せる */
.スプレッドシート tbody td.計算列 {
  background: rgba(139, 92, 246, 0.04);
}

.スプレッドシート tbody tr:hover td.計算列 {
  background: #FFF0F5;
}

/* 編集可能セルのホバー */
.スプレッドシート tbody td.編集可能 {
  cursor: cell;
}

.スプレッドシート tbody td.編集可能:hover {
  outline: 2px solid #4ECDC4;
  outline-offset: -2px;
  border-radius: 2px;
}

/* 選択中セル — 青ティントはインラインstyleで重ね、枠線用box-shadowと共存する */
.スプレッドシート tbody td.選択中 {
  outline: 2px solid #3B82F6;
  outline-offset: -2px;
}

/* 編集中セル */
.スプレッドシート tbody td.編集中 {
  padding: 0;
  outline: 2px solid #4ECDC4;
  outline-offset: -2px;
  background: #EFFFFD !important;
}

/* ===== セル内コンテンツ ===== */
.表示セル {
  display: block;
  padding: 0 8px;
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.表示セル.金額セル {
  text-align: right;
}

/* 出品状況セル */
.出品状況セル {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 4px;
  align-items: center;
  cursor: pointer;
  position: relative;
  min-height: 28px;
}

.出品状況プレース {
  color: #D1D5DB;
}

.出品タグ {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  line-height: 1.5;
  white-space: nowrap;
}

/* 出品状況ポップオーバー */
.出品状況ポップ {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 6px 0;
  width: fit-content;
  min-width: 140px;
  max-height: 340px;
  overflow-y: auto;
}

.出品状況オプション {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  color: #6B7280;
  cursor: pointer;
  transition: background 0.1s;
}

.出品状況オプション:hover {
  background: #F9FAFB;
}

.出品状況オプション.有効 {
  color: #111827;
  font-weight: 600;
}

.出品状況オプション input {
  width: 14px;
  height: 14px;
  accent-color: #4F46E5;
  cursor: pointer;
  flex-shrink: 0;
}

.出品状況ドット {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.出品タグ小 {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  color: white;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.出品状況名 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.出品状況全解除ボタン {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px 4px;
  padding: 5px 10px;
  background: white;
  border: 1.5px solid #FCA5A5;
  border-radius: 6px;
  color: #DC2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.出品状況全解除ボタン:hover {
  background: #FEF2F2;
  border-color: #DC2626;
}

/* 連携公開先（他社のストアフロントに公開する印）。出品状況の札と見分けられるよう、枠付きの落ち着いた色にする */
.連携公開先タグ {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  color: #1E40AF;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
}

/* 無効・自動のショップや、もう無いショップの印（公開には使われていない） */
.連携公開先タグ.使われていない {
  color: #9CA3AF;
  background: #F9FAFB;
  border-color: #E5E7EB;
  text-decoration: line-through;
}

.連携公開先ポップ { min-width: 220px; max-width: 260px; }

.連携公開先ポップ案内 {
  font-size: 11px;
  color: #6B7280;
  padding: 6px 12px;
  line-height: 1.5;
}

.出品状況オプション.連携公開先_使われていない { color: #9CA3AF; }

/* 売値セル */
.売値セル {
  display: flex;
  align-items: center;
  height: 36px;
}

.売値テキスト {
  flex: 1;
  min-width: 0;
}

.売値計算ボタン {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 24px;
  border-radius: 4px;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.売値計算ボタン:hover {
  opacity: 1;
  background: rgba(0,0,0,0.06);
}

/* 売値計算ポップオーバー */
.売値計算ポップ {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 14px 16px;
  /* 推奨売値の根拠の文が入るので 230px → 270px に広げた */
  width: 270px;
  /* 画面の高さに入りきらないときは、パネルの中でスクロールする（確定ボタンが画面の外に出ないように） */
  /* 上下の余白 8px ずつ＋パネルの padding・枠 */
  max-height: calc(100vh - 16px - 30px);
  overflow-y: auto;
}

/* 推奨売値（推奨売値.ts）の欄 */
.売値計算推奨 {
  margin: 6px 0 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid #EEF2F7;
}
.売値計算推奨値 { font-size: 13.5px; }
.売値計算推奨値.速い { color: #047857; }
.売値計算推奨値.遅い { color: #B45309; }
.売値計算推奨文 {
  font-size: 11.5px;
  line-height: 1.5;
  color: #4B5563;
  margin-bottom: 6px;
}
.売値計算手で決めた {
  color: #92400E;
  background: #FFFBEB;
  border-radius: 6px;
  padding: 4px 6px;
}
.売値計算推奨ボタン {
  width: 100%;
  height: 28px;
  background: white;
  color: #4F46E5;
  border: 1px solid #C7D2FE;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.売値計算推奨ボタン:hover { background: #EEF2FF; }
.売値計算推奨設定 {
  display: block;
  margin: 6px 0 0 auto;
  padding: 0;
  background: none;
  border: none;
  font-size: 11px;
  color: #6B7280;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.売値計算推奨設定:hover { color: #4F46E5; }

.売値計算タイトル {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 10px;
}

.売値計算行 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 12px;
  color: #6B7280;
}

.売値計算行 label {
  font-weight: 600;
  white-space: nowrap;
}

.売値計算値 {
  font-weight: 600;
  color: #111827;
  font-size: 13px;
}

.売値計算デフォルト {
  color: #6366F1;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.売値計算デフォルト:hover {
  color: #4F46E5;
}

.売値計算プラス { color: #059669; }
.売値計算マイナス { color: #DC2626; }

.売値計算入力欄 {
  display: flex;
  align-items: center;
  gap: 2px;
}

.売値計算input {
  width: 90px;
  height: 28px;
  border: 1px solid #D1D5DB;
  border-radius: 5px;
  padding: 0 6px;
  font-size: 13px;
  text-align: right;
  outline: none;
  font-family: inherit;
}

.売値計算input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.売値計算input金額 {
  width: 100px;
}

.売値計算単位 {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 600;
}

.売値計算円 {
  margin-right: 2px;
}

.売値計算区切り {
  border-top: 1px solid #F3F4F6;
  margin: 8px 0;
}

.売値計算確定 {
  width: 100%;
  height: 32px;
  margin-top: 4px;
  background: #6366F1;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.売値計算確定:hover {
  background: #4F46E5;
}

/* 数値入力のスピナー非表示 */
.売値計算input::-webkit-inner-spin-button,
.売値計算input::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.売値計算input {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* 星セル */
.星セル {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
}

.星セル:hover {
  transform: scale(1.3);
}

.星セル.済 {
  color: inherit;
  opacity: 1;
}

.星セル.未 {
  color: inherit;
  opacity: 0.3;
}

/* 状態バッジ（色変更モーダル用） */

/* 画像セル */
.画像セル {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.15s;
  user-select: none;
}

.画像セル:hover {
  transform: scale(1.3);
}

.画像セル.あり {
  opacity: 1;
}

.画像セル.なし {
  opacity: 0.25;
  filter: grayscale(1);
}

/* 画像モーダル */
.画像パネル {
  position: relative;
  background: white;
  border-radius: 12px;
  width: 960px;
  max-width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.画像ドロップオーバーレイ {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(79, 70, 229, 0.12);
  border: 3px dashed #4F46E5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.画像ドロップテキスト {
  font-size: 18px;
  font-weight: 600;
  color: #4F46E5;
  background: white;
  padding: 12px 28px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.画像パネルヘッダー {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
}

.画像パネルタイトル {
  font-size: 15px;
  font-weight: 600;
  color: #1F2937;
  flex: 1;
}

.画像一括ダウンロードボタン {
  padding: 6px 16px;
  background: #059669;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.画像一括ダウンロードボタン:hover {
  background: #047857;
}

.画像一括ダウンロードボタン:disabled {
  background: #9CA3AF;
  cursor: not-allowed;
}

.画像追加ボタン {
  padding: 6px 16px;
  background: #4F46E5;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.画像追加ボタン:hover {
  background: #4338CA;
}

.画像リセットボタン {
  padding: 6px 14px;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.画像リセットボタン:hover {
  background: #e5e7eb;
}

.Shopify画像再同期ボタン {
  padding: 6px 14px;
  background: #95BF47;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.Shopify画像再同期ボタン:hover {
  background: #7AA138;
}
.Shopify画像再同期ボタン:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}

/* Shopify同期の状況（画像画面の見出しの下の1行） */
.画像パネル同期状況 {
  padding: 10px 20px 0;
}

.画像グリッド {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  min-height: 240px;
}

.画像空 {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 14px;
  text-align: center;
  padding: 40px 0;
  line-height: 1.8;
}

.画像カード {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E5E7EB;
  cursor: grab;
  transition: box-shadow 0.15s, opacity 0.15s, border-color 0.15s;
}
.画像カード:active { cursor: grabbing; }

.画像カード:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.画像カード.ドラッグ中 {
  opacity: 0.3;
  border-color: #4F46E5;
}
.画像カード.ドロップ左 { box-shadow: -4px 0 0 0 #4F46E5; }
.画像カード.ドロップ右 { box-shadow: 4px 0 0 0 #4F46E5; }
.画像1枚目バッジ {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  background: #065F46;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

/* 左下の縦積み群（撮影者バッジ＋URLをコピー）。右下のモール群と同じく普段は非表示・ホバー時だけ表示 */
.画像カードボタン群 {
  position: absolute;
  bottom: 4px;
  left: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.画像カード:hover .画像カードボタン群 {
  opacity: 1;
}
/* 表示はコンテナ側で制御。中のボタンは常時表示・通常フロー配置にして縦に積む */
.画像カードボタン群 .画像URLコピーボタン {
  position: static;
  opacity: 1;
}
/* この画像を撮影した担当名（URLをコピーの上に隙間なく積む） */
.画像撮影者バッジ {
  max-width: 110px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.画像サムネイル {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.画像削除ボタン {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.画像カード:hover .画像削除ボタン {
  opacity: 1;
}

.画像削除ボタン:hover {
  background: #EF4444;
}

.画像URLコピーボタン {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.画像カード:hover .画像URLコピーボタン {
  opacity: 1;
}

.画像URLコピーボタン:hover {
  background: rgba(37,99,235,0.85);
}

.Shopify画像チェック {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  color: #ccc;
  font-size: 10px;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.画像カード:hover .Shopify画像チェック {
  opacity: 1;
}
.Shopify画像チェック.選択中 {
  color: #86efac;
}
.Shopify画像チェック input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #65A30D;
  cursor: pointer;
}

/* モール別画像チェック群（Eコンビニ・ワサビ・Shopifyを縦に並べる） */
.モール別画像チェック群 {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.画像カード:hover .モール別画像チェック群 {
  opacity: 1;
}

/* グループ内のラベルは static にして、重ね合わせを解除 */
.モール別画像チェック群 .Shopify画像チェック {
  position: static;
  opacity: 1;
  width: max-content;
  margin-left: auto;
}

.モール別画像チェック群 .Shopify画像チェック:nth-child(1) input[type="checkbox"] {
  accent-color: #B45309;
}
.モール別画像チェック群 .Shopify画像チェック:nth-child(2) input[type="checkbox"] {
  accent-color: #B45309;
}


/* 画像プレビュー */
.画像プレビュー背景 {
  z-index: 10001;
}

/* 背景クリックでは閉じないので、閉じるボタンを右上に出す */
.画像プレビュー閉じる {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  cursor: pointer;
}
.画像プレビュー閉じる:hover { background: rgba(0, 0, 0, 0.8); }

.画像プレビュー大 {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: default;
}

/* 計算セル */
.計算セル {
  display: block;
  padding: 0 8px;
  line-height: 36px;
  font-weight: 600;
  font-size: 12px;
  text-align: right;
}

/* ===== セル入力コントロール ===== */
.セル入力 {
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: none;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  text-align: center;
}

.セル入力[type="number"] {
  text-align: right;
}

/* 数値入力のスピナー（上下矢印）を非表示 */
.セル入力[type="number"]::-webkit-inner-spin-button,
.セル入力[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.セル入力[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.セル選択 {
  cursor: pointer;
}

/* 選択検索: セルには値だけ表示、ポップ内に検索＋候補リスト（既存値のみ選択可） */
.セル選択検索ラッパー {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
}
.セル選択検索表示 {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
}

/* ポップ（body 直下にポータルレンダリング） */
.セル選択検索ポップ {
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  max-width: 280px;
}
.セル選択検索ポップ検索 {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 5px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.セル選択検索ポップ検索:focus {
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.セル選択検索ポップリスト {
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid #F3F4F6;
}
.セル選択検索項目 {
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.セル選択検索項目:hover {
  background: #EEF2FF;
}
/* 打った言葉と項目名が違うときに、何に当たったのかを出す
   （会社にまとめている一覧で担当者の名前を打ったとき等） */
.セル選択検索当たり {
  margin-left: 6px;
  font-size: 11px;
  color: #4F46E5;
}
.セル選択検索項目.選択中 {
  background: #E0E7FF;
  font-weight: 600;
}
.セル選択検索クリア {
  padding: 6px 10px;
  font-size: 11px;
  color: #6366F1;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
  font-style: italic;
}
.セル選択検索クリア:hover {
  background: #F9FAFB;
}
.セル選択検索なし {
  padding: 8px 10px;
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
  text-align: center;
}
.セル選択検索ヒント {
  padding: 4px 12px 7px;
  font-size: 11px;
  color: #6B7280;
}
.セル選択検索新規ボタン {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  background: #4338CA;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.セル選択検索新規ボタン:hover {
  background: #3730A3;
}

/* 日付入力 */
.日付入力コンテナ {
  display: flex;
  align-items: center;
  width: 100%;
  height: 36px;
}

.日付テキスト {
  flex: 1;
  min-width: 0;
}

.日付ピッカー非表示 {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.カレンダーボタン {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 36px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.カレンダーボタン:hover {
  opacity: 1;
}

/* ===== 読み込み中・データなし ===== */
.読込中 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #B8C4D4;
  font-size: 14px;
  gap: 8px;
}

.読込スピナー {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #EDE8F5;
  border-top-color: #6366F1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.データなし {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #94A3B8;
  font-size: 14px;
}

/* ===== ページネーション ===== */
.ページネーション {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  background: white;
  margin: 0 16px 12px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 24px rgba(108, 92, 231, 0.08);
  flex-shrink: 0;
}

.ページボタン {
  min-width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  transition: all 0.2s;
}

.ページボタン:hover:not(:disabled) {
  background: #374151;
  color: white;
}

.ページボタン.現在 {
  background: #374151;
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(55, 65, 81, 0.3);
}

.ページボタン:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ページ情報 {
  font-size: 12px;
  color: #94A3B8;
  margin: 0 8px;
}

/* ===== 色変更モーダル ===== */
.モーダル背景 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* === 担当（ユーザー名）選択モーダル === */
.担当選択モーダル {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 420px;
  max-width: 92vw;
  padding: 22px;
}
.担当選択見出し {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 6px;
}
.担当選択説明 {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 16px;
  line-height: 1.5;
}
.担当選択再確認 {
  font-size: 12px;
  color: #9A3412;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.担当選択グリッド {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.担当選択ボタン {
  padding: 10px 4px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}
.担当選択ボタン:hover {
  border-color: #2563EB;
  background: #EFF6FF;
}
.担当選択ボタン.選択中 {
  border-color: #2563EB;
  background: #2563EB;
  color: #fff;
}
.担当選択その他 {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #F3F4F6;
}
.担当選択その他ラベル {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 8px;
}
.担当選択その他行 {
  display: flex;
  gap: 8px;
}
.担当選択その他入力 {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  font-size: 13px;
}
.担当選択その他入力:focus {
  outline: none;
  border-color: #2563EB;
}
.担当選択その他ボタン {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: #2563EB;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.担当選択その他ボタン:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
}
.担当選択フッター {
  margin-top: 16px;
  text-align: right;
}
.担当選択キャンセル {
  padding: 7px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* === 右上の通知カード群（発送リマインダー＋記入漏れチェックを縦積み） === */
.右上通知 {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;  /* ラッパ自体（空き領域・カード間の余白）はクリックを拾わない。カードだけ auto で受ける */
}

/* === 発送リマインダー（右上の通知カード） === */
.発送リマインダー {
  width: 380px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  pointer-events: auto;  /* ラッパが pointer-events:none のため、カードは明示的に有効化 */
}
/* 記入漏れチェックカード（発送リマインダーの見た目を流用しamber系アクセント） */
.記入漏れカード .発送リマインダーヘッダー { background: #FFFBEB; color: #92400E; }
.発送リマインダー行.記入漏れ行 { background: #FFFBEB; color: #92400E; font-weight: 600; }
.発送リマインダーヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}
.発送リマインダー閉じる {
  border: none;
  background: none;
  color: #9CA3AF;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.発送リマインダー閉じる:hover { color: #4B5563; }
.発送リマインダー行 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 12.5px;
  line-height: 1.5;
}
.発送リマインダー行:last-child { border-bottom: none; }
.発送リマインダー行.入金待ち { background: #EFF6FF; color: #1E40AF; }
.発送リマインダー行.発送待ち { background: #FFF7ED; color: #9A3412; }
.発送リマインダー行.遅延 { background: #FEF2F2; color: #B91C1C; font-weight: 700; }
.発送リマインダー文 { flex: 1; }
.発送リマインダー詳細 {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.発送リマインダー詳細:hover { opacity: 0.8; }
.発送リマインダーヘッダー右 { display: flex; align-items: center; gap: 2px; }
.発送リマインダー設定ボタン {
  border: none;
  background: none;
  color: #6B7280;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.発送リマインダー設定ボタン:hover { color: #2563EB; }

/* 発送リマインダー絞り込み中チップ（ツールバー） */
.発送絞り込み中チップ {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 4px 10px;
  background: #EFF6FF;
  border: 1.5px solid #BFDBFE;
  border-radius: 8px;
  color: #1E40AF;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* === 発送リマインダー設定モーダル === */
.発送設定モーダル {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 540px;
  max-width: 94vw;
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px;
}
.発送設定見出し { font-size: 16px; font-weight: 700; color: #1F2937; margin-bottom: 4px; }
.発送設定説明 { font-size: 12px; color: #6B7280; margin-bottom: 16px; line-height: 1.5; }
.発送設定項目 { margin-bottom: 16px; }
.発送設定ラベル { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.発送設定共通注 { font-size: 11px; font-weight: 500; color: #9CA3AF; margin-left: 6px; }
.発送設定期限行 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
.発送設定期限入力 { width: 70px; padding: 6px 8px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 13px; }
.発送設定グループ {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #FAFAFA;
}
.発送設定グループ名 { font-size: 14px; font-weight: 700; color: #1F2937; margin-bottom: 8px; }
.発送設定小ラベル { font-size: 11.5px; color: #6B7280; margin: 10px 0 6px; font-weight: 600; }
.発送設定担当者, .発送設定カテゴリ { display: flex; flex-wrap: wrap; gap: 6px; }
.発送設定チップ {
  padding: 5px 12px;
  border: 1.5px solid #D1D5DB;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.12s;
}
.発送設定チップ:hover { border-color: #2563EB; }
.発送設定チップ.選択中 { border-color: #2563EB; background: #2563EB; color: #fff; }
.発送設定追加行 { display: flex; gap: 6px; margin-top: 8px; }
.発送設定追加入力 { flex: 1; padding: 6px 10px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 12.5px; }
.発送設定追加ボタン {
  padding: 6px 12px; border: 1.5px solid #D1D5DB; border-radius: 8px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: #374151; cursor: pointer; white-space: nowrap;
}
.発送設定追加ボタン:hover { border-color: #2563EB; color: #2563EB; }
.発送設定カテゴリ項目 {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1.5px solid #E5E7EB; border-radius: 8px;
  font-size: 12.5px; color: #374151; cursor: pointer; background: #fff;
}
.発送設定カテゴリ項目.選択中 { border-color: #2563EB; background: #EFF6FF; color: #1E40AF; }

.発送設定タグ入力 { width: 100%; padding: 6px 10px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 12.5px; box-sizing: border-box; }
.発送設定注記 { font-size: 12px; color: #9CA3AF; }
.発送設定フッター { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.発送設定キャンセル {
  padding: 8px 18px; border: 1.5px solid #D1D5DB; border-radius: 8px; background: #fff;
  color: #6B7280; font-size: 13px; font-weight: 600; cursor: pointer;
}
.発送設定保存 {
  padding: 8px 20px; border: none; border-radius: 8px; background: #2563EB;
  color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}

/* === 記入漏れチェック設定モーダル（発送設定の部品を流用＋ルール編集用） === */
.記入漏れ設定モーダル { width: 860px; }
.記入漏れルール {
  border: 1px solid #E5E7EB; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #FAFAFA;
}
.記入漏れルール.無効 { opacity: 0.55; }
.記入漏れルール上 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.記入漏れ開閉 {
  flex: 0 0 auto; width: 22px; height: 22px; border: none; background: none;
  color: #6B7280; font-size: 12px; cursor: pointer; padding: 0; line-height: 1;
}
.記入漏れ開閉:hover { color: #2563EB; }
.記入漏れ要約 {
  font-size: 12px; color: #6B7280; padding: 4px 2px 0 30px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.記入漏れ要約:hover { color: #374151; }
.記入漏れ基準日選択 {
  padding: 4px 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  background: #fff;
  cursor: pointer;
}
.記入漏れ基準日選択:focus { outline: none; border-color: #A78BFA; }
.記入漏れルール名 {
  flex: 1; padding: 6px 10px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.記入漏れ有効 {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #374151;
  font-weight: 600; white-space: nowrap; cursor: pointer;
}
.記入漏れ削除 {
  padding: 5px 10px; border: 1.5px solid #FCA5A5; border-radius: 8px; background: #fff;
  color: #DC2626; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.記入漏れ削除:hover { background: #FEF2F2; }
.記入漏れルール小ラベル { font-size: 11.5px; color: #6B7280; margin: 10px 0 6px; font-weight: 600; }
.記入漏れルール下 { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #374151; }
.記入漏れ追加ボタン {
  width: 100%; padding: 9px; border: 1.5px dashed #93C5FD; border-radius: 8px; background: #EFF6FF;
  color: #1E40AF; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: 4px;
}
.記入漏れ追加ボタン:hover { background: #DBEAFE; }
.発送設定保存:hover { background: #1D4ED8; }

.色変更パネル {
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 620px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.色変更ヘッダー {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #E5E7EB;
}

.色変更タイトル {
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
  flex: 1;
}

.色リセットボタン {
  padding: 4px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
}

.色リセットボタン:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.色変更閉じる {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 16px;
  color: #9CA3AF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.色変更閉じる:hover {
  background: #F3F4F6;
  color: #374151;
}

.状態のみ色オプション {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  border-bottom: 1px solid #F3F4F6;
}

.状態のみ色オプション input {
  width: 16px;
  height: 16px;
  accent-color: #4F46E5;
  cursor: pointer;
}

.色変更リスト {
  overflow-y: auto;
  padding: 10px 18px 18px;
}

.色変更セクション区切り {
  padding: 10px 18px 6px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.色変更セクション区切り + .色変更セクション区切り,
.色変更リスト + .色変更セクション区切り {
  border-top: 1px solid #E5E7EB;
  margin-top: 4px;
  padding-top: 12px;
}

.色リセットボタン小 {
  font-size: 11px;
  padding: 2px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #6B7280;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.色リセットボタン小:hover {
  background: #F3F4F6;
  color: #374151;
}

.出品色グリッド {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  padding: 8px 18px 18px;
}

.出品色行 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.色変更行 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #F3F4F6;
}

.色変更行:last-child {
  border-bottom: none;
}

.色変更状態名 {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  min-width: 130px;
  text-align: center;
  white-space: nowrap;
}

.色ラベル {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6B7280;
  cursor: pointer;
}

.色ラベル input[type="color"] {
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1.5px solid #D1D5DB;
  border-radius: 4px;
  cursor: pointer;
  background: none;
}

/* 文字色切り替えボタン */
.文字色ボタン {
  padding: 3px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.文字色ボタン.白 {
  background: #1F2937;
  color: #FFFFFF;
}

.文字色ボタン.黒 {
  background: #FFFFFF;
  color: #1F2937;
}

/* 色変更セクション見出し */
.色変更セクション {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  padding: 12px 0 4px;
  border-top: 1px solid #E5E7EB;
  margin-top: 6px;
}

/* 計算値サンプル */
.色変更計算サンプル {
  font-size: 13px;
  font-weight: 700;
  min-width: 80px;
}

.色変更計算ラベル {
  font-size: 11px;
  color: #9CA3AF;
  flex: 1;
}

/* ===== 商品登録モーダル ===== */
.商品登録パネル {
  background: white;
  border-radius: 14px;
  width: 680px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 24px;
}

.商品登録ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.商品登録タイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.登録接頭辞選択 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #374151;
}

.登録接頭辞選択 .登録接頭辞ラベル {
  font-weight: 600;
}

.登録接頭辞選択 label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.登録接頭辞選択 input[type="radio"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.登録接頭辞入力 {
  padding: 4px 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 12px;
  width: 200px;
  font-family: inherit;
}

.登録接頭辞入力:focus {
  outline: none;
  border-color: #6366F1;
}

.ドロップエリア {
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.2s;
  cursor: default;
}

.ドロップエリア.ドラッグ中 {
  border-color: #4F46E5;
  background: #EEF2FF;
}

.ドロップアイコン {
  font-size: 40px;
  margin-bottom: 12px;
}

.ドロップテキスト {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.ドロップサブテキスト {
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 16px;
}

.ファイル選択ラベル {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  font-size: 13px;
  color: #4F46E5;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.ファイル選択ラベル:hover {
  background: #EEF2FF;
  border-color: #4F46E5;
}

.ファイル入力非表示 {
  display: none;
}

.登録ファイル一覧 {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.登録ファイル項目 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F9FAFB;
  border-radius: 8px;
  border: 1px solid #E5E7EB;
}

.登録ファイル名 {
  flex: 1;
  font-size: 13px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.登録ファイルサイズ {
  font-size: 11px;
  color: #9CA3AF;
  white-space: nowrap;
}

.登録ファイル削除 {
  border: none;
  background: none;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

.登録ファイル削除:hover {
  color: #EF4444;
}

.AI読取操作行 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.AIモデル選択 {
  padding: 8px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  background: white;
  cursor: pointer;
  outline: none;
}

.AIモデル選択:focus {
  border-color: #6366F1;
}

.AI読取ボタン {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #4F46E5;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.AI読取ボタン:hover:not(:disabled) {
  background: #4338CA;
}

.AI読取ボタン:disabled {
  background: #9CA3AF;
  cursor: not-allowed;
}

.AI読取エラー {
  margin-top: 8px;
  padding: 10px 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 6px;
  color: #DC2626;
  font-size: 12px;
  word-break: break-all;
}

.AI読取結果エリア {
  margin-top: 12px;
  border: 1px solid #C7D2FE;
  border-radius: 8px;
  background: #EEF2FF;
  overflow: hidden;
}

.AI読取結果ヘッダー {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #4338CA;
  border-bottom: 1px solid #C7D2FE;
}

.AI処理メモ {
  padding: 8px 14px;
  font-size: 12px;
  color: #6B7280;
  border-bottom: 1px solid #C7D2FE;
  white-space: pre-wrap;
  line-height: 1.6;
}

.AI読取結果項目 {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid #E0E7FF;
}

.AI読取結果項目:last-child {
  border-bottom: none;
}

.AI読取結果番号 {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4F46E5;
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.AI読取結果詳細 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: #374151;
}

.AI読取結果詳細 b {
  color: #6B7280;
  font-weight: 500;
}

.AI登録実行ボタン {
  width: 100%;
  padding: 12px;
  border: none;
  background: #059669;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.AI登録実行ボタン:hover {
  background: #047857;
}

.商品登録区切り {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 12px;
}

.商品登録区切り::before,
.商品登録区切り::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5E7EB;
}

.商品登録区切り span {
  font-size: 12px;
  color: #9CA3AF;
}

.空行追加エリア {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.空行追加ラベル {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}

.空行追加数入力 {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

.空行追加数入力:focus {
  outline: none;
  border-color: #4F46E5;
}

.空行追加ボタン {
  flex: 1;
  padding: 12px;
  border: 2px dashed #CBD5E1;
  border-radius: 8px;
  background: white;
  color: #6B7280;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.空行追加ボタン:hover {
  border-color: #4F46E5;
  color: #4F46E5;
  background: #EEF2FF;
}

/* ===== プルダウン設定モーダル ===== */
.プルダウン設定パネル {
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 700px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.プルダウン設定ヘッダー {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid #E5E7EB;
}

.プルダウン設定タイトル {
  font-size: 15px;
  font-weight: 700;
  color: #1F2937;
  flex: 1;
}

.プルダウンリセットボタン {
  padding: 4px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
}

.プルダウンリセットボタン:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.プルダウン設定リスト {
  overflow-y: auto;
  padding: 10px 18px 18px;
}

.プルダウンセクション {
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.プルダウンセクション:last-child {
  border-bottom: none;
}

.プルダウンセクションタイトル {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.未使用一括削除 {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.未使用一括削除:hover {
  background: #FCA5A5;
  color: white;
}

.ソート切替 {
  display: flex;
  background: #F3F4F6;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  margin-left: auto;
}

.ソート切替ボタン {
  padding: 3px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.ソート切替ボタン.選択中 {
  background: white;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.ソート切替ボタン:hover:not(.選択中) {
  color: #6B7280;
}

.プルダウン項目一覧 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.プルダウン項目タグ {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #F3F4F6;
  border-radius: 20px;
  font-size: 12px;
  color: #374151;
}

.プルダウン項目タグ[draggable="true"] {
  cursor: grab;
}

.プルダウン項目タグ[draggable="true"]:active {
  cursor: grabbing;
}

.プルダウン項目タグ.ドラッグ中 {
  opacity: 0.4;
}

.プルダウン項目タグ.ドロップ先 {
  box-shadow: -2px 0 0 0 #2563EB;
}

.プルダウン項目削除 {
  border: none;
  background: none;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}

.プルダウン項目削除:hover {
  color: #EF4444;
}

.プルダウン追加行 {
  display: flex;
  gap: 6px;
  align-items: center;
}

.プルダウン追加入力 {
  flex: 1;
  padding: 5px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.プルダウン追加入力:focus {
  border-color: #6366F1;
}

.プルダウン追加ボタン {
  padding: 5px 12px;
  border: 1.5px solid #6366F1;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.プルダウン追加ボタン:hover {
  background: #4F46E5;
}

/* ===== 選択合計バー ===== */
.選択合計バー {
  position: fixed;
  bottom: 16px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  background: #1F2937;
  color: #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  font-size: 13px;
  z-index: 100;
  animation: 選択合計フェードイン 0.15s ease-out;
}

@keyframes 選択合計フェードイン {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.選択合計項目 {
  white-space: nowrap;
}

.選択合計項目 b {
  color: white;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===== 列設定モーダル ===== */
.列設定パネル {
  background: white;
  border-radius: 14px;
  width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.列設定ヘッダー {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px 8px;
}

.列設定タイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  flex: 1;
}

.列設定リセット {
  padding: 4px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  background: white;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  color: #6B7280;
}

.列設定リセット:hover { background: #F9FAFB; }

.列設定説明 {
  padding: 4px 24px 10px;
  font-size: 11px;
  color: #9CA3AF;
}

.列設定リスト {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 18px;
  position: relative;
}

.列設定行 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #F3F4F6;
}

.列設定行.非表示中 {
  opacity: 0.4;
}

.列設定行 {
  cursor: grab;
  border-radius: 6px;
  padding-left: 4px;
  padding-right: 4px;
  user-select: none;
}

.列設定行.ドラッグ元 {
  opacity: 0.15;
}

.列設定行.ドラッグ先上 {
  box-shadow: 0 -2px 0 0 #4F46E5 inset;
}

.列設定行.ドラッグ先下 {
  box-shadow: 0 2px 0 0 #4F46E5 inset;
}

.列ドラッグゴースト {
  display: none;
  position: absolute;
  left: 16px;
  right: 16px;
  pointer-events: none;
  z-index: 10;
  transform: translateY(-50%);
  background: white;
  border: 2px solid #4F46E5;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #4F46E5;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.2);
}

.列設定チェック input {
  width: 15px;
  height: 15px;
  accent-color: #4F46E5;
  cursor: pointer;
}

.列設定ラベル {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #1F2937;
}

.列設定種類 {
  font-size: 10px;
  color: #9CA3AF;
  background: #F3F4F6;
  padding: 1px 6px;
  border-radius: 4px;
}

.列設定操作 {
  display: flex;
  gap: 2px;
}

.列設定矢印 {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: #6B7280;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.列設定矢印:hover:not(:disabled) { background: #F3F4F6; }
.列設定矢印:disabled { opacity: 0.2; cursor: default; }

.列設定固定 {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.3;
  transition: opacity 0.15s;
}

.列設定固定:hover { opacity: 0.7; }
.列設定固定.固定中 { opacity: 1; }

/* ===== 更新履歴モーダル ===== */
/* 帳票履歴は発送管理（全画面オーバーレイ z-index:1000）の上からも開くので、それより前に出す */
.モーダル背景.履歴背景 { z-index: 1100; }

/* 発送管理から「請求書を作成」で開く請求書モーダルも、発送管理より前に出す。
   その中の「プレビュー」（帳票ビューア z-index:1200）は、さらにこの上に出る */
.モーダル背景.請求書背景_前面 { z-index: 1050; }

/* ===== 帳票ビューア（発行時のHTMLをそのまま大きく表示） ===== */
/* 履歴一覧（1100）の上に重ねて開くので、さらに前に出す */
.モーダル背景.帳票ビューア背景 { z-index: 1200; }

/* 支払い明細は、帳票ビューア（1200）の中の「支払い明細」からも開くので、その上に出す。
   画面の組み立て順ではビューアのほうが後ろに来るため、重ね順で前に出しておく必要がある */
.モーダル背景.支払い明細背景 { z-index: 1300; }

.帳票ビューアパネル {
  background: #fff;
  border-radius: 12px;
  width: 1100px;
  max-width: 96vw;
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.帳票ビューアヘッダー {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

.帳票ビューア宛名 { font-size: 14px; font-weight: 700; color: #1F2937; }
.帳票ビューア日時 { font-size: 11px; color: #9CA3AF; }
.帳票ビューア番号 { font-size: 11px; color: #6B7280; }
.帳票ビューア余白 { flex: 1; }

.帳票ビューア印刷 {
  padding: 6px 14px;
  min-width: 104px;
  text-align: center;
  border: 1.5px solid #4F46E5;
  border-radius: 7px;
  background: #fff;
  color: #4F46E5;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.帳票ビューア印刷:hover { background: #EEF2FF; }

/* ビューアから直接、その請求書の入金を足すボタン。
   帳票そのものを書き換えるわけではない（記録を足すだけ）ので、印刷ほど強い見た目にはしない */
.帳票ビューア明細 {
  padding: 6px 14px;
  min-width: 104px;
  text-align: center;
  border: 1.5px solid #CBD5E1;
  border-radius: 7px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.帳票ビューア明細:hover { background: #F1F5F9; border-color: #94A3B8; }

/* まだ発行していない＝履歴に残っていないことを明示する */
.帳票プレビュー印 {
  background: #FEF3C7;
  color: #92400E;
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* 発行前に中身を確かめるボタン（生成ボタンの隣） */
.帳票プレビューボタン {
  padding: 8px 16px;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.帳票プレビューボタン:hover { background: #F1F5F9; }
.帳票プレビューボタン:disabled { opacity: 0.45; cursor: not-allowed; }

/* 保存済み請求書を同じ商品で作り直すボタン */
.帳票ビューア作り直す {
  padding: 6px 14px;
  min-width: 104px;
  text-align: center;
  border: 1.5px solid #CBD5E1;
  border-radius: 7px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.帳票ビューア作り直す:hover { background: #F1F5F9; }

/* 同じ商品の帳票が他にもあるときだけ出る */
.帳票ビューア過去 {
  padding: 6px 14px;
  text-align: center;
  border: 1.5px solid #CBD5E1;
  border-radius: 7px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.帳票ビューア過去:hover { background: #F1F5F9; }

/* 帳票そのもの。白背景の紙をそのまま出す */
.帳票ビューア枠 {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}

.履歴パネル {
  background: white;
  border-radius: 14px;
  /* 更新履歴も請求書チェックも一度にたくさん見たいので、画面をなるべく使う
     （帳票ビューアと同じくらいの大きさ。中身が少ないときは縮む） */
  width: 1280px;
  max-width: 96vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.履歴ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 12px;
}

.履歴タイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.履歴ヘッダー左 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.履歴種別選択 {
  padding: 5px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  cursor: pointer;
  outline: none;
}

.履歴種別選択:focus { border-color: #4F46E5; }

.履歴フィルター行 {
  display: flex;
  gap: 8px;
  padding: 0 24px 12px;
}

.履歴フィルター行 select,
.履歴フィルター行 input {
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.履歴フィルター行 input {
  flex: 1;
}

.履歴フィルター行 select:focus,
.履歴フィルター行 input:focus {
  border-color: #4F46E5;
}

.履歴更新ボタン {
  padding: 6px 14px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: white;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.履歴更新ボタン:hover { background: #F9FAFB; }

.履歴リスト {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 18px;
}

.履歴項目 {
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.履歴項目:last-child { border-bottom: none; }

.履歴項目ヘッダー {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.履歴日時 {
  font-size: 11px;
  color: #9CA3AF;
}

.履歴ユーザー {
  font-size: 11px;
  font-weight: 600;
  color: #4F46E5;
}

.履歴変更一覧 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.履歴変更行 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  flex-wrap: wrap;
}

.履歴登録番号 {
  font-weight: 600;
  color: #6B7280;
  min-width: 55px;
}

.履歴カラム名 {
  background: #F3F4F6;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  color: #374151;
}

.履歴旧値 {
  color: #DC2626;
  text-decoration: line-through;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.履歴矢印 { color: #9CA3AF; }

.履歴新値 {
  color: #059669;
  font-weight: 500;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.履歴タグ {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.履歴タグ.新規 { background: #DCFCE7; color: #166534; }
.履歴タグ.削除 { background: #FEE2E2; color: #991B1B; }
.履歴タグ.復元 { background: #DBEAFE; color: #1E40AF; }

.履歴空 {
  text-align: center;
  color: #9CA3AF;
  padding: 40px 0;
  font-size: 13px;
}

/* ===== 帳票履歴（発行した請求書などの一覧） ===== */
.帳票絞込帯 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 24px 10px;
  padding: 8px 12px;
  background: #EEF2FF;
  border: 1.5px solid #C7D2FE;
  border-radius: 8px;
  font-size: 12px;
  color: #3730A3;
}

.帳票絞込解除 {
  padding: 4px 10px;
  border: 1.5px solid #C7D2FE;
  border-radius: 6px;
  background: white;
  font-size: 11px;
  font-family: inherit;
  color: #4F46E5;
  cursor: pointer;
  white-space: nowrap;
}

.帳票絞込解除:hover { background: #F5F3FF; }

.帳票履歴項目 {
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.帳票履歴項目:last-child { border-bottom: none; }

.帳票履歴主行 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.帳票種類 {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: #F3F4F6;
  color: #374151;
}

.帳票種類.請求書 { background: #DBEAFE; color: #1E40AF; }

/* 請求書に選んだ支払い方法（現金・Wise など） */
.帳票支払い方法 {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: #EEF2FF;
  color: #3730A3;
}
.帳票種類.領収書 { background: #FCE7F3; color: #9D174D; }
.帳票種類.入金明細書 { background: #DCFCE7; color: #166534; }
.帳票種類.販売精算書 { background: #FEF3C7; color: #92400E; }

.帳票宛名 {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.帳票番号 {
  font-size: 11px;
  color: #6B7280;
  white-space: nowrap;
}

.帳票商品数 {
  font-size: 11px;
  color: #6B7280;
  white-space: nowrap;
}

.帳票合計 {
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
  min-width: 90px;
  text-align: right;
  white-space: nowrap;
}

.帳票再表示 {
  padding: 5px 12px;
  border: 1.5px solid #4F46E5;
  border-radius: 6px;
  background: white;
  color: #4F46E5;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.帳票再表示:hover { background: #EEF2FF; }

.帳票履歴副行 {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 11px;
  color: #9CA3AF;
}

.帳票発行者 { white-space: nowrap; }

.帳票商品一覧 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.履歴アイコンセル {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.履歴アイコンセル:hover {
  opacity: 1;
}

/* 「📄」列。帳票が無い商品はグレーのまま、ある商品だけ色を出す（発送管理の📄と同じ考え方） */
.帳票アイコンセル {
  filter: grayscale(1);
  opacity: 0.3;
}

.帳票アイコンセル.帳票あり {
  filter: none;
  opacity: 1;
}

.帳票アイコンセル:hover {
  filter: none;
  opacity: 1;
}

.英語情報アイコン {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.英語情報アイコン:hover { opacity: 1; }
.英語情報アイコン.あり { opacity: 0.7; }
.英語情報ポップ {
  position: fixed;
  z-index: 100;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  padding: 10px 14px;
  width: 260px;
}
.英語情報ポップヘッダー {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}
.英語情報ポップヘッダー button { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 14px; }
.英語情報フィールド {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.英語情報フィールド label {
  font-size: 12px;
  color: #6b7280;
  width: 45px;
  flex-shrink: 0;
}
.英語情報フィールド input, .英語情報フィールド select {
  flex: 1;
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}

.行履歴パネル {
  width: 800px;
  max-width: 95vw;
}

/* ===== 集計バー ===== */
.集計バー {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 16px 12px;
  padding: 8px 16px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(108, 92, 231, 0.07);
  font-size: 12px;
  flex-wrap: wrap;
}

.集計項目 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.集計ラベル {
  color: #8B8FA3;
  font-weight: 500;
}

.集計値 {
  color: #2D3748;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.集計値.プラス { color: #059669; }
.集計値.マイナス { color: #DC2626; }

.集計区切り {
  width: 1px;
  height: 16px;
  background: #E5E7EB;
  margin: 0 4px;
}

.集計期間バッジ {
  display: inline-flex;
  align-items: center;
  color: #374151;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}

/* ===== 右クリックメニュー ===== */
.コンテキストメニュー背景 {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
}

.コンテキストメニュー {
  position: fixed;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  min-width: 140px;
  z-index: 201;
}

.コンテキストメニュー button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}

.コンテキストメニュー button:hover {
  background: #F3F4F6;
}

.コンテキスト区切り {
  height: 1px;
  background: #E5E7EB;
  margin: 4px 0;
}

.コンテキストメニュー button.削除メニュー {
  color: #DC2626;
  font-weight: 600;
}

.コンテキストメニュー button.削除メニュー:hover {
  background: #FEF2F2;
}

.コンテキストメニュー button.撮影QRメニュー {
  color: #1E40AF;
  font-weight: 600;
}

.コンテキストメニュー button.撮影QRメニュー:hover {
  background: #EFF6FF;
}

/* サブメニュー（一括ステータス変更） */
.コンテキストサブメニュー親 {
  position: relative;
}

.サブメニューボタン {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.サブメニューボタン:hover {
  background: #F3F4F6;
}

.コンテキストサブメニュー {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  min-width: 170px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
  z-index: 210;
}

/* 右に収まらない場合は左に展開 */
.サブメニュー左 .コンテキストサブメニュー {
  left: auto;
  right: 100%;
}

/* 下揃え：最後の項目が親ボタンと同じ高さに来るように上方向へ展開 */
.サブメニュー下揃え .コンテキストサブメニュー {
  top: auto;
  bottom: 0;
}

.コンテキストサブメニュー親:hover .コンテキストサブメニュー {
  display: block;
}

.コンテキストサブメニュー button {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.コンテキストサブメニュー button:hover {
  background: #F3F4F6;
}

.コンテキストサブメニュー button.帳票作成不可 {
  color: #9CA3AF;
  cursor: not-allowed;
  background: transparent;
}

.コンテキストサブメニュー button.帳票作成不可:hover {
  background: transparent;
}

.コンテキストメニュー button.帳票作成メニュー,
.コンテキストサブメニュー button.帳票作成メニュー {
  color: #6D28D9;
  font-weight: 600;
}

.コンテキストメニュー button.入金確認メニュー {
  color: #F59E0B;
  font-weight: 600;
}

.コンテキストメニュー button.入金確認メニュー:hover {
  background: #FEF3C7;
}

.請求書確定ボタン {
  background: #F59E0B;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.請求書確定ボタン:hover:not(:disabled) {
  background: #D97706;
}

.請求書確定ボタン:disabled {
  background: #E5E7EB;
  color: #9CA3AF;
  cursor: not-allowed;
}

/* ===== 成約確定 閉じ時確認ダイアログ ===== */
.成約確認背景 {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.成約確認パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 24px 28px;
  min-width: 360px;
  max-width: 440px;
}
.成約確認本文 {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
  margin-bottom: 18px;
}
.成約確認補足 {
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  margin-top: 8px;
}
.成約確認ボタン群 {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.成約確認はい,
.成約確認いいえ {
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-width: 96px;
}
.成約確認はい {
  background: #F59E0B;
  color: white;
}
.成約確認はい:hover {
  background: #D97706;
}
.成約確認いいえ {
  background: #F3F4F6;
  color: #374151;
}
.成約確認いいえ:hover {
  background: #E5E7EB;
}

.一括変更ダイアログ {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  padding: 20px 24px;
  min-width: 320px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.一括変更ダイアログヘッダー {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 14px;
}

.一括変更ダイアログ本体 {
  margin-bottom: 16px;
}

.一括変更ダイアログ入力 {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

.一括変更ダイアログ入力:focus {
  border-color: #6366F1;
}

.一括変更ダイアログ本体 .日付範囲入力 {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  box-sizing: border-box;
}

.一括売値モード選択 {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #374151;
}

/* 売値の一括変更「推奨売値にする」の説明（入力欄のかわりに出す） */
.一括変更推奨の説明 {
  max-width: 420px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #4B5563;
  background: #F8FAFC;
  border: 1px solid #EEF2F7;
  border-radius: 8px;
  padding: 10px 12px;
}
.一括変更推奨の選択 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}
.一括変更推奨の注記 {
  margin: 2px 0 0 22px;
  font-size: 11.5px;
  color: #6B7280;
}
.一括変更推奨の設定 {
  display: block;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  font-size: 12px;
  color: #4F46E5;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.一括売値モード選択 label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.一括売値モード選択 input[type="radio"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.一括変更ダイアログボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.一括変更キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.一括変更キャンセル:hover {
  background: #F3F4F6;
}

.一括変更OK {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.一括変更OK:hover {
  background: #4F46E5;
}

/* ===== 手数料編集モーダル ===== */
.手数料検索欄 {
  padding: 10px 18px 0;
}

.手数料検索入力 {
  width: 100%;
  padding: 7px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.手数料検索入力:focus {
  border-color: #6366F1;
}

.手数料設定リスト {
  overflow-y: auto;
  padding: 10px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.手数料行 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #F3F4F6;
}

.手数料販売先名 {
  flex: 1;
  font-size: 13px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.手数料入力 {
  width: 80px;
  padding: 4px 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
  outline: none;
  transition: border-color 0.2s;
}

.手数料入力:focus {
  border-color: #6366F1;
}

.手数料単位 {
  font-size: 13px;
  color: #9CA3AF;
  width: 16px;
}

/* 率は売れた時点で商品に固定される。手数料編集の画面上部に出す説明 */
.手数料注記 {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #6B7280;
}

/* Whatnot のように、率をライブコマース報告の設定で決める販売先。入力欄の代わりに理由を出す */
.手数料読取専用 {
  font-size: 12px;
  color: #9CA3AF;
  white-space: nowrap;
}

/* ===== 精算書作成モーダル ===== */

.精算書パネル {
  background: white;
  border-radius: 14px;
  width: 760px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 24px 28px;
}

.精算書ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* 入力欄のまとまりを入れる箱。スクロールはパネル側が持つ */
.精算書本文 {
  margin-top: 16px;
}

/* 入力欄のまとまり。見出しを付けて「どこまでが何の設定か」を分かるようにする */
.精算書節 + .精算書節 {
  margin-top: 22px;
}

.精算書節見出し {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #6B7280;
  padding-bottom: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid #F3F4F6;
}

.精算書節 > .精算書エラー,
.精算書節 > .精算書注意 {
  margin-bottom: 12px;
}

/* 節の中に入れた警告は、下のフォームとの間隔を節側でそろえる */
.精算書節 > .精算書エラー:last-child,
.精算書節 > .精算書注意:last-child {
  margin-bottom: 0;
}

/* 節の最後に添える1行の説明。長い解説は書かない（読まれないので） */
.精算書節注記 {
  font-size: 11px;
  line-height: 1.6;
  color: #6B7280;
  margin-top: -2px;
}

/* .全幅 は .精算書ラベル にしか効いていなかったので、注記にも効くようにする */
.精算書節注記.全幅 {
  grid-column: 1 / -1;
}

/* ラベルとバッジを横に並べる行 */
.精算書ラベル行 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.精算書ラベル補足 {
  font-weight: 400;
  color: #9CA3AF;
  font-size: 11px;
}

/* 上書きが「どこまで効くか」を一目で示す。
   販売手数料は商品に列が無いので帳票の中だけ、決済手数料は列があるので商品にも書き戻す。 */
.精算書バッジ {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

.精算書バッジ.帳票のみ {
  background: #F3F4F6;
  color: #6B7280;
}

.精算書バッジ.商品にも {
  background: #FEF3C7;
  color: #92400E;
}

.精算書タイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.帳票タブ {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #E5E7EB;
  margin: 0 -28px;
  padding: 0 28px;
}

.帳票タブボタン {
  padding: 8px 16px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #9CA3AF;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.15s;
  font-family: inherit;
}

.帳票タブボタン:hover {
  color: #374151;
}

.帳票タブボタン.選択中 {
  color: #4F46E5;
  border-bottom-color: #4F46E5;
}

.帳票言語切替 {
  display: flex;
  gap: 0;
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid #E5E7EB;
}

.帳票言語ボタン {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: white;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.帳票言語ボタン:not(:last-child) {
  border-right: 1.5px solid #E5E7EB;
}

.帳票言語ボタン:hover {
  background: #F9FAFB;
}

.帳票言語ボタン.選択中 {
  background: #4F46E5;
  color: white;
  font-weight: 600;
}

.精算書フォーム {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}

.精算書フォーム.精算書フォーム3列 {
  grid-template-columns: 1fr 1fr 1fr;
}

.精算書ラベル {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  min-width: 0;
}

.精算書ラベル.全幅 {
  grid-column: 1 / -1;
}

/* 販売精算書の配当率など、この画面からは変更できない読み取り専用の値。入力欄と同じ高さに見えるようにしている */
.精算書読取値 {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: #F9FAFB;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #374151;
  box-sizing: border-box;
}

.精算書読取値未設定 {
  color: #9CA3AF;
  font-weight: 400;
}

/* 入力欄の下に添える説明 */
.精算書補足 {
  font-size: 11px;
  font-weight: 400;
  color: #6B7280;
  line-height: 1.5;
}

/* 寸法セル（W×H×D 表示） */
.寸法セル {
  display: block;
  padding: 0 8px;
  line-height: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #111827;
  cursor: cell;
}
.寸法プレース {
  color: #9CA3AF;
}

/* 寸法編集ポップ（W×H×D の3入力） */
.寸法編集パネル {
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  padding: 12px 14px;
  min-width: 280px;
}
.寸法編集タイトル {
  font-size: 12px;
  font-weight: 700;
  color: #4F46E5;
  margin-bottom: 8px;
}
.寸法編集行 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.寸法編集ラベル {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: #6B7280;
  font-weight: 600;
}
.寸法編集input {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
}
.寸法編集input::-webkit-outer-spin-button,
.寸法編集input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.寸法編集input:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.寸法編集記号 {
  font-size: 14px;
  color: #6B7280;
  padding-bottom: 6px;
}
.寸法編集単位 {
  font-size: 11px;
  color: #6B7280;
  padding-bottom: 6px;
  margin-left: 2px;
}
.寸法編集ボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.寸法編集クリア,
.寸法編集確定 {
  padding: 5px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
}
.寸法編集クリア {
  background: white;
  color: #6B7280;
  border-color: #D1D5DB;
}
.寸法編集クリア:hover {
  background: #F9FAFB;
}
.寸法編集確定 {
  background: #4F46E5;
  color: white;
  border-color: #4F46E5;
}
.寸法編集確定:hover {
  background: #3730A3;
}

/* Shopify出品モーダルのサイズ列（W×H×D 横並び） */
.Shopify寸法入力群 {
  display: flex;
  align-items: center;
  gap: 2px;
}
.Shopify寸法input {
  width: 42px;
  padding: 3px 4px;
  border: 1px solid #D1D5DB;
  border-radius: 3px;
  font-size: 11px;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
}
.Shopify寸法input::-webkit-outer-spin-button,
.Shopify寸法input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.Shopify寸法input:focus {
  outline: none;
  border-color: #4F46E5;
}
.Shopify寸法記号 {
  font-size: 11px;
  color: #6B7280;
}

/* 振込先変更欄（請求書フォーム内、全幅で表示） */
.振込先変更欄 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.振込先変更欄.全幅 {
  grid-column: 1 / -1;
}
.振込先変更行群 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.振込先変更現在値群 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-width: 0;
}
.振込先変更現在値ラベル {
  font-size: 11px;
  color: #4F46E5;
  font-weight: 700;
  background: #EEF2FF;
  padding: 2px 8px;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}
.振込先変更現在値ラベル.発行元 {
  color: #047857;
  background: #ECFDF5;
}
/* 発行元行：ラベル右側のコンテンツを自前で wrap させる（住所も会社と同じ x に揃う） */
.振込先変更コンテンツ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  flex: 1;
  min-width: 0;
}
.振込先住所 {
  flex-basis: 100%;
}
.振込先変更現在値項目 {
  font-size: 12px;
  color: #111827;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.振込先変更項目見出し {
  font-size: 10px;
  color: #9CA3AF;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.振込先変更ボタン {
  background: white;
  border: 1px solid #6366F1;
  color: #4F46E5;
  padding: 5px 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.振込先変更ボタン:hover {
  background: #EEF2FF;
}

/* 振込先設定モーダル */
.振込先設定パネル {
  background: white;
  border-radius: 10px;
  max-width: 720px;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 28px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.振込先設定ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E5E7EB;
}
.振込先設定タイトル {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.振込先設定セクション見出し {
  font-size: 12px;
  font-weight: 700;
  color: #4F46E5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0 8px;
  padding-left: 8px;
  border-left: 4px solid #4F46E5;
}
.振込先設定グリッド {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.振込先設定グリッド label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}
.振込先設定グリッド label.振込先設定広 {
  grid-column: 1 / -1;
}
.振込先設定グリッド label input {
  padding: 6px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
}
.振込先設定グリッド label input:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
/* 保存に失敗したとき。画面だけ変えて閉じると、その端末だけ違う内容で帳票が出てしまうので必ず見せる */
.振込先設定エラー {
  margin: 12px 0;
  padding: 10px 14px;
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #B91C1C;
}

/* 振込先・発行元の変更は全員共通だと伝える注記（以前あった「デフォルトを上書き」の枠を流用） */
.振込先設定注記 {
  margin: 20px 0 12px;
  padding: 10px 14px;
  background: #FEF3C7;
  border: 1px solid #FBBF24;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #92400E;
}
.振込先設定操作 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}
.振込先設定キャンセル,
.振込先設定適用 {
  padding: 8px 22px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid;
}
.振込先設定キャンセル {
  background: white;
  color: #6B7280;
  border-color: #D1D5DB;
}
.振込先設定キャンセル:hover {
  background: #F9FAFB;
}
/* この帳票だけに反映：ふつうの操作なので控えめ（枠だけ） */
.振込先設定適用 {
  background: white;
  color: #4F46E5;
  border-color: #C7D2FE;
}
.振込先設定適用:hover:not(:disabled) {
  background: #EEF2FF;
}

/* 全社の登録内容として保存：全PCに効くので、押す前に一呼吸おいてほしい色にする */
.振込先設定全社保存 {
  padding: 8px 22px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid #B45309;
  background: #B45309;
  color: white;
}
.振込先設定全社保存:hover:not(:disabled) {
  background: #92400E;
}

.振込先設定適用:disabled,
.振込先設定全社保存:disabled,
.振込先設定キャンセル:disabled {
  opacity: 0.45;
  cursor: default;
}



/* 「販売先（請求先）」などの入力欄の見出し（13px）と同じ大きさにそろえる。
   11px だと本文として読みづらく、大事な決まり（Shipping fee 必須など）を読み飛ばされるため */
.請求書追加料金ヘルプ {
  font-size: 13px;
  color: #4B5563;
  line-height: 1.7;
}

.請求書追加料金グリッド {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Shipping fee は必須。空欄のうちは赤枠で気付けるようにする */
.請求書追加料金ラベル行 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.請求書追加料金必須バッジ {
  padding: 1px 6px;
  border-radius: 4px;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

/* 入れなくても発行できる欄の印（支払い方法） */
.請求書追加料金任意バッジ {
  padding: 1px 6px;
  border-radius: 4px;
  background: #E5E7EB;
  color: #4B5563;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.請求書追加料金未入力 input {
  border-color: #DC2626;
  background: #FEF2F2;
}

.請求書追加料金警告 {
  border: 1px solid #FECACA;
  border-radius: 6px;
  background: #FEF2F2;
  color: #B91C1C;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
}

/* 手数料（決済方法・外貨交換）。選ぶと 請求額×率 で出る（migration 102） */
.請求書追加料金未入力 select {
  border-color: #DC2626;
  background: #FEF2F2;
}

.請求書手数料ブロック {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed #E5E7EB;
}


.請求書手数料選択 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.請求書手数料表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.請求書手数料表 th {
  background: #F3F4F6;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #6B7280;
  border-bottom: 1px solid #E5E7EB;
}

.請求書手数料表 td {
  padding: 6px 8px;
  border-bottom: 1px solid #F3F4F6;
  color: #1F2937;
  vertical-align: middle;
}

.請求書手数料表 .金額セル {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.請求書手数料表 tfoot td {
  font-weight: 700;
  border-bottom: none;
}

.請求書手数料額欄 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.請求書手数料額入力 {
  width: 110px;
  padding: 5px 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.請求書手数料額入力:focus {
  border-color: #6366F1;
}

/* 手で直した額。自動の額と区別できるように色を変える */
.請求書手数料額入力.手入力 {
  border-color: #F59E0B;
  background: #FFFBEB;
}

/* 手で直した行の横に出す「自動の額」。比べながら直すので、はっきり読める濃さにする */
.請求書手数料自動 {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}

.請求書手数料ボタン {
  margin-left: 8px;
  padding: 3px 10px;
  border: 1.5px solid #C7D2FE;
  border-radius: 6px;
  background: #EEF2FF;
  color: #4338CA;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.請求書手数料ボタン:hover {
  background: #E0E7FF;
}

.請求書手数料なし {
  font-size: 12px;
  color: #6B7280;
}

/* 支払い明細に外貨があるのに「円で払われた」を選んでいるときの一言（止めはしない） */
.請求書手数料ヒント {
  border: 1px solid #FDE68A;
  border-radius: 6px;
  background: #FFFBEB;
  color: #92400E;
  font-size: 12px;
  padding: 8px 10px;
}

/* 支払い内訳セル（一覧）。文字＋右端の ✎ で編集画面を開く */
.支払い内訳セル {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.支払い内訳テキスト {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.支払い内訳編集ボタン {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: #6366F1;
  font-size: 12px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.55;
}

.支払い内訳編集ボタン:hover {
  background: #EEF2FF;
  opacity: 1;
}

/* 支払い方法・内訳を手で直す画面 */
.支払い内訳パネル {
  background: white;
  border-radius: 14px;
  width: 640px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.支払い内訳ヘッダー {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
}

.支払い内訳タイトル {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
}

.支払い内訳サブタイトル {
  margin-top: 4px;
  font-size: 12px;
  color: #6B7280;
}

.支払い内訳本体 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 同じ請求書の商品をまとめて直すチェック */
.支払い内訳まとめ {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #C7D2FE;
  border-radius: 8px;
  background: #EEF2FF;
  font-size: 13px;
  color: #1F2937;
  cursor: pointer;
}

.支払い内訳まとめ input {
  margin-top: 2px;
}

.支払い内訳まとめ補足 {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #4B5563;
  font-weight: 400;
}

.支払い内訳注意 {
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #F9FAFB;
  color: #4B5563;
  font-size: 12px;
  padding: 8px 10px;
}

.支払い内訳読込中 {
  font-size: 12px;
  color: #6B7280;
  padding: 2px;
}

/* 確定でロックされていて書き換えない商品 */
.支払い内訳ロック行 td {
  color: #9CA3AF;
  background: #F9FAFB;
}

.支払い内訳ボタン群 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #E5E7EB;
  background: #F9FAFB;
}

.支払い内訳余白 {
  flex: 1;
}

.支払い内訳空にする,
.支払い内訳キャンセル {
  padding: 8px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.支払い内訳空にする:hover,
.支払い内訳キャンセル:hover {
  background: #F3F4F6;
}

.支払い内訳保存 {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: #10B981;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.支払い内訳保存:hover:not(:disabled) {
  background: #059669;
}

.支払い内訳保存:disabled {
  background: #A7F3D0;
  cursor: not-allowed;
}

/* 支払い明細の入力表（方法・日付・金額・通貨・円換算・備考） */
.支払い明細スクロール {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}

.支払い明細入力表 {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}

.支払い明細入力表 th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #F3F4F6;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #6B7280;
  font-size: 12px;
  border-bottom: 1px solid #E5E7EB;
  white-space: nowrap;
}

.支払い明細入力表 td {
  padding: 5px 8px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}

/* 日付入力は枠なしの部品なので、他の入力欄と同じ見た目になるよう枠を付ける */
.支払い明細入力表 .日付フィルター入力欄 {
  width: 100%;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 5px 8px;
  background: #FFFFFF;
  transition: border-color 0.15s;
}

.支払い明細入力表 .日付フィルター入力欄:focus-within {
  border-color: #6366F1;
}

.支払い明細入力表 .日付範囲入力 {
  flex: 1;
  width: auto;
  min-width: 0;
  font-size: 13px;
}

.支払い明細入力表 .日付範囲入力::placeholder {
  font-size: 13px;
}

/* 金額・円換算・備考は列の幅いっぱいに広げる */
.支払い明細入力表 .請求書支払い金額,
.支払い明細入力表 .支払い明細円換算,
.支払い明細入力表 .支払い明細備考,
.支払い明細入力表 .請求書支払い方法選択,
.支払い明細入力表 .支払い明細通貨 {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.支払い明細入力表 .支払い明細換算なし {
  width: 100%;
}

.支払い明細通貨 {
  width: 84px;
  padding: 6px 6px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  background: #FFFFFF;
}

.支払い明細円換算 {
  width: 100px;
  padding: 6px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.支払い明細換算なし {
  display: inline-block;
  width: 100px;
  text-align: center;
  color: #9CA3AF;
}

.支払い明細備考 {
  width: 120px;
  padding: 6px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
}

/* 帳票履歴から開く支払い明細の画面 */
.支払い明細パネル {
  background: white;
  border-radius: 14px;
  width: 1180px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.帳票支払い明細ボタン {
  padding: 5px 10px;
  border: 1.5px solid #C7D2FE;
  border-radius: 6px;
  background: #EEF2FF;
  color: #3730A3;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.帳票支払い明細ボタン:hover {
  background: #E0E7FF;
}

.帳票明細要約 {
  font-size: 11px;
  color: #3730A3;
  background: #EEF2FF;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}


.請求書支払い表 {
  border-collapse: collapse;
  font-size: 13px;
  width: auto;
}

.請求書支払い表 th {
  background: #F3F4F6;
  padding: 5px 10px;
  text-align: left;
  font-weight: 600;
  color: #6B7280;
  font-size: 12px;
  border-bottom: 1px solid #E5E7EB;
}

.請求書支払い表 td {
  padding: 5px 10px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}

.請求書支払い方法選択 {
  min-width: 180px;
  padding: 6px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  background: #FFFFFF;
}

.請求書支払い方法選択.請求書支払い未選択 {
  border-color: #DC2626;
  background: #FEF2F2;
}

.請求書支払い金額 {
  width: 140px;
  padding: 6px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.請求書支払い金額.未入力 {
  border-color: #DC2626;
  background: #FEF2F2;
}

.請求書支払い金額固定 {
  display: inline-block;
  min-width: 140px;
  text-align: right;
  font-weight: 600;
  color: #1F2937;
  font-variant-numeric: tabular-nums;
}

.請求書支払い操作 {
  white-space: nowrap;
}

.請求書支払い残り,
.請求書支払い追加 {
  padding: 4px 10px;
  border: 1px solid #C7D2FE;
  border-radius: 6px;
  background: #EEF2FF;
  color: #3730A3;
  font-size: 12px;
  cursor: pointer;
}

.請求書支払い残り:hover,
.請求書支払い追加:hover {
  background: #E0E7FF;
}

.請求書支払い削除 {
  margin-left: 6px;
  padding: 3px 9px;
  border: 1px solid #FECACA;
  border-radius: 6px;
  background: #FEF2F2;
  color: #B91C1C;
  font-size: 12px;
  cursor: pointer;
}

.請求書支払い下段 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.請求書支払い集計 {
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  font-variant-numeric: tabular-nums;
}

.請求書支払い集計.不一致 {
  color: #B91C1C;
}


.請求書按分プレビュー {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 6px;
}

.請求書按分スクロール {
  max-height: 280px;
  overflow-y: auto;
  border-radius: 4px;
}

.請求書按分スクロール thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.請求書按分ヘッダー {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 6px;
}

.請求書按分表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.請求書按分表 th {
  background: #F3F4F6;
  padding: 5px 8px;
  text-align: left;
  font-weight: 600;
  color: #6B7280;
  border-bottom: 1px solid #E5E7EB;
}

.請求書按分表 td {
  padding: 5px 8px;
  border-bottom: 1px solid #F3F4F6;
  color: #1F2937;
}

.請求書按分表 td.金額セル {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.精算書ラベル input[type="text"],
.精算書ラベル input[type="number"],
.精算書ラベル select {
  padding: 10px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.精算書ラベル input[type="text"]:focus,
.精算書ラベル input[type="number"]:focus,
.精算書ラベル select:focus {
  border-color: #6366F1;
}

.精算書ラベル select.プレースホルダー風 {
  color: #9CA3AF;
}
.精算書ラベル select.プレースホルダー風 option {
  color: #111827;
}
.精算書ラベル select.プレースホルダー風 option[value=""] {
  color: #9CA3AF;
}

/* ===== 検索コンボボックス ===== */
.検索コンボ {
  position: relative;
  width: 100%;
}
.検索コンボ input[type="text"] {
  padding-right: 36px;
}
.検索コンボ矢印 {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #6B7280;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.検索コンボ矢印:hover {
  background: #F3F4F6;
  color: #374151;
}
.検索コンボ候補 {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
}
.検索コンボ候補項目 {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 400;
  color: #1F2937;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.検索コンボ候補項目:hover {
  background: #EEF2FF;
}
.検索コンボ候補項目.選択中 {
  background: #E0E7FF;
  font-weight: 600;
  color: #4338CA;
}

.精算書チェック {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}

.精算書チェック input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.手動入力欄 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #F9FAFB;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
}
.手動入力ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.手動入力追加ボタン {
  border: 1.5px solid #6366F1;
  background: white;
  color: #6366F1;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.手動入力追加ボタン:hover {
  background: #EEF2FF;
}
.手動入力リスト {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.手動入力行 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.手動入力アイテム {
  flex: 1;
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.手動入力アイテム:focus {
  border-color: #6366F1;
}
.手動入力金額 {
  width: 130px;
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.手動入力金額:focus {
  border-color: #6366F1;
}
.手動入力削除ボタン {
  border: none;
  background: transparent;
  color: #9CA3AF;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.手動入力削除ボタン:hover {
  background: #FEE2E2;
  color: #DC2626;
}

.精算書選択モード {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #EEF2FF;
  border: 1.5px solid #C7D2FE;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #3730A3;
}

.精算書プレビュー {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: #F0FDF4;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
  margin-top: 16px;
}

.精算書エラー {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: 8px;
  font-size: 13px;
  color: #B91C1C;
  line-height: 1.5;
}

/* 発行はできるが知らせておきたいこと（発行を止めるものは 精算書エラー のほう） */
.精算書注意 {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-radius: 8px;
  font-size: 13px;
  color: #92400E;
  line-height: 1.5;
}

.精算書期間入力 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.精算書期間入力 .日付フィルター入力欄 {
  flex: 1;
}

.精算書期間入力 .日付範囲入力 {
  width: 100%;
  font-size: 14px;
}

.精算書期間入力 .日付範囲入力::placeholder {
  font-size: 14px;
}

.精算書期間入力 .日付カレンダーボタン {
  font-size: 18px;
  padding: 0 4px;
}

.精算書期間入力 span {
  color: #9CA3AF;
  font-weight: 400;
}

.精算書生成ボタン {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #059669;
  color: white;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 16px;
}

.精算書生成ボタン:hover:not(:disabled) {
  background: #047857;
}

.精算書生成ボタン:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.精算書ボタン群 {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.精算書ボタン群 .精算書生成ボタン {
  flex: 1;
  margin-top: 0;
}

.精算書CSVボタン {
  padding: 12px 18px;
  border: 2px solid #059669;
  border-radius: 10px;
  background: white;
  color: #059669;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.精算書CSVボタン:hover:not(:disabled) {
  background: #F0FDF4;
}

.精算書CSVボタン:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== 棚卸モード ===== */

/* 棚卸ボタンは他のツールバーボタンと同じスタイル */

/* 進行中の棚卸に参加するツールバーボタン（他メンバーが棚卸中だと気づけるよう棚卸色で強調） */
.ツールバーボタン.棚卸参加ボタン {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff;
  border-color: #6D28D9;
  font-weight: 700;
}
.ツールバーボタン.棚卸参加ボタン:hover {
  filter: brightness(1.08);
}

/* 棚卸バー */
.棚卸バー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  color: #fff;
  font-size: 13px;
  gap: 16px;
}
.棚卸バー左 {
  display: flex;
  align-items: center;
  gap: 16px;
}
.棚卸ラベル {
  font-weight: 700;
  font-size: 14px;
  background: rgba(255,255,255,0.2);
  padding: 2px 10px;
  border-radius: 4px;
  animation: 棚卸パルス 2s infinite;
}
@keyframes 棚卸パルス {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.棚卸進捗 b {
  font-size: 16px;
}
.棚卸パーセント {
  opacity: 0.8;
  font-size: 12px;
}
.棚卸未バーコード {
  opacity: 0.7;
  font-size: 12px;
}
.棚卸バー中央 {
  display: flex;
  gap: 4px;
}
.棚卸フィルターボタン {
  padding: 3px 12px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}
.棚卸フィルターボタン:hover {
  background: rgba(255,255,255,0.15);
}
.棚卸フィルターボタン.選択中 {
  background: rgba(255,255,255,0.25);
  border-color: #fff;
  font-weight: 700;
}
.棚卸バー右 {
  display: flex;
  gap: 8px;
}
.棚卸終了ボタン {
  padding: 5px 16px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.棚卸終了ボタン:hover {
  background: rgba(255,255,255,0.3);
}
/* 自分だけ棚卸を抜ける「離脱」ボタン（終了より控えめな見た目） */
.棚卸離脱ボタン {
  padding: 5px 16px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.棚卸離脱ボタン:hover {
  background: rgba(255,255,255,0.2);
}

/* 棚卸中の隠しinput（スキャナー入力受け取り用、視覚的には非表示） */
.棚卸隠し入力 {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  z-index: -1;
}

/* 棚卸バー右側のスキャン専用切替 */
.棚卸スキャン専用切替 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  color: #FFFFFF;
  cursor: pointer;
  user-select: none;
  margin-right: 8px;
}

.棚卸スキャン専用切替 input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
  accent-color: #4F46E5;
}

/* 棚卸通知 */
.棚卸通知 {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  z-index: 9999;
  animation: 棚卸通知アニメ 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  white-space: nowrap;
}
@keyframes 棚卸通知アニメ {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.棚卸通知_成功 {
  background: #059669;
  color: #fff;
}
.棚卸通知_済み {
  background: #D97706;
  color: #fff;
}
.棚卸通知_エラー {
  background: #DC2626;
  color: #fff;
}
.棚卸通知_対象外 {
  background: #6B7280;
  color: #fff;
}

/* 棚卸 行ハイライト */
tr.棚卸スキャン済み {
  background-color: #ECFDF5 !important;
}
tr.棚卸スキャン済み td {
  background-color: #ECFDF5 !important;
}
tr.棚卸未スキャン {
  background-color: #FFF7ED !important;
}
tr.棚卸未スキャン td {
  background-color: #FFF7ED !important;
}

/* 棚卸設定モーダル */
.棚卸設定モーダル {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 760px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.棚卸設定タイトル {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1F2937;
}
.棚卸設定説明 {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 16px;
}
.棚卸設定グリッド {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}
.棚卸設定列 {
  min-width: 0;
}
.棚卸設定小見出し {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}
.棚卸所属一覧 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.棚卸ステータス一括 {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.棚卸ステータス一括 button {
  padding: 4px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  background: #F9FAFB;
  cursor: pointer;
  font-size: 12px;
}
.棚卸ステータス一括 button:hover {
  background: #E5E7EB;
}
.棚卸ステータス一覧 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}
.棚卸ステータス項目 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  border-left: 4px solid #D1D5DB;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.棚卸ステータス項目:hover {
  background: #F3F4F6;
}
.棚卸ステータス項目.選択中 {
  background: #EDE9FE;
}
.棚卸ステータス項目 input {
  accent-color: #7C3AED;
}
.棚卸設定オプション {
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #F9FAFB;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
}
.棚卸オプション項目 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.棚卸オプション項目 input {
  accent-color: #7C3AED;
}
.棚卸設定情報 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #E5E7EB;
  font-size: 14px;
}
.棚卸警告 {
  color: #D97706;
  font-size: 12px;
}
.棚卸設定ボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.棚卸キャンセル {
  padding: 8px 20px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
}
.棚卸キャンセル:hover {
  background: #F3F4F6;
}
.棚卸実行ボタン {
  padding: 8px 24px;
  border: none;
  border-radius: 6px;
  background: #7C3AED;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.棚卸実行ボタン:hover {
  background: #6D28D9;
}
.棚卸実行ボタン:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 棚卸結果モーダル */
.棚卸結果モーダル {
  background: #fff;
  border-radius: 12px;
  padding: 32px 40px;
  max-width: 1100px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.棚卸結果タイトル {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #1F2937;
}
.棚卸結果サマリー {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.棚卸結果項目 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
}
.棚卸結果数値 {
  font-size: 36px;
  font-weight: 700;
  color: #374151;
}
.棚卸結果数値.成功 { color: #059669; }
.棚卸結果数値.警告 { color: #DC2626; }
.棚卸結果数値.情報 { color: #D97706; }
.棚卸結果ラベル {
  font-size: 13px;
  color: #6B7280;
  margin-top: 6px;
}
.棚卸未確認リスト {
  margin-bottom: 20px;
}
.棚卸未確認リスト h3 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
}
.棚卸未確認テーブル {
  max-height: 480px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
}
.棚卸未確認テーブル table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.棚卸未確認テーブル th {
  position: sticky;
  top: 0;
  background: #F3F4F6;
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid #D1D5DB;
}
.棚卸未確認テーブル td {
  padding: 5px 10px;
  border-bottom: 1px solid #F3F4F6;
}
.棚卸バーコードなし行 {
  background: #FEF3C7;
}
.棚卸なしラベル {
  color: #9CA3AF;
  font-style: italic;
}
.棚卸省略 {
  text-align: center;
  padding: 8px;
  color: #6B7280;
  font-size: 12px;
}
.棚卸結果ボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.棚卸CSV出力 {
  padding: 8px 20px;
  border: 1px solid #7C3AED;
  border-radius: 6px;
  background: #fff;
  color: #7C3AED;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.棚卸CSV出力:hover {
  background: #EDE9FE;
}
.棚卸確定ボタン {
  padding: 8px 24px;
  border: none;
  border-radius: 6px;
  background: #DC2626;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.棚卸確定ボタン:hover {
  background: #B91C1C;
}

/* ===== 棚卸スキャン画像（管理番号の付け間違い照合用） ===== */
.棚卸スキャン画像 {
  background: #fff;
  border: 2px solid #7C3AED;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.棚卸スキャン画像ヘッダー {
  display: flex;
  align-items: center;
  gap: 8px;
}
.棚卸スキャン画像管理番号 {
  font-size: 20px;
  font-weight: 700;
  color: #6D28D9;
  letter-spacing: 0.5px;
}
.棚卸スキャン画像バッジ {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.棚卸スキャン画像バッジ.済み { background: #D97706; }
.棚卸スキャン画像バッジ.対象外 { background: #6B7280; }
.棚卸スキャン画像閉じる {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #6B7280;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
}
.棚卸スキャン画像閉じる:hover { color: #111; }
.棚卸スキャン画像商品名 {
  font-size: 13px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.棚卸スキャン画像メイン {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F4F6;
  border-radius: 8px;
  overflow: hidden;
}
.棚卸スキャン画像メイン img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.棚卸スキャン画像メイン.空,
.棚卸スキャン画像メイン.画像なし {
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 600;
}
.棚卸スキャン画像メイン.画像なし {
  color: #DC2626;
  background: #FEF2F2;
}
.棚卸スキャン画像サムネ列 {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.棚卸スキャン画像サムネ {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #F3F4F6;
}
.棚卸スキャン画像サムネ.選択中 {
  border-color: #7C3AED;
}
.棚卸スキャン画像サムネ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 表示位置：中央に大きく（オーバーレイなしでスキャン操作を妨げない） */
.棚卸スキャン画像_中央 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 90vw);
  z-index: 500;
}
.棚卸スキャン画像_中央 .棚卸スキャン画像メイン {
  height: min(60vh, 520px);
}

/* 表示位置：右側パネル */
.棚卸スキャン画像_右 {
  position: fixed;
  top: 140px;
  right: 16px;
  width: 320px;
  z-index: 500;
}
.棚卸スキャン画像_右 .棚卸スキャン画像メイン {
  height: 300px;
}

/* 表示位置：棚卸バー直下（通常フローで横並び・コンパクト表示） */
.棚卸スキャン画像_バー下 {
  border-radius: 0;
  border-width: 0 0 2px 0;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.棚卸スキャン画像_バー下 .棚卸スキャン画像ヘッダー {
  flex: 0 0 auto;
}
.棚卸スキャン画像_バー下 .棚卸スキャン画像商品名 {
  flex: 1 1 200px;
}
.棚卸スキャン画像_バー下 .棚卸スキャン画像メイン {
  height: 110px;
  width: 150px;
  flex: 0 0 auto;
}
.棚卸スキャン画像_バー下 .棚卸スキャン画像サムネ列 {
  flex: 1 1 auto;
}

/* 棚卸設定モーダル：スキャン画像の表示位置選択 */
.棚卸画像表示設定 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}
.棚卸画像表示ラベル {
  font-weight: 600;
  color: #374151;
}
.棚卸画像表示ボタン群 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.棚卸画像表示ボタン {
  padding: 5px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
}
.棚卸画像表示ボタン:hover {
  background: #F3F4F6;
}
.棚卸画像表示ボタン.選択中 {
  background: #7C3AED;
  border-color: #7C3AED;
  color: #fff;
  font-weight: 700;
}

/* ===== Shopify出品 ===== */
.Shopifyメニュー {
  color: #65A30D !important;
  font-weight: 600;
}

/* ===== モールに出品（Eコンビニ／ワサビ） ===== */
.コンテキストメニュー button.モール出品メニュー {
  color: #B45309;
  font-weight: 600;
}
.コンテキストメニュー button.モール出品メニュー:hover {
  background: #FEF6E7;
}
/* 出品の様子（見るだけ。Shopify とモール）。出品する操作と見分けるため、ほかで使っていない青緑 */
.コンテキストメニュー button.出品の様子メニュー {
  color: #0E7490;
  font-weight: 600;
}
.コンテキストメニュー button.出品の様子メニュー:hover {
  background: #ECFEFF;
}
.Shopify出品モーダル {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 1700px;
  width: 97vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.Shopify閉じるボタン {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  color: #9ca3af;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.Shopify閉じるボタン:hover { color: #374151; background: #f3f4f6; }
.Shopify出品モーダル h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #1a1a1a;
}
.Shopify出品ヘッダー {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.Shopify出品説明 {
  margin: 0;
  color: #666;
  font-size: 13px;
}
.Shopify公開設定 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.Shopify公開設定 label {
  color: #374151;
  font-weight: 600;
}
.Shopify公開設定 select {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}

/* コレクション選択 */
.Shopifyコレクション選択ラッパー {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
.Shopifyコレクション選択ラッパー label {
  color: #374151;
  font-weight: 600;
}
.Shopifyコレクションボタン {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}
.Shopifyコレクションボタン:hover:not(:disabled) {
  border-color: #6366F1;
  color: #4F46E5;
}
.Shopifyコレクションボタン:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.Shopifyコレクション矢印 {
  font-size: 9px;
  color: #9CA3AF;
}
.Shopifyコレクションポップ {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  width: 320px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}
.Shopifyコレクションヘッダー {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 11px;
  color: #6B7280;
  font-weight: 600;
}
.Shopifyコレクションクリア {
  border: none;
  background: transparent;
  color: #DC2626;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 4px;
}
.Shopifyコレクションクリア:hover {
  text-decoration: underline;
}
.Shopifyコレクションリスト {
  overflow-y: auto;
  padding: 4px;
}
.Shopifyコレクション項目 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
}
.Shopifyコレクション項目:hover {
  background: #F3F4F6;
}
.Shopifyコレクション項目.選択中 {
  background: #EEF2FF;
  color: #4F46E5;
  font-weight: 600;
}
.Shopifyコレクション項目 input[type="checkbox"] {
  cursor: pointer;
}
.Shopifyコレクション空 {
  padding: 16px;
  text-align: center;
  color: #9CA3AF;
  font-size: 12px;
}

/* 行ごとのコレクション選択 */
.Shopify列コレクション {
  width: 100px;
  text-align: left;
}
.Shopify行コレクションボタン {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
  font-size: 12px;
  font-family: inherit;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: all 0.15s;
}
.Shopify行コレクションボタン:hover:not(:disabled) {
  border-color: #6366F1;
  color: #4F46E5;
}
.Shopify行コレクションボタン:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.Shopify行コレクションポップ {
  position: fixed;
  z-index: 1100;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  width: 280px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
}
.Shopify出品テーブル {
  overflow: auto;
  flex: 1;
  min-height: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.Shopify出品テーブル table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.Shopify出品テーブル thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.Shopify出品テーブル th {
  background: #f8f9fa;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}
.Shopify出品テーブル td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}
.Shopify出品テーブル tbody tr:hover {
  background: #f8fdf5;
}
.Shopifyエラー行 {
  background: #fef2f2 !important;
}
.Shopify列番号 { width: 50px; }
.Shopify列管理 { width: 65px; }
.Shopify列名前 { min-width: 240px; }
.Shopify商品名セル {
  display: flex;
  align-items: center;
  gap: 4px;
}
.Shopify列名前 input.Shopify商品名入力 {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  background: #f9fafb;
  color: #374151;
  cursor: default;
}
.Shopify列名前 input.Shopify商品名入力.編集中 {
  border-color: #65A30D;
  background: #ffffff;
  cursor: text;
}
.Shopify列名前 input.Shopify商品名入力.編集中:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(101,163,13,.2);
}
.Shopify商品名アイコン {
  flex-shrink: 0;
  border: 1px solid #E5E7EB;
  background: white;
  color: #6B7280;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  padding: 0;
}
.Shopify商品名アイコン:hover:not(:disabled) {
  border-color: #65A30D;
  color: #65A30D;
}
.Shopify商品名アイコン:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.Shopify列画像 { width: 60px; }
.Shopify画像読込中 { color: #9ca3af; font-size: 12px; }
.Shopify画像なし { color: #9ca3af; font-size: 12px; }
.Shopify画像バッジ {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 3px 8px 3px 3px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.Shopify画像バッジ:hover {
  border-color: #65A30D;
  box-shadow: 0 0 0 2px rgba(101,163,13,.15);
}
.Shopify画像プレビュー {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
}
.Shopify画像件数 {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
  white-space: nowrap;
}
.Shopify画像展開行 td {
  padding: 0 !important;
  background: #f9fafb;
}
.Shopify画像展開パネル {
  padding: 10px 16px 14px;
}
.Shopify画像展開ヘッダー {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: #374151;
  font-weight: 500;
}
.Shopify画像展開ヘッダー button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #9ca3af;
  padding: 2px 4px;
}
.Shopify画像展開ヘッダー button:hover {
  color: #374151;
}
.Shopify画像展開グリッド {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.Shopify画像展開項目 {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.15s, opacity 0.15s;
}
.Shopify画像展開項目.選択中 { cursor: grab; }
.Shopify画像展開項目.選択中:active { cursor: grabbing; }
.Shopify画像展開項目.ドラッグ中 { opacity: 0.3; }
.Shopify画像展開項目.ドロップ左 { box-shadow: -4px 0 0 0 #4F46E5; }
.Shopify画像展開項目.ドロップ右 { box-shadow: 4px 0 0 0 #4F46E5; }
.Shopify画像展開項目 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.Shopify画像展開項目.選択中 {
  border-color: #65A30D;
  opacity: 1;
}
.Shopify画像展開項目.未選択 {
  border-color: #d1d5db;
  opacity: 0.4;
}
.Shopify画像展開項目:hover {
  opacity: 0.85;
}
.Shopify画像1枚目 {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  background: #065F46;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
}
.Shopify画像チェックマーク {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: #65A30D;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  pointer-events: none;
}
.Shopify列ブランド { width: 130px; }
.Shopify列ブランド input {
  width: 115px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列カテゴリー { width: 140px; }
.Shopify列カテゴリー select {
  width: 130px;
  padding: 3px 4px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列ランク { width: 65px; }
.Shopify列ランク select {
  width: 55px;
  padding: 3px 2px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列色 { width: 80px; }
.Shopify列色 input {
  width: 65px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
/* === Shopify重量設定モーダル（発送設定の部品を流用＋タイプ別の入力一覧） === */
/* 幅・スクロールは .発送設定モーダル のものをそのまま使う（独自に上書きすると
   あちらの max-width: 94vw が効かなくなるため）。ここでは中身の並びだけ定義する。 */
.重量設定一覧 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
  margin-top: 10px;
}
.重量設定項目 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.重量設定タイプ名 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.重量設定項目 input {
  width: 68px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  text-align: right;
}
.重量設定項目 input:focus {
  border-color: #65A30D;
  outline: none;
  box-shadow: 0 0 0 2px rgba(101,163,13,.2);
}
.重量設定単位 { color: #6b7280; font-size: 12px; }

.Shopify列重量 { width: 80px; }
.Shopify列重量 input {
  width: 62px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列重量 input:focus {
  border-color: #65A30D;
  outline: none;
  box-shadow: 0 0 0 2px rgba(101,163,13,.2);
}
.Shopify列原価 { width: 80px; }
.Shopify列売値 { width: 90px; }
.Shopify列売値 input {
  width: 75px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列売値 input:focus {
  border-color: #65A30D;
  outline: none;
  box-shadow: 0 0 0 2px rgba(101,163,13,.2);
}
/* Whatnotに出す価格。自動では入れず、入れたいときだけ手で入れる欄 */
.Shopify列Whatnot売値 { width: 130px; }
.Shopify列Whatnot売値 input {
  width: 110px;
  padding: 4px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}
.Shopify列Whatnot売値 input:focus {
  border-color: #65A30D;
  outline: none;
  box-shadow: 0 0 0 2px rgba(101,163,13,.2);
}
.Shopify列状況 { width: 35px; }
.Shopifyスピナー { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.Shopifyエラー { cursor: help; }
.Shopify出品済み { color: #16a34a; font-weight: 700; }
.Shopifyエラーまとめ {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 12px;
  color: #991b1b;
  max-height: 80px;
  overflow-y: auto;
}
.Shopifyエラーまとめ p { margin: 2px 0; }
.Shopify出品ボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.Shopifyキャンセル {
  padding: 8px 20px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  font-size: 13px;
}
.Shopifyキャンセル:hover { background: #f3f4f6; }
.Shopify出品実行ボタン {
  padding: 8px 24px;
  border: none;
  border-radius: 6px;
  background: #65A30D;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}
.Shopify出品実行ボタン:hover { background: #4d7c0f; }
.Shopify出品実行ボタン:disabled {
  background: #a3a3a3;
  cursor: not-allowed;
}

/* ===== 撮影QRコードモーダル ===== */
.撮影QRモーダル {
  background: white;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  position: relative;
  min-width: 320px;
}
.撮影QRモーダル h3 {
  font-size: 16px;
  color: #374151;
  margin-bottom: 4px;
}
.撮影QR管理番号 {
  font-size: 20px;
  font-weight: 700;
  color: #1e3a5f;
  margin-bottom: 12px;
}
.撮影QR画像 {
  width: 280px;
  height: 280px;
  image-rendering: pixelated;
}
.撮影QR説明 {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 8px;
}

/* 撮影用スマホページ：撮影(スキャン開始)/一覧をタブで切り替えて1つずつ表示（別のQRの誤読を防ぐ） */
.スマホページQR切替 {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}
.スマホページQRタブ {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  color: #374151;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.スマホページQRタブ.選択中 {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: white;
}
.スマホページQR項目 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.スマホページQR_URL {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-top: 4px;
  word-break: break-all;
}

/* ===== 請求書作成モーダル（右クリック専用） ===== */

.請求書パネル {
  background: white;
  border-radius: 14px;
  /* 支払い明細が 支払い方法・日付・金額・通貨・円換算・備考 の6列あるので、横に切れないよう広めにとる */
  width: 1280px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.請求書モーダルヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #E5E7EB;
}

.請求書モーダルタイトル {
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

/* 中身が縦に長いときは、この枠ごと縦スクロールする。
   hidden だと入りきらない下のほう（支払い方法など）が見えないまま切れてしまう */
.請求書モーダル本体 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 商品が多いときはこの中だけスクロールする。
   min-height は「商品リストが潰れて消えないように」置いている（0 にすると、
   下のフォームが縦に長いときに高さ0まで縮んで商品が1件も見えなくなる） */
.請求書商品リスト {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow-y: auto;
  flex: 0 1 auto;
  min-height: 120px;
}

.請求書商品表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.請求書商品表 th {
  background: #F9FAFB;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #E5E7EB;
  font-size: 12px;
}

.請求書商品表 td {
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}

.請求書商品表 tbody tr:last-child td {
  border-bottom: none;
}

.請求書商品表 .請求書番号 {
  text-align: center;
  color: #6B7280;
}

.請求書商品表 .請求書管理番号 {
  font-family: 'Yu Gothic', monospace;
  font-size: 12px;
  color: #4B5563;
}

.請求書商品表 .請求書商品名 {
  word-break: break-word;
  line-height: 1.4;
  padding: 4px 6px;
}

/* 御社管理番号（お客様の側の番号。任意・請求書の上だけ） */
.請求書商品表 .請求書御社管理番号 {
  padding: 4px 6px;
}

.請求書御社管理番号入力 {
  width: 100%;
  padding: 5px 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  background: white;
  box-sizing: border-box;
  color: #374151;
}

.請求書御社管理番号入力::placeholder {
  color: #C0C0C0;
}

.請求書御社管理番号入力:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* 英語の請求書の商品名：英語の欄＋（手で直したとき）「戻す」、その下に日本語の商品名を灰色で */
.請求書英語名行 {
  display: flex;
  align-items: center;
  gap: 4px;
}

.請求書英語戻すボタン {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FFFFFF;
  color: #6B7280;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}

.請求書英語戻すボタン:hover {
  background: #F3F4F6;
}

.請求書日本語名 {
  padding: 0 8px 2px;
  font-size: 11px;
  color: #9CA3AF;
  line-height: 1.4;
}

/* 英語の商品名の作り方（AIなし／AIで英訳）。言語が英語のときだけ商品の表の上に出る */
.請求書英語欄 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #FCFCFD;
}

.請求書英語切替行 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.請求書英語題 {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.請求書英語切替 {
  display: inline-flex;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  overflow: hidden;
}

.請求書英語切替ボタン {
  padding: 6px 14px;
  border: none;
  background: #FFFFFF;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.請求書英語切替ボタン + .請求書英語切替ボタン {
  border-left: 1px solid #D1D5DB;
}

.請求書英語切替ボタン:hover {
  background: #F3F4F6;
}

.請求書英語切替ボタン.選択中 {
  background: #4F46E5;
  color: #FFFFFF;
}

.請求書英語状態 {
  margin-left: auto;
  font-size: 12px;
  color: #4F46E5;
  font-weight: 600;
}

.請求書英語説明 {
  font-size: 12px;
  line-height: 1.7;
  color: #6B7280;
}

/* 会社印が読めない・登録が無いときの一言（印なしで発行される） */
.請求書会社印注意 {
  color: #B45309;
}

.請求書商品名入力 {
  width: 100%;
  padding: 5px 8px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  line-height: 1.4;
}

.請求書商品名入力:hover {
  border-color: #E5E7EB;
  background: #FAFAFA;
}

.請求書商品名入力:focus {
  outline: none;
  border-color: #4F46E5;
  background: white;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.請求書商品表 .請求書売値 {
  text-align: right;
  color: #6B7280;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.請求書商品表 .請求書売価 {
  padding: 6px 8px;
}

.請求書売価入力 {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  background: white;
}

.請求書売価入力:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.請求書売価入力.未入力 {
  border-color: #FCA5A5;
  background: #FEF2F2;
}

.請求書商品表 .請求書値段調整 {
  padding: 6px 8px;
}

.請求書値段調整入力 {
  width: 100%;
  padding: 6px 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  text-align: right;
  box-sizing: border-box;
  background: white;
  color: #374151;
}

.請求書値段調整入力::placeholder {
  color: #C0C0C0;
  font-size: 11px;
}

.請求書値段調整入力:focus {
  outline: none;
  border-color: #4F46E5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.請求書商品表 tfoot td {
  background: #F9FAFB;
  padding: 10px 12px;
  font-weight: 700;
  border-top: 1.5px solid #E5E7EB;
}

.請求書合計ラベル {
  text-align: right;
  color: #374151;
}

.請求書合計値 {
  text-align: right;
  color: #1F2937;
  font-size: 14px;
}

.請求書フォーム {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  flex-shrink: 0;
}

/* ===== 請求書作成：中身を白いカードの節に分ける =====
   薄いグレーの地に、商品／請求先・発行情報／追加料金／手数料／支払い明細／請求書に載せるもの を
   1枚ずつ並べる（分析の各タブと同じ考え方）。ほかの画面と共通の部品は .請求書パネル の中だけで上書きする */
.請求書パネル .請求書モーダル本体 {
  background: #F8FAFC;
  gap: 14px;
}

.請求書節 {
  flex-shrink: 0;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.請求書節見出し {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.請求書節題 {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.請求書節補足 {
  font-size: 12px;
  color: #6B7280;
}

/* 決まりごとの説明。読み飛ばされないよう本文と同じ大きさにし、色だけ控えめにする */
.請求書節説明 {
  margin-top: -4px;
  font-size: 13px;
  line-height: 1.75;
  color: #4B5563;
}

.請求書節説明 b { color: #1F2937; }

/* 必須・任意の印は、塗りつぶしの赤より柔らかい丸い札にする */
.請求書パネル .請求書追加料金必須バッジ,
.請求書パネル .請求書追加料金任意バッジ {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.請求書パネル .請求書追加料金必須バッジ { background: #FEE2E2; color: #B91C1C; }
.請求書パネル .請求書追加料金任意バッジ { background: #F3F4F6; color: #6B7280; }

/* 商品が多いときはこの中だけスクロール（見出しの行は残す） */
.請求書パネル .請求書商品リスト {
  max-height: 320px;
  min-height: 0;
}

.請求書パネル .請求書商品表 thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.請求書パネル .請求書フォーム {
  grid-template-columns: repeat(3, 1fr);
}

.請求書パネル .振込先変更欄 {
  margin-top: 0;
  border-radius: 10px;
}

/* 手数料のまとまりはもう節の中なので、上の区切り線は要らない */
.請求書パネル .請求書手数料ブロック {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.請求書パネル .請求書按分プレビュー {
  margin-top: 0;
}

/* --- ＜備考＞（ふだんは自動。「編集」でこの請求書だけ直せる） --- */
.請求書備考枠 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #FCFCFD;
}

.請求書備考見出し行 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.請求書備考題 {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
}

.請求書備考状態 {
  padding: 2px 9px;
  border-radius: 999px;
  background: #F3F4F6;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
}

.請求書備考状態.編集中 {
  background: #FEF3C7;
  color: #B45309;
}

.請求書小ボタン {
  margin-left: auto;
  padding: 5px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #4F46E5;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.請求書小ボタン:hover {
  background: #EEF2FF;
  border-color: #C7D2FE;
}

.請求書備考表示 {
  font-size: 13px;
  line-height: 1.8;
  color: #1F2937;
  font-variant-numeric: tabular-nums;
}

.請求書備考なし {
  font-size: 12px;
  color: #9CA3AF;
}

.請求書備考入力 {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: #FFFFFF;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.7;
  color: #1F2937;
  resize: vertical;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.請求書備考入力:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.請求書備考注記 {
  font-size: 12px;
  color: #6B7280;
}

/* --- 印字する／しないの切り替え（チェックと説明を1枚のカードに） --- */
.請求書印字切替群 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.請求書印字切替 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.請求書印字切替:hover { border-color: #C7D2FE; }

.請求書印字切替:has(input:checked) {
  border-color: #C7D2FE;
  background: #F5F7FF;
}

.請求書印字切替 input {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #4F46E5;
  cursor: pointer;
}

.請求書印字切替文 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.請求書印字切替名 {
  font-size: 13px;
  font-weight: 600;
  color: #1F2937;
}

.請求書印字切替説明 {
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
}

.請求書モーダルボタン群 {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
  background: #F9FAFB;
}

.請求書モーダルボタン群 .精算書生成ボタン {
  flex: 1;
  margin-top: 0;
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

.請求書モーダルボタン群 .精算書CSVボタン {
  padding: 10px 18px;
  border-width: 2px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  box-sizing: border-box;
}

.請求書モーダルボタン群 .請求書確定ボタン {
  padding: 12px 18px;
  border-radius: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 右クリック：請求書作成エントリ */
.コンテキストメニュー button.請求書作成メニュー {
  color: #DB2777;
  font-weight: 600;
}

.コンテキストメニュー button.請求書作成メニュー:hover:not(:disabled) {
  background: #FCE7F3;
}

/* 右クリック：領収書作成エントリ（請求書の下。現金で受け取ったとき） */
.コンテキストメニュー button.領収書作成メニュー {
  color: #9D174D;
  font-weight: 600;
}

.コンテキストメニュー button.領収書作成メニュー:hover:not(:disabled) {
  background: #FCE7F3;
}

.コンテキストメニュー button.請求書作成不可 {
  color: #9CA3AF;
  cursor: not-allowed;
}

/* ===== タグ印刷（右クリックメニュー）：黒寄りの濃い深緑。Shopifyの黄緑(#65A30D)とは別系統 ===== */
.コンテキストメニュー button.タグ印刷メニュー {
  color: #14532D;
  font-weight: 600;
}

.コンテキストメニュー button.タグ印刷メニュー:hover {
  background: #F0FDF4;
}

/* ===== 出品中確認モーダル ===== */
.出品中確認パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.出品中確認ヘッダー {
  padding: 14px 20px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品中確認タイトル {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

.出品中確認本体 {
  padding: 16px 20px;
  overflow-y: auto;
}

.出品中確認チェック {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1F2937;
  cursor: pointer;
  padding: 4px 0;
}

.出品中確認チェック input[type="checkbox"] {
  accent-color: #4F46E5;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.出品中確認区切り {
  height: 1px;
  background: #F3F4F6;
  margin: 12px 0;
}

.出品中確認サブタイトル {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 8px;
}

.出品中確認プラットフォーム一覧 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.出品中確認オプション {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}

.出品中確認オプション:hover {
  background: #F9FAFB;
}

.出品中確認オプション input[type="checkbox"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.出品中確認ドット {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.出品中確認名 {
  flex: 1;
}

.出品中確認フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品中確認デフォルト保存 {
  background: white;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
}

.出品中確認デフォルト保存:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.出品中確認ボタン群 {
  display: flex;
  gap: 8px;
}

.出品中確認キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.出品中確認キャンセル:hover {
  background: #F3F4F6;
}

.出品中確認OK {
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.出品中確認OK:hover {
  background: #4F46E5;
}

/* ===== 決済手数料セル（手入力の印） ===== */
.決済手数料セル {
  display: flex;
  align-items: center;
  height: 36px;
}

.決済手数料テキスト {
  flex: 1;
  min-width: 0;
}

/* 手で入れた額に付く ✎。自動で入った額と見分けるための印 */
.決済手数料手入力印 {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 11px;
  color: #B45309;
  cursor: help;
}

/* ===== 決済手数料の手入力 確認モーダル ===== */
.決済手数料確認パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  max-width: calc(100vw - 48px);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.決済手数料確認ヘッダー {
  padding: 14px 20px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.決済手数料確認タイトル {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

.決済手数料確認本体 {
  padding: 16px 20px;
  overflow-y: auto;
}

.決済手数料確認注意 {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.7;
  color: #78350F;
  margin-bottom: 12px;
}

.決済手数料確認表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.決済手数料確認表 th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  padding: 6px 8px;
  border-bottom: 1px solid #E5E7EB;
  white-space: nowrap;
}

.決済手数料確認表 td {
  padding: 8px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: top;
  color: #1F2937;
}

.決済手数料確認管理番号 {
  font-weight: 600;
}

.決済手数料確認商品名 {
  font-size: 11px;
  color: #6B7280;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.決済手数料確認金額 {
  white-space: nowrap;
}

.決済手数料確認新値 {
  font-weight: 700;
  color: #B45309;
}

.決済手数料確認由来 {
  font-size: 10px;
  color: #9CA3AF;
}

.決済手数料確認旧 {
  color: #9CA3AF;
}

.決済手数料確認矢印 {
  color: #9CA3AF;
  margin: 0 4px;
}

.決済手数料確認省略 {
  font-size: 11px;
  color: #6B7280;
  padding: 6px 8px;
}

.決済手数料確認合計 {
  margin-top: 10px;
  padding: 8px 10px;
  background: #F9FAFB;
  border-radius: 6px;
  font-size: 12px;
  color: #1F2937;
}

.決済手数料確認差額 {
  color: #6B7280;
  margin-left: 4px;
}

.決済手数料確認説明 {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.8;
  color: #4B5563;
}

.決済手数料確認フッター {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.決済手数料確認キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.決済手数料確認キャンセル:hover {
  background: #F3F4F6;
}

.決済手数料確認OK {
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  background: #D97706;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.決済手数料確認OK:hover {
  background: #B45309;
}

/* ===== 出品状況一括変更ダイアログ ===== */
.出品状況一括パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.出品状況一括ヘッダー {
  padding: 14px 20px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品状況一括タイトル {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

.出品状況一括本体 {
  padding: 16px 20px;
  overflow-y: auto;
}

.出品状況一括モード選択 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.出品状況一括モードラベル {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1F2937;
  cursor: pointer;
}

.出品状況一括モードラベル input[type="radio"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.出品状況一括チェック操作 {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  padding-top: 8px;
  border-top: 1px solid #F3F4F6;
}

.出品状況一括小ボタン {
  background: white;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
}

.出品状況一括小ボタン:hover {
  background: #F3F4F6;
  border-color: #9CA3AF;
}

.出品状況一括プラットフォーム一覧 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.出品状況一括オプション {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}

.出品状況一括オプション:hover {
  background: #F9FAFB;
}

.出品状況一括オプション input[type="checkbox"] {
  accent-color: #4F46E5;
  cursor: pointer;
}

.出品状況一括ドット {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.出品状況一括名 {
  flex: 1;
}

.出品状況一括フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.出品状況一括全クリアボタン {
  background: white;
  border: 1.5px solid #FCA5A5;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #DC2626;
  cursor: pointer;
  font-family: inherit;
}

.出品状況一括全クリアボタン:hover {
  background: #FEF2F2;
  border-color: #DC2626;
}

.出品状況一括ボタン群 {
  display: flex;
  gap: 8px;
}

.出品状況一括キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.出品状況一括キャンセル:hover {
  background: #F3F4F6;
}

.出品状況一括OK {
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.出品状況一括OK:hover {
  background: #4F46E5;
}

/* ===== 寸法一括変更ダイアログ ===== */
.寸法一括パネル {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.寸法一括ヘッダー {
  padding: 14px 20px;
  border-bottom: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.寸法一括タイトル {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

.寸法一括本体 {
  padding: 16px 20px;
}

.寸法一括ヒント {
  font-size: 11px;
  color: #6B7280;
  margin-bottom: 10px;
}

.寸法一括行 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.寸法一括ラベル {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  color: #6B7280;
  gap: 4px;
}

.寸法一括input {
  width: 80px;
  padding: 6px 8px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.寸法一括input:focus {
  border-color: #6366F1;
}

.寸法一括記号 {
  align-self: end;
  margin-bottom: 6px;
  color: #9CA3AF;
  font-size: 14px;
}

.寸法一括単位 {
  align-self: end;
  margin-bottom: 6px;
  margin-left: 4px;
  color: #6B7280;
  font-size: 12px;
}

.寸法一括フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.寸法一括全クリアボタン {
  background: white;
  border: 1.5px solid #FCA5A5;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #DC2626;
  cursor: pointer;
  font-family: inherit;
}

.寸法一括全クリアボタン:hover {
  background: #FEF2F2;
  border-color: #DC2626;
}

.寸法一括ボタン群 {
  display: flex;
  gap: 8px;
}

.寸法一括キャンセル {
  padding: 6px 16px;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  background: white;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.寸法一括キャンセル:hover {
  background: #F3F4F6;
}

.寸法一括OK {
  padding: 6px 18px;
  border: none;
  border-radius: 6px;
  background: #6366F1;
  color: white;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.寸法一括OK:hover {
  background: #4F46E5;
}

/* ===== 販売先セルの🎯ボタン（押すと顧客カードが開く） ===== */
.販売先セル {
  display: flex;
  align-items: center;
  height: 36px;
}

.販売先テキスト {
  flex: 1;
  min-width: 0;
}

.販売先情報ボタン {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 24px;
  border-radius: 4px;
  opacity: 0.25;
  filter: grayscale(1);
  transition: opacity 0.15s, filter 0.15s;
}

/* 基本情報が入っている顧客は色付きで目立たせる */
.販売先情報ボタン.入力済み {
  opacity: 0.75;
  filter: none;
}

.販売先情報ボタン:hover {
  opacity: 1;
  filter: none;
  background: rgba(0,0,0,0.06);
}

/* 取引停止のお客様は赤い枠で目立たせる */
.販売先情報ボタン.取引停止 {
  opacity: 1;
  filter: none;
  box-shadow: inset 0 0 0 2px #DC2626;
}


/* チェックボックスセル（輸出）。チェック本体だけがクリック対象で、
   まわりの余白は普通のセルとして選択・右クリック（一括変更）ができる */
.チェックボックスセル {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
}

.チェックボックスセル input {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #2e7d32;
}

/* ===== 月次確定（確定ボタン） ===== */

/* ロック中の行。編集できないことがひと目で分かるよう薄く網掛けする。
   セルの色分け（実効色）は上から背景色を指定するので、そちらが優先される */
.スプレッドシート tr.確定済み行 td {
  background-color: #F6F5F2;
  color: #6B7280;
}

/* 「🔒 確定」列 */
.確定セル {
  color: #92400E;
  font-weight: 600;
  white-space: nowrap;
}

/* 履歴モーダルの「確定後の編集」 */
.確定後説明 {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.6;
}

.確定経路タグ {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #E0E7FF;
  color: #3730A3;
}
.確定経路タグ.shopify { background: #DCFCE7; color: #166534; }

.確定対象月タグ {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #FEF3C7;
  color: #92400E;
}

/* 確定後の編集から、その商品を一覧で探すボタン */
.履歴登録番号.ジャンプ {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: #2563EB;
  cursor: pointer;
  text-decoration: underline;
}
.履歴登録番号.ジャンプ:hover { color: #1D4ED8; }

/* 確定後の編集はヘッダーに4つ並ぶ。space-between だとバラバラに散るので、
   左に寄せて「🔒 対象月」だけ右端に置く */
.履歴項目ヘッダー.確定ヘッダー行 {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
.履歴項目ヘッダー.確定ヘッダー行 .確定対象月タグ { margin-left: auto; }

/* 履歴モーダルの「確定の記録」。
   帳票履歴の薄い灰色のままだと読みにくいので、このタブだけ文字を濃く・少し大きくする。
   解除した確定は薄くせず、「解除済み」ラベルで見分ける */
.確定記録項目 .履歴日時,
.確定記録項目 .帳票商品数,
.確定記録項目 .帳票履歴副行 {
  font-size: 12px;
  color: #374151;
}
.確定解除済みタグ {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  background: #F3F4F6;
  color: #4B5563;
  white-space: nowrap;
}

/* ===== 履歴パネルの絞り込み ===== */

/* 期間の行は入力が細いので、折り返しつつ縦位置をそろえる */
.履歴フィルター行.履歴期間行 {
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0;
}
.履歴フィルター行.履歴期間行 input { flex: 0 0 auto; }
.履歴期間ラベル {
  font-size: 12px;
  color: #6B7280;
  white-space: nowrap;
}
.履歴期間ラベル[title] { cursor: help; }
.履歴期間波 { font-size: 12px; color: #9CA3AF; }

.履歴件数 {
  margin-left: auto;
  font-size: 12px;
  color: #374151;
  font-weight: 600;
  white-space: nowrap;
}

.履歴条件クリア {
  padding: 5px 10px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.履歴条件クリア:hover { background: #F3F4F6; }

/* 確定後の編集の説明 */
.確定後説明 {
  padding: 0 24px 10px;
  font-size: 12px;
  color: #6B7280;
  line-height: 1.7;
}

/* 履歴の期間欄は、絞り込みバーの日付欄と同じ見た目にそろえる
   （文字と📅がひとつの枠に入る。枠は input ではなく外側の欄に付ける） */
.履歴フィルター行 .日付フィルター入力欄 {
  padding: 5px 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
}
.履歴フィルター行 .日付範囲入力 {
  flex: 0 0 auto;
  border: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* 履歴の期間欄は、日付範囲ボタン（絞り込みバーと同じ部品）を並べる */
.履歴フィルター行.履歴期間行 .日付範囲ラッパー { flex: 0 0 auto; }
.履歴期間注記 { font-size: 12px; color: #9CA3AF; cursor: help; }
/* ===== 出品モーダル ===== */

.出品モーダル_オーバーレイ {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  font-family: -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
  color: #2D3748;
}

.出品モーダル_ボックス {
  width: 1480px;
  max-width: 97vw;
  height: 92vh;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.出品モーダル_ヘッダ {
  padding: 14px 20px;
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #f8f0ff 0%, #f0f4ff 100%);
}

.出品モーダル_タイトル {
  font-size: 16px;
  font-weight: 700;
}

.出品モーダル_閉じる {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #6B7280;
  border-radius: 6px;
}

.出品モーダル_閉じる:hover {
  background: rgba(0, 0, 0, 0.06);
}

.出品モーダル_本体 {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1.5fr 1fr;
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

/* Tampermonkeyスクリプト未導入・古い場合の注意バナー */
.出品モーダル_スクリプト警告 {
  margin: 10px 12px 0;
  padding: 8px 12px;
  background: #fff7ed;
  border: 1px solid #fb923c;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: #9a3412;
}

/* ===== 商品リスト ===== */
.出品モーダル_商品リスト {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 8px;
  overflow-y: auto;
  background: #fafafa;
}

.出品モーダル_セクションラベル {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  padding: 4px 6px 8px;
}

.出品モーダル_商品行 {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  transition: background 0.1s;
}

.出品モーダル_商品行:hover {
  background: #f3f4f6;
}

.出品モーダル_商品行.選択中 {
  background: #ede9fe;
  border-color: #7C3AED;
}

.出品モーダル_管理番号 {
  font-size: 13px;
  font-weight: 700;
  color: #4F46E5;
}

.出品モーダル_商品名 {
  font-size: 11px;
  color: #6B7280;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 入力フォーム ===== */
.出品モーダル_入力 {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px;
  overflow-y: auto;
}

.出品モーダル_入力グリッド {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.出品モーダル_ラベル付き {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.出品モーダル_ラベル付き.テキストエリア {
  margin-top: 8px;
}

.出品モーダル_ラベル付き.チェック {
  flex-direction: column;
  align-items: stretch;
}

.出品モーダル_チェック値 {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #ffffff;
  font-size: 13px;
  color: #2D3748;
  cursor: pointer;
}

.出品モーダル_チェック値:hover {
  background: #f9fafb;
}

.出品モーダル_チェック文字 {
  color: #6B7280;
  font-weight: 500;
}

.出品モーダル_ラベル {
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 3px;
}

.出品モーダル_インプット {
  padding: 6px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #2D3748;
  outline: none;
  background: #ffffff;
}

.出品モーダル_インプット:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.出品モーダル_インプット.読取専用 {
  background: #f9fafb;
  color: #6B7280;
}

.出品モーダル_セレクト {
  padding: 6px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #2D3748;
  outline: none;
  background: #ffffff;
  cursor: pointer;
}

.出品モーダル_セレクト:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

.出品モーダル_テキストエリア {
  padding: 8px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #2D3748;
  outline: none;
  background: #ffffff;
  min-height: 60px;
  resize: vertical;
}

.出品モーダル_テキストエリア:focus {
  border-color: #7C3AED;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.12);
}

/* ===== プレビュー ===== */
.出品モーダル_プレビュー {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-height: 0;
}

.出品モーダル_タブ {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.出品モーダル_タブボタン {
  padding: 6px 12px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  color: #6B7280;
}

.出品モーダル_タブボタン.選択中 {
  background: #ede9fe;
  border-color: #7C3AED;
  color: #5B21B6;
  font-weight: 700;
}

.出品モーダル_プレビューテキスト {
  flex: 0 0 280px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 10px;
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 11px;
  resize: none;
  outline: none;
  white-space: pre;
  overflow: auto;
  background: #fafafa;
  color: #2D3748;
  min-height: 0;
}

.出品モーダル_プレビューボタン群 {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* 常時表示の主要アクション（Eコンビニに出品＋商品説明をコピー）。横並びで幅はflexで配分 */
.出品モーダル_アクションバー {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

/* 確認用プレビューの折りたたみトグル */
.出品モーダル_折りたたみトグル {
  width: 100%;
  text-align: left;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #4B5563;
  cursor: pointer;
  margin-bottom: 8px;
}
.出品モーダル_折りたたみトグル:hover {
  background: #E5E7EB;
}

/* ===== カテゴリID表示 ===== */
.出品モーダル_カテゴリID表示 {
  flex: 0 0 280px;
  overflow-y: auto;
  background: #fafafa;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 10px;
}

.出品モーダル_カテゴリブロック {
  margin-bottom: 12px;
}

.出品モーダル_カテゴリブロック:last-child {
  margin-bottom: 0;
}

.出品モーダル_カテゴリヘッダ {
  font-size: 12px;
  font-weight: 700;
  color: #4F46E5;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #E5E7EB;
}

.出品モーダル_カテゴリリスト {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.出品モーダル_カテゴリ行 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: 'Consolas', 'Menlo', monospace;
  padding: 2px 4px;
  border-radius: 4px;
}

.出品モーダル_カテゴリ行:hover {
  background: #f3f4f6;
}

.出品モーダル_カテゴリモール {
  width: 110px;
  color: #6B7280;
  flex-shrink: 0;
}

.出品モーダル_カテゴリID値 {
  flex: 1;
  color: #2D3748;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.出品モーダル_カテゴリコピー {
  padding: 2px 10px;
  font-size: 10px;
  font-family: inherit;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  color: #2D3748;
}

.出品モーダル_カテゴリコピー:hover {
  background: #ede9fe;
  border-color: #7C3AED;
}

.出品モーダル_カテゴリ警告 {
  font-size: 11px;
  color: #DC2626;
  padding: 4px 0;
}

/* ===== 画像カスタマイズ ===== */
.出品モーダル_画像カスタマイズ {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  border-top: 1px solid #E5E7EB;
  padding-top: 10px;
  min-height: 0;
}

.出品モーダル_画像タブ {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-shrink: 0;
  align-items: center;
}

.出品モーダル_画像タブボタン {
  padding: 5px 12px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  color: #6B7280;
}

.出品モーダル_画像タブボタン.選択中 {
  background: #B45309;
  border-color: #B45309;
  color: #ffffff;
}

.出品モーダル_画像タブDLボタン {
  margin-left: auto;
}

.出品モーダル_画像タブDLボタン .出品モーダル_ボタン {
  padding: 5px 12px;
  font-size: 11px;
}

.出品モーダル_画像ヘッダ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.出品モーダル_画像保存ボタン {
  padding: 4px 12px;
  border: 1px solid #B45309;
  background: #ffffff;
  color: #B45309;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.出品モーダル_画像保存ボタン:hover:not(:disabled) {
  background: #FEF6E7;
}

.出品モーダル_画像保存ボタン:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.出品モーダル_画像グリッド {
  flex: 1;
  min-height: 0; /* flex内でスクロールを効かせる（これがないと全行展開して親をはみ出す） */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  grid-auto-rows: 120px; /* 行の高さを固定。aspect-ratioだと枚数が多いとき高さ計算が崩れて重なるため */
  gap: 10px;
  overflow-y: auto;
  padding: 4px;
  background: #fafafa;
  border-radius: 6px;
  align-content: start;
}

.出品モーダル_画像項目 {
  position: relative;
  height: 100%; /* グリッド行(120px)に合わせて固定。重なり防止 */
  border: 2px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
  transition: border-color 0.1s, transform 0.05s;
  user-select: none;
}

.出品モーダル_画像項目 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.出品モーダル_画像項目.選択中 {
  border-color: #B45309;
}

.出品モーダル_画像項目.未選択 {
  opacity: 0.45;
  border-style: dashed;
}

.出品モーダル_画像項目.未選択:hover {
  opacity: 0.8;
  border-color: #B45309;
}

.出品モーダル_画像項目.ドラッグ中 {
  opacity: 0.3;
}

.出品モーダル_画像項目.ドロップ左 {
  box-shadow: -3px 0 0 0 #B45309;
}

.出品モーダル_画像項目.ドロップ右 {
  box-shadow: 3px 0 0 0 #B45309;
}

.出品モーダル_画像TOP {
  position: absolute;
  top: 2px;
  left: 2px;
  background: #B45309;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
}

.出品モーダル_画像番号 {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(180, 83, 9, 0.85);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}

.出品モーダル_画像除外マーク {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(107, 114, 128, 0.85);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
}

/* ===== フッター ===== */
.出品モーダル_フッタ {
  border-top: 1px solid #E5E7EB;
  padding: 12px 20px;
  background: #fafafa;
  position: relative;
}

.出品モーダル_モール選択 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.出品モーダル_モールグループ {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.出品モーダル_モールラベル {
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  flex-shrink: 0;
  margin-right: 4px;
}

.出品モーダル_モールチェック {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.出品モーダル_モールチェック:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* メッセージはフッターの上に浮かせる（レイアウトを押し広げないので画像エリアが縮まない） */
.出品モーダル_メッセージ {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(100% + 6px);
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.出品モーダル_メッセージ:hover {
  background: #fde68a;
}
.出品モーダル_メッセージ_閉じる {
  margin-left: auto;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: #92400e;
}

.出品モーダル_アクション {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.出品モーダル_ボタン {
  padding: 7px 16px;
  border: 1px solid #E5E7EB;
  background: #ffffff;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  color: #2D3748;
  transition: background 0.1s;
}

.出品モーダル_ボタン:hover:not(:disabled) {
  background: #f3f4f6;
}

.出品モーダル_ボタン.アクセント {
  background: #7C3AED;
  border-color: #7C3AED;
  color: #ffffff;
}

.出品モーダル_ボタン.アクセント:hover:not(:disabled) {
  background: #6D28D9;
}

.出品モーダル_ボタン:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.出品モーダル_ヘッダボタン群 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== プルダウン編集モーダル ===== */
.プルダウン編集_オーバーレイ {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.プルダウン編集_ボックス {
  width: 720px;
  max-width: 92%;
  max-height: 86%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.プルダウン編集_ヘッダ {
  padding: 12px 18px;
  border-bottom: 1px solid #E5E7EB;
  background: linear-gradient(90deg, #f8f0ff 0%, #f0f4ff 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.プルダウン編集_タイトル {
  font-size: 15px;
  font-weight: 700;
}

.プルダウン編集_本体 {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.プルダウン編集_項目 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #E5E7EB;
}

.プルダウン編集_項目:last-child {
  border-bottom: none;
}

.プルダウン編集_ラベル {
  font-size: 13px;
  font-weight: 700;
  color: #4F46E5;
}

.プルダウン編集_チップ群 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.プルダウン編集_チップ {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  border: 1px solid #E5E7EB;
}

.プルダウン編集_チップ.デフォルト {
  background: #f3f4f6;
  color: #6B7280;
}

.プルダウン編集_チップ.追加 {
  background: #FEF6E7;
  border-color: #B45309;
  color: #B45309;
}

.プルダウン編集_チップ {
  cursor: grab;
  user-select: none;
}

.プルダウン編集_チップ.ドラッグ中 {
  opacity: 0.35;
}

.プルダウン編集_チップ.ドロップ左 {
  box-shadow: -2px 0 0 0 #B45309;
}

.プルダウン編集_チップ.ドロップ右 {
  box-shadow: 2px 0 0 0 #B45309;
}

.プルダウン編集_削除 {
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #B45309;
  padding: 0 2px;
  margin-left: 2px;
  font-weight: 700;
}

.プルダウン編集_削除:hover {
  color: #DC2626;
}

.プルダウン編集_チップ.デフォルト .プルダウン編集_削除 {
  color: #9CA3AF;
}

.プルダウン編集_チップ.デフォルト .プルダウン編集_削除:hover {
  color: #DC2626;
}

.プルダウン編集_追加行 {
  display: flex;
  gap: 6px;
  align-items: center;
}

.プルダウン編集_入力 {
  flex: 1;
  padding: 5px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

.プルダウン編集_入力:focus {
  border-color: #B45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}

.プルダウン編集_フッタ {
  padding: 10px 18px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #fafafa;
}

/* ===== ID編集モーダル ===== */
.ID編集_セクション {
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 10px 12px;
}

.ID編集_セクションラベル {
  font-size: 13px;
  font-weight: 700;
  color: #4F46E5;
  margin-bottom: 8px;
}

.ID編集_行 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ID編集_行 > span {
  width: 120px;
  flex-shrink: 0;
  font-size: 12px;
  color: #6B7280;
}

.ID編集_行 .出品モーダル_インプット {
  flex: 1;
}

.ID編集_補足 {
  font-size: 11px;
  color: #9CA3AF;
  margin-top: 4px;
  line-height: 1.5;
}

.ID編集_メッセージ {
  font-size: 12px;
  color: #92400e;
  margin-right: auto;
}

/* ===== テンプレ編集モーダル ===== */
.テンプレ編集_ボックス {
  width: 920px;
  max-width: 95%;
}

.テンプレ編集_タブ群 {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #E5E7EB;
}
.テンプレ編集_タブ {
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}
.テンプレ編集_タブ:hover { color: #374151; }
.テンプレ編集_タブ.選択 {
  color: #111827;
  background: white;
  border-color: #E5E7EB;
}

.テンプレ編集_説明 {
  font-size: 12px;
  color: #6B7280;
  background: #f9fafb;
  padding: 8px 12px;
  border-radius: 6px;
  line-height: 1.6;
}

.テンプレ編集_プレースホルダー一覧 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.テンプレ編集_プレースホルダーチップ {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'Consolas', 'Menlo', monospace;
  background: #ede9fe;
  color: #5B21B6;
  border: 1px solid #c4b5fd;
  cursor: help;
}

.テンプレ編集_テキスト {
  flex: 1;
  min-height: 400px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  padding: 12px;
  font-family: 'Consolas', 'Menlo', monospace;
  font-size: 12px;
  outline: none;
  resize: vertical;
  /* HTML は1行が長いので、改行はそのままで折り返して見せる */
  white-space: pre-wrap;
  word-break: break-all;
  background: #ffffff;
  color: #2D3748;
  line-height: 1.6;
}

.テンプレ編集_テキスト:focus {
  border-color: #B45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.12);
}

/* ===== モールに直接出す（ヤフー・楽天・Qoo10。モール連携） ===== */
.出品モーダル_モール補足 {
  font-size: 11.5px;
  color: #6B7280;
}
/* eBay の出品の上限の残り（下のボタンの行の左。ボタンは右に寄せたまま） */
.出品モーダル_eBay残り {
  margin-right: auto;
  align-self: center;
  font-size: 13px;
  color: #1F2937;
  cursor: help;
}
.出品モーダル_eBay残り strong {
  font-weight: 700;
}
.出品モーダル_eBay残り_無い,
.出品モーダル_eBay残り_無い strong {
  color: #B91C1C;
}
.出品モーダル_モール注意 {
  font-size: 11.5px;
  font-weight: 600;
  color: #B45309;
}

/* 「モールに出品」の結果（商品×モールの表） */
.出品モーダル_結果ボックス {
  width: 980px;
}
.出品モーダル_結果進み {
  font-size: 13px;
  color: #374151;
  padding: 8px 12px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}
.出品モーダル_結果進み.動いている {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #92400E;
}
.出品モーダル_結果表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.出品モーダル_結果表 th {
  text-align: left;
  font-size: 11.5px;
  color: #6B7280;
  font-weight: 600;
  padding: 4px 8px;
  border-bottom: 1px solid #E5E7EB;
}
.出品モーダル_結果表 td {
  padding: 5px 8px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: top;
}
.出品モーダル_結果表 a {
  color: #6C5CE7;
  font-weight: 600;
}
.出品モーダル_結果番号 {
  font-weight: 700;
  white-space: nowrap;
}
.出品モーダル_結果文 {
  color: #4B5563;
  overflow-wrap: anywhere;
}
.出品モーダル_結果状態 {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  background: #F3F4F6;
  color: #4B5563;
}
.出品モーダル_結果状態.状態_完了 { background: #DCFCE7; color: #047857; }
.出品モーダル_結果状態.状態_できず { background: #FEE2E2; color: #B91C1C; }
.出品モーダル_結果状態.状態_待ち,
.出品モーダル_結果状態.状態_処理中 { background: #FEF3C7; color: #B45309; }
.出品モーダル_結果注記 {
  font-size: 11.5px;
  color: #6B7280;
}
/* 月初値下げモーダル */
.値下げ_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.値下げ_panel {
  background: #fff;
  width: min(1280px, 92vw);
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.値下げ_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.値下げ_header h2 {
  margin: 0;
  font-size: 17px;
}
.値下げ_header h2 small {
  margin-left: 10px;
  font-size: 12px;
  font-weight: normal;
  color: #6b7280;
}
.値下げ_閉じる {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}
.値下げ_ヘッダー右 {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* ヘッダー右上のスクリプトコピー（初回セットアップ用・控えめな白ボタン） */
.値下げ_ヘッダー右ボタン {
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.値下げ_ヘッダー右ボタン:hover { background: #f9fafb; border-color: #9ca3af; }
/* 注記内の強調（ワサビ＝CSV読込で付与 を目立たせる） */
.値下げ_注記強調 {
  background: #fef2f2;
  color: #b91c1c;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.値下げ_注記赤 { color: #b91c1c; }
.値下げ_閉じる:hover {
  color: #111827;
}

.値下げ_サマリ {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 18px;
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  border-bottom: 1px solid #eef0f2;
}
.値下げ_サマリ b {
  font-size: 15px;
  color: #111827;
}
.値下げ_除外 {
  color: #9ca3af;
}

.値下げ_メッセージ {
  padding: 9px 18px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 13px;
  border-bottom: 1px solid #d1fae5;
}

.値下げ_警告 {
  padding: 9px 18px;
  background: #fffbeb;
  color: #92400e;
  font-size: 12.5px;
  line-height: 1.5;
  border-bottom: 1px solid #fde68a;
}

.値下げ_テーブル枠 {
  overflow: auto;
  flex: 1;
  padding: 0 18px;
}
.値下げ_テーブル {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.値下げ_テーブル thead th {
  position: sticky;
  top: 0;
  background: #f3f4f6;
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e5e7eb;
  z-index: 1;
}
/* 並べ替え可能な見出し（クリックで昇順⇔降順。現在キーには▲▼） */
.値下げ_見出しソート {
  cursor: pointer;
  user-select: none;
}
.値下げ_見出しソート:hover {
  background: #e5e7eb;
}
.値下げ_ソート印 {
  display: inline-block;
  min-width: 10px;
  margin-left: 4px;
  font-size: 10px;
  color: #2563eb;
}
.値下げ_テーブル tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f2f4;
  white-space: nowrap;
}
.値下げ_テーブル tbody tr:hover {
  background: #f8fafc;
}
.値下げ_未選択行 {
  opacity: 0.45;
}
.値下げ_商品名 {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.値下げ_日付 {
  color: #6b7280;
}
.値下げ_番号コピー {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.値下げ_番号コピー:hover {
  color: #2563eb;
  text-decoration: underline;
}
.値下げ_コピー済 {
  margin-left: 4px;
  color: #16a34a;
  font-weight: 700;
}
.値下げ_数値 {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.値下げ_新売値 {
  font-weight: 700;
  color: #b91c1c;
}
.値下げ_差額 {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: normal;
  color: #9ca3af;
}
.値下げ_出品先 {
  display: flex;
  gap: 4px;
}
.値下げ_バッジ {
  display: inline-block;
  min-width: 18px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.値下げ_バッジ.E {
  background: #2563eb;
}
.値下げ_バッジ.W {
  background: #16a34a;
}
.値下げ_空 {
  text-align: center;
  color: #9ca3af;
  padding: 28px 0;
}

.値下げ_フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.値下げ_適用 {
  background: #b91c1c;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.値下げ_適用:hover:not(:disabled) {
  background: #991b1b;
}
.値下げ_適用:disabled {
  background: #9ca3af;
  cursor: default;
}
.値下げ_出力群 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* ボタンとファイル読込ラベルを完全に同じ見た目に統一（font:inherit でフォント差をなくす） */
.値下げ_出力群 button,
.値下げ_読込ラベル {
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.値下げ_出力群 button:hover:not(:disabled),
.値下げ_読込ラベル:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
.値下げ_出力群 button:disabled {
  color: #9ca3af;
  background: #fafafa;
  cursor: default;
}
/* 自動化ボタン（ワサビに送る／Eコンビニで一括値下げ）を目立たせる */
.値下げ_出力群 button.主要,
.値下げ_読込ラベル.主要 {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
  font-weight: 700;
}
.値下げ_出力群 button.主要:hover:not(:disabled),
.値下げ_読込ラベル.主要:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}
.値下げ_出力群 button.主要:disabled {
  background: #fafafa;
  border-color: #d1d5db;
  color: #9ca3af;
  font-weight: 400;
}

.値下げ_注記 {
  margin: 0;
  padding: 11px 18px 14px;
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.55;
  border-top: 1px solid #f1f2f4;
  background: #fcfcfd;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.値下げ_注記行 {
  display: flex;
  gap: 9px;
  align-items: baseline;
}
.値下げ_注記見出し {
  flex: none;
  min-width: 74px;
  font-weight: 700;
  color: #475569;
  background: #eef1f5;
  border-radius: 4px;
  padding: 2px 7px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.値下げ_注記 b {
  color: #374151;
  font-weight: 600;
}

/* ===== Eコンビニの値下げ（クラウドで処理する予約の様子） ===== */
.値下げ_Eチェック {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  user-select: none;
}
.値下げ_Eチェック small {
  color: #6b7280;
  font-size: 11.5px;
}
.値下げ_E様子 {
  padding: 10px 18px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
  font-size: 12.5px;
  color: #374151;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 32vh;
  overflow: auto;
}
.値下げ_E様子_見出し {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.値下げ_E様子_見出し > b {
  font-size: 13.5px;
  color: #111827;
}
.値下げ_E様子_薄い {
  color: #6b7280;
}
.値下げ_E様子_件数 {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.値下げ_E様子_チップ {
  background: #eef1f5;
  color: #374151;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
}
.値下げ_E様子_チップ.緑 { background: #dcfce7; color: #166534; }
.値下げ_E様子_チップ.赤 { background: #fee2e2; color: #991b1b; }
.値下げ_E様子_ボタン群 {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
}
.値下げ_E様子_ボタン群 button,
.値下げ_E様子_手で button {
  font: inherit;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}
.値下げ_E様子_ボタン群 button:hover:not(:disabled),
.値下げ_E様子_手で button:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #9ca3af;
}
.値下げ_E様子_ボタン群 button.主 {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  font-weight: 700;
}
.値下げ_E様子_ボタン群 button:disabled {
  color: #9ca3af;
  cursor: default;
}
.値下げ_E様子_止め {
  background: #fef3c7;
  color: #92400e;
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 700;
}
.値下げ_E様子_止め文 {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1.5;
}
.値下げ_E様子_知らせ {
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  color: #065f46;
  border-radius: 6px;
  padding: 6px 10px;
}
.値下げ_E様子_詳しく summary {
  cursor: pointer;
  font-weight: 600;
  color: #1f2937;
}
.値下げ_E様子_詳しく ul {
  margin: 6px 0 2px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.値下げ_E様子_詳しく li b {
  margin-right: 8px;
}
.値下げ_E様子_一行 {
  display: block;
  color: #4b5563;
  padding-left: 2px;
}
.値下げ_E様子_手で {
  margin-top: 6px;
}
/* Shopifyセール設定（毎月の自動セールのカスタマイズ）
   見た目は月初値下げモーダルにそろえてある。 */

.セール_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.セール_panel {
  background: #fff;
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.セール_panel細 { width: min(520px, 92vw); }
.セール_panel中  { width: min(760px, 94vw); }

.セール_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}
.セール_header h2 {
  margin: 0;
  font-size: 17px;
}
.セール_header h2 small {
  margin-left: 10px;
  font-size: 12px;
  font-weight: normal;
  color: #6b7280;
}
.セール_閉じる {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
}
.セール_閉じる:hover:not(:disabled) { color: #111827; }
.セール_閉じる:disabled { color: #d1d5db; cursor: default; }

.セール_メッセージ {
  padding: 9px 18px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 13px;
  border-bottom: 1px solid #d1fae5;
}

.セール_案内 {
  padding: 22px 20px;
  font-size: 13px;
  line-height: 1.7;
  color: #4b5563;
}
.セール_案内 p { margin: 0 0 10px; }
.セール_案内 p:last-child { margin-bottom: 0; }

.セール_失敗一覧 {
  margin-top: 4px;
  max-height: 120px;
  overflow: auto;
  font-size: 11.5px;
  line-height: 1.5;
  color: #b91c1c;
}

/* ===== 本文 ===== */
.セール設定_本文 {
  overflow: auto;
  flex: 1;
  padding: 4px 18px 8px;
}

.セール設定_章 {
  padding: 14px 0;
  border-bottom: 1px solid #f1f2f4;
}
.セール設定_章:last-child { border-bottom: none; }
.セール設定_章 h3 {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: #111827;
}

.セール設定_行 {
  display: grid;
  grid-template-columns: 190px 150px 1fr;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.セール設定_ラベル {
  font-size: 13px;
  color: #374151;
}
.セール設定_入力 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.セール設定_入力 input {
  font: inherit;
  font-size: 13px;
  width: 86px;
  padding: 5px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.セール設定_入力 input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.セール設定_単位 {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}
.セール設定_説明 {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.5;
}

.セール設定_切替 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  padding: 4px 0;
}

.セール設定_見本 {
  margin-top: 8px;
  padding: 9px 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 7px;
  font-size: 12.5px;
  color: #075985;
  line-height: 1.6;
}
.セール設定_見本 b { color: #0c4a6e; }

.セール設定_補足 {
  margin-top: 8px;
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.6;
}
.セール設定_補足 b { color: #374151; }

/* 今の状況 ― 数字は3つのカードに分けて、ひと目で読めるようにする */
.セール設定_状況 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 2px;
}
.セール設定_状況カード {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.セール設定_状況カード.失敗あり {
  background: #fef2f2;
  border-color: #fecaca;
}
.セール設定_状況ラベル {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.2;
}
.セール設定_状況数 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.セール設定_状況数 small {
  font-size: 11.5px;
  font-weight: normal;
  color: #6b7280;
  margin-left: 3px;
}
.セール設定_状況カード.失敗あり .セール設定_状況数 { color: #b91c1c; }

.セール設定_状況文 {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #4b5563;
  line-height: 1.6;
}
.セール設定_状況文 b { color: #111827; }

/* やり直しボタンと、その説明を横に並べる（縦に積むと詰まって見えるため） */
.セール設定_やり直し行 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.セール設定_やり直し行 .セール設定_説明 { flex: 1; min-width: 220px; }

.セール設定_やり直し {
  font: inherit;
  font-size: 12.5px;
  line-height: 1.2;
  padding: 7px 13px;
  border-radius: 7px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}
.セール設定_やり直し:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; }
.セール設定_やり直し:disabled { color: #9ca3af; background: #fafafa; cursor: default; }

/* ===== フッター ===== */
.セール_フッター {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.セール_適用 {
  background: #1d4ed8;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.セール_適用:hover:not(:disabled) { background: #1e40af; }
.セール_適用:disabled { background: #9ca3af; cursor: default; }

.セール_出力群 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.セール_出力群 button {
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.セール_出力群 button:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; }
.セール_出力群 button:disabled { color: #9ca3af; background: #fafafa; cursor: default; }
/* 経過ステータス（商品一覧の列のボタン・チェック一覧・まとめてチェック・設定） */

/* --- 一覧の列（写真ボタンと同じく、押すとチェック一覧が開く） --- */
/* セルいっぱいを押せる場所にして、中身はまん中にそろえる */
.経過セル {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 24px; box-sizing: border-box;
  padding: 0 4px; border-radius: 6px;
  cursor: pointer; transition: background 0.12s;
}
.経過セル:hover { background: #F3F4F6; }

/* 今の段階の札。ふだんは藍、値下げ系（⑫⑮⑲）は琥珀、業者オークション（⑱⑳）は赤みの色 */
.経過札 {
  display: inline-block; max-width: 100%; box-sizing: border-box;
  padding: 2px 10px; border-radius: 999px;
  background: #EEF2FF; color: #3730A3;
  font-size: 11.5px; font-weight: 600; line-height: 1.55; letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.12s;
}
.経過セル:hover .経過札 { background: #E0E7FF; }
.経過札.値下げ { background: #FEF3C7; color: #92400E; }
.経過セル:hover .経過札.値下げ { background: #FDE68A; }
.経過札.処分 { background: #FFE4E6; color: #9F1239; }
.経過セル:hover .経過札.処分 { background: #FECDD3; }

/* チェックが1つも無いとき：薄い「—」だけ。マウスを乗せたときだけ「＋ チェック」 */
.経過空 { color: #D1D5DB; }
.経過空_乗せたとき { display: none; color: #4F46E5; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.経過セル:hover .経過空 { display: none; }
.経過セル:hover .経過空_乗せたとき { display: inline; }

/* --- モーダル共通 --- */
.経過一覧モーダル, .経過まとめてモーダル, .経過設定モーダル { position: relative; }
.経過一覧モーダル { width: 420px; }
.経過まとめてモーダル { width: 520px; }
.経過設定モーダル { width: 760px; }
.経過閉じるボタン {
  position: absolute; top: 12px; right: 14px;
  border: none; background: none; font-size: 20px; line-height: 1; color: #9CA3AF; cursor: pointer;
}
.経過閉じるボタン:hover { color: #374151; }

/* --- 1商品のチェック一覧 --- */
.経過一覧モーダル .発送設定見出し { margin-bottom: 2px; }
.経過商品名 { font-size: 12.5px; color: #6B7280; margin-bottom: 10px; }

/* 何段階済んだか */
.経過進み { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.経過進みバー { flex: 1; height: 6px; border-radius: 999px; background: #EEF2FF; overflow: hidden; }
.経過進みバー > div { height: 100%; border-radius: 999px; background: #6366F1; transition: width 0.2s; }
.経過進み数 { flex: none; font-size: 12px; font-weight: 600; color: #4F46E5; font-variant-numeric: tabular-nums; }

.経過段階リスト {
  display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px;
  padding: 4px; border: 1px solid #F1F2F4; border-radius: 10px;
}
.経過段階行 {
  display: flex; align-items: center; gap: 9px;
  padding: 3px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; color: #4B5563;
  transition: background 0.1s;
}
.経過段階行:hover { background: #F9FAFB; }
.経過段階行 input { margin: 0; cursor: pointer; accent-color: #4F46E5; }
.経過段階行.値下げ input { accent-color: #D97706; }
.経過段階行.処分 input { accent-color: #E11D48; }
.経過段階行.済み { background: #F5F7FF; color: #1F2937; font-weight: 600; }
.経過段階行.値下げ.済み { background: #FFFBEB; }
.経過段階行.処分.済み { background: #FFF1F2; }
.経過段階名 { flex: 1; min-width: 0; }
.経過段階日付 {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: #6B7280; font-variant-numeric: tabular-nums;
}
.経過自動札 {
  display: inline-flex; align-items: center; padding: 0 5px; border-radius: 4px;
  background: #E0E7FF; color: #3730A3; font-size: 10.5px; font-weight: 700; line-height: 1.6;
}

/* --- まとめてチェック --- */
.経過まとめて行 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: #374151; }
/* 段階の選択は1行目いっぱいに、付ける／外すは2行目に並べる */
.経過まとめて行 select { width: 100%; padding: 6px 8px; border: 1.5px solid #D1D5DB; border-radius: 8px; font-size: 13px; }
.経過まとめて行 label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* --- 設定 --- */
.経過設定リスト { display: flex; flex-direction: column; gap: 6px; }
.経過設定行 { border: 1px solid #E5E7EB; border-radius: 10px; padding: 8px 10px; background: #fff; }
.経過設定行.自動あり { border-color: #C7D2FE; background: #F8FAFF; }
.経過設定上 { display: flex; align-items: center; gap: 8px; }
.経過設定名前 {
  flex: 1; min-width: 0; padding: 5px 8px; border: 1.5px solid #E5E7EB; border-radius: 7px; font-size: 13px;
}
.経過設定種類 { width: 300px; padding: 5px 8px; border: 1.5px solid #D1D5DB; border-radius: 7px; font-size: 12.5px; }
.経過設定開閉 {
  flex: none; padding: 4px 10px; border: 1.5px solid #D1D5DB; border-radius: 7px; background: #fff;
  font-size: 12px; color: #374151; cursor: pointer;
}
.経過設定開閉:hover { border-color: #2563EB; color: #2563EB; }
.経過設定要約 { margin-top: 5px; font-size: 12px; color: #4F46E5; }
.経過設定行 .発送設定カテゴリ { margin-top: 8px; }
.経過販売先候補 { max-height: 180px; overflow-y: auto; }
.経過販売先検索 {
  margin-top: 8px; width: 260px; padding: 5px 8px; border: 1.5px solid #D1D5DB; border-radius: 7px; font-size: 12.5px;
}
.経過条件補足 { margin-top: 6px; font-size: 12px; color: #6B7280; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- 絞り込み（段階ごとに 済み／まだ） --- */
.経過フィルターポップ { min-width: 300px; }
.経過フィルター行 { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; font-size: 12.5px; }
.経過フィルター行.選択中 { background: #EFF6FF; }
.経過フィルター名 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.経過フィルター行 button {
  flex: none; padding: 1px 8px; border: 1px solid #D1D5DB; border-radius: 6px; background: #fff;
  font-size: 11.5px; color: #6B7280; cursor: pointer;
}
.経過フィルター行 button:hover { border-color: #2563EB; color: #2563EB; }
.経過フィルター行 button.選択中 { border-color: #2563EB; background: #2563EB; color: #fff; }
/* DB入力日報（ホワイトボード「DB入力」の表）。枠とフッターのボタンは .発送設定モーダル（商品一覧画面.css）を使い、足りない分だけここに書く。
   段ごとに、済が前に届いたら緑・届いていなければ赤（到着待ちと、前が空の段は灰色） */
.日報モーダル { width: 920px; position: relative; padding: 24px 28px 20px; background: #FAFBFC; }
.日報閉じるボタン {
  position: absolute; top: 14px; right: 18px;
  border: none; background: none; font-size: 24px; line-height: 1; color: #9CA3AF; cursor: pointer;
}
.日報閉じるボタン:hover { color: #374151; }
.日報題 { font-size: 20px; font-weight: 800; color: #111827; letter-spacing: 0.01em; }
.日報副題 { font-size: 13px; color: #4B5563; margin: 4px 0 12px; line-height: 1.6; }
.日報副題 b { color: #111827; }

/* 日付（‹ 11月5日（木） ›） */
.日報日付行 {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 8px 12px; margin-bottom: 10px;
}
.日報矢印 {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid #E5E7EB; background: #fff;
  font-size: 22px; line-height: 1; color: #374151; cursor: pointer; padding-bottom: 3px;
}
.日報矢印:hover { background: #F3F4F6; border-color: #D1D5DB; }
.日報日付大 {
  display: flex; align-items: center; gap: 8px; min-width: 190px; justify-content: center;
  font-size: 22px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums;
}
.日報今日札 {
  font-size: 11.5px; font-weight: 700; color: #1D4ED8; background: #DBEAFE;
  padding: 3px 8px; border-radius: 999px; letter-spacing: 0.04em;
}
.日報日付右 { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.日報日付 { width: 150px; }
.日報ボタン {
  padding: 7px 14px; border: 1.5px solid #D1D5DB; border-radius: 9px; background: #fff;
  font-size: 13.5px; font-weight: 600; color: #374151; cursor: pointer; white-space: nowrap;
}
.日報ボタン:hover:not(:disabled) { border-color: #2563EB; color: #2563EB; }
.日報ボタン:disabled { opacity: 0.6; cursor: default; }

/* 達成 ◯ / ◯ 段 */
.日報まとめ {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 10px 16px; margin-bottom: 10px;
}
.日報まとめ数 { font-size: 15px; font-weight: 700; color: #374151; white-space: nowrap; }
.日報まとめ数 b { font-size: 26px; color: #15803D; margin: 0 2px; font-variant-numeric: tabular-nums; }
.日報まとめ分母 { color: #6B7280; font-weight: 600; }
.日報まとめバー { flex: 1; height: 10px; border-radius: 999px; background: #FEE2E2; overflow: hidden; }
.日報まとめバー > div { height: 100%; border-radius: 999px; background: #22C55E; transition: width 0.3s; }
.日報まとめ空 { flex: 1; font-size: 13.5px; color: #6B7280; }
.日報凡例 { display: flex; gap: 12px; font-size: 12.5px; color: #4B5563; white-space: nowrap; }
.日報凡例 span { display: inline-flex; align-items: center; gap: 5px; }
.日報凡例点 { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.日報凡例点.緑 { background: #22C55E; }
.日報凡例点.赤 { background: #EF4444; }
.日報凡例点.灰 { background: #D1D5DB; }

.日報エラー {
  margin-bottom: 12px; padding: 9px 14px; border-radius: 10px;
  background: #FEF2F2; color: #B91C1C; font-size: 13.5px; border: 1px solid #FECACA;
}

/* 段の行（見出しと同じ列の幅） */
.日報見出し行, .日報行 {
  display: grid; grid-template-columns: 200px 112px 112px 1fr; gap: 14px; align-items: center;
}
.日報見出し行 {
  padding: 0 16px 6px 19px; font-size: 12.5px; font-weight: 700; color: #6B7280;
}
.日報見出し行 span:nth-child(2), .日報見出し行 span:nth-child(3) { text-align: center; }
.日報行群 { display: flex; flex-direction: column; gap: 6px; }
.日報行 {
  background: #fff; border: 1px solid #E5E7EB; border-left: 5px solid #D1D5DB;
  border-radius: 12px; padding: 5px 16px 5px 14px; transition: background 0.15s, border-color 0.15s;
}
.日報_達成 { border-left-color: #22C55E; background: #F6FDF8; }
.日報_未達 { border-left-color: #EF4444; background: #FFF8F8; }

.日報段 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.日報段名 { font-size: 16.5px; font-weight: 700; color: #111827; white-space: nowrap; }
.日報ⓘ {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #CBD5E1;
  font-size: 10.5px; font-weight: 700; font-style: italic; color: #94A3B8; cursor: help; outline: none;
}
.日報ⓘ:hover, .日報ⓘ:focus { border-color: #2563EB; color: #2563EB; }
.日報ⓘ吹き出し {
  display: none; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 300px; padding: 9px 12px; border-radius: 10px;
  background: #1F2937; color: #F9FAFB; font-size: 12.5px; font-weight: 500; font-style: normal; line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.日報ⓘ:hover .日報ⓘ吹き出し, .日報ⓘ:focus .日報ⓘ吹き出し { display: block; }

.日報マス { display: flex; justify-content: center; }
.日報入力 {
  width: 100px; height: 42px; padding: 0 8px; box-sizing: border-box;
  border: 1.5px solid #D1D5DB; border-radius: 10px; background: #fff;
  font-size: 21px; font-weight: 700; color: #111827; text-align: center;
  font-variant-numeric: tabular-nums;
}
.日報入力:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.日報入力::placeholder { color: #D1D5DB; font-weight: 400; }

/* 自動で数えた「済」。入力欄と同じ大きさの札。達成で緑・未達で赤 */
.日報自動 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100px; height: 42px; box-sizing: border-box; border-radius: 10px;
  background: #F1F5F9; color: #1E293B;
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.日報_達成 .日報自動 { background: #DCFCE7; color: #15803D; }
.日報_未達 .日報自動 { background: #FEE2E2; color: #B91C1C; }
/* 済を手で入れる段（顧客要望写真）は、入力欄の枠と文字に色を付ける */
.日報_達成 .日報マス:nth-child(3) .日報入力 { border-color: #86EFAC; color: #15803D; }
.日報_未達 .日報マス:nth-child(3) .日報入力 { border-color: #FCA5A5; color: #B91C1C; }

.日報進み { display: flex; align-items: center; gap: 12px; min-width: 0; }
.日報バー { flex: 1; height: 10px; border-radius: 999px; background: #EEF1F5; overflow: hidden; }
.日報バー > div { height: 100%; border-radius: 999px; transition: width 0.3s; }
.日報_達成 .日報バー > div { background: #22C55E; }
.日報_未達 .日報バー > div { background: #EF4444; }
.日報札 {
  flex: none; min-width: 84px; text-align: center; padding: 5px 10px; border-radius: 999px;
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.日報_達成 .日報札 { background: #DCFCE7; color: #15803D; }
.日報_未達 .日報札 { background: #FEE2E2; color: #B91C1C; }
.日報補足 { font-size: 12.5px; color: #9CA3AF; }

.日報注記 { margin-top: 12px; font-size: 12.5px; color: #4B5563; }
/* 商品一覧で売却済みにするときの3択の確認（売却済みの確認モーダル.tsx） */

/* 右クリックメニューや他の画面より前に出す */
.モーダル背景.売却確認背景 { z-index: 1400; }

.売却確認パネル {
  background: white;
  border-radius: 14px;
  width: 560px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.売却確認ヘッダー {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #E5E7EB;
}

.売却確認タイトル {
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
}

.売却確認本文 {
  padding: 16px 20px;
  overflow-y: auto;
  font-size: 13px;
  color: #374151;
  line-height: 1.6;
}

.売却確認見出し {
  font-weight: 600;
  margin-bottom: 6px;
}

.売却確認明細 {
  margin: 0 0 12px;
  padding-left: 20px;
}

.売却確認明細 li + li {
  margin-top: 4px;
}

.売却確認注意 {
  font-size: 12px;
  color: #92400E;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 8px 10px;
}

.売却確認ボタン群 {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #E5E7EB;
  background: #F9FAFB;
}

.売却確認余白 { flex: 1; }

.売却確認ボタン群 button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #D1D5DB;
  background: white;
  color: #374151;
}

/* ボタンの下の小さい説明（何が起きるか） */
.売却確認ボタン群 button span {
  font-size: 11px;
  font-weight: 400;
}

.売却確認ボタン群 button:hover { background: #F3F4F6; }

.売却確認ボタン群 .売却確認はい {
  background: #6C5CE7;
  border-color: #6C5CE7;
  color: white;
}

.売却確認ボタン群 .売却確認はい:hover { background: #5A4BD1; }
/* 手数料編集の「請求書の手数料」タブ（請求書の手数料設定.tsx）。
   率の入力欄・単位・上の注記は、販売先の手数料率と同じ部品（商品一覧画面.css の 手数料入力・手数料単位・手数料注記）を使う */

.請求手数料_枠 {
  overflow-y: auto;
  padding: 12px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.請求手数料_読込中 {
  font-size: 13px;
  color: #6B7280;
}

.請求手数料_見出し {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: #1F2937;
}

.請求手数料_説明 {
  font-size: 12px;
  line-height: 1.6;
  color: #6B7280;
  margin-bottom: 2px;
}

.請求手数料_空 {
  font-size: 12px;
  color: #9CA3AF;
}

.請求手数料_行 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.請求手数料_決済の行 {
  border-bottom: 1px solid #F3F4F6;
}

.請求手数料_名前入力 {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  outline: none;
  transition: border-color 0.2s;
}

.請求手数料_名前入力:focus,
.請求手数料_英語名入力:focus {
  border-color: #6366F1;
}

/* 英語名（日本語以外の請求書の備考に出す名前） */
.請求手数料_英語名入力 {
  width: 190px;
  padding: 4px 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  font-size: 12px;
  color: #374151;
  outline: none;
  transition: border-color 0.2s;
}

/* 外貨交換は名前を直せないので、入力欄の代わりに名前だけ出す */
.請求手数料_固定名 {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  font-size: 13px;
  color: #374151;
}

.請求手数料_削除 {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #9CA3AF;
  font-size: 13px;
  cursor: pointer;
}

.請求手数料_削除:hover:not(:disabled) {
  background: #FEE2E2;
  color: #DC2626;
}

.請求手数料_ボタン {
  padding: 5px 12px;
  border: 1.5px solid #C7D2FE;
  border-radius: 6px;
  background: #EEF2FF;
  color: #4338CA;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.請求手数料_ボタン:hover:not(:disabled) {
  background: #E0E7FF;
}

.請求手数料_ボタン:disabled,
.請求手数料_削除:disabled {
  opacity: 0.5;
  cursor: default;
}

.請求手数料_追加行 {
  padding-top: 6px;
}

.請求手数料_エラー {
  padding: 6px 10px;
  border: 1px solid #FCA5A5;
  border-radius: 6px;
  background: #FEF2F2;
  color: #B91C1C;
  font-size: 12px;
}

/* 手数料編集モーダルの上のタブ（販売先の手数料率／請求書の手数料） */
.手数料編集タブ群 {
  display: flex;
  gap: 4px;
  padding: 10px 18px 0;
  border-bottom: 1px solid #E5E7EB;
}

.手数料編集タブ {
  padding: 7px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  cursor: pointer;
}

.手数料編集タブ.選択中 {
  color: #4F46E5;
  border-bottom-color: #4F46E5;
}
/* 連携ショップ設定。枠・見出し・ボタンは撮影済み切替設定や記入漏れチェック設定と同じ部品
   （.発送設定モーダル・.記入漏れルール など。商品一覧画面.css）を使い、足りない分だけここに書く。 */

.連携ショップ_公開先 { width: 100%; }

.連携ショップ_注記 {
  font-size: 11.5px;
  color: #6B7280;
  margin-top: 6px;
  line-height: 1.5;
}

.連携ショップ_写真条件 { margin-top: 8px; }

.連携ショップ_在庫連携 {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #E5E7EB;
}

.連携ショップ_販売先 {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
}

.連携ショップ_エラー {
  font-size: 12px;
  color: #B91C1C;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0;
  line-height: 1.5;
}

.連携ショップ_メッセージ {
  font-size: 12.5px;
  color: #1E40AF;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 12px;
  line-height: 1.6;
  white-space: pre-line;
}
/* 連携出品元の設定。枠・見出し・ボタンは連携ショップ設定と同じ部品（.発送設定モーダル・.記入漏れルール・.連携ショップ_*）を使い、
   足りない分だけここに書く。 */


.連携出品元_並び {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  margin-top: 4px;
}
.連携出品元_並び label { font-size: 12.5px; color: #374151; }
.連携出品元_短い { width: 80px; }

.連携出品元_コレクション {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  max-height: 110px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 4px;
}
.連携出品元_コレクション項目 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #374151;
}

.連携出品元_下 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.連携出品元_パスワード {
  border: 1px solid #BBF7D0;
  background: #F0FDF4;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 12px;
}
.連携出品元_パスワード見出し { font-size: 12px; font-weight: 600; color: #166534; margin-bottom: 6px; }
.連携出品元_パスワード行 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.連携出品元_URL { font-size: 12.5px; color: #374151; }
.連携出品元_パスワード値 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  background: #fff;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 2px 10px;
  user-select: all;
}
/* 連携出品の商品タブ（他社が載せた商品の値段を直す）。枠・ボタン・メッセージは連携ショップ設定と同じ部品を使い、表だけここに書く */

.連携出品の商品_枠 {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
}
.連携出品の商品_表 { width: 100%; border-collapse: collapse; font-size: 12.5px; color: #1F2937; }
.連携出品の商品_表 th {
  position: sticky; top: 0;
  background: #F9FAFB;
  font-size: 11.5px; font-weight: 600; color: #6B7280;
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #E5E7EB;
}
.連携出品の商品_表 td { padding: 6px 10px; border-bottom: 1px solid #F3F4F6; vertical-align: middle; }
.連携出品の商品_表 .数 { text-align: right; white-space: nowrap; }
.連携出品の商品_表 td.写真 { width: 48px; }
.連携出品の商品_表 td.写真 img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.連携出品の商品_番号 { font-weight: 700; }
.連携出品の商品_補足 { font-size: 11px; color: #6B7280; margin-top: 2px; }
.連携出品の商品_値段 {
  width: 110px;
  text-align: right;
  padding: 4px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
}
.連携出品の商品_操作 { white-space: nowrap; }
.連携出品の商品_操作 button + button { margin-left: 6px; }
/* 他社との連携（連携ショップ・連携出品元のタブ）。枠・見出しは .発送設定モーダル（商品一覧画面.css）。
   タブの見た目は分析の期間タブ（.分析期間タブ）にそろえる。 */

.他社連携設定モーダル { width: 1000px; }

/* 左に一覧・右に選んだ1件の設定（ショップや会社が増えても、右は1件ぶんだけ） */
.他社連携_二画面 {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 16px;
  align-items: start;
}

.他社連携_一覧 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 0;
}

.他社連携_検索 {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 13px;
}

.他社連携_一覧行たち {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
}

.他社連携_一覧行 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.他社連携_一覧行:hover:not(.選択中) { background: #F9FAFB; }
.他社連携_一覧行.選択中 { border-color: #4F46E5; background: #EEF2FF; }
.他社連携_一覧行.無効 { opacity: 0.6; }

.他社連携_一覧名 { font-size: 13px; font-weight: 700; color: #1F2937; }
.他社連携_未保存 { color: #F59E0B; font-size: 10px; margin-left: 6px; }

.他社連携_一覧補足 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #6B7280;
}

.他社連携_札 { font-size: 10.5px; padding: 0 6px; border-radius: 999px; }
.他社連携_札.緑 { background: #DCFCE7; color: #166534; }
.他社連携_札.赤 { background: #FEE2E2; color: #991B1B; }
.他社連携_札.灰 { background: #F3F4F6; color: #4B5563; }

.他社連携_中身 { min-width: 0; }

.他社連携_タブ群 {
  display: flex;
  background: #F3F4F6;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin: 8px 0 14px;
}

.他社連携_タブ {
  flex: 1;
  padding: 7px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
  border-radius: 8px;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: inherit;
}

.他社連携_タブ.選択中 {
  background: white;
  color: #4F46E5;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.他社連携_タブ:hover:not(.選択中) {
  color: #374151;
  background: rgba(0,0,0,0.03);
}

.他社連携_タブ補足 {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  margin-left: 6px;
}
/* ===== 顧客マスタ（顧客画面・顧客カード・顧客基本情報フォーム） =====
   見た目は分析の処分市場タブ（白いセクション・KPIカード）と請求書の白いカード節にそろえる */

/* ---------- 入力フォーム ---------- */
.顧客フォーム {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.顧客フォーム.保存中 { cursor: progress; }

/* 来客タブの「◯◯の情報」の中では、枠の中にさらに枠が並んで重たく見えないよう、節の枠を外す */
.顧客フォーム.簡易 { gap: 14px; }
.顧客フォーム.簡易 .顧客節 {
  background: transparent;
  border: none;
  padding: 0;
}
.顧客フォーム.簡易 .顧客節見出し {
  margin-bottom: 6px;
  font-size: 12px;
  color: #6B7280;
}

.顧客節 {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.顧客節見出し {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  letter-spacing: 0.3px;
}

/* 顧客カードの幅で4列（WhatsApp・Instagram・Facebook・Whatnot が1行に並ぶ）。来客タブの狭い枠では列が減る */
.顧客項目群 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 16px;
}
.顧客項目 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.顧客項目_横長 { grid-column: 1 / -1; }
.顧客項目名 {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
}
.顧客補足 {
  display: block;
  font-size: 12px;
  color: #6B7280;
  margin-top: 2px;
}
.顧客読取 {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  padding: 6px 0;
}

.顧客欄 {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #D1D5DB;
  border-radius: 7px;
  padding: 0 9px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background-color: white;
}
.顧客欄:focus {
  outline: none;
  border-color: #6C5CE7;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}
.顧客欄::placeholder { color: #9CA3AF; }
.顧客欄_複数行 {
  height: auto;
  min-height: 58px;
  padding: 6px 9px;
  line-height: 1.5;
  resize: vertical;
}

/* プルダウンの矢印。ブラウザの矢印は枠の右端にくっついて見えるので、
   自前の矢印を右から少し離して置く（撮影ページの選択欄と同じやり方） */
select.顧客欄,
select.顧客絞り込み {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px 6px;
  padding-right: 30px;
  cursor: pointer;
}

/* 初回連絡日（共通の日付入力）を、ほかの欄と同じ枠・高さに合わせる */
.顧客フォーム .日付フィルター入力欄 {
  display: flex;
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #D1D5DB;
  border-radius: 7px;
  padding: 0 8px 0 9px;
  background: white;
}
.顧客フォーム .日付フィルター入力欄:focus-within {
  border-color: #6C5CE7;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}
.顧客フォーム .日付範囲入力 {
  flex: 1;
  width: auto;
  min-width: 0;
  font-size: 13px;
  color: #111827;
}
.顧客フォーム .日付範囲入力::placeholder { font-size: 13px; color: #9CA3AF; }
.顧客フォーム .日付カレンダーボタン { font-size: 13px; }
.顧客欄の並び {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
}

.顧客チェック項目 {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.顧客チェック項目 input { margin-top: 3px; }

/* ---------- 顧客カード（モーダル） ---------- */
/* 背景をクリックしても閉じない（入力途中の内容が消えるため）。閉じるのは×と閉じるボタンだけ */
.顧客カード背景 {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(17, 24, 39, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}
.顧客カード {
  width: min(1120px, 100%);
  background: #F3F1F8;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  color: #1F2937;
  font-family: -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
}
.顧客カード見出し {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 12px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  border-radius: 14px 14px 0 0;
}
.顧客カード見出し文字 { flex: 1; min-width: 0; }
.顧客カード番号 {
  font-size: 12px;
  font-weight: 700;
  color: #6C5CE7;
  letter-spacing: 0.5px;
}
.顧客カード名前 {
  margin: 2px 0 4px;
  font-size: 19px;
  font-weight: 700;
  color: #111827;
  overflow-wrap: anywhere;
}
.顧客カード要約 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6B7280;
}
.顧客カード閉じる {
  background: transparent;
  border: 1px solid #D1D5DB;
  border-radius: 7px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  flex-shrink: 0;
}
.顧客カード閉じる:hover { background: #F3F4F6; }
.顧客カード本体 { padding: 14px 20px; }
.顧客カード足 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px 16px;
  font-size: 12px;
  color: #6B7280;
}
.顧客カード記録 { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.顧客カード記録 strong { color: #374151; font-weight: 600; }

/* 印（取引停止・通知停止・区分） */
.顧客印 {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.顧客印_停止 { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.顧客印_通知 { background: #F3F4F6; color: #4B5563; border-color: #E5E7EB; }
.顧客印_区分 { background: #EEF2FF; color: #4F46E5; border-color: #C7D2FE; }

.顧客ボタン {
  height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D1D5DB;
  background: white;
  border-radius: 7px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}
.顧客ボタン:hover { background: #F9FAFB; }
.顧客ボタン:disabled { opacity: 0.5; cursor: default; }
.顧客ボタン_主 {
  background: #6C5CE7;
  border-color: #6C5CE7;
  color: white;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
}
.顧客ボタン_主:hover { background: #5a4bd6; }
.顧客ボタン_危 { color: #DC2626; border-color: #FECACA; }
.顧客ボタン_危:hover { background: #FEF2F2; }

/* ---------- 顧客画面（全画面） ---------- */
.顧客画面 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #F3F1F8;
  display: flex;
  flex-direction: column;
  color: #1F2937;
  font-family: -apple-system, 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', sans-serif;
}
.顧客画面ヘッダー {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: #374151;
  color: #fff;
  flex-shrink: 0;
}
.顧客画面ヘッダー h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.3px; }
.顧客画面メモ { color: #EAEEF4; font-size: 12.5px; font-weight: 500; }
.顧客画面スペーサー { flex: 1; }
.顧客画面閉じる {
  background: transparent;
  color: #fff;
  border: 1px solid #6b7280;
  border-radius: 7px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 14px;
}
.顧客画面閉じる:hover { background: #4b5563; }

.顧客画面本体 {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.顧客KPI群 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.顧客KPIカード {
  background: white;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #9CA3AF;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  font-family: inherit;
}
button.顧客KPIカード { cursor: pointer; }
button.顧客KPIカード:hover:not(:disabled) { background: #FAFAFF; }
button.顧客KPIカード:disabled { cursor: default; color: inherit; }
.顧客KPIラベル { font-size: 12px; font-weight: 600; color: #6B7280; }
.顧客KPI値 { font-size: 24px; font-weight: 700; line-height: 1.15; color: #111827; }
.顧客KPI単位 { font-size: 13px; font-weight: 600; margin-left: 2px; }
.顧客KPI補足 { font-size: 11px; font-weight: 500; color: #9CA3AF; }

.顧客セクション {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 14px 16px;
}
.顧客セクション見出し {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.顧客セクション見出し h3 { margin: 0; font-size: 14px; font-weight: 700; color: #111827; }
.顧客セクション補足 { font-size: 12px; color: #6B7280; }

.顧客操作行 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
/* 一覧の上の操作欄は、入力・プルダウン・ボタンをすべて高さ32pxにそろえる */
.顧客検索 {
  width: 300px;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #D1D5DB;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
}
.顧客検索::placeholder { color: #9CA3AF; }
.顧客検索:focus {
  outline: none;
  border-color: #6C5CE7;
  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15);
}
.顧客絞り込み {
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #D1D5DB;
  border-radius: 7px;
  padding: 0 9px;
  font-size: 12.5px;
  font-family: inherit;
  color: #374151;
  background-color: white;
}
.顧客区分タブ {
  display: inline-flex;
  align-items: center;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #E5E7EB;
  background: white;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: #4B5563;
  cursor: pointer;
  white-space: nowrap;
}
.顧客区分タブ:hover { background: #F9FAFB; color: #111827; }
.顧客区分タブ.選択中 { background: #EEF2FF; border-color: #C7D2FE; color: #4338CA; }
/* 区分のボタンの並び（すべて｜取引先のお客様｜販路など）と、ボタンの右の人数 */
.顧客区分群 { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.顧客区分数 {
  min-width: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: #F3F4F6;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #4B5563;
}
.顧客区分タブ.選択中 .顧客区分数 { background: white; color: #4338CA; }
.顧客区分の区切り { width: 1px; height: 20px; margin: 0 2px; background: #E5E7EB; }
/* 検索に当たるのに、選んでいない区分で見えないお客様がいるときの案内 */
.顧客隠れた案内 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  background: #FFFBEB;
  font-size: 12.5px;
  color: #92400E;
}
.顧客隠れた案内 button {
  padding: 0;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  color: #6C5CE7;
  cursor: pointer;
}
.顧客隠れた案内 button:hover { text-decoration: underline; }
.顧客操作スペーサー { flex: 1; }

.顧客表ラッパー {
  max-height: calc(100vh - 330px);
  min-height: 240px;
  overflow: auto;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
}
.顧客表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.顧客表 th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #F9FAFB;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  padding: 8px 12px;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 #E5E7EB;
  white-space: nowrap;
  user-select: none;
}
.顧客表 th.並べ替えできる { cursor: pointer; }
.顧客表 th.並べ替えできる:hover { color: #374151; }
.顧客表 td {
  padding: 8px 12px;
  border-bottom: 1px solid #F3F4F6;
  color: #111827;
  vertical-align: middle;
}
.顧客表 tbody > tr { cursor: pointer; }
.顧客表 tbody > tr:hover > td { background: #F5F3FF; }
.顧客表 .顧客ID列 { width: 1%; white-space: nowrap; color: #6C5CE7; font-weight: 700; font-size: 12px; }
/* 顧客名の列だけ折り返す。ほかの列（国・区分・日付・金額など）は1行に収める */
.顧客表 td { white-space: nowrap; }
.顧客表 td.顧客名列 { white-space: normal; min-width: 200px; }
.顧客表 .顧客名列 { font-weight: 600; }
.顧客表 .顧客会社 { font-weight: 400; color: #6B7280; margin-left: 2px; }
/* 取引停止・通知停止の札は顧客名の横に出す */
.顧客表 .顧客名列 .顧客印 { margin-left: 8px; vertical-align: 1px; }
.顧客表 th.数字列,
.顧客表 td.数字列 { text-align: right; white-space: nowrap; }
.顧客表 .薄い { color: #9CA3AF; }
.顧客表空 { padding: 28px; text-align: center; color: #9CA3AF; font-size: 13px; }

/* 未紐付け：販売先は入っているのに、どの顧客にもつながっていない名前 */
.未紐付け表 td { cursor: default; }
.未紐付け表 tbody > tr { cursor: default; }
.未紐付け操作 {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.未紐付け操作 select { max-width: 240px; }

/* ===== 2回目：購買実績・ステータス・ランク ===== */

/* 一覧の「最終購入日」の下に小さく「◯日前」 */
.顧客表 .顧客経過 { display: block; font-size: 11px; color: #9CA3AF; margin-top: 1px; }

/* ステータスの札（よく買っている順に 新規・復活・アクティブ → 低下 → 休眠 → 未購入） */
.顧客状態 {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.顧客状態_新規 { background: #EFF6FF; color: #2563EB; border-color: #BFDBFE; }
.顧客状態_復活 { background: #F5F3FF; color: #7C3AED; border-color: #DDD6FE; }
.顧客状態_アクティブ { background: #ECFDF5; color: #059669; border-color: #A7F3D0; }
.顧客状態_購入頻度低下 { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.顧客状態_休眠 { background: #F3F4F6; color: #4B5563; border-color: #D1D5DB; }
.顧客状態_未購入 { background: white; color: #9CA3AF; border-color: #E5E7EB; }

/* ランクの札（設定のいちばん上の段階・2番目・それ以外。下の名前は札にしない） */
.顧客ランク {
  display: inline-block;
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.顧客ランク_1 { background: #1F2937; color: #FCD34D; }
.顧客ランク_2 { background: #FEF3C7; color: #92400E; }
.顧客ランク_他 { background: #E5E7EB; color: #374151; }
.顧客ランク_下 { color: #6B7280; font-weight: 600; padding: 1px 0; }

/* 顧客カードのタブ */
.顧客カードタブ {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
}
.顧客カードタブ button {
  border: none;
  background: none;
  padding: 10px 14px 9px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #6B7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.顧客カードタブ button:hover { color: #374151; }
.顧客カードタブ button.選択中 { color: #6C5CE7; border-bottom-color: #6C5CE7; }

/* 購買実績タブ */
.顧客実績 { display: flex; flex-direction: column; gap: 12px; }
.顧客実績_状態行 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.顧客実績_状態 { display: flex; flex-direction: column; gap: 6px; }
.顧客実績_状態見出し { display: flex; align-items: center; gap: 8px; }
.顧客実績_説明 { font-size: 12px; color: #6B7280; line-height: 1.6; }
.顧客実績_説明 strong { color: #374151; font-weight: 600; }
.顧客実績_対象外 {
  font-size: 12.5px;
  color: #6B7280;
  background: #F9FAFB;
  border: 1px dashed #D1D5DB;
  border-radius: 8px;
  padding: 10px 12px;
}
.顧客実績_空 { padding: 24px; text-align: center; color: #9CA3AF; font-size: 13px; }

/* 数字のカード（処分市場タブのKPIカードと同じ形を小さくしたもの） */
.顧客実績_カード群 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 8px;
}
.顧客実績_カード {
  border: 1px solid #E5E7EB;
  border-left: 3px solid #C7D2FE;
  border-radius: 9px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* 購買の数字のカードは、左の線を数字の種類で色分けする（金額・粗利・回数・日付・1回あたり）。背景は白のまま */
.顧客実績_カード.顧客色_売上 { border-left-color: #6C5CE7; }
.顧客実績_カード.顧客色_粗利 { border-left-color: #059669; }
.顧客実績_カード.顧客色_回数 { border-left-color: #2563EB; }
.顧客実績_カード.顧客色_日付 { border-left-color: #D97706; }
.顧客実績_カード.顧客色_平均 { border-left-color: #64748B; }
/* 経路・品質タブ：赤字・未入金など気をつける数字 */
.顧客実績_カード.顧客色_注意 { border-left-color: #DC2626; }
.顧客実績_表 td.顧客経路_遅れ { color: #B91C1C; font-weight: 600; }
.顧客実績_カード名 { font-size: 11.5px; font-weight: 600; color: #6B7280; }
.顧客実績_カード値 { font-size: 17px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.顧客実績_カード補足 { font-size: 11px; color: #9CA3AF; }

/* 期間別の表・ランクの変化 */
.顧客実績_表 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.顧客実績_表 th {
  text-align: right;
  font-size: 11.5px;
  font-weight: 600;
  color: #6B7280;
  padding: 6px 10px;
  border-bottom: 1px solid #E5E7EB;
  white-space: nowrap;
}
.顧客実績_表 td {
  text-align: right;
  padding: 6px 10px;
  border-bottom: 1px solid #F3F4F6;
  white-space: nowrap;
  color: #111827;
}
.顧客実績_表 th:first-child,
.顧客実績_表 td:first-child { text-align: left; }
.顧客実績_表 .薄い { color: #9CA3AF; }
.顧客実績_表 tr.自由設定行 td { background: #FAFAFF; }
.顧客実績_期間入力 { display: flex; align-items: center; gap: 6px; }
.顧客実績_期間入力 .日付フィルター入力欄 {
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  padding: 2px 6px;
  background: white;
}
.顧客実績_期間入力 .日付範囲入力 { width: 84px; font-size: 12px; }

/* 狭い枠では列の数が自動で減る（見出しが縦に折れないように） */
.顧客実績_間隔群 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px 16px;
  font-size: 12.5px;
}
.顧客実績_間隔群 div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted #E5E7EB; padding: 4px 0; }
.顧客実績_間隔群 span { white-space: nowrap; }
.顧客実績_間隔群 span:first-child { color: #6B7280; }
.顧客実績_間隔群 span:last-child { font-weight: 600; color: #111827; }

/* ===== 顧客マスタ設定（管理者だけ変えられる） ===== */
.顧客設定_本文 { padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.顧客設定_行 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.顧客設定_行 .顧客欄 { width: auto; min-width: 120px; }
.顧客設定_段階表 { width: 100%; border-collapse: collapse; font-size: 13px; }
.顧客設定_段階表 th { text-align: left; font-size: 12px; color: #6B7280; font-weight: 600; padding: 4px 6px; }
.顧客設定_段階表 td { padding: 4px 6px; }
.顧客設定_数字群 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}
.顧客設定_数字 { display: flex; flex-direction: column; gap: 3px; }
.顧客設定_数字 .顧客欄 { width: 140px; }
.顧客設定_注意 {
  font-size: 12px;
  color: #92400E;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 8px 10px;
}
.顧客設定_エラー { font-size: 12.5px; color: #DC2626; }
.顧客設定_区切り { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.顧客設定_区切り欄 { display: inline-flex; align-items: center; gap: 4px; }
.顧客設定_区切り欄 .顧客欄 { width: 110px; }

/* ===== 顧客画面：買った商品で探す ===== */
.顧客操作ラベル { font-size: 12.5px; font-weight: 600; color: #4B5563; }
.顧客操作補足 { font-size: 12px; color: #6B7280; }

/* ===== 購買傾向タブ ===== */
.顧客傾向_期間 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.顧客傾向_期間点数 { font-size: 12px; color: #6B7280; margin-left: 6px; }
.顧客傾向_注記 { font-size: 11.5px; color: #9CA3AF; margin-top: 8px; }
.顧客傾向_表 tr.顧客傾向_不明行 td { color: #9CA3AF; background: #FAFAFA; }
.顧客傾向_表 tr.顧客傾向_空行 td { color: #9CA3AF; }
/* 割合の数字の後ろに薄い棒 */
.顧客傾向_割合 {
  position: relative;
  display: inline-block;
  min-width: 84px;
  text-align: right;
  padding: 1px 4px;
  border-radius: 4px;
  overflow: hidden;
}
.顧客傾向_棒 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #E0E7FF;
}
.顧客傾向_割合文字 { position: relative; }
.顧客傾向_増減 { font-variant-numeric: tabular-nums; }
.顧客傾向_増加 { color: #047857; }
.顧客傾向_減少 { color: #B91C1C; }
.顧客傾向_横ばい { color: #6B7280; }
.顧客傾向_変化 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 12px;
}
.顧客傾向_変化見出し { color: #6B7280; width: 100%; }
.顧客傾向_もっと {
  margin-top: 6px;
  border: none;
  background: none;
  color: #6C5CE7;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
}
.顧客傾向_もっと:hover { text-decoration: underline; }
/* まとめのカード：上にTOP3の2枚（広く）、下に3枚 */
.顧客実績_カード群.顧客傾向_まとめ群 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.顧客傾向_まとめ群 > .顧客傾向_まとめ { grid-column: span 2; }
.顧客傾向_まとめ群 > .顧客傾向_まとめ.顧客傾向_広い { grid-column: span 3; }
.顧客傾向_まとめ中身 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.顧客傾向_上位 { margin: 2px 0 0; padding: 0; list-style: none; font-size: 12.5px; display: flex; flex-direction: column; gap: 1px; }
.顧客傾向_上位 li { display: flex; align-items: baseline; gap: 6px; }
.顧客傾向_順位 { color: #9CA3AF; font-size: 11px; width: 10px; flex-shrink: 0; }
.顧客傾向_上位名 { flex: 1; min-width: 0; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 担当名が無いときにまとめて押せなくするための枠（見た目は何も変えない） */
.顧客フォーム枠 { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.顧客フォーム.簡易 .顧客フォーム枠 { gap: 14px; }
.顧客フォーム枠:disabled .顧客欄 { background: #F3F4F6; cursor: not-allowed; }
.顧客絞り込みボタン { white-space: nowrap; }
.顧客操作行_上 { flex-wrap: nowrap; align-items: flex-start; }
.顧客操作_左 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.顧客操作_右 { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.顧客傾向_色見本 {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  margin-right: 6px;
  vertical-align: 0;
}
.顧客実績_カード値 .顧客傾向_色見本 { width: 12px; height: 12px; margin-right: 7px; }

/* 来客カレンダー（顧客画面の「来客カレンダー」タブ。来客の記録フォームは上に重なる＝z-index 3000） */
.来客カレンダー本体 .来客カレンダー題 { margin: 4px 0 10px; }
/* 顧客画面のタブ（顧客一覧／来客カレンダー） */
.顧客画面タブ {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}
.顧客画面タブ button {
  border: none;
  background: none;
  padding: 11px 16px 9px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: #6B7280;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.顧客画面タブ button:hover { color: #374151; background: #F9FAFB; }
.顧客画面タブ button.選択中 { color: #6C5CE7; border-bottom-color: #6C5CE7; }

/* ===== 経路・品質タブ（顧客経路品質タブ.tsx）=====
   ほかのタブと同じ部品（白い節・数字のカード・表・注記）で組む。このタブだけのものは販売経路の帯グラフと小さな札 */
.経路_帯まとめ { margin-top: 12px; }
.経路_帯 { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: #F1F0F6; }
.経路_帯区切り { height: 100%; }
.経路_帯区切り + .経路_帯区切り { box-shadow: inset 2px 0 0 #fff; }
.経路_凡例 { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 12.5px; color: #374151; }
.経路_凡例1つ { display: inline-flex; align-items: center; }
.経路_凡例1つ strong { margin-left: 6px; font-weight: 700; color: #111827; }
.経路_点 { display: inline-block; flex-shrink: 0; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; }
.経路_札 { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.経路_札_赤 { background: #FEE2E2; color: #B91C1C; }
.経路_札_橙 { background: #FEF3C7; color: #B45309; }

/* ===== 顧客カードの文字を濃くする（2026-10-11）=====
   薄いグレーの文字が読みにくかったので、カードの中だけ色を濃くする（大きさは変えない）。
   顧客一覧など、カードの外の画面には効かない */
.顧客カード .顧客節見出し { color: #111827; }
.顧客カード .顧客項目名 { color: #374151; }
.顧客カード .顧客補足 { color: #4B5563; }
.顧客カード .顧客カード要約 { color: #374151; }
.顧客カード .顧客カード記録 { color: #4B5563; }
.顧客カード .顧客カードタブ button { color: #4B5563; }
.顧客カード .顧客カードタブ button:hover { color: #111827; }
.顧客カード .顧客カードタブ button.選択中 { color: #6C5CE7; }
.顧客カード .顧客実績_カード名 { color: #374151; }
.顧客カード .顧客実績_カード補足 { color: #4B5563; }
.顧客カード .顧客実績_説明 { color: #374151; }
.顧客カード .顧客実績_対象外 { color: #374151; }
.顧客カード .顧客実績_空 { color: #4B5563; }
.顧客カード .顧客実績_表 th { color: #374151; }
.顧客カード .顧客実績_表 .薄い { color: #6B7280; }
.顧客カード .顧客実績_間隔群 span:first-child { color: #374151; }
.顧客カード .顧客傾向_注記 { color: #4B5563; }
.顧客カード .顧客傾向_期間点数 { color: #374151; }
.顧客カード .顧客傾向_表 tr.顧客傾向_不明行 td { color: #6B7280; }
.顧客カード .顧客傾向_表 tr.顧客傾向_空行 td { color: #6B7280; }
.顧客カード .顧客傾向_変化見出し { color: #374151; }
.顧客カード .顧客傾向_順位 { color: #6B7280; }
.顧客カード .顧客傾向_上位 .薄い { color: #4B5563; }

/* ===== 素材・モデルの辞書（商品の辞書モーダル.tsx）===== */
.辞書_上 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.辞書_タブ { display: flex; gap: 6px; }
.辞書_検索 { width: 260px; margin-left: auto; }
.辞書_決まり { font-size: 12.5px; color: #374151; margin-bottom: 8px; }
.辞書_決まり summary { cursor: pointer; font-weight: 600; color: #4B5563; }
.辞書_決まり ul { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; }
.辞書_表の枠 { max-height: 52vh; overflow-y: auto; border: 1px solid #E5E7EB; border-radius: 8px; }
.辞書_表 th { position: sticky; top: 0; background: #F9FAFB; z-index: 1; }
.辞書_表 td { vertical-align: middle; }
.辞書_表 .顧客欄 { width: 100%; }
.辞書_表 tr + tr td { border-top: 1px solid #F3F4F6; }
.辞書_点数 {
  background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; border-radius: 6px;
  padding: 2px 8px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.辞書_点数:hover { background: #E0E7FF; }
.辞書_例の行 td { background: #FAFAFF; font-size: 12.5px; }
.辞書_例 { display: inline-block; margin: 2px 10px 2px 0; padding: 1px 8px; border-radius: 6px; background: white; border: 1px solid #E5E7EB; color: #374151; }
.辞書_当たらない { max-height: 260px; overflow-y: auto; font-size: 12.5px; color: #374151; line-height: 1.8; }
.辞書_当たらないブランド { display: inline-block; min-width: 110px; color: #6B7280; margin-right: 10px; }
.辞書_一覧の絞り込み { margin-bottom: 6px; }
.辞書_一覧の絞り込み .辞書_商品の検索 { width: 240px; }
.辞書_含める { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: #374151; }
.辞書_当たった項目 {
  display: inline-block; min-width: 120px; margin-right: 10px; padding: 0 6px; border-radius: 4px;
  background: #EEF2FF; color: #4338CA; font-size: 12px; line-height: 1.6;
}
.辞書_当たった項目.当たらない { background: #F3F4F6; color: #9CA3AF; }
/* New Arrivals の入れ替えの設定。外側（顧客カード・顧客節・顧客欄・顧客ボタン）は 顧客マスタ.css の部品を使い、ここは並びだけ */

.NewArrivals設定 { width: min(760px, 100%); }

.NewArrivals_2列 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}
.NewArrivals_項目 { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.NewArrivals_選ぶ { width: 100%; }
.NewArrivals_曜日と時 { display: inline-flex; gap: 6px; }
.NewArrivals_曜日と時 .顧客欄 { width: auto; }

.NewArrivals_節見出し行 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.NewArrivals_節見出し行 .顧客節見出し { margin: 0; }
.NewArrivals_自動 { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; }

.NewArrivals_入れ直し {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}
.NewArrivals_入れ直し .顧客補足 { margin-top: 0; }
.NewArrivals_入れ直し月 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: #374151; margin: 2px 0 2px 22px; }
.NewArrivals_入れ直し月 .顧客欄 { width: auto; }

.NewArrivals_今すぐ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #F3F4F6;
}
.NewArrivals_今すぐ .顧客補足 { margin-top: 0; }
.NewArrivals_今すぐボタン { display: inline-flex; gap: 8px; }

/* 1週間の流れ：左から順に4つの札 */
.NewArrivals_流れ {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.NewArrivals_流れ札 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
}
.NewArrivals_流れ札.自動 { background: #F5F3FF; border-color: #DDD6FE; }
.NewArrivals_流れ札.社員 { background: #FFFBEB; border-color: #FDE68A; }
.NewArrivals_流れ札:not(:last-child)::after {
  content: '›';
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: 15px;
}
.NewArrivals_流れ時 { font-size: 12px; font-weight: 700; color: #111827; }
.NewArrivals_流れ誰 { font-size: 11px; font-weight: 600; color: #6C5CE7; }
.NewArrivals_流れ札.社員 .NewArrivals_流れ誰 { color: #B45309; }
.NewArrivals_流れ文 { font-size: 12px; color: #374151; line-height: 1.5; }

.NewArrivals_知らせ {
  font-size: 12.5px;
  color: #065F46;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  border-radius: 8px;
  padding: 8px 10px;
}
/* 来客カレンダーと来客の記録フォーム（来客カレンダー.tsx）。
   もとは分析ダッシュボード.css にあった。顧客画面から開くカレンダーと、分析の来客タブの両方で使う */

/* ===== 来客タブ：カレンダー表示 ===== */

/* 月送りの ‹ › */
.来客月送り {
  width: 28px;
  height: 28px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  background: white;
  color: #4B5563;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.来客月送り:hover {
  background: #F3F4F6;
  border-color: #C7D2FE;
}

.来客今月へ {
  padding: 5px 12px;
  border: 1.5px solid #E5E7EB;
  border-radius: 6px;
  background: white;
  color: #4B5563;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.来客今月へ:hover {
  background: #F3F4F6;
  border-color: #C7D2FE;
}

/* 見出し行（◯年◯月 と その月のまとめ） */
.来客カレンダー題 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.来客カレンダーまとめ {
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
}

.来客カレンダー内訳 {
  margin-left: 10px;
  white-space: nowrap;
}

.来客カレンダー色見本 {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 4px;
}

/* 月のマス目 */
.来客カレンダー {
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  overflow: hidden;
  background: #E5E7EB;   /* マスの隙間＝罫線に見せる */
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.来客カレンダー週 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}

/* 曜日の見出し */
.来客カレンダー曜日名 {
  background: #F9FAFB;
  padding: 7px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
}

.来客カレンダー曜日名.日曜 { color: #DC2626; }
.来客カレンダー曜日名.土曜 { color: #2563EB; }

.来客カレンダーマス {
  background: white;
  min-height: 150px;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
}

/* 前後の月の日は薄くして、今月と見分けられるようにする */
.来客カレンダーマス.他の月 {
  background: #FAFAFA;
}

.来客カレンダーマス.他の月 .来客カレンダー数字 {
  color: #C4C8CE;
}

.来客カレンダーマス.今日 {
  background: #FFFBEB;
  box-shadow: inset 0 0 0 2px #FCD34D;
}

.来客カレンダー日にち {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 5px;
}

.来客カレンダー数字 {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.来客カレンダー数字.日曜 { color: #DC2626; }
.来客カレンダー数字.土曜 { color: #2563EB; }

.来客カレンダー件数 {
  font-size: 11px;
  color: #9CA3AF;
}

/* その日に来客を足すボタン。ふだんは薄く、マスに触れるとはっきり出す */
.来客カレンダー追加 {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #D1D5DB;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.来客カレンダーマス:hover .来客カレンダー追加 {
  color: #4F46E5;
  background: #EEF2FF;
}

.来客カレンダー追加:hover {
  color: white !important;
  background: #4F46E5 !important;
}

/* 予定が多い日はこの中だけスクロールさせる（週の行ごと伸びるのを防ぐ） */
.来客カレンダー予定群 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 168px;
}

/* 1件の予定。左の帯の色が区分 */
.来客カレンダー予定 {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 5px 7px;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #9CA3AF;
  border-radius: 4px;
  background: #F9FAFB;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
}

.来客カレンダー予定:hover {
  background: #EEF2FF;
  border-color: #C7D2FE;
}

/* まだ販売先と紐付いていない相手は点線で分かるようにする */
.来客カレンダー予定.未紐付け {
  border-style: dashed;
  border-left-style: solid;
}

.来客カレンダー時間 {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: #6B7280;
  font-variant-numeric: tabular-nums;
}

.来客カレンダー名前 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 長い名前（萬滿株式会社(贰叁中古) など）は切らずに2行まで折り返す */
  white-space: normal;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  font-weight: 700;
  color: #1F2937;
}

/* 東京以外の拠点だけ印を出す（東京がほとんどのため） */
.来客カレンダー拠点 {
  flex: 0 0 auto;
  padding: 0 4px;
  border-radius: 3px;
  background: #E0E7FF;
  color: #4338CA;
  font-size: 10px;
  font-weight: 700;
}

/* 注記の中で点線の見本を出す */
.来客カレンダー未紐付け印 {
  padding: 0 6px;
  border: 1px dashed #9CA3AF;
  border-radius: 4px;
}

/* ===== 来客の記録フォーム ===== */
/* 背景クリックでは閉じない。入力途中の内容が消えてやり直しになるため */
.来客フォーム背景 {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.来客フォーム {
  /* 時間の行（開始の時分・終了の時分・「自由に書く」）が入りきる幅。
     440pxだと「自由に書く」が枠外にはみ出して横スクロールが出ていた。 */
  width: 500px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: white;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.来客フォーム見出し {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 14px;
}

.来客フォーム閉じる {
  border: none;
  background: none;
  color: #9CA3AF;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}

.来客フォーム閉じる:hover {
  color: #374151;
}

.来客フォーム行 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.来客フォーム行 > span {
  width: 100px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
}

.来客フォーム行 select,
.来客フォーム行 input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
}

.来客フォーム行 select:focus,
.来客フォーム行 input[type="text"]:focus {
  outline: none;
  border-color: #6366F1;
}

/* 日付は共通の日付フィルター入力を使う。枠だけこのフォームに合わせる */
.来客フォーム行 .日付フィルター入力欄 {
  flex: 1;
  min-width: 0;
  padding: 4px 8px 4px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 7px;
}

.来客フォーム行 .日付フィルター入力欄:focus-within {
  border-color: #6366F1;
}

.来客フォーム行 .日付範囲入力 {
  flex: 1;
  min-width: 0;
  width: auto;
  font-size: 13px;
}

/* カレンダーは押す場所なので、フォームの中では大きめに出す */
.来客フォーム行 .日付カレンダーボタン {
  font-size: 17px;
  opacity: 0.75;
  padding: 0 2px;
}

.来客フォーム行 .日付カレンダーボタン:hover {
  opacity: 1;
}

/* 打ち込んだ相手が既存の販売先かどうかの案内 */
.来客相手状態 {
  margin: -4px 0 10px 110px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.6;
}

.来客相手状態.一致 {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #047857;
}

.来客相手状態.新規 {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  color: #92400E;
}

/* 販売先を選ぶボタン。押すと商品一覧と同じ検索ポップが開く */
.来客販売先ボタン {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 7px;
  background: white;
  color: #374151;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.来客販売先ボタン:hover {
  border-color: #A5B4FC;
}

.来客販売先未選択 {
  color: #9CA3AF;
}

/* 検索ポップを開いている間、欄の幅を保つ */
.来客フォーム行 .セル選択検索ラッパー {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1.5px solid #6366F1;
  border-radius: 7px;
  font-size: 13px;
}

.来客フォーム行.チェック行 {
  margin-top: 2px;
}

/* ラベル列の幅指定（.来客フォーム行 > span）を打ち消して、1行に収める */
.来客フォーム行 > .来客販売先以外 {
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  color: #6B7280;
  white-space: nowrap;
  cursor: pointer;
}

.来客販売先以外 input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.来客フォーム注記 {
  margin: 14px 0 16px;
  padding: 8px 10px;
  background: #F9FAFB;
  border-radius: 7px;
  font-size: 11px;
  line-height: 1.7;
  color: #6B7280;
}

.来客フォームボタン群 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.来客フォームボタン群 button {
  padding: 7px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* ===== 来客フォームの時間欄（開始〜終了の時計＋自由入力への切替） ===== */

/* ラベル列の幅指定（.来客フォーム行 > span＝100px・太字・グレー）を打ち消す */
.来客フォーム行 > .来客時間欄 {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 万一入りきらないときは「自由に書く」が下の行に落ちる（枠外へ出さない） */
  flex-wrap: wrap;
  row-gap: 6px;
  width: auto;
  flex: 1;
  min-width: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

/* 時刻ひとつ分（時プルダウン : 分プルダウン） */
.来客時刻 {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.来客時間欄 .来客時刻 select {
  flex: 0 0 auto;
  width: 56px;
  padding: 6px 4px 6px 8px;
  border: 1.5px solid #E5E7EB;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.来客時間欄 .来客時刻 select:focus {
  outline: none;
  border-color: #6366F1;
}

.来客時間欄 .来客時刻 select:disabled {
  background: #F9FAFB;
  color: #C4C8CE;
}

.来客時刻区切り {
  color: #9CA3AF;
  font-size: 12px;
}

.来客時間つなぎ {
  color: #9CA3AF;
  font-size: 12px;
}

.来客時間自由 {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
}

.来客時間自由:focus {
  outline: none;
  border-color: #6366F1;
}

/* 「自由に書く」「時計で入れる」。目立たせず、押せると分かる程度に */
.来客時間切替 {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: white;
  color: #6B7280;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.来客時間切替:hover {
  background: #F3F4F6;
  border-color: #C7D2FE;
  color: #4B5563;
}

/* ===== 来客フォームの中の「その販売先の情報」（販売先マスタ） ===== */

.来客販売先詳細 {
  margin: 4px 0 10px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background: #FAFAFA;
  overflow: hidden;
}

/* たたんでいるときも、入っている内容が1行で分かるようにする */
.来客販売先詳細見出し {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

.来客販売先詳細見出し:hover {
  background: #F3F4F6;
}

.来客販売先詳細開閉 {
  color: #9CA3AF;
  font-size: 10px;
}

.来客販売先詳細要約 {
  margin-left: auto;
  font-weight: 500;
  font-size: 11px;
  color: #6B7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.来客販売先詳細要約.未入力 {
  color: #C4C8CE;
}

.来客販売先詳細中身 {
  padding: 4px 10px 10px;
  border-top: 1px solid #E5E7EB;
  background: white;
}

/* ラベル列の幅指定（.来客フォーム行 > span＝100px・太字・グレー）を打ち消す。
   打ち消さないと、年月や連絡手段の入れ物までラベル幅に潰れて詰まって見える。 */
.来客フォーム行 > .来客販売先年月,
.来客フォーム行 > .来客販売先手段群 {
  width: auto;
  flex: 1;
  min-width: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.来客販売先年月 {
  display: flex;
  gap: 8px;
}

/* 年と月。中身が短いので、伸ばしきらずに読みやすい幅で止める */
.来客販売先年月 select {
  flex: 0 1 auto;
  min-width: 92px;
}

.来客販売先手段群 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.来客販売先手段 {
  padding: 3px 10px;
  border: 1.5px solid #E5E7EB;
  border-radius: 999px;
  background: white;
  color: #6B7280;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.来客販売先手段:hover {
  border-color: #C7D2FE;
}

.来客販売先手段.選択中 {
  border-color: #6366F1;
  background: #EEF2FF;
  color: #4338CA;
}

.来客販売先手段なし {
  font-size: 11px;
  color: #9CA3AF;
}

.来客販売先詳細注記 {
  margin-top: 8px;
  font-size: 11px;
  color: #6B7280;
  line-height: 1.6;
}

/* 修正のときだけ出る削除。保存・キャンセルと間違えないよう左端に離して置く */
.来客フォーム削除 {
  margin-right: auto;
  border: 1.5px solid #FECACA;
  background: white;
  color: #DC2626;
}

.来客フォーム削除:hover {
  background: #FEF2F2;
  border-color: #F87171;
}

.来客フォームキャンセル {
  border: 1.5px solid #E5E7EB;
  background: white;
  color: #6B7280;
}

.来客フォームキャンセル:hover {
  background: #F3F4F6;
}

.来客フォーム保存 {
  border: none;
  background: #6366F1;
  color: white;
}

.来客フォーム保存:hover {
  background: #4F46E5;
}

.来客フォームボタン群 button:disabled {
  opacity: 0.6;
  cursor: default;
}