@charset "UTF-8";

/*
    記事カード
    Figma: ArticleCard PC 2503:1872 / SP 2503:2225（**両者は同一の体裁**）
           ArticleFeatured PC 2503:1850 / SP 2503:2208（先頭1件のみ。PC と SP で体裁が異なる）

    通常カードはブレークポイントで変わらない。
    先頭記事（--featured）だけが SP / PC で別体裁になる
*/

.lixil-2026 .article-card {
    position: relative;   /* __anchor の擬似要素をカード全面に広げるための基準 */
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/*
    __body / __main は PC の先頭記事（2カラム）専用のラッパー。
    SP では display: contents で透過させ、中の要素を直接 .article-card の
    フレックス項目にする（そうしないと SP で要素間の余白が消える）
*/
.lixil-2026 .article-card__body,
.lixil-2026 .article-card__main {
    display: contents;
}

/* ---- 画像 ---- */

.lixil-2026 .article-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--line-subtle);
}

/* picture は高さが自動で決まらないため、img と両方に指定する */
.lixil-2026 .article-card__image picture {
    display: block;
    width: 100%;
    height: 100%;
}

.lixil-2026 .article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--card-hover-duration), filter var(--card-hover-duration);
}

/* ---- 通し番号（vol.NN） ---- */

.lixil-2026 .article-card__vol {
    display: flex;
    align-items: flex-end;
    color: var(--font-tertiary);
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-black);
}

.lixil-2026 .article-card__vol-label {
    font-size: var(--text-numeral-s-size);
    line-height: 1;
}

.lixil-2026 .article-card__vol-number {
    font-size: var(--text-numeral-m-size);
    line-height: 1;
}

/* ---- メタ行（vol.NN ── カテゴリ） ---- */

.lixil-2026 .article-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.lixil-2026 .article-card__rule {
    flex: 1;
    height: 1px;
    background-color: var(--line-default);
}

.lixil-2026 .article-card__category {
    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 .article-card__date {
    font-family: var(--font-family-en);
    font-size: var(--text-meta-date-size);
    line-height: var(--text-meta-date-lh);
}

/* ---- 本文 ---- */

.lixil-2026 .article-card__title {
    color: var(--font-primary);
    font-size: var(--article-title-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--article-title-lh);
}

.lixil-2026 .article-card__lead {
    color: var(--article-lead-color);
    font-size: var(--article-lead-size);
    line-height: var(--article-lead-lh);
}

/* ---- 下部（日付 + リンク） ---- */

.lixil-2026 .article-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lixil-2026 .article-card__footer .article-card__date {
    color: var(--article-lead-color);
}

.lixil-2026 .article-card__link {
    align-self: flex-start;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--line-default);
    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);
    cursor: pointer;
}

/* ==============================================================
   画面内へ入ったときの段階表示
   画像・vol → ライン → カテゴリ → タイトル → リード文等を .5秒ずつ遅らせる
   ============================================================== */

.lixil-2026.js-reveal-ready [data-js-article-reveal] {
    --article-reveal-duration: .6s;
    --article-reveal-rule-delay: .5s;
    --article-reveal-category-delay: 1s;
    --article-reveal-title-delay: 1s;
    --article-reveal-rest-delay: 1.25s;
    opacity: 1;
    transition: none;
}

.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card__vol,
.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card:not(.article-card--featured) .article-card__category,
.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card--featured .article-card__tags,
.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card__title,
.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card__image,
.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card__lead,
.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card__footer,
.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card--featured .article-card__link {
    opacity: 0;
}

.lixil-2026.js-reveal-ready [data-js-article-reveal] .article-card__rule {
    transform: scaleX(0);
    transform-origin: left center;
}

.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card:not(.article-card--featured) .article-card__category,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card--featured .article-card__tags {
    transition-delay: var(--article-reveal-category-delay), 0s, 0s;
}

.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__title {
    transition-delay: var(--article-reveal-title-delay), 0s, 0s;
}

.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__lead,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__footer,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card--featured .article-card__link {
    transition-delay: var(--article-reveal-rest-delay), 0s, 0s;
}

