/* チャットレイアウト */
.chat-box {
    width: 100%;
    height: auto;
    overflow: hidden; /*floatの解除*/
    margin-bottom: 3px;
}
.chat-face {
    float: left;
    font-size: 8px;
    margin-left: 2px;
    margin-right: -90px;
}
.chat-face img{
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 1px;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px #ddd;
}
.chat-area {
    width: 100%;
    float: right;
}
.chat-hukidashi {
    display: inline-block; /*コメントの文字数に合わせて可変*/
    padding: 5px 10px;
    margin-left: 65px;
    margin-top: 8px;
    /* border: 1px solid gray; ←削除 */
    border-radius: 10px;
    position: relative; /*追記*/
    background-color: #D9F0FF; /*追記*/
}

.chat-kidoku {
    display: inline-block; /*コメントの文字数に合わせて可変*/
    margin-left: 65px;
    font-size: 12px;
    /* border: 1px solid gray; ←削除 */
    border-radius: 10px;
    position: relative; /*追記*/
}
/* ↓追記↓ */
.chat-hukidashi:after {
    content: "";
    position: absolute;
    top: 30%; left: -4px;
    margin-top: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #D9F0FF transparent transparent;
}
.someone {
    background-color: #ffe6ff;
}
.someone:after {
    border-color: transparent #ffe6ff transparent transparent;
}
/* ↑追記↑ */