<div class="cp_qa04">
<h1>category</h1>
<dl>
  <dt>質問テキスト</dt>
  <dd>答えテキスト</dd>
  <dt>質問テキスト</dt>
  <dd>答えテキスト</dd>
</dl>
</div>

.cp_qa04 {
  margin-left: 10px;
  padding: 1em 1em 0 20px;
  background: #e1f5fe;
}
/*カテゴリー名のリボン*/
.cp_qa04 h1 {
  font-size: 120%;
  position: relative;
  margin: 0 1em 1em -30px;
  padding: 0.3em;
  color: #ffffff;
  background-color: #42a5f5;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.cp_qa04 h1::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 10px;
  height: 10px;
  background: #1976d2;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
/*QAテキスト*/
.cp_qa04 dl {
  margin: 0;
}
.cp_qa04 dt {
  margin-bottom: 0.5em;
  padding: 0.2em 0.5em 0.5em 2em;
  border-radius: 5px;
  background: #ffb74d;
}
.cp_qa04 dd {
  margin-bottom: 1em;
  margin-left: 0;
  padding: 0.5em 1em 1.5em 3em;
}
/* QAアイコン */
.cp_qa04 dt::before,
.cp_qa04 dd::before{
  font-size: 130%;
  color: #ffffff;
}
.cp_qa04 dt::before {
  margin: 0.3em 0.3em 0 -1em;
  content: 'Q';
}
.cp_qa04 dd::before {
  margin: 0 0.7em 0 -2.2em;
  padding: 0.2em 0.4em;
  content: 'A';
  border-radius: 5px;
  background: #00bcd4;
}