/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.balloon-set-box {
  display: flex;
  flex-wrap: wrap;
}
.balloon-set-box.left { /* 左 */
  flex-direction: row;
}
.balloon-set-box.right { /* 右 */
  flex-direction: row-reverse; /* アイコンと吹き出しの並びを入れ替える */
}
.balloon {
  position: relative; /* 三角の位置を固定するために設定 */
  display: inline-block;
  max-width: 100%;
  margin: 10px 30px 20px; /* 上 左右 下のマージン */
  padding: 8px 15px; /* ふきだし内の余白 */
  background: #ffffe1; /* 背景色 */
  text-align: left; /* テキストの揃え */
  border-radius: 15px;
}
.balloon::after {
  content: '';
  border: 30px solid transparent;
  border-top-color: #ffffe1;
  position: absolute;
  top: 0;z-index: -1;
}
.left .balloon::after { /* 左側からの三角の位置 */
  left: -30px;
}
.right .balloon::after { /* 右側からの三角の位置 */
  right: -30px;
}

.icon-face {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  overflow: hidden;
}