.message-area {
  height: 400px;
  padding: 2rem 3rem;
  overflow-y: scroll;
}

.message-area .message-area_date {
  color: #777;
  font-size: 1.2rem;
  margin-bottom: 10px;
  text-align: center;
}

.message-area .message-area_name,
.message-area .message-area_item {
  align-items: flex-end;
  display: flex;
  position: relative;
}

.message-area .message-area_name .message-area_item_content,
.message-area .message-area_item .message-area_item_content {
  border-radius: .4rem;
  max-width: 60%;
  padding: 1rem;
  white-space: pre-wrap;
}

.message-area .message-area_name .message-area_item_time,
.message-area .message-area_item .message-area_item_time {
  color: #777;
  font-size: 1.2rem;
}

.message-area .message-area_item::after {
  border-style: solid;
  content: '';
  height: 0;
  position: absolute;
  top: 7px;
  width: 0;
}

.message-area .message-area_item_other .message-area_item_content {
  background-color: #EBEBEB;
  white-space: pre-wrap;
}

.message-area .message-area_item_other .message-area_item_time {
  margin-left: .5rem;
}

.message-area .message-area_item_other::after {
  border-color: transparent #EBEBEB transparent transparent;
  border-width: 7px 10px 7px 0;
  left: -10px;
}

.message-area .message-area_name_self,
.message-area .message-area_item_self {
  flex-direction: row-reverse;
}

.message-area .message-area_name_self .message-area_item_content,
.message-area .message-area_item_self .message-area_item_content {
  background-color: #D9E6F3;
  white-space: pre-wrap;
}

.message-area .message-area_name_self .message-area_item_time,
.message-area .message-area_item_self .message-area_item_time {
  margin-right: .5rem;
}

.message-area .message-area_item_self::after {
  border-color: transparent transparent transparent #D9E6F3;
  border-width: 7px 0 7px 10px;
  right: -10px;
}

.message-area .message-area_name {
  color: #777;
  font-size: 1.2rem;
}

.message-area .card_section {
  margin-bottom: 2rem;
}

.message-area .card_section_article .message-area_item {
  margin-bottom: 2rem;
}

.message-area .card_section_article .message-area_item:last-child {
  margin-bottom: 0;
}

.card_in-card .card.message-area {
  padding: 2rem 3rem;
}

@media screen and (max-width: 768px) {
  .card.message-area {
    border-bottom: 1px solid #EBEBEB;
  }

  .card .message-board .card_in-card .card:last-child.message-area {
    border-bottom: 1px solid #EBEBEB;
  }
}