@charset "utf-8";

/**********************************************************
 * メッセージ文テーブル
 **********************************************************/
 .div_msg_frame {
	display: inline-block;                                  /* インライン要素に枠をつけるために使用 */
	padding: 5px 10px;                                      /* 文字の周りに余白を追加 */
	margin: 0px 5px;                                        /* 枠の周り　上下 0px、左右 5px */
  /*border: 3px solid #4CAF50; */                           /* 枠線の太さと色 */
	border-radius: 10px;                                    /* 枠の角を丸くする */
	font-size: 14px;                                        /* 文字サイズ */
  /*font-weight: bold;*/                                    /* 文字を太くする */
}


/*******************************************************************************************
 * コメントの吹き出し(左側)
 * 参考：https://saruwakakun.com/html-css/reference/speech-bubble
 *******************************************************************************************/
 .balloon1-left {
	position: relative;
  /*min-width: 120px;*/
  /*max-width: 100%;*/
	color: var(--clr_black);                                /* テキストの色 */
	background: var(--clr_gainsbord);                       /* 背景色 */
	display: inline-block;                                  /* インライン要素に枠をつけるために使用 */
	padding:    6px 10px;                                  /* 文字の周りに余白を追加 */
	margin: 0px 10px;                                       /* 枠の周り　上下 0px、左右 10px */
  /*border: 3px solid #4CAF50; */                           /* 枠線の太さと色 */
	border-radius: 8px;                                     /* 枠の角を丸くする */
	font-size: 14px;                                        /* 文字サイズ */
  /*font-weight: bold;*/                                    /* 文字を太くする */

  }
  
  .balloon1-left:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -14px;
	margin-top: -10px;
	border: 4px solid transparent;
	border-right: 10px solid var(--clr_gainsbord);
  }
  
  .balloon1-left p {
	margin: 0;
	padding: 0;
  }


/*******************************************************************************************
 * コメントの吹き出し(右側)
 * 参考：https://saruwakakun.com/html-css/reference/speech-bubble
 *******************************************************************************************/
 .balloon1-right {
	position: relative;
  /*min-width: 120px;*/
  /*max-width: 100%;*/
	color: var(--clr_white);                                /* テキストの色 */
	background: var(--clr_deepskyblue);                                    /* 背景色 */
	display: inline-block;                                  /* インライン要素に枠をつけるために使用 */
	padding: 6px 10px;                                     /* 文字の周りに余白を追加 */
	margin: 0px 10px;                                       /* 枠の周り　上下 0px、左右 10px */
  /*border: 3px solid #4caf50; */                           /* 枠線の太さと色 */
	border-radius: 8px;                                     /* 枠の角を丸くする */
	font-size: 14px;                                        /* 文字サイズ */
  /*font-weight: bold;*/                                    /* 文字を太くする */

  }
  
  .balloon1-right:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -10px;
	border: 4px solid transparent;
	border-left: 10px solid var(--clr_deepskyblue);
  }
  
  .balloon1-right p {
	margin: 0;
	padding: 0;
  }


  .nickname {
	padding: 0px 5px;                                     /* 文字周り余白:上下 0px、左右 5px */
    font-size: 10px;
    color:     var(--clr_silver);
  }