/* style.css / utilities.css より後に読み込みます。CMS部分だけの追加スタイル。 */
#news [hidden], .diary-teaser[hidden], .diary-teaser [hidden],
#archive [hidden], #diary-view .diary-list [hidden] { display: none !important; }
.cms-items { display: grid; gap: 24px; min-width: 0; }
.cms-richtext { line-height: 1.95; overflow-wrap: anywhere; min-width: 0; }
.cms-richtext > :first-child { margin-top: 0; }
.cms-richtext > :last-child { margin-bottom: 0; }
.cms-richtext p { margin: 0 0 1em; }
.cms-richtext img, .cms-items .diary-image img {
  display: block; max-width: 100%; height: auto; margin: 20px auto;
}
.cms-richtext figure { margin: 24px 0; }
.cms-richtext figcaption { text-align: center; font-size: .85em; }
.cms-richtext a { color: #1667a5; text-decoration: underline; text-underline-offset: .2em; }
.cms-richtext ul, .cms-richtext ol { padding-inline-start: 1.6em; margin-block: 1em; }
.cms-richtext ul { list-style: disc; }
.cms-richtext ol { list-style: decimal; }
.cms-richtext h3, .cms-richtext h4, .cms-richtext h5, .cms-richtext h6 {
  margin: 1.6em 0 .7em; padding: .5em .7em; background: #fff;
  border-left: 4px solid #82c9f5; color: #24628f; font-size: 1.1em;
}
.cms-richtext blockquote { margin-inline: 0; padding: 12px 18px; border-left: 3px solid #82c9f5; background: #f1faff; }
.cms-richtext pre { max-width: 100%; overflow-x: auto; padding: 16px; background: #eef7fc; }
.cms-richtext table { display: block; overflow-x: auto; border-collapse: collapse; max-width: 100%; }
.cms-richtext th, .cms-richtext td { border: 1px solid #b4d8ef; padding: 8px 12px; }
.notice .notice-top .cms-news-heading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0; padding: 0; border: 0; background: none;
  font: inherit; line-height: 1.8; letter-spacing: inherit;
}
.cms-news-body {
  max-width: 720px;
  margin: 20px auto 32px;
  padding: 40px 20px;
  border: 2px dotted #a2d3f5; background: #ffffffb3;
  text-align: left;
  font-size: clamp(18px, 1.25vw, 18px);
  text-align: center;
}
.cms-news-body:empty { display: none; }
.cms-archive-entry { border-top: 1px dashed #9ccbed; padding-top: 20px; }
.cms-archive-entry .entry-head { margin-bottom: 14px; }
#archive .cms-richtext p { border: 0; padding: 0; margin-bottom: 1em; }
.cms-status { text-align: center; font-size: 14px; color: #315e7c; }
.cms-status:empty { display: none; }
.cms-load-button {
  display: block; margin: 20px auto 8px; padding: 12px 24px;
  border: 2px solid #69afe1; border-radius: 8px; background: #fff;
  color: #255f88; box-shadow: 0 4px 0 #b5dcf4; font: inherit; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.cms-load-button:hover { background: #eaf7ff; }
.cms-load-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #b5dcf4; }
.cms-load-button:focus-visible { outline: 3px solid #337eb7; outline-offset: 4px; }
.cms-load-button:disabled { opacity: .6; cursor: wait; }
/* ページ切り替えは一覧を置き換えます。記事数は常に最大5件。 */
.cms-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: clamp(8px, 2vw, 20px); margin: 32px 0 12px;
}
.cms-page-button {
  min-height: 44px; padding: 10px 18px; border: 1px solid #69afe1;
  border-radius: 6px; color: #255f88; background: #fff;
  box-shadow: 0 3px 0 #b5dcf4; font: inherit; font-size: 14px;
  cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s;
}
.cms-page-button:not(:disabled):hover { background: #eaf7ff; }
.cms-page-button:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #b5dcf4; }
.cms-page-button:focus-visible { outline: 3px solid #337eb7; outline-offset: 4px; }
.cms-page-button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.cms-page-indicator { color: #315e7c; font-size: 13px; text-align: center; }
.cms-items { scroll-margin-top: 24px; }
.cms-items:focus-visible { outline: 2px solid #69afe1; outline-offset: 6px; }
@media (max-width: 600px) {
  .cms-news-body { padding: 16px 12px; font-size: 15px; }
  .cms-page-button { padding: 10px 12px; font-size: 12px; }
  .cms-page-indicator { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cms-load-button, .cms-page-button { transition: none; } }

/* JavaScript無効時の案内。サンプル記事はHTMLから撤去済みです。 */
.cms-noscript { margin: 20px; padding: 16px; border: 1px solid #8bc6f1; background: #fff; }
.cms-status { overflow-wrap: anywhere; }

/* 表示の微調整：この数値だけで、トップのお知らせ内の間隔を変更できます。
   line-height = 同じ段落内の行間、paragraph-gap = 段落(<p>)同士の間隔。
   CMS本文に空の段落や連続した<br>がある場合、その空行は別に残ります。 */
#news-body {
  --news-line-height: 1.8;
  --news-paragraph-gap: .6em;
  line-height: var(--news-line-height);
}
#news-body p { margin: 0; }
#news-body p + p { margin-top: var(--news-paragraph-gap); }

/* 日記本文：段落の間隔は残し、従来の1emから少し狭めます。 */
#diary-view .cms-richtext { --diary-paragraph-gap: .65em; }
#diary-view .cms-richtext p { margin: 0 0 var(--diary-paragraph-gap); }
#diary-view .cms-richtext > p:last-child { margin-bottom: 0; }

/* CMSで明示した改行を表示します。画面上の行数や文字数では切りません。 */
.diary-teaser p { white-space: pre-line; }

/* トップの日記紹介の最後に表示する更新日。 */
.diary-teaser .diary-teaser-updated { margin-top: .8em; line-height: 1.5; }
.diary-teaser-updated time { white-space: nowrap; }

/* 更新から72時間以内の丸い印。本の右上に表示します。 */
.diary-teaser .diary-art { position: relative; }
.diary-recent-badge { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; z-index: 1; }
.diary-recent-badge svg { display: block; width: 100%; height: 100%; }

/* 日記画像の拡大。元ページのスクロール位置は動かしません。 */
#diary-view .diary-entry img { cursor: zoom-in; }
#diary-view .diary-entry img:focus-visible { outline: 3px solid #2786d1; outline-offset: 4px; }
body.diary-lightbox-open { overflow: hidden; }
.diary-lightbox {
  box-sizing: border-box; width: max-content; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  margin: auto; padding: 10px; overflow: auto;
  border: 1px solid #82c9f5; background: #f4fbff; color: #185384;
  box-shadow: 0 8px 35px #10324a70;
}
.diary-lightbox:not([open]) { display: none; }
.diary-lightbox::backdrop { background: #091e34bc; }
.diary-lightbox-panel { display: grid; justify-items: center; gap: 8px; }
.diary-lightbox-panel img {
  display: block; width: auto; height: auto; object-fit: contain; margin: 0;
  max-width: min(90vw, 1200px); max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px);
}
.diary-lightbox-close {
  justify-self: end; min-height: 44px; padding: 6px 14px;
  border: 1px solid #82c9f5; background: #fff; color: #185384; font: inherit; cursor: pointer;
}
.diary-lightbox-close:focus-visible { outline: 3px solid #2786d1; outline-offset: 2px; }