/*
 * ZERO POINT FIELD — Readdy原本から抽出したライトデザインの基礎値。
 * 出典: src/index.css、tailwind.config.ts、src/pages/home/components/、
 *       node_modules/tailwindcss/stubs/config.full.js（標準寸法の確認のみ）。
 * 通常CSSのカスタムプロパティのみ。Tailwindクラス・フォント読み込み・
 * 要素への装飾・ダークモード切り替えはここでは実装しない。
 * 原本のrem値を維持。括弧内のpx換算はルート文字サイズ16pxの場合。
 * --zpf-oklch-* は原本のL C H値、--zpf-color-* はそのまま色として使用可能。
 * 例: color: var(--zpf-color-primary-700);
 *     border-color: oklch(var(--zpf-oklch-foreground-950) / 0.15);
 * 最大幅1400pxは原本のborder-box外枠（左右paddingを含む）。
 */

:root {

  /* OKLCHパレット: 原本の5系統×11段階を数値のまま保持 */
  --zpf-oklch-background-50: 0.995 0.002 250;
  --zpf-color-background-50: oklch(var(--zpf-oklch-background-50));
  --zpf-oklch-background-100: 0.982 0.004 250;
  --zpf-color-background-100: oklch(var(--zpf-oklch-background-100));
  --zpf-oklch-background-200: 0.962 0.007 250;
  --zpf-color-background-200: oklch(var(--zpf-oklch-background-200));
  --zpf-oklch-background-300: 0.932 0.010 250;
  --zpf-color-background-300: oklch(var(--zpf-oklch-background-300));
  --zpf-oklch-background-400: 0.870 0.013 250;
  --zpf-color-background-400: oklch(var(--zpf-oklch-background-400));
  --zpf-oklch-background-500: 0.800 0.014 250;
  --zpf-color-background-500: oklch(var(--zpf-oklch-background-500));
  --zpf-oklch-background-600: 0.700 0.014 250;
  --zpf-color-background-600: oklch(var(--zpf-oklch-background-600));
  --zpf-oklch-background-700: 0.600 0.013 250;
  --zpf-color-background-700: oklch(var(--zpf-oklch-background-700));
  --zpf-oklch-background-800: 0.470 0.012 250;
  --zpf-color-background-800: oklch(var(--zpf-oklch-background-800));
  --zpf-oklch-background-900: 0.330 0.011 250;
  --zpf-color-background-900: oklch(var(--zpf-oklch-background-900));
  --zpf-oklch-background-950: 0.210 0.010 250;
  --zpf-color-background-950: oklch(var(--zpf-oklch-background-950));
  --zpf-oklch-foreground-50: 0.972 0.004 252;
  --zpf-color-foreground-50: oklch(var(--zpf-oklch-foreground-50));
  --zpf-oklch-foreground-100: 0.930 0.007 252;
  --zpf-color-foreground-100: oklch(var(--zpf-oklch-foreground-100));
  --zpf-oklch-foreground-200: 0.860 0.010 252;
  --zpf-color-foreground-200: oklch(var(--zpf-oklch-foreground-200));
  --zpf-oklch-foreground-300: 0.760 0.013 252;
  --zpf-color-foreground-300: oklch(var(--zpf-oklch-foreground-300));
  --zpf-oklch-foreground-400: 0.640 0.016 253;
  --zpf-color-foreground-400: oklch(var(--zpf-oklch-foreground-400));
  --zpf-oklch-foreground-500: 0.530 0.019 254;
  --zpf-color-foreground-500: oklch(var(--zpf-oklch-foreground-500));
  --zpf-oklch-foreground-600: 0.450 0.022 255;
  --zpf-color-foreground-600: oklch(var(--zpf-oklch-foreground-600));
  --zpf-oklch-foreground-700: 0.370 0.026 256;
  --zpf-color-foreground-700: oklch(var(--zpf-oklch-foreground-700));
  --zpf-oklch-foreground-800: 0.300 0.030 257;
  --zpf-color-foreground-800: oklch(var(--zpf-oklch-foreground-800));
  --zpf-oklch-foreground-900: 0.245 0.034 258;
  --zpf-color-foreground-900: oklch(var(--zpf-oklch-foreground-900));
  --zpf-oklch-foreground-950: 0.185 0.038 260;
  --zpf-color-foreground-950: oklch(var(--zpf-oklch-foreground-950));
  --zpf-oklch-primary-50: 0.968 0.018 258;
  --zpf-color-primary-50: oklch(var(--zpf-oklch-primary-50));
  --zpf-oklch-primary-100: 0.930 0.048 258;
  --zpf-color-primary-100: oklch(var(--zpf-oklch-primary-100));
  --zpf-oklch-primary-200: 0.862 0.086 258;
  --zpf-color-primary-200: oklch(var(--zpf-oklch-primary-200));
  --zpf-oklch-primary-300: 0.778 0.120 259;
  --zpf-color-primary-300: oklch(var(--zpf-oklch-primary-300));
  --zpf-oklch-primary-400: 0.678 0.152 260;
  --zpf-color-primary-400: oklch(var(--zpf-oklch-primary-400));
  --zpf-oklch-primary-500: 0.552 0.170 261;
  --zpf-color-primary-500: oklch(var(--zpf-oklch-primary-500));
  --zpf-oklch-primary-600: 0.482 0.158 261;
  --zpf-color-primary-600: oklch(var(--zpf-oklch-primary-600));
  --zpf-oklch-primary-700: 0.408 0.138 261;
  --zpf-color-primary-700: oklch(var(--zpf-oklch-primary-700));
  --zpf-oklch-primary-800: 0.338 0.114 261;
  --zpf-color-primary-800: oklch(var(--zpf-oklch-primary-800));
  --zpf-oklch-primary-900: 0.278 0.094 261;
  --zpf-color-primary-900: oklch(var(--zpf-oklch-primary-900));
  --zpf-oklch-primary-950: 0.218 0.076 261;
  --zpf-color-primary-950: oklch(var(--zpf-oklch-primary-950));
  --zpf-oklch-accent-50: 0.970 0.020 214;
  --zpf-color-accent-50: oklch(var(--zpf-oklch-accent-50));
  --zpf-oklch-accent-100: 0.938 0.042 214;
  --zpf-color-accent-100: oklch(var(--zpf-oklch-accent-100));
  --zpf-oklch-accent-200: 0.880 0.072 213;
  --zpf-color-accent-200: oklch(var(--zpf-oklch-accent-200));
  --zpf-oklch-accent-300: 0.820 0.098 212;
  --zpf-color-accent-300: oklch(var(--zpf-oklch-accent-300));
  --zpf-oklch-accent-400: 0.742 0.120 211;
  --zpf-color-accent-400: oklch(var(--zpf-oklch-accent-400));
  --zpf-oklch-accent-500: 0.662 0.130 210;
  --zpf-color-accent-500: oklch(var(--zpf-oklch-accent-500));
  --zpf-oklch-accent-600: 0.580 0.122 210;
  --zpf-color-accent-600: oklch(var(--zpf-oklch-accent-600));
  --zpf-oklch-accent-700: 0.490 0.104 210;
  --zpf-color-accent-700: oklch(var(--zpf-oklch-accent-700));
  --zpf-oklch-accent-800: 0.400 0.084 210;
  --zpf-color-accent-800: oklch(var(--zpf-oklch-accent-800));
  --zpf-oklch-accent-900: 0.330 0.066 210;
  --zpf-color-accent-900: oklch(var(--zpf-oklch-accent-900));
  --zpf-oklch-accent-950: 0.250 0.052 210;
  --zpf-color-accent-950: oklch(var(--zpf-oklch-accent-950));
  --zpf-oklch-secondary-50: 0.970 0.005 250;
  --zpf-color-secondary-50: oklch(var(--zpf-oklch-secondary-50));
  --zpf-oklch-secondary-100: 0.938 0.008 250;
  --zpf-color-secondary-100: oklch(var(--zpf-oklch-secondary-100));
  --zpf-oklch-secondary-200: 0.878 0.012 250;
  --zpf-color-secondary-200: oklch(var(--zpf-oklch-secondary-200));
  --zpf-oklch-secondary-300: 0.800 0.015 250;
  --zpf-color-secondary-300: oklch(var(--zpf-oklch-secondary-300));
  --zpf-oklch-secondary-400: 0.700 0.018 250;
  --zpf-color-secondary-400: oklch(var(--zpf-oklch-secondary-400));
  --zpf-oklch-secondary-500: 0.600 0.020 250;
  --zpf-color-secondary-500: oklch(var(--zpf-oklch-secondary-500));
  --zpf-oklch-secondary-600: 0.520 0.021 250;
  --zpf-color-secondary-600: oklch(var(--zpf-oklch-secondary-600));
  --zpf-oklch-secondary-700: 0.440 0.021 250;
  --zpf-color-secondary-700: oklch(var(--zpf-oklch-secondary-700));
  --zpf-oklch-secondary-800: 0.360 0.021 250;
  --zpf-color-secondary-800: oklch(var(--zpf-oklch-secondary-800));
  --zpf-oklch-secondary-900: 0.290 0.020 250;
  --zpf-color-secondary-900: oklch(var(--zpf-oklch-secondary-900));
  --zpf-oklch-secondary-950: 0.220 0.019 250;
  --zpf-color-secondary-950: oklch(var(--zpf-oklch-secondary-950));

  /* 背景・本文・ブランド色の用途別参照 */
  --zpf-bg-page: var(--zpf-color-background-50);
  --zpf-bg-section-soft: var(--zpf-color-background-100);
  --zpf-bg-image-placeholder: var(--zpf-color-background-100);
  --zpf-bg-footer: var(--zpf-color-secondary-50);
  --zpf-bg-infra: var(--zpf-color-primary-900);
  --zpf-bg-header-scrolled: oklch(var(--zpf-oklch-background-50) / 0.95);
  --zpf-bg-hero-quick-nav: oklch(var(--zpf-oklch-background-100) / 0.6);
  --zpf-text-strong: var(--zpf-color-foreground-950);
  --zpf-text-body: var(--zpf-color-foreground-700);
  --zpf-text-description: var(--zpf-color-foreground-600);
  --zpf-text-muted: var(--zpf-color-foreground-500);
  --zpf-text-label: var(--zpf-color-accent-700);
  --zpf-action-bg: var(--zpf-color-primary-500);
  --zpf-action-bg-hover: var(--zpf-color-primary-600);
  --zpf-action-text: var(--zpf-color-background-50);
  --zpf-color-selection: oklch(var(--zpf-oklch-primary-500) / 0.2);

  /* フォント。Google Fontsの読み込みは別工程 */
  --zpf-font-body: 'Noto Sans JP', system-ui, sans-serif;
  --zpf-font-heading: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  --zpf-font-label: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  --zpf-weight-normal: 400;
  --zpf-weight-medium: 500;
  --zpf-weight-semibold: 600;
  --zpf-weight-bold: 700;
  /* 原本の600は配信ウェイトにないフォントで合成される場合がある。 */

  /* 本文・ラベルのサイズ。固定pxとremを原本どおり区別 */
  --zpf-text-xs: 0.75rem; /* 12px */
  --zpf-text-sm: 0.875rem; /* 14px */
  --zpf-text-base: 1rem; /* 16px */
  --zpf-text-lg: 1.125rem; /* 18px */
  --zpf-text-xl: 1.25rem; /* 20px */
  --zpf-text-label-small: 10px;
  --zpf-text-label: 11px;
  --zpf-text-infra-description: 12.5px;
  --zpf-text-caption: 13px;
  --zpf-text-lead: 15px;
  --zpf-line-xs: 1rem;
  --zpf-line-sm: 1.25rem;
  --zpf-line-base: 1.5rem;
  --zpf-line-lg: 1.75rem;
  --zpf-line-xl: 1.75rem;
  --zpf-line-snug: 1.375;
  --zpf-line-relaxed: 1.625;
  --zpf-tracking-tight: -0.025em;
  --zpf-tracking-wide: 0.025em;
  --zpf-tracking-label: 0.26em;
  --zpf-tracking-index: 0.2em;
  --zpf-tracking-item-number: 0.22em;

  /* 共通セクション見出し: SectionHeading.tsx */
  --zpf-section-title-size-mobile: 30px;
  --zpf-section-title-size-md: 42px;
  --zpf-section-title-size: var(--zpf-section-title-size-mobile);
  --zpf-section-title-line: 1.28;
  --zpf-section-heading-rule-padding: 1rem; /* 16px */
  --zpf-section-heading-label-margin: 1.5rem; /* 24px */
  --zpf-section-title-margin: 1.25rem; /* leadがある場合20px */
  --zpf-cta-title-size-mobile: 30px;
  --zpf-cta-title-size-md: 44px;
  --zpf-cta-title-size: var(--zpf-cta-title-size-mobile);
  --zpf-service-title-size-mobile: 1.25rem;
  --zpf-service-title-size-md: 27px;
  --zpf-service-title-size: var(--zpf-service-title-size-mobile);
  --zpf-service-number-size-mobile: 40px;
  --zpf-service-number-size-md: 54px;
  --zpf-service-number-size: var(--zpf-service-number-size-mobile);
  --zpf-service-number-color: oklch(var(--zpf-oklch-primary-500) / 0.3);
  --zpf-service-number-line: 1;
  --zpf-reasons-group-title-size-mobile: 21px;
  --zpf-reasons-group-title-size-md: 26px;
  --zpf-reasons-group-title-size: var(--zpf-reasons-group-title-size-mobile);
  --zpf-reasons-item-title-size-mobile: 16px;
  --zpf-reasons-item-title-size-md: 17px;
  --zpf-reasons-item-title-size: var(--zpf-reasons-item-title-size-mobile);
  --zpf-troubles-text-size-mobile: 16px;
  --zpf-troubles-text-size-md: 18px;
  --zpf-troubles-text-size: var(--zpf-troubles-text-size-mobile);
  --zpf-philosophy-quote-size-mobile: 19px;
  --zpf-philosophy-quote-size-md: 23px;
  --zpf-philosophy-quote-size: var(--zpf-philosophy-quote-size-mobile);

  /* コンテンツ幅・左右余白・セクション上下余白 */
  --zpf-content-max: 1400px;
  --zpf-content-max-cta: 900px;
  --zpf-content-max-faq: 48rem; /* 768px */
  --zpf-content-max-lead: 42rem; /* 672px */
  --zpf-content-max-short: 36rem; /* 576px */
  --zpf-gutter-mobile: 1.25rem; /* 20px */
  --zpf-gutter-md: 2.5rem; /* 40px */
  --zpf-gutter: var(--zpf-gutter-mobile);
  --zpf-section-space-mobile: 5rem; /* 80px、上と下それぞれ */
  --zpf-section-space-md: 7rem; /* 112px、上と下それぞれ */
  --zpf-section-space: var(--zpf-section-space-mobile);
  --zpf-header-height: 72px;
  --zpf-anchor-offset: 5rem; /* 80px。管理バー分の補正は別工程 */
  --zpf-header-nav-gap: 1.75rem; /* 28px */
  --zpf-header-nav-text-size: 13px;
  --zpf-footer-space: 3.5rem; /* 56px、上と下それぞれ */
  --zpf-service-row-space-mobile: 2.5rem; /* 40px */
  --zpf-service-row-space-md: 3.5rem; /* 56px */
  --zpf-service-row-space: var(--zpf-service-row-space-mobile);

  /* 共通で使われる余白尺度。原本のremを保持 */
  --zpf-space-2: 0.125rem;
  --zpf-space-4: 0.25rem;
  --zpf-space-6: 0.375rem;
  --zpf-space-8: 0.5rem;
  --zpf-space-10: 0.625rem;
  --zpf-space-12: 0.75rem;
  --zpf-space-14: 0.875rem;
  --zpf-space-16: 1rem;
  --zpf-space-20: 1.25rem;
  --zpf-space-24: 1.5rem;
  --zpf-space-28: 1.75rem;
  --zpf-space-32: 2rem;
  --zpf-space-36: 2.25rem;
  --zpf-space-40: 2.5rem;
  --zpf-space-44: 2.75rem;
  --zpf-space-48: 3rem;
  --zpf-space-56: 3.5rem;
  --zpf-space-64: 4rem;
  --zpf-space-80: 5rem;
  --zpf-space-96: 6rem;
  --zpf-space-112: 7rem;

  /* 細線・角丸・方眼。全体を丸いカードへ置き換えない */
  --zpf-border-width: 1px;
  --zpf-border-width-emphasis: 2px; /* 理念の引用文 */
  --zpf-border-color: var(--zpf-color-background-200);
  --zpf-border-subtle: oklch(var(--zpf-oklch-foreground-950) / 0.1);
  --zpf-border-standard: oklch(var(--zpf-oklch-foreground-950) / 0.15);
  --zpf-border-heading: oklch(var(--zpf-oklch-foreground-950) / 0.2);
  --zpf-border-on-dark: oklch(var(--zpf-oklch-background-50) / 0.15);
  --zpf-border-heading-on-dark: oklch(var(--zpf-oklch-background-50) / 0.25);
  /*
   * 原本の /12 は標準Tailwind不透明度にない。
   * 次の値はコード上の12%という意図を保存した参照値で、実描画の確認は別工程。
   */
  --zpf-border-subtle-source-intent: oklch(var(--zpf-oklch-foreground-950) / 0.12);
  --zpf-radius-none: 0;
  --zpf-radius-small: 0.125rem; /* 2px: ボタン・ロゴ・入力欄 */
  --zpf-radius-circle: 9999px; /* 丸い点・上部へ戻るボタンのみ */
  --zpf-grid-cell: 64px;
  --zpf-grid-line-width: 1px;
  --zpf-grid-line-color: oklch(var(--zpf-oklch-foreground-950) / 0.035);

  /* HeroSection.tsx: 「スピード感 × 安心感」 */
  --zpf-hero-title-size-mobile: 40px;
  --zpf-hero-title-size-md: 62px;
  --zpf-hero-title-size-lg: 72px;
  --zpf-hero-title-size: var(--zpf-hero-title-size-mobile);
  --zpf-hero-title-color: var(--zpf-color-primary-700);
  --zpf-hero-title-weight: 700;
  --zpf-hero-title-line: 1.06;
  --zpf-hero-title-tracking: -0.025em;
  --zpf-hero-title-margin-mobile: 1.5rem; /* 下24px */
  --zpf-hero-title-margin-md: 1.75rem; /* 下28px */
  --zpf-hero-title-margin: var(--zpf-hero-title-margin-mobile);
  --zpf-hero-cross-color: oklch(var(--zpf-oklch-primary-400) / 0.9);
  --zpf-hero-cross-weight: 400;
  --zpf-hero-cross-margin-mobile: 0.5rem; /* 左右各8px */
  --zpf-hero-cross-margin-md: 1rem; /* 左右各16px */
  --zpf-hero-cross-margin: var(--zpf-hero-cross-margin-mobile);
  --zpf-hero-section-top-mobile: 104px;
  --zpf-hero-section-top-md: 120px;
  --zpf-hero-section-top: var(--zpf-hero-section-top-mobile);
  --zpf-hero-inner-top-mobile: 2rem; /* 32px。section上余白とは別 */
  --zpf-hero-inner-top-md: 3.5rem; /* 56px */
  --zpf-hero-inner-top: var(--zpf-hero-inner-top-mobile);
  --zpf-hero-inner-bottom-mobile: 3.5rem; /* 56px */
  --zpf-hero-inner-bottom-md: 6rem; /* 96px */
  --zpf-hero-inner-bottom: var(--zpf-hero-inner-bottom-mobile);
  --zpf-hero-column-gap-mobile: 3rem; /* 48px */
  --zpf-hero-column-gap-lg: 3.5rem; /* 56px */
  --zpf-hero-column-gap: var(--zpf-hero-column-gap-mobile);
  --zpf-hero-eyebrow-margin: 1.5rem; /* 下24px */
  --zpf-hero-eyebrow-tracking: 0.24em;
  --zpf-hero-subtitle-size-mobile: 20px;
  --zpf-hero-subtitle-size-md: 25px;
  --zpf-hero-subtitle-size: var(--zpf-hero-subtitle-size-mobile);
  --zpf-hero-subtitle-line: 1.42;
  --zpf-hero-subtitle-weight: 600;
  --zpf-hero-subtitle-color: var(--zpf-color-foreground-950);
  --zpf-hero-subtitle-accent: var(--zpf-color-primary-600);
  --zpf-hero-subtitle-margin-mobile: 2rem; /* 下32px */
  --zpf-hero-subtitle-margin-md: 2.25rem; /* 下36px */
  --zpf-hero-subtitle-margin: var(--zpf-hero-subtitle-margin-mobile);
  --zpf-hero-description-size-mobile: 15px;
  --zpf-hero-description-size-md: 17px;
  --zpf-hero-description-size: var(--zpf-hero-description-size-mobile);
  --zpf-hero-description-margin: 2.5rem; /* 下40px */
  --zpf-hero-actions-gap: 0.75rem; /* 12px */
  --zpf-hero-actions-margin: 2.5rem; /* 下40px */
  --zpf-hero-button-padding-x: 2rem; /* 32px */
  --zpf-hero-button-padding-y: 1rem; /* 16px */
  --zpf-hero-trust-padding-top: 1.5rem; /* 24px */
  --zpf-hero-image-height-mobile: 340px;
  --zpf-hero-image-height-md: 440px;
  --zpf-hero-image-height-lg: 500px;
  --zpf-hero-image-height: var(--zpf-hero-image-height-mobile);
  --zpf-hero-grid-mask-end: 72%;

  /*
   * ブレークポイントの記録用。CSSの@media条件にはvar()を使えないため、
   * 下の条件には原本どおりの数値を直接記す。
   * sm: CTA等の横並び、md: 余白・文字サイズ、lg: PCナビ・12列配置。
   */
  --zpf-breakpoint-sm: 640px;
  --zpf-breakpoint-md: 768px;
  --zpf-breakpoint-lg: 1024px;
  --zpf-breakpoint-xl: 1280px;
  --zpf-breakpoint-2xl: 1536px;
}

