/**
 * 吹き出し互換CSS タイプ1
 * 旧テーマの吹き出しを表示
 */

/* ========================================
   旧ブロックのリセット
======================================== */
.wp-block-jinr-blocks-fukidashi,
[class*="wp-block-"][class*="-fukidashi"] {
    all: unset;
    display: block;
    margin: 1.5em 0;
}

.o--fukidashi-inner,
[class*="fukidashi-inner"] {
    display: none;
}

/* tuuhan-balloon 吹き出しスタイル */
.tuuhan-balloon {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 1.5em 0;
}

.tuuhan-balloon.balloon-left {
    flex-direction: row;
}

.tuuhan-balloon.balloon-right {
    flex-direction: row-reverse;
}

.tuuhan-balloon .balloon-avatar {
    flex-shrink: 0;
    text-align: center;
}

.tuuhan-balloon .balloon-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.tuuhan-balloon .balloon-name {
    display: block;
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.tuuhan-balloon .balloon-text {
    position: relative;
    /* 色はインラインスタイルで設定 */
    border-radius: 12px;
    padding: 15px 20px;
    max-width: 80%;
    line-height: 1.7;
}

.tuuhan-balloon .balloon-text::before {
    content: '';
    position: absolute;
    top: 15px;
    border: 8px solid transparent;
}

.tuuhan-balloon.balloon-left .balloon-text::before {
    left: -16px;
    /* 色はインラインスタイルで設定 */
}

.tuuhan-balloon.balloon-right .balloon-text::before {
    right: -16px;
    /* 色はインラインスタイルで設定 */
}

.tuuhan-balloon .balloon-text p {
    margin: 0;
}

.tuuhan-balloon .balloon-text p + p {
    margin-top: 0.8em;
}

/* 吹き出し内の画像サイズ制限 */
.tuuhan-balloon .balloon-text img,
.c--fukidashi-contents img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .tuuhan-balloon .balloon-avatar img {
        width: 50px;
        height: 50px;
    }
    .tuuhan-balloon .balloon-text {
        max-width: 100%;
        padding: 12px 15px;
    }
}

