/* 取材コンテンツ一覧。トップの「メディア掲載情報」の「もっと見る」先。 */

body.page-contents { background: var(--color-black); }

.contents-list { padding-top: 56px; padding-bottom: 100px; }

/* トップのカードから #c<id> で飛んでくる着地点。
   ヘッダー(.site-header--full)が sticky 64px で上に居座るので、
   そのぶん余白を確保しないと見出しがヘッダーの下に潜る。 */
.contents-item { margin-bottom: 64px; scroll-margin-top: 80px; }
.contents-item:last-child { margin-bottom: 0; }

.contents-item__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.contents-item__title { font-size: 1.05rem; font-weight: 500; line-height: 1.7; letter-spacing: 0.06em; color: var(--color-text-white); }
.contents-item__date {
  margin-bottom: 20px;
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.14em; color: var(--color-text-muted);
}

/* 管理画面から入る写真は縦横比がまちまちなので、高さを抑えて記事一覧としての見通しを保つ。 */
.contents-item__photo { margin-bottom: 24px; border-radius: 8px; overflow: hidden; }
.contents-item__photo img { width: 100%; max-height: 420px; object-fit: cover; }

/* 本文は管理画面のリッチテキストがそのまま入るので、来る可能性のある要素に一通り当てる。 */
.contents-item__body {
  font-size: 0.9rem; line-height: 2.1; letter-spacing: 0.04em; color: var(--color-text-cream);
  overflow-wrap: anywhere;
}
.contents-item__body > :last-child { margin-bottom: 0; }
.contents-item__body p { margin-bottom: 20px; }
.contents-item__body a { color: var(--color-gold-light); text-decoration: underline; }
.contents-item__body img { height: auto; }
/* base.css が ul の list-style を落としているので、本文の箇条書きには戻してやる。 */
.contents-item__body ul { list-style: disc; }
.contents-item__body ul,
.contents-item__body ol { margin-bottom: 20px; padding-left: 1.4em; }
.contents-item__body li { margin-bottom: 8px; }

/* ページャ（news / diary と同じ形）。 */
.contents-pager { margin-top: 64px; text-align: center; }
.contents-pager__count {
  margin-bottom: 16px;
  font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--color-text-muted);
}

.contents-empty {
  padding: 40px 0; text-align: center;
  font-size: 0.9rem; letter-spacing: 0.04em; color: var(--color-text-muted);
}
