body {
    font-family: Arial, sans-serif;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    color: #191970; /* ミッドナイトブルー */
}

/* テーブルのスタイル */
#resultsTable {
    width: 100%;           /* テーブルの幅を最大に */
    border-collapse: collapse; /* セルのボーダーを重ねる */
    margin-top: 20px;      /* 上の余白 */
    counter-reset: rowCount; /* 行番号をリセット */
}

#resultsTable > tbody > tr {
    counter-increment: rowCount; /* 行番号をインクリメント */
}

#resultsTable > tbody > tr > td:first-child::before {
    content: counter(rowCount); /* 行番号を表示 */
    color: #999;            /* 行番号の文字色を薄く */
}

#resultsTable th,
#resultsTable td {
    padding: 10px;          /* セル内の余白 */
    border: 1px solid #e0e0e0; /* セルのボーダー色 */
    text-align: left;       /* テキストを左揃え */
}

#resultsTable th {
    background-color: #e6f7ff; /* 薄いブルー系の背景色 */
    color: #191970;        /* ヘッダの文字色 (ミッドナイトブルー) */
    font-weight: bold;     /* ヘッダの文字を太く */
}

#resultsTable tr:nth-child(even) {
    background-color: #f5f5f5; /* 偶数行の背景色を薄く */
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button-container {
    margin-left: auto;
}

.rounded {
    border-radius: 8px;
}

.rounded-button {
    cursor: pointer;
    border: solid 1px gray;
    border-radius: 8px;
    opacity: 0.75;
}

.rounded-button:hover {
    opacity: 1;
}