/***********************************
チャット風レイアウト
************************************/
/* アイコン付き吹き出し（左側） */
.talk {
margin-bottom: 10px;
}

.talk figure img {
width: 100%;
height: 100%;
border: 2px solid #000; /* 円の線の太さと色の設定 */
border-radius: 50%;
margin: 0;
}

p.talk-text {
margin: 0 0 8px;
}

p.talk-text:last-child {
margin-bottom: 0px;
}

.talk:after,.talk:before {
clear: both;
content: "";
display: block;
}

.talk-img {
margin-left: 4px;
margin-top: -1px;
float: left;
width: 70px;
height: 70px;
}

.talk-txt {
color: #444; /* 吹き出し内テキストの色 */
position: relative;
margin-left: 100px;
padding: 0.6em 0.8em 1em 0.8em;
border: 2px solid #000; /* 吹き出し線の太さと色の設定 */
background-color: #fff; /* 吹き出しの背景色 */
border-radius: 5px; /* 吹き出しの角の丸み */
}

.talk-txt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #000; /* 吹き出しの三角形の設定（色以外の変更は非推奨） */
top: 24px;
left: -20px;
}

.talk-txt:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 24px;
left: -16px;
}

/* アイコン付き吹き出し（右側） */
.talk2 {
margin-bottom: 10px;
}

.talk2 figure img {
width: 100%;
height: 100%;
border: 2px solid #000; /* 円の線の太さと色の設定 */
border-radius: 50%;
margin: 0;
}

p.talk2-text {
margin: 0 0 8px;
}

p.talk2-text:last-child {
margin-bottom: 0px;
}

.talk2:after,.talk:before {
clear: both;
content: "";
display: block;
}

.talk2-img {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 70px;
height: 70px;
}

.talk2-txt {
position: relative;
margin-right: 100px;
padding: 0.6em 0.8em 1em 0.8em;
border: 2px solid #000; /* 吹き出し線の太さと色の設定 */
background-color: #fff; /* 吹き出しの背景色 */
border-radius: 5px; /* 吹き出しの角の丸み */
}

.talk2-txt:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 11px solid #000; /* 吹き出しの三角形の設定（色以外の変更は非推奨） */
top: 24px;
right: -23px;
}

.talk2-txt:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 24px;
right: -19px;
}

/* アイコン付き吹き出し（左側/思考） */
.talk3 {
margin-bottom: 10px;
}

.talk3 figure img {
width: 100%;
height: 100%;
border: 2px solid #000; /* 円の線の太さと色の設定 */
border-radius: 50%;
margin: 0;
}

p.talk3-text {
margin: 0 0 8px;
}

p.talk3-text:last-child {
margin-bottom: 0px;
}

.talk3-img {
margin-left: 4px;
margin-top: -1px;
float: left;
width: 70px;
height: 70px;
}

.talk3:after,.talk:before {
clear: both;
content: "";
display: block;
}

.talk3-txt {
color: #444; /* 吹き出し内テキストの色 */
position: relative;
margin-left: 100px;
padding: 0.6em 0.8em 1em 0.8em;
border: 2px solid #000; /* 吹き出し線の太さと色の設定 */
background-color: #fff; /* 吹き出しの背景色 */
border-radius: 5px; /* 吹き出しの角の丸み */
}

/* 大きい丸 */
.talk3-txt::before{
  content: '';
  position: absolute;
  display: block;
  border: 2px solid #000; /* 吹き出し線の太さと色の設定 */
  background-color: #fff; /* 吹き出しの背景色 */
  border-radius: 55px; /* 吹き出しの角の丸み */
  left: -10px;
  bottom: 15px;
  width: 10px;
  height: 10px;
  top: 24px;
}
/* 小さい丸 */
.talk3-txt::after{
  content: '';
  position: absolute;
  display: block;
  border: 2px solid #000; /* 吹き出し線の太さと色の設定 */
  background-color: #fff; /* 吹き出しの背景色 */
  border-radius: 55px; /* 吹き出しの角の丸み */
  left: -20px;
  bottom: 24px;
  width: 5px;
  height: 5px;
}

/* アイコン付き吹き出し（右側/思考） */
.talk4 {
margin-bottom: 10px;
}

.talk4 figure img {
width: 100%;
height: 100%;
border: 2px solid #000; /* 円の線の太さと色の設定 */
border-radius: 50%;
margin: 0;
}

p.talk4-text {
margin: 0 0 8px;
}

p.talk4-text:last-child {
margin-bottom: 0px;
}

.talk4:after,.talk:before {
clear: both;
content: "";
display: block;
}

.talk4-img {
margin-right: 4px;
margin-top: -1px;
float: right;
width: 70px;
height: 70px;
}

.talk4-txt {
position: relative;
margin-right: 100px;
padding: 0.6em 0.8em 1em 0.8em;
border: 2px solid #000; /* 吹き出し線の太さと色の設定 */
background-color: #fff; /* 吹き出しの背景色 */
border-radius: 5px; /* 吹き出しの角の丸み */
}

.talk4:after,.talk:before {
clear: both;
content: "";
display: block;
}

/* 大きい丸 */
.talk4-txt::before{
  content: '';
  position: absolute;
  display: block;
  border: 2px solid #000; /* 吹き出し線の太さと色の設定 */
  background-color: #fff; /* 吹き出しの背景色 */
  border-radius: 55px; /* 吹き出しの角の丸み */
  right: -10px;
  bottom: 15px;
  width: 10px;
  height: 10px;
  top: 24px;
}
/* 小さい丸 */
.talk4-txt::after{
  content: '';
  position: absolute;
  display: block;
  border: 2px solid #000; /* 吹き出し線の太さと色の設定 */
  background-color: #fff; /* 吹き出しの背景色 */
  border-radius: 55px; /* 吹き出しの角の丸み */
  right: -20px;
  bottom: 24px;
  width: 5px;
  height: 5px;
}