@charset "UTF-8";
.nl-page { position:relative; z-index:0; background:#fff; color:#202b25; }
.nl-page #pankuzu a { color:inherit; }
.nl-page .main { background:#fff; background-image:none; }
.nl-page #news { background:#fff; padding:36px 0 64px; }
.nl-page #news .content { width:calc(100% - 48px); max-width:1080px; margin:auto; }
.nl-page .headLine2 { font-size:30px; color:#202b25; margin-bottom:14px; }
.nl-lead { font-size:16px; line-height:1.8; color:#39483f; margin:0 0 26px; }
.nl-tools { background:#f4f7f5; border:1px solid #e0e8e3; border-radius:10px; padding:20px; margin-bottom:24px; }
.nl-categories { display:flex; flex-wrap:wrap; gap:8px; }
.nl-filter { font:inherit; font-size:14px; border:1px solid #cbdad1; border-radius:22px; padding:9px 16px; min-height:44px; background:#fff; color:#24543b; cursor:pointer; }
.nl-filter.is-active { background:#007854; border-color:#007854; color:#fff; }
.nl-filter:hover { border-color:#007854; }
.nl-tools-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
.nl-year-label { font-size:14px; display:flex; align-items:center; gap:10px; }
.nl-year-label select { font:inherit; background:#fff; color:#202b25; border:1px solid #cbdad1; border-radius:6px; min-height:44px; padding:8px 32px 8px 12px; }
.nl-count { font-size:13px; color:#39483f; margin:0; }
.nl-page #news .news_list { list-style:none; padding:0; margin:0; }
.nl-page #news .news_list li { margin:0; padding:0; background:#fff; border:0; border-bottom:1px solid #e0e8e3; box-shadow:none; width:100%; }
.nl-page #news .news_list li[hidden] { display:none !important; }
.nl-page #news .news_list li a { display:flex; align-items:center; gap:22px; padding:16px 8px; color:#202b25; text-decoration:none; background:transparent; }
.nl-page #news .news_list li a:hover { background:#f5faf7; }
.nl-page #news .news_list figure { flex:0 0 84px; width:84px; height:72px; margin:0; }
.nl-page #news .news_list figure img { width:100%; height:100%; object-fit:contain; }
.nl-page #news .news_story { flex:1; min-width:0; width:auto; padding:0; }
.nl-page #news .news_story .date { color:#39483f; font-size:13px; margin-bottom:8px; line-height:1.7; }
.nl-page #news .news_story .date::after { margin-left:12px; border-radius:3px; padding:3px 8px; font-size:11px; }
.nl-page #news .news_story p { font-size:17px; line-height:1.7; margin:0; color:#202b25; overflow-wrap:break-word; }
.nl-empty { padding:28px 12px; font-size:15px; color:#39483f; }
.nl-page .library_back { margin-top:32px; }
.nl-page .library_back a { color:#24543b; font-size:14px; }
.nl-page :is(a,button,select):focus-visible { outline:2px solid #007854; outline-offset:3px; }
@media screen and (max-width:640px) {
 .nl-page #news { padding:24px 0 44px; }
 .nl-page #news .content { width:calc(100% - 32px); }
 .nl-page .headLine2 { font-size:26px; }
 .nl-lead { font-size:14px; }
 .nl-tools { padding:14px; }
 .nl-filter { font-size:13px; padding:8px 12px; }
 .nl-page #news .news_list figure { display:none; }
 .nl-page #news .news_list li a { padding:18px 2px; }
 .nl-page #news .news_story p { font-size:16px; }
}

/* 共通CSSのリンク側の影も解除し、右端の濃い線を除去する。 */
.nl-page #news .news_list li a {
    box-shadow: none;
    border: 0;
    color: #202b25;
    opacity: 1;
}
.nl-page #news .news_story p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font-weight: 500;
}
.nl-page #news .news_list { width: 100%; max-width: none; }
.nl-page #news .news_story .date { color: #39483f; }
.nl-page .nl-lead,
.nl-page .nl-count,
.nl-page .nl-empty,
.nl-page .nl-year-label { color: #39483f; }

/* 選択エリアは細い文字を避け、背景とのコントラストを確保する。 */
.nl-page #news .nl-tools {
    color: #202b25;
    font-family: "Meiryo", "Hiragino Sans", sans-serif;
}
.nl-page #news .nl-tools .nl-filter {
    color: #202b25;
    font-weight: 600;
    opacity: 1;
}
.nl-page #news .nl-tools .nl-filter.is-active {
    color: #fff;
    background: #006b49;
    border-color: #006b49;
}
.nl-page #news .nl-tools .nl-year-label,
.nl-page #news .nl-tools .nl-year-label select,
.nl-page #news .nl-tools .nl-count {
    color: #202b25;
    font-weight: 600;
    opacity: 1;
}
.nl-page #news .nl-tools .nl-year-label select option {
    color: #202b25;
    background: #fff;
}

/* スマートフォンも現場写真を残し、タイトルを最大2行に揃える。 */
@media screen and (max-width: 640px) {
    .nl-page #news .news_list li a {
        gap: 12px;
        padding: 12px 2px;
        min-height: 104px;
        box-sizing: border-box;
    }
    .nl-page #news .news_list figure {
        display: block;
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
        margin: 0;
    }
    .nl-page #news .news_list figure img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .nl-page #news .news_story .date {
        font-size: 12px;
        margin-bottom: 6px;
    }
    .nl-page #news .news_story .date::after {
        margin-left: 6px;
        font-size: 10px;
        padding: 2px 5px;
    }
    .nl-page #news .news_story p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        font-size: 16px;
        line-height: 1.6;
        min-height: 3.2em;
        max-height: 3.2em;
    }
}

/* カテゴリー選択を均等なグリッドに揃える。 */
.nl-page #news .nl-categories {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
.nl-page #news .nl-tools .nl-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 6px;
    line-height: 1.4;
    text-align: center;
    border-radius: 6px;
}
@media screen and (max-width: 900px) {
    .nl-page #news .nl-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media screen and (max-width: 640px) {
    .nl-page #news .nl-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* スマホの記事タイトルを従来の文字サイズ・行間に合わせる。 */
@media screen and (max-width: 640px) {
    .nl-page #news .news_story p {
        font-size: 14px;
        line-height: 1.55;
        letter-spacing: 0;
        font-weight: 400;
        min-height: 3.1em;
        max-height: 3.1em;
    }
}

/* スマホの記事情報を写真に対して上下中央に揃える。 */
@media screen and (max-width: 640px) {
    .nl-page #news .news_list li a {
        align-items: center;
    }
    .nl-page #news .news_list li .news_story {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        padding: 0;
    }
    .nl-page #news .news_list li .news_story p {
        min-height: 0;
    }
}

