/* お知らせ（news）の一覧と詳細。mockups/main-plan/blog-info.html の簡素版を元にしている。
   お知らせの 9 割は写真が無い（アイキャッチが「NO IMAGE」の代わりの画像）ので、文字だけで成り立つ形にする */

/* 詳細：見出しまわり */
.info-head { max-width: 760px; margin: 0 auto; }
.info-head .cat-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: #FFF7ED; color: #C2410C; border: 2.5px solid var(--bd-ink, #45362B); border-radius: 999px; padding: 4px 14px; font-weight: 800; font-size: 0.82rem; box-shadow: 2px 2px 0 var(--bd-ink, #45362B); }
.info-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.45; margin: 16px 0 12px; }
.info-head .info-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.84rem; color: var(--text-secondary, #6b6257); font-weight: 600; }
/* 写真があるお知らせだけ、見出しの下に出す。チラシやポスターが多いので、切り取らずに全体を縮めて出す */
.info-photo { margin-top: 26px; }
.info-photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; margin: 0 auto; border: 3px solid var(--bd-ink, #45362B); border-radius: 16px; box-shadow: 6px 6px 0 var(--amber-100, #FEF3C7); }

/* 詳細：本文 */
.info-body { max-width: 760px; margin: 0 auto; }
.info-body.article-body { margin-top: 0; }

/* 一覧（お知らせ一覧と「他のお知らせ」） */
.news-list { border: 3px solid var(--bd-ink, #45362B); border-radius: 16px; overflow: hidden; box-shadow: 5px 5px 0 var(--amber-100, #FEF3C7); background: #fff; margin-top: 16px; }
.news-list a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; text-decoration: none; color: inherit; border-bottom: 2px solid #F0E5D8; transition: background .12s; }
.news-list a:last-child { border-bottom: none; }
.news-list a:hover { background: #FFFBF5; }
.news-list .nl-date { font-size: 0.78rem; color: var(--text-muted, #8a7f72); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.news-list .nl-t { font-weight: 700; font-size: 0.92rem; line-height: 1.6; }
.news-list .nl-arrow { color: #EA580C; font-weight: 800; }
.news-list-wrap { max-width: 760px; margin: 0 auto; }
.news-more { margin-top: 18px; }

/* スマホ：日付を上、タイトルを下に。矢印は右端 */
@media (max-width: 560px) {
	/* パンくずは右寄せで折り返さないため、記事名が長いと左端の「トップ」が画面の外に切れる。
	   左寄せで折り返し、記事名（真下の見出しと同じ）は画面の幅で省略する */
	.info-head .breadcrumb { flex-wrap: wrap; justify-content: flex-start; row-gap: 10px; }
	.info-head .breadcrumb .here { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
	.news-list a { grid-template-columns: 1fr auto; grid-template-areas: "date arrow" "title arrow"; row-gap: 2px; padding: 13px 16px; }
	.news-list .nl-date { grid-area: date; }
	.news-list .nl-t { grid-area: title; }
	.news-list .nl-arrow { grid-area: arrow; }
}