.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__vol,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card:not(.article-card--featured) .article-card__category,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card--featured .article-card__tags,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__title,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__image,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__lead,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__footer,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card--featured .article-card__link {
    opacity: 1;
    transition-property: opacity, color, border-color;
    transition-duration: var(--article-reveal-duration), var(--card-hover-duration), var(--card-hover-duration);
    transition-timing-function: ease-in-out, var(--card-hover-ease), var(--card-hover-ease);
}

.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card__rule {
    transform: scaleX(1);
    transition: transform var(--article-reveal-duration) ease-in-out var(--article-reveal-rule-delay);
}

/* 大きいカードはラインと Design が無いため、その待ち時間を飛ばす */
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card--featured .article-card__title {
    transition-delay: .5s, 0s, 0s;
}

.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card--featured .article-card__tags,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card--featured .article-card__lead,
.lixil-2026.js-reveal-ready [data-js-article-reveal].is-visible .article-card--featured .article-card__link {
    transition-delay: .75s, 0s, 0s;
}

/* ==============================================================
   カード全体のクリッカブルエリアとホバー
   Figma アノテーション（ArticleCard_pcv2）:
   「画像、タイトル、リード文などを含むエリア全体をクリッカブルエリアとし、
     マウスオーバー時には画像が少し拡大される。（領域のサイズ自体は変更なし）」

   リンクは見出しの中の1本だけにする（読み上げ時の名前が見出しになる）。
   下部の「Read →」はリンクの入れ子になるため span で見た目だけ再現している
   ============================================================== */

.lixil-2026 .article-card__anchor {
    color: inherit;
}

.lixil-2026 .article-card__anchor::after {
    position: absolute;
    inset: 0;
    content: "";
}

.lixil-2026 .article-card:hover .article-card__image img {
    transform: scale(var(--card-hover-scale));
    filter: brightness(var(--card-hover-brightness));
}

.lixil-2026 .article-card:hover .article-card__link {
    border-bottom-color: var(--card-hover-link-color);
    color: var(--card-hover-link-color);
}

/* ホバー時はカード内のテキストをグレーへ揃える */
.lixil-2026 .article-card__vol,
.lixil-2026 .article-card__vol-label,
.lixil-2026 .article-card__vol-number,
.lixil-2026 .article-card__category,
.lixil-2026 .article-card__date,
.lixil-2026 .article-card__date time,
.lixil-2026 .article-card__title,
.lixil-2026 .article-card__anchor,
.lixil-2026 .article-card__lead,
.lixil-2026 .article-card__link {
    transition: color var(--card-hover-duration) var(--card-hover-ease), border-color var(--card-hover-duration) var(--card-hover-ease);
}

.lixil-2026 .article-card:hover .article-card__vol,
.lixil-2026 .article-card:hover .article-card__category,
.lixil-2026 .article-card:hover .article-card__date,
.lixil-2026 .article-card:hover .article-card__title,
.lixil-2026 .article-card:hover .article-card__lead {
    color: var(--card-hover-text-color);
}

/*
    フォーカス位置が擬似要素だと見えないため、カード全体にリングを出す。
    :has() が使える環境でのみ見出しの既定リングを外す（消しっぱなしにしない）
*/
@supports selector(:has(*)) {
    .lixil-2026 .article-card:has(.article-card__anchor:focus-visible) {
        outline: var(--focus-ring-width) solid var(--line-strong);
        outline-offset: var(--focus-ring-offset);
    }

    .lixil-2026 .article-card__anchor:focus-visible {
        outline: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lixil-2026 .article-card__image img {
        transition: none;
    }

    .lixil-2026 .article-card:hover .article-card__image img {
        transform: none;
    }
}

/* ==============================================================
   Coming Soon（公開前）
   Figma: PC 2742:2150 / SP 2742:2347（体裁は PC / SP で同一）

   番号とグレーの「Coming Soon」板だけを残し、他はすべて隠す。
   公開時は article-card--coming-soon を外すだけで実コンテンツに戻る
   ============================================================== */

.lixil-2026 .article-card__coming {
    display: none;
}

.lixil-2026 .article-card--coming-soon .article-card__image,
.lixil-2026 .article-card--image-coming-soon .article-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-muted);
}

