/* 吹き出し用CSS */
/*--------------------
 1
--------------------*/
img{vertical-align:bottom;}
.fw-b{font-weight:700;}
*,:after,:before{background-repeat:no-repeat;box-sizing:inherit;}
:after,:before{text-decoration:inherit;vertical-align:inherit;}
*{padding:0;margin:0;}
img{border-style:none;}
.Image,.Image_img{display:block;}
.Image_img{transition:opacity 1s;opacity:0;width:100%;height:auto;}
.Image_img.show{opacity:1;}
@media screen and (max-width:679px){
.TextItem{font-size:17px;line-height:1.58;}
}
@media screen and (max-width:1009px) and (min-width:680px){
.TextItem{font-size:18px;line-height:1.7;}
}
@media screen and (min-width:1010px){
.TextItem{font-size:18px;line-height:1.7;}
}
.TextItem{word-wrap:break-word;word-break:break-word;}
@media screen and (max-width:679px){
.CommentItem__image>img{width:40px;height:40px;}
.CommentItem__textContentsWrapper__name{font-size:13px;line-height:1.33;}
}
@media screen and (max-width:1009px) and (min-width:680px){
.CommentItem__image>img{width:50px;height:50px;}
.CommentItem__textContentsWrapper__name{font-size:14px;line-height:1.33;}
}
@media screen and (min-width:1010px){
.CommentItem__image>img{width:50px;height:50px;}
.CommentItem__textContentsWrapper__name{font-size:14px;line-height:1.33;}
}
.CommentItem.reverse{display:flex;}
.CommentItem__textContentsWrapper{flex:1;}
.CommentItem__textContentsWrapper__comment{position:relative;margin-top:8px;padding:20px;border:1px solid #dcdcdc;border-radius:2px;}
.CommentItem__textContentsWrapper__comment:before{position:absolute;top:-1px;content:"";border:8px solid transparent;border-top-color:#dcdcdc;}
.CommentItem__textContentsWrapper__comment:after{position:absolute;top:0;content:"";border:6px solid transparent;border-top-color:#fff;}
.CommentItem.reverse{flex-direction:row-reverse;}
.CommentItem.reverse .CommentItem__textContentsWrapper{margin-right:12px;}
.CommentItem.reverse .CommentItem__textContentsWrapper__name{text-align:right;}
.CommentItem.reverse .CommentItem__textContentsWrapper__comment:before{right:-9px;}
.CommentItem.reverse .CommentItem__textContentsWrapper__comment:after{right:-6px;}
.ItemList__item+.ItemList__item{margin-top:32px;}
.ItemList__item.m-rl{margin-right:20px;margin-left:20px;}
.CommentItem.normal{display:flex;}
.CommentItem.normal .CommentItem__textContentsWrapper{margin-left:12px;}
.CommentItem.normal .CommentItem__textContentsWrapper__comment:before{left:-9px;}
.CommentItem.normal .CommentItem__textContentsWrapper__comment:after{left:-6px;}

/*--------------------
 2
--------------------*/
/* 相手 friend ************************************************************/
/* 相手の会話 */
 .line__left {
    width: 100%;
    position: relative;
    display: block;
    margin-bottom: 5px;
    max-width: 90%;
    clear: both;
}
/* 相手のアイコン画像 */
 .line__left figure {
    width: 64px;       /* アイコン画像の大きさに合わせます */
    position: absolute;
    top: 15px;
    left: 0;
    padding: 0;
    margin: 0;

}
/* 相手 アイコン画像の正方形を用意 */
img.line__left__image{
    border-radius: 50%;
    width: 64px;
    height: 64px;
}
/* 相手 吹き出しと画像との間隔は、画像の大きさにより変更します 初期値：70px（width:50pxのとき） */
 .line__left .line__left-text {
  margin-bottom: 0;
  margin-left: 80px;  /* 修正値； 上 .line__left figure img の width+15～20px */
}

 .line__left .line__left-text .name {
  font-size: 80%;
  padding-top: 9px;
  color: #000;
  margin-bottom: 0;
}

/* 相手 コメントエリア */
 .line__left .text {
  margin: 0; display: inline-block;
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background-color: #EDF1EE;
}

/* 相手 吹き出し */
 .line__left .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 3px;
  border-right: 20px solid #EDF1EE;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(35deg); -webkit-transform: rotate(35deg);
}

/* 自分 my ************************************************************/

/* 自分の会話 */
 .line__right {
    position: relative;
    display: block;
    margin: 5px 0;
    max-width: 95%;
    float: left;
    margin-right: 15px;
    clear: both;
}

/* 自分 コメントエリア */
 .line__right .text {
  padding: 20px;
  border-radius: 20px;
  background-color: #8de055;
  margin: 0;
  margin-left: 80px;   /* 吹き出しと画像との間隔値 初期値：80px */
}

/* 自分 吹き出し */
 .line__right .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -10px;
  top: 3px;
  border-left: 20px solid #8de055;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-35deg); -webkit-transform: rotate(-35deg);
}

/* 自分がスタンプを送る時 */
 .line__right .stamp {
  position: relative;
  margin-left: 80px;
}

/* 自分 既読／時間エリア */
 .line__right .date {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  text-align: right;
  left: -25px;
  bottom: 0px;
  font-size: 80%;
  color: #000;
}


/*--------------------
 大きい吹き出し
--------------------*/
/*Chat Bubbles　CSS Setting*/
/* 全体のスタイル */
.voice {
  margin-bottom: 40px;
}
/* 左画像 */
.voice-img-left {
  margin-left: 4px;
  margin-top: -1px;
  float: left;
  width: 60px;
  height: 60px;
}
/* 右画像 */
.voice-img-right {
  margin-right: 4px;
  margin-top: -1px;
  float: right;
  width: 60px;
  height: 60px;
}
.voice figure img {
  width: 100%;
  height: 100%;
  border: 2px solid #eee;
  border-radius: 50%;
  margin: 0;
}
/* 画像の下のテキスト */
.voice-img-description {
  padding: 5px 0 0;
  font-size: 10px;
  text-align: center;
}
/* 左からの吹き出しテキスト */
.voice-text-right {
  color: #444;
  position: relative;
  margin-left: 80px;
  padding: 1.2em;
  border: 3px solid #eee;
  background-color: #fff;
  border-radius: 5px;
}
/* 右からの吹き出しテキスト */
.voice-text-left {
  position: relative;
  margin-right: 80px;
  padding: 1.2em;
  border: 3px solid #eee;
  background-color: #fff;
  border-radius: 5px;
}
p.voice-text {
  margin: 0 0 8px;
}
p.voice-text:last-child {
  margin-bottom: 0px;
}
/* 左の三角形を作る */
.voice-text-right:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #eee;
  top: 15px;
  left: -20px;
}
.voice-text-right:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-right: 10px solid #fff;
  top: 15px;
  left: -16px;
}
/* 右の三角形を作る */
.voice-text-left:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #eee;
  top: 15px;
  right: -23px;
}
.voice-text-left:after {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left: 10px solid #fff;
  top: 15px;
  right: -19px;
}
/* 回り込み解除 */
.voice:after,.voice:before {
  clear: both;
  content: "";
  display: block;
}