/* =====================================================
   お知らせページ（news.html）専用パーツ
   ※ page-heading / page-section は common-additions.css を読み込んで使用。
===================================================== */


/* ---- コンテンツ幅（hero無しページなのでヘッダー分の上余白を確保） ---- */

.page-content{

    max-width:1000px;
    margin:0 auto;
    padding:180px 5% 60px;

}


/* ---- お知らせ一覧 ---- */

.news-index-list{

    list-style:none;

}

.news-index-list li{

    border-bottom:1px dashed #bbb;

}

.news-index-list li:first-child{

    border-top:1px dashed #bbb;

}

.news-index-list li .news-item{

    display:flex;
    gap:5%;
    padding:12px 4px;

    color:#222;
    text-decoration:none;

    font-size:clamp(12.5px,1.4vw,15px);
    line-height:1.7;

    transition:.2s;

}



.news-index-list .news-date{

    width:130px;
    flex-shrink:0;

}

.news-index-list .news-text{

    flex:1;

}


/* ---- お知らせ本文内の画像（2枚並ぶときは横並び） ---- */

.news-index-list .news-images{

    display:flex;
    gap:2%;
    margin:8px 0;

}

.news-index-list .news-images img{

    flex:1 1 0;
    min-width:0;
    width:100%;
    height:auto;
    display:block;

}




/* ---- レスポンシブ ---- */

@media(max-width:600px){

    .page-content{

        padding-top:170px;

    }

    .news-index-list li .news-item{

        flex-direction:column;
        gap:2px;

        padding:10px 4px;

    }

    .news-index-list .news-date{

        width:auto;
        font-weight:700;

    }

    .news-index-list .news-images{

        flex-direction:column;

    }

}