html {
  font-size: 14px;
}

@media (max-width: 768px) {
html {
    font-size: 12px;
}

h2 {
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 20px;
}

.table {
  width: 100%; /* 全体の幅を100%にする */
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  table-layout: auto; /* 自動で列幅を決定 */
}

.table th.sticky-candidate, .table td.sticky-candidate {
  position: sticky;
  left: 0;
  z-index: 30;
  min-width: 50px; /* 政党列の幅 */
  width: 50px;
  background-color: white; /* 固定列の背景を設定 */
  box-shadow: 2px 0 0 0 #ddd;
}

/* 投票率列の固定スタイル */
.table th.sticky-vote, .table td.sticky-vote {
  position: sticky !important;
  left: 80px !important;  /* 「政党」列の幅に合わせて「投票率」の位置を設定 */
  z-index: 30 !important;
  min-width: 50px !important; /* 投票率の最小幅 */
  width: 50px;
  box-shadow: 2px 0 0 0 #ddd !important;
}


/* 総合列の固定 */
.table th.scroll, .table td.scroll {
  min-width: 60px; /* スクロール項目の幅を設定 */
  width: 60px;     /* スクロール項目の幅 */
  white-space: nowrap; /* テキストの折り返しを防ぐ */
  overflow: hidden; /* テキストが列を超えた場合に隠す */
  text-overflow: ellipsis; /* 溢れたテキストに省略記号を付加 */
}

.table th.sticky-overall, .table td.sticky-overall {
  position: sticky　;
  right: 0;
  z-index: 30;
  min-width: 60px; /* 「総合」列の幅を指定 */
  background-color: white; /* 固定列の背景を設定 */
  box-shadow: 0 0 0 2px #ddd;
}

.table-responsive {
  overflow-x: auto !important;
}

.table td img {
    max-width: 50px;
    height: auto;
}

.btn-primary {
  padding: 5px 10px;
  font-size: 8px;
}
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}