.link-list a[target="_blank"]::after {
  content: "\f08e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 10px;
}


/* 共通CSS */
:root {
  --chat-width-max: 500px; /* 吹き出しの横幅最大値 */
  --chat-margin: 20px; /* 前後要素との距離 */

  --chat-icon-size: 80px; /* アイコン画像のサイズ */

  --chat-text-padding: 10px 15px; /* テキスト内余白 */
  --chat-text-font-size: 14px; /* テキスト文字大きさ */

  /* 左右で分けたアイコン・吹き出し背景色（パステルカラー） */
  --noborder-chat-icon-bgcolor-left: #fff; /* 淡いピンク */
  --noborder-chat-icon-bgcolor-right: #fff; /* 淡いブルー */

  --noborder-chat-text-bgcolor-left: #ffeaf4; /* 吹き出し左色 */
  --noborder-chat-text-bgcolor-right: #e4f0ff; /* 吹き出し右色 */

  --noborder-chat-icon-radius: 50%; /* アイコン円形 */
  /*--noborder-chat-icon-bgimage-left: url(画像URL);  左画像 */
  /*--noborder-chat-icon-bgimage-right: url(../image/business/cases/chat01.png);  右画像 */

  --noborder-chat-text-radius: 6px; /* テキスト角丸 */
  --noborder-chat-text-color: rgb(51,51,51); /* テキスト文字色 */

  --noborder-chat-triangle-size: 20px; /* 吹き出し角大きさ */
  --noborder-chat-triangle-position-top: 15px; /* 吹き出し角位置 */

  --noborder-chat-img-radius: 6px; /* 画像角丸 */
  --noborder-chat-item-distance: 8px; /* アイコン〜吹き出し間距離 */
}

.chat {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: var(--chat-margin) auto;
}

.chat__r {
  justify-content: flex-end;
}

.chat__r .chat__icon {
  order: 1;
}

.chat__icon {
  flex-shrink: 0;
  width: var(--chat-icon-size);
  height: var(--chat-icon-size);
  border-radius: var(--noborder-chat-icon-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ccc;
}

.chat__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--noborder-chat-icon-radius);
}

.chat__body {
  max-width: var(--chat-width-max, 100%);
}

.chat__text {
  border-radius: var(--noborder-chat-text-radius);
  color: var(--noborder-chat-text-color);
  padding: var(--chat-text-padding);
  font-size: var(--chat-text-font-size);
  position: relative;
}

.chat__image {
  margin-top: 8px;
}

.chat__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--noborder-chat-img-radius);
}

/* シンプルチャット用 */
.noborder__chat {
  gap: 0 calc(var(--noborder-chat-item-distance) + calc(var(--noborder-chat-triangle-size) / 1.5));
}

.noborder__chat .chat__icon {
  border-radius: var(--noborder-chat-icon-radius);
  background-color: var(--noborder-chat-icon-bgcolor-left);
  background-image: var(--noborder-chat-icon-bgimage-left);
}

.noborder__chat.chat__r .chat__icon {
  background-color: var(--noborder-chat-icon-bgcolor-right);
  background-image: var(--noborder-chat-icon-bgimage-right);

}

.noborder__chat .chat__text {
  background: var(--noborder-chat-text-bgcolor-left);
}

.noborder__chat.chat__r .chat__text {
  background: var(--noborder-chat-text-bgcolor-right);
}

.noborder__chat .chat__text::after {
  content: "";
  display: block;
  position: absolute;
  top: var(--noborder-chat-triangle-position-top);
  right: calc(100% - 1px);
  clip-path: polygon(100% 100%, 100% 0, 0 50%);
  width: calc(var(--noborder-chat-triangle-size) / 1.5);
  height: var(--noborder-chat-triangle-size);
  background: var(--noborder-chat-text-bgcolor-left);
}

.noborder__chat.chat__r .chat__text::after {
  right: auto;
  left: calc(100% - 1px);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  background: var(--noborder-chat-text-bgcolor-right);
}
