@charset "UTF-8";

/* ==========================================================================
   CSS Variables（カスタムプロパティ）
   カラー、フォント、スペーシング、イージング関数、レイアウト変数等の定義
   ========================================================================== */

:root {
    /* === フォントファミリー === */
    --font-family: "LINE Seed JP", "Yu Gothic UI", "Yu Gothic", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --font-family-en: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --letter-spacing-en: -0.02em;

    /* === 基準設定（14px=1rem） === */
    --base-font-size: 14px;

    /* === タイポグラフィスケール（Perfect Fourth: 1.333） === */
    --scale-sm: 0.75;
    --scale-base: 1;
    --scale-md: 1.125;
    --scale-lg: 1.333;
    --scale-xl: 1.777;
    --scale-2xl: 2.369;
    --scale-3xl: 3.157;

    /* === レスポンシブフォントサイズ（clamp統一） === */
    --font-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.875rem);
    --font-sm: clamp(0.875rem, 0.82rem + 0.16vw, 1rem);
    --font-base: clamp(1rem, 0.93rem + 0.34vw, 1.125rem);
    --font-md: clamp(1.125rem, 1.02rem + 0.47vw, 1.313rem);
    --font-lg: clamp(1.313rem, 1.15rem + 0.72vw, 1.625rem);
    --font-xl: clamp(1.625rem, 1.42rem + 0.94vw, 2rem);
    --font-2xl: clamp(1.857rem, 1.6rem + 1.1vw, 2.286rem);
    --font-3xl: clamp(2.286rem, 1.9rem + 1.7vw, 2.857rem);
    --font-4xl: clamp(2.5rem, 1.5789rem + 3.6842vw, 6rem);
    --font-5xl: clamp(2.1875rem, 1.6118rem + 2.3026vw, 4.375rem);
    --font-6xl: clamp(3rem, 2.1rem + 3.5vw, 5.833rem);
    --font-7xl: clamp(4rem, 2.8rem + 4.5vw, 7.77rem);
    --font-8xl: clamp(5rem, 3.5rem + 6vw, 10.36rem);

    /* === カスタムフォントサイズ === */
    --font-header-nav: clamp(0.875rem, 0.8036rem + 0.1116vw, 0.9375rem);
    --font-title-sm: clamp(0.9375rem, 0.9046rem + 0.1316vw, 1.0625rem);
    --font-title-md: clamp(1.25rem, 1.1842rem + 0.2632vw, 1.5rem);
    --font-title-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.1875rem);
    --font-title-xl: clamp(2rem, 1.5395rem + 1.8421vw, 3.75rem);
    --font-label: clamp(0.8125rem, 0.7961rem + 0.0658vw, 0.875rem);

    /* === 行間設定 === */
    --line-height-tight: 1.25;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* === フォントウェイト === */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === レターシャーシング === */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;

    /* === カラー変数 === */

    /* === ベースカラー（白・黒） === */
    --color-off-white: #f5f5f5;
    --color-white: #ffffff;
    --color-black: #151515;

    /* === テキストカラー === */
    --color-text-primary: var(--color-off-white);
    --color-text-primary-rgb: 245, 245, 245;
    --color-text-secondary: #b0b5ba;
    --color-text-muted: #6a6f74;

    /* === 背景・ボーダー === */
    --color-bg-body: var(--color-black);
    --color-bg-light: #1a1a1a;
    --color-border: #333333;

    /* === ステータス・アクセント（Red） === */
    --color-red-100: #fff1f0;
    --color-red-200: #ffccc7;
    --color-red-300: #ffa39e;
    --color-red-400: #ff7875;
    --color-red-500: #ff4d4f;

    /* === アクセントカラー（ゴールド） === */
    --color-accent: #877850;
    --color-accent-light: #a99664;
    --color-accent-rgb: 135, 120, 80;


    /* === カラー変数（RGB成分 - rgba()用） === */
    --color-off-white-rgb: 255, 255, 255;
    --color-black-rgb: 0, 0, 0;

    /* === 特殊シャドウ === */
    --shadow-card-hover: 0 20px 60px rgba(var(--color-black-rgb), 0.15);
    --shadow-card-hover-sm: 0 8px 30px rgba(var(--color-black-rgb), 0.12);
    --shadow-btn-hover: 0 4px 20px rgba(var(--color-black-rgb), 0.2);

    /* === グラデーション（メッシュライク） - Dark Monochrome === */
    --color-grad-blue-light:
        radial-gradient(circle at 15% 15%, rgba(58, 58, 77, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(37, 37, 56, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 85% 85%, rgba(58, 58, 77, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(37, 37, 56, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, rgba(26, 26, 46, 0.02) 0%, rgba(37, 37, 56, 0.02) 50%, rgba(58, 58, 77, 0.02) 100%);

    --color-grad-blue-medium:
        radial-gradient(circle at 15% 15%, rgba(58, 58, 77, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 15%, rgba(37, 37, 56, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 85% 85%, rgba(58, 58, 77, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(37, 37, 56, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, rgba(26, 26, 46, 0.06) 0%, rgba(37, 37, 56, 0.06) 50%, rgba(58, 58, 77, 0.06) 100%);

    --color-grad-blue:
        radial-gradient(circle at 15% 15%, rgba(37, 37, 56, 0.8) 0%, transparent 55%),
        radial-gradient(circle at 85% 15%, rgba(26, 26, 46, 0.8) 0%, transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(15, 15, 26, 0.8) 0%, transparent 55%),
        radial-gradient(circle at 15% 85%, rgba(18, 18, 31, 0.8) 0%, transparent 55%),
        linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 50%, #12121f 100%);

    /* === ボーダー半径 === */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-2xl: 32px;
    --border-radius-3xl: 48px;
    --border-radius-4xl: 64px;
    --border-radius-5xl: 80px;
    --border-radius-6xl: 96px;
    --border-radius-7xl: 112px;
    --border-radius-8xl: 128px;
    --border-radius-full: 100vw;

    /* === アイコン・ドットサイズ === */
    --icon-size-xs: 4px;
    --icon-size-sm: 6px;
    --icon-size-md: 8px;
    --icon-size-lg: 18px;
    --icon-size-xl: 24px;

    /* === スペーシング変数（レスポンシブ） === */
    --space-xs: clamp(0.375rem, 0.35rem + 0.12vw, 0.429rem);
    --space-sm: clamp(0.5rem, 0.46rem + 0.16vw, 0.571rem);
    --space-md: clamp(1rem, 0.93rem + 0.34vw, 1.143rem);
    --space-lg: clamp(1.5rem, 1.39rem + 0.51vw, 1.714rem);
    --space-xl: clamp(2rem, 1.86rem + 0.68vw, 2.286rem);
    --space-2xl: clamp(2.5rem, 2.32rem + 0.85vw, 2.857rem);
    --space-3xl: clamp(3rem, 2.79rem + 1.03vw, 3.429rem);
    --space-4xl: clamp(4rem, 3.72rem + 1.37vw, 4.571rem);
    --space-5xl: clamp(5rem, 4.65rem + 1.71vw, 5.714rem);
    --space-6xl: clamp(6rem, 5.58rem + 2.05vw, 6.857rem);
    --space-7xl: clamp(7rem, 6.51rem + 2.39vw, 8rem);
    --space-8xl: clamp(8rem, 7.44rem + 2.74vw, 9.143rem);

    /* === セクションスペーシング === */
    --section-spacing: clamp(5rem, 3.026rem + 7.89vw, 12.5rem);

    /* === Footer・Contactパディング === */
    --footer-padding-top: clamp(3.125rem, 1.48rem + 6.58vw, 9.375rem);
    --footer-padding-bottom: clamp(3.125rem, 2.632rem + 1.97vw, 5rem);
    --contact-padding-top: clamp(2.5rem, 0.526rem + 7.89vw, 10rem);
    --contact-padding-bottom: clamp(3.75rem, 2.105rem + 6.58vw, 10rem);

    /* === シャドウ === */
    --shadow-default: 0 2px 6px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04);
    --shadow-blue: 0 2px 6px rgba(4, 66, 191, 0.12), 0 4px 8px rgba(4, 66, 191, 0.08), 0 8px 16px rgba(4, 66, 191, 0.06);
    --shadow-blue-light: 0 2px 6px rgba(229, 240, 250, 0.20), 0 4px 8px rgba(132, 177, 217, 0.12), 0 8px 16px rgba(132, 177, 217, 0.08);

    /* === トランジション変数 === */
    --duration-fast: 0.5s;
    --duration-base: 0.7s;
    --duration-medium: 0.9s;
    --duration-slow: 1.1s;
    --duration-slower: 1.4s;

    --transition-base: var(--duration-base) var(--easeOutCubic);
    --transition-fast: var(--duration-fast) var(--easeOutCubic);
    --transition-medium: var(--duration-medium) var(--easeOutCubic);
    --transition-slow: var(--duration-slow) var(--easeOutCubic);
    --transition-slower: var(--duration-slower) var(--easeOutCubic);
    --transition-ease-out: var(--duration-base) var(--easeOutCubic);
    --transition-all: all var(--duration-base) var(--easeOutCubic);

    /* === イージング関数 === */
    --easeOutCubic: cubic-bezier(0.33, 0.85, 0.4, 0.96);
    --easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
    --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
    --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easeCustom: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* === モバイル設計値（iPhone16 Pro基準） === */
    --mobile-xs-width: 375px;
    --mobile-base-width: 440px;
    --mobile-gutter: 16px;
    --mobile-margin: 16px;

    /* === ブレークポイント === */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* === コンテナ幅 === */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-max-width: 1200px;
    --width-article-detail: 800px;

    /* === ヘッダー高さ（レスポンシブ） === */
    --header-height-sm: clamp(3.43rem, 3.23rem + 0.05vw, 4rem);
    --header-height-md: clamp(4rem, 3.8rem + 0.05vw, 4.57rem);
    --header-height-lg: clamp(5.71rem, 5.34rem + 0.11vw, 6.86rem);
    --header-height-xl: clamp(6.86rem, 6.46rem + 0.11vw, 8rem);
    --header-height-2xl: clamp(8rem, 7.44rem + 0.15vw, 9.14rem);


    /* === z-index階層 === */
    --z-base: 0;
    --z-above: 1;
    --z-content: 2;
    --z-decoration: 3;
    --z-slider: 4;
    --z-sticky: 10;
    --z-fixed: 20;
    --z-header: 100;
    --z-drawer: 1000;
}