/* お知らせセクション全体 (ここは変更なし) */
.announcements {
    width: 90%;
    margin: 30px auto 0;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ★★★ここから追加・修正★★★ */

/* 2つのお知らせボックスに共通のスタイルを適用 */
.announce_events,
.announce_practice {
    width: 100%; /* 親要素(.announcements)に対して100%の幅を持つように指定 */
    max-width: 800px; /* ボックスが広がりすぎないように最大幅も指定 */
    background-color: #fdfdfd; /* ボックスの領域が分かりやすいように背景色を指定 */
    border: 1px solid #eee; /* 境界線を引く */
    border-radius: 8px; /* 角を丸くする */
    padding: 1em; /* 内側の余白 */
    box-sizing: border-box; /* paddingとborderをwidthに含めて計算する */
    margin-bottom: 20px; /* ボックス間の余白 */
}
/* 最後のボックスの下には余白は不要な場合 */
.announce_practice {
    margin-bottom: 0;
}


/* テーブルのスタイルを修正 */
.announce_events table,
.announce_practice table {
    width: 100%;
    /* max-width: 600px; テーブル自体の最大幅は不要になるのでコメントアウト */
    margin: 0; /* ボックス内で余白は不要なので0に */
    border-collapse: collapse;
}

/* ★★★ここまで追加・修正★★★ */


/* 日付を表示するth要素のスタイル（ここは変更なし） */
.dayOfAnnouncements { 
    color: #f97948; 
    width: 120px; 
    padding: 8px; 
    border-bottom: 1px solid #ddd; 
} 

/* お知らせ内容を表示するtd要素のスタイル（変更なし） */ 
.announce_events td, 
.announce_practice td { 
    text-align: left; 
    padding: 8px; 
    border-bottom: 1px solid #ddd; 
} 

/* ヘッダー行全体のスタイルを定義 */
.header-row {
    background-color: #f2f2f2; /* 薄いグレーの背景色 */
    border-bottom: 2px solid #ccc; /* 少し濃くて太い下線 */
}

.header-row th, 
.header-row td { 
    font-size: 1.2em;
    font-weight: bold;
    text-align: center; /* ヘッダーのテキストを中央揃えに */
    padding: 12px 8px; /* 上下のパディングを少し広げる */
    border-bottom: none; /* 個別のセルの下線をなくし、行全体の下線に統一 */
} 

/* ヘッダー行の日付部分のスタイル */
.header-row .dayOfAnnouncements { 
    color: #f97948; /* テーマカラーを維持 */
}