/* ==========================================================================
   JT Balloon (2026-05-02) — speech balloon for article body
   トップページと同じ和のトンマナで、記事内の対話表現を実装
   ========================================================================== */
.jt-balloon{
  --jtb-paper:#fffdf7;
  --jtb-soft:#f4efe4;
  --jtb-line:#e4d9c8;
  --jtb-ink:#182026;
  --jtb-muted:#69716a;
  --jtb-deep:#24382f;
  --jtb-gold:#a27a3d;

  display:flex;
  align-items:flex-start;
  gap:18px;
  margin:1.6em 0;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  letter-spacing:.04em;
}
.jt-balloon__icon{
  flex:0 0 72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.jt-balloon__icon img{
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--jtb-line);
  background:var(--jtb-paper);
  box-shadow:0 6px 14px rgba(84,69,42,.08);
}
.jt-balloon__name{
  font-size:11px;
  letter-spacing:.18em;
  color:var(--jtb-gold);
  line-height:1.1;
  text-align:center;
}
.jt-balloon__body{
  position:relative;
  flex:1;
  min-width:0;
  background:var(--jtb-paper);
  border:1px solid var(--jtb-line);
  border-radius:8px;
  padding:18px 22px;
  color:var(--jtb-ink);
  font-size:15px;
  line-height:1.95;
  box-shadow:0 8px 22px rgba(84,69,42,.06);
}
.jt-balloon__body::before{
  content:"";
  position:absolute;
  left:-9px;
  top:22px;
  width:14px;
  height:14px;
  background:var(--jtb-paper);
  border-left:1px solid var(--jtb-line);
  border-bottom:1px solid var(--jtb-line);
  transform:rotate(45deg);
}
.jt-balloon__body p{
  margin:0;
  color:var(--jtb-ink);
}
.jt-balloon__body p + p{margin-top:.6em}

/* ガイド・回答者（右配置・深緑） */
.jt-balloon.is-guide{flex-direction:row-reverse}
.jt-balloon.is-guide .jt-balloon__name{color:var(--jtb-paper)}
.jt-balloon.is-guide .jt-balloon__icon img{
  border-color:var(--jtb-deep);
  background:var(--jtb-deep);
}
.jt-balloon.is-guide .jt-balloon__body{
  background:var(--jtb-deep);
  border-color:var(--jtb-deep);
  color:#f6f1e6;
  box-shadow:0 10px 26px rgba(36,56,47,.18);
}
.jt-balloon.is-guide .jt-balloon__body p{color:#f6f1e6}
.jt-balloon.is-guide .jt-balloon__body::before{
  left:auto;
  right:-9px;
  background:var(--jtb-deep);
  border-left:none;
  border-bottom:none;
  border-right:1px solid var(--jtb-deep);
  border-top:1px solid var(--jtb-deep);
}
.jt-balloon.is-guide .jt-balloon__name{
  color:var(--jtb-gold);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:520px){
  .jt-balloon{gap:12px}
  .jt-balloon__icon{flex:0 0 56px}
  .jt-balloon__icon img{width:56px;height:56px}
  .jt-balloon__name{font-size:10px}
  .jt-balloon__body{padding:14px 16px;font-size:14px;line-height:1.85}
  .jt-balloon__body::before{top:18px}
}