.html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

.top,.bottom{
	display:flex;
	display:-webkit-flex;
}
.top_left_col{
	width:calc(100% - 200px);
}
.top_right_col{
	width:200px;
}
.right_col_item{
	background-color: #f6f6f6;
	padding:5px;
	margin-bottom:5px;
}
.right_col_item>p{
	margin:0;
}

.pic_box{/*キャラ画像*/
	padding:3px;
	text-align:center;
	margin: auto
}
.pic_box>img{
	max-width:800px;
	max-height:800px;
}

/*吹き出し*/
.arrow_box{
	position:relative;
	border:1px solid var(--border_color);
	border-radius:0px 0px 0px 0px;
	padding:5px;
	margin:5px;
	background-color: var(--balloon_color);
}
.arrow_box:before{
	content:"";
	position:absolute;
	top:-11px;
	left:50%;
	width:0;
	height:0;
	margin-left:-0px;
	border-bottom:0px solid var(--border_color);
	border-left:0px solid transparent;
	border-right:0px solid transparent;
}.arrow_box:after{
	content:"";
	position:absolute;
	top:-10px;
	left:50%;
	width:0;
	height:0;
	margin-left:-0px;
	border-bottom:0px solid var(--balloon_color);
	border-left:0px solid transparent;
	border-right:0px solid transparent;
}
.user_balloon{
	width:40%;
	margin:5px;
	padding:5px;
	/* margin-left:58%; */
	position:relative;
	border:0px solid var(--border_color);
	border-radius:0px 0px 0px 0px;
	background-color: var(--balloon_color);
}
.user_balloon:before{
	content:"";
	position:absolute;
	top:calc(50% - 8px);
	width:0;
	height:0;
		padding:-5px;
	margin-left:calc(100% - 5px);
	border-top:0px solid transparent;
	border-left:0px solid var(--border_color);
	border-bottom:0px solid transparent;
}
.user_balloon:after{
	content:"";
	position:absolute;
	top:calc(50% - 8px);
	left:0;
	width:0;
	height:0;
	margin-left:calc(100% - 1px);
	border-top:0px solid transparent;
	border-left:0px solid var(--balloon_color);
	border-bottom:0px solid transparent;
}

.conversation_box{
	width:100%;
	margin:5px;
	padding:5pxa;
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	justify-content: left;
}
.conversation_box>div>input{
	width:100%;
}