/* =========================================
   小説ページ用の追加スタイル
========================================= */

/* 小説コンテンツ全体の調整（左寄せベース） */
.story-content {
  text-align: left !important; /* 中央揃えを上書き */
  padding: 3rem 4rem !important; /* 余白を広めに取って読みやすく */
}

/* タイトル */
.story-title {
  font-size: 2.2rem;
  color: #111;
  margin-bottom: 2rem;
  font-weight: bold;
}

/* ページ内ナビゲーション（起・会議にて...など） */
.story-nav ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.story-nav a {
  text-decoration: none;
  color: #4A90E2; /* 画像に合わせたブルー */
  font-size: 1rem;
  transition: opacity 0.3s;
}

.story-nav a:hover {
  opacity: 0.7;
}

/* 区切り線 */
.story-divider {
  border: none;
  border-top: 1px solid #e0d8c8;
  margin-bottom: 2rem;
}

/* 小見出し（右寄せの「起」など） */
.section-title {
  text-align: right;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 1.5rem;
}
.section-title {
  text-align: left;           /* 右寄せから左寄せに変更 */
  font-size: 1.3rem;          /* 少し大きくして視認性をアップ */
  font-weight: bold;
  color: #4e342e;             /* 本文の色と統一感を出す */
  margin-top: 2.5rem;         /* 上に余白を作って区切りを明確に */
  margin-bottom: 1.5rem;
  padding-left: 0.8rem;       /* 線の分だけ左に余白を作る */
  border-left: 4px solid #8d6e63; /* 左側にアクセントの縦線を追加 */
  line-height: 1.2;
}

/* 小説本文の段落 */
.story-section p {
  line-height: 1.8;
  color: #4e342e; /* 柔らかいこげ茶色で目に優しく */
  margin-bottom: 1.5rem;
  text-indent: 1em; /* 段落の最初の1文字を下げる */
  text-align: justify; /* 両端揃えで美しく */
}

/* レスポンシブ対応（スマホ画面で余白を狭める） */
@media screen and (max-width: 750px) {
  .story-content {
    padding: 2rem 1.5rem !important;
  }
  .story-title {
    font-size: 1.6rem;
  }
  .story-nav ul {
    gap: 10px;
  }
}