.content-container {
  /* 固定の高さを設定し、はみ出たコンテンツを非表示にする */
  max-height: 150px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease-in-out; /* スムーズなアニメーションのために */
}

.content-container.expanded {
  /* 展開時の高さ（コンテンツ全体を表示） */
  max-height: 1000px; /* 十分に大きい値を設定する */
}

.read-more-gradient {
  /* グラデーションをかける要素のスタイル */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* グラデーションの高さ */
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none; /* クリックイベントを透過させる */
}

.content-container.expanded .read-more-gradient {
  /* 展開時はグラデーションを非表示にする */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.read-more-button {
  /* ボタンのスタイル */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* グラデーションより手前に表示する */
}

.content-container.expanded .read-more-button {
  /* 展開時はボタンを非表示にする */
  display: none;
}

.read-more-button {
  /* ボタンの配置 */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  /* ボタンの見た目 */
  background-color: #007bff; /* 背景色 */
  color: white;              /* 文字色 */
  border: none;              /* 枠線をなくす */
  padding: 5px 5px;        /* 内側の余白 */
  border-radius: 5px;        /* 角を丸くする */
  cursor: pointer;           /* マウスカーソルをポインターにする */
  font-size: 16px;           /* フォントサイズ */
  font-weight: bold;         /* フォントを太くする */
  transition: background-color 0.3s ease; /* マウスホバー時のアニメーション */
}

/* ボタンにマウスが乗ったときの装飾 */
.read-more-button:hover {
  background-color: #0056b3; /* 背景色を少し濃くする */
}