/* ==========================================================
 💬 speech.css
 対応HTML：speech.html（吹き出しデザインページ）
 デザイン内容：吹き出し5種
 ----------------------------------------------------------
 ① 左側
 ② 右側
 ③ 上方向
 ④ 丸型（チャット風）
 ⑤ 下方向
========================================================== */

/* ===== 共通設定 ===== */
.speech {
  max-width: 70%;
  padding: 12px 15px;
  border-radius: 10px;
  position: relative;
  margin: 20px auto;
  line-height: 1.6;
}


/* ===== ① 左側吹き出し ===== */
.speech.left {
  background: #F3E5F5;
}
.speech.left::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 10px;
  border: 10px solid transparent;
  border-right: 30px solid #F3E5F5;
}

/* ===== ② 右側吹き出し ===== */
.speech.right {
  background: #E1BEE7;
  margin-left: auto;
  text-align: right;
}
.speech.right::before {
  content: "";
  position: absolute;
  right: -30px;
  top: 10px;
  border: 10px solid transparent;
  border-left: 30px solid #E1BEE7;
}

/* ===== ③ 上方向 ===== */
.speech.top {
  background: #F8BBD0;
  text-align: center;
}
.speech.top::before {
  content: "";
  position: absolute;
  top: -30px; /* ←上に出す */
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-bottom: 30px solid #F8BBD0; /* ↓ 下向き三角 */
}

/* ===== ④ 丸型（チャット風） ===== */
.speech.round {
  background: #D1C4E9;
  border-radius: 50px;
  text-align: center;
}

/* ===== ⑤ 下方向 ===== */
.speech.bottom {
  background: #CE93D8;
  color: #fff;
  text-align: center;
}
.speech.bottom::before {
  content: "";
  position: absolute;
  bottom: -30px; /* ←下に出す */
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top: 30px solid #CE93D8; /* ↑ 上向き三角 */
}