<div class="cp_qa">
<div class="cp_cat">カテゴリーなど</div>
<dl>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
</dl>
</div>
<div class="cp_qa">
<div class="cp_cat">カテゴリーなど</div>
<dl>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
</dl>
</div>
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
font-family: 'FontAwesome', sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa {
position: relative;
}
.cp_qa .cp_cat {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 14.5em;
height: auto;
padding: 0em;
text-align: center;
}
.cp_qa dl {
line-height: 1.5;
position: relative;
display: inline-block;
margin: 0 0 2em 15em;
padding: 0 0 0 1em;
border-left: 1px solid #333333;
}
.cp_qa dl::before {
font-size: 5em;
position: absolute;
display: inline-block;
top: 0;
left: -2em;
width: 1em;
height: 1em;
line-height: 1em;
content: '\f059';
opacity: 0.1;
}
.cp_qa dt {
margin: 0 0 1em 3em;
}
.cp_qa dd {
margin: 0 0 1.5em 3em;
}
.cp_qa dt::before,.cp_qa dd::before {
font-family: serif;
font-size: 1.3em;
margin: 0 1em 0 -1.7em;
}
.cp_qa dt::before {
content: 'Q';
}
.cp_qa dd::before {
content: 'A';
}