/* Optional legacy boxes, markers, speech and micro-balloon components. */
/* Compatibility layer for rendered Cocoon-era article markup. */
.lani-section-article__content .blank-box,
.lani-section-article__content .information-box,
.lani-section-article__content .question-box,
.lani-section-article__content .alert-box,
.lani-section-article__content .memo-box,
.lani-section-article__content .comment-box,
.lani-section-article__content .common-icon-box,
.lani-section-article__content .is-style-information-box,
.lani-section-article__content .is-style-question-box,
.lani-section-article__content .is-style-alert-box,
.lani-section-article__content .is-style-memo-box {
    background: #f5fbfe;
    border: 1px solid #bcdce9;
    border-radius: 12px;
    margin-block: 1.4em;
    padding: 1em 1.15em;
}
.lani-section-article__content .question-box,
.lani-section-article__content .is-style-question-box {
    background: #f4f8ff;
    border-color: #b9ccec;
}

.lani-section-article__content .alert-box,
.lani-section-article__content .is-style-alert-box {
    background: #fff8f3;
    border-color: #e8c4a8;
}

.lani-section-article__content .blank-box.bb-yellow,
.lani-section-article__content .is-style-memo-box {
    background: #fffcf0;
    border-color: #e5d393;
}

.lani-section-article__content .caption-box,
.lani-section-article__content .label-box,
.lani-section-article__content .tab-caption-box,
.lani-section-article__content .tab-box,
.lani-section-article__content .white-box-2,
.lani-section-article__content .sticky-box,
.lani-section-article__content .sticky {
    background: #fff;
    border: 1px solid #abd3e6;
    border-radius: 12px;
    margin-block: 1.4em;
    overflow: hidden;
}

.lani-section-article__content .sticky-box,
.lani-section-article__content .sticky {
    background: #fffbed;
    border-color: #e4cf83;
    padding: 1em 1.15em;
}

.lani-section-article__content .caption-box-label,
.lani-section-article__content .label-box-label,
.lani-section-article__content .tab-caption-box-label,
.lani-section-article__content .tab-box-label,
.lani-section-article__content .label-box-2,
.lani-section-article__content .sb-label {
    background: #dff2fa;
    color: var(--lani-section-primary-dark);
    display: block;
    font-size: 0.92em;
    font-weight: 800;
    line-height: 1.55;
    padding: 0.62em 1em;
}

.lani-section-article__content .tab-caption-box-label,
.lani-section-article__content .tab-box-label {
    background: var(--lani-section-primary);
    color: #fff;
}

.lani-section-article__content .caption-box-content,
.lani-section-article__content .label-box-content,
.lani-section-article__content .tab-caption-box-content,
.lani-section-article__content .tab-box-content,
.lani-section-article__content .white-box-2-content,
.lani-section-article__content .sb-content {
    padding: 0.85em 1.1em;
}

.lani-section-article__content .caption-box-content > :first-child,
.lani-section-article__content .label-box-content > :first-child,
.lani-section-article__content .tab-caption-box-content > :first-child,
.lani-section-article__content .tab-box-content > :first-child,
.lani-section-article__content .white-box-2-content > :first-child {
    margin-top: 0;
}

.lani-section-article__content .caption-box-content > :last-child,
.lani-section-article__content .label-box-content > :last-child,
.lani-section-article__content .tab-caption-box-content > :last-child,
.lani-section-article__content .tab-box-content > :last-child,
.lani-section-article__content .white-box-2-content > :last-child {
    margin-bottom: 0;
}

.lani-section-article__content .marker,
.lani-section-article__content .marker-under,
.lani-section-article__content .marker-under-blue,
.lani-section-article__content .marker-under-red,
.lani-section-article__content .marker-under-yellow {
    background: linear-gradient(transparent 62%, rgba(131, 234, 241, 0.55) 62%);
    font-weight: inherit;
}

.lani-section-article__content .marker-red,
.lani-section-article__content .marker-under-red {
    background: linear-gradient(transparent 62%, rgba(255, 168, 168, 0.55) 62%);
}

.lani-section-article__content .marker-yellow,
.lani-section-article__content .marker-under-yellow {
    background: linear-gradient(transparent 62%, rgba(255, 229, 126, 0.65) 62%);
}

.lani-section-article__content .speech-wrap {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    margin-block: 1.5em;
}

.lani-section-article__content .speech-person {
    flex: 0 0 72px;
    font-size: 11px;
    text-align: center;
}

.lani-section-article__content .speech-person img,
.lani-section-article__content .speech-icon img {
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.lani-section-article__content .speech-balloon {
    background: #f1f9fc;
    border: 1px solid #bcdce9;
    border-radius: 14px;
    flex: 1;
    min-width: 0;
    padding: 0.9em 1.05em;
}

.lani-section-article__content .speech-balloon > :first-child {
    margin-top: 0;
}

.lani-section-article__content .speech-balloon > :last-child {
    margin-bottom: 0;
}

.lani-section-article__content .micro-balloon {
    align-items: center;
    background: #eff9fd;
    border: 1px solid #acd7e9;
    border-radius: 999px;
    color: var(--lani-section-primary-dark);
    display: flex;
    font-size: 0.9em;
    font-weight: 800;
    justify-content: center;
    margin: 1em auto;
    max-width: 520px;
    padding: 0.55em 1em;
    text-align: center;
}

.lani-section-article__content .micro-balloon-icon::before,
.lani-section-article__content .micro-icon::before {
    content: "✓";
    display: inline-block;
    font-family: inherit;
    margin-right: 0.4em;
}

@media (max-width: 680px) {
    .lani-section-article__content .speech-wrap {
        gap: 10px;
    }

    .lani-section-article__content .speech-person {
        flex-basis: 58px;
    }
}