@charset "UTF-8";

/*
    セクション見出しラベル（英字ラベル + 件数 + 和文タイトル）
    Figma: Articles の SectionLabel（2503:1846）

    PC は1行に横並びで下線付き。SP は英字と和文を2段に分ける
*/

.lixil-2026 .section-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lixil-2026 .section-label__meta {
    display: flex;
    gap: var(--space-sm);
    font-family: var(--font-family-en);
    font-size: var(--text-eyebrow-l-size);
    line-height: var(--text-eyebrow-l-lh);
    letter-spacing: var(--text-eyebrow-l-ls);
}

.lixil-2026 .section-label__en {
    color: var(--font-primary);
}

.lixil-2026 .section-label__count {
    color: var(--font-tertiary);
}

.lixil-2026 .section-label__title {
    color: var(--font-secondary);
    font-size: var(--text-title-m-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-title-m-lh);
}

/* 濃い背景のセクション用 */
.lixil-2026 .section-label--on-dark .section-label__en {
    color: var(--font-inverse);
}

.lixil-2026 .section-label--on-dark .section-label__count {
    color: var(--font-secondary);
}

.lixil-2026 .section-label--on-dark .section-label__title {
    color: var(--font-tertiary);
    font-size: var(--text-title-s-size);
    line-height: var(--text-title-s-lh);
}

@media (min-width: 769px) {
    .lixil-2026 .section-label {
        flex-direction: row;
        align-items: baseline;
        gap: 0;
        padding-bottom: var(--section-label-pb);
        border-bottom: 1px solid var(--line-strong);
    }

    .lixil-2026 .articles .section-label {
        position: relative;
        border-bottom: 0;
    }

    .lixil-2026 .articles .section-label::after {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        background-color: var(--line-strong);
        content: "";
        transform: scaleX(1);
        transform-origin: left center;
    }

    .lixil-2026.js-reveal-ready .articles .section-label::after {
        transform: scaleX(0);
    }

    .lixil-2026.js-reveal-ready .articles .section-label.is-visible::after {
        transition: transform 1.2s ease-in-out;
        transform: scaleX(1);
    }

    .lixil-2026 .section-label__meta {
        gap: var(--section-label-gap);
    }

    .lixil-2026 .section-label__title {
        margin-left: var(--section-label-title-gap);
    }

    .lixil-2026 .section-label--on-dark .section-label__title {
        font-size: var(--text-title-m-size);
        line-height: var(--text-title-m-lh);
    }
}