@charset "UTF-8";

/*
    最新ムービー
    Figma: PC 2503:2061（Movie_TOP）/ SP 2503:2373（Movie_TOP (SP)）

    PC は2カラム（左テキスト・右動画）、SP は1カラムで
    ラベル → 見出し → 動画 → 本文 の順。
    DOM は SP の視覚順に合わせ、PC はグリッドで配置を変える
    （.movie-top__text は display: contents で子を直接フレックス項目にする）
*/

.lixil-2026 .movie-top {
    background-color: var(--bg-surface);
}

.lixil-2026 .movie-top__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--layout-section-py) var(--layout-page-margin);
}

.lixil-2026 .movie-top__text {
    display: contents;
}

.lixil-2026 .movie-top__label {
    order: 1;
    color: var(--font-tertiary);
    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 .movie-top__title {
    order: 2;
    color: var(--font-primary);
    font-size: var(--movie-top-title-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--movie-top-title-lh);
}

.lixil-2026 .movie-top__video {
    order: 3;
}

.lixil-2026 .movie-top__body {
    order: 4;
    color: var(--font-tertiary);
    font-size: var(--text-body-m-size);
    line-height: var(--text-body-m-lh);
}

/* ---- 画面内へ入ったときの段階表示 ---- */

.lixil-2026.js-reveal-ready [data-js-movie-top-reveal] {
    opacity: 1;
    transition: none;
}

.lixil-2026.js-reveal-ready [data-js-movie-top-reveal] .movie-top__label,
.lixil-2026.js-reveal-ready [data-js-movie-top-reveal] .movie-top__title,
.lixil-2026.js-reveal-ready [data-js-movie-top-reveal] .movie-top__video,
.lixil-2026.js-reveal-ready [data-js-movie-top-reveal] .movie-top__body {
    opacity: 0;
}

.lixil-2026.js-reveal-ready [data-js-movie-top-reveal].is-visible .movie-top__label,
.lixil-2026.js-reveal-ready [data-js-movie-top-reveal].is-visible .movie-top__title,
.lixil-2026.js-reveal-ready [data-js-movie-top-reveal].is-visible .movie-top__video {
    opacity: 1;
    transition: opacity .6s ease-in-out .5s;
}

.lixil-2026.js-reveal-ready [data-js-movie-top-reveal].is-visible .movie-top__body {
    opacity: 1;
    transition: opacity .6s ease-in-out 1s;
}

/* ==============================================================
   PC（769px〜）
   ============================================================== */
@media (min-width: 769px) {
    .lixil-2026 .movie-top {
        border-bottom: 1px solid var(--line-subtle);
    }

    .lixil-2026 .movie-top__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-5xl);
        align-items: center;
        max-width: var(--content-max-width);
        margin-right: auto;
        margin-left: auto;
        padding: var(--space-5xl) var(--space-4xl);
    }

    /* 左カラム：ラベル・見出し・本文を1つの塊として縦に積む */
    .lixil-2026 .movie-top__text {
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
        grid-column: 1;
    }

    .lixil-2026 .movie-top__label {
        /* PC のみ font-muted。SP は font-tertiary（Figma のとおり） */
        color: var(--font-muted);
    }

    .lixil-2026 .movie-top__title {
        font-size: var(--text-title-l-size);
        line-height: var(--text-title-l-lh);
    }

    .lixil-2026 .movie-top__video {
        grid-column: 2;
    }
}