body {
  margin: 0;
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
}



/* 全パート共通：最初は非表示 */
.part {
  display: none;
  width: 100%;
  height: 100vh;
}

/* アクティブなパートだけ表示 */
.part.is-active {
  display: block;
}


/* 全パート共通のデザイン（モバイルファースト） */

.part.is-active h1,
.part.is-active h2,
.part.is-active p {
  margin: 0 auto;
}


.section.scene {
  position: relative;
}


.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  width: 100%;
  z-index: 1; /* テキストを手前に */
}


.part.is-active h1 {
  text-align: left;
  font-size: 50px;
  font-weight: bold;
  padding: 2rem 2rem 1rem 2rem;
}

.part.is-active h2 {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  padding: 2rem 2rem 0.5rem 2rem;
}

.part.is-active p {
  text-align: left;
  font-size: 12px;
  line-height: 1.9;   /* ← ここが行間 */
  font-weight: bold;
  padding: 2rem;
  color: #fff;
}


/* パソコン用文字サイズ設定 */

@media screen and (min-width: 1000px) {

  .part.is-active h1 {
    font-size: 50px;
  }

  .part.is-active p {
    font-size: 20px;
  }

  .part.is-active .content {
    max-width: 840px;
  }
}


/* 装飾プログラムbox風（共通設定） */

.part.is-active .program {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 2rem auto; /* 左右中央寄せに変更してより安定 */
  background-color: #000;
  color: #fff;
  border-radius: 10px;
  overflow: hidden; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.part.is-active .program-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 30px; /* タイトルバー高さ */
  background-color: #eee;
  padding: 0 10px;
  gap: 5px;
  overflow: hidden; 
}

.part.is-active .program-header button {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  background-color: #888;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  line-height: 18px;
  padding: 0;
}


.part.is-active .program-text {
  margin: 0;
  padding: 20px;
  font-family: "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
  color: #fff;
  font-size: 13px;
  overflow-x: hidden;
  white-space: normal;
  word-break: break-all;
}

@media screen and (min-width: 1000px) {

  .part.is-active .program-text{
    font-size: 18px;
  }

}


/* 一般書式関係 */

/* 明朝：黒 */
#part3 .section.scene .content p.story {
  font-family: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

/* ゴシック：黒 */
#part3 .section.scene .content p.guide {
  font-family: "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
}

/* 白文字＋黒いにじみ（ブロー影風） */
#part3 .section.scene .content p.is-white {
  color: #fff;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 0.85),
    0 0 8px rgba(0, 0, 0, 0.9),
    0 0 16px rgba(0, 0, 0, 0.9);
}

#part3 .section.scene .content p.is-nonshaddowwhite {
  color: #fff;
}


/* 黒文字（影なし・素直な表示） */
#part3 .section.scene .content p.is-black {
  color: #111;
  text-shadow: none;
}

/* part 全体で、pの中のリンクを白にする */
.part.is-active p a,
.part.is-active p a:link,
.part.is-active p a:visited {
  color: #fff;
}

/* #part3 内の「白文字p」のリンクも白にする */
#part3 .section.scene .content p.is-nonshaddowwhite a,
#part3 .section.scene .content p.is-nonshaddowwhite a:link,
#part3 .section.scene .content p.is-nonshaddowwhite a:visited {
  color: #fff;
}

/* ホバーしたときの見た目（お好みで） */
.part.is-active p a:hover,
#part3 .section.scene .content p.is-nonshaddowwhite a:hover {
  color: #fff;
  text-decoration: underline; /* 必要なければ消してOK */
}



/* アニメーション関係 */

/* 初期フラッシュを押さえる */

.type-in {
  visibility: hidden;
}

/* プログラムbox内の、コンソール風アニメーション */


.part.is-active .program .console-prompt {
  opacity: 1;
}

.part.is-active .program .typewriter {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #fff;
  width: 0;
}

.part.is-active .program .typewriter.is-typing {
  animation:
    typing 2.5s steps(40, end) forwards,
    blinkCursor 0.7s step-end infinite alternate;
}

.part.is-active .program .console-step {
  opacity: 0;
}

.part.is-active .program .console-step.show {
  opacity: 1;
}

