/* =============================================================
 * INNOVACTORY Theme - base.css
 *
 * CSS Variables（デザインシステム）+ Reset & Base + Utilities
 * ============================================================= */

/* =============================================================
 * CSS Variables（デザインシステム）
 * ============================================================= */
:root {
    /* Colors */
    --color-primary:      #00509B; /* Figma: サイドバーナビ背景色 */
    --color-primary-dark: #003F7A; /* ホバー用 */
    --color-dark:         #293241; /* ダーク背景セクション/フッター背景 (元サイト準拠) */
    --color-text:         #1D2E3C; /* 本文・ボーダー色 (元サイト準拠) */
    --color-text-muted:   #666666;
    --color-white:        #ffffff;
    --color-border:       #e0e0e0;
    --color-bg-light:     #FAFAFA; /* 元サイト CAREERS 等の薄背景 */
    --color-accent:       #0066CC;
    /* ピンクアクセント（元サイトの SERVICE / WORK 英字ラベル用） */
    --color-accent-pink:  #D9AED0;

    /* Layout */
    --sidebar-width:      200px; /* 元サイト ヘッダー幅 200px に統一 */
    --content-padding-x:  60px;
    --content-padding-y:  64px;
    --content-max-width:  900px;
    /* ワイド画面で本文がだらりと伸びないようにする上限（theme.json wideSize と一致）。
     * 1440px はモダンコーポレートサイトのデファクト（Stripe / GitHub / Linear 等）。
     * 1080p/1440p ディスプレイで両側余白が控えめになり、4K でも極端に空白が広がらない。 */
    --content-max-width-wide: 1440px;
    /* フルブリードのセクション（背景は全幅、内容は中央寄せで上限あり）に使う共通の左右パディング。
     * 通常画面では --content-padding-x、ワイド画面では余白を増やして内容幅を上限内に収める。 */
    --container-padding-inline:
        max(var(--content-padding-x), calc((100% - var(--content-max-width-wide)) / 2));

    /* Typography
     * 日本語コーポレートサイトとして Hiragino Sans 優先のスタック。
     * 元サイトと同じ並びだが Inter / system-ui を欧文フォールバックとして残し、
     * 数字や英文タイトルでの描画品質を確保する。 */
    --font-base:     'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP',
                     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:  12px;
    --font-size-sm:  14px;
    --font-size-md:  15px; /* 元サイト 13px とのハイブリッド: 可読性確保しつつ詰め込みすぎない */
    --font-size-lg:  20px;
    --font-size-xl:  28px;
    --font-size-2xl: 36px;
    --font-size-3xl: 48px;
    /* 英字メインラベル（SERVICE / COMPANY / NEWS 等）。元サイトは 32px、
     * 日本語サブ見出しと並ぶ「主役」サイズ。視認性とくどさのバランスで 28px。 */
    --font-size-en-label: 28px;
    --line-height:         1.85; /* 元サイトの 13px/24px (=1.85) を踏襲 */
    --line-height-tight:   1.3;
    --line-height-relaxed: 1.9;

    /* Spacing */
    --sp-xs:  8px;
    --sp-sm:  16px;
    --sp-md:  32px;
    --sp-lg:  48px;
    --sp-xl:  80px;
    --sp-2xl: 128px; /* セクション間の「呼吸」用。元サイトの margin-top 130-190px に寄せた値 */

    /* Transition */
    --transition: 0.2s ease;
}

/* =============================================================
 * Reset & Base
 * ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--font-size-md); }

body {
    font-family: var(--font-base);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background: var(--color-white);
    line-height: var(--line-height);
    letter-spacing: 0.02em; /* 日本語の可読性向上、元サイトの上質感に寄せる */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

ul, ol { list-style: none; }

/* =============================================================
 * ユーティリティ
 * ============================================================= */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.clearfix::after { content: ''; display: table; clear: both; }