<div class="cp_quote">
<blockquote>
<p>There are two means of refuge from the miseries of life: music and cats.</p>
<div class="author">
<img src="img.jpg" />
<p>Albert Schweitzer</p></div>
</blockquote>
</div>

*, *:before, *:after {
	font-family: 'FontAwesome';
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_quote {
	position: relative;
	width: 90%;
	margin: 2em auto;
	border-radius: 0.3em;
	background: #ffffff;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
/* アイコン */
.cp_quote::before {
	position: absolute;
	top: -10px;
	right: calc(50% - 25px);
	left: calc(50% - 25px);
	width: 50px;
	height: 50px;
	content: '';
	border-radius: 50%;
	background: #e91e63;
}
.cp_quote::after {
	font-size: 5em;
	line-height: 1;
	position: absolute;
	top: 0;
	right: calc(50% - 2.5em);
	left: calc(50% - 2.5em);
	content: '1D';
	text-align: center;
	color: #ffffff;
}
/* 引用 */
.cp_quote blockquote {
	margin: 0;
	padding: 2em 0 0 0;
}
.cp_quote blockquote p {
	margin: 0;
	padding: 1em;
}
/* 引用元名 */
.cp_quote .author {
	line-height: 0;
	position: relative;
	padding: 0.5em;
	border-top: 1px dashed #e91e63;
}
.cp_quote .author img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.cp_quote .author p {
	position: absolute;
	top: 50%;
	left: calc(40px + 1em);
	margin: 0;
	padding: 0;
}