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 の画面幅ブリードではみ出す横スクロールを防ぐ */
}

/*
  背景：hara_top.pngを .page-frame（スマホ画面を模した幅480pxの領域）と
  同じ幅・中央配置で固定表示する。スマホでは画面幅＝.page-frame幅なので
  画面いっぱいに、PC/タブレットでは中央の「スマホ画面」枠の中にだけ、
  スマホと全く同じ見え方で表示される。
  position: fixed + top/bottom: 0 で常に画面の縦幅全体を覆い、
  background-size: cover でどの端末でもトリミングされつつ画面にピッタリ合わせる。
  スクロールしてもこの背景自体は一切動かない。
*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 480px;
  transform: translateX(-50%);
  background-image: url('/ast/images/100_hara-vivre/hara_top.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

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

/*
  setsugen.png：スマホでは非表示。PC/タブレットのみ、横幅は画面いっぱい、
  高さは画像の縦横比のまま（トリミングなし）で、fixed + 背面(z-index: -1)にして、
  白いスマホ画面やフッターが自然に画像より手前に重なる（下の @media 参照）。
*/
.bottom-scene {
  display: none;
}

.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 {
    display: block;
    position: fixed;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    z-index: -1;
  }
}

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

/*
  タイトル：最初の画面（ヘッダー分を除いたビューポート高さ）ちょうどの箱にし、
  その中に画像を上下左右中央配置。画像側は max-width/max-height の両方を
  画面サイズ基準（%とvh）で制限することで、画面の縦横比に関わらず
  どのスマホで見ても画像全体が必ず画面内に収まる。
*/
.hero {
  height: calc(100vh - 112px); /* 100vh - .reading-contentの上下padding(72px+40px) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.title-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 60vh;
}

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

.title-image--blur {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  filter: blur(16px);
  opacity: 1;
  pointer-events: none;
  animation: title-fade-out 1.4s ease-out both;
}

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

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

/*
  雪：タイトルの導入アニメーションが終わったあとJSで生成される。
  .page-frame（スマホ画面枠）と同じ幅・中央配置で画面全体に降らせ、
  クリックを妨げないようpointer-events: noneにする。
*/
.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-fall, snow-flicker;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
}

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

@keyframes snow-flicker {
  0%, 100% { opacity: var(--max-opacity, 0.85); }
  50% { opacity: 0.15; }
}

/*
  スクロール誘導：タイトルの導入アニメーション終了後にJSでフェードイン表示。
  .page-frame（スマホ画面枠）と同じ幅・中央配置にした上で、その内側の
  右下に「続く」の明朝体・縦書き文字＋落下ラインを表示する。
*/
.scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  padding-right: 16px;
  transform: translateX(-50%);
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.scroll-hint.is-visible {
  opacity: 1;
}

.scroll-hint__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  background: rgba(200, 200, 200, 0.25);
  border-radius: 16px;
}

.scroll-hint__text {
  writing-mode: vertical-rl;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  letter-spacing: 0.3em;
  font-size: 13px;
  font-weight: 500;
  color: #4a5da6;
}

.scroll-hint__line {
  position: relative;
  width: 1px;
  height: 40px;
  background: rgba(74, 93, 166, 0.5);
  overflow: hidden;
}

.scroll-hint__line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #4a5da6;
  box-shadow: 0 0 4px rgba(74, 93, 166, 0.9);
  animation: scroll-hint-drop 1.6s ease-in-out infinite;
}

@keyframes scroll-hint-drop {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

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

/*
  目次：タイムライン型。左に縦の罫線を通し、各項目にドットを添える。
  フォントカラーはひとまず全て #040000。
*/
.toc {
  max-width: 320px;
  box-sizing: border-box;
  margin: 40px auto 0;
  padding: 28px 24px;
  background-color: #ffffff;
  border-radius: 12px;
  font-size: 15px;
}

.toc-part {
  margin-bottom: 26px;
}

.toc-part__title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 500;
  color: #040000;
}

.toc-part__subtitle {
  margin-left: 0.6em;
}

.toc-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 18px;
}

.toc-list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(4, 0, 0, 0.35);
}

.toc-item {
  position: relative;
  padding: 7px 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  color: #040000;
}

.toc-item::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #040000;
}

.toc-item__no {
  font-size: 15px;
  color: #040000;
  font-weight: 600;
}

/* 公開済みの項目：<a>で囲むが、レイアウトは.toc-itemのflexをそのまま透過させる */
.toc-item > a {
  display: contents;
  color: inherit;
  text-decoration: none;
}

/* 公開済みの項目：雪の結晶が溶けて歩き出した、というメタファーで足跡アイコンを表示 */
.toc-item__footprint {
  font-size: 16px;
  margin-left: 2px;
}

/*
  未公開の項目：ドットを中抜きにし、文字をグレーに、雪の結晶アイコンを表示。
  「結晶が溶けて記事が読めるようになる」メタファーのため、鍵アイコンではなく❄を使用。
  公開されると is-locked が外れ、.toc-item__snow ごと無くなる想定。
*/
.toc-item.is-locked {
  color: rgba(4, 0, 0, 0.35);
}

.toc-item.is-locked .toc-item__no {
  color: rgba(4, 0, 0, 0.35);
}

.toc-item.is-locked::before {
  background: transparent;
  border: 1px solid rgba(4, 0, 0, 0.4);
}

.toc-item__snow {
  display: none;
  font-size: 18px;
  margin-left: 2px;
  color: #8fb4e3;
}

.toc-item.is-locked .toc-item__snow {
  display: inline;
}

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

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

.pagination-nav a {
  color: #1a1a1a;
  text-decoration: none;
}

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

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