@charset "UTF-8";
/*
 * ロト6 出目表フィルタ（シンプル版）  /tool/loto6-filter/
 *   旧版（2026-10-02〜10-15 の版）は /tool/loto6-filter_backup/ に移した（2026-10-18 オーナー指示）
 * サイト共通CSS（import.css・smp.css・upd2.css）の後に読む。
 * このページの指定は #ls-app の中だけに効く。例外は先頭の「ページの枠」と「パンくず」だけ（現行版と同じ）。
 * 作成 2026-10-18（やすさんMTGの見直し：開いてすぐ表・単色切り替え・表示回数・シンプルな絞り込み）
 * 更新 2026-10-18（縦横切り替え。設定（回数・色・向き）は上の段に分け、上に残る帯は絞り込みだけに）
 * 更新 2026-10-18（表の使い方の一言を、表のすぐ上の欄として目立たせる）
 * 更新 2026-10-19（絞り込みの帯は上に残さない・表の見出しを画面の上に残す・残りの数字の玉をやめる）
 */

/* ---------- ページの枠：上に固定する帯と見出しが効くように、はみ出しを隠す指定を外す ---------- */
body.ls-page article#content,
body.ls-page #content #mainct.lotoTable,
body.ls-page .lotoTable .lotoTable__inner {
  overflow: visible;
  display: flow-root;
}

/* パンくず：スマホ（570px以下）でも1行に並べる（サイト共通は1項目ずつ縦に並ぶ） */
@media screen and (max-width: 570px) {
  body.ls-page #content #mainct ul.pan {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }

  body.ls-page #content #mainct ul.pan li {
    width: auto;
    clear: none;
    margin: 0 10px 0 0;
    padding: 0 0 0 12px;
    border: 0;
    background: url(/newdata/img/arrow1.gif) no-repeat 2px 50%;
    font-size: 12px;
    line-height: 1.8;
    text-indent: 0;
  }

  body.ls-page #content #mainct ul.pan li a {
    display: inline;
    padding: 0;
  }
}

/* ---------- 全体 ---------- */
#ls-app {
  --ls-ink: #1e1e1e;
  --ls-muted: #5b6470;
  --ls-line: #9cb0c9;
  --ls-border: #c9d3e0;
  --ls-blue: #2456c7;
  --ls-head: #6689d8;
  --ls-green: #428c0c;   /* 緑1色：サイトのテーマの緑（出目表ページの「もっと見る」と同じ） */
  --ls-ok: #1f8a43;
  --ls-ng: #c62828;
  position: relative;
  margin-top: 12px;
  color: var(--ls-ink);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

#ls-app *,
#ls-app *::before,
#ls-app *::after {
  box-sizing: border-box;
}

#ls-app [hidden] {
  display: none !important;
}

#ls-app button:focus-visible {
  outline: 3px solid #f0a500;
  outline-offset: 2px;
}

/* ---------- 表示の設定（回数・色・向き）：スクロールすると流れる ---------- */
#ls-app .ls-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 8px;
}

#ls-app .ls-seg {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #b8c4d6;
  border-radius: 6px;
}

#ls-app .ls-seg__label {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  background: #f0f3fa;
  color: var(--ls-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#ls-app .ls-seg button {
  -webkit-appearance: none;
  appearance: none;
  min-width: 44px;
  min-height: 36px;
  margin: 0;
  padding: 0 9px;
  border: 0;
  border-left: 1px solid #b8c4d6;
  background: #fff;
  color: #333;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

#ls-app .ls-seg button[aria-pressed="true"] {
  background: var(--ls-blue);
  color: #fff;
  font-weight: 700;
}

#ls-app #ls-color button[data-color="mono"][aria-pressed="true"] {
  background: var(--ls-green);
}

/* ---------- 絞り込みの帯（2026-10-19〜 上に残さない＝スクロールすると流れる。上に残すのは表の見出しだけ） ---------- */
#ls-app .ls-bar {
  padding: 8px 10px;
  border: 1px solid var(--ls-border);
  border-radius: 8px;
  background: #fff;
}

#ls-app.is-done .ls-bar {
  border-color: var(--ls-ok);
  background: #f0fff5;
}

#ls-app.is-under .ls-bar {
  border-color: var(--ls-ng);
  background: #fff4f4;
}

#ls-app .ls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

#ls-app .ls-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  line-height: 1.2;
}

#ls-app .ls-count__main {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

#ls-app .ls-count__main b {
  margin: 0 3px;
  font-size: 28px;
  font-weight: 800;
}

#ls-app .ls-count__sub {
  color: var(--ls-muted);
  font-size: 13px;
  white-space: nowrap;
}

