/* Copyright (C) 2021 Exiis-Lab Co., Ltd. All Rights Reserved. */

html,body { height: 100%; }
body { margin: 0 auto; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-y: hidden; }
input[type="button"] { -webkit-appearance: none; }
input[type="text"] { -webkit-appearance: none; }
.viii_header_box { margin: 0px auto; text-align: center; }
.viii_header_box h1 { font-size: 100%; padding: 3px; margin: 5px auto; }
.viii_container { height: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.viii_headerArea { width: 100%; background-color: #ffffff; color: #333333; border: 1px solid #99c9e5; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 38px\9; height: 38px\0/; }
.viii_chatArea { background: #dedede; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow-y: scroll; height: 400px\9; height: 400px\0/; }
.viii_chatArea-wrap { padding-bottom: 10px; }
#viii_input { background: #999999; padding: 10px; clear: both; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 40px\9; height: 40px\0/; }
#viii_input_txt { display: -ms-flexbox; display: -webkit-flex; display: flex; }
#viii_sendMessage { width: 75%; margin-right: 10px; background-color: #ffffff; color: #333333; font-size: 14px; padding: 7px 7px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.1),0 0 2px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1),0 0 2px rgba(0,0,0,0.2); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1),0 0 2px rgba(0,0,0,0.2); -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; float: left\9; float: left\0/; }
.viii_submit_btn { background: #179be5; color: #ffffff; font-size: 14px; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; border: 0; text-decoration: none; padding: 7px 20px; text-align: center; vertical-align: middle; display: block; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; background: -moz-linear-gradient(top,#38b2e8 0%,#179be5); background: -webkit-gradient(linear, left top, left bottom, from(#38b2e8), to(#179be5)); background: -ms-linear-gradient(top,#38b2e8 0%,#179be5); width: 18%; float: left\9; float: left\0/; }
.viii_submit_btn:hover { background: #179be5; }
#viii_evalComment { display: inline-block; width: 70%; height: 45px; margin: 10px 10px 10px 10px; vertical-align: middle; }
.viii_evalComment_submit_btn { display: inline-block; margin: 10px 10px 10px 10px; background: #179be5; color: #ffffff; font-size: 14px; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; border: 0; text-decoration: none; padding: 7px 20px; text-align: center; vertical-align: middle; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; background: -moz-linear-gradient(top,#38b2e8 0%,#179be5); background: -webkit-gradient(linear, left top, left bottom, from(#38b2e8), to(#179be5)); background: -ms-linear-gradient(top,#38b2e8 0%,#179be5); width: 18%; min-width: 65px; }
#viii_eval_comment { display: none; width: 70%; padding: 5px; list-style: none; margin: 10px auto; background: #ffffff; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #d1d1d1; }
#viii_eval_comment p { text-align: center; font-size: 87.5%; color: #333; margin: 3px; }
.viii_evalComment_submit_btn:hover { background: #179be5; }
.viii_chat_user_box { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin: 12px 0; text-align: left; overflow: hidden; padding: 5px 17px; z-index: 1; }
.viii_userBaloon { min-width: 30%; max-width: 90%; font-size: 14px; display: inline-block; background: #c8edfc; color: #000; border-radius: 10px; padding: 10px; text-align: left; min-height: 18px; -webkit-box-shadow: 0 8px 5px -5px #999; -moz-box-shadow: 0 8px 5px -5px #999; box-shadow: 0 8px 5px -5px #999; float: right\9; float: right\0/; }
.viii_userBaloon:after { content: ""; display: block; width: 0; height: 0; border: 7px solid transparent; border-left: 15px solid #c8edfc; position: absolute; top: 15px; right: 0px; float: right\9; float: right\0/; }
#viii_imgArea { z-index: 0; position: relative; display: none; }
img { border: 0; margin: 0; padding: 0; }
.viii_chat_bot_Area { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 20px 0 0px; text-align: left; overflow: hidden; padding: 5px 12px; z-index: 1; }
.viii_chat_bot_Area .viii_select_box { background-repeat: no-repeat; width: 100px; height: 86px; padding-top: 10px; background-size: contain; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; float: left\9; float: left\0/; }
.viii_botAnswer_box { margin-left: 10px; min-width: 60%; max-width: 75%; float: left\9; float: left\0/; }
.viii_botBaloon { position: relative; font-size: 14px; display: inline-block; background: #fff; color: #333333; border-radius: 10px; padding: 15px; text-align: left; min-height: 18px; -webkit-box-shadow: 0 8px 5px -5px #999; -moz-box-shadow: 0 8px 5px -5px #999; box-shadow: 0 8px 5px -5px #999; margin: 0px 20px 0px 0px; }
.viii_botBaloon:after { content: ""; display: block; width: 0; height: 0; border: 7px solid transparent; border-right: 15px solid #fff; position: absolute; top: 20px; left: -20px; }
a { color: #0099ff; text-decoration: none; }
.viii_select_Area { display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 0 10px; text-align: left; overflow: hidden; padding: 5px 12px; z-index: 1; }
.viii_select_box { background-repeat: no-repeat; width: 100px; height: 86px; padding-top: 10px; background-size: contain; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; float: left\9; float: left\0/; }
.viii_botSelects { margin-left: 20px; float: left\9; float: left\0/; }
.viii_select { color: #fff; background: #3e75c6; font-size: 14px; border-radius: 6px; padding: 5px 15px; margin-bottom: 5px; text-decoration: none; cursor: pointer; }
.viii_select:hover { opacity: 0.8; }
#jumpbtn { display: none; }
.viii_jump_btn a { width: 80%; background: -moz-linear-gradient(top,#f1f1f1 0%,#d5d5d5); background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#d5d5d5)); background: -ms-linear-gradient(top,#f1f1f1 0%,#d5d5d5); border: 1px solid #d1d1d1; color: #555; font-size: 14px; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 7px; margin: 10px auto; display: block; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-align: center; vertical-align: middle; text-decoration: none; }
.viii_jump_btn a:hover { background: #d5d5d5; }
#viii_eval_box p { text-align: center; font-size: 87.5%; color: #333; margin: 3px; }
#viii_eval_box { display: none; width: 350px; height: 65px; padding: 5px; list-style: none; margin: 10px auto; background: #ffffff; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #d1d1d1; }
#viii_eval_box ul { width: 230px; margin: 0 auto; text-align: center; padding: 0; list-style: none; display: block; clear: both; }
#viii_eval_box li { display: inline; padding: 0; margin: 5px; float: left; }
#evaluation_positive_btn { display: block; border: 1px solid #ff704e; padding: 3px; text-decoration: none; color: #ffffff; width: 100px; background-color: #ff704e; margin: 1px; text-align: center; font-size: 13px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; cursor: pointer; }
#evaluation_positive_btn:hover { background: #ffb115; }
#evaluation_negative_btn { display: block; border: 1px solid #4e70ff; padding: 3px; text-decoration: none; color: #ffffff; width: 100px; background-color: #4e70ff; margin: 1px; text-align: center; font-size: 13px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; cursor: pointer; }
#evaluation_negative_btn:hover { background: #d5d5d5; }
.viii_footerArea { background-color: #777; border: 1px solid #777; color: #ffffff; margin: 0px auto; text-align: center; width: 100%; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 28px\9; height: 28px\0/; }
p.viii_footer_box { font-size: 74%; line-height: 35px; margin: 0px auto; }
.ui-autocomplete { max-height: 50%; overflow-y: auto; overflow-x: none; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 3px solid #3481C7; background-color: #2495d3; width: 85%; word-break: break-word; -ms-word-break: break-all; overflow-wrap: break-word; -ms-overflow-wrap: break-all; position: relative !important; font-size: 96%; z-index: 100; -ms-filter: "alpha(opacity=90)"; filter: alpha(opacity=90); opacity: 0.9; display: none; width: 90%\9; width: 90%\0/; }
.ui-autocomplete ul { height: auto !important; width: 100% !important;}
.ui-autocomplete li { list-style: none; line-height: 1.4; width: 100% !important; position: relative; }
.ui-autocomplete li a { color: #fff; display: block; padding: 5px 5px 5px 0px; cursor: pointer; }
.ui-autocomplete li a:hover { background-color: #4baae0; }
.ui-autocomplete li::before { display: block; position: absolute; top: 10px; left: -20px; width: 5px; height: 5px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ""; }
.ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
#viii_select_category {display: none;  background: #e9e9e9; padding: 10px; border-top: 1px solid #cccccc; clear: both; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; height: 40px\9; height: 40px\0/; }
select { background-color: white; border: 1px solid #cccccc; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 1em; width: 100%; font-size: 14px; color: #333; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; }
select::-ms-expand { display: none; }
select.viii_select_cate { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; }
select.viii_select_cate:focus { background-image: linear-gradient(45deg, #2495d3 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #2495d3 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat; border-color: #2495d3; outline: 0; }
select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; }
.viii_select_cate_btn { display: none; }
.viii_select_cate_btn_label { display: block; color: #FFFFFF; background: #0baa8b; font-size: 14px; border-radius: 6px; padding: 5px 15px; margin-bottom: 5px; text-decoration: none; cursor: pointer; }
.viii_select_cate_btn_label:hover { opacity: 0.8; }
@media screen and (max-width: 480px) {
.viii_evalComment_submit_btn { display: inline-block; margin: 10px 10px 10px 10px; background: #179be5; color: #ffffff; font-size: 14px; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: bold; border: 0; text-decoration: none; padding: 7px 20px; text-align: center; vertical-align: middle; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; cursor: pointer; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; background: -moz-linear-gradient(top, #38b2e8 0%, #179be5); background: -webkit-gradient(linear, left top, left bottom, from(#38b2e8), to(#179be5)); background: -ms-linear-gradient(top, #38b2e8 0%, #179be5); width: 25%; min-width: 65px; }
.ui-autocomplete { max-height: 50%; overflow-y: auto; overflow-x: none; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 3px solid #3481C7; background-color: #2495d3; width: 80% !important; word-break: break-word; -ms-word-break: break-all; overflow-wrap: break-word; -ms-overflow-wrap: break-all; position: relative !important; font-size: 87.5%; z-index: 100; -ms-filter: "alpha(opacity=90)"; filter: alpha(opacity=90); opacity: 0.9; display: none;}
}
@media all and (min-width:0\0) and (min-resolution: .001dpcm) { 
select { background-color: white; border: 1px solid #cccccc; border-radius: 4px; display: inline-block; font: inherit; line-height: 1.5em; padding: 0.5em 0.5em 0.5em 1em; width: 100%; font-size: 14px; color: #333; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; }
select.viii_select_cate { background-image: transparent; background-position: bottom 10px right 20px; }
select.viii_select_cate:focus { background-image: transparent; }
.viii_select_cate_btn_Area { padding: 5px 20px 5px 65px; }
.viii_select_cate_btn { display: none; }
.viii_select_cate_btn_label { display: block; color: #FFFFFF; background: #0baa8b; font-size: 14px; border-radius: 6px; padding: 5px 15px; margin-bottom: 5px; text-decoration: none; cursor: pointer; }
.viii_select_cate_btn_label:hover { opacity: 0.8; }
}