/* 吹き出し部分 共通事項 */
.balloon-chat {
  margin: 5px auto;
  padding: 10px 5px;
  max-width: 900px;
  font-size: 1rem;
}


/* 吹き出しなし（見出しなど） */
.balloon-center {
  text-align: center;
  display: block;
  padding: 10px 20px;
  overflow: hidden; 
}

/* 吹き出しなし（見出しなど） 枠囲み */
.balloon-chat:has(.balloon-center) {
  border:solid 2px #0099ce;
}

/* 吹き出しなし（見出しなど） コメント */
.comment-center {
  position: relative;
  display: inline-block;
  margin: 5px;
  padding: 17px 20px;
  max-width: 100%;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  background: #0099ce;
  border-radius: 12px;
}

/* 吹き出しなし（長文など） コメント */ /* 追加 */
.comment-center_long {
  position: relative;
  display: inline-block;
  margin: 5px;
  padding: 17px 20px;
  max-width: 100%;
  color: #555;
  background: #e0edff;
  border-radius: 12px;
  border: solid 1px #acacac;  /* 追加 */
  box-sizing: border-box;  /* 追加 */
}

/* 画像入れるとき */  /* 追加 */
.comment-center_long img{
 width:500px ;
 max-width:100% ;
  height: auto;
}


/* 上からの吹き出し */   /* 追加 */
.balloon-top{
  text-align: right;
  margin: 1rem 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
}

/* 上からの吹き出し　コメント */ /* 追加 */
.comment-top {
  text-align: left;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 17px 13px;
  max-width: 100%;
  color: #555;
  background: #edf1ee;
  border-radius: 12px;
  border: solid 1px #acacac;  /* 追加 */
  box-sizing: border-box;  /* 追加 */
}

/* 上からの吹き出し 三角部分 */ /* 削除 */
/*.comment-top::before {
  content: "";
  position: absolute;
  top: -30px; 
  right: 20px;
  border: 18px solid transparent;
  border-top-color: #edf1ee; 
}*/


/* 上からの吹き出し 三角部分 枠線部分*/ /* 追加 */
.comment-top:before {
  content: "";
  position: absolute;
  top: -32px;
  right: 20px;
  border: 16px solid transparent;
  border-bottom: 16px solid #acacac;
}

/* 上からの吹き出し 三角部分 */ /* 追加 */
.comment-top::after {
  content: "";
  position: absolute;
  top: -30px; 
  right: 20px;
  border: 16px solid transparent;
  border-bottom: 16px solid #edf1ee;
}



/* 画像入れるとき */  /* 追加 */
.balloon-top .comment-top img{
  width: 500px ;
  max-width: 100% ;
  height: auto;
}

/* 左からの吹き出し */
.balloon-left {
  padding: 10px;
  overflow: hidden; 
}

/* 左からの吹き出し アイコン */
.balloon-left .icon-left {
  float: left;
  margin-right: -90px;
  width: 80px;
}

/* アイコン画像 */  
.balloon-left .icon-left img{
  width: 100%;
  height: auto;
}

/* 左からの吹き出し コメント */
.comment-left {
  position: relative;
  display: inline-block;
  margin-left: 105px;
  padding: 17px 13px;
  max-width: 100%;
  color: #555;
  background: #e0edff;
  border-radius: 12px;
  border: solid 1px #acacac;  /* 追加 */
  box-sizing: border-box;  /* 追加 */

}

/* 左からの吹き出し 三角部分 */ /* 削除 */
/*.comment-left::before {
  content: "";
  position: absolute;
  top: 18px; 
  left: -18px;
  border: 18px solid transparent;
  border-top-color: #e0edff; 
}*/

/* 左からの吹き出し 三角部分 枠線部分*/ /* 追加 */
.comment-left::before {
  content: "";
  position: absolute;
  top: 1rem; 
  left: -28px;
  border: 10px solid transparent;
  border-right: 1.2rem solid #acacac;
}

/* 左からの吹き出し 三角部分 */ /* 追加 */
.comment-left::after {
  content: "";
  position: absolute;
  top: 1rem; 
  left: -25px;
  border: 10px solid transparent;
  border-right: 1.2rem solid #e0edff;
}


/* 右からの吹き出し */
.balloon-right {
  text-align: right;
  padding: 10px;
  overflow: hidden; 
}

/* 右からの吹き出し アイコン */
.balloon-right .icon-right {
  float: right;
  margin-left: -90px;
  width: 80px;
}

/* アイコン画像 */  
.balloon-right .icon-right img{
  width: 100%;
  height: auto;
}

/* 右からの吹き出し コメント */
.comment-right {
  text-align: left;
  position: relative;
  display: inline-block;
  margin-right: 105px;
  padding: 17px 13px;
  max-width: 100%;
  color: #555;
  background: #edf1ee;
  border-radius: 12px;
  border: solid 1px #acacac;  /* 追加 */
  box-sizing: border-box;  /* 追加 */
}

/* 右からの吹き出し 三角部分 */ /* 削除 */
/*.comment-right::before {
  content: "";
  position: absolute;
  top: 18px; 
  right: -18px;
  border: 18px solid transparent;
  border-top-color: #edf1ee;
}*/

/* 右からの吹き出し 三角部分 枠線部分 */ /* 追加 */
.comment-right::before {
  content: "";
  position: absolute;
  top: 1rem; 
  right: -28px;
  border: 10px solid transparent;
  border-left: 1.2rem solid #acacac;
}

/* 右からの吹き出し 三角部分 */ /* 追加 */
.comment-right::after {
  content: "";
  position: absolute;
  top: 1rem; 
  right: -25px;
  border: 10px solid transparent;
  border-left: 1.2rem solid #edf1ee;
}