/* ユーザー画面 */
@charset "utf-8";
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

body {
	font-family:
	-apple-system, BlinkMacSystemFont,
	"游ゴシック体", YuGothic,
	"Yu Gothic M",
	"游ゴシック Medium", "Yu Gothic Medium",
	"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3,
	"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
	"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
	"メイリオ", Meiryo,
	Osaka,
	"ＭＳ Ｐゴシック", "MS PGothic",
	"Helvetica Neue", HelveticaNeue,
	Helvetica,
	Arial,
	"Segoe UI",
	sans-serif,
	"Apple Color Emoji",
	"Segoe UI Emoji",
	"Segoe UI Symbol",
	"Noto Color Emoji";

 	font-size: 16px;

	margin: 0;
	padding: 0;
}
header {
	width: 100%;
	height: 30px;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px;
	box-sizing: border-box
}
.header-btnbox {
	display: flex;
	align-items: center;
}
.icon_reload,
.icon_map,
.icon_info {
	width: 20px;
	padding: 0 5px 0 10px;
	text-align: right;
}
.icon_reload img,
.icon_map img,
.icon_info img {
	width: 100%;
}
.logo-yorisoi {
    width: 180px;
}

.logo-yorisoi img {
    width: 100%;
}

/* ユーザーとのチャット */
.user-chat-window {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* チャット部分 */
.chat-container {
	padding: 15px 10px;
	box-sizing: border-box;
	overflow-y: auto;
}
.input-container {
	margin-top: auto;
	width: 100%;
	padding: 10px 10px;
	box-sizing: border-box;
}

.input-container .input_area {
	display: flex;
	justify-content: space-between;
}
.input_chat {
	width: 78%;
	height: 74px;
	/* white */
	background: #FFFFFF;
	border: 1px solid #DBDDE1;
	box-sizing: border-box;
	border-radius: 5px;
	margin-right: 5px;
	font-size: 16px;
}
.btn_chat_send {
	width: 70px;
	height: 70px;
	box-sizing: border-box;
	border-radius: 50%;
/* 	color: #fff; */
	font-size: 0.875rem;
}

/* メッセージ 全体箱 */
.message-box {
	position: relative;
	width: 100%;
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 0.8125rem;
	line-height: 1.5;
}
/* メッセージ ユーザー（左側・相手） */
.user-box {
	position: relative;
	display: flex;
	align-items: flex-end;
}
.user-box .message_area {
	position: relative;
	width: 55%;
	padding: 10px 15px;
	margin-left: 10px;
	box-sizing: border-box;
	border-radius: 30px;
	background: #FFFFFF;
	z-index: 2;
	word-wrap: break-word;
}
.user-box .message_arrow {
	position: absolute;
	width: 20px;
	height: 10px;
	left: 0;
	top: 20%;

	/* white */
	background: #FFFFFF;
	border-radius: 5px;
	z-index: 1;
	font-size: 1px;
}
.user-box .pin {
	position: absolute;
	left: 55%;
	top: 0;
	width: 19px;
	height: 19px;
	z-index: 3;
}
.user-box .timestamp {
	margin: 0 5px;
	color: #333;
	font-size: 0.6875rem;
}

/* オペレーター ユーザー（右側・自分） */
.op-box {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-direction: row-reverse;
}
.op-box .message_area {
	position: relative;
	width: 55%;

	padding: 10px 15px;
	margin-right: 10px;
	box-sizing: border-box;
	border-radius: 30px;
	z-index: 2;
	word-wrap: break-word;
}
.op-box .message_arrow {
	position: absolute;
	width: 20px;
	height: 10px;
	right: 0;
	top: 20%;

	/* pink */
	border-radius: 5px;
	z-index: 1;
	font-size: 1px;
}
.op-box .pin {
	position: absolute;
	right: 55%;
	top: 0;
	width: 19px;
	height: 19px;
	z-index: 3;
	transform:rotateY(180deg);
}
.op-box .timestamp {
	margin: 0 5px;
	color: #333;
	font-size: 0.6875rem;
}
.char_end {
	margin: 2rem 0;
	padding: 5px 0;
	background-color: #ccc;
	text-align: center;
	font-size: 0.8125rem;
	border-radius: 1rem;
}

/* ボタンの反転 */
.btn_data_send:hover,
.btn_log_clear:hover,
.btn_chat_send_square:hover,
.btn_prev:hover,
.btn_next:hover,
.btn_pagebox:hover,
.btn_area_change:hover,
.btn_facility_search:hover,
.btn_chat_send:hover,
.btn_decision:hover {
	opacity: .6;
}
.btn_data_send:active,
.btn_log_clear:active,
.btn_chat_send_square:active,
.btn_prev:active,
.btn_next:active,
.btn_pagebox:active,
.btn_area_change:active,
.btn_facility_search:active,
.btn_chat_send:active,
.btn_decision:active {
	background-color: #A7B6B7;
}

/* -------------------------------------------------- */
/* ツールチップ */
/* -------------------------------------------------- */
.tooltip {
	position: absolute;
	top: 16px;
	right: 5%;
	opacity: 0;
}

.balloon1-top {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 60px;
	max-width: 100%;
	font-size: 0.8125rem;
	border-radius: 8px;
	z-index: 100;
}

.balloon1-top:before {
	content: "";
	position: absolute;
	top: -24px;
	left: 80%;
	margin-left: -20px;
	border: 15px solid transparent;
/*	border-bottom: 15px solid #9ff1f8;	*/
/* 	border-bottom: 15px solid #F6D3F6; */
}

.balloon1-top p {
	margin: 0;
	padding: 0;
}

.helptip {
	position: absolute;
	top: 20px;
	right: 4%;
	opacity: 0;
	z-index: 1002;
}
.help-balloon-top {
	position: relative;
	display: inline-block;
	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 60px;
	max-width: 100%;
	font-size: 0.8125rem;
	border-radius: 8px;
}

.help-balloon-top:before {
	content: "";
	position: absolute;
	top: -30px;
	left: 70%;
	margin-left: -6px;
	border: 15px solid transparent;
}

.help-balloon-top p {
	margin: 0;
	padding: 0;
}