body {
  font-family: 'Georgia', 'Times New Roman', serif;
  line-height: 1.8;
  color: #2b2b2b;
  background-color: #fafafa;
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 30px;
  user-select: none;
}

.story-container {
  padding: 20px;
  border-left: 2px solid #556b2f; /* 暗い緑の線でアクセント */
}

h1 {
  font-family: 'Palatino Linotype', 'Book Antiqua', serif;
  font-style: italic;
  text-align: left; /* h1を中央揃えに */
  color: #556b2f; /* h1の色を暗い緑に */
  margin-top: 60px;
  margin-bottom: 40px;
  font-size: 2.5em;
  border-bottom: 2px solid #556b2f; /* 下線を暗い緑に */
  padding-bottom: 10px;
}

h1 a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

h1 a:hover {
  border-bottom: none; 
}

h2 {
  font-family: sans-serif;
  text-align: center;
  color: #2b2b2b;
  padding: 10px 0; /* 左右のパディングを削除 */
  margin-top: 40px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5em; /* 文字とボーダーの間の余白はそのまま */
}

h2::before,
h2::after {
  content: '';
  width: 3em; /* ボーダーの長さを3emに固定 */
  height: 2px;
  background-color: #556b2f;
}

p {
  margin-bottom: 1.5em;
  font-size: 18px;
  text-align: justify;
  text-indent: 1.8em;
}

.chapter-number {
  font-size: 0.9em;
  color: #777;
  display: block;
  margin-bottom: 5px;
}

a {
  color: #556b2f; /* リンクの色を暗い緑に */
  text-decoration: none;
  border-bottom: 1px dotted #556b2f; /* ドットの下線を暗い緑に */
}

a:hover {
  border-bottom: 1px solid #556b2f; /* ホバーで実線に */
}

/* Accordion Menu Styles */
.accordion-container {
  margin: 30px 2.5em;
}

.accordion-button {
  background-color: #fdfdfd; /* 白に近い背景色 */
  color: #2b2b2b;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: 1px solid #ddd; /* 細いボーダー */
  text-align: left;
  outline: none;
  font-size: 1.2em;
  font-family: sans-serif;
  transition: 0.4s;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 影を淡くする */
}

.accordion-button:hover {
  background-color: #fafafa;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* ホバー時に影を濃く */
}

.accordion-button::after {
  content: '+';
  font-size: 1.5em;
  color: #556b2f;
  float: right;
  margin-left: 5px;
}

.accordion-button.active::after {
  content: '-';
}

.panel {
  padding: 0 18px;
  background-color: #f1f1f1;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 5px 5px;
}

.panel ul {
  list-style: none;
  padding: 10px 0;
  margin: 0;
}

.panel li {
  padding: 8px 0;
  margin: 0;
}

.panel li:last-child {
  border-bottom: none;
}

.panel a {
  color: #556b2f;
  text-decoration: none;
  display: block;
}

.panel a:hover {
  text-decoration: underline;
  color: #3e5321;
}

/* 親チャプターのタイトル */
.chapter-title {
  font-weight: bold;
  color: #2b2b2b;
  display: block; /* 独立したブロックとして表示 */
  padding: 8px 0;
  border-bottom: 1px dashed #ddd;
}

/* サブチャプターのリスト */
.sub-chapters {
  list-style: none; /* リストのマークを消す */
  padding-left: 20px; /* 親リストから字下げ */
  margin-top: 5px;
}

.sub-chapters li {
  padding: 5px 0;
}

/* サブチャプターのリンク */
.sub-chapters a {
  color: #556b2f;
  text-decoration: none;
  display: block;
  border-bottom: none; /* 下線を削除 */
}

.sub-chapters a:hover {
  text-decoration: underline;
  color: #3e5321;
}

/* Footer Styles */
footer {
  text-align: center;
  margin-top: 60px;
  padding: 30px 20px;
  border-top: 1px solid #ddd;
  background-color: #f5f5f5;
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 小さな画面で折り返す */
  gap: 20px; /* リンク間のスペース */
  margin-bottom: 20px;
}

.footer-nav a {
  color: #556b2f;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: #6b8e23;
  text-decoration: underline;
}

.copyright {
  font-size: 0.9em;
  color: #777;
}

.copyright p {
  margin: 0; /* 段落のデフォルトマージンを削除 */
}

/* Poetry Styles */
.poetry-block-centered {
  font-family: 'Georgia', serif;
  font-style: italic;
  margin: 2.5em auto; /* 上下に余白、左右はautoで中央揃え */
  padding: 1.5em 2em;
  background-color: #f8f8f0;
  border: 1px solid #ddd;
  border-radius: 8px;
  position: relative;
  max-width: 70%; /* ブロックの最大幅を設定 */
  box-sizing: border-box; /* paddingとborderを幅に含める */
}

.poetry-block-centered::before {
  content: '“';
  font-family: sans-serif;
  font-size: 5em;
  color: rgba(85, 107, 47, 0.2);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 0;
}

.poetry-block-centered p {
  position: relative;
  z-index: 1;
  text-indent: 0;
  text-align: center; /* ここを中央揃えに */
  line-height: 1.6;
}

/* hr Styles */
hr.past-timeline {
  border: none;
  text-align: left;
  margin: 40px 0;
  padding-left: 1.5em;
}

hr.past-timeline::before {
  content: '＋ ＋ ＋';
  color: #556b2f; /* アクセントカラーで過去を強調 */
  font-size: 2em; /* 少し大きくして存在感を出す */
  letter-spacing: 0.5em;
  font-weight: bold;
}
hr.current-timeline {
  border: none;
  text-align: left;
  margin: 40px 0;
  padding-left: 1.5em; /* 1.5emのインデント */
}

hr.current-timeline::before {
  content: '＊'; 
  color: #808080; /* やや薄いグレーで控えめに */
  font-size: 2em;
  letter-spacing: 0.5em; /* 記号の間隔を調整 */
}

hr.future-timeline {
  border: none;
  text-align: left;
  margin: 40px 0;
  padding-left: 1.5em; /* 1.5emのインデント */
}

hr.future-timeline::before {
  content: '＊ ＊ ＊'; /* 半角スペースで区切ることで、適度な間隔を持たせる */
  color: #808080; /* やや薄いグレーで控えめに */
  font-size: 2em;
  letter-spacing: 0.5em; /* 記号の間隔を調整 */
}

/* 最上部へ戻る */
#page-top {
  position: fixed; /* 画面に固定する */
  right: 20px;     /* 右端から20px */
  bottom: 20px;    /* 下端から20px */
  display: none;   /* 最初は非表示にしておく */
  z-index: 1000;   /* 他の要素より手前に表示する */

  /* その他、ボタンのデザイン */
  padding: 10px 20px;
  background-color: #556b2f;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 挿絵 */
.novel-image-container {
  /* ブロックをセンタリングするための設定 */
  text-align: center;
}

.novel-image {
  /* 画像の幅を親要素の80%に設定 */
  width: 80%;
  
  /* 画像の角を丸くする */
  border-radius: 15px;
  
  /* 画像のセンタリング（ブロック自体もセンタリングする場合） */
  display: block;
  margin: 0 auto;
}