:root {
  --背景: #f6f7f9;
  --面: #ffffff;
  --線: #e3e6eb;
  --文字: #1d2330;
  --薄い文字: #6b7280;
  --主: #2457d6;
  --主の薄: #e8eefc;
  --緑: #13804a;
  --緑の薄: #e6f5ec;
  --黄: #9a6a00;
  --黄の薄: #fff5d6;
  --赤: #c62828;
  --赤の薄: #fdecec;
  --角: 10px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--背景); color: var(--文字);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 14px; line-height: 1.55;
}
a { color: var(--主); }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }
[hidden] { display: none !important; }

/* 上部 */
.上部 {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  padding: 10px 24px; background: var(--面); border-bottom: 1px solid var(--線);
}
.ロゴ { font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.ロゴ span { color: var(--主); margin-left: 2px; }
.ステップ { display: flex; gap: 4px; flex: 1; }
.ステップ button {
  border: 0; background: none; padding: 8px 14px; border-radius: 999px; color: var(--薄い文字); font-weight: 600; white-space: nowrap;
}
.ステップ button b {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%;
  background: var(--線); color: var(--文字); font-size: 12px;
}
.ステップ button.選択中 { background: var(--主の薄); color: var(--主); }
.ステップ button.選択中 b { background: var(--主); color: #fff; }
.状態 { display: flex; gap: 8px; align-items: center; }
.バッジ {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--線); color: var(--文字); white-space: nowrap;
}
.バッジ.緑 { background: var(--緑の薄); color: var(--緑); }
.バッジ.黄 { background: var(--黄の薄); color: var(--黄); }
.バッジ.赤 { background: var(--赤の薄); color: var(--赤); }
.バッジ.青 { background: var(--主の薄); color: var(--主); }

.お知らせ {
  margin: 16px 24px 0; padding: 12px 16px; border-radius: var(--角); background: var(--黄の薄); color: #5c4300;
  display: flex; gap: 12px; align-items: center;
}

main { padding: 20px 24px 140px; max-width: 1400px; margin: 0 auto; }
.見出し h1 { font-size: 20px; margin: 0 0 4px; }
.見出し p { margin: 0 0 16px; color: var(--薄い文字); }

.検索パネル {
  background: var(--面); border: 1px solid var(--線); border-radius: var(--角); padding: 14px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.行 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.行 input:not([type=checkbox]) { flex: 1; min-width: 220px; }
input:not([type=checkbox]), select {
  padding: 9px 12px; border: 1px solid var(--線); border-radius: 8px; background: #fff; color: var(--文字);
}
input:focus, select:focus { outline: 2px solid var(--主の薄); border-color: var(--主); }
input.数値 { width: 110px; min-width: 0 !important; flex: none !important; text-align: right; }
label.小 { display: inline-flex; gap: 6px; align-items: center; color: var(--薄い文字); white-space: nowrap; }

button.主, button.副, a.ボタン {
  padding: 9px 16px; border-radius: 8px; font-weight: 700; border: 1px solid transparent; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
button.主 { background: var(--主); color: #fff; }
button.主:hover { filter: brightness(1.08); }
button.主:disabled { opacity: .5; cursor: default; }
button.副, a.ボタン { background: #fff; color: var(--文字); border-color: var(--線); }
button.副:hover, a.ボタン:hover { border-color: var(--主); color: var(--主); }
button.緑 { background: var(--緑); color: #fff; }
button.文字 { border: 0; background: none; color: var(--主); padding: 4px 6px; font-weight: 600; }

.ジャンル一覧 { display: flex; gap: 8px; flex-wrap: wrap; }
.ジャンル一覧 button {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--線); background: #fff; font-weight: 600;
}
.ジャンル一覧 button.選択中 { background: var(--主); border-color: var(--主); color: #fff; }

/* 読み込み中 */
.読み込み { display: flex; gap: 12px; align-items: center; padding: 40px; justify-content: center; color: var(--薄い文字); }
.くるくる {
  width: 22px; height: 22px; border: 3px solid var(--線); border-top-color: var(--主); border-radius: 50%;
  animation: 回転 .8s linear infinite;
}
@keyframes 回転 { to { transform: rotate(360deg); } }
.空 { padding: 40px; text-align: center; color: var(--薄い文字); background: var(--面); border: 1px dashed var(--線); border-radius: var(--角); }
.エラー { padding: 14px 16px; border-radius: var(--角); background: var(--赤の薄); color: var(--赤); }

/* ① 売れ筋ランキング */
.ランキングの進み {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 10px;
  background: var(--主の薄); border-radius: var(--角); color: var(--文字);
}
.ランキングの進み .くるくる { width: 18px; height: 18px; border-width: 2px; }
.並び替え { margin-bottom: 10px; }
.並び替え select { min-width: 220px; }
table.ランキング td { padding: 8px 10px; }
table.ランキング img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--背景); display: block; }
table.ランキング .型番の名前 { min-width: 220px; }
table.ランキング .型番の名前 a { font-weight: 700; text-decoration: none; }
table.ランキング .型番の名前 a:hover { text-decoration: underline; }
table.ランキング tr.エラーの行 td { background: var(--赤の薄); }
.薄い { color: var(--薄い文字); }
.緑の文字 { color: var(--緑); font-weight: 700; }
.黄の文字 { color: var(--黄); font-weight: 700; }
.赤い文字, .赤の文字 { color: var(--赤); font-weight: 700; }

/* ② eBay */
.指標 { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.指標 .箱 {
  background: var(--面); border: 1px solid var(--線); border-radius: var(--角); padding: 10px 16px; min-width: 120px;
}
.指標 .箱 .値 { font-size: 20px; font-weight: 800; }
.指標 .箱.緑 .値 { color: var(--緑); }
.指標 .箱.黄 .値 { color: var(--黄); }
.指標 .箱.赤 .値 { color: var(--赤); }
.リンク列 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.カード一覧 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.カード {
  background: var(--面); border: 2px solid var(--線); border-radius: var(--角); overflow: hidden; display: flex; flex-direction: column;
  position: relative;
}
.カード.選択中 { border-color: var(--緑); box-shadow: 0 0 0 3px var(--緑の薄); }
.カード.除外 { opacity: .55; }
.カード .画像 { aspect-ratio: 4 / 3; background: var(--背景); display: block; }
.カード .画像 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.カード .中身 { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.カード .題 { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--文字); text-decoration: none; }
.カード .題:hover { color: var(--主); }
.カード .金額 { font-size: 18px; font-weight: 800; }
.カード .下 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.カード .チェック {
  position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; background: #fff;
  border: 2px solid var(--線); display: grid; place-items: center; font-weight: 900; color: #fff;
}
.カード.選択中 .チェック { background: var(--緑); border-color: var(--緑); }
.カード .サイト { position: absolute; top: 8px; right: 8px; }
.折りたたみ { margin: 18px 0 10px; }

.フィルタ { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.フィルタ button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--線); background: #fff; font-weight: 600; font-size: 13px; }
.フィルタ button.選択中 { background: var(--文字); color: #fff; border-color: var(--文字); }

/* 下のバー */
.下のバー {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--面); border-top: 1px solid var(--線);
  box-shadow: 0 -6px 20px rgba(0,0,0,.06); padding: 12px 24px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center;
}
.下のバー .項目 { display: flex; flex-direction: column; }
.下のバー .項目 .名 { font-size: 11px; color: var(--薄い文字); }
.下のバー .項目 .値 { font-size: 18px; font-weight: 800; }
.下のバー .項目 .値.緑 { color: var(--緑); }
.下のバー .項目 .値.赤 { color: var(--赤); }
.下のバー input.数値 { font-size: 16px; font-weight: 700; }

/* 選んだ商品 */
.対象 {
  background: var(--面); border: 1px solid var(--線); border-radius: var(--角); padding: 12px 16px; margin-bottom: 14px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.対象 .商品名 { font-weight: 800; font-size: 16px; flex: 1; min-width: 200px; }

/* ④ 表 */
table.一覧 { width: 100%; border-collapse: collapse; background: var(--面); border: 1px solid var(--線); border-radius: var(--角); overflow: hidden; }
table.一覧 th, table.一覧 td { padding: 10px 12px; border-bottom: 1px solid var(--線); text-align: left; vertical-align: middle; }
table.一覧 th { background: var(--背景); font-size: 12px; color: var(--薄い文字); font-weight: 700; }
table.一覧 td.数 { text-align: right; font-variant-numeric: tabular-nums; }
table.一覧 tr:last-child td { border-bottom: 0; }

.トースト {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--文字); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

@media (max-width: 760px) {
  .上部 { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .ステップ { order: 3; width: 100%; overflow-x: auto; }
  main { padding: 16px 16px 180px; }
  .下のバー { padding: 10px 16px; gap: 12px; }
}

/* 表は狭い画面では横にスクロール */
.表の枠 { overflow-x: auto; border-radius: var(--角); }
table.一覧 th { white-space: nowrap; }
table.一覧 td:first-child { min-width: 200px; }
table.一覧 td:last-child { white-space: nowrap; }

/* 売値の計算から外した出品（赤枠・一番下） */
.除外の枠 { margin-top: 28px; padding: 16px; border: 2px solid var(--赤); border-radius: var(--角); background: #fff8f8; }
.除外の枠 h3 { margin: 0 0 4px; color: var(--赤); font-size: 16px; }
.除外の枠 p { margin: 0 0 12px; }
.除外の枠 .カード { border-color: #f0b4b4; opacity: 1; }
.除外の枠 .カード.選択中 { border-color: var(--緑); }
.除外理由 { font-size: 12px; color: var(--赤); background: var(--赤の薄); border-radius: 6px; padding: 6px 8px; line-height: 1.45; }

/* ① 判定・根拠 */
.バッジ.要確認 { background: #fff; color: #b45309; border: 1.5px solid #f59e0b; }
.判定の条件 { margin-bottom: 10px; padding: 10px 14px; background: var(--面); border: 1px solid var(--線); border-radius: var(--角); }
.判定の条件 select { min-width: 0; padding: 6px 10px; }
.判定の集計 { margin-bottom: 10px; gap: 6px 14px; }
.タグの列 { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.タグ { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--緑の薄); color: var(--緑); white-space: nowrap; }
.判定の理由 { font-size: 12px; color: var(--黄); margin-top: 2px; }
table.ランキング td.順位 { font-size: 16px; font-weight: 800; }
table.ランキング tr.見送りの行 td { background: #fafafa; color: var(--薄い文字); }
table.ランキング tr.見送りの行 img { opacity: .5; }
table.ランキング .ボタンの列 { white-space: nowrap; }
table.ランキング .ボタンの列 button { margin: 2px 0; }

/* ① 詳細画面 */
.詳細の背景 { position: fixed; inset: 0; z-index: 60; background: rgba(15, 20, 30, .45); overflow-y: auto; padding: 32px 16px; }
.詳細の中身 { max-width: 1100px; margin: 0 auto; background: var(--面); border-radius: 14px; padding: 20px 24px 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.詳細の中身 h2 { margin: 0; font-size: 20px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.詳細の中身 h3 { font-size: 15px; margin: 20px 0 8px; }
.詳細の見出し { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.詳細の段 { display: grid; gap: 20px; }
.詳細の段.三つ { grid-template-columns: repeat(3, 1fr); }
.詳細の段.二つ { grid-template-columns: 1fr 1fr; }
.理由の一覧 { margin: 0; padding-left: 18px; font-size: 13px; }
.理由の一覧 li { margin-bottom: 4px; }
.理由の一覧.緑の文字, .理由の一覧.黄の文字 { font-weight: 600; }
table.内訳 { width: 100%; border-collapse: collapse; font-size: 13px; }
table.内訳 td { padding: 5px 8px; border-bottom: 1px solid var(--線); }
table.内訳 td.数 { text-align: right; font-variant-numeric: tabular-nums; }
table.内訳 tr.合計 td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--文字); }
table.小さな表 td, table.小さな表 th { padding: 6px 8px; font-size: 12.5px; }
table.小さな表 img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
table.小さな表 tr.見送りの行 td { background: #fafafa; }
.検品の入力 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.検品の入力 label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--薄い文字); }
.検品の入力 label.広い { grid-column: 1 / -1; }
.検品の入力 input.数値 { width: 100%; }
.検品の入力 button { grid-column: 1 / -1; justify-content: center; }
.検品の記録 { border-top: 1px solid var(--線); padding: 8px 0; font-size: 13px; }

/* ⑤ 設定 */
.設定の枠 { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.設定のグループ { background: var(--面); border: 1px solid var(--線); border-radius: var(--角); padding: 14px 16px; margin-bottom: 16px; }
.設定のグループ h3 { margin: 0 0 8px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.設定の行 { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--線); align-items: center; }
.設定の行:last-child { border-bottom: 0; }
.設定の入力 { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.言葉の一覧 { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.言葉 { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--背景); border: 1px solid var(--線); font-size: 13px; }
.言葉 button { border: 0; background: none; color: var(--薄い文字); padding: 0 6px; font-size: 14px; }
.言葉 button:hover { color: var(--赤); }
.送料の行 input:not(.数値) { max-width: 240px; }

@media (max-width: 760px) {
  .詳細の段.三つ, .詳細の段.二つ { grid-template-columns: 1fr; }
  .設定の枠 { grid-template-columns: 1fr; }
  .設定の行 { flex-direction: column; align-items: flex-start; }
  .詳細の中身 { padding: 16px; }
}
table.ランキング td:first-child { min-width: 0; }
table.ランキング .型番の名前 { min-width: 300px; }
table.ランキング td:nth-child(12) { white-space: nowrap; }

/* ログイン画面 */
.ログインの枠 { max-width: 380px; margin: 12vh auto; background: var(--面); border: 1px solid var(--線); border-radius: 14px; padding: 28px; }
.ログインの枠 h1 { font-size: 20px; margin: 12px 0 6px; }
.ログインの枠 form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.ログインの枠 label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--薄い文字); }
.ログインの枠 button { justify-content: center; }

/* サイトの中のeBayログイン画面 */
.eBay画面の枠 { max-width: 1040px; }
.eBay画面の枠 img { width: 100%; border: 1px solid var(--線); border-radius: 8px; cursor: pointer; display: block; }
.eBay画面の操作 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.eBay画面の操作 input { flex: 1; min-width: 200px; }
.利用者の表示 { font-size: 13px; color: var(--薄い文字); white-space: nowrap; }