/*
 * お知らせ本文（the_content の出力）と一覧のページ送り。手書き（import-upstream.mjs の生成物ではない）。
 *
 * Tailwind の preflight が p / ul / h2 などの余白と装飾を全てリセットするため、管理画面で書かれた本文は
 * そのままだと段落も箇条書きも潰れて表示される。本文は宿の方が自由に書くのでクラスを付けられず、要素セレクタで当てる。
 * 値は上流の本文スタイル（Shippori Mincho 16px/32px、#4A5456）に合わせている。
 */
.nk-entry {
  font-family: "Shippori Mincho", system-ui, sans-serif;
  font-size: 16px;
  line-height: 32px;
  color: #4a5456;
  overflow-wrap: anywhere;
}
.nk-entry > * + * { margin-top: 1.5em; }
.nk-entry h2, .nk-entry h3, .nk-entry h4 { color: #2e3334; font-weight: 500; line-height: 1.6; margin-top: 2.4em; }
.nk-entry h2 { font-size: 24px; padding-bottom: 0.5em; border-bottom: 1px solid #e8eeea; }
.nk-entry h3 { font-size: 20px; }
.nk-entry h4 { font-size: 17px; }
.nk-entry a { color: #4a5d5b; text-decoration: underline; text-underline-offset: 3px; }
.nk-entry a:hover { opacity: 0.7; }
.nk-entry ul, .nk-entry ol { padding-left: 1.5em; }
.nk-entry ul { list-style: disc; }
.nk-entry ol { list-style: decimal; }
.nk-entry img, .nk-entry video, .nk-entry iframe { max-width: 100%; height: auto; }
.nk-entry iframe { aspect-ratio: 16 / 9; width: 100%; }
.nk-entry figcaption { font-size: 13px; line-height: 1.8; color: #6a7a79; margin-top: 0.5em; }
.nk-entry blockquote { padding-left: 1.2em; border-left: 2px solid #bfa170; }
.nk-entry table { width: 100%; border-collapse: collapse; font-size: 15px; }
.nk-entry th, .nk-entry td { padding: 0.6em 0.8em; border: 1px solid #e8eeea; text-align: left; vertical-align: top; }
.nk-entry th { background: #f0f4f3; color: #2e3334; font-weight: 500; }
/* 旧テーマ時代の記事に残る配置クラス */
.nk-entry .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.nk-entry .alignleft { float: left; margin: 0 1.5em 1em 0; }
.nk-entry .alignright { float: right; margin: 0 0 1em 1.5em; }
.nk-entry::after { content: ""; display: block; clear: both; }

.nk-cats a { display: inline-block; padding: 4px 10px; background: #e8eeea; border-radius: 2px; color: #4a5d5b; text-decoration: none; }

.nk-pagination .nav-links { display: flex; justify-content: center; gap: 8px; font-family: "Cormorant Garamond", system-ui, serif; font-size: 16px; }
.nk-pagination .page-numbers { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e8eeea; border-radius: 2px; color: #4a5d5b; text-decoration: none; }
.nk-pagination .page-numbers.current { background: #4a5d5b; border-color: #4a5d5b; color: #f0f4f3; }
.nk-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/*
 * お知らせ系のコンパクトなヒーロー。下層ページの Page Hero は全画面（100svh / 最大820px）だが、
 * お知らせは「告知を探しに来る」ページなので、1画面ぶんスクロールしないと一覧が見えないのは使いにくい。
 * ヘッダー（72px）が重なる分を足した高さにしている。セレクタは header-overlay.css の指定に詳細度で勝つ形。
 */
body:not([data-page="top"]) main > [data-pencil-name="Page Hero"].page-hero--compact:first-child {
  height: 372px;
  min-height: 372px;
  --hero-content-reserve: 200px;
}
@media (min-width: 768px) {
  body:not([data-page="top"]) main > [data-pencil-name="Page Hero"].page-hero--compact:first-child {
    height: 432px;
    min-height: 432px;
  }
}
/* 全画面ヒーローは下部固定バーを避けて内容を 88px 持ち上げているが、コンパクト版は画面下端に届かないので不要 */
@media (max-width: 767px) {
  .page-hero--compact .page-hero__content { bottom: 40px; }
}