/* 見出し→一覧と同じ1.5remで、隣り合う節の余白の二重取りを解消。 */
.news { padding-bottom: 0; }
.news + .posts { padding-top: 1.5rem; }
.news-page .posts-title { margin: 0 0 1.5rem; font-family: "Mochiy Pop One",var(--font-sans); font-weight: 400; letter-spacing: .02em; font-size: clamp(1.5rem,3vw,2rem); line-height: 1.35; }
.article-hero img { display: block; object-fit: contain; background: var(--sun); }
.article-prose .news-feature { width: 100%; max-width: 30rem; margin: 1.75rem auto; }
.article-prose .news-feature img { width: 100%; height: auto; }

.news-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.news-list li + li { border-top: 1px solid var(--border); }
.news-row { display: grid; grid-template-columns: 9rem auto 1fr auto; align-items: center; gap: 1.25rem; min-height: 5rem; padding: 1.25rem 1.5rem; color: inherit; text-decoration: none; }
.news-row:hover { background: var(--muted); }
.news-row time { font-size: .75rem; font-weight: 500; color: var(--muted-foreground); }
.news-row b { font-size: 1rem; font-weight: 800; line-height: 1.55; }
.news-arrow { color: var(--muted-foreground); }
@media (max-width: 640px) {
 .news-row { grid-template-columns: auto 1fr auto; gap: .5rem .75rem; padding: 1.1rem; }
 .news-row b { grid-column: 1 / 3; grid-row: 2; font-size: .9375rem; line-height: 1.5; }
 .news-arrow { grid-column: 3; grid-row: 1 / 3; }
}

.news-row .posts-kicker { justify-self: start; padding: .1rem .7rem; border-radius: 999px; background: var(--accent); font-size: .75rem; font-weight: 800; line-height: 1.8; }

/* お知らせの行は、作った人のカード(.maker-card)と同じく、マウスを重ねると少し浮いて影がふわっと出る。 */
.news-list { overflow: visible; }
.news-row { position: relative; border-radius: var(--radius-lg); transition: box-shadow .35s var(--ease, cubic-bezier(.2,.8,.2,1)), translate .35s var(--ease, cubic-bezier(.2,.8,.2,1)), background-color .35s var(--ease, cubic-bezier(.2,.8,.2,1)); }
.news-row:hover { z-index: 1; translate: 0 -3px; background: var(--card); box-shadow: 0 22px 36px -22px rgb(32 8 4 / .38); }
@media (prefers-reduced-motion: reduce) { .news-row { transition: none; } .news-row:hover { translate: none; } }