/* Floating Testimonials Bubbles 1.5.0 */

/* ベース吹き出し */
.ftb-bubble {
    position: fixed;
    z-index: 9999;
    max-width: 320px;
    padding: 10px 14px 10px 14px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 8px 24px rgba(0,0,0,0.16);
    color: #444;
    opacity: 0;
    pointer-events: auto;
    animation: ftb-fade-in 0.4s forwards, ftb-float 4s ease-in-out infinite;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    background: #ffffff;
}

/* タイトル */
.ftb-label {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}

/* 位置クラス */
.ftb-left { left: 24px; }
.ftb-right { right: 24px; }
.ftb-center { left: 50%; transform: translateX(-50%); }

/* 本文・名前 */
.ftb-content { word-wrap: break-word; }
.ftb-name {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.85em;
    color: #888;
}

/* テーマ本体 */
.ftb-theme-yellow { background: #fff8c4; color: #444; }
.ftb-theme-white  { background: #ffffff; color: #333; }
.ftb-theme-dark   { background: #222222; color: #f7f7f7; }
.ftb-theme-outline{
    background: #ffffff;
    border: 2px solid #ffcc33;
    color: #333;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.ftb-theme-dark .ftb-name { color: #bbbbbb; }

/* しっぽ（基本形） */
.ftb-bubble::after {
    content: "";
    position: absolute;
    bottom: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0 8px;
    border-color: transparent;
}
.ftb-left::after   { left: 26px; }
.ftb-right::after  { right: 26px; }
.ftb-center::after { left: 50%; transform: translateX(-50%); }

/* テーマ別のしっぽ色 */
.ftb-theme-yellow::after { border-top-color: #fff8c4; }
.ftb-theme-white::after  { border-top-color: #ffffff; }
.ftb-theme-dark::after   { border-top-color: #222222; }
.ftb-theme-outline::after{ border-top-color: #ffffff; }

/* アウトライン用しっぽ枠 (before: 枠線 / after: 中身) */
.ftb-theme-outline::before {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #ffcc33 transparent transparent transparent;
}
.ftb-theme-outline.ftb-left::before   { left: 24px; }
.ftb-theme-outline.ftb-right::before  { right: 24px; }
.ftb-theme-outline.ftb-center::before {
    left: 50%;
    transform: translateX(-50%);
}

/* 閉じるボタン */
.ftb-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    background: rgba(0,0,0,0.08);
    color: #555;
    padding: 0;
}
.ftb-theme-dark .ftb-close {
    background: rgba(255,255,255,0.16);
    color: #f7f7f7;
}
.ftb-close:hover {
    background: rgba(0,0,0,0.2);
}

/* アニメーション */
@keyframes ftb-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ftb-float {
    0% { transform: translateY(0); }
    50%{ transform: translateY(-6px); }
    100%{ transform: translateY(0); }
}

/* スマホ調整 */
@media (max-width: 767px) {
    .ftb-bubble {
        max-width: 260px;
        padding: 8px 10px 8px 10px;
    }
}