#ls-app.is-done .ls-count__sub {
  color: #176735;
  font-weight: 700;
}

#ls-app.is-under .ls-count__sub {
  color: #b71c1c;
  font-weight: 700;
}

#ls-app .ls-acts {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

#ls-app .ls-btn {
  -webkit-appearance: none;
  appearance: none;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #b8c4d6;
  border-radius: 6px;
  background: #fff;
  color: var(--ls-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

#ls-app .ls-btn:disabled {
  border-color: #e0e4ea;
  background: #f6f7f9;
  color: #a7aeb8;
  cursor: default;
}

/* 消した数字（押すと戻る）。1行に並べ、はみ出したら横にスクロール */
#ls-app .ls-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  margin-top: 8px;
  padding-top: 6px;
  overflow-x: auto;
  border-top: 1px dashed #dde3ea;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

#ls-app .ls-chips__hint {
  color: var(--ls-muted);
  font-size: 12px;
  white-space: normal;
}

#ls-app .ls-chips__label {
  flex-shrink: 0;
  margin-right: 2px;
  color: var(--ls-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

#ls-app .ls-chips__label small {
  display: block;
  font-size: 10px;
  font-weight: 400;
}

#ls-app .ls-chip {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  min-width: 32px;
  height: 30px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid #cfd5dd;
  border-radius: 15px;
  background: #eceff3;
  color: #7a838e;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: line-through;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- 7色（出目表と同じ。数字で決まる：1・8・15… が赤、2・9・16… が黄 …） ---------- */
#ls-app .k1 { --k: #fe100f; }
#ls-app .k2 { --k: #fdfe35; }
#ls-app .k3 { --k: #ffac30; }
#ls-app .k4 { --k: #1ca41b; }
#ls-app .k5 { --k: #2a80d9; }
#ls-app .k6 { --k: #343586; }
#ls-app .k7 { --k: #825ad2; }

/* ---------- 表の上の一言（表示している回・最終更新） ---------- */
#ls-app .ls-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-bottom: 6px;
  color: var(--ls-muted);
  font-size: 12px;
}

#ls-app .ls-meta__range {
  color: var(--ls-ink);
  font-weight: 700;
}

/* ---------- 表のすぐ上の一言（表の使い方。いつも出す・目立たせる） ---------- */
#ls-app .ls-tablenote {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border-left: 4px solid var(--ls-blue);
  border-radius: 4px;
  background: #eef3fd;
  color: #1d3570;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

#ls-app .ls-tablenote i {
  flex-shrink: 0;
  color: var(--ls-blue);
  font-size: 18px;
}

#ls-app .ls-tablenote__text > span {
  display: inline-block;   /* 狭い画面では読点の後で折り返す */
}

/* ---------- 出目表（横・縦で共通） ---------- */
#ls-app .ls-tablebox {
  position: relative;
  margin-top: 4px;
}

/* 縦で回が多いとき：表の中で横にスクロール（左の数字の列は残る）。
   見出しは枠の中に入るので画面のスクロールには付いてこないが、縦の表は見出しごと画面の高さに収まるので見える */
#ls-app .ls-tablebox.is-hscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#ls-app .ls-loading,
#ls-app .ls-error {
  padding: 40px 12px;
  border: 1px dashed var(--ls-border);
  border-radius: 8px;
  color: var(--ls-muted);
  text-align: center;
}

#ls-app .ls-error {
  border-color: #e3a3a3;
  background: #fff8f8;
  color: #8c1d1d;
  line-height: 1.8;
}

#ls-app.is-error .ls-settings,
#ls-app.is-error .ls-bar,
#ls-app.is-error .ls-meta,
#ls-app.is-error .ls-tablenote {
  display: none;
}

#ls-app .ls-table {
  --ls-kai-w: 54px;
  --ls-row-h: 18px;
  --ls-font: 11px;
  --ls-head-font: 13px;
  --ls-kai-font: 12px;
  --ls-num-font: 12px;
  width: 100%;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
  background: #fff;
}

#ls-app .ls-table th,
#ls-app .ls-table td {
  height: var(--ls-row-h);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ls-line);
  font-size: var(--ls-font);
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

#ls-app .ls-table .ls-kai {
  width: var(--ls-kai-w);
  background: #f0f3fa;
  font-size: var(--ls-kai-font);
  font-weight: 700;
}

#ls-app .ls-table tr.is-latest .ls-kai {
  color: #d40000;
}

#ls-app .ls-table tr.is-latest td:not(.hit) {
  background: #fdf9e9;
}

@media (hover: hover) {
  #ls-app .ls-table tbody tr:hover td:not(.hit) {
    background: #eef2fa;
  }
}

