/* 既存のスタイルに追加 */

/* ナビゲーションボタン */
#news .news_tagbox {
    display: flex;
    gap: 10px;
    list-style-type: none;
    padding: 0;
    margin: 0 0 50px 0; /* 下に50pxのマージンを追加し、左に0pxのマージンを追加 */
    justify-content: flex-start;
    align-items: center; /* 高さを中央揃えにする */
    max-width: 1250px; /* タイトルと同じ幅に設定 */
    box-sizing: border-box;
}

#news .news_tagbox li {
    margin: 0;
}

#news .news_tagbox a {
    display: inline-block;
    padding: 5px 20px;
    border: 1px solid #999;
    background-color: #fff;
    color: #333 !important; /* 文字色を#333に設定 */
    text-decoration: none !important;
    border-radius: 30px; /* より丸みを持たせる */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    margin-right: 10px; /* 左右に少しスペースを追加 */
}

#news .news_tagbox a:hover {
    background-color: #f2f2f2 !important;
    color: #333 !important;
}

#news .news_tagbox a.active {
    border-color: #dc9b76 !important;
    background-color: #f2bfab !important;
    color: #333 !important;
}

#news .news_tagbox a.active:hover {
    background-color: #f2bfab !important;
    opacity: 0.9;
}

/* 記事見出し */
#news .news_down a {
    color: #333 !important;
    text-decoration: none !important;
    position: relative;
    padding-right: 25px; /* 矢印が欠けないように余裕を持たせる */
    display: inline-block;
    width: calc(100% - 25px); /* 矢印が欠けないように余裕を持たせる */
    border-bottom: 1px solid #dcdcdc; /* 薄いラインを追加 */
    padding-bottom: 10px; /* 記事と記事の間をあける */
    margin-bottom: 10px; /* 記事と記事の間をあける */
}

#news .news_down a:hover {
    color: #666 !important;
}

#news .news_down a::after {
    content: '\f105'; /* Font Awesomeの矢印アイコン */
    font-family: 'Font Awesome 5 Free'; /* Font Awesomeのファミリー名 */
    font-weight: 900; /* Font Awesomeのスタイル */
    font-size: 16px;
    color: #666; !important;
    display: inline-block;
    position: absolute;
    right: 5px; /* 矢印の右余白を追加 */
    top: 50%;
    transform: translateY(-50%);
}
        h3.news_title { 
            margin-bottom: 30px;
        font-weight: 200;
        }

/* 年月日 */
#news .news_day {
    color: #333 !important;
    display: inline-block;
    width: 100px;
}
/* 上部にマージンを追加して左に揃える */
#news .news_wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px; /* タイトルと同じ幅に設定 */
    box-sizing: border-box;
    padding-left: 0; /* タイトルと同じ位置に揃える */
}


/* モバイル時のナビゲーションボタン */
@media (max-width: 767px) {
    #news .news_tagbox {
        flex-wrap: wrap;
    }

    #news .news_tagbox a {
        margin-bottom: 10px;
    }
}