@charset "UTF-8";

/*
    ヒーロー（ファーストビュー）
    Figma: PC 2515:3616（Hero Carousel_v2）/ SP 2605:867（Hero Carousel_SP）

    4スライドのクロスフェード。切り替わるのは背景画像だけで、
    見出し・記事ヘッダー・インジケータは4枚とも共通（プロトタイプで確認）。
    記事ヘッダーもこのセクションの内側に入る（新デザインで統合された）
*/

.lixil-2026 .hero {
    --hero-intro-delay: .2s;
    --hero-intro-duration: 1s;
    --hero-intro-title-delay: calc(var(--hero-intro-delay) + .5s);
    --hero-intro-detail-delay: calc(var(--hero-intro-delay) + 1s);
    --hero-intro-scroll-delay: calc(var(--hero-intro-delay) + 1.5s);
    position: relative;
    height: var(--hero-height);
    overflow: hidden;
    background-color: var(--bg-white);
    color: var(--font-inverse);
}

/* ---- スライド（背景画像を重ねてクロスフェード） ---- */

.lixil-2026 .hero__slides {
    position: absolute;
    inset: 0;
    opacity: var(--hero-image-opacity);
    animation: lixil-hero-image-in var(--hero-intro-duration) ease-in-out var(--hero-intro-delay) both;
}

@keyframes lixil-hero-image-in {
    from {
        opacity: 0;
    }

    to {
        opacity: var(--hero-image-opacity);
    }
}

.lixil-2026 .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--carousel-fade-duration) ease-in-out;
}

/*
    JS が無い場合は1枚目だけを表示する（白紙にしない）。
    JS が起動すると .hero に is-carousel-ready が付き、以降は is-current で制御する
*/
.lixil-2026 .hero__slide:first-child {
    opacity: 1;
}

.lixil-2026 .hero.is-carousel-ready .hero__slide {
    opacity: 0;
}

.lixil-2026 .hero.is-carousel-ready .hero__slide.is-current {
    opacity: 1;
}

.lixil-2026 .hero__slide picture,
.lixil-2026 .hero__slide img {
    display: block;
    width: 100%;
    height: 100%;
}

.lixil-2026 .hero__slide img {
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .lixil-2026 .hero__slides,
    .lixil-2026 .hero__eyebrow,
    .lixil-2026 .hero__title,
    .lixil-2026 .hero__subtitle,
    .lixil-2026 .hero__lead,
    .lixil-2026 .hero__indicator,
    .lixil-2026 .hero__overlay,
    .lixil-2026 .hero__scroll,
    .lixil-2026 .hero__slide,
    .lixil-2026 .hero__bar {
        animation: none;
        transition: none;
    }
}

.lixil-2026 .hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay);
    animation: lixil-hero-content-in var(--hero-intro-duration) ease-in-out var(--hero-intro-delay) both;
}

/*
    ---- 内側フレーム ----
    Figma のカンバス幅（1280px）に相当する枠。中の要素はこの枠を基準に絶対配置する
*/

.lixil-2026 .hero__inner {
    position: absolute;
    inset: 0;
    max-width: var(--hero-frame-width);
    margin-right: auto;
    margin-left: auto;
}

/* ---- テキスト ---- */

.lixil-2026 .hero__text {
    position: absolute;
    top: auto;
    right: var(--hero-inline-padding);
    bottom: 92px; /* ユーザー指定 */
    left: var(--hero-inline-padding);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lixil-2026 .hero__eyebrow {
    font-size: var(--text-title-l-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-title-l-lh);
}

.lixil-2026 .hero__title {
    font-size: var(--hero-title-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--hero-title-lh);
}

.lixil-2026 .hero__subtitle {
    font-size: var(--hero-subtitle-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--hero-subtitle-lh);
}

.lixil-2026 .hero__lead {
    font-size: var(--hero-lead-size);
    line-height: var(--hero-lead-lh);
}

.lixil-2026 .hero__lead-break--pc {
    display: none;
}

.lixil-2026 .hero__eyebrow,
.lixil-2026 .hero__title {
    animation: lixil-hero-content-in var(--hero-intro-duration) ease-in-out var(--hero-intro-title-delay) both;
}

.lixil-2026 .hero__subtitle,
.lixil-2026 .hero__lead,
.lixil-2026 .hero__indicator {
    animation: lixil-hero-content-in var(--hero-intro-duration) ease-in-out var(--hero-intro-detail-delay) both;
}

@keyframes lixil-hero-content-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---- スライドインジケータ ---- */

.lixil-2026 .hero__indicator {
    position: absolute;
    top: 200px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.lixil-2026 .hero__indicator-count {
    width: 42px;
    font-family: var(--font-family-en);
    font-size: var(--font-size-2xs);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: var(--text-label-en-ls);
    text-align: center;
    white-space: nowrap;
}

.lixil-2026 .hero__bars {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

/* 縦棒はスライドを直接選べるボタン。タップ領域を確保しつつ見た目は2pxの線 */
.lixil-2026 .hero__bar {
    position: relative;
    display: block;
    width: var(--hero-bar-hit);
    height: var(--hero-bar-height);
}

.lixil-2026 .hero.is-carousel-ready .hero__bar {
    transition: height var(--carousel-fade-duration) ease-in-out;
}

.lixil-2026 .hero__bar::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--hero-bar-width);
    height: 100%;
    background-color: var(--bg-white);
    transform: translateX(-50%);
    content: "";
}

.lixil-2026 .hero__bar.is-current {
    height: var(--hero-bar-height-current);
}

/* ---- スクロール誘導 ---- */

.lixil-2026 .hero__scroll {
    position: absolute;
    top: 605px;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* SP: SCROLL ラベルと矢印の間 */
    transform: translateX(-50%);
    animation: lixil-hero-content-in var(--hero-intro-duration) ease-in-out var(--hero-intro-scroll-delay) both;
}

.lixil-2026 .hero__scroll-label {
    display: block;
    flex: none;
    width: 41px;
    height: 6px;
}

.lixil-2026 .hero__scroll-arrow {
    display: block;
    flex: none;
    width: 7px;
    height: 13px;
}

/* ==============================================================
   PC（769px〜）— 見た目固定。カンバス幅 1280px を基準にする
   ============================================================== */
@media (min-width: 769px) {
    .lixil-2026 .hero__text {
        top: auto;
        right: auto;
        bottom: 144px;
        left: var(--hero-inline-padding);
        gap: 0;
        width: 450px;
        max-width: 560px;
    }

    .lixil-2026 .hero__title {
        padding-bottom: var(--space-2xs);
    }

    .lixil-2026 .hero__subtitle {
        padding-top: var(--space-lg);
    }

    .lixil-2026 .hero__lead {
        max-width: 460px;
        padding-top: var(--space-2xl);
    }

    .lixil-2026 .hero__lead-break--pc {
        display: initial;
    }

    .lixil-2026 .hero__lead-nowrap--pc {
        white-space: nowrap;
    }

    .lixil-2026 .hero__indicator {
        top: auto;
        right: var(--hero-inline-padding);
        bottom: 144px;
        gap: var(--space-sm);
        padding-bottom: var(--space-2xs);
    }

    .lixil-2026 .hero__indicator-count {
        font-size: var(--text-caption-size);
        line-height: var(--text-caption-lh);
        letter-spacing: var(--text-caption-ls);
        padding-bottom: var(--space-xs);
    }

    .lixil-2026 .hero__scroll {
        top: auto;
        bottom: var(--space-4xl);
        gap: var(--space-lg); /* PC: SCROLL ラベルと矢印の間 20px */
    }

}