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

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

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

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

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

.listen-post-container .chat__section.left {
    justify-content: flex-start;
    animation: slide-in-left 2s ease-out forwards;
}

.listen-post-container .chat__section.right {
    justify-content: flex-end;
    animation: slide-in-right 2s ease-out forwards;
}

.listen-post-container .chat__p.right {
    background-color: #eee;
}

.listen-post-container .chat__p::before {
    position: absolute;
    bottom: 0px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    content: '';
    background-color: inherit;
}

.listen-post-container .chat__p.left::before {
    left: -7px;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.listen-post-container .chat__p.right::before {
    right: -7px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* スマートフォン向けのスタイル */
@media (max-width: 600px) {
    .listen-post-container .chat {
        padding: 25px 0;
    }
    .listen-post-container .chat__p {
        max-width: 90%;
    }
}
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}