@charset "utf-8";

/*--------------------------------------------
 チャットウィンドウの基本デザイン設定
 jsで設定できる項目はjsで指定する
 変更する際はjsの設定値との兼ね合いに注意
--------------------------------------------*/

/* ***************************************************************************************************** */
/* ** 1.float ****************************************************************************************** */
/* ***************************************************************************************************** */
/*--------------------------------------------
 1-1. 閉じたときのアイコン
--------------------------------------------*/
#elChatFloatIcon {
	border-radius: 5px;
	padding: 5px 15px;
	position: fixed;
	z-index: 100;
	background-color: #EC8125;
	box-shadow:0 0 10px 0 #EC8125;
	color: #FFFFFF;
	border: 1px #FFFFFF solid;
}

/*--------------------------------------------
 1-2. チャットウィンドウ
--------------------------------------------*/
/* チャットウインドウ */
#elChatFloatWindow {
	border-radius: 5px;
	border-style: solid;
	border-width: 2px;
	position: fixed;
	background-color: #EC8125;
	border-color: #EC8125;
	color: #666666;
}
/* 幅が狭い時は下半分をチャットウインドウにする */
/* 
@media (width <= 768px) {
	#elChatFloatWindow {
		height: 50% !important;
		margin: 0 !important;
		border-radius: 0;
		width: calc(100% - 4px) !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: 0 !important;
	}
}
*/

/* チャットウインドウ > ヘッダー */
#elChatFloatWindow #elChatFloatWindowHeader {
	display: inline-flex;
	margin: 0;
	width: 100%;
	background-color: #EC8125;
}

/* チャットウインドウ > ヘッダー > タイトル(左1) */
#elChatFloatWindow #elChatFloatWindowHeader #elChatFloatWindowHeaderTitle {
	flex-grow: 2;
	font-weight: bold;
	padding: 5px 10px;
	color: #FFFFFF;
}

/* チャットウインドウ > ヘッダー > 最小化ボタン(右1) */
#elChatFloatWindow #elChatFloatWindowHeader #elChatFloatWindowHeaderMin {
	border: none;
	background-color: transparent;
	color: #666666;	
}

/* チャットウインドウ > ヘッダー > 閉じるボタン(右2) */
#elChatFloatWindow #elChatFloatWindowHeader #elChatFloatWindowHeaderClose {
	border: none;
	background-color: transparent;
	color: #666666;	
}

/* チャットウインドウ > ボディ */
#elChatFloatWindow #elChatFloatWindowBody {
	margin: 0;
	padding: 0 10px;
	overflow-y: scroll;
	color: #666666;
	background-color: #FFFFFF;
}

/* チャットウインドウ > フッター */
#elChatFloatWindow #elChatFloatWindowFooter {
	display: inline-flex;
	margin: 0;
	width: 100%;
}

/* チャットウインドウ > フッター > 入力エリア(左1) */
#elChatFloatWindow #elChatFloatWindowFooter #elChatFloatWindowFooterInput {
	border: none;
	border-radius: 0;
	border-bottom-left-radius: 3px;
	flex-grow: 7;
	line-height: 18px;
	margin-right: 1px;
	margin-top: 2px;
	outline: none;
	padding: 5px;
	resize: none;
	border-bottom:solid 2px #EC8125;
}
#elChatFloatWindow #elChatFloatWindowFooter #elChatFloatWindowFooterInput:focus {
	box-shadow: none;
}

/* チャットウインドウ > フッター > 送信ボタン(右1) */
#elChatFloatWindow #elChatFloatWindowFooter #elChatFloatWindowFooterSend {
	border: none;
	border-bottom-right-radius: 3px;
	margin-top: 2px;
	margin-left: 1px;
	border-bottom:solid 2px #EC8125;	
}

/* ***************************************************************************************************** */
/* ** 2.inner ****************************************************************************************** */
/* ***************************************************************************************************** */
/*--------------------------------------------
 2-1. チャットウィンドウ
--------------------------------------------*/
/* チャットウインドウ */
#elChatInnerWindow {
	border-radius: 5px;
	border-style: solid;
	border-width: 2px;
	min-width: 300px;
	background-color: #EC8125;
	border-color: #EC8125;
	color: #666666;
}

/* チャットウインドウ > ヘッダー */
#elChatInnerWindow #elChatInnerWindowHeader {
	margin: 0;
	width: 100%;
	background-color: #EC8125;
}

/* チャットウインドウ > ヘッダー > タイトル */
#elChatInnerWindow #elChatInnerWindowHeader #elChatInnerWindowHeaderTitle {
	padding: 5px 10px;
	color: #FFFFFF;	
}

/* チャットウインドウ > ボディ */
#elChatInnerWindow #elChatInnerWindowBody {
	margin: 0;
	padding: 10px;
	overflow-y: scroll;
	color: #666666;
	background-color: #FFFFFF;
}

