/* ==================================================
   お知らせページ (info.htm) メインコンテンツ専用スタイル
   ================================================== */

/* お知らせセクション全体の余白調整 */
.news {
    padding: 30px 15px !important; /* 上下の余白を大幅に削減 */
}

/* 白い枠（inner）の調整 */
.news .inner {
    max-width: 900px; /* 一覧性を出すため少し幅を広げる */
    padding: 15px 20px !important; /* 内部の余白を詰める */
}

/* 「お知らせ」の見出しサイズを抑制 */
.news h2 {
    font-size: 1.1rem !important; /* 文字を小さく */
    margin-bottom: 15px !important; /* 下の隙間を詰める */
    padding-bottom: 3px !important;
}

/* リストアイテムの高さと文字サイズの調整 */
.news_list_item {
    border-bottom: 1px solid #eee;
}

.news_list_item a {
    padding: 8px 5px !important; /* 1行の高さを低く(上下15px→8px) */
    display: flex;
    align-items: center; /* 縦方向中央揃え */
    justify-content: flex-start !important; /* 左詰めに変更 */
    gap: 15px; /* 日付とタイトルの間隔 */
    font-size: 0.9rem; /* 全体の文字サイズを少し小さく */
}

/* 日付部分の調整 */
.news_list_item .date {
    font-size: 0.85rem !important; /* 日付をより小さく */
    color: #777;
    margin-right: 0 !important;
    min-width: 90px; /* 日付の幅を固定して縦を揃える */
    flex-shrink: 0;
}

/* タイトル部分の調整 */
.news_list_item .title {
    flex: 1;
    white-space: nowrap; /* 1行で表示 */
    overflow: hidden;    /* はみ出た分を隠す */
    text-overflow: ellipsis; /* 長い場合は「...」にする */
    text-align: left;
}

/* スマホ表示の最適化 */
@media (max-width: 480px) {
    .news_list_item a {
        flex-direction: row; /* スマホでも横並びを維持 */
        padding: 10px 5px !important;
        font-size: 0.85rem;
    }
    .news_list_item .date {
        min-width: 80px;
    }
}