@charset "UTF-8";

.avaImg amp-img{margin:0 auto 5px}
.wsb {padding: 0.5em; margin-bottom: 5%;}
.wsb p {margin: 0;}

/* wsbStart */
.wsb-l, .wsb-r {
	display : -webkit-flex;
	display : -moz-flex;
	display : -ms-flex;
	display : -o-flex;
	display : flex;
}
.wsb-l {justify-content: flex-start;}
.wsb-r {justify-content: flex-end;}

/* avatarArea */
.wsb .avaArea {
	width      : 100px;
	min-width  : 70px;
	text-align : center;
}
.wsb-l1 .avaArea {margin-right: 5px;}
.wsb-l2 .avaArea {margin-right: 20px;}
.wsb-r1 .avaArea {margin-left: 5px;}
.wsb-r2 .avaArea {margin-left: 20px;}
.wsb .avaArea img {
	width      : 70px;
	min-width  : 70px;
	height     : 70px;
	object-fit : cover;
}
.wsb .avaName {
	font-size: 12px;
	line-height: 1.2;
}

/* textArea */
.wsb .txtArea {
	max-width       : 70%;
	height          : fit-content;
	min-height      : 3em;
	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   : 10px;
	box-shadow      : 0px 1px 1px rgba(0, 0, 0, 0.1);
	z-index         : 2;
}
.wsb-l1 .txtArea, .wsb-l2 .txtArea {
	border     : 2px solid lightblue;
	background : linear-gradient(white,#e2f1f6);
}
.wsb-r1 .txtArea, .wsb-r2 .txtArea {
	border     : 2px solid lightpink;
	background : linear-gradient(white, #fff0f2);
}

/* pattern-1 */
.wsb-l1 .txtArea:before,.wsb-l1 .txtArea:after,
.wsb-r1 .txtArea:before,.wsb-r1 .txtArea:after {
	width        : 0;
	height       : 0;
	content      : "";
	position     : absolute;
	top          : 13px;
	border-width : 7px;
}
.wsb-l1 .txtArea:before,
.wsb-l1 .txtArea:after {
	border-style : solid solid solid none;
}
.wsb-r1 .txtArea:before,
.wsb-r1 .txtArea:after {
	border-style : solid none solid solid;
}
.wsb-l1 .txtArea:before {
	left         : -9px;
	border-color : transparent lightblue;
	z-index      : 1;
}
.wsb-r1 .txtArea:before {
	right        : -9px;
	border-color : transparent lightpink;
	z-index      : 1;
}
.wsb-l1 .txtArea:after {
	border-color : transparent #f3f9fb;
	z-index      : 3;
}
.wsb-r1 .txtArea:after {
	border-color : transparent #fffafa;
	z-index      : 3;
}
.wsb-l1 .txtArea:after {left: -7px;}
.wsb-r1 .txtArea:after {right: -7px;}

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