.chat {
    display: grid;
    gap: 1em 0;
    padding: 25px 15px;
}

.chat__section {
    display: flex;
    align-items: center;
    gap: 0 15px;
}

.chat__img {
    width: 2.7em;
    height: 2.7em;
    border-radius: 50%;
}

.chat__p {
    display: inline-block;
    position: relative;
    max-width: 80%;
    margin: 0;
    padding: .8em .8em .7em .9em;
    border-radius: 10px;
    font-size: .9em;
}

/* 投稿者名と返信者名に下線を追加 */
.post_name {
    text-decoration: underline;
}
.res_name {
    text-decoration: underline;
}
.chat__p.left {
    background-color: #f5deb3;
}

.chat__p.right {
    background-color: #eee;
    margin: 0 10px 0 auto;
}

.chat__p::before {
    position: absolute;
    top: -15px;
    width: 20px;
    height: 30px;
    content: '';
}

.chat__p.left::before {
    left: -10px;
    border-radius: 0 0 0 15px;
    box-shadow: -3px -15px 0 -7px #f5deb3 inset;
}

.chat__p.right::before {
    right: -10px;
    border-radius: 0 0 15px 0;
    box-shadow: 3px -15px 0 -7px #eee inset;
}

/* スマートフォン向けのスタイル */
@media (max-width: 600px) {
    .chat {
        padding: 25px 0;
    }
    .chat__p {
        max-width: 100%;
    }
    .chat__p.right {
        margin: 0;
    }
}