html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f4f4f0;
  font-family: "dnp-shuei-gothic-gin-std", 'Noto Sans JP', sans-serif;
  overflow-x: hidden; /* .bottom-scene の画面幅ブリードではみ出す横スクロールを防ぐ */
}

/*
  本文コンテンツをスマホ幅に固定し、PC/タブレットでは画面中央に表示する。
  高さは文章量に応じた自然な高さにし、文章が終わったら白い画面もそこで終わる。
*/
.page-frame {
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
}

/*
  setsugen.png（PC/タブレット）/ setsugen_sp.png（スマホ）：横幅は画面いっぱい、
  高さは画像の縦横比のまま（トリミングなし）。

  スマホ：.page-frame内の最後の子要素にして sticky にする。本文を読んでいる間は
  画面下に固定表示され、本文の一番下（＝.page-frameの底辺）に到達すると
  そこで自然に止まり、そのままページと一緒にスクロールされていく
  （＝フッターとは重ならない）。JSでの判定は不要。
  PC/タブレット：fixed + 背面(z-index: -1)にして、白いスマホ画面やフッターが
  自然に画像より手前に重なる（下の @media 参照）。
*/
.bottom-scene {
  position: sticky;
  bottom: 0;
  width: 100%; /* .page-frameの幅は画面幅と同じなので、100%で揃えるだけでよい */
  z-index: 999;
  pointer-events: none; /* 装飾のため、下の要素へのクリックを妨げない */
  margin-bottom: -50px; /* フッター側の隙間(50px)を打ち消し、さらに食い込ませて重ねる（要調整） */
}

.bottom-scene img {
  display: block;
  width: 100%;
  height: auto;
}

/* 画面幅が480pxを超えたら、中央フレームであることが分かるように影をつける */
@media (min-width: 481px) {
  .page-frame {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  }

  .bottom-scene {
    position: fixed;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
    margin-bottom: 0; /* スマホ用の食い込み調整はPCでは不要 */
  }
}

/* 掲載文の仮スタイル。文章部分は白いBOXにする。デザイン指示に合わせて調整してください */
.reading-content {
  background-color: #ffffff;
  padding: 72px 24px 40px; /* 上部はヘッダー高さ(HEADER_HEIGHT)分の余白を兼ねる */
  box-sizing: border-box;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 2;
}

.reading-content p {
  margin: 0 0 1.2em;
}

/* パンくず：本文と同じフォントで揃える */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-family: "dnp-shuei-gothic-gin-std", "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(26, 26, 26, 0.5);
}

.breadcrumb a {
  color: rgba(26, 26, 26, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: #4a5da6;
}

.breadcrumb__sep {
  font-size: 10px;
  opacity: 0.6;
}

.breadcrumb__current {
  color: #1a1a1a;
}

/* 章扉の画像：白いBOXの横幅から10%小さく、中央揃え */
.chapter-image-wrap {
  position: relative;
  width: calc(100% + 48px);
  margin: 0 -24px 2.4em;
}

.chapter-image {
  display: block;
  width: 100%;
  height: auto;
}

/*
  章扉の画像の導入：ぼかし値そのものをアニメーションさせるとブラウザの負荷が高く、
  カクついた動きになる。そこで「ぼけた画像」と「くっきりした画像」を重ねて配置し、
  opacity（不透明度）だけをクロスフェードさせることで、滑らかな解像感を出す。
*/
.chapter-image--sharp {
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: chapter-image-fade-in 1.4s ease-out both;
}

.chapter-image--blur {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  filter: blur(16px);
  opacity: 1;
  pointer-events: none;
  animation: chapter-image-fade-out 1.4s ease-out both;
}

@keyframes chapter-image-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes chapter-image-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/*
  雪：章扉の画像がふわっと表示された直後にJSで一度だけ生成される、一瞬の演出。
  top_hara_vivre.htmlと違い無限ループはせず、舞ってフェードアウトしたら消える。
*/
.snow-container {
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 480px;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.snowflake {
  position: absolute;
  top: -10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation-name: snow-burst-fall, snow-burst-flicker;
  animation-timing-function: linear, ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes snow-burst-fall {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--drift, 20px), 60vh, 0); }
}

@keyframes snow-burst-flicker {
  0%   { opacity: 0; }
  15%  { opacity: var(--max-opacity, 0.9); }
  70%  { opacity: var(--max-opacity, 0.9); }
  100% { opacity: 0; }
}

/* 見出し：上下を線で囲む */
/* 前の記事／次の記事 */
.pagination-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  border-top: 1px solid #1a1a1a;
  margin-top: 2.4em;
  padding-top: 24px;
  font-size: 13px;
  line-height: 1.5;
}

/* 前の記事が無い（=シリーズ最初の記事）場合、次の記事のみ右寄せ */
.pagination-nav--first {
  justify-content: flex-end;
}

.pagination-nav a,
.pagination-nav .pagination-next,
.pagination-nav .pagination-prev {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #1a1a1a;
  text-decoration: none;
}

.pagination-nav .pagination-next {
  align-items: flex-end;
  text-align: right;
}

.pagination-nav .pagination-prev {
  align-items: flex-start;
  text-align: left;
}

/* 次の記事が未公開の場合：クリック不可を示すため薄く表示 */
.pagination-nav .pagination-next.is-locked,
.pagination-nav .pagination-prev.is-locked {
  color: rgba(26, 26, 26, 0.35);
  cursor: default;
}

.pagination-nav .is-locked .pagination-label {
  color: rgba(26, 26, 26, 0.35);
}

.pagination-label {
  font-size: 12px;
  color: rgba(26, 26, 26, 0.6);
}

.pagination-title {
  font-size: 14px;
}

/* 目次に戻るボタン：記事の一番下、細い罫線の下に中央揃えで配置 */
.toc-back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 48px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(26, 26, 26, 0.15);
  font-family: "dnp-shuei-gothic-gin-std", "Noto Sans JP", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #4a5da6;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.toc-back:hover {
  opacity: 0.6;
}

.toc-back__arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.toc-back:hover .toc-back__arrow {
  transform: translateX(-4px);
}

/* スマホ幅：文章の白いBOXの左右にマージンを設ける */
@media (max-width: 480px) {
  .reading-content {
    margin: 0 45px;
  }
}

/* フッター（ひょっこりきんちゃん含む）が .bottom-scene の画像より必ず手前に来るようにする */
.js-managed-footer-root {
  position: relative;
  z-index: 1000;
}