/* md以上: 値の切り替えのみ。要素セレクターへのスタイル適用は別工程 */
@media (min-width: 768px) {
  :root {
    --zpf-gutter: var(--zpf-gutter-md);
    --zpf-section-space: var(--zpf-section-space-md);
    --zpf-section-title-size: var(--zpf-section-title-size-md);
    --zpf-cta-title-size: var(--zpf-cta-title-size-md);
    --zpf-service-title-size: var(--zpf-service-title-size-md);
    --zpf-service-number-size: var(--zpf-service-number-size-md);
    --zpf-service-row-space: var(--zpf-service-row-space-md);
    --zpf-reasons-group-title-size: var(--zpf-reasons-group-title-size-md);
    --zpf-reasons-item-title-size: var(--zpf-reasons-item-title-size-md);
    --zpf-troubles-text-size: var(--zpf-troubles-text-size-md);
    --zpf-philosophy-quote-size: var(--zpf-philosophy-quote-size-md);
    --zpf-hero-title-size: var(--zpf-hero-title-size-md);
    --zpf-hero-title-margin: var(--zpf-hero-title-margin-md);
    --zpf-hero-cross-margin: var(--zpf-hero-cross-margin-md);
    --zpf-hero-section-top: var(--zpf-hero-section-top-md);
    --zpf-hero-inner-top: var(--zpf-hero-inner-top-md);
    --zpf-hero-inner-bottom: var(--zpf-hero-inner-bottom-md);
    --zpf-hero-subtitle-size: var(--zpf-hero-subtitle-size-md);
    --zpf-hero-subtitle-margin: var(--zpf-hero-subtitle-margin-md);
    --zpf-hero-description-size: var(--zpf-hero-description-size-md);
    --zpf-hero-image-height: var(--zpf-hero-image-height-md);
  }
}

/* lg以上 */
@media (min-width: 1024px) {
  :root {
    --zpf-hero-title-size: var(--zpf-hero-title-size-lg);
    --zpf-hero-column-gap: var(--zpf-hero-column-gap-lg);
    --zpf-hero-image-height: var(--zpf-hero-image-height-lg);
  }
}