/* チャットウインドウ > フッター */
#elChatInnerWindow #elChatInnerWindowFooter {
	display: inline-flex;
	margin: 0;
	width: 100%;
	background-color: #EC8125;

}

/* チャットウインドウ > フッター > 入力エリア(左1) */
#elChatInnerWindow #elChatInnerWindowFooter #elChatInnerWindowFooterInput {
	border: none;
	border-radius: 0;
	border-bottom-left-radius: 3px;
	flex-grow: 7;
	line-height: 18px;
	margin-right: 1px;
	margin-top: 2px;
	outline: none;
	padding: 5px;
	resize: none;
}
#elChatInnerWindow #elChatInnerWindowFooter #elChatInnerWindowFooterInput:focus {
	box-shadow: none;
}

/* チャットウインドウ > フッター > 送信ボタン(右1) */
#elChatInnerWindow #elChatInnerWindowFooter #elChatInnerWindowFooterSend {
	border: none;
	border-bottom-right-radius: 3px;
	margin-top: 2px;
	margin-left: 1px;
}

/* ***************************************************************************************************** */
/* ** 3.共通 ******************************************************************************************* */
/* ***************************************************************************************************** */
/* 質問者の行 */
/* 回答者の行 */
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyQuestioner,
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyAnswerer,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyQuestioner,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyAnswerer {
	display: inline-flex;
	padding: 0;
	width: 100%;
}

#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyQuestioner,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyQuestioner {
	margin: 10px -10px 10px 5px;
}

#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyAnswerer,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyAnswerer {
	margin: 10px 5px 10px -10px;
}

/* 質問者の行 > アイコン */
/* 回答者の行 > アイコン */
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerIcon,
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererIcon,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerIcon,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererIcon {
	padding: 0;
	margin: 0;
}

/* 質問者の行 > アイコン > 画像 */
/* 回答者の行 > アイコン > 画像 */
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerIcon .elChatWindowBodyQuestionerIconImage,
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererIcon .elChatWindowBodyAnswererIconImage,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerIcon .elChatWindowBodyQuestionerIconImage,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererIcon .elChatWindowBodyAnswererIconImage {
	border-radius: 50%;
	height: 64px;
	width: 64px;
}

/* 質問者の行 > 質問文言 */
/* 回答者の行 > 回答文言 */
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerText,
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererText,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerText,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererText {
	border-radius: 10px;
	font-family: inherit;
	flex-grow: 7;
	padding: 10px;
	white-space: pre-wrap;
	word-break: break-all;
}

#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerText,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerText {
	background-color: #AAEEAA66;
	margin: 0 15px 0 0;
	position: relative;	
}

#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerText:before,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyQuestioner .elChatWindowBodyQuestionerText:before {
	border-color: transparent;
	border-left-color: #AAEEAA66;
	border-style: solid;
	border-width: 10px;
	content: "";
	left: 100%;
	margin-top: -10px;
	position: absolute;
	top: 20px;
}
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererText,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererText {
	background-color: #E0E0E066;
	margin: 0 0 0 15px;
	position: relative;
}
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererText:before,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyAnswerer .elChatWindowBodyAnswererText:before {
	border-color: transparent;
	border-right-color: #E0E0E066;
	border-style: solid;
	border-width: 10px;
	content: "";
	left: -20px;
	margin-top: -10px;
	position: absolute;
	top: 20px;
}

/* フィードバック */
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyFeedback,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyFeedback {
	margin-bottom: 10px;
}
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackText,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackText {
	color: #999999;
	font-size: 11px;
	font-style: oblique;
	margin: 0;
}
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn {
	display: inline-block;
}

#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn .elChatWindowBodyFeedbackBtnY,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn .elChatWindowBodyFeedbackBtnY,
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn .elChatWindowBodyFeedbackBtnN,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn .elChatWindowBodyFeedbackBtnN {
	border-radius: 3px;
	color: #999999;
	font-size: 11px;
	font-weight: normal;
	padding: 3px 6px;
	margin: 0 6px;
}
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn .elChatWindowBodyFeedbackBtnY,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn .elChatWindowBodyFeedbackBtnY {
	background-color: #CCE0FF66;
	border: 1px #CCE0FF66 solid;
}
#elChatFloatWindow #elChatFloatWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn .elChatWindowBodyFeedbackBtnN,
#elChatInnerWindow #elChatInnerWindowBody .elChatWindowBodyFeedback .elChatWindowBodyFeedbackBtn .elChatWindowBodyFeedbackBtnN {
	background-color: #FFCCCC66;
	border: 1px #FFCCCC66 solid;
}

#elChatFloatWindowBody ul,
#elChatFloatWindowBody li,
#elChatFloatWindowBody pre,
#elChatFloatWindowBody code {
	word-wrap: break-word;
	white-space: pre-wrap;
}


/* ***************************************************************************************************** */
/* ** 4.FR専用 ******************************************************************************************* */
/* ***************************************************************************************************** */
#elChatFloatWindowHeaderSelect {
	display: none;
}