@charset "UTF-8";

/*
    デザイントークン
    出典: Figma Variables（docs/design-tokens.md / 取得日 2026-08-10）

    - テンプレート共通領域のルート文字サイズへ依存しないよう、寸法は px で保持
    - PC / SP でモードによる値の切り替えは無い。layout のみ PC で上書きする
*/

.lixil-2026 {
    /* ==========================================================
       色
       ※ 濃背景専用 / 明背景専用の住み分けがある。
         font-tertiary・font-muted を明るい背景の小さい文字に使うと
         コントラスト比が不足する（docs/design-tokens.md 要判断 #5）
       ========================================================== */
    --font-primary: #1a1a1a;
    --font-secondary: #444444;
    --font-tertiary: #888888;
    --font-muted: #bbbbbb;
    --font-inverse: #ffffff;

    --line-strong: #1a1a1a;
    --line-default: #cccccc;
    --line-subtle: #e8e6e2;

    --bg-dark: #1a1a1a;
    --bg-white: #ffffff;
    --bg-surface: #f4f2ef;
    --bg-muted: #e8e6e2;

    --lixil-gray: #3c3b38;

    /* ==========================================================
       フォントファミリー
       欧文 Inter は規約のサイト標準（Lato）からの逸脱。
       差し替えられるようここ1箇所に集約する（確認シート #4）
       ========================================================== */
    --font-family-en: "Inter", sans-serif;
    --font-family-ja: "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, 游ゴシック体, "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;
    --font-family-base: "YakuHanJPs", var(--font-family-en), var(--font-family-ja);

    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* ==========================================================
       タイポグラフィ（size / line-height / letter-spacing の3点セット）
       family と weight はコンポーネント側で指定する
       ========================================================== */

    /* Caption — Inter 400 / 8px */
    --text-caption-size: 8px;
    --text-caption-lh: 1.5;
    --text-caption-ls: .25em;

    /* Label/EN — Inter 400 / 9px */
    --text-label-en-size: 9px;
    --text-label-en-lh: 1.556;
    --text-label-en-ls: .111em;

    /* Meta/Date — Inter 400 / 10px */
    --text-meta-date-size: 10px;
    --text-meta-date-lh: 1.5;
    --text-meta-date-ls: 0;

    /* Eyebrow/L — Inter 400 / 11px */
    --text-eyebrow-l-size: 11px;
    --text-eyebrow-l-lh: 1.455;
    --text-eyebrow-l-ls: .273em;

    /* Numeral/S — Inter 900 / 15px */
    --text-numeral-s-size: 15px;
    --text-numeral-s-lh: 1;
    --text-numeral-s-ls: 0;

    /* Numeral/M — Inter 900 / 22px */
    --text-numeral-m-size: 22px;
    --text-numeral-m-lh: 1;
    --text-numeral-m-ls: 0;

    /* Numeral/L — Inter 900 / 36px */
    --text-numeral-l-size: 36px;
    --text-numeral-l-lh: 1;
    --text-numeral-l-ls: 0;

    /* Body/S — Noto Sans JP 400 / 12px */
    --text-body-s-size: 12px;
    --text-body-s-lh: 2;
    --text-body-s-ls: 0;

    /* Body/M — Noto Sans JP 400 / 13px */
    --text-body-m-size: 13px;
    --text-body-m-lh: 2;
    --text-body-m-ls: 0;

    /* Body/L — Noto Sans JP 400 / 14px */
    --text-body-l-size: 14px;
    --text-body-l-lh: 2.071;
    --text-body-l-ls: 0;

    /* Title/S — Noto Sans JP 700 / 13px */
    --text-title-s-size: 13px;
    --text-title-s-lh: 1.692;
    --text-title-s-ls: 0;

    /* Title/M — Noto Sans JP 700 / 15px */
    --text-title-m-size: 15px;
    --text-title-m-lh: 1.533;
    --text-title-m-ls: 0;

    /* Title/L — Noto Sans JP 700 / 20px */
    --text-title-l-size: 20px;
    --text-title-l-lh: 1.7;
    --text-title-l-ls: 0;

    /* 単独のフォントサイズ（Figma の font-size コレクション。SP で使用） */
    --font-size-2xs: 9px;
    --font-size-xs: 11px;
    --font-size-md: 15px;

    /* ==========================================================
       スペース
       ========================================================== */
    --space-none: 0;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 64px;
    --space-5xl: 80px;
    --space-6xl: 120px;

    /* ==========================================================
       レイアウト
       ========================================================== */
    --layout-page-margin: 20px;   /* SP: 20px */
    --layout-section-py: 56px;  /* SP: 56px */
    --layout-item-gap: 32px;    /* SP: 32px */
    --content-max-width: 1160px;  /* 構造的な固定値のため px */

    /* ==========================================================
       z-index
       ========================================================== */
    --z-header: 100;

    /* ==========================================================
       モーション
       ========================================================== */
    --carousel-interval: 4000ms;
    --carousel-fade-duration: 800ms;
}