.lixil-2026 .article-card--coming-soon .article-card__image img,
.lixil-2026 .article-card--image-coming-soon .article-card__image img {
    display: none;
}

.lixil-2026 .article-card--coming-soon .article-card__image picture,
.lixil-2026 .article-card--image-coming-soon .article-card__image picture {
    display: none;
}

.lixil-2026 .article-card--coming-soon .article-card__coming,
.lixil-2026 .article-card--image-coming-soon .article-card__coming {
    display: block;
    color: var(--font-inverse);
    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);
}

.lixil-2026 .article-card--coming-soon .article-card__rule,
.lixil-2026 .article-card--coming-soon .article-card__category,
.lixil-2026 .article-card--coming-soon .article-card__title,
.lixil-2026 .article-card--coming-soon .article-card__lead,
.lixil-2026 .article-card--coming-soon .article-card__footer {
    display: none;
}

/* ==============================================================
   先頭記事（SP の体裁）
   ============================================================== */

.lixil-2026 .article-card--featured .article-card__vol-label {
    font-size: var(--article-featured-vol-label-size);
}

.lixil-2026 .article-card--featured .article-card__vol-number {
    font-size: var(--article-featured-vol-number-size);
}

.lixil-2026 .article-card--featured .article-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.lixil-2026 .article-card--featured .article-card__tags {
    display: flex;
    gap: var(--space-sm);
    color: var(--font-muted);
    line-height: 1;
}

.lixil-2026 .article-card--featured .article-card__category,
.lixil-2026 .article-card--featured .article-card__date {
    color: inherit;
    line-height: 1;
}

.lixil-2026 .article-card--featured .article-card__title {
    font-size: var(--article-featured-title-size-sp);
    line-height: var(--article-featured-title-lh-sp);
}

.lixil-2026 .article-card--featured .article-card__link {
    margin-top: var(--space-2xs);
    border-bottom-color: var(--line-strong);
    font-size: var(--text-meta-date-size);
    line-height: var(--text-meta-date-lh);
    letter-spacing: var(--article-link-ls);
}

/* ==============================================================
   PC（769px〜）— 先頭記事のみ体裁が変わる（通常カードは共通）
   ============================================================== */
@media (min-width: 769px) {
    .lixil-2026 .article-card--featured {
        gap: 0;
    }

    .lixil-2026 .article-card--featured .article-card__image {
        aspect-ratio: var(--article-featured-ratio);
    }

    .lixil-2026 .article-card--featured .article-card__body {
        display: flex;
        gap: var(--space-4xl);
        align-items: flex-start;
        padding-top: var(--space-3xl);
    }

    .lixil-2026 .article-card--featured .article-card__meta {
        padding-top: var(--space-2xs);
    }

    /* PC は カテゴリと日付を縦に積む */
    .lixil-2026 .article-card--featured .article-card__tags {
        flex-direction: column;
        gap: var(--space-xs);
        color: var(--font-tertiary);
    }

    .lixil-2026 .article-card--featured .article-card__category,
    .lixil-2026 .article-card--featured .article-card__date {
        line-height: var(--text-label-en-lh);
    }

    .lixil-2026 .article-card--featured .article-card__vol-label {
        font-size: var(--text-numeral-m-size);
    }

    .lixil-2026 .article-card--featured .article-card__vol-number {
        font-size: var(--text-numeral-l-size);
    }

    .lixil-2026 .article-card--featured .article-card__main {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: var(--space-lg);
        align-items: flex-start;
    }

    .lixil-2026 .article-card--featured .article-card__title {
        font-size: var(--article-featured-title-size);
        line-height: var(--article-featured-title-lh);
    }

    .lixil-2026 .article-card--featured .article-card__lead {
        max-width: var(--article-featured-lead-width);
        color: var(--font-secondary);
        font-size: var(--text-body-l-size);
        line-height: var(--text-body-l-lh);
    }
}