/* ▼ 最後の行だけ遅め */
.part.is-active .program .console-step.slow.show {
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blinkCursor {
  from { border-right-color: transparent; }
  to   { border-right-color: #fff; }
}



/* プログラムエラーウィンドウ揺れ */
.part.is-active .program.shake {
  animation: mac-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes mac-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}


/* 蓮の花 */
/* ▼ 蓮の線＋塗りアニメ（page-4） ▼ */

/* 初期状態：線は隠れていて、塗りも透明 */
.part.is-active .lotus-svg .svg-elem-1 {
  stroke-dashoffset: 510.3349304199219px; /* ← 符号のプラマイで描画の向きを定義 */
  stroke-dasharray: 510.3349304199219px;
  /* 線を描くトランジション　＋ 塗りがあとから出るトランジション */
  transition:
    stroke-dashoffset 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s,
     /* ひとつ目の秒数でトータルの廟が時間をコントール、ラストはディレイ */ 
    fill-opacity      1.8s ease 0.7s;
  fill-opacity: 0;
}

.part.is-active .lotus-svg .svg-elem-2 {
  stroke-dashoffset: 510.33477783203125px;
  stroke-dasharray: 510.33477783203125px;
  transition:
    stroke-dashoffset 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s,
    fill-opacity      1.8s ease 0.7s;
  fill-opacity: 0;
}

.part.is-active .lotus-svg .svg-elem-3 {
  stroke-dashoffset: 510.33404541015625px;
  stroke-dasharray: 510.33404541015625px;
  transition:
    stroke-dashoffset 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s,
    fill-opacity      1.6s ease 0.5s;
  fill-opacity: 0;
}

.part.is-active .lotus-svg .svg-elem-6 {
  stroke-dashoffset: 395.164794921875px;
  stroke-dasharray: 395.164794921875px;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s,
    fill-opacity      1.6s ease 0.2s;
  fill-opacity: 0;
}

.part.is-active .lotus-svg .svg-elem-7 {
  stroke-dashoffset: 395.164794921875px;
  stroke-dasharray: 395.164794921875px;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.72s,
    fill-opacity      1.6s ease 0.2s;
  fill-opacity: 0;
}

.part.is-active .lotus-svg .svg-elem-8 {
  stroke-dashoffset: 926.10595703125px;
  stroke-dasharray: 926.10595703125px;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.84s,
    fill-opacity      1.6s ease 0.5s;
  fill-opacity: 0;
}

.part.is-active .lotus-svg .svg-elem-9 {
  stroke-dashoffset: 607.3148193359375px;
  stroke-dasharray: 607.3148193359375px;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s,
    fill-opacity      1.6s ease 0s;
  fill-opacity: 0;
}

.part.is-active .lotus-svg .svg-elem-10 {
  stroke-dashoffset: 607.3148193359375px;
  stroke-dasharray: 607.3148193359375px;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.08s,
    fill-opacity      1.6s ease 0s;
  fill-opacity: 0;
}

/* 発火側：lotus-active が付いたら、線も塗りも最終状態へ */
.part.is-active .lotus-svg.lotus-active .svg-elem-1,
.part.is-active .lotus-svg.lotus-active .svg-elem-2,
.part.is-active .lotus-svg.lotus-active .svg-elem-3,
.part.is-active .lotus-svg.lotus-active .svg-elem-6,
.part.is-active .lotus-svg.lotus-active .svg-elem-7,
.part.is-active .lotus-svg.lotus-active .svg-elem-8,
.part.is-active .lotus-svg.lotus-active .svg-elem-9,
.part.is-active .lotus-svg.lotus-active .svg-elem-10 {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}


/* GSAP 用：フェードブロックの初期設定（全PAGE共通）  */
.part.is-active .fade-block {
  opacity: 0;
  filter: blur(8px);
  display: inline-block;
  transition: none;          /* CSS側ではアニメさせない。動かすのはGSAPだけ */
  will-change: opacity, filter;
}



  /* 各ページの背景色 */
.part.is-active .page-0 {
  background-color: #377d42;
}

.part.is-active .page-1 {
  background-color: #444;
}

.part.is-active .page-2 {
  background-color: red;
}

.part.is-active .page-3 {
  background-color: #9b6f2d;
}

.part.is-active .page-4 {
  background-color: #2a304a;
}

.part.is-active .page-5 {
  background-color: #27282b;
}

.part.is-active .page-6 {
  background-color: #571d1d;
}

.part.is-active .page-7 {
  background-color: #2a304a;
}

.part.is-active .page-8 {
  background-color: #5f7969;
}

.part.is-active .page-9 {
  background-color: #4c516b;
}

.part.is-active .page-10 {
  /* グラデーションが効かない環境用の単色 */
  background-color: #b286a9;

  background-image:
    radial-gradient(circle at 20% 0%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.0) 55%
    ),
    linear-gradient(
      180deg,
      #b286a9 0%,   
      #ca93ae 18%,  
      #dba0b4 35%, 
      #e9b7b8 55%,  
      #f0c7b8 75%, 
      #f4d7c3 100% 
    );

    background-repeat: no-repeat;
    background-attachment: fixed; 
  }


.part.is-active .page-11 {
  /* グラデーションが効かない環境用の単色 */
  background-color: #b286a9;
  background-image:
    radial-gradient(circle at 20% 0%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.0) 55%
    ),
    linear-gradient(
      180deg,
      #b286a9 0%,  
      #ca93ae 18%,  
      #dba0b4 35%,  
      #e9b7b8 55%,  
      #f0c7b8 75%,  
      #f4d7c3 100%
    );

    background-repeat: no-repeat;
    background-attachment: fixed; 
  }

  .part.is-active .page-12 {
  background-color: #543b4d;
  }

 .part.is-active .page-13 {
  background-color: #8b1313;
  }

  .part.is-active .page-14 {
  background-color: #8b1313;
  }

  .part.is-active .page-15 {
  background-color: #444;;
  }


 .part.is-active .page-16 {
  background-color: #ff0000;
  }

  
 .part.is-active .page-17 {
  background-color: #9b6f2d;
  }

   .part.is-active .page-18 {
  background-color: #9b6f2d;
  }

  
.part.is-active .page-20 {
  background: radial-gradient(
      circle at 30% 40%,
      rgba(32,74,92,0.90) 0%,
      rgba(20,52,70,0.88) 35%,
      rgba(11,30,44,0.95) 65%,
      rgba(5,15,25,1.0) 100%
    ),
    linear-gradient(
      to bottom right,
      #0c1a28 0%,
      #143446 35%,
      #325a5b 60%,
      #a79b3f 100%
    );
  background-blend-mode: overlay;

  animation: page19-flicker 14s ease-in-out infinite;
  background-size: 120% 120%; /* 揺れを強調 */
}

@keyframes page19-flicker {
  0% {
    background-position: 30% 40%;
  }
  20% {
    background-position: 33% 38%;
  }
  40% {
    background-position: 28% 42%;
  }
  60% {
    background-position: 31% 37%;
  }
  80% {
    background-position: 29% 43%;
  }
  100% {
    background-position: 30% 40%;
  }
}

.part.is-active .page-19 {
  background: radial-gradient(
      circle at 30% 40%,
      rgba(32,74,92,0.90) 0%,
      rgba(20,52,70,0.88) 35%,
      rgba(11,30,44,0.95) 65%,
      rgba(5,15,25,1.0) 100%
    ),
    linear-gradient(
      to bottom right,
      #0c1a28 0%,
      #143446 35%,
      #325a5b 60%,
      #a79b3f 100%
    );
  background-blend-mode: overlay;

  animation: page19-flicker 14s ease-in-out infinite;
  background-size: 120% 120%; /* 揺れを強調 */
}

@keyframes page19-flicker {
  0% {
    background-position: 30% 40%;
  }
  20% {
    background-position: 33% 38%;
  }
  40% {
    background-position: 28% 42%;
  }
  60% {
    background-position: 31% 37%;
  }
  80% {
    background-position: 29% 43%;
  }
  100% {
    background-position: 30% 40%;
  }
}

