/* ============================================================
   UniMind デザイントークン
   ------------------------------------------------------------
   出典：DESIGN.md v7（2026-07-20）§2 カラー／§3 タイポ／§4 余白／§5 コンポーネント
   このファイルは静的サイトと SWELL 子テーマの**両方**が読む共通基盤。
   ★色・余白・角丸の変更は必ずここで行い、個別CSSにハードコードしないこと
     （CLAUDE.md「デザイン変更時のルール」）。
   ============================================================ */

:root {
  /* --- Colors（DESIGN.md §2）------------------------------- */
  --um-primary: #2563EB;          /* --color-accent／サイト内で彩色はこの1色のみ */
  --um-primary-hover: #1D4ED8;
  --um-black: #0E0E10;            /* ダークセクション */
  --um-navy: #0D1830;             /* ダークグラデの終点 */
  --um-heading: #111111;
  --um-text: #1A1A1A;
  --um-muted: #6B6B6B;
  --um-border: #E5E5E2;
  --um-bg-off: #F6F6F4;
  --um-white: #FFFFFF;
  --um-error: #DC2626;            /* フォームエラー専用（禁止色の例外） */

  /* --- Gradients（§2：この2種以外のグラデ禁止）------------- */
  --um-grad-dark: linear-gradient(135deg, #0E0E10 0%, #0D1830 100%);
  --um-grad-blue: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);

  /* --- 装飾（§7）------------------------------------------ */
  --um-watermark: rgba(37, 99, 235, 0.04);  /* ライトセクションの巨大英字 */
  --um-ring-light: rgba(255, 255, 255, 0.08); /* ダーク面のリング（10%超禁止） */

  /* --- Spacing：8pxグリッド厳守（§4）---------------------- */
  --um-sp-1: 8px;
  --um-sp-2: 16px;
  --um-sp-3: 24px;
  --um-sp-4: 32px;
  --um-sp-5: 40px;                          /* カード間gap（v8） */
  --um-sp-6: 48px;
  --um-sp-8: 64px;
  --um-sp-12: 96px;
  --um-sp-15: 120px;
  --um-section-y: clamp(96px, 13vw, 176px);      /* セクション上下：SP96 / PC176（v8拡大） */
  --um-section-y-hero: clamp(140px, 18vw, 240px);/* 下層ページのタイトル帯のみ（v8） */
  --um-section-x: clamp(24px, 4vw, 48px);        /* セクション左右：SP24 / PC48（v8拡大） */
  --um-content-max: 1120px;
  --um-prose-max: 800px;                    /* 読み物ページ（Privacy/Cookie） */

  /* --- Radius（§5：この組み合わせ以外を使わない）---------- */
  --um-r-card: 12px 48px 12px 12px;  /* 右上アシンメトリー・全サイト統一 */
  --um-r-img: 12px;
  --um-r-ui: 8px;                    /* ボタン・入力欄 */
  --um-r-pill: 999px;

  /* --- Shadows（§5）--------------------------------------- */
  --um-shadow-card: 0 4px 16px rgba(11, 31, 63, 0.06);
  --um-shadow-hover: 0 8px 24px rgba(37, 99, 235, 0.3);

  /* --- Typography（§3）------------------------------------ */
  --um-font: 'Noto Sans JP', sans-serif;
  --um-h1: clamp(36px, 4.8vw, 58px);   /* SP36 → PC58（v8拡大） */
  --um-h2: clamp(30px, 3.8vw, 46px);   /* SP30 → PC46（v8拡大） */
  --um-h3: 20px;                       /* カード見出し */
  --um-h3-lg: clamp(20px, 2vw, 24px);  /* セクション内見出し（SP20 → PC24） */
  --um-body: 16px;
  --um-body-sp: 15px;
  --um-label-size: 14px;               /* 英字セクションラベル（v8で13→14px） */
  --um-small: 13px;                    /* 補足・キャプション・カードmeta */
  --um-num-deco: 64px;                 /* REASON の装飾数字 */
  --um-lh-body: 1.9;
  --um-lh-heading: 1.4;
  --um-lh-h1: 1.3;
  --um-ls-label: 0.25em;               /* 英字ラベルのトラッキング */

  /* --- Motion（§6）---------------------------------------- */
  --um-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --um-dur: 0.3s;

  /* --- Layout ---------------------------------------------- */
  --um-header-h: 72px;
  --um-bp-nav: 900px;    /* ナビ ⇔ ハンバーガー */
  --um-bp-pin: 768px;    /* ピン留め ⇔ 縦並びフォールバック */

  /* --- z-index scale --------------------------------------- */
  --um-z-watermark: -1;
  --um-z-base: 0;
  --um-z-content: 1;
  --um-z-sp-cta: 90;
  --um-z-header: 100;
  --um-z-drawer: 110;
  --um-z-loader: 200;
}

