.chat_message{
	padding : 10px;
	font-size : 15px;
	line-height : 18px;
	border-radius : 3px;
}
.member{
	background-color : #ededed;
}
.staff{
	background-color : #e6f3fb;
}
.chat_message .date{
	color : #999999;
	font-size : 13px;
	display : block;
	margin : 0px 0px 5px 0px;
}
#MB_RESULT .entry_banner{
	background-color: #E6F3FA;
	display: block;
	margin: 10px;
	height : 100%;
	padding : 45px 0px 0px 0px;
}
#MB_RESULT .entry_banner img{
    display: block;
    margin: auto;
}

/* ===================================[管理画面・顧客画面共通] チャット吹き出し */
.message_board_result .staff_message p{
	padding : 10px;
	margin-top : 0px;
	background-color : #e6f3fb;
}
.message_board_result p{
	border-radius : 3px;
	font-size : 12px;
	width : 85%;
	margin : 0px 15px;
	padding : 10px;
	position : relative;
}
.message_board_result .user_message p{
	padding : 5px;
	background-color : #ededed;
	text-align : left;
}
.message_board_result .staff_message, .message_board_result .user_message{
	clear : both;
}
.message_board_result .user_message{
	float : right;
	text-align : right;
	margin : 10px;
}
.message_board_result span{
	font-size : 10px;
	color : #b4b4b6;
}
.user_message span{
	margin-right : 10px;
}
.user_message p:before, .staff_message p:before{
	position : absolute;
	content : "";
	border : 10px solid transparent;
}
.user_message p:before{
	border-left : 10px solid #ededed;
	bottom : 5px;
	right : -20px;
}
.staff_message p:before{
	border-right : 10px solid #E6F3FB;
	bottom : 10px;
	left : -20px;
}



/* ===================================チャット */
#MESSAGE_BOARD_BASE{
	background-color : #ffffff;
	z-index : 100;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	border-radius : 5px;
	width : 305px;
	box-shadow : 0px 1px 4px #cccccc;
	height : auto;
	position : fixed;
	bottom : 10px;
	right : 20px;
}
#MESSAGE_BOARD_TITLE{
	background-color : #078CD6;
	color : #ffffff;
	padding : 5px;
	margin : 0px;
	-webkit-border-top-left-radius : 5px;
	-moz-border-radius-topleft : 5px;
	border-top-left-radius : 5px;
	-webkit-border-top-right-radius : 5px;
	-moz-border-radius-topright : 5px;
	border-top-right-radius : 5px;
	border-bottom : 1px solid #078CD6;
	cursor : pointer;
}
#MESSAGE_BOARD_TITLE span{
	font-size : 14px;
	text-align : center;
	margin-left : 15px;
}
.message_board_btn{
	border : 1px solid #ffffff;
	font-size : 14px;
	color : #ffffff;
	float : right;
	margin-right : 5px;
	background-color : transparent;
}
#MESSAGE_BOARD_TITLE span.span_message_board{
	background-color : #ffffff;
	background-image : url(../img/icon_mail.svg);
	background-repeat : no-repeat;
	background-size : 25px;
	background-position : 10px;
	padding : 5px 10px 5px 45px;
	margin : 10px 0px 0px 0px;
	border-radius : 3px;
	color : #303233;
}
#MESSAGE_BOARD_TITLE span.span_message_board{
	display : block;
}
div.active #MESSAGE_BOARD_TITLE span.span_message_board{
	display : none;
}
.message_board{
	display : block;
	box-shadow : 0px 1px 4px #cccccc;
	height : 430px;
	position : relative;
	overflow : hidden;
}
#MEMBER_LIST .message_board{
	height : 350px;
	background-color: #ffffff;
}
/* チャット-スタッフコメント */
#MSBD_IMAGE{
	width : 100%;
	height : 100px;
	border-bottom : 1px solid #078CD6;
	overflow : hidden;
	
	font-size : 12px;
	line-height : 15px;
	padding : 10px;
	/*
	position : absolute;
	top : 0px;
	*/
	background-color: #ffffff;
    z-index: 99999;
}
#MSBD_IMAGE p{
	position : absolute;
	right : 10px;
	width : 190px;
	font-size : 12px;
	line-height : 18px;
	border : 1px solid #ededed;
	padding : 5px 10px;
}
#MSBD_IMAGE span{
	/*display : block;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	background-color : #ededed;
	margin : 8px;
	text-align : center;*/
	
	background-color : #e6f3fa;
	display : inline-block;
	padding : 7px;
	width : 100%;
	font-size : 14px;
	margin : 5px 0px 0px 0px;
	text-align : center;
}
.message_board_result a{
	color : #078cd6;
	text-decoration : underline;
	word-break: break-all;
}
.message_board_result a:hover{
	color : #68c9ff;
}



