:root{--custom-main-color: #36437b;--custom-main-text-color: #fff;--message-content-bg-color: #f8f9fa;--message-content-border-color: #dee2e6;--right-message-bg-color: #eae0da;--right-message-text-color: #333;--left-message-bg-color: #fff;--left-message-text-color: #333;--dot-color: #3d4d8d;--dot-color-rgb: 61, 77, 141}body{font-family:"メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;box-sizing:border-box;margin:0;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-text-size-adjust:100%}@media screen and (max-width: 768px){body{font-size:14px}}.my-new-line{white-space:pre-wrap;line-break:normal;word-wrap:break-word}.message-container{margin:auto}.message-header{background:var(--custom-main-color);color:var(--custom-main-text-color);padding:15px}.message-text{max-width:75%;-webkit-filter:drop-shadow(3px 3px 5px rgba(0,0,0,0.3));filter:drop-shadow(3px 3px 5px rgba(0,0,0,0.3));display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.message-text p{position:relative;display:inline-block;padding:10px;border-radius:20px}.message-text p::before{content:'';display:block;width:20px;height:15px;position:absolute;top:10px}.message-text p a{color:#007bff}.message-text p+p{margin-top:15px}.message-text p+p::before{content:none}.message-date-block{position:relative}.message-date{position:absolute;bottom:0;font-size:12px}.message-content{padding:20px;background:var(--message-content-bg-color);border:5px solid var(--message-content-border-color);overflow:auto}.left-message-block{display:-ms-flexbox;display:flex;margin-top:30px}.left-message-block p{margin-left:25px}.left-message-block p::before{-webkit-clip-path:polygon(100% 0%, 0% 50%, 100% 100%);clip-path:polygon(100% 0%, 0% 50%, 100% 100%);left:-15px}.left-message-block .message-text p{color:var(--left-message-text-color);background:var(--left-message-bg-color)}.left-message-block .message-text p::before{background:var(--left-message-bg-color)}.left-message-block .message-loading{margin:20px 0 20px 50px}.right-message-block{display:-ms-flexbox;display:flex;margin-top:30px;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.right-message-block p{margin-right:25px}.right-message-block p::before{-webkit-clip-path:polygon(0% 0%, 0% 100%, 100% 50%);clip-path:polygon(0% 0%, 0% 100%, 100% 50%);right:-15px}.right-message-block .message-text p{color:var(--right-message-text-color);background:var(--right-message-bg-color)}.right-message-block .message-text p::before{background:var(--right-message-bg-color)}.right-message-block .message-date{left:-45px}.right-message-block .message-loading{margin:20px 50px 20px 0}.message-icon{max-width:50px;min-width:50px}@media screen and (max-width: 576px){.message-icon{max-width:40px;min-width:40px}}.message-icon img{width:auto;max-width:100%;height:auto;border-radius:50%}.send-message-block{background:var(--custom-main-color);margin:0 auto;display:-ms-flexbox;display:flex;height:48px;padding:8px}@media screen and (max-width: 768px){.send-message-block{margin:0}}.send-message{resize:none;margin:0;width:calc(100% - 70px);line-height:16px;padding:14px 6px 0px 6px;font-size:16px;border:1px solid #ced4da;border-right:none;border-radius:0}.send-message:focus{background:#fff;border-color:#80bdff;outline:none}@media screen and (max-width: 576px){.send-message{font-size:14px}}.send-button{padding:3px;display:inline-block;background:#fff;color:#4d5053;border:2px solid #ced4da;text-align:center;width:70px}.dot-flashing{position:relative;width:15px;height:15px;border-radius:10px;background-color:var(--dot-color);color:var(--dot-color);-webkit-animation:dot-flashing 1s infinite linear alternate;animation:dot-flashing 1s infinite linear alternate;-webkit-animation-delay:0.5s;animation-delay:0.5s}.dot-flashing::before{content:"";display:inline-block;position:absolute;top:0;left:-25px;width:15px;height:15px;border-radius:10px;background-color:var(--dot-color);color:var(--dot-color);-webkit-animation:dot-flashing 1s infinite alternate;animation:dot-flashing 1s infinite alternate;-webkit-animation-delay:0s;animation-delay:0s}.dot-flashing::after{content:"";display:inline-block;position:absolute;top:0;left:25px;width:15px;height:15px;border-radius:10px;background-color:var(--dot-color);color:var(--dot-color);-webkit-animation:dot-flashing 1s infinite alternate;animation:dot-flashing 1s infinite alternate;-webkit-animation-delay:1s;animation-delay:1s}@-webkit-keyframes dot-flashing{0%{background-color:var(--dot-color)}50%,100%{background-color:rgba(var(--dot-color-rgb), 0.2)}}@keyframes dot-flashing{0%{background-color:var(--dot-color)}50%,100%{background-color:rgba(var(--dot-color-rgb), 0.2)}}