/* =====================================================
   News Article
===================================================== */

:root{
    --main-color:#2f6f3e;
    --main-dark:#1f4f2b;
    --text-color:#333;
    --border-color:#e5e5e5;
    --bg-light:#f8f9fa;

    /* セクション間余白 */
    --section-gap:32px;
}


/* =====================================================
   Layout
===================================================== */

.news-container{
    max-width:900px;
    margin:24px auto;
    padding:0 20px;
}


/* =====================================================
   Header
===================================================== */

.news-header{
    text-align:center;
    margin-bottom:20px;
}

.news-category{
    display:inline-block;
    background:var(--main-color);
    color:#fff;
    padding:6px 14px;
    border-radius:999px;
    font-size:0.9rem;
    font-weight:600;
    margin-bottom:10px;
}

.news-title{
    font-size:2rem;
    font-weight:700;
    line-height:1.5;
    color:#222;
    margin-bottom:10px;
}

.news-date{
    color:#777;
    font-size:0.95rem;
}


/* =====================================================
   Cover Image
===================================================== */

.news-cover{
    margin-bottom:20px;
}

.news-cover img{
    width:100%;
    display:block;
    border-radius:12px;
}

/* =====================================================
   Information Table
===================================================== */

.news-info{
    margin-bottom: var(--section-gap);
    padding: 10px 0 0 0;
}

.news-info h2{
    font-size:1.4rem;
    color:var(--main-dark);
    margin-bottom:16px;
}

.news-info table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.news-info th{
    width:25%;
    background:var(--bg-light);
    font-weight:600;
}

.news-info th,
.news-info td{
    border:1px solid var(--border-color);
    padding:12px 16px;
}


/* =====================================================
   Gallery
===================================================== */

.news-gallery{
    margin-bottom:var(--section-gap);
    padding: 10px 0 0 0;
}

.news-gallery h2{
    font-size:1.4rem;
    color:var(--main-dark);
    margin-bottom:16px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:16px;
}

.gallery-grid img{
    width:100%;
    display:block;
    border-radius:10px;
    transition:.25s;
}

/* .gallery-grid img:hover{
    transform:scale(1.02);
} */


/* =====================================================
   Back Button
===================================================== */

.news-back{
    text-align:center;
    margin-top:40px;
}

.news-back a{
    display:inline-block;
    padding:12px 28px;
    background:var(--main-color);
    color:#fff;
    text-decoration:none;
    border-radius:999px;
    transition:.25s;
}

.news-back a:hover{
    background:var(--main-dark);
}


/* =====================================================
   Optional Quote
===================================================== */

.news-body blockquote{
    margin:1.5em 0;
    padding:1em 1.2em;
    background:#f6f8f7;
    border-left:4px solid var(--main-color);
}


/* =====================================================
   Optional Files
===================================================== */

.news-files{
    margin-bottom:var(--section-gap);
}

.news-files h2{
    font-size:1.4rem;
    color:var(--main-dark);
    margin-bottom:16px;
}

.news-files ul{
    list-style:none;
    padding:0;
}

.news-files li{
    margin-bottom:10px;
}

.news-files a{
    text-decoration:none;
    color:var(--main-color);
}

.news-files a:hover{
    text-decoration:underline;
}


/* =====================================================
   Responsive
===================================================== */

@media (max-width:768px){

    :root{
        --section-gap:20px;
    }

    .news-container{
        margin:24px auto;
        padding:0 16px;
    }

    .news-header{
        margin-bottom:24px;
    }

    .news-title{
        font-size:1.6rem;
    }

    .news-body{
        font-size:1rem;
        line-height:1.9;
    }

    .news-info th,
    .news-info td{
        padding:10px 12px;
    }

    .gallery-grid{
        grid-template-columns:1fr;
    }

}