@charset "UTF-8";

/*
    記事ヘッダー（Sponsored by + Pen ロゴ）
    Figma: PC 2503:2104 / SP 2503:2148（SP は FV フレームの内側にある）

    新デザインでヒーローの内側に統合された。
    .hero を基準に絶対配置し、画像の上に重ねる。文字・ロゴはすべて白（font-inverse）
*/

.lixil-2026 .article-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-header);
    width: 100%;
    color: var(--font-inverse);
}

.lixil-2026 .article-header__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-right: auto;
    margin-left: auto;
    padding: var(--space-lg) var(--space-lg) 0;
}

.lixil-2026 .article-header__sponsor {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-family: var(--font-family-en);
    font-size: var(--text-label-en-size);
    line-height: var(--text-label-en-lh);
    letter-spacing: var(--text-label-en-ls);
}

.lixil-2026 .article-header__sponsor-logo {
    width: 58.636px;
    height: 20px;
}

.lixil-2026 .article-header__pen {
    display: block;
    width: 77px;
    height: 40px;
}

.lixil-2026 .article-header__pen img {
    width: 100%;
    height: 100%;
}

@media (min-width: 769px) {
    .lixil-2026 .article-header__inner {
        max-width: var(--hero-frame-width);
        padding: var(--space-2xl) var(--space-2xl) var(--space-4xl) var(--space-4xl);
    }

    .lixil-2026 .article-header__sponsor {
        gap: var(--space-lg);
    }

    .lixil-2026 .article-header__sponsor-logo {
        width: 70.363px;
        height: 24px;
    }

    .lixil-2026 .article-header__pen {
        width: 173px;
        height: 90px;
    }
}