.thread-box-outline {
  margin: 20px 0px;
  padding: 0px 0px 0px 0px;

}

.thread-box {
    background-color: #fafafa; /* 背景色を白に設定 */
    position: relative;
    width: 100%; /* 幅を指定（必要に応じて変更） */
    border: none; /* 境界線を無くす */
    outline: none; /* フォーカス時のアウトラインを無くす */
    box-shadow: 0rem 0.1rem 0.1rem rgba(0, 0, 0, 0.05); /* 影を追加 */
    border-radius: 10px;
}

.thread-box a {
    /* display: block; /* ブロック要素にする */
    white-space: nowrap; /*  1行に制限 */
    overflow: hidden; /*  はみ出た部分を隠す */
    text-overflow: ellipsis; /*  省略記号 `...` を表示 */
    max-width: 75%; /* 幅いっぱいにする */
}

.thread-id {
    white-space: nowrap; /*  ID も 1 行に固定 */
}

.thread-title {
    max-width: 20ch; 
    white-space: nowrap; /*  1 行に制限 */
    overflow: hidden; /*  はみ出た部分を隠す */
    text-overflow: ellipsis; /*  省略記号 `...` を表示 */
    flex-shrink: 1; /*  タイトルが縮小可能になる */
}



.pagination-container {
    display: flex;
    gap: 0px;
}

.page-link {
    padding: 6px 12px;
    border: 1px solid #f5f5f5; /* デフォルトのボーダーを薄く */
    border-radius: 0px;
    text-decoration: none;
    color: #8a8a8a; /* デフォルトのリンクの色を薄い黒に変更 */
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.page-link.active {
    color: #25A7B3; /* アクティブなページのテキスト色 */
    border-color: #f5f5f5; /* アクティブなページのボーダー */
    font-weight: bold;
}

.page-link.active::before {
    content: ""; /* 擬似要素でバーを作成 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px; /* 上に表示する細いバーの高さ */
    background-color: #25A7B3; /* バーの色 */
    border-radius: 2px;
}

.page-link:hover {
    background-color: #f5f5f5; /* ホバー時の背景色を少しグレーに */
    border-color: #f5f5f5; /* ホバー時のボーダーを少し濃く */
    color: #777; /* ホバー時のテキスト色を少し濃く */
}

.page-dots {
    padding: 6px 12px;
    color: #777;
}


.search-form {
    display: flex;
    flex-direction: column; /* 縦方向に並べる */
    gap: 10px; /* 上下の間隔 */
    max-width: 600px; /* 必要に応じて幅を調整 */
}

.search-row {
    display: flex;
}

/* 入力フィールド */
.search-input, .search-select {
    flex: 1 1; /* 同じ幅で伸縮 */
    padding: 8px;
    margin: 6px 0px;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: none;
}

.search-input::placeholder {
    color: #999;  /* プレースホルダーの文字の色 */

.search-input:focus, .search-select:focus {
    border-color: #25A7B3;
    outline: none;
    box-shadow: none;
}