/* 見出し（スクロールしても画面の上に残る） */
#ls-app .ls-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  height: auto;
  border-color: #b9c9ec;
  background: var(--ls-head);
  color: #fff;
  font-size: var(--ls-head-font);
}

#ls-app .ls-table thead .ls-kai {
  z-index: 4;
  background: var(--ls-blue);
  color: #fff;
  font-size: 12px;
}

#ls-app .ls-th {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

/* 本数字・ボーナス数字 */
#ls-app .ls-table td.hit,
#ls-app .ls-table td.bonus {
  position: relative;
}

#ls-app .ls-table td.hit {
  background: var(--k);
  color: #fff;
  font-weight: 700;
}

#ls-app .ls-table td.hit.k2,
#ls-app .ls-table td.hit.k3 {
  color: #000;
}

#ls-app .ls-table td.hit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #fff;
  pointer-events: none;
}

#ls-app .ls-table td.bonus {
  color: #000;
  font-weight: 900;
}

/* 緑1色：本数字のマスをすべてテーマの緑に */
#ls-app.is-mono .ls-table td.hit,
#ls-app.is-mono .ls-table td.hit.k2,
#ls-app.is-mono .ls-table td.hit.k3 {
  background: var(--ls-green);
  color: #fff;
}

/* 列（縦では行）が多くてマスが小さいとき：文字を出さず色だけ（ボーナス数字は黒い点） */
#ls-app .ls-table.is-compact td {
  font-size: 0;
}

#ls-app .ls-table.is-compact td.hit::after {
  border-width: 0;
}

#ls-app .ls-table.is-compact td.bonus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #111;
}

#ls-app .ls-table.is-compact .ls-th {
  padding: 4px 0;
  letter-spacing: -0.5px;
}

/* ---------- 縦の表：行＝数字1〜43（いちばん左を押すと行が消える）・列＝回（左が新しい） ---------- */
#ls-app .ls-table--v thead th {
  height: 40px;              /* loto6-filter.js の V_HEAD_H と同じ */
  padding: 2px 0;
  vertical-align: bottom;
}

#ls-app .ls-table--v thead th.lt {
  background: var(--ls-blue);   /* いちばん新しい回 */
}

#ls-app .ls-table--v .ls-vkai {
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
}

#ls-app .ls-table--v .ls-corner {
  z-index: 4;
  width: var(--ls-kai-w);
  background: var(--ls-blue);
  font-size: 11px;
  vertical-align: middle;
}

#ls-app .ls-table--v .ls-num {
  width: var(--ls-kai-w);
  border-color: #b9c9ec;
  background: var(--ls-head);
  color: #fff;
  font-size: var(--ls-num-font);
}

#ls-app .ls-table--v .ls-th,
#ls-app .ls-table--v.is-compact .ls-th {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--ls-row-h) - 1px);
  padding: 0;
  letter-spacing: 0;
}

#ls-app .ls-table--v td.lt:not(.hit) {
  background: #fdf9e9;
}

/* 縦で表の中を横にスクロールするとき、左の数字の列は残す */
#ls-app .ls-tablebox.is-hscroll .ls-table--v .ls-num,
#ls-app .ls-tablebox.is-hscroll .ls-table--v .ls-corner {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}

#ls-app .ls-tablebox.is-hscroll .ls-table--v .ls-num {
  z-index: 2;
}

#ls-app .ls-tablebox.is-hscroll .ls-table--v .ls-corner {
  z-index: 5;
}

/* ---------- サイトの枠は1114px固定（571px以上）。画面がそれより狭いときも、ツールは画面内に収める ---------- */
@media screen and (min-width: 571px) {
  #ls-app {
    max-width: calc(100vw - 60px);
  }
}

/* ---------- スマホ（767px以下） ---------- */
@media screen and (max-width: 767px) {
  #ls-app .ls-bar {
    padding: 6px 8px;
  }

  #ls-app .ls-count {
    flex-direction: column;
    align-items: flex-start;
  }

  #ls-app .ls-count__main b {
    font-size: 24px;
  }

  #ls-app .ls-count__sub {
    font-size: 12px;
  }

  #ls-app .ls-btn {
    min-height: 38px;
    padding: 0 10px;
  }

  #ls-app .ls-seg button {
    min-width: 0;
    padding: 0 8px;
    font-size: 12px;
  }

  #ls-app .ls-seg__label {
    padding: 0 6px;
  }
}

/* 375pxより狭いスマホ：設定のボタンの余白を詰める */
@media screen and (max-width: 374px) {
  #ls-app .ls-settings {
    gap: 6px 8px;
  }

  #ls-app .ls-seg button {
    padding: 0 5px;
  }
}