.part.is-active .page-21 {
  /* ベースの横方向グラデ（SVG baseGrad） */
  background:
    /* --- 手前：斜めのゆるハイライト（SVG diagonalBands） --- */
    linear-gradient(
      145deg,
      rgba(245,255,206,0.0) 0%,
      rgba(245,255,206,0.25) 25%,
      rgba(245,255,206,0.0) 50%,
      rgba(245,255,206,0.28) 75%,
      rgba(245,255,206,0.0) 100%
    ),

    /* --- 中央の光（SVG centerGlow） --- */
    radial-gradient(
      circle at 50% 40%,
      rgba(245,255,191,0.90) 0%,
      rgba(232,255,148,0.70) 40%,
      rgba(79,210,154,0.00) 80%,
      rgba(44,143,122,0.00) 100%
    ),

    /* --- 一番下の横グラデ（SVG baseGrad） --- */
    linear-gradient(
      to right,
      #f7f44c 0%,
      #c7dc57 25%,
      #9ecc60 50%,
      #63c387 75%,
      #22a27c 100%
    );

  background-blend-mode: overlay;
  background-size: 120% 120%; /* ゆらぎ効果のため拡大 */


  /* 全画面に広がる指定 */
  width: 100%;
  height: 100%;
}



.part.is-active .page-22 {
  /* ベースの横方向グラデ（SVG baseGrad） */
  background:
    /* --- 手前：斜めのゆるハイライト（SVG diagonalBands） --- */
    linear-gradient(
      145deg,
      rgba(245,255,206,0.0) 0%,
      rgba(245,255,206,0.25) 25%,
      rgba(245,255,206,0.0) 50%,
      rgba(245,255,206,0.28) 75%,
      rgba(245,255,206,0.0) 100%
    ),

    /* --- 中央の光（SVG centerGlow） --- */
    radial-gradient(
      circle at 50% 40%,
      rgba(245,255,191,0.90) 0%,
      rgba(232,255,148,0.70) 40%,
      rgba(79,210,154,0.00) 80%,
      rgba(44,143,122,0.00) 100%
    ),

    /* --- 一番下の横グラデ（SVG baseGrad） --- */
    linear-gradient(
      to right,
      #f7f44c 0%,
      #c7dc57 25%,
      #9ecc60 50%,
      #63c387 75%,
      #22a27c 100%
    );

  background-blend-mode: overlay;
  background-size: 120% 120%; /* ゆらぎ効果のため拡大 */


  /* 全画面に広がる指定 */
  width: 100%;
  height: 100%;
}


 .part.is-active .page-23 {
  /* ベースは縦グラデーション */
  background: 
    linear-gradient(
      to bottom,
      #e9f7ff 0%,
      #b7eaff 8%,
      #7dd3ff 20%,
      #53c1e6 35%,
      #3cb5d1 45%,
      #58b09c 55%,
      #4fa285 62%,
      #3b8b6f 75%,
      #2f6f55 85%,
      #245341 100%
    );
}


.part.is-active .page-24 {
  background-color: #f5f0e6;

  background-image:
    /* 左側の綴じ影（あっても良ければ残す） */
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.12) 0px,
      rgba(0, 0, 0, 0.08) 18px,
      rgba(0, 0, 0, 0.0) 32px
    ),

    /* 右下のふんわり影（ページが落ちてる感じ） */
    radial-gradient(
      circle at 100% 100%,
      rgba(0, 0, 0, 0.16) 0%,
      rgba(0, 0, 0, 0.0) 55%
    ),

    /* 紙全体のベース色グラデーション */
    linear-gradient(
      to bottom,
      #fdfaf3 0%,
      #f5f0e6 55%,
      #eee5d8 100%
    );

  background-size:
    40px 100%,      /* 綴じ影の幅 */
    60% 60%,        /* 右下影の広がり */
    100% 100%;      /* ベース紙 */

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    left top,
    right bottom,
    left top;
}


.part.is-active .page-25 {
  background-color: #f5f0e6;

  background-image:
    /* 左側の綴じ影（あっても良ければ残す） */
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.12) 0px,
      rgba(0, 0, 0, 0.08) 18px,
      rgba(0, 0, 0, 0.0) 32px
    ),

    /* 右下のふんわり影（ページが落ちてる感じ） */
    radial-gradient(
      circle at 100% 100%,
      rgba(0, 0, 0, 0.16) 0%,
      rgba(0, 0, 0, 0.0) 55%
    ),

    /* 紙全体のベース色グラデーション */
    linear-gradient(
      to bottom,
      #fdfaf3 0%,
      #f5f0e6 55%,
      #eee5d8 100%
    );

  background-size:
    40px 100%,      /* 綴じ影の幅 */
    60% 60%,        /* 右下影の広がり */
    100% 100%;      /* ベース紙 */

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    left top,
    right bottom,
    left top;
}

.part.is-active .page-26 {
  background-color: #377d42;
}

  






/* part1 */
#part1.is-active {
  background: #222;
  display: flex;           
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#part1.is-active p {
  font-family: "Meiryo", "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 26px;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  padding: 1rem;
}

#part1.is-active img {
  width: 20vw; 
  height: 20vw; 
  animation: spin 3.0s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#part2.is-active {
  background: #444;
  display: flex;           
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#part2.is-active img {
  width: 20vw; 
  height: 20vw; 
  animation: popBounce 0.4s ease-out infinite;
}

@keyframes popBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.25); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}


#part2.is-active p {
  font-family: "Meiryo", "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 26px;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
  padding: 1rem;
}


/* page-4 の 蓮SVG を下中央に固定配置 */
.section.scene.page-4 .lotus-svg {
  position: absolute;
  bottom: 0.5rem;        /* 下からの隙間・お好みで調整 */
  left: 48%;
  transform: translateX(-50%);
  width: min(90vw, 840px); /* ←ご要望どおり */
  height: auto;
  pointer-events: none;
  z-index: 0;          /* 必要ならテキストの背面に */
}

.section.scene.page-4 .content p {
  text-align: center;
}


/* page-5 */
.section.scene.page-5 {
  position: relative;   /* 指定済みだが、再度おまじない */
  overflow: hidden;     /* 画面外にはみ出た星を隠す */
}

.section.scene.page-5 .content p {
  width: 100%;     
  max-width: 75%;
}



/* ▼ 月（月は独立したクラスにする） */
.section.scene.page-5 .moon {
  z-index: -1; 
  position: absolute;

  /* 月専用のサイズ変数 */
  --moon-size: clamp(200px, 80vw, 680px);

  width: var(--moon-size);
  height: auto;

  bottom: -10%;    /* 右下にハミ出し */
  right: -30%;

  z-index: 0;
  pointer-events: none;
  opacity: 0.6;

}

@media screen and (min-width: 850px) {

  .section.scene.page-5 .moon {
    /* moon-size は680pxで固定されている（clamp上限） */

    /* ★ ここから位置をpxによる“絶対固定”に変更 ★ */

    bottom: -120px;     /* ← 画面からどれだけハミ出すか（例） */
    right: -200px;      /* ← ここで調整すればぴったりになります */

    /* % とコンフリクトしないよう、pxが完全に優先される */
  }
}