/* 吹き出し番号別の色設定 */
.tuuhan-balloon.balloon-1 .balloon-text { background-color: var(--balloon-color-1, #f5f5f5) !important; }
.tuuhan-balloon.balloon-1.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-1, #f5f5f5) !important; }
.tuuhan-balloon.balloon-1.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-1, #f5f5f5) !important; }

.tuuhan-balloon.balloon-2 .balloon-text { background-color: var(--balloon-color-2, #e3f2fd) !important; }
.tuuhan-balloon.balloon-2.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-2, #e3f2fd) !important; }
.tuuhan-balloon.balloon-2.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-2, #e3f2fd) !important; }

.tuuhan-balloon.balloon-3 .balloon-text { background-color: var(--balloon-color-3, #fff3e0) !important; }
.tuuhan-balloon.balloon-3.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-3, #fff3e0) !important; }
.tuuhan-balloon.balloon-3.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-3, #fff3e0) !important; }

.tuuhan-balloon.balloon-4 .balloon-text { background-color: var(--balloon-color-4, #e8f5e9) !important; }
.tuuhan-balloon.balloon-4.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-4, #e8f5e9) !important; }
.tuuhan-balloon.balloon-4.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-4, #e8f5e9) !important; }

.tuuhan-balloon.balloon-5 .balloon-text { background-color: var(--balloon-color-5, #e3f2fd) !important; }
.tuuhan-balloon.balloon-5.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-5, #e3f2fd) !important; }
.tuuhan-balloon.balloon-5.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-5, #e3f2fd) !important; }

.tuuhan-balloon.balloon-6 .balloon-text { background-color: var(--balloon-color-6, #fce4ec) !important; }
.tuuhan-balloon.balloon-6.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-6, #fce4ec) !important; }
.tuuhan-balloon.balloon-6.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-6, #fce4ec) !important; }

.tuuhan-balloon.balloon-7 .balloon-text { background-color: var(--balloon-color-7, #f3e5f5) !important; }
.tuuhan-balloon.balloon-7.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-7, #f3e5f5) !important; }
.tuuhan-balloon.balloon-7.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-7, #f3e5f5) !important; }

.tuuhan-balloon.balloon-8 .balloon-text { background-color: var(--balloon-color-8, #e0f7fa) !important; }
.tuuhan-balloon.balloon-8.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-8, #e0f7fa) !important; }
.tuuhan-balloon.balloon-8.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-8, #e0f7fa) !important; }

.tuuhan-balloon.balloon-9 .balloon-text { background-color: var(--balloon-color-9, #fffde7) !important; }
.tuuhan-balloon.balloon-9.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-9, #fffde7) !important; }
.tuuhan-balloon.balloon-9.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-9, #fffde7) !important; }

.tuuhan-balloon.balloon-10 .balloon-text { background-color: var(--balloon-color-10, #efebe9) !important; }
.tuuhan-balloon.balloon-10.balloon-left .balloon-text::before { border-right-color: var(--balloon-color-10, #efebe9) !important; }
.tuuhan-balloon.balloon-10.balloon-right .balloon-text::before { border-left-color: var(--balloon-color-10, #efebe9) !important; }

/* ========================================
   吹き出し (Fukidashi) - JIN:Rネイティブクラス
======================================== */
.o--jinr-fukidashi {
    display: flex;
    align-items: flex-start;
    margin: 1.5em 0;
    gap: 15px;
}

.o--jinr-fukidashi.d--fukidashi-left {
    flex-direction: row;
}

.o--jinr-fukidashi.d--fukidashi-right {
    flex-direction: row-reverse;
}

.c--fukidashi-img-box {
    flex-shrink: 0;
    text-align: center;
}

.a--fukidashi-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.a--fukidashi-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* JIN:Rの名前要素は非表示(tuuhan-balloonで制御) */
.a--fukidashi-icon-name {
    display: none !important;
}

.c--fukidashi-contents {
    position: relative;
    background: var(--balloon-color, #f5f5f5);
    border-radius: 12px;
    padding: 15px 20px;
    max-width: 80%;
    line-height: 1.7;
}

/* JIN:Rのアイコン番号 -> カスタマイザー色を割り当て */
.o--jinr-fukidashi.d--fukidashi-icon-1,
.o--jinr-fukidashi.d--fukidashi-color-1 { --balloon-color: var(--balloon-color-1, #f5f5f5); }
.o--jinr-fukidashi.d--fukidashi-icon-2,
.o--jinr-fukidashi.d--fukidashi-color-2 { --balloon-color: var(--balloon-color-2, #e3f2fd); }
.o--jinr-fukidashi.d--fukidashi-icon-3,
.o--jinr-fukidashi.d--fukidashi-color-3 { --balloon-color: var(--balloon-color-3, #fff3e0); }
.o--jinr-fukidashi.d--fukidashi-icon-4,
.o--jinr-fukidashi.d--fukidashi-color-4 { --balloon-color: var(--balloon-color-4, #e8f5e9); }
.o--jinr-fukidashi.d--fukidashi-icon-5,
.o--jinr-fukidashi.d--fukidashi-color-5 { --balloon-color: var(--balloon-color-5, #e3f2fd); }
.o--jinr-fukidashi.d--fukidashi-icon-6,
.o--jinr-fukidashi.d--fukidashi-color-6 { --balloon-color: var(--balloon-color-6, #fce4ec); }
.o--jinr-fukidashi.d--fukidashi-icon-7,
.o--jinr-fukidashi.d--fukidashi-color-7 { --balloon-color: var(--balloon-color-7, #f3e5f5); }
.o--jinr-fukidashi.d--fukidashi-icon-8,
.o--jinr-fukidashi.d--fukidashi-color-8 { --balloon-color: var(--balloon-color-8, #e0f7fa); }
.o--jinr-fukidashi.d--fukidashi-icon-9,
.o--jinr-fukidashi.d--fukidashi-color-9 { --balloon-color: var(--balloon-color-9, #fffde7); }
.o--jinr-fukidashi.d--fukidashi-icon-10,
.o--jinr-fukidashi.d--fukidashi-color-10 { --balloon-color: var(--balloon-color-10, #efebe9); }

.d--fukidashi-chat .c--fukidashi-contents::before {
    content: '';
    position: absolute;
    top: 15px;
    border: 8px solid transparent;
}

.d--fukidashi-chat.d--fukidashi-left .c--fukidashi-contents::before {
    left: -16px;
    border-right-color: var(--balloon-color, #f5f5f5);
}

.d--fukidashi-chat.d--fukidashi-right .c--fukidashi-contents::before {
    right: -16px;
    border-left-color: var(--balloon-color, #f5f5f5);
}

/* ========================================
   ボタン (Button)
======================================== */
.o--button-inner {
    margin: 1.5em 0;
}

.o--button-inner.d--button-center {
    text-align: center;
}

.o--button-inner.d--button-left {
    text-align: left;
}

.o--button-inner.d--button-right {
    text-align: right;
}

.o--button-inner a,
.o--button-inner .a--button-hover a {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.d--button-solid a {
    background: var(--primary-color, #667eea);
    color: #fff;
}

.d--button-solid a:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.d--button-outline a {
    background: transparent;
    border: 2px solid var(--primary-color, #667eea);
    color: var(--primary-color, #667eea);
}

.d--button-outline a:hover {
    background: var(--primary-color, #667eea);
    color: #fff;
}

.d--button-arrow a::after {
    content: ' >';
}

/* ========================================
   アイコンボックス (Iconbox)
======================================== */
.b--jinr-block {
    margin: 1.5em 0;
}

.a--jinr-iconbox,
[class*="o--iconbox"] {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    gap: 15px;
}

.a--iconbox-vector,
.a--iconbox-title-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--primary-color, #667eea);
}

.a--heading-iconbox-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color, #667eea);
}

/* ========================================
   プロフィール (Profile)
======================================== */
.b--jinr-profile {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin: 1.5em 0;
}

.o--profile-contents {
    display: flex;
    align-items: center;
    gap: 20px;
}

.a--profile-image {
    flex-shrink: 0;
}

.a--profile-image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.a--profile-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.a--profile-job {
    font-size: 0.85rem;
    color: #666;
    margin-top: 3px;
}

.a--profile-introduction,
.a--profile-text {
    margin-top: 15px;
    line-height: 1.8;
    color: #555;
}

.a--profile-link {
    display: inline-block;
    margin-top: 15px;
    color: var(--primary-color, #667eea);
    font-weight: 500;
}

/* ========================================
   比較表 (Compare)
======================================== */
[class*="b--compare"] {
    overflow-x: auto;
    margin: 1.5em 0;
}

.a--compare-itemname {
    font-weight: 600;
    background: #f5f5f5;
    padding: 10px;
}

.a--compare-maintext {
    padding: 10px;
}

.a--compare-image img {
    max-width: 100%;
    height: auto;
}

/* ========================================
   タイムライン (Timeline)
======================================== */
[class*="jinr-org-tl"] {
    position: relative;
    padding-left: 30px;
    margin: 1.5em 0;
}

[class*="jinr-org-tl"]::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color, #667eea);
}

.a--timeline-step {
    position: relative;
    margin-bottom: 20px;
}

.a--timeline-step::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: var(--primary-color, #667eea);
    border-radius: 50%;
}

.a--timeline-label {
    font-weight: 600;
    color: var(--primary-color, #667eea);
    margin-bottom: 5px;
}

.a--timeline-text {
    line-height: 1.7;
}

/* ========================================
   リッチメニュー (Richmenu)
======================================== */
[class*="richmenu"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 1.5em 0;
}

.a--richmenu-image img {
    width: 100%;
    border-radius: 8px;
}

.a--richmenu-text {
    font-weight: 600;
    margin-top: 10px;
    text-align: center;
}

.a--richmenu-subtext {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
}

/* ========================================
   区切り線 (Kugiri/Sen)
======================================== */
.jinr-kugiri,
.jinr-sen {
    margin: 2em 0;
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
}

/* ========================================
   見出しデザイン (Heading)
======================================== */
.jinr-heading {
    margin: 2em 0 1em;
}

.a--h2rich-maincopy {
    font-size: 1.5rem;
    font-weight: 700;
}

.a--h2rich-subcopy {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

.a--h2rich-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color, #667eea);
    margin-right: 10px;
}

/* ========================================
   アコーディオン (Accordion)
======================================== */
.a--accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.a--accordion-toggle {
    transition: transform 0.3s;
}

.a--acc-question {
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

/* ========================================
   ブログカード (Blogcard)
======================================== */
.a--blogcard-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.a--blogcard-more {
    color: var(--primary-color, #667eea);
    font-size: 0.85rem;
}

.a--blogcard-label {
    display: inline-block;
    padding: 2px 8px;
    background: var(--primary-color, #667eea);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 3px;
    margin-bottom: 5px;
}

/* ========================================
   SNSリンク
======================================== */
.a--sns-item-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    margin: 5px;
}

.a--sns-item-link.d--twitter { background: #1da1f2; }
.a--sns-item-link.d--facebook { background: #1877f2; }
.a--sns-item-link.d--instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.a--sns-item-link.d--youtube { background: #ff0000; }
.a--sns-item-link.d--line { background: #00c300; }

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 768px) {
    .o--jinr-fukidashi {
        flex-direction: column;
    }

    .o--jinr-fukidashi.d--fukidashi-right {
        align-items: flex-end;
    }

    .c--fukidashi-contents {
        max-width: 100%;
    }

    .o--profile-contents {
        flex-direction: column;
        text-align: center;
    }
}