@charset "UTF-8";

/*
    動画埋め込み枠（YouTube）
    Figma: Movie_TOP の Video（PC 476×268 / SP 335×188 = いずれも 16:9）

    背景動画以外の公開済み動画は、YouTube標準プレイヤーを直接埋め込む。
    iframeはHTML側で遅延読み込みし、16:9の枠内に表示する。

    公開前の動画は video-embed--coming-soon。埋め込みを持たないため button ではなく div。
    ※ YouTube の動画 ID は仮（2VLI7LDsqtg）。実 ID が支給されたら差し替える
*/

.lixil-2026 .video-embed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--bg-muted);
    color: var(--font-inverse);
}

/* button で使うときの既定スタイルの打ち消し */
.lixil-2026 button.video-embed {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
}

/* 枠の外に出すと隣のカードに重なるため、内側にオフセットする */
.lixil-2026 button.video-embed:focus-visible {
    outline: var(--focus-ring-width) solid var(--font-inverse);
    outline-offset: calc(var(--focus-ring-offset) * -1);
}

.lixil-2026 .video-embed__play {
    font-size: var(--video-play-size);
    line-height: 1;
    opacity: var(--video-play-opacity);
}

.lixil-2026 button.video-embed:hover .video-embed__play {
    opacity: 1;
}

/* ---- Coming Soon（公開前）: Figma PC 2742:2235 / SP 2742:2320 ---- */

.lixil-2026 .video-embed__coming {
    font-family: var(--font-family-en);
    font-size: var(--text-numeral-s-size);
    font-weight: var(--font-weight-black);
    line-height: var(--text-numeral-s-lh);
}

/* 再生後に差し込まれる iframe */
.lixil-2026 .video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}