/*
 * -------------------
 * リッチチャット上部入力部分
 * -------------------
 */
#rich-chat-form-area{
	margin-top: 10px;
}
@media (max-width: 768px){
	#rich-chat-form-area{
		/*くっつけずに若干両端をpaddingする*/
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* form-comment-with-tool部品内のテキストエリアの高さを調整する */
#rich-chat-form-area textarea{
	min-height: 180px;
}
@media (max-width: 768px){
	#rich-chat-form-area textarea{
		min-height: 100px;
	}	
}

hr.list-rich-hr{
	border-color: #ddd;
	margin-top: 20px;
	margin-bottom: 10px;
}

/*
 * -------------------
 * リッチチャットレス機能部分
 * -------------------
 */
#rich-chat-res-func-area{
	margin-bottom: 10px;
}
@media (max-width: 768px){
	#rich-chat-res-func-area{
		/*くっつけずに若干両端をpaddingする*/
		padding-left: 5px;
		padding-right: 5px;
	}
}
#rich-chat-res-func-area div.func-sort-area{
	display: flex;
	justify-content: space-between;
}

#rich-chat-res-func-area div.func-sort-area div{
	display: table;
	flex-basis: 100%;
	height: 40px;
	margin: 10px;
	background-color: var(--background-article);
	border: 1px solid var(--panel-background-color);
}
#rich-chat-res-func-area div.func-sort-area div a{
	display: table-cell;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	color: var(--font-color-default);
}
#rich-chat-res-func-area div.func-sort-area div a.selected{
	background: var(--panel-background-color);
	pointer-events: none;
}

/*
 * -------------------
 * リッチチャットレス一覧部分
 * -------------------
 */
/* 外枠 */
#rich-chat-res-area{
	margin-top: 20px;
}
@media (max-width: 768px){
	#rich-chat-res-area{
		margin-top: 10px;
	}
}
#rich-chat-res-area ul#comment-frame{
	list-style: none;
	padding: 0 10px;
}
#rich-chat-res-area ul li.list-rich-chat-cell{
	display: flex;
	margin-bottom: 20px;
}

/* プロフィール画像 */
#rich-chat-res-area ul li.list-rich-chat-cell div.prof-col{

}
#rich-chat-res-area ul li.list-rich-chat-cell div.prof-col img{
	max-width: 50px;
	max-height: 50px;
	border-radius: 5px;
}
@media (max-width: 360px){
	#rich-chat-res-area ul li.list-rich-chat-cell div.prof-col img{
		max-width: 35px;
		max-height: 35px;
		border-radius: 5px;
	}	
}

/* メッセージ */
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col{
	width: 100%;
	font-size: 16px;
}
@media (max-width: 768px){
	#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col{
		font-size: 14px;
	}	
}
@media (max-width: 414px){
	#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col{
		font-size: 12px;
	}	
}

/* 名前*/
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col p.name{
	margin: 0 18px;
}

/* 返信等 */
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col p.status{
	margin: 3px 0;
}

/*
 * -------------------
 * スタンプ
 * -------------------
 */
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col div.stamp-area{
	position: relative;
	margin: 0 20px;
	max-width: 240px;
}
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col div.stamp-area.stamp-left{
	margin-right: auto;
}
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col div.stamp-area.stamp-right{
	margin-left: auto;
}
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col div.stamp-area img{
	max-width: 100%;
}
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col div.stamp-area div.b-info-area{
	max-width: 100%;
	text-align: right;
}
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col div.stamp-area p.sub{
	max-width: 240px;
	font-size: 10px;
	color: #999;
	text-align: right;
}
@media (max-width: 768px){
	#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col div.stamp-area{
		max-width: 200px;
	}
}

/*
 * -------------------
 * 吹き出し
 * -------------------
 */
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col .balloon{
	margin-top: 0;
	clear: both;
	word-break: break-word;
}
@media (max-width: 768px){
	#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col .balloon{
		padding: 10px 10px 4px;
	}
}
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col .balloon p.sub{
	position: absolute;
	font-size: 10px;
	color: #999;
	bottom: -28px;
	right: 0;
}

/* 吹き出し内機能 */
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col .balloon div.b-info-area{
	text-align: right;
	margin-top: 10px;
}

/* 添付画像 */
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col .balloon img.attach-image{
	display: block;
	width: 100%;
	max-width: 150px;
}
#rich-chat-res-area ul li.list-rich-chat-cell div.msg-col .balloon img.attach-image:hover{
	opacity: 0.8;
	filter: alpha(opacity=80);
}

/*
 * -------------------
 * その他
 * -------------------
 */
/* ラブアイコンのデザイン */
#rich-chat-res-area ul li.list-rich-chat-cell .chat-love-icon,
#rich-chat-res-area ul li.list-rich-chat-cell .comment-reply-icon{
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
}
#rich-chat-res-area ul li.list-rich-chat-cell .chat-love-icon .chat-love-num,
#rich-chat-res-area ul li.list-rich-chat-cell .comment-reply-icon .comment-reply-num{
	padding-left: 3px;
}
#rich-chat-res-area ul li.list-rich-chat-cell .fa-heart,
#rich-chat-res-area ul li.list-rich-chat-cell .fa-heart-o{
	color: #ff1493;
}
#rich-chat-res-area ul li.list-rich-chat-cell .fa-pulse{
	color: #999;
}

#rich-chat-res-area ul li.list-rich-chat-cell .comic_page_link{
	margin-right: 10px;
}

/* featuresなどのフォント */
#rich-chat-form-area span.sub,
#rich-chat-res-area span.sub{
	font-size: 12px;
	color: #999;
}