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

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

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

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

/* はれるん吹き出し小サイズ 右から */
.harerun-comment {
  text-align: left;
  position: relative;
  display: inline-block;
  margin-right: 105px;
  padding: 17px 13px;
  max-width: 100%;
  border: 2px solid #0000ff;
  border-radius: 8px;
  background-color: #f0f8ff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #000000;
}

/* 吹き出し　コメント */
.harerun-comment::before {
  content: "";
  position: absolute;
  top: 1rem; 
  right: -28px;
  border: 10px solid transparent;
  border-left: 1.2rem solid #0000ff;
}

/* 吹き出し 三角部分 */
.harerun-comment::after {
  content: "";
  position: absolute;
  top: 1rem; 
  right: -25px;
  border: 10px solid transparent;
  border-left: 1.2rem solid #f0f8ff;
}

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

/* 上からの吹き出し アイコン */
.harerun-top .icon-top img{
  float: right;
  margin-left: -90px;
  width: 55px;
}

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

/* 上からの吹き出し　コメント */
.harerun-comment-top {
  text-align: left;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 17px 13px;
  max-width: 100%;
  border: 2px solid #0000ff;
  border-radius: 8px;
  background-color: #f0f8ff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #000000;
}

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

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

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

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

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

/* 瞬　左からの吹き出し コメント */
.shun-comment {
  position: relative;
  display: inline-block;
  margin-left: 105px;
  padding: 17px 13px;
  max-width: 100%;
  border: 2px solid #ff4500;
  border-radius: 8px;
  background-color: #fff5f2;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #000000;

}

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

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

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

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

/* 瞬　上からの吹き出し　コメント */
.shun-comment-top {
  text-align: left;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 17px 13px;
  max-width: 100%;
  border: 2px solid #ff4500;
  border-radius: 8px;
  background-color: #fff5f2;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #000000;
}

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

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

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

/* アヤ　左からの吹き出し */
.aya {
  padding: 10px;
  overflow: hidden; 
}

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

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

/* アヤ　左からの吹き出し コメント */
.aya-comment {
  position: relative;
  display: inline-block;
  margin-left: 105px;
  padding: 17px 13px;
  max-width: 100%;
  border: 2px solid #ff1493;
  border-radius: 8px;
  background-color: #fff1f9;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #000000;
}

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

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