@charset "UTF-8";

/*
    基準スタイル・共通レイアウト

    - テンプレート共通領域のルート文字サイズへ依存しないよう、寸法は px で保持
    - sp:〜768px / pc:769px〜 の1段。メディアクエリは min-width: 769px のみ
    - PC は見た目固定、SP のみレスポンシブ可変（docs/project.md 上書き#1）
*/

.lixil-2026 {
    min-width: 320px;
    background-color: var(--bg-white);
    color: var(--font-primary);
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: 1.8;
}

/* コンテンツ幅の共通コンテナ */
.lixil-2026 .container {
    width: 100%;
    padding-right: var(--layout-page-margin);
    padding-left: var(--layout-page-margin);
}

@media (min-width: 769px) {
    .lixil-2026 .container {
        max-width: calc(var(--content-max-width) + var(--layout-page-margin) * 2);
        margin-right: auto;
        margin-left: auto;
    }
}

/* スクリーンリーダー向けの視覚的非表示（docs/accessibility.md 2.4.4） */
.lixil-2026 .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 主要ブロックへのスキップリンク（docs/accessibility.md 2.4.1） */
.lixil-2026 .skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--z-header);
    padding: var(--space-sm) var(--space-md);
    transform: translateY(-100%);
    background-color: var(--bg-dark);
    color: var(--font-inverse);
    font-size: var(--text-body-m-size);
}

.lixil-2026 .skip-link:focus {
    transform: translateY(0);
}

/* スクロール連動演出は JS が動いたときだけ効かせる（JS失敗時に白紙にしない） */
.lixil-2026.js-reveal-ready [data-js-reveal] {
    opacity: 0;
    transition: opacity .6s;
}

.lixil-2026.js-reveal-ready [data-js-reveal].is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .lixil-2026.js-reveal-ready [data-js-reveal] {
        opacity: 1;
        transition: none;
    }

    .lixil-2026 {
        scroll-behavior: auto;
    }
}