@charset "UTF-8";
.klee-one-regular {
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}


/* 文字色と背景の基本設定 */
body {
   font-family: "Shippori Mincho", "Klee One", "Yusei Magic", serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #f7f2ed; /* 画像の隙間から見える下地の色（こげ茶） */
    position: relative;
}

/* 背景画像専用のレイヤーを作ります */
body::before {
    content: "";
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* ノートより後ろに配置 */
    
    /* 背景画像の設定 */
    background-image: url("背景.jpg"); 
    background-size: cover;
    background-position: center;
    
    /* --- ここで「暗さ」と「ボケ」を調整！ --- */
    filter: sepia(0) blur(0px); 
    /* brightness(0.6) = 60%の明るさに落とす（暗くする） */
    /* blur(4px) = 4ピクセル分ぼかす */
}


/* ノートの箱：左右の余白を広げる */
.notebook {
    position: relative;
    width: 50%; /* 80%から70%に下げて左右の余白を確保 */
    max-width: 850px;
    margin: 80px auto;
    background-color: #f4efea;
    border-radius: 120px 120px 100px 100px / 60px 60px 50px 50px; /* 上下の丸み */
    box-shadow: 0 15px 50px rgba(75, 54, 22, 0.2);
    padding: 100px 300px; /* 左右のパディングを増やして文字を中央へ */
    min-height: 2200px;

  /* --- ミウムのようなザラザラ感を出す隠し味 --- */
    background-image: url("noise.JPG"); /* 小さな砂嵐のような透過画像があれば */
    background-blend-mode: soft-light;
    
    box-shadow: 0 10px 30px rgba(255, 162, 12, 0.986); /* 机に置いているような影 */
    border-radius: 2px;
    min-height: 100vh;     /* コンテンツが少なくても1画面分は確保 */
}


 .pic-small{
    width: 30%;
 }


/* タイトル画像周りの調整 */
.chapter-title-wrap {
    text-align: center;
    margin: 40px 0 60px 0;
}
.title-img {
    max-width: 80%;
    height: auto;
}

/* 導入イラスト */
.intro-illust-wrap {
    text-align: center;
    margin-bottom: 20px;
}
.intro-img {
    max-width: 100%;
    border-radius: 10px;
}

/* 91行目：ノートの箱（幅と背景色の修正） */
.notebook {
    background-color: #fbf3e5fc; /* 透けない白に戻す */
    width: 65%;               /* ノートの横幅を広げ直す（お好みで調整） */
    max-width: 700px;
    margin: 60px auto 240px;
    padding: 100px 140px;      /* 左右の余白を多めにして、罫線が端まで行くのを防ぐ */
    border-radius: 40px 40px 32px 32px;
    position: relative;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    opacity: 0.85;
}

.chapter-title {
   font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
  color: #6b5a4a; /* 鉛筆色 */
  margin-bottom: 40px;
}

/* 書かれる部分 */
.write-mask {
  display: inline-block;
  white-space: nowrap;

  /* 最初は見えない */
  width: 0;
  overflow: hidden;

  /* 書かれていくアニメーション */
  animation: write-text 2.2s ease-out forwards;
    pencil-wobbl :0.15s linear infinite;
}

@keyframes write-text {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes pencil-wobble {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0.5px); }
  100% { transform: translateY(0); }
}

/* ペラ全体（リンク） */
.next-corner {
  position: absolute;
   right: -33px;        /* ノートの右端にぴったり */
  bottom: -55px;       /* ノートの下端にぴったり */
  z-index: 30;
  display: block;
  cursor: pointer;
}
/* ペラ画像本体 */
.next-corner img {
  width: 320px;
   height: auto;
  display: block;
   transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}



/* ホバー時の演出 */
.next-corner:hover img {
  transform: scale(1.08) translate(-4px, -4px);  /* ほんの少し大きく＋上にずらす */
}


/* --- 文字と罫線の設定だけを変更 --- */