/* PC・タブレットも記事情報を写真に対して上下中央に揃える。 */
@media screen and (min-width: 641px) {
    .nl-page #news .news_list li a {
        align-items: center;
    }
    .nl-page #news .news_list li .news_story {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-self: center;
        padding: 0;
    }
}

/* お知らせ：共通HERO。高さと文字エリア幅はpage.cssで管理 */
.news-page-hero {
    position: relative;
    isolation: isolate;
    background: #294c43;
    color: #fff;
}
.news-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: no-repeat center 50% / cover;
}
.news-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(9,35,30,.82) 0%, rgba(9,35,30,.64) 36%, rgba(9,35,30,.15) 64%, rgba(9,35,30,.04) 100%);
}
.news-page-hero .news-hero-kicker {
    margin: 0 0 15px;
    color: #e2e5d8;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .06em;
}
.news-page-hero #news-hero-title {
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .08em;
}
.news-page-hero .news-hero-description {
    margin: 0;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 21px;
    line-height: 1.9;
    letter-spacing: .04em;
}

.nl-page .main { border-top: 0; }
.nl-page #pankuzu.agri-breadcrumb + .main > #news { padding-top: 24px; }
@media screen and (max-width: 767px) {
    .news-hero-bg { background-position: 60% center; }
    .news-hero-shade {
        background: linear-gradient(90deg, rgba(9,35,30,.78), rgba(9,35,30,.56) 56%, rgba(9,35,30,.16));
    }
    .news-page-hero #news-hero-title { font-size: 32px; }
    .news-page-hero .news-hero-description { font-size: 18px; }
    .nl-page #pankuzu.agri-breadcrumb + .main > #news { padding-top: 20px; }
}