/* 吹き出し本体 - 普通の吹き出し */
.balloon1{
  position: relative;
  padding: 20px;
  background-color: #fff3ad;
  border-radius: 10px;         /* 角丸を指定 */
}
/* 三角アイコン - 普通の吹き出し */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #fff3ad;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}


/* 吹き出し本体 - 枠線付きの吹き出し */
.balloon2{
  position: relative;
  padding: 20px;
  margin-bottom: 30px;
  background-color: #ffffff;
  border: 2px solid #cccccc;
  border-radius: 10px;         /* 角丸を指定 */
}
/* 三角アイコン - 枠線付きの吹き出し */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
 
  top: 20px;
  border-right: 15px solid #cccccc;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
.balloon2::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -12px;
  top: 20px;
  border-right: 15px solid #ffffff;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}


.balloon2 .icon{
  position: absolute;
  margin-left: 10px; 
  left: -110px;
  top: 0;
}