.news-section {
    background-color: #fff; /* 背景色 */
    padding: 30px; /* 内側のパディング */

    /*width: 100%; /* コンテンツの幅 */
    max-width: 1280px; /* 最大幅 */
    margin: 0 auto;
}

.news-section .button-group {
    display: flex; /* ボタンを横並びに */
    justify-content: center; /* 中央寄せ */
    margin-bottom: 30px; /* 下のマージン */
}

.news-section .button-group button {
    background-color: #eee; /* ボタンの背景色 */
    border: 1px solid #ccc; /* ボタンの枠線 */
    padding: 10px 20px; /* ボタンの内側のパディング */
    margin: 0 5px; /* ボタン間のマージン */
    cursor: pointer; /* カーソルをポインターに */
    font-size: 1em; /* フォントサイズ */
    transition: background-color 0.3s ease; /* ホバー時の変化を滑らかに */
}

.news-section .button-group button:hover {
    background-color: #ddd; /* ホバー時の背景色 */
}

.news-section .button-group button.active {
    background-color: #007bff; /* アクティブなボタンの背景色 */
    color: #fff; /* アクティブなボタンの文字色 */
    border-color: #007bff; /* アクティブなボタンの枠線色 */
}

.news-section h2 {
    text-align: center; /* 見出しを中央寄せ */
    margin-bottom: 30px; /* 下のマージン */
    color: #333; /* 見出しの色 */
    font-family: "Zen Old Mincho";
    font-size: 2em;
    font-weight: 550;
    letter-spacing: 0.05em;
  }

.news-section h2::before {
  content: '';
  display: inline-block;
  width: 25px;  /* 画像サイズ */
  height: 7px;
  margin-right: 8px;  /* 文字との間隔 */
  vertical-align: middle;
  background-image: url('images/title-en-before.svg'); /* 画像のパス */
  background-size: contain;
  background-repeat: no-repeat;
}


.news-date {
    font-family: "Times New Roman";
    color: #333;
}

.news-catName {
    color: #333;
    font-size: 0.8em;
}

.news-title {
    color: #333;
    font-size: 1.2em;
}


.news-area {
    display: flex;
    justify-content: center;
    max-width: 1200px;

}

.category-sidebar {
    display: flex;
    flex-direction: column;
    width: 20%
}

.category-sidebar h3 {
    font-family: "Libre Baskerville";
    font-weight: 400;
    color: #333;
}

.category-btn {
    text-decoration: none;
    color: #333;
    margin: 1em 0;

    transition: all 0.3s ease;
}

.category-btn:hover {
    opacity: 0.8;
}

.category-selected {
    color: #fff;
    background-color: #19679A;

    padding: 5px 20px;
    border-radius: 25px;
}

.news-contentArea {
    display: flex;
    flex-direction: column;
    width: 80%;
}

.news-content {
    display: flex;
    width: 100%;
    gap: 30px;
    border-bottom: 1px solid #e0e0e0; /* 各ニュースの下に線 */
    padding: 16px 0; /* 上下余白 */

    text-decoration: none;
    transition: all 0.3s ease;
}

.news-content:hover {
    opacity: 0.8;
}

.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 3em;
}

.pagination-arrow-back {
    transform: rotate(180deg);

}

.pagination-number {
    color: #333;
    font-family: "Times New Roman";
    text-decoration: none;
    
    margin: 0 0.8em;
}

/* レスポンシブデザインの調整（必要に応じてブレークポイントごとにスタイルを調整） */
@media (max-width: 768px) {
    main.flex-col.md\:flex-row {
        flex-direction: column; /* 画面が狭い場合は縦並びに */
    }

    aside.md\:w-1\/4 {
        width: 100%; /* サイドバーを全幅に */
        margin-bottom: 1.5rem; /* 下に余白を追加 */
        padding-right: 0; /* 右のパディングをなくす */
    }

    section.md\:w-3\/4 {
        width: 100%; /* お知らせリストを全幅に */
    }

    .news-area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 1200px;
        gap: 50px;
    }

    .category-sidebar {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }

    .category-sidebar h3 {
        display: none;
    }

    .category-btn {
        margin: 1em 1em;
    }
}


/**********************投稿ページここから**********************/

.news-page-section {
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 10em auto 0 auto;
    padding: 0 4em;
}

.news-page-titleArea {
    width: 100%;
    gap: 30px;
    border-bottom: 1px solid #e0e0e0; /* 各ニュースの下に線 */
    padding: 16px 0; /* 上下余白 */
}

.news-page-title {
    font-family: "Zen Old Mincho";
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
}

.news-page-content {
    width: 100%;
    margin-top: 2em;
    color: #333;
}