/*
info.css
News と Information セクションの追加スタイル
*/

/* dl要素のデフォルトマージンをリセット */
.news-box dl,
.info-box dl {
    margin: 0;
    padding: 0;
}

/* 各お知らせ項目 */
.news-item,
.info-item {
    /* style.cssのmargin-bottomを打ち消し、paddingで内側の余白を調整 */
    margin-bottom: 0;
    padding: 0.5rem 0;
}

/* お知らせ項目のリンクエリア */
.news-item a,
.info-item a {
    display: flex;
    align-items: baseline; /* テキストのベースラインを揃える */
    gap: 1.5em; /* 日付とタイトルの間隔 */
    padding: 1rem 0.5rem; /* 上下のクリック領域を確保 */
    transition: background-color 0.3s ease;
    border-radius: 4px;
}

/* style.cssのホバー効果（文字色変更）に加えて、背景色も変更 */
.news-item a:hover,
.info-item a:hover {
    background-color: #f8f4fa;
}

/* 日付 (dt) */
.news-item dt,
.info-item dt {
    flex-shrink: 0; /* 幅が縮まないようにする */
    /* style.cssの.font-size-Sが適用されていることを想定 */
    color: #666;
    width: 120px; /* 日付の表示幅を確保 */
}

/* タイトル (dd) */
.news-item dd,
.info-item dd {
    /* dd要素のデフォルトマージンをリセット */
    margin: 0;
    flex-grow: 1; /* 残りの幅を埋める */
}

/*
「もっと見る」ボタン用の追加CSS
*/

/* ボタンを配置するコンテナ（右寄せにする） */
.news-more,
.info-more {
    text-align: right;
    margin-top: 1rem; /* 上のリストとの間隔 */
}

/* ボタンのスタイル調整 */
.news .btntextchange,
.info .btntextchange {
    border-color: #ccc; /* 枠線の色を少し薄く */
    padding: 0.8rem 2.5rem; /* ボタンのサイズを調整 */
    border-radius: 30px; /* 角を丸くする */
}

/* ボタン内のテキスト（spanタグ）の色の問題を修正 */

/* 通常時のテキスト「もっと見る」の色 */
.news .btntextchange span:nth-child(1),
.info .btntextchange span:nth-child(1) {
    color: #555; /* 見えるように濃いグレーに設定 */
    opacity: 1; /* 確実に表示 */
}

/* ホバー時に表示されるテキスト「More」の色 */
.news .btntextchange span:nth-child(2),
.info .btntextchange span:nth-child(2) {
    color: #fff; /* ホバー時の背景は黒なので白のまま */
}

/* ボタンにマウスを乗せた時の背景色と文字色 */
.news .btntextchange:hover,
.info .btntextchange:hover {
    background-color: #333;
    border-color: #333;
}


/* --- レスポンシブ対応 (幅768px以下) --- */
@media (max-width: 768px) {
    .news-item a,
    .info-item a {
        /* 縦並びにする */
        flex-direction: column;
        align-items: flex-start; /* 左揃え */
        gap: 0.2em; /* 間隔を狭める */
        padding: 0.8rem 0.5rem;
    }

    .news-item dt,
    .info-item dt {
        width: auto; /* 幅の固定を解除 */
        font-size: 0.9em; /* 日付の文字を少し小さく */
        color: #888;
    }
}