/* =========================================================
  my/bubble-comment（完成：逆垂直三角形／交差マスク済み）
========================================================= */

/* ====== ベース ====== */
.wp-block-my-bubble-comment.bubble{
  --bubble-max-pc: 580px;
  --bubble-max-sp: 312px;

  --bubble-bg: #fff;
  --bubble-border: #000;
  --bubble-border-w: 1px;

  --avatar-size-pc: 72px;
  --avatar-size-sp: 56px;

  --tail: 14px; /* しっぽの外接矩形サイズ */
  --tail-offset-sp: calc(var(--avatar-size-sp) / 2);
  --tail-offset-pc: calc(var(--avatar-size-pc) / 2);

  --gap: 12px;
  display:block;           /* ← ここを inline-block から block に */
  width:fit-content;       /* ← 中央寄せを効かせたい場合はこれ。常に幅いっぱいなら 100% */
  max-width:100%;
}

/* 吹き出し本体 */
.wp-block-my-bubble-comment .bubble__box{
  position:relative;
  background:var(--bubble-bg);
  border:var(--bubble-border-w) solid var(--bubble-border);
  padding:20px 20px;
  max-width:var(--bubble-max-sp);
  text-align:left;
  box-sizing:border-box;
}

/* 本文 */
.wp-block-my-bubble-comment .bubble__text{
  margin:0;
  font-size:12px;
  line-height:1.75;
  letter-spacing:.02em;
}

/* ====== しっぽ（外側へ配置） ====== */
.wp-block-my-bubble-comment .bubble__tail{
  position:absolute;
  width:var(--tail);
  height:var(--tail);
  bottom: calc(var(--tail) * -1);
  pointer-events:none;
  /* 好きに調整できる余白。2px〜3px が安全 */
  --mask-overlap: 2px;
}

/* 交点マスク：尻尾の縦線には触れない幅で、下線だけ確実に消す */
.wp-block-my-bubble-comment .bubble__tail::after{
  content:"";
  position:absolute;

  /* ← 両側に 0.5px 広げる */
  left:  calc(var(--bubble-border-w) - 0.7px);
  right: calc(var(--bubble-border-w) - 0.7px);

  /* ← 上方向にほんの少し食い込ませ、下線の 1px 残りを潰す */
  top:    calc(var(--bubble-border-w) * -1.5);
  height: calc(var(--bubble-border-w) * 4);

  background: var(--bubble-bg);
  z-index: 0;          /* マスクが下、線(::before)が上 */
}


/* ▼ しっぽの線（::before）：縦線＋斜線だけを描画。底辺は描かない */
/* 右向き：右が垂直・左が斜め（左下→右上 = 315deg） */
.wp-block-my-bubble-comment.is-right .bubble__tail::before{
  content:"";
  position:absolute; inset:0;
  background:
    /* 右の垂直線 */
    linear-gradient(var(--bubble-border), var(--bubble-border))
      100% 0 / var(--bubble-border-w) 100% no-repeat,
    /* 斜線（1px相当） */
    linear-gradient(
      45deg,
      transparent calc(50% - (var(--bubble-border-w) / 2)),
      var(--bubble-border) calc(50% - (var(--bubble-border-w) / 2)),
      var(--bubble-border) calc(50% + (var(--bubble-border-w) / 2)),
      transparent calc(50% + (var(--bubble-border-w) / 2))
    ) 0 0 / 100% 100% no-repeat;
  background-color:transparent;
}

/* マスクを下、線を上 */
.wp-block-my-bubble-comment .bubble__tail::after{ z-index: 0; }  /* mask */
.wp-block-my-bubble-comment .bubble__tail::before{ z-index: 1; } /* lines */


/* 左向き：左が垂直・右が斜め（右下→左上 = 45deg） */
.wp-block-my-bubble-comment.is-left .bubble__tail::before{
  content:"";
  position:absolute; inset:0;
  background:
    /* 左の垂直線 */
    linear-gradient(var(--bubble-border), var(--bubble-border))
      0 0 / var(--bubble-border-w) 100% no-repeat,
    /* 斜線（1px相当） */
    linear-gradient(
      315deg,
      transparent calc(50% - (var(--bubble-border-w) / 2)),
      var(--bubble-border) calc(50% - (var(--bubble-border-w) / 2)),
      var(--bubble-border) calc(50% + (var(--bubble-border-w) / 2)),
      transparent calc(50% + (var(--bubble-border-w) / 2))
    ) 0 0 / 100% 100% no-repeat;
  background-color:transparent;
}

/* ====== 位置寄せ ====== */
.wp-block-my-bubble-comment.is-right{ text-align:left; }
.wp-block-my-bubble-comment.is-right .bubble__box{ margin-right:auto; }
.wp-block-my-bubble-comment.is-right .bubble__tail{ left: var(--tail-offset-sp); }

.wp-block-my-bubble-comment.is-left { text-align:right; }
.wp-block-my-bubble-comment.is-left  .bubble__box{ margin-left:auto; }
.wp-block-my-bubble-comment.is-left  .bubble__tail{ right: var(--tail-offset-sp); }