/* 星共通設定（class="svg1"〜"svg5"） */
.section.scene.page-5 svg[class^="svg"] {
  position: absolute;     
  width: var(--star-size);
  height: auto;

  z-index: 0;               /* テキスト(content)より背面に */
  pointer-events: none;
  transform-origin: 50% 50%;
  opacity: 0.9;

  /* デフォルトは「ふわっと伸び縮み」 */
  animation-name: starTwinkle;
  animation-duration: 2.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* 伸び縮みしながら瞬く */
@keyframes starTwinkle {
  0%   { transform: scale(0.85); opacity: 0.4; }
  50%  { transform: scale(1.08); opacity: 1;   }
  100% { transform: scale(0.9);  opacity: 0.5; }
}

/* 明滅寄りの瞬き（何個かだけこれを使う） */
@keyframes starBlink {
  0%, 35%  { transform: scale(0.7); opacity: 0; }
  50%      { transform: scale(1.05); opacity: 1; }
  65%,100% { transform: scale(0.7); opacity: 0; }
}

/* 明滅せず、伸び縮みだけするアニメ */
@keyframes starPulse {
  0%   { transform: scale(0.85); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(0.9); }
}

/* ---- 個別の星の位置＆微調整 ---- */
/* top / left / right / bottom と --star-size, animation-duration, animation-delay を調整 */


/* 左上 */
.section.scene.page-5 .svg3 {
  /* 画面幅に応じて 48px〜80px の間で伸び縮み */
  --star-size: clamp(60px, 15vw, 100px);
  top: 10%;
  left: 18%;
  animation-name: starBlink;
  animation-duration: 2.2s;
  animation-delay: 0.5s;
}

/* 伴星（少し小さめ） */
.section.scene.page-5 .svg2 {
  /* 画面幅に応じて 24px〜40px の間で伸び縮み */
  --star-size: clamp(30px, 7.5vw, 50px);
  top: 20%;
  left: 14%;
  animation-duration: 3.0s;
  animation-delay: 0.1s;
}


/* 右上 */
.section.scene.page-5 .svg1 {
  --star-size: clamp(48px, 12vw, 80px);
  top: 15%;
  right: 12%;
  animation-duration: 2.4s;
  animation-delay: 0.3s;
}


/* 左下 */
.section.scene.page-5 .svg4 {
  --star-size: clamp(48px, 12vw, 80px);
  top: 80%;
  left: 10%;
  animation-duration: 2.6s;
  animation-delay: 0.8s;
}

/* 右下、月に被る */
.section.scene.page-5 .svg5 {
  --star-size: clamp(60px, 15vw, 120px);
  bottom: 4%;
  right: 4%;
  animation-name: starPulse;
  animation-duration: 3.2s;
  animation-delay: 0.2s;
}


/* グリッチ関係 */
/* 各セクション全体をスタッキングコンテキストにする */
./* 各セクション全体をスタッキングコンテキストにする */
.section.scene {
  position: relative;
}

/* グリッチレイヤー：背景側に固定 */
.section.scene .glitch-layer {
  position: absolute;
  inset: 0;              /* セクション全体を覆う */
  z-index: 0;            /* ★ 背景 */
  pointer-events: none;
  opacity: 0;            /* デフォルトは非表示 */
  transition: opacity 0.4s ease;
}

/* テキストやSVGはその一段上に載せる */
.section.scene .content,
.section.scene svg {
  position: relative;
  z-index: 1;            /* ★ 手前 */
}

/* fullpage.js でアクティブなセクションだけグリッチを見せる */
.section.scene.active .glitch-layer {
  opacity: 0.35;         /* お好みで 0.2〜0.5 くらい */
}

/* glitch-layer 内の p5 キャンバスにサイズを強制 */
.section.scene .glitch-layer canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}





/* page-6 */
.section.scene.page-6 {
  position: relative;   /* 指定済みだが、再度おまじない */
  overflow: hidden;     /* 画面外にはみ出た星を隠す */
}

.section.scene.page-6 .content p {
  width: 100%;     
  max-width: 75%;
}

/* ▼ 月（月は独立したクラスにする） */
.section.scene.page-6 .moon {
  z-index: -1; 
  position: absolute;

  /* 月専用のサイズ変数 */
  --moon-size: clamp(200px, 80vw, 680px);

  width: var(--moon-size);
  height: auto;

  bottom: -10%;    /* 右下にハミ出し */
  right: -30%;

  z-index: 0;
  pointer-events: none;
  opacity: 0.6;

}

@media screen and (min-width: 850px) {

  .section.scene.page-6 .moon {
    /* moon-size は680pxで固定されている（clamp上限） */

    /* ★ ここから位置をpxによる“絶対固定”に変更 ★ */

    bottom: -120px;     /* ← 画面からどれだけハミ出すか（例） */
    right: -200px;      /* ← ここで調整すればぴったりになります */

    /* % とコンフリクトしないよう、pxが完全に優先される */
  }
}


/* 星共通設定（class="svg1"〜"svg5"） */
.section.scene.page-6 svg[class^="svg"] {
  position: absolute;     
  width: var(--star-size);
  height: auto;

  z-index: 0;               /* テキスト(content)より背面に */
  pointer-events: none;
  transform-origin: 50% 50%;
  opacity: 0.9;

}



/* ---- 個別の星の位置＆微調整 ---- */

/* 左上 */
.section.scene.page-6 .svg3 {
  /* 画面幅に応じて 48px〜80px の間で伸び縮み */
  --star-size: clamp(60px, 15vw, 100px);
  top: 10%;
  left: 18%;
}

/* 伴星（少し小さめ） */
.section.scene.page-6 .svg2 {
  /* 画面幅に応じて 24px〜40px の間で伸び縮み */
  --star-size: clamp(30px, 7.5vw, 50px);
  top: 20%;
  left: 14%;
}


/* 右上 */
.section.scene.page-6 .svg1 {
  --star-size: clamp(48px, 12vw, 80px);
  top: 15%;
  right: 12%;
}


/* 左下 */
.section.scene.page-6 .svg4 {
  --star-size: clamp(48px, 12vw, 80px);
  top: 80%;
  left: 10%;
}

/* 右下、月に被る */
.section.scene.page-6 .svg5 {
  --star-size: clamp(60px, 15vw, 120px);
  bottom: 4%;
  right: 4%;
}



