.container {
    max-width: 960px;
    margin: auto;
    padding: 20px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form-group {
    display: flex;
    flex-direction: column; /* この設定により、ラベルと入力が縦並びになる */
    margin-right: 20px; /* グループ間のスペース */
    flex-basis: calc(50% - 20px); /* グループの基本幅を50% - マージン */
}

.form-group label {
    margin-bottom: 5px;
}

.form-control {
    width: 100%; /* 入力要素の幅を親要素の100%にする */
}

.btn-submit {
    margin-top: 20px; /* 検索ボタンのマージン調整 */
}

.results-table {
    width: 100%;
    border-collapse: collapse; /* セルの罫線を1本にまとめる */
    margin-top: 20px; /* 上部の余白 */
}

.results-table th,
.results-table td {
    border: 1px solid #ccc; /* 灰色の罫線 */
    padding: 8px; /* 内側の余白 */
    text-align: left; /* テキストは左寄せ */
}

.results-table th {
    background-color: #f4f4f4; /* 見出し行の背景色 */
    font-weight: bold; /* フォントを太字に */
}

.results-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* 奇数行の背景色 */
}