.detail-reaction__inner {
  /* ここに適用したいスタイルを追加 */
  padding: 20px;
  background-color: #f9f9f9; /* 軽い背景色を追加 */
  border-radius: 10px; /* 角丸のデザインを追加 */
  margin: auto; /* 中央揃え */
  max-width: 800px; /* 最大幅を設定 */
}

/* リアクションボタンの親要素のスタイル */
.reaction_buttons ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0;
  margin: 0 auto; /* 中央揃え */
  width:100%;
}

/* リアクションボタンのスタイル */
.reaction_button {
  flex: 1; /* 各ボタンに等しい幅を割り当てる */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  margin: 5px;
  border-radius: 20px; /* 角丸のデザイン */
  border: 1px solid #ddd; /* 枠線を追加 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease; 
  cursor: pointer;
}

.reaction_button:hover {
  background-color: #e0e0e0; /* ホバー時の背景色を変更 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* ホバー時に影を強調 */
}

/* FontAwesomeアイコン用のスタイル */
.reaction_button::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}

/* ボタンのテキストスタイル */
.button_name, .braces, .count_number {
  margin: 0 2px;
}

/* 特定のボタンに異なるアイコンを適用 */
.reaction_button_0::before { content: "\f004"; } /* 役に立つ - ハート */
.reaction_button_1::before { content: "\f0eb"; } /* 分かりやすい - 光 */
.reaction_button_2::before { content: "\f04b"; } /* 自分でもやってみたい - プレイ */

/* ボタン内のテキストと数字を縦に配置 */
.reaction_button div {
  display: flex;
  flex-direction: column; /* 子要素を縦に並べる */
  align-items: center;
  justify-content: center;
}

/* 括弧を非表示に */
.braces {
  display: none;
}

/* ボタン名のスタイル */
.button_name {
  margin-bottom: 5px; /* テキストと数字の間隔を調整 */
  display: block; /* 必要に応じて設定 */
}

/* 数字のスタイル */
.count_number {
  /* 必要に応じてスタイルを調整 */
}