DEMO

HTML

		<details class="accordion3">
  <summary>Q. こちらに質問文を入れます。<span class="icon"></span></summary>
  <p>回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。
  </p>
</details>
	
<details class="accordion3">
  <summary>Q. こちらに質問文を入れます。<span class="icon"></span></summary>
  <p>回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。回答がこちらに入ります。
  </p>
</details>
		

HTML説明

文字の変更方法
タイトル(2行目)本文(3行目)のテキストを任意のものに書き換えてください

アコーディオンブロックの増減方法
detailsタグ(1~5行目)までが1つのブロックですコピーペーストもしくは削除で増減させてください。

CSS

		<style>
summary {
  display: flex;
  justify-content: space-between;
  color: #4a90e2;
  font-weight: bold;
  cursor: pointer;
}
.accordion3 {
  width: 100%;
  max-width: 580px;
  margin: 20px auto;
  border-radius: 8px;
  border-style: solid;
  border-width: 4px;
  border-color: #4a90e2;
  padding: 30px;
}
.accordion3 p{
  margin: 16px auto;
}
.icon {
  display: block;
  position: relative;
  width: 24px;
  margin-left: 6px;
  flex-shrink: 0;
  transition: transform 0.4s;
}
.icon::before, .icon::after {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 3px;
  background-color: #4a90e2;
  top: 50%;
  transform: translateY(-50%);
}
.icon::before {
  left: 0;
  transform: rotate(45deg);
}
.icon::after {
  right: 0;
  transform: rotate(-45deg);
}
details[open] .icon::before {
  transform: rotate(135deg); /* 180度から135度に変更 */
}
details[open] .icon::after {
  transform: rotate(-135deg); /* -180度から-135度に変更 */
}
</style>
		

CSS説明

色の変更方法
文字色(5行目)・ボーダー色(16行目)・矢印色(36行目)のテキストを任意の色コードに書き換えてください