/*****ここから会話のCSS*****/
.talk-wrap{
	display: block;
	clear: both;
	margin:0 auto 3px auto;
}
.talk-wrap p{
	margin:0;
}
.left-icon{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	background: no-repeat;
	background-size: 100%; /*アイコンの拡大率*/
	background-position: center;
	float:left;
	display:inline-block;
	box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
	border: 3px solid #fff; /*左のアイコンの枠の設定*/
	margin-bottom: 10px;
}
.talk-left{
	float:right;
	position: relative;
	background: #fff; /*左の会話の背景色*/
	border: 2px solid #666;
	padding: 3%;
	border-radius: 10px;
	width: 70%;
	margin-top:10px;
	box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
	margin-bottom: 10px;
}
.talk-left:before {
	content: "";
	display: inline-block;
	border: 10px solid transparent;
	border-right-color: #666;
	position: absolute;
	left: -20px;
	top: 25%;
	margin-top: -9px;
}
.talk-left:after {
	content: "";
	display: inline-block;
	border: 9px solid transparent;
	border-right-color: #fff;
	position: absolute;
	left: -16px;
	top: 25%;
	margin-top: -8px;
}
.right-icon{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	-webkit-border-radius:50%;
	background: no-repeat;
	background-size: 100%; /*アイコンの拡大率*/
	background-position: center;
	float:right;
	display:inline-block;
	box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
	border: 3px solid #fff; /*右のアイコンの枠の設定*/
	margin-bottom: 10px;
}
.talk-right{
	float:left;
	position: relative;
	background: #fff; /*右の会話の背景色*/
	border: 2px solid #666;
	padding: 3%;
	border-radius: 10px;
	width: 70%;
	margin-top:10px;
	box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
	margin-bottom:10px;
}
.talk-right:before {
	content: "";
	display: inline-block;
	border: 10px solid transparent;
	border-left-color: #666;
	position: absolute;
	right: -20px;
	top: 25%;
	margin-top: -9px;
}
.talk-right:after {
	content: "";
	display: inline-block;
	border: 9px solid transparent;
	border-left-color: #fff;
	position: absolute;
	right: -16px;
	top: 25%;
	margin-top: -8px;
}
.talk-end{
	clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
.left-icon{
	width: 80px;
	height: 80px;
}
.talk-left{
	width: 65%; 
}
.right-icon{
	width: 80px;
	height: 80px;
}
.talk-right{
	width: 65%; 
}
}
@media screen and (max-width: 380px){
.left-icon{
	width: 60px;
	height: 60px;
}
.talk-left{
	width: 65%; 
}
.right-icon{
	width: 60px;
	height: 60px;
}
.talk-right{
	width: 65%; 
}
}