/* ----------------------------------------------------------------             
  kimoota.net 吹き出し専用スタイル (H/2最適化版)
----------------------------------------------------------------- */

/* 全体コンテナ */
.speech-wrap {
    display: flex;
    align-items: flex-start; 
    margin-bottom: 3em;
    gap: 20px;
    width: 100%;
}

/* 配置の逆転 */
.speech-wrap.sbp-r {
    flex-direction: row-reverse;
}

/* アイコン側 */
.speech-person {
    width: 150px;
    min-width: 150px;
    flex-shrink: 0;
}

.speech-person img {
    width: 100%;
    height: auto;
    display: block;
}

/* 吹き出し本体 */
.speech-balloon {
    position: relative;
    margin-top: 55px; 
    padding: 20px 25px;
    width: 70%; 
    background: #2a2a2a; /* フロント背景：黒系 */
    border: 2px solid #fa8072; 
    border-radius: 12px;
    min-height: 50px; 
}

/* 吹き出し内のテキスト */
.speech-balloon p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6;
    color: #eeeeee; /* フロント文字：白系 */
    text-align: left;
}

/* キャラ名は完全非表示 */
.speech-name {
    display: none !important;
}

/* --- しっぽの設定 --- */
.speech-balloon::before,
.speech-balloon::after {
    content: "";
    position: absolute;
    top: 40px;
}

/* 左画像用 (sbp-l) */
.sbp-l .speech-balloon::before {
    left: -14px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 14px solid #fa8072;
}
.sbp-l .speech-balloon::after {
    left: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 12px solid #2a2a2a;
}

/* 右画像用 (sbp-r) */
.sbp-r .speech-balloon::before {
    right: -14px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 14px solid #fa8072;
}
.sbp-r .speech-balloon::after {
    right: -10px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 12px solid #2a2a2a;
}

/* ----------------------------------------------------------------             
  Visual Editor (TinyMCE) 専用調整：文字が見えない問題を解決
----------------------------------------------------------------- */
/* --- エディタ内での視認性確保 --- */
.mce-content-body .speech-balloon {
    background: #ffffff !important; /* エディタ内は白背景 */
}
.mce-content-body .speech-balloon p {
    color: #333333 !important; /* エディタ内は黒文字 */
}
.mce-content-body .sbp-l .speech-balloon::after { border-right-color: #ffffff !important; }
.mce-content-body .sbp-r .speech-balloon::after { border-left-color: #ffffff !important; }

/* モバイル100x100設定 */
@media screen and (max-width: 1080px) {
    .speech-person, .speech-person img {
        width: 100px !important;
        height: 100px !important;
    }
}

/* ----------------------------------------------------------------             
  モバイル対応 (1080px以下)
----------------------------------------------------------------- */
@media screen and (max-width: 1080px) {
    .speech-person {
        width: 100px !important;
        min-width: 100px !important;
    }
    .speech-person img {
        width: 100px !important;
        height: 100px !important;
        object-fit: cover;
    }
    .speech-balloon {
        margin-top: 35px !important;
    }
    .speech-balloon::before,
    .speech-balloon::after {
        top: 20px; /* しっぽの位置もモバイル用に調整 */
    }
}