/* 1. 文章全体の余白（ノートの端から文字を離す） */
.interview-content {
  padding: 10% !important; /* 左右に余白を作り、サイトの雰囲気に近づけます */
  box-sizing: border-box;
}

/* 2. 1セット（私＋森さん）ごとの大きな間隔 */
.chat-set {
    opacity: 0;
  transform: translateY(20px);
  transition: 
    opacity 0.8s ease,
    transform 0.8s ease;
  margin-bottom: 8rem; /* 次の会話セットまでの距離 */
}

.line-gap {
  display: block;        /* 行として独立させる */
  margin-top: 3em;     /* ← ここで「間」の大きさ調整 */
}

/* 表示されたとき */
.chat-set.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chat-set.is-visible .line-mori {
  transition-delay: 0.2s;
}

/* 3. 共通の文字詰め・罫線の設定 */
.interview-content p {
  margin: 0 !important;
  margin-bottom: 0.9rem;
  line-height: 2;      /* リンク先のようなかなりタイトな行間 */
  letter-spacing: -0.01em; /* 文字を少しだけ横に詰めると洗練されます */
}

/* 私の文字：p.line-me と書くことで優先度を最大にします */
.interview-content p.line-me {
  font-size: 1.2rem !important; /* あのサイト風に小さめ */
  color: #86763f !important;       /* 濃いめのグレー */
  font-weight: 600 !important;
}

/* 森さんの文字：p.line-mori と書く */
.interview-content p.line-mori {
  font-size: 0.95rem !important;  /* さらに小さく */
  color: #352a1a !important;       /* 薄めのグレー */
  padding-left: 0.8rem;
}

/* 空の罫線 */
.interview-content p.spacer {
  height: 2.2rem;
}

/* 装飾の配置例 */
.deco-item { position: absolute; z-index: 5; pointer-events: none; }

.memo-paper { top: 600px; left: -80px; width: 200px; transform: rotate(-8deg); }
.sticker1 { top: 300px; right: -50px; width: 100px; }
.illust2 { top: 1200px; left: 50%; transform: translateX(-50%); width: 250px; } /* 中央に配置 */

/* 固定の手 */
.fixed-hand {
    position: fixed; /* 画面に固定 */
    bottom: -200px;
    right: -120px;
    /* --- ここを追加！ --- */
    z-index: 9999;   /* 他のどんな要素よりも手前に表示させる */
    pointer-events: none; /* 手が邪魔で下のボタンが押せないのを防ぐ */
}

.fixed-hand img {
    width: 530px;    /* サイズはお好みで */
    height: auto;
    display: block;
      /* 影の設定：右に10px、下に10px、ぼかし15px、色は黒の透明度30% */

    filter: drop-shadow(-10px -5px 10px rgba(58, 33, 3, 0.6)) brightness(1.1);
     transform-origin: 80% 35%;           /* 手首あたりを中心に揺れるようにする */
  animation: hand-writing 1.1s ease-in-out infinite alternate;
}

/* ゆらゆら描いてる感じのアニメーション */
@keyframes hand-writing {
  0% {
    transform: rotate(-1.8deg);
  }
  50% {
    transform: rotate(0.9deg);
  }
  100% {
    transform: rotate(-1.8deg);
  }
}

.fixed-hand-left {
    position: fixed; /* 画面に固定 */
    bottom: -230px;
    left: -110px;
    /* --- ここを追加！ --- */
    z-index: 9999;   /* 他のどんな要素よりも手前に表示させる */
    pointer-events: none; /* 手が邪魔で下のボタンが押せないのを防ぐ */
}

.fixed-hand-left img {
    width: 530px;    /* サイズはお好みで */
    height: auto;
    display: block;
     /* 左手は左から生えているので、影を少し左（マイナス）にずらすとリアルです */
    filter: drop-shadow(10px -5px 10px rgba(58, 33, 3, 0.6)) brightness(1.1);
}

@media screen and (max-width: 768px) {

  body {
    font-size: 14px;
  }

  .container {
    width: 90%;
    margin: 0 auto;
  }

  img {
    max-width: 100%;
    height: auto;
  }

}