/* rod/reel list.css */
.list-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
}

.list-header{
  margin: 10px auto;
}

.container-inner{
  height: auto;
  width: 100%;
  overflow: hidden;
  margin: 0px auto;
}

.list-wrapper {
  max-height: 50vh;
  max-width: 90%;
  overflow-x: auto;  /* 横スクロールを有効にする */
  border: 1px solid #ccc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
  border-radius: 8px; 
  background-color: white;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto; /* 列幅を固定 */
}

th, td {
  padding: 6px 12px; 
  border-bottom: 1px solid #ddd; 
  border-left: 1px solid #eee;
  text-align: left;
  text-overflow: ellipsis; /* 長いテキストを省略表示 */
  font-size: 14px;
  white-space: nowrap; /* 文字の折り返しを禁止 */
  text-align: center;
}

th {
  background-color: #0000aa;
  color: antiquewhite;
  position: sticky; 
  top: 0;
  cursor: pointer; 
  z-index: 1;
}

th:first-child {
  position: sticky;
  left: 0; /* 左端固定 */
  top: 0; /* 上部固定 */
  z-index: 3;
}

td:first-child {
  position: sticky;
  left: 0; /* 左端固定 */
  background-color: #f9f9f9;   
  z-index: 2; 
}

thead th {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
}

tbody tr:nth-child(odd) { 
  background-color: #f9f9f9; 
} 

tbody tr:nth-child(even) { 
  background-color: #ffffff; 
} 

tbody tr:hover { 
  background-color: #f1f1f1; 
} 

thead th:hover { 
  background-color: #4e44ad; 
}

.list-text{
  text-align: center;
  margin: 10px auto;
}

.list-data{
  margin-top: 15px;
  text-align: center;

  font-size: 0.8rem;
  font-style: italic;
  color: #505050;

}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  th, td {
    font-size: 14px;
  }

  .list-wrapper {
    max-height: 55vh; 
  }
}