/* ============================================
   var.css - CSS Custom Properties エイリアス
   値の変更は theme.json で行うこと。
   ============================================ */

/* === ベース設定（全ページ共通） === */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

/* NOTE: CSS scroll-behavior:smooth はこのサイトでは使用禁止。
   有効にすると Chrome でビューポートスクロールが完全ロックされる
   （プログラム・ユーザー操作とも。2026-06 実測）。
   ページ内リンクのスライド移動は anchor-scroll.js（rAF手動アニメ）で実装。 */

/* アンカージャンプ時に固定ヘッダーへ隠れないようオフセット */
[id] {
    scroll-margin-top: calc(var(--header-height) + var(--space-xl));
}

:root {
    /* === カラー === */
    --color-primary: var(--wp--preset--color--primary);
    --color-primary-light: var(--wp--preset--color--primary-light);
    --color-primary-dark: var(--wp--preset--color--primary-dark);
    --color-accent: var(--wp--preset--color--accent);
    --color-text: var(--wp--preset--color--text);
    --color-text-light: var(--wp--preset--color--text-light);
    --color-bg: var(--wp--preset--color--bg);
    --color-band-grey: var(--wp--custom--band-grey);
    --color-bg-sub: var(--wp--preset--color--bg-sub);
    --color-bg-dark: var(--wp--preset--color--bg-dark);
    --color-border: var(--wp--preset--color--border);
    --color-cta-line: var(--wp--preset--color--cta-line);
    /* === セマンティックカラー === */
    --color-danger: var(--wp--custom--semantic-color--danger);
    --color-warning: var(--wp--custom--semantic-color--warning);
    --color-success: var(--wp--custom--semantic-color--success);
    --color-info: var(--wp--custom--semantic-color--info);
    --color-badge-initial: var(--wp--custom--semantic-color--badge-initial);
    --color-badge-monitor: var(--wp--custom--semantic-color--badge-monitor);
    --color-badge-limited: var(--wp--custom--semantic-color--badge-limited);
    --color-black: var(--wp--preset--color--black);
    --color-gray-lighter: var(--wp--preset--color--gray-lighter);
    --color-gray: var(--wp--preset--color--gray);
    --color-gray-dark: var(--wp--preset--color--gray-dark);
    --color-primary-lightest: var(--wp--preset--color--primary-lightest);
    --color-white: var(--wp--preset--color--white);
    --white: var(--wp--preset--color--white);
    --color-border-light: var(--wp--preset--color--border-light);
    --color-table-header: var(--wp--preset--color--table-header);
    --color-table-header-light: var(--wp--preset--color--table-header-light);
    /* 価格区分カラー（Figma: syokai/main1/MONITER。バッジと共通） */
    --color-initial: var(--wp--custom--semantic-color--badge-initial);
    --color-monitor: var(--wp--custom--semantic-color--badge-monitor);
    --color-limited: var(--wp--custom--semantic-color--badge-limited);
    --color-table-limited: var(--wp--preset--color--table-limited);
    --color-table-monitor: var(--wp--preset--color--table-monitor);

    /* === フォントファミリー === */
    --font-family-body: var(--wp--preset--font-family--body);
    --font-family-jp: var(--wp--preset--font-family--mincho);
    --font-family-en: var(--wp--preset--font-family--en);
    --font-family-cat: var(--wp--preset--font-family--cat);
    --font-family-gothic: var(--wp--preset--font-family--gothic);

    /* === フォントサイズ（4-xs〜10-xl） === */
    --font-size-4-xs: var(--wp--preset--font-size--4-xs);
    --font-size-3-xs: var(--wp--preset--font-size--3-xs);
    --font-size-2-xs: var(--wp--preset--font-size--2-xs);
    --font-size-xs: var(--wp--preset--font-size--xs);
    --font-size-sm: var(--wp--preset--font-size--sm);
    --font-size-md: var(--wp--preset--font-size--md);
    --font-size-lg: var(--wp--preset--font-size--lg);
    --font-size-xl: var(--wp--preset--font-size--xl);
    --font-size-2-xl: var(--wp--preset--font-size--2-xl);
    --font-size-3-xl: var(--wp--preset--font-size--3-xl);
    --font-size-4-xl: var(--wp--preset--font-size--4-xl);
    --font-size-5-xl: var(--wp--preset--font-size--5-xl);
    --font-size-6-xl: var(--wp--preset--font-size--6-xl);
    --font-size-7-xl: var(--wp--preset--font-size--7-xl);
    --font-size-8-xl: var(--wp--preset--font-size--8-xl);
    --font-size-9-xl: var(--wp--preset--font-size--9-xl);
    --font-size-10-xl: var(--wp--preset--font-size--10-xl);

    /* === フォントウェイト === */
    --font-weight-normal: var(--wp--custom--font-weight--normal);
    --font-weight-medium: var(--wp--custom--font-weight--medium);
    --font-weight-semibold: var(--wp--custom--font-weight--semibold);
    --font-weight-bold: var(--wp--custom--font-weight--bold);

    /* === 行間 === */
    --line-height-none: var(--wp--custom--line-height--none);
    --line-height-xs: var(--wp--custom--line-height--xs);
    --line-height-sm: var(--wp--custom--line-height--sm);
    --line-height-md: var(--wp--custom--line-height--md);
    --line-height-compact: var(--wp--custom--line-height--compact);
    --line-height-base: var(--wp--custom--line-height--base);
    --line-height-tight: var(--wp--custom--line-height--tight);
    --line-height-normal: var(--wp--custom--line-height--normal);
    --line-height-loose: var(--wp--custom--line-height--loose);

    /* === 字間 === */
    --letter-spacing-tight: var(--wp--custom--letter-spacing--tight);
    --letter-spacing-snug: var(--wp--custom--letter-spacing--snug);
    --letter-spacing-normal: var(--wp--custom--letter-spacing--normal);
    --letter-spacing-wide: var(--wp--custom--letter-spacing--wide);
    --letter-spacing-wider: var(--wp--custom--letter-spacing--wider);
    --letter-spacing-widest: var(--wp--custom--letter-spacing--widest);
    --letter-spacing-display: var(--wp--custom--letter-spacing--display);
    --letter-spacing-hero: var(--wp--custom--letter-spacing--hero);

    /* === スペーシング（4-xs〜10-xl） === */
    --space-4-xs: var(--wp--preset--spacing--4-xs);
    --space-3-xs: var(--wp--preset--spacing--3-xs);
    --space-2-xs: var(--wp--preset--spacing--2-xs);
    --space-xs: var(--wp--preset--spacing--xs);
    --space-sm: var(--wp--preset--spacing--sm);
    --space-md: var(--wp--preset--spacing--md);
    --space-lg: var(--wp--preset--spacing--lg);
    --space-xl: var(--wp--preset--spacing--xl);
    --space-2-xl: var(--wp--preset--spacing--2-xl);
    --space-3-xl: var(--wp--preset--spacing--3-xl);
    --space-4-xl: var(--wp--preset--spacing--4-xl);
    --space-5-xl: var(--wp--preset--spacing--5-xl);
    --space-6-xl: var(--wp--preset--spacing--6-xl);
    --space-7-xl: var(--wp--preset--spacing--7-xl);
    --space-8-xl: var(--wp--preset--spacing--8-xl);
    --space-9-xl: var(--wp--preset--spacing--9-xl);
    --space-10-xl: var(--wp--preset--spacing--10-xl);

    /* === ボーダー === */
    --radius-sm: var(--wp--custom--radius--sm);
    --radius-md: var(--wp--custom--radius--md);
    --radius-lg: var(--wp--custom--radius--lg);
    --radius-pill: var(--wp--custom--radius--pill);

    /* === ヘッダー === */
    --header-height: var(--wp--custom--header--height);

    /* === ヒーロー === */
    --hero-height: var(--wp--custom--hero--height);
    --hero-height-sp: var(--wp--custom--hero--height-sp);
    --hero-min-height: var(--wp--custom--hero--min-height);
    --hero-min-height-sp: var(--wp--custom--hero--min-height-sp);
    --hero-decor-width: var(--wp--custom--hero--decor-width);

    /* === アイコン・アバター === */
    --icon-xs: var(--wp--custom--icon--xs);
    --icon-sm: var(--wp--custom--icon--sm);
    --icon-md: var(--wp--custom--icon--md);
    --icon-lg: var(--wp--custom--icon--lg);
    --icon-xl: var(--wp--custom--icon--xl);

    /* === サムネイル === */
    --thumb-xxs: var(--wp--custom--thumb--xxs);
    --thumb-xs: var(--wp--custom--thumb--xs);
    --thumb-sm: var(--wp--custom--thumb--sm);
    --thumb-md: var(--wp--custom--thumb--md);
    --thumb-lg: var(--wp--custom--thumb--lg);
    --thumb-xl: var(--wp--custom--thumb--xl);
    --thumb-2xl: var(--wp--custom--thumb--xxl);
    --thumb-3xl: var(--wp--custom--thumb--xxxl);

    /* === 幅（セクション wrapper 用） === */
    --width-wide: var(--wp--custom--width--wide);
    --width-inner: var(--wp--custom--width--inner);
    --width-content: var(--wp--custom--width--content);
    --width-narrow: var(--wp--custom--width--narrow);

    /* === カード === */
    --card-sm: var(--wp--custom--card--sm);
    --card-md: var(--wp--custom--card--md);
    --card-lg: var(--wp--custom--card--lg);
    --card-xl: var(--wp--custom--card--xl);
    --card-max: var(--wp--custom--card--max);

    /* === レイアウト寸法（子要素用） === */
    --layout-xs: var(--wp--custom--layout--xs);
    --layout-sm: var(--wp--custom--layout--sm);
    --layout-md: var(--wp--custom--layout--md);
    --layout-lg: var(--wp--custom--layout--lg);
    --layout-xl: var(--wp--custom--layout--xl);

    /* === コンテンツ幅（子要素用） === */
    --content-width-xs: var(--wp--custom--content-width--xs);
    --content-width-sm: var(--wp--custom--content-width--sm);
    --content-width-md: var(--wp--custom--content-width--md);
    --content-width-lg: var(--wp--custom--content-width--lg);
    --content-width-xl: var(--wp--custom--content-width--xl);
    --content-width-2xl: var(--wp--custom--content-width--xxl);
    --content-width-3xl: var(--wp--custom--content-width--xxxl);

    /* === コンテナ（後方互換） === */
    --container-width: var(--width-inner);
    --container-padding: var(--wp--custom--container--padding);

    /* === セクション === */
    --section-py: var(--wp--custom--section--py);
    --section-py-sp: var(--wp--custom--section--py-sp);
    --section-header-mb: var(--wp--custom--section--header-mb);

    /* === グリッド === */
    --grid-gap: var(--wp--custom--grid--gap);
    --grid-gap-sm: var(--wp--custom--grid--gap-sm);
    --grid-gap-lg: var(--wp--custom--grid--gap-lg);

    /* === トランジション === */
    --transition-fast: var(--wp--custom--transition--fast);
    --transition-normal: var(--wp--custom--transition--normal);

    /* === インタラクション === */
    --touch-target-min: var(--wp--custom--interaction--touch-target-min);

    /* === シャドウ === */
    --shadow-xs: var(--wp--custom--shadow--xs);
    --shadow-sm: var(--wp--custom--shadow--sm);
    --shadow-md: var(--wp--custom--shadow--md);
    --shadow-lg: var(--wp--custom--shadow--lg);
    --shadow-xl: var(--wp--custom--shadow--xl);
    --shadow-focus: var(--wp--custom--shadow--focus);
    --shadow-focus-invert: var(--wp--custom--shadow--focus-invert);
}

/* === TOPページ: 明朝体 === */
.home {
    font-family: var(--font-family-jp);
}

/* === SP === */
@media (max-width: 767px) {
    :root {
        --container-padding: var(--wp--custom--container--padding-sp);
        --hero-height: var(--wp--custom--hero--height-sp);
        --hero-min-height: var(--wp--custom--hero--min-height-sp);
    }
}