.library {
  font-size: 15px;
  color: #471d12;
  line-height: 1.8;
}

.library h2 {
  font-size: 20px;
  margin-bottom: 8px;
}

.library-lead {
  font-size: 14px;
  margin-bottom: 30px;
  color: #6b4a3a;
}

.library-section {
  margin-bottom: 35px;
}

.library-section h3 {
  font-size: 16px;
  margin-bottom: 10px;
  padding-left: 6px;
  border-left: 3px solid #d8c5b8;
}

.library-section ul {
  list-style: none;
  padding-left: 10px;
  margin: 0;
}

.library-section li {
  margin-bottom: 6px;
}

.library-section .date {
  font-weight: bold;
  margin-right: 8px;
  white-space: nowrap;
}
/* 本文部分 */
.news-section .news-content {
  flex: 1;                /* 残りの幅をすべて使う */
  word-break: break-all;  /* 長いURLなどがあっても崩さない */
}
.fairy-report {
  background: rgba(255, 255, 255, 0.5); /* ほんのり背景を白く */
  border: 1px dashed #ffb74d;           /* 妖精らしい点線の枠 */
  padding: 10px;
  border-radius: 5px;
  margin-top: 5px;
}
/* スマホの時、妖精リポートだけを上下に並べる */
@media screen and (max-width: 480px) {
  /* 妖精リポート(fairy-report)がついている行だけ設定を変える */
  .news-section li.fairy-report {
    display: block;      /* 横並びをやめて上下に並べる */
  }

  .news-section li.fairy-report .date {
    display: block;      /* 日付を1行使って表示 */
    margin-bottom: 5px;  /* 文章との間に少し隙間を作る */
  }
  .news-section li {
    font-size: 13px;  /* 文章の文字も少し小さくして一行に収まりやすくする */
  }
}