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


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

.page-content{

    max-width:1100px;
    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 a{

    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 li a:hover{

    background:#f5f5f5;

}

.news-index-list .news-date{

    width:130px;
    flex-shrink:0;

}

.news-index-list .news-text{

    flex:1;

}


/* ---- カレンダー ---- */

.calendar-legend{

    text-align:right;
    margin-bottom:20px;

}

.calendar-legend p{

    font-size:clamp(13px,1.5vw,16px);
    color:#222;
    margin-bottom:8px;

}

.holiday-circle{

    display:inline-block;

    width:16px;
    height:16px;

    border:2px solid #e33;
    border-radius:50%;

    margin-right:6px;
    vertical-align:middle;

}

.calendar-image img{

    width:90%;
    height:auto;
    display:block;
    margin:0 auto;

}


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

@media(max-width:600px){

    .page-content{

        padding-top:170px;

    }

    .news-index-list li a{

        flex-direction:column;
        gap:2px;
        padding:10px 4px;

    }

    .news-index-list .news-date{

        width:auto;
        font-weight:700;

    }

}