/* ---- セクション7：花 ---- */
.section.scene.page-7 {
  position: relative; /* 花を絶対配置するための基準 */
}

/* テキスト（.content）を下半分へ移動 */
.section.scene.page-7 .content {
  position: absolute;
  top: 60%;                 /* ここを変えると上下に動きます */
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  margin: 0;                /* 共通指定の margin を打ち消す */
}

@media screen and (min-width: 1000px) {

  .section.scene.page-7 .content {
    max-width: 840px;
  }

}

.section.scene.page-7 .content p {
  text-align: center;
}


/* 3輪を横一列に並べるコンテナ */
.section.scene.page-7 .flowers {
  position: absolute;
  top: 40%;                 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4rem);  /* 花同士のすき間 */
  pointer-events: none;
  z-index: 1;
}

/* 共通の花スタイル（サイズ＋回転アニメ） */
.section.scene.page-7 .flowers img {
  width: clamp(60px, 12vw, 120px);  /* 小さい花：画面幅に応じて変化 */
  height: auto;
  transform-origin: 50% 50%;
  animation-name: flower-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 回転アニメーション */
@keyframes flower-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* それぞれ、少しずつ回り方をずらす */
.section.scene.page-7 .flower1 {
  animation-duration: 5s;
  animation-delay: -12s;   /* ちょっと先行して回っている感じ */
}

.section.scene.page-7 .flower2 {
  animation-duration: 5s;
  animation-delay: -10s;   /* ちょっと先行して回っている感じ */
}

.section.scene.page-7 .flower3 {
  animation-duration: 5s;
  animation-delay: -18s;
}


/* 蔦がはみ出しても他セクションに干渉しないようにする */
.section.scene.page-8 {
  overflow: hidden;
}



/* page-8：clover（クローバー1SVG） */
.section.scene.page-8 .clover1 {
  z-index: -1; 
  position: absolute;

  --clover1-size: clamp(72px, 18vw, 110px);

  width: var(--clover1-size);
  height: auto;

  top: 10%;    
  left: 18%;

  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
 
  animation-name: cloverTwinkle;
  animation-duration: 2.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;

}



/* page-8：clover（クローバー2SVG） */
.section.scene.page-8 .clover2 {
  z-index: -1; 
  position: absolute;

  --clover2-size: clamp(90px, 23vw, 140px);

  width: var(--clover2-size);
  height: auto;

  top: 18%;    
  left: 8%;

  z-index: 0;
  pointer-events: none;
  opacity: 0.6;

  animation-name: cloverTwinkle;
  animation-duration: 2.8s;
  animation-delay: 0.2s;
  
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;

  }


/* 伸び縮みしながら瞬く */
@keyframes cloverTwinkle {
  0%   { transform: scale(0.88); opacity: 0.4; }
  50%  { transform: scale(1.05); opacity: 1;   }
  100% { transform: scale(0.93);  opacity: 0.5; }
}



/* page-8：tsuta（蔦SVG）を画面右側へ寄せる */
/* page-8：tsuta（蔦SVG）を画面右側に“絶対配置”する */
.section.scene.page-8 .tsuta {
  position: absolute;
  z-index: 0;

  top: 53%;              /* 全体を3%下へ */
  right: 5%;
  transform: translateY(-50%);

  height: 110%;
  width: auto;
  pointer-events: none;
}

@media screen and (min-width: 1000px) {

  .section.scene.page-8 .tsuta {
   margin-right: 10%;
  }

  }

/* page-8：蔦の茎は最初は隠しておく */
.section.scene.page-8 .tsuta .star-white-elem-kuki-1,
.section.scene.page-8 .tsuta .star-white-elem-kuki-2,
.section.scene.page-8 .tsuta .star-white-elem-kuki-3,
.section.scene.page-8 .tsuta .star-white-elem-kuki-4,
.section.scene.page-8 .tsuta .star-white-elem-kuki-5,
.section.scene.page-8 .tsuta .star-white-elem-kuki-6 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/* page-8：蔦の葉っぱ（lf系クラス）の初期状態：下から上へ露出 */
.section.scene.page-8 .tsuta [class^="star-white-elem-lf"] {
  opacity: 0;

  /* 下100% = 完全に隠されている */
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);

  transform: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}


/* page-9  */

/* テキスト（.content）を下半分へ移動 */
.section.scene.page-9 .content {
  position: absolute;
  top: 60%;                 /* ここを変えると上下に動きます */
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  margin: 0;                /* 共通指定の margin を打ち消す */
}

@media screen and (min-width: 1000px) {

  .section.scene.page-9 .content {
    max-width: 840px;
  }

}

.section.scene.page-9 .content p {
  text-align: center;
}

/* 太陽が上にはみ出しても他セクションに干渉しないようにする */
.section.scene.page-9 {
  overflow: hidden;
}

/* 太陽本体：左右中央＆上つけ（上にはみ出し気味） */
.section.scene.page-9 .taiyou {
  position: absolute;
  top: -30%;          /* ここで「どれくらい上にはみ出すか」を調整 */
  left: 50%;
  transform: translateX(-50%);

  --taiyou-size: clamp(680px, 120vw, 1200px);
    width: var(--taiyou-size);       /* 大きさ。お好みで 100%〜150% くらいに */

  max-width: none;
  height: auto;
  z-index: 0;         /* テキスト(.content)より奥へ */
  pointer-events: none; /* クリック判定を邪魔しないように */
}


@media screen and (min-width: 850px) {

  .section.scene.page-9 .taiyou {
    /* moon-size は680pxで固定されている（clamp上限） */

    /* ★ ここから位置をpxによる“絶対固定”に変更 ★ */

    top: -480px;    

    /* % とコンフリクトしないよう、pxが完全に優先される */
  }
}



/* 太陽の回転 */
.taiyou .taiyou-elem-1,
.taiyou .taiyou-elem-2 {
  /* viewBox 全体を基準に 50% 50%（＝729.639,729.639 付近） */
  transform-box: view-box;
  transform-origin: 50% 50%;
  /* もし以前に fill-box を指定していたら、そちらは削除 or こちらを後ろに書いてください */
}

/* 光：時計回りにゆっくり */
.taiyou .taiyou-elem-1 {
  animation: taiyou-rotate-cw 120s linear infinite;
}

/* 太陽本体：反時計回りにさらにゆっくり */
.taiyou .taiyou-elem-2 {
  animation: taiyou-rotate-ccw 160s linear infinite;
}