/* ============================================================
   ベース
   ============================================================ */
body {
  font-family: var(--um-font);
  color: var(--um-text);
  font-size: var(--um-body);
  line-height: var(--um-lh-body);
  margin: 0;
  background: var(--um-white);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--um-primary); text-decoration: none; }
a:hover { color: var(--um-primary-hover); }
img { max-width: 100%; }

/* ============================================================
   セクション
   ============================================================ */
.um-section { padding: var(--um-section-y) var(--um-section-x); position: relative; }
.um-section__inner { max-width: var(--um-content-max); margin: 0 auto; position: relative; z-index: var(--um-z-content); }
.um-section--dark { background: var(--um-grad-dark); color: var(--um-white); overflow: hidden; }
.um-section--cta { background: var(--um-grad-blue); color: var(--um-white); text-align: center; overflow: hidden; }
.um-section--off { background: var(--um-bg-off); }

/* 英字ラベル + 見出し（§3：H2には必ず英字ラベルを添える） */
.um-label { color: var(--um-primary); font-size: var(--um-label-size); font-weight: 700; letter-spacing: var(--um-ls-label); margin: 0 0 var(--um-sp-3); }
.um-h2 { color: var(--um-heading); font-size: var(--um-h2); font-weight: 700; line-height: var(--um-lh-heading); margin: 0 0 var(--um-sp-3); }

/* ============================================================
   カード（右上アシンメトリー角丸・ホバー青反転）§5
   ============================================================ */
.um-card {
  background: var(--um-white);
  border: 1px solid var(--um-border);
  border-radius: var(--um-r-card);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--um-shadow-card);
  transition: all var(--um-dur);
}
.um-card--invert:hover {
  background: var(--um-primary);
  border-color: var(--um-primary);
  color: var(--um-white);
  box-shadow: var(--um-shadow-hover);
  transform: translateY(-2px);
}

/* ============================================================
   ボタン §5
   ============================================================ */
.um-btn {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: var(--um-r-ui);
  transition: all var(--um-dur);
  cursor: pointer;
}
.um-btn--primary { background: var(--um-primary); color: var(--um-white); border: none; }
.um-btn--primary:hover { background: var(--um-primary-hover); color: var(--um-white); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4); }
.um-btn--secondary { background: var(--um-white); color: var(--um-heading); border: 1px solid var(--um-heading); }
.um-btn--secondary:hover { color: var(--um-primary); border-color: var(--um-primary); transform: translateY(-2px); }
.um-btn--on-blue { background: var(--um-white); color: var(--um-primary); }
/* 影は濃紺rgba(13,24,48,0.3)＝ハンドオフ原本の値。黒0.15等に変えない */
.um-btn--on-blue:hover { background: var(--um-white); color: var(--um-primary-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13, 24, 48, 0.3); }

/* ピルバッジ */
.um-pill { border: 1px solid var(--um-primary); color: var(--um-primary); font-size: 12px; font-weight: 500; padding: 4px 16px; border-radius: var(--um-r-pill); }

/* ============================================================
   フォーム
   ============================================================ */
.um-input {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--um-border);
  border-radius: var(--um-r-ui);
  font-family: inherit;
  font-size: 16px;  /* 16px未満にするとiOSで入力時にズームするため下げない */
  line-height: 1.7;
  color: var(--um-text);
  background: var(--um-white);
  transition: border-color var(--um-dur), box-shadow var(--um-dur);
}
.um-input:focus { border-color: var(--um-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); outline: none; }
.um-input--error { border-color: var(--um-error); }
.um-field-error { color: var(--um-error); font-size: 13px; margin: 8px 0 0; }

/* ============================================================
   アクセシビリティ
   ============================================================ */
.um-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* reduced-motion：装飾アニメーションは全停止（DESIGN.md §6） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}