/* ===================================チャット-ボード画面 */
#MESSAGE_BOARD_BASE #MESSAGE_BOARD{
	height : 350px;
}
#MEMBER_LIST .message_board_result{
	height : 290px;
}
.message_board_result{
	height : 165px;
	width : 100%;
	clear : both;
	display : block;
	overflow-y : scroll;
	overflow-x : hidden;
	padding-bottom : 10px;
}
.estate .message_board_result,
#MYPAGE .message_board_result{
	height : 265px;
}
.active .message_board_result{
	/*height : calc(100% - 10px);*/
}
.staff_message{
	clear : both;
}
.staff_message span{
	margin-left : 10px;
}
/* チャット-送信ボタン */
#MESSAGE_INPUT{
	margin : 10px 0px;
	border-top : 1px solid #b4b4b6;
	overflow : hidden;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	align-items : center;
}
#MESSAGE_INPUT textarea{
	width : 220px;
	height : 55px;
	margin : 10px;
	float : left;
	border-radius : 3px;
	font-size : 16px;
}
#MESSAGE_INPUT input{
	font-size : 12px;
	padding : 5px 10px;
	border : 1px solid #078CD6;
	position : relative;
	background : linear-gradient(90deg, #E6F4FB 0%,#E6F4FB 50%,#FFFFFF 50%,#FFFFFF 100%);
	background-size : 200%;
	background-position: right;
	transition : .2s;
	color : #078CD6;
}
#MESSAGE_INPUT input:hover{
	background-position : left;
}
/* チャット　会員登録バナー */
#MSBD_NOT_MEMBER{
	position : absolute;
	z-index : 1;
	width : 305px;
	height : 411px;
	bottom : 0px;
	left : .px;
	text-indent : -9999px;
	background-image : url(../img/message_not_member.png);
	background-repeat : no-repeat;
	display : block;
	text-decoration : none;
}
#MSBD_NOT_MEMBER:hover{
	background-image : url(../img/message_not_member2.png);
}
@keyframes moveIcon{
	from{
		-webkit-transform: translate(0, 0px);
		-ms-transform: translate(0, 0px);
		transform: translate(0, 0px);
	}to{
		-webkit-transform: translate(0, -7px);
		-ms-transform: translate(0, -7px);
		transform: translate(0, -7px);
	}
}
#MESSAGE_BOARD_ICON{
	background-color : #ff3a6b;
	color : #ffffff;
	position : absolute;
	display : block;
	width : 28px;
	height : 28px;
	background: url(../img/message_board_icon.svg);
	background-size : 100%;
	animation: moveIcon;
	animation-iteration-count : 20;
	animation-duration: .4s;
	animation-direction : alternate;
	animation-timing-function: ease-out;
	left : -14px;
	top : -14px;
}




/* ===================================管理画面 */
#MEMBER .message_board{
	background-color : #ffffff;
	z-index : 100;
	-webkit-border-radius : 5px;
	-moz-border-radius : 5px;
	border-radius : 5px;
	box-shadow : 0px 1px 4px #cccccc;
	height : auto;
}
#MEMBER .message_board_result{
	width : unset;
	height : 350px;
	margin : 10px;
	overflow-y : auto;
}
.message_board_input{
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	align-items: center;
	border-top: 1px #b4b4b6 solid;
}
.message_board_input textarea{
	width : 220px;
	height : 55px;
	margin : 10px;
	float : left;
	border-radius : 3px;
	font-size : 14px;
}
#MEMBER .message_board_input textarea{
	width : calc(100% - 110px);
	height : 100px;
}
#MEMBER_LIST .message_board_input textarea{
	height : 40px;
	width : 255px;
}
.message_board_input input[type="button"]{
	font-size : 12px;
	padding : 5px 10px;
	border : 1px solid #078CD6;
	position : relative;
	background : linear-gradient(90deg, #E6F4FB 0%,#E6F4FB 50%,#FFFFFF 50%,#FFFFFF 100%);
	background-size : 200%;
	background-position : right;
	transition : .2s;
	color : #078CD6;
}
#MEMBER .message_board_input input[type="button"]{
	width : 80px;
	padding : 10px;
}

@media screen and (max-width: 320px){
	#MESSAGE_BOARD_BASE{
		left : 0;
		right : 0;
		margin : auto;
	}
}

@media screen and (max-width: 570px){
	.chat_front #MESSAGE_BOARD_BASE{
		position : relative;
		right: auto;
		bottom : auto;
		width : 100%;
		border-radius : 0px;
	}
	#MESSAGE_BOARD_TITLE span{
		margin-left : 20px;
	}
	#MESSAGE_BOARD_ICON{
		top: -14px;
		left: -7px;
	}
	.chat_front #MESSAGE_BOARD_TITLE{
		width : 100%;
		border-radius : 0px;
	}
	.chat_front #MSBD_IMAGE p{
		width : calc(100% - 100px);
	}
	.chat_front #MSBD_IMAGE{
		height : auto;
	}
	.chat_front .message_board_result{
		height : 150px;
	}
	.chat_front #MESSAGE_BOARD_BASE #MESSAGE_BOARD{
		height : 335px;
	}
	.chat_front #MESSAGE_INPUT textarea{
		width : calc(100% - 100px);
	}
	#MYPAGE .message_board_result{
		height : 235px;
	}

}
@media screen and (max-width: 390px){
	.chat_front #MESSAGE_BOARD_BASE #MESSAGE_BOARD{
		height : 350px;
	}
}
@media screen and (max-width: 350px){
	.chat_front #MSBD_IMAGE p{
		font-size : 10px;
	}
}