/* ============================================================
   Big11 Design Tokens
   全ページ共通のデザイン変数。色・余白・書体・動きはここでのみ定義し、
   各ページのCSSは必ずこの変数を参照すること。
   ============================================================ */

:root {
  /* ---- Color ---- */
  --white: #FFFFFF;
  --offwhite: #FAFAF7;
  /* グリーン系: CyberAgentロゴ系統の黄緑(#6FBA2C)を基調とした明るいトーン。
     --green-deep はボタン・リンク等で白文字を載せるため、コントラスト比4.5:1以上を保つ濃さにしてある */
  --green-deep: #3F7A14;
  --green: #6FBA2C;
  --green-soft: #9ED462;
  --green-pale: #EDF6E2;
  --green-mist: #F5FAEE;
  --text: #1A1A1A;
  --text-soft: #4A4A46;
  --text-mute: #8A8A84;
  --border: #E4E4DE;
  --gold: #B8860B; /* 差し色。旧サイト(big11scc.com)のロゴと同色。CTA・ロゴ等の極小面積のみで使用 */

  --grad-green: linear-gradient(135deg, var(--green-deep) 0%, var(--green-soft) 100%);

  /* ---- Typography ---- */
  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-logo: "Cormorant Garamond", Georgia, serif; /* ロゴタイプ（旧サイト踏襲） */

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 3rem;      /* 48px */
  --fs-hero: clamp(1.6rem, 4.5vw, 3.2rem);
  --fs-title: clamp(1.5rem, 3.2vw, 2.25rem);

  --lh-tight: 1.35;
  --lh-base: 1.9;
  --lh-loose: 2.2;

  --ls-wide: 0.12em;
  --ls-base: 0.05em;

  /* ---- Spacing ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6rem;
  --sp-section: clamp(4.5rem, 10vw, 8rem); /* セクション上下余白 */

  /* ---- Layout ---- */
  --container: 1120px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Shape / Shadow ---- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 12px rgba(26, 26, 26, 0.05);
  --shadow: 0 8px 30px rgba(63, 122, 20, 0.10);
  --shadow-lift: 0 14px 40px rgba(63, 122, 20, 0.16);

  /* ---- Motion（控えめ・上品に統一） ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;
  --dur-fast: 0.3s;
  --reveal-shift: 28px; /* スクロール出現時の移動量 */
}