@charset "UTF-8";
/* ==========================================================================
   ミニPC界隈 / MINI PC KAIWAI — デザイントークン
   すべての値はCSSカスタムプロパティとして定義し、他CSSはこれを参照する。
   個別のCSSファイルに色や余白の生値を書かないこと。
   ========================================================================== */

:root {
  /* ---- 面と文字 ---- */
  --mpk-page: #F5F6F8;
  --mpk-surface: #FFFFFF;
  --mpk-surface-muted: #F5F7FA;
  --mpk-text: #16181D;
  --mpk-text-muted: #5F6672;
  --mpk-border: #E9EBEF;       /* ヘアライン。装飾用 */
  --mpk-border-mid: #DDE1E7;   /* カードの輪郭 */
  --mpk-border-strong: #7A8290;/* 入力欄などUI部品。白背景に3.9:1 */

  /* ---- ブランド ---- */
  --mpk-primary: #0052D5;
  --mpk-primary-dark: #0041AA;
  --mpk-primary-soft: #EBF2FF;
  --mpk-primary-tint: #F5F8FF;

  /* ヘッダー（ブランドカラーの帯）専用。白の不透明度で階調を作る */
  --mpk-header-bg: #0052D5;
  --mpk-header-text: #FFFFFF;                       /* 6.63:1 */
  --mpk-header-text-dim: rgba(255, 255, 255, 0.85); /* 5.22:1 */
  --mpk-header-hover: rgba(255, 255, 255, 0.14);
  --mpk-header-active: rgba(255, 255, 255, 0.18);
  --mpk-header-rule: rgba(255, 255, 255, 0.18);

  /* ---- 強調（購入導線・重要箇所のみ） ---- */
  --mpk-accent: #C2410C;
  --mpk-accent-soft: #FFF6ED;

  /* ---- 状態 ---- */
  --mpk-link: #0052D5;
  --mpk-link-hover: #0041AA;
  --mpk-success: #15803D;
  --mpk-success-soft: #F1FCF4;
  --mpk-warning: #B45309;
  --mpk-warning-soft: #FFFBEB;
  --mpk-danger: #B91C1C;
  --mpk-danger-soft: #FEF3F2;

  /* ---- 余白（4pxグリッド。モダン日本企業風にやや広めを基本にする） ---- */
  --mpk-space-2xs: 4px;
  --mpk-space-xs: 8px;
  --mpk-space-sm: 12px;
  --mpk-space-md: 16px;
  --mpk-space-lg: 24px;
  --mpk-space-xl: 32px;
  --mpk-space-2xl: 48px;
  --mpk-space-3xl: 72px;

  /* ---- レイアウト幅 ---- */
  --mpk-wrap-max: 1200px;
  --mpk-wrap-pad: 20px;
  --mpk-sidebar-width: 304px;
  --mpk-column-gap: 40px;
  --mpk-main-pad: 36px;
  --mpk-header-height: 68px;

  /* ---- 角丸（カード12px・小物8px・ピルは999px） ---- */
  --mpk-radius-sm: 8px;
  --mpk-radius-md: 12px;
  --mpk-radius-lg: 16px;
  --mpk-radius-pill: 999px;

  /* ---- 影（境界線を薄くし、浮きは影で表す） ---- */
  --mpk-shadow-xs: 0 1px 2px rgba(22, 24, 29, 0.04);
  --mpk-shadow-sm: 0 1px 3px rgba(22, 24, 29, 0.06), 0 1px 2px rgba(22, 24, 29, 0.04);
  --mpk-shadow-md: 0 4px 12px rgba(22, 24, 29, 0.08), 0 1px 3px rgba(22, 24, 29, 0.04);
  --mpk-shadow-lg: 0 12px 28px rgba(22, 24, 29, 0.10), 0 2px 6px rgba(22, 24, 29, 0.05);
  --mpk-shadow-focus: 0 0 0 3px rgba(0, 82, 213, 0.28);

  /* ---- タイポグラフィ ---- */
  --mpk-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic",
    "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --mpk-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "DejaVu Sans Mono", "Roboto Mono", "Noto Sans Mono CJK JP", monospace;

  /*
    文字サイズの段階。極端な差を作らないため、隣り合う段の比を 1.1 前後に抑える。
    13px より小さい文字は使わない。
      2xs 13px … 補助ラベル（英字の小見出しなど）
      xs  14px … メタ情報（日付・カテゴリ・注記）
      sm  15px … 副次的な本文（抜粋・サイドバー・表）
      md  16px … 本文（モバイル）
      lg  17px … 本文（PC）・小見出し
  */
  --mpk-fs-2xs: 0.8125rem; /* 13px */
  --mpk-fs-xs: 0.875rem;   /* 14px */
  --mpk-fs-sm: 0.9375rem;  /* 15px */
  --mpk-fs-md: 1rem;       /* 16px */
  --mpk-fs-lg: 1.0625rem;  /* 17px */
  --mpk-fs-body: 16px;
  --mpk-fs-body-pc: 17px;

  /* 見出し */
  --mpk-fs-h-sm: 1.125rem;  /* 18px カード見出し */
  --mpk-fs-h-md: 1.25rem;   /* 20px セクション見出し */
  --mpk-fs-h-lg: 1.5rem;    /* 24px アーカイブ見出し */
  --mpk-fs-h-xl: 1.75rem;   /* 28px 記事タイトル */

  --mpk-lh-body: 1.85;
  --mpk-lh-tight: 1.55;
  --mpk-lh-heading: 1.4;

  /* ---- モーション ---- */
  --mpk-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- 重なり順 ---- */
  --mpk-z-base: 0;
  --mpk-z-sticky: 10;
  --mpk-z-overlay: 100;
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mpk-transition: 0s;
  }
}