*{box-sizing: border-box;letter-spacing: 0.1em;font-family: sans-serif;}
html { -webkit-overflow-scrolling: touch;}
body { background-color: #fff; overflow-y: hidden; line-height: 1.65; overflow: hidden;}

/* common */
input[type="text"]:focus { border: none; outline: 0; }
/* placeholder */
::-webkit-input-placeholder {color: #ccc; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
:-moz-placeholder {color: #ccc; opacity: 1; } /* Firefox 18- */
::-moz-placeholder {color: #ccc; opacity: 1; } /* Firefox 19+ */
:-ms-input-placeholder {color: #ccc; } /* IE 10+ */
:placeholder-shown {color: #ccc; }


/* chatwindow */
.chat_window { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0 auto; height: 100%; width: 640px;  }
.chat_window aside { background-image: url(../img/bg.svg); bottom: 0; height: 100%;width: 100%;}

/* header */
.chat_window aside .noresuke_chat_bot_head { position: fixed; background: #3f5469 none repeat scroll 0 0 !important; width: 640px; padding: 8px; z-index: 1; }
.chat_window aside .noresuke_chat_bot_head .noresuke_head { text-align: center; }
.chat_window aside .noresuke_chat_bot_head .noresuke_head .noresuke_head_img { width: 100px; }

/* body */

.chat_head{
    background-color: #9C4E85;
    height:40px;
    text-align: center;
    line-height: 40px;
    color:#FFFFFF;
    font-size: 14px;
    padding-right: 4px;
    position: relative;
}
.chat_head img{
    width:14px;
    position: absolute;
    right: 12px;
    top: 12px;
}

aside{
    border: solid 2px #9C4D85;
}
.chat_box_wrapper { height: 100%; padding: 0px 0; overflow-y: scroll; opacity: 1; display: block; transform: translateX(0px); }

#chat .chat_box {padding:10px 16px 80px 16px;}
#chat .chat_box .chat_message_wrapper {margin-bottom: 15px;}
#chat .chat_box .chat_message_wrapper::after {clear: both;}
#chat .chat_box .chat_message_wrapper::after, .chat_box .chat_message_wrapper::before {content: " ";display: table;}
#chat .chat_box .chat_message_wrapper .chat_user_avatar {float: left; align-self: flex-end;    padding-top: 19px;}
#chat .chat_box .chat_message_wrapper .chat_user_avatar .md-user-image {border-radius: 50%;width: 50px;}
#chat .chat_box .chat_message_wrapper ul.chat_message {float: left;margin: 0 0 0 7px;padding: 0;width:100%}
#chat .chat_box .chat_message_wrapper ul.chat_message > li p {margin: 0; }
#chat .chat_box .chat_message_wrapper.chat_message_right .chat_user_avatar {float: right;}
#chat .chat_box .chat_message_wrapper.chat_message_right ul.chat_message {float: right;margin-left: 0 !important;margin-right: 1.5% !important;width: 50%;}
#chat .chat_box .chat_message_wrapper.chat_message_left ul.chat_message > li:first-child::before {content: "";width: 14px;height: 14px;position: absolute;bottom: 10px;left: -12px;background: url(../img/hukidashi_kyoto_left.svg) 0 0 no-repeat transparent;background-size: 14px 14px;}
#chat .chat_box .chat_message_wrapper.chat_message_right ul.chat_message > li:first-child::after {content: "";width: 14px;height: 14px;position: absolute;top: 12px;right: -14px;background: url(../img/hukidashi_kyoto_right.svg) 0 0 no-repeat transparent;background-size: 14px 14px;}
#chat .chat_box .chat_message_wrapper.chat_message_right ul.chat_message > li {background: #9C4E85 none repeat scroll 0 0;color: #fff;word-wrap: break-word;overflow-wrap: break-word;float: right; max-width: 98%;}
#chat .chat_box .chat_message_wrapper ul.chat_message > li { word-break: break-all;word-wrap: break-word;border-radius: 4px;clear: both;display: block;float: left;font-size: 12px;padding: 8px 16px;position: relative;background: #fff;color: #333333;border: solid 1px #9C4E85;}

#chat span{ color:#D31468;font-weight: bold;}
#chat .chat_box .chat_message_wrapper.avatar{ display: flex;}
#chat .chat_box .chat_message_wrapper.avatar .chat_avatar{ width: 25px;}
#chat .chat_box .chat_message_wrapper.avatar ul.chat_message > li{ margin-left: 4px; width: 258px;}
#chat .chat_box .chat_message_wrapper.loading img{ width: 24px;}
#chat .chat_box .chat_message_wrapper.loading ul.chat_message > li{ padding-bottom: 10px; padding-top: 10px;}
#chat .chat_box .list ul.chat_message  li.q_list{ border:solid 1px #D31468; margin-left: -9px; margin-top: 5px; position: relative; width: 100%;cursor: pointer;}
#chat .chat_box .list ul.chat_message  li.q_list img{ position: absolute; right: 9px; top: 42%;}
#chat .chat_box .list ul.chat_message  li.q_list .ans{ font-size:11px; color:#333333;}
#chat .chat_box .list ul.chat_message  li.q_list p span{ -webkit-font-smoothing: antialiased;}
#chat .chat_box .chat_message_wrapper.options,#chat .chat_box .chat_message_wrapper.detail{ }
#chat .chat_box .chat_message_wrapper.options,#chat .chat_box .chat_message_wrapper.detail p.ques{ padding: 7px 0px;}
#chat .chat_box .chat_message_wrapper.detail p.ans{padding-bottom: 10px}
#chat .chat_box .chat_message_wrapper.detail div.bordered_a{border-top: solid 1px #EFEFEF}
#chat .chat_box .chat_message_wrapper.detail a{ padding: 8px 0px 3px 0; text-decoration: none;}
#chat .chat_box .chat_message_wrapper.detail a span.under_line{margin-right: 5px; padding: 0px 0px 5px 0; border-bottom: solid 1px #D31468;}
#chat .chat_box .chat_message_wrapper.options,#chat .chat_box .chat_message_wrapper.detail a img{ vertical-align: middle;}
#chat .chat_box .chat_message_wrapper.options ul.chat_message > li{ padding-bottom: 12px; padding-top: 12px;width: 100%;}
#chat .chat_box .chat_message_wrapper.options ul.chat_message > li p { border-bottom: solid 1px #EFEFEF; padding-bottom: 12px; margin-bottom: 12px;}
#chat .chat_box .chat_message_wrapper.options ul.chat_message > li .option{ line-height: 32px; background-color: #D31468; color: #FFFFFF; display: block; text-align: center; margin-top: 5px; border-radius: 23px; height:32px; width:100%; text-decoration: none; position: relative;cursor: pointer;}
#chat .chat_box .chat_message_wrapper.options ul.chat_message > li .option.unselected{ background-color:#EFEFEF;}
#chat .chat_box .chat_message_wrapper.options ul.chat_message > li .option .detail_icon{ width:6px; position: absolute; right: 18px; top: 10px;}
#chat .detail_icon{ width:6px;}
#chat .chat_box .chat_message_wrapper.detail a img.detail_icon {vertical-align: middle;width: 12%;}
#chat .detail a{ color: #D31468; font-weight: bold; display: block; width: 43%; text-align: center;  margin: 0 auto;}
/*#chat .chat_box .chat_message_wrapper.text ul.chat_message > li p{
    text-align: right;
}*/

input {
    resize: none;
}
/* footer */
.chat_submit_block {
 background-color: #EFEFEF; display: flex; height: 46px; justify-content: center; align-items: center; width: 636px;bottom: 0px;position: fixed;}
.chat_submit_block input {margin-left: 5px;margin-right: 3px; width: 80%;line-height: 35px; height: 35px; outline: none;resize:none;font-size: 16px; background: transparent none repeat scroll 0 0; border: none;padding: 0 0 0 10px; background-color: #fff; font-size: 12px; border-radius: 4px;}
.chat_submit_block button { width: 20%; height: 35px;border-radius: 5px; cursor: pointer; outline: none; background-color: #D31468; padding: 8px; margin-right: 5px; border: none;}
.chat_submit_block img{width:30px;}
.chatting_img { width: 30px;}

.chat_window {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    height: 100%;
    width: 640px;
}


/* header */
@media only screen and ( max-width: 640px ) {

    .chat_window { height: 100%; width: 100%; 
    }
    .chat_submit_block{
        position: absolute;
        bottom: 2px;
        width: 99%;
    }
    .chat_window aside{
        height: 100%;
        width: 100%;
    }
    .chat_box_wrapper{
            height: 90%;
    }
    aside { width: 100%; }
    #chat .chat_box .list ul.chat_message li.q_list {
        width: 102.5%;
    }
    #chat .chat_box .chat_message_wrapper ul.chat_message{
        width:100%;
    }
    #chat .chat_box .chat_message_wrapper.avatar ul.chat_message > li{ margin-left: 4px; max-width:101%;width:101%;}

    #chat .chat_box .chat_message_wrapper ul.chat_message > li {

    }

    .chat_window aside .noresuke_chat_bot_head { width: 100%; }

}