/* ==============================================================
   暫定トークン
   Figma Variables に未登録の生値。docs/design-tokens.md の
   「未定義トークン」に記録済み。デザイナー確認後に正規化する
   ============================================================== */
.lixil-2026 {
    /* ヒーロー（Variables 未登録） */
    --hero-height: 665px;              /* 暫定: SP 665px 実測 */
    --hero-frame-width: 1280px;          /* 暫定: PC カンバス幅 */
    --hero-inline-padding: var(--space-lg);
    --hero-title-size: 26px;           /* 暫定: SP 26px 実測 */
    --hero-title-lh: 1.5;                /* 暫定 */
    --hero-subtitle-size: 13px;        /* 暫定: SP 13px 実測 */
    --hero-subtitle-lh: 1.5;             /* 暫定 */
    --hero-lead-size: var(--font-size-xs);  /* SP 11px = font-size/xs */
    --hero-lead-lh: 1.7;                 /* 暫定 */
    --hero-image-opacity: 1;             /* SP は不透明 */
    /* 暫定: 上→下のグラデーション。中間 50% まで 0.1 で一定 */
    --hero-overlay: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .75) 100%);
    --hero-bar-width: 2px;               /* 暫定: インジケータの縦棒 */
    --hero-bar-hit: 24px;              /* 暫定: 縦棒ボタンのタップ領域（見た目は2px） */
    --hero-bar-height: 14px;           /* 暫定: 非選択 14px */
    --hero-bar-height-current: 32px;   /* 暫定: 選択中 32px */

    /* 最新ムービー（Variables 未登録） */
    --movie-top-title-size: 22px;      /* 暫定: SP 22px 実測 */
    --movie-top-title-lh: 1.818;         /* 暫定: 40 / 22 */

    /* 動画埋め込み枠（Variables 未登録） */
    --video-play-size: 26px;           /* 暫定: ▶ 26px 実測 */
    --video-play-opacity: .85;           /* 暫定 */

    /* セクションラベル（Variables 未登録） */
    --section-label-gap: 36px;         /* 暫定: PC「Articles」と「7 items」の間 */
    --section-label-title-gap: 5px;    /* 暫定: 「7 items」と和文タイトルの間 */
    --section-label-pb: 21px;          /* 暫定: PC の下余白。Figma の SectionLabel h44 = テキスト23 + 21 */

    /* 記事カード（Variables 未登録） */
    --article-title-size: 17px;        /* 暫定: 通常カード 17px（PC/SP 共通） */
    --article-title-lh: 1.765;           /* 暫定: 30 / 17 */
    --article-featured-vol-label-size: 19px;  /* 暫定: SP 先頭記事「vol.」19px */
    --article-featured-vol-number-size: 28px; /* 暫定: SP 先頭記事 数字 28px */
    --article-featured-title-size-sp: 20px;     /* 暫定: SP 先頭記事 20px */
    --article-featured-title-lh-sp: 1.5;        /* 暫定 */
    --article-lead-size: 12px;         /* 暫定: 12px */
    --article-lead-lh: 1.7;              /* 暫定 */
    --article-lead-color: #666666;       /* 暫定: Variables 未登録の生値 */
    --article-link-ls: .22em;            /* 暫定: 2.2px / 10px */
    --article-featured-ratio: 1032 / 452;   /* 暫定: PC 先頭記事の画像比 */
    --article-featured-title-size: 30px;    /* 暫定: PC 30px */
    --article-featured-title-lh: 1.667;     /* 暫定: 50 / 30 */
    --article-featured-lead-width: 560px;   /* 暫定: 560px */

    /* ムービー一覧（Variables 未登録） */
    --movies-vol-offset: 3px;            /* 暫定: vol.NN の上寄せ 3px */
    --movies-row-gap: 48px;            /* 暫定: PC の行間 48px（space スケールに無い） */

    /* 記事一覧の背景動画（Variables 未登録） */
    --articles-bg-opacity: .35;          /* 暫定: Figma の見え方に合わせた実測推定。要デザイナー確認 */

    /* FROM LIXIL（Variables 未登録） */
    --from-lixil-logo-width: 76.226px;      /* 暫定: SP 76.226px */
    --from-lixil-logo-height: 26px;        /* 暫定: SP 26px */
    --from-lixil-card-width: 500px;          /* 暫定: PC 500px */
    --from-lixil-card-gap: 32px;           /* 暫定: PC のカード間隔 32px */
    --from-lixil-card-image-height: 220px;   /* 暫定: 220px（PC/SP 共通） */

    /* ページフッター（Variables 未登録） */
    --page-footer-bg: #bbbbbb;             /* PC_TOP.png 実測: フッター背景 */
    --page-footer-height: 74px;            /* 暫定: SP 74px */
    --page-footer-logo-width: 50px;          /* 暫定: 50px */
    --page-footer-logo-height: 26px;       /* 暫定: 26px */

    /* ホバー（Variables 未登録） */
    --opacity-hover: .7;                 /* 暫定 */
    /*
        カード全体クリック時のサムネイル拡大。
        Figma のアノテーションは「マウスオーバー時には画像が少し拡大される
        （領域のサイズ自体は変更なし）」で、倍率・時間の指定が無い。
        後から変更依頼が来る前提でここ1箇所にまとめる（要デザイナー確認）
    */
    --card-hover-scale: 1.05;            /* 暫定: Figma 未指定 */
    --card-hover-duration: 400ms;        /* 暫定: Figma 未指定 */
    --card-hover-ease: ease-out;         /* テキスト色変化のeasing（2026-08-20 ユーザー指示で ease から変更） */
    --card-hover-brightness: .9;         /* 実測: ホバー中と通常時のキャプチャ比較で平均RGB比 0.900/0.903/0.904 */
    --card-hover-text-color: var(--font-tertiary);  /* 実測: ホバー中キャプチャの本文・タイトルが #888888 */
    --card-hover-link-color: var(--font-primary);   /* 実測: ホバー中キャプチャの View site → 下線が2行に分かれ140/141＝(255+26)/2 で #1a1a1a */

    /* フォーカスリング（Figma にフォーカス状態の指定が無いため暫定） */
    --focus-ring-width: 2px;             /* 暫定: Figma 未指定 */
    --focus-ring-offset: 4px;            /* 暫定: Figma 未指定 */
}

/* PC（769px〜） */
@media (min-width: 769px) {
    .lixil-2026 {
        /* 暫定: Figma で Variables 未バインドのため実測値。確認シート #1 */
        --layout-page-margin: 60px;      /* PC: 60px */

        --hero-height: 839px;          /* 暫定: PC 839px 実測 */
        --hero-inline-padding: var(--space-4xl); /* PC: 64px */
        --hero-title-size: 50px;         /* 暫定: PC 50px 実測 */
        --hero-title-lh: 1.6;            /* 暫定: 80 / 50 */
        --hero-subtitle-size: var(--text-title-m-size);
        --hero-subtitle-lh: var(--text-title-m-lh);
        --hero-lead-size: var(--text-body-m-size);
        --hero-lead-lh: var(--text-body-m-lh);
        --hero-image-opacity: 1;         /* PC も不透明（2026-08-20 ユーザー指示で 78% から変更） */

        --from-lixil-logo-width: 117.271px; /* 暫定: PC 117.271px */
        --from-lixil-logo-height: 40px;      /* 暫定: PC 40px */
        --page-footer-height: 106px;       /* 暫定: PC 106px */
    }
}