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

.cp_qa02 dt,
.cp_qa02 dd {
  position: relative;
  padding: 0.5em;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
  border-radius: 0.3em;
}
.cp_qa02 dt {
  margin: 0 3em 1em 3em;
  background: #ffe0b2;
}
.cp_qa02 dd {
  margin: 0 3em 3em 3em;
  background: #b2ebf2;
}
/* 吹き出し▶︎ */
.cp_qa02 dt::before,
.cp_qa02 dd::before{
  position: absolute;
  content: '';
  top: 5px;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 0, 0% 100%, 100% 40%);
}
/* 質問吹き出し▶︎ */
.cp_qa02 dt::before {
  left: -0.5em;
  background: #ffe0b2;
  transform: scaleX(-1);
}
/* 答え吹き出し▶︎ */
.cp_qa02 dd::before {
  right: -0.5em;
  background: #b2ebf2;
}
/* ?!アイコン */
.cp_qa02 dt::after,
.cp_qa02 dd::after {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  width: 24px;
  height: 24px;
  color: #ffffff;
  clip-path: circle(50% at 50% 50%);
}
/* ?アイコン */
.cp_qa02 dt::after {
  left: -2.5em;
  content: '？';
  background: #f57c00;
}
/* !アイコン */
.cp_qa02 dd::after {
  right: -2.5em;
  content: '！';
  background: #0097a7;
}