:root {
    /* 調整用変数（必要なら行単位で上書き） */
    --chara-avatar-size: 76px;
    /* アバター（画像）のサイズ（幅=高さ） */
    --chara-border-width: 2px;
    /* バブルの枠の太さ */
    --chara-tail-size: 10px;
    /* 口（尾）の高さ（尖り具合） */
}

.chara-fukidashi-row {
    max-width: 540px;
    display: flex;
    align-items: flex-start;
    /* row の基準は上寄せにする（avatar と bubble の上辺を揃える） */
    gap: 12px;
    margin: 30px auto;
    line-height: 1.5;
}

.chara-fukidashi--left {
    justify-content: flex-start;
}

.chara-fukidashi--right {
    /* justify-content: flex-end; */
}

/* アバター画像（キャラクター画像）
    サイズは変数 --chara-avatar-size に合わせる */
.chara-fukidashi-avatar {
    width: var(--chara-avatar-size);
    height: var(--chara-avatar-size);
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 var(--chara-avatar-size);
    display: block;
}

/* バブル本体（枠幅も変数化） */
.chara-fukidashi-bubble {
    --chara-accent: #1E90FF;

    position: relative;
    background: #fff;
    border: var(--chara-border-width) solid var(--chara-accent);
    padding: 12px 16px;
    border-radius: 14px;
    box-sizing: border-box;
    word-break: break-word;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.chara-fukidashi-text {
    white-space: normal;
    margin: 0;
    font-size: 16px;
    line-height: 28px;
    color: #222;
}

/* 口（尾）の共通スタイル。三角形の位置はアバターの中央（--chara-avatar-size / 2）に合わせる。
       ※ transform:translateY は使わず、top を直接指定して位置ずれを防止 */
.chara-fukidashi-bubble::before,
.chara-fukidashi-bubble::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* 左向き（三角の外側：枠色） */
.chara-fukidashi--left .chara-fukidashi-bubble::before {
    border-width: var(--chara-tail-size) calc(var(--chara-tail-size) * 1) var(--chara-tail-size) 1px;
    border-style: solid;
    border-color: transparent var(--chara-accent) transparent transparent;
    /* 左へ出す量は三角の横幅 + 枠幅分を考慮 */
    left: calc(-1 * (var(--chara-tail-size) + var(--chara-border-width)));
    /* アバターの上辺を基準に、アバター中央に合わせる */
    top: calc(var(--chara-avatar-size) / 5);
}

/* 左向き（三角の内側：バブル白で被せる） */
.chara-fukidashi--left .chara-fukidashi-bubble::after {
    border-width: calc(var(--chara-tail-size) - var(--chara-border-width)) calc(var(--chara-tail-size) - var(--chara-border-width)) calc(var(--chara-tail-size) - var(--chara-border-width)) 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    /* 内側は少し重ねて線が見えないようにする（枠幅で微調整） */
    left: calc(-1 * (var(--chara-tail-size) - (var(--chara-border-width) * 1)));
    top: calc(var(--chara-avatar-size) / 5 + 2px);
}

/* 右向き（外側） */
.chara-fukidashi--right .chara-fukidashi-bubble::before {
    border-width: var(--chara-tail-size) 1px var(--chara-tail-size) calc(var(--chara-tail-size) * 1);
    border-style: solid;
    border-color: transparent transparent transparent var(--chara-accent);
    right: calc(-1 * (var(--chara-tail-size) + var(--chara-border-width)));
    top: calc(var(--chara-avatar-size) / 5);
}

/* 右向き（内側） */
.chara-fukidashi--right .chara-fukidashi-bubble::after {
    border-width: calc(var(--chara-tail-size) - var(--chara-border-width)) 0 calc(var(--chara-tail-size) - var(--chara-border-width)) calc(var(--chara-tail-size) - var(--chara-border-width));
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    right: calc(-1 * (var(--chara-tail-size) - (var(--chara-border-width) * 1)));
    top: calc(var(--chara-avatar-size) / 5 + 2px);
}

/* row の向き切り替え（avatar と bubble の順序） */
\  .chara-fukidashi--left {
    flex-direction: row;
}

.chara-fukidashi--right {
    flex-direction: row-reverse;
}

/* カラーのユーティリティ */
.chara-fukidashi-accent-blue {
    --chara-accent: #388ee3;
}

.chara-fukidashi-accent-pink {
    --chara-accent: #e05c85;
}

.chara-fukidashi-accent-green {
    --chara-accent: #3dcd8c;
}

/* スマホ調整 */
@media (max-width:480px) {
    :root {
        --chara-avatar-size: 66px;
    }

    .chara-fukidashi-bubble {
        padding: 10px 12px;
        min-height: var(--chara-avatar-size);
    }
}



.chara-fukidashi-setsumei {
    width: 100%;
    max-width: 320px;
    margin: 50px auto 0 auto;
    border: solid 4px #ddd;
    border-radius: 6px;
}
.chara-fukidashi-setsumei-image {
    width: 100%;
    object-fit: cover;
}