@charset "UTF-8";

.bal-l, .bal-r,
.bal-l2, .bal-r2 {
	padding : 0.5em 1em;
	display : -webkit-flex;
	display : -moz-flex;
	display : -ms-flex;
	display : -o-flex;
	display : flex;
}
.bal-l, .bal-l2 {justify-content: flex-start;}
.bal-r, .bal-r2 {justify-content: flex-end;}
.bal-l p,.bal-r p,
.bal-l2 p, .bal-r2 p {margin: 0;}

/* avatarBox */
.bal-l .avaBox,.bal-r .avaBox,
.bal-l2 .avaBox,.bal-r2 .avaBox {
	width      : 60px;
	min-width  : 60px;
	height     : 60px;
}
.bal-l .avaBox {margin-right: 1em;}
.bal-r .avaBox {margin-left: 1em;}
.bal-l2 .avaBox {margin-right: 30px;}
.bal-r2 .avaBox {margin-left: 30px;}
.bal-l .avaBox img,.bal-r .avaBox img,
.bal-l2 .avaBox img,.bal-r2 .avaBox img {
	width      : 60px;
	min-width  : 60px;
	height     : 60px;
	object-fit : cover;
}

/* textBox */
.bal-l .txtBox,.bal-r .txtBox,
.bal-l2 .txtBox,.bal-r2 .txtBox {
	max-width       : 70%;
	display         : -webkit-flex;
	display         : -moz-flex;
	display         : -ms-flex;
	display         : -o-flex;
	display         : flex;
	-ms-align-items : center;
	align-items     : center;
	position        : relative;
	padding         : 0.5em;
	border-radius   : 7px;
	box-shadow      : 0px 1px 1px rgba(0, 0, 0, 0.1);
	z-index         : 2;
}
.bal-l .txtBox, .bal-l2 .txtBox {
	border     : 2px solid lightblue;
	background : linear-gradient(white,#e2f1f6);
}
.bal-r .txtBox, .bal-r2 .txtBox {
	border : 2px solid lightpink;
	background: linear-gradient(white, #fff0f2);
}

/* パターン1_common */
.bal-l .txtBox:before,.bal-l .txtBox:after,
.bal-r .txtBox:before,.bal-r .txtBox:after {
	width        : 0;
	height       : 0;
	content      : "";
	position     : absolute;
	top          : 13px;
	border-width : 7px;
}
.bal-l .txtBox:before,
.bal-l .txtBox:after {
	border-style: solid solid solid none;
}
.bal-r .txtBox:before,
.bal-r .txtBox:after {
	border-style: solid none solid solid;
}
.bal-l .txtBox:before {
	left         : -9px;
	border-color : transparent lightblue;
	z-index      : 1;
}
.bal-r .txtBox:before {
	right        : -9px;
	border-color : transparent lightpink;
	z-index      : 1;
}
.bal-l .txtBox:after {
	border-color : transparent #f3f9fb;
	z-index      : 3;
}
.bal-r .txtBox:after {
	border-color : transparent #fffafa;
	z-index      : 3;
}
.bal-l .txtBox:after {left: -7px;}
.bal-r .txtBox:after {right: -7px;}

/* パターン2_common */
.bal-l2 .txtBox:before,.bal-l2 .txtBox:after,
.bal-r2 .txtBox:before,.bal-r2 .txtBox:after {
    content       : "";
    position      : absolute;
    border-radius : 50%;
}
/* before */
.bal-l2 .txtBox:before,
.bal-r2 .txtBox:before {
    width: 12px;
    height: 12px;
    top: 12px;
}
.bal-l2 .txtBox:before {left: -20px;}
.bal-r2 .txtBox:before {right: -20px;}
/* after */
.bal-l2 .txtBox:after,
.bal-r2 .txtBox:after {
    width  : 6px;
    height : 6px;
    top    : 25px;
}
.bal-l2 .txtBox:after {left: -29px;}
.bal-r2 .txtBox:after {right: -29px;}
/* border,bg */
.bal-l2 .txtBox:before,.bal-l2 .txtBox:after {
    border     : 2px solid lightblue;
    background : linear-gradient(white, #e5f2f7);
}
.bal-r2 .txtBox:before,.bal-r2 .txtBox:after {
    border     : 2px solid lightpink;
    background : linear-gradient(white, #fff0f2);
}