/* ベーススタイル */
body {
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  background: #111;
  color: #fff;
  text-align: center;
  user-select: none;
}

h1 {
  margin-top: 30px;
  font-size: 1.6em;
  color: #00aaff;
}

/* パスワードボックス */
#authBox {
  margin-top: 100px;
}

#password {
  padding: 10px;
  font-size: 16px;
  width: 250px;
  text-align: center; /* ヒントテキスト中央揃え */
}

/* 検索入力欄 */
#searchBox {
  margin: 30px auto;
}

#filterInput {
  padding: 10px;
  width: 300px;
  max-width: 90%;
  font-size: 16px;
  text-align: center; /* ヒントテキスト中央揃え */
}

/* 注意書きエリア */
#noteBox {
  margin: 10px auto 0;
  font-size: 0.9em;
  color: #ffcc00;
}

/* 表の表示エリア */
#tableWrapper {
  width: 95%;
  margin: 20px auto;
  overflow-x: auto;
  display: none;
}

/* 表のスタイル */
table.dataTable {
  width: max-content;
  min-width: 100%;
  background-color: #fff;
  color: #000;
  border-collapse: collapse;
}

/* DataTables の不要UIを非表示 */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  display: none;
}

/* ヘッダーセル */
th {
  background-color: #333;
  color: #fff;
  padding: 8px;
  text-align: center;
}

/* データセル */
td {
  padding: 6px 12px;
}

/* クラス別の文字位置 */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}

/* モバイル対応 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }

  #filterInput {
    width: 100%;
    font-size: 16px;
  }
}

/* フッター */
footer {
  margin-top: 50px;
  color: #aaa;
  font-size: 0.8em;
}