@keyframes taiyou-rotate-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes taiyou-rotate-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}



/* page-10：雲SVGを重ねるための土台設定 */
.section.scene.page-10 {
  position: relative;   /* 絶対配置の基準に */
  overflow: hidden;     /* はみ出しをカット */
}

/* 左上：kumo2（大きめ・ふんわり） */
.section.scene.page-10 .kumo2 {
  position: absolute;
  z-index: 0;           /* 文字より後ろ、背景より前 */
  top: -8%;             /* すこし外から入り込む感じ */
  left: -6%;

  width: 65%;           /* お好みで調整 */
  height: auto;

  opacity: 0.65;        /* ほんのり透けさせる */
  pointer-events: none; /* クリックなどを邪魔しない */
}

/* 右下：kumo1（やや小さめ・地平線側） */
.section.scene.page-10 .kumo1 {
  position: absolute;
  z-index: 0;
  right: -4%;
  bottom: 5%;

  width: 45%;             /* お好みで調整 */
  height: auto;

  opacity: 0.7;
  pointer-events: none;
}
.section.scene.page-10 .content {
  position: relative;
  z-index: 1;
}



/* page-11：雲SVGを重ねるための土台設定 */
.section.scene.page-11 {
  position: relative;   /* 絶対配置の基準に */
  overflow: hidden;     /* はみ出しをカット */
}

/* 左上：kumo2（大きめ・ふんわり） */
.section.scene.page-11 .kumo2 {
  position: absolute;
  z-index: 0;           /* 文字より後ろ、背景より前 */
  top: -8%;             /* すこし外から入り込む感じ */
  left: -6%;

  width: 65%;           /* お好みで調整 */
  height: auto;

  opacity: 0.65;        /* ほんのり透けさせる */
  pointer-events: none; /* クリックなどを邪魔しない */
}

/* 右下：kumo1（やや小さめ・地平線側） */
.section.scene.page-11 .kumo1 {
  position: absolute;
  z-index: 0;
  right: -4%;
  bottom: 5%;

  width: 45%;           /* お好みで調整 */
  height: auto;

  opacity: 0.7;
  pointer-events: none;
}
.section.scene.page-11 .content {
  position: relative;
  z-index: 1;
}

/* page-11：花びら（落ちるエフェクト用） */
.section.scene.page-11 .petal {
  position: absolute;
  z-index: 0;

  width: clamp(20px, 6vw, 40px);
  height: clamp(20px, 6vw, 40px);

  background: url("../images/hanabira.svg")
              no-repeat center / contain;

  pointer-events: none;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}





/* ---- セクション12：花 ---- */
.section.scene.page-12 {
  position: relative; /* 花を絶対配置するための基準 */
}

/* テキスト（.content）を下半分へ移動 */
.section.scene.page-12 .content {
  position: absolute;
  top: 65%;                
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  margin: 0;               
}

@media screen and (min-width: 1000px) {

  .section.scene.page-12 .content {
    max-width: 840px;
  }

}

.section.scene.page-12 .content p {
  text-align: center;
}


/* 3輪を横一列に並べるコンテナ */
.section.scene.page-12 .flowers {
  position: absolute;
  top: 40%;                 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 4rem);  /* 花同士のすき間 */
  pointer-events: none;
  z-index: 1;
}

/* 共通の花スタイル（サイズ＋回転アニメ） */
.section.scene.page-12 .flowers img {
  width: clamp(60px, 12vw, 120px);  /* 小さい花：画面幅に応じて変化 */
  height: auto;
  transform-origin: 50% 50%;
  animation-name: flower-spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 回転アニメーション */
@keyframes flower-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* それぞれ、少しずつ回り方をずらす */
.section.scene.page-12 .flower1 {
  animation-duration: 5s;
  animation-delay: -12s;   /* ちょっと先行して回っている感じ */
}

.section.scene.page-12 .flower2 {
  animation-duration: 5s;
  animation-delay: -10s;   /* ちょっと先行して回っている感じ */
}

.section.scene.page-12 .flower3 {
  animation-duration: 5s;
  animation-delay: -18s;
}



/* page-13  */

/* テキスト（.content）を下半分へ移動 */
.section.scene.page-13 .content {
  position: absolute;
  top: 60%;                 /* ここを変えると上下に動きます */
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  margin: 0;                /* 共通指定の margin を打ち消す */
}

@media screen and (min-width: 1000px) {

  .section.scene.page-13 .content {
    max-width: 840px;
  }

}

.section.scene.page-13 .content p {
  text-align: center;
}

/* 太陽が上にはみ出しても他セクションに干渉しないようにする */
.section.scene.page-13 {
  overflow: hidden;
}

/* 太陽本体：左右中央＆上つけ（上にはみ出し気味） */
.section.scene.page-13 .taiyou2 {
  position: absolute;
  top: -30%;          /* ここで「どれくらい上にはみ出すか」を調整 */
  left: 50%;
  transform: translateX(-50%);

  --taiyou-size: clamp(680px, 120vw, 1200px);
    width: var(--taiyou-size);       /* 大きさ。お好みで 100%〜150% くらいに */

  max-width: none;
  height: auto;
  z-index: 0;         /* テキスト(.content)より奥へ */
  pointer-events: none; /* クリック判定を邪魔しないように */
}


@media screen and (min-width: 850px) {

  .section.scene.page-13 .taiyou2 {
    /* moon-size は680pxで固定されている（clamp上限） */

    /* ★ ここから位置をpxによる“絶対固定”に変更 ★ */

    top: -480px;    

    /* % とコンフリクトしないよう、pxが完全に優先される */
  }
}


/* 太陽の回転 */
.taiyou2 .taiyou-elem-1,
.taiyou2 .taiyou-elem-2 {
  /* viewBox 全体を基準に 50% 50%（＝729.639,729.639 付近） */
  transform-box: view-box;
  transform-origin: 50% 50%;
  /* もし以前に fill-box を指定していたら、そちらは削除 or こちらを後ろに書いてください */
}

/* 光：時計回り */
.taiyou2 .taiyou-elem-1 {
  animation: taiyou-rotate-cw 40s linear infinite;
}

/* 太陽本体：反時計回り */
.taiyou2 .taiyou-elem-2 {
  animation: taiyou-rotate-ccw 60s linear infinite;
}




/* page-14  */

/* テキスト（.content）を下半分へ移動 */
.section.scene.page-14 .content {
  position: absolute;
  top: 60%;                 /* ここを変えると上下に動きます */
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  z-index: 3;               /* テキストは一番手前に */
  margin: 0;                /* 共通指定の margin を打ち消す */
}

@media screen and (min-width: 1000px) {

  .section.scene.page-14 .content {
    max-width: 840px;
  }

}

.section.scene.page-14 .content p {
  text-align: center;
}

/* 太陽・日蝕がはみ出しても他セクションに干渉しないようにする */
.section.scene.page-14 {
  position: relative;  /* すでに指定済みならそのままでOK */
  overflow: hidden;    /* はみ出した黒カバーを隠す */
}

/* 太陽本体：左右中央＆上つけ（上にはみ出し気味） */
.section.scene.page-14 .taiyou3 {
  position: absolute;
  top: -30%;          /* ここで「どれくらい上にはみ出すか」を調整 */
  left: 50%;
  transform: translateX(-50%);

  --taiyou-size: clamp(680px, 120vw, 1200px);
    width: var(--taiyou-size);       /* 大きさ。お好みで 100%〜150% くらいに */

  max-width: none;
  height: auto;
  z-index: 1;         /* テキスト(.content)より奥へ */
  pointer-events: none; /* クリック判定を邪魔しないように */
}


/* 太陽の回転 */
.taiyou3 .taiyou-elem-1,
.taiyou3 .taiyou-elem-2 {
  /* viewBox 全体を基準に 50% 50%（＝729.639,729.639 付近） */
  transform-box: view-box;
  transform-origin: 50% 50%;
  /* もし以前に fill-box を指定していたら、そちらは削除 or こちらを後ろに書いてください */
}

/* 光：時計回り */
.taiyou3 .taiyou-elem-1 {
  animation: taiyou-rotate-cw 10s linear infinite;
}

/* 太陽本体：反時計回り */
.taiyou3 .taiyou-elem-2 {
  animation: taiyou-rotate-ccw 15s linear infinite;
}



/* 黒い日蝕カバー（最初は上方向に押しつぶされていて見えない） */
/* セクション14：日蝕レイヤーの調整 */


/* ★ セクション全体を覆う黒いカバー */
.section.scene.page-14 .eclipse-cover {
  position: absolute;
  inset: 0;              /* top/right/bottom/left: 0; と同じ → セクション全体 */
  background: #000;
  transform-origin: top center;
  transform: scaleY(0);  /* GSAPで 1 まで伸ばす */
  pointer-events: none;
  z-index: 0;           
}



/* ==== page-19：メラックの窓レイアウト ==== */

.section.scene.page-19 {
  position: relative;
  overflow: hidden;
}



/* 背景の窓 */
.section.scene.page-19 .mado {
  position: absolute;
  top: 45%;
  right: 0;               /* ← 右寄せに固定 */
  left: auto;             /* ← left 制御は無効化 */
  transform: translateY(-50%);  /* ← X方向を動かさない */
  
  width: 100%;
  height: 30%;
  pointer-events: none;
  z-index: 0;

  opacity: 0; /* 初期状態 */

  /* 右側の線だけ表示 → clip-path アニメ開始用 */
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}


/* 光のレイヤーだけは別途ふわっと出す */
.section.scene.page-19 .mado-light {
  opacity: 0;                /* のちほど GSAP で 1 に */
}

/* 吹き出し本体 */
.section.scene.page-19 .fukidashi {
  position: absolute;
  top: 52%;
  left: 50%;
  /* 台形より少しだけ下にはみ出す感じなら -40% を -35% などお好みで */
  transform: translate(-50%, -40%);
  width: min(24vw, 180px);
  height: auto;
  pointer-events: none;

  z-index: 1;
  opacity: 0;                /* 最初は非表示（GSAPでフェードイン） */
}


/* セリフのテキストブロック */
.section.scene.page-19 .content {
  position: absolute;
  top: 70%;                  /* テキストはやや下寄せ */
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  z-index: 2;
}

@media screen and (min-width: 1000px) {
  .section.scene.page-19 .content {
    max-width: 840px;
  }
}



/* page-23 */

.section.scene.page-23 {
  position: relative;   /* 指定済みだが、再度おまじない */
  overflow: hidden;     /* 画面外にはみ出た星を隠す */
}

.section.scene.page-23 .content {
  z-index: 2;
}
/* ▼ page23：左上の “maru” */
.section.scene.page-23 .maru {
  position: absolute;
  top: -20%;
  left: -20%;
  width: clamp(200px, 80vw, 680px);
  height: auto;
  opacity: 0.8;       
  pointer-events: none;
  z-index: 0;            /* テキストより背面 */
}


@media screen and (min-width: 850px) {

  .section.scene.page-5 .moon {
    /* moon-size は680pxで固定されている（clamp上限） */

    /* ★ ここから位置をpxによる“絶対固定”に変更 ★ */

    top: -120px;     /* ← 画面からどれだけハミ出すか（例） */
    left: -200px;      /* ← ここで調整すればぴったりになります */

    /* % とコンフリクトしないよう、pxが完全に優先される */
  }
}


.maru {
  /* viewBox 全体を基準に 50% 50%（＝729.639,729.639 付近） */
  transform-box: view-box;
  transform-origin: 50% 50%;
  /* もし以前に fill-box を指定していたら、そちらは削除 or こちらを後ろに書いてください */
}

.maru {
  animation: taiyou-rotate-cw 20s linear infinite;
}





/* ▼ page23：右下 “coffe”（30度傾き＋常時ぴょんぴょん揺れる） */
.section.scene.page-23 .coffe {
  position: absolute;
  bottom: -4%;           /* 少しはみ出す */
  right: -2%;
  width: clamp(200px, 50vw, 360px);
  height: auto;

  transform: rotate(30deg);
  transform-origin: 50% 50%;

  pointer-events: none;
  z-index: 0;
  opacity: 0.7;

  animation: coffeBounce 1.8s ease-in-out infinite;
}


/* ▼ コーヒーの “ぴょんぴょん” アニメーション */
@keyframes coffeBounce {
  0%   { transform: rotate(30deg) translateY(0px); }
  30%  { transform: rotate(30deg) translateY(-9px); }
  60%  { transform: rotate(30deg) translateY(0px); }
  80%  { transform: rotate(30deg) translateY(-4px); }
  100% { transform: rotate(30deg) translateY(0px); }
}



/* 他セクションに干渉しないようにする */
.section.scene.page-24 {
  position: relative;  /* すでに指定済みならそのままでOK */
  overflow: hidden;    /* はみ出した黒カバーを隠す */
}

.section.scene.page-24 .content {
  position: relative;
  z-index: 3;
}

.section.scene.page-24 .mehrakmehrak {
  position: absolute;
  top: 16%; /* ここもあとで微調整するかも */
  left: 53%;
  transform: translate(-50%, -40%);
  max-width: none;
  width: clamp(380px, 50vw, 700px);
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* page-24：家の明かりが落とした“あたたかい影”をゆっくり揺らす */
.part.is-active .page-24::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* 背景より上、画像(.mehrakmehrak)や文字より下にしたいときは 0 でOK */

  /* 右下あたりにあたたかい光が落ちているイメージのラジアルグラデーション */
  background:
    radial-gradient(
      ellipse at 70% 75%,
      rgba(255, 215, 160, 0.65) 0%,
      rgba(255, 190, 135, 0.4) 22%,
      rgba(40, 20, 10, 0.0) 60%
    );

  /* 揺れアニメーション */
  animation: page24-warmShadow 2s ease-in-out infinite;
}

@keyframes page24-warmShadow {
  0% {
    transform: translate(40px, 80px) scale(1);
  }
  50% {
    transform: translate( 0px,  0px) scale(1.03);
  }
  100% {
    transform: translate(40px, 80px) scale(1);
  }
}


/* テキスト（.content）を下半分へ移動 */
.section.scene.page-24 .content {
  position: absolute;
  top: 60%;                 /* ここを変えると上下に動きます */
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  z-index: 3;               /* テキストは一番手前に */
  margin: 0;                /* 共通指定の margin を打ち消す */
}

@media screen and (min-width: 1000px) {

  .section.scene.page-24 .content {
    max-width: 840px;
  }

}


.section.scene.page-24 .mehrakmehrak {
  position: absolute;
  top: 10%;          
  left: 50%;
  transform: translateX(-50%);

  --taiyou-size: clamp(200px, 50vw, 360px);
    width: var(--taiyou-size);       /* 大きさ。お好みで 100%〜150% くらいに */

  max-width: none;
  height: auto;
  z-index: 1;         /* テキスト(.content)より奥へ */
  pointer-events: none; /* クリック判定を邪魔しないように */
}


.section.scene.page-24 .content p {
  text-align: center;
}






/* page-25 */

/* 親を基準にできるようにしておくと安心 */
.section.scene.page-25 {
  position: relative;
}

/* 中央配置したいイラスト */
.section.scene.page-25 .merhrak-moji {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* X も Y も 50% 分だけ戻す */

  --taiyou-size: clamp(300px, 100vw, 840px);
  width: var(--taiyou-size);

  max-width: none;
  height: auto;
  z-index: 1;
  pointer-events: none;
}


/* 必要なら .section.scene.page-25 を外してもOK */
.section.scene.page-25 .merhrak-moji .svg-elem-1 {
  stroke-dashoffset: 2665.65234375px;
  stroke-dasharray: 2665.65234375px;

  /* 最初は中身を透明にしておく（inline の fill は生かしたまま） */
  fill-opacity: 0;

  -webkit-transition:
    stroke-dashoffset 1s linear 0s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 0.8s;
  transition:
    stroke-dashoffset 1s linear 0s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 0.8s;
}

.section.scene.page-25 .merhrak-moji.active .svg-elem-1 {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

/* 2画目 */
.section.scene.page-25 .merhrak-moji .svg-elem-2 {
  stroke-dashoffset: 1478.285888671875px;
  stroke-dasharray: 1478.285888671875px;
  fill-opacity: 0;

  -webkit-transition:
    stroke-dashoffset 1s linear 0.12s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 0.9s;
  transition:
    stroke-dashoffset 1s linear 0.12s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 0.9s;
}

.section.scene.page-25 .merhrak-moji.active .svg-elem-2 {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

/* 3画目 */
.section.scene.page-25 .merhrak-moji .svg-elem-3 {
  stroke-dashoffset: 2022.063720703125px;
  stroke-dasharray: 2022.063720703125px;
  fill-opacity: 0;

  -webkit-transition:
    stroke-dashoffset 1s linear 0.24s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 1s;
  transition:
    stroke-dashoffset 1s linear 0.24s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 1s;
}

.section.scene.page-25 .merhrak-moji.active .svg-elem-3 {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

/* 4画目 */
.section.scene.page-25 .merhrak-moji .svg-elem-4 {
  stroke-dashoffset: 1051.1573486328125px;
  stroke-dasharray: 1051.1573486328125px;
  fill-opacity: 0;

  -webkit-transition:
    stroke-dashoffset 1s linear 0.36s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 1.1s;
  transition:
    stroke-dashoffset 1s linear 0.36s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 1.1s;
}

.section.scene.page-25 .merhrak-moji.active .svg-elem-4 {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

/* 5画目 */
.section.scene.page-25 .merhrak-moji .svg-elem-5 {
  stroke-dashoffset: 1650.015869140625px;
  stroke-dasharray: 1650.015869140625px;
  fill-opacity: 0;

  -webkit-transition:
    stroke-dashoffset 1s linear 0.48s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 1.2s;
  transition:
    stroke-dashoffset 1s linear 0.48s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 1.2s;
}

.section.scene.page-25 .merhrak-moji.active .svg-elem-5 {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}

/* 6画目 */
.section.scene.page-25 .merhrak-moji .svg-elem-6 {
  stroke-dashoffset: 2082.2783203125px;
  stroke-dasharray: 2082.2783203125px;
  fill-opacity: 0;

  -webkit-transition:
    stroke-dashoffset 1s linear 0.6s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 1.3s;
  transition:
    stroke-dashoffset 1s linear 0.6s,
    fill-opacity 0.7s cubic-bezier(1, 0, 0, 1) 1.3s;
}

.section.scene.page-25 .merhrak-moji.active .svg-elem-6 {
  stroke-dashoffset: 0;
  fill-opacity: 1;
}


.section.scene.page-25 .content {
  position: absolute;
  top: 65%;                
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 84%;
  z-index: 3;               /* テキストは一番手前に */
  margin: 0;                /* 共通指定の margin を打ち消す */
}

@media screen and (min-width: 1000px) {

  .section.scene.page-25 .content {
    max-width: 840px;
  }

}

.section.scene.page-25 .content p {
  text-align: center;
}