/*--------------------
 吹き出しを作る
--------------------*/
.balloon {
width: 70%;
margin: 0 auto;
margin-top: 1em;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon p {
/* width: 120px; */    /* 62行目と重複するので削除（なくても影響ない） */
/* height: 120px; */
/* margin: 0 0 0 0; */
}
.balloon figure {
width: 120px;
height: 120px;
margin: 0 0 0 0;
}
.balloon-image-left {
float: left;
margin-right: 20px;
}
.balloon-image-right {
float: right;
margin-left: 20px;
}
.balloon p img {
width: 100%;
height: 100%;
margin: -10 0 0 0;
}
.balloon figure img {
width: 100%;
height: 100%;
margin: -10 0 0 0;
}
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 15px;
border: 1px solid;
border-radius: 6px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right,.balloon-text-left{
border-color: #aaa;
}

.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.balloon p {
margin: 0 0 15px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #aaa;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #aaa;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}