/* ====== メタ（アバター＋役職＋氏名） ====== */
.wp-block-my-bubble-comment .bubble__cap{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:var(--gap);
}
/* 右向き：テキスト左／アバター右 */
.wp-block-my-bubble-comment.is-right .bubble__cap{ flex-direction:row-reverse; }

.wp-block-my-bubble-comment .bubble__avatar{
  width:var(--avatar-size-sp);
  height:var(--avatar-size-sp);
  border-radius:50%;
  object-fit:cover;
}
.wp-block-my-bubble-comment .bubble__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

/* SPタイポ */
.wp-block-my-bubble-comment .bubble__pos{
  font-family:"しっぽり明朝","Shippori Mincho",serif;
  font-size:7px; line-height:19px; letter-spacing:-0.51px; color:#000; opacity:.85;
}
.wp-block-my-bubble-comment .bubble__name{
  font-family:"Adobe Jenson Pro",serif;
  font-weight:300; font-size:14px; line-height:20px; letter-spacing:1.25px; color:#000;
}

/* メタの寄せ先 */
.wp-block-my-bubble-comment.is-right .bubble__cap{ margin-right:auto; margin-left:0; }
.wp-block-my-bubble-comment.is-left  .bubble__cap{ margin-left:auto;  margin-right:0; }

/* ====== PC上書き ====== */
@media (min-width:781px){
  .wp-block-my-bubble-comment .bubble__box{
    max-width:var(--bubble-max-pc);
    padding:20px 40px;
  }
  .wp-block-my-bubble-comment .bubble__avatar{ width:var(--avatar-size-pc); height:var(--avatar-size-pc); }
  .wp-block-my-bubble-comment.is-right .bubble__tail{ left:  var(--tail-offset-pc); }
  .wp-block-my-bubble-comment.is-left  .bubble__tail{ right: var(--tail-offset-pc); }

  .wp-block-my-bubble-comment .bubble__pos{ font-size:8px; line-height:22px; letter-spacing:-0.58px; }
  .wp-block-my-bubble-comment .bubble__name{ font-size:16px; line-height:23px; letter-spacing:1.42px; }
}






/* ラッパーは必ず縦積み＆親幅を超えない */
.wp-block-my-bubble-comment { display:block; width:fit-content; max-width:100%; }

/* 配置 */
.wp-block-my-bubble-comment.alignleft   { margin-left:0;   margin-right:auto; }
.wp-block-my-bubble-comment.aligncenter { margin-left:auto; margin-right:auto; }
.wp-block-my-bubble-comment.alignright  { margin-left:auto; margin-right:0;   }








.wp-block-my-bubble-comment {
  display:block;       /* ← inline-block のままだと中央寄せ効かない */
  width:fit-content;   /* 吹き出し幅に合わせる */
  max-width:100%;      /* 親幅を超えない */
}

.wp-block-my-bubble-comment.alignleft   { margin-left:0;   margin-right:auto; }
.wp-block-my-bubble-comment.aligncenter { margin-left:auto; margin-right:auto; }
.wp-block-my-bubble-comment.alignright  { margin-left:auto; margin-right:0;   }


























/* ===== 45° 斜線の“太り”を抑える微調整（PCでだけ適用） ===== */
@media (min-width:781px){
  /* 斜線のしきいをわずかにシフトして 1px に見せる */
  .wp-block-my-bubble-comment{ --diag-nudge: .35px; }

  /* 右向き（右が垂直・左が斜め） */
  .wp-block-my-bubble-comment.is-right .bubble__tail::before{
    background:
      /* 右の垂直線はそのまま */
      linear-gradient(var(--bubble-border), var(--bubble-border))
        100% 0 / var(--bubble-border-w) 100% no-repeat,
      /* 斜線：しきいを少し左へずらす */
      linear-gradient(
        45deg,
        transparent calc(50% - (var(--bubble-border-w)/2) - var(--diag-nudge)),
        var(--bubble-border) calc(50% - (var(--bubble-border-w)/2) - var(--diag-nudge)),
        var(--bubble-border) calc(50% + (var(--bubble-border-w)/2) - var(--diag-nudge)),
        transparent      calc(50% + (var(--bubble-border-w)/2) - var(--diag-nudge))
      ) 0 0 / 100% 100% no-repeat;
  }

  /* 左向き（左が垂直・右が斜め） */
  .wp-block-my-bubble-comment.is-left .bubble__tail::before{
    background:
      /* 左の垂直線はそのまま */
      linear-gradient(var(--bubble-border), var(--bubble-border))
        0 0 / var(--bubble-border-w) 100% no-repeat,
      /* 斜線：しきいを少し右へずらす（315°なので同じくマイナス） */
      linear-gradient(
        315deg,
        transparent calc(50% - (var(--bubble-border-w)/2) - var(--diag-nudge)),
        var(--bubble-border) calc(50% - (var(--bubble-border-w)/2) - var(--diag-nudge)),
        var(--bubble-border) calc(50% + (var(--bubble-border-w)/2) - var(--diag-nudge)),
        transparent      calc(50% + (var(--bubble-border-w)/2) - var(--diag-nudge))
      ) 0 0 / 100% 100% no-repeat;
  }
}

/* SP 側もわずかに効かせたい場合（必要なら） */
@media (max-width:780px){
  .wp-block-my-bubble-comment{ --diag-nudge: .2px; }
}