/* =========================================================
   サイト全体で共通使用する色・書体・幅・影などの変数
========================================================= */

/* =========================================================
   START FROM 39
   DESIGN TOKENS / GLOBAL VARIABLES
========================================================= */

:root {
  /* =========================================================
     01. BRAND COLORS
  ========================================================= */
  --sf-green: #2f5f57;
  --sf-green-dark: #173f38;
  --sf-green-soft: #6f8f85;
  --sf-emerald: #2e7d70;
  --sf-gold: #c8a55d;
  --sf-gold-soft: #e0c38c;
  --sf-terracotta: #b8735c;
  --sf-terracotta-soft: #e6c9b8;
  /* =========================================================
     02. BACKGROUND / SURFACE COLORS
  ========================================================= */
  --sf-white: #fff;
  --sf-ivory: #f7f5ef;
  --sf-cream: #eee8dc;
  --sf-warm-beige: #efe7da;
  --sf-surface-warm: #fdfcf9;
  --sf-gold-pale: #faf8f3;
  /* =========================================================
     03. TEXT COLORS
  ========================================================= */
  --sf-ink: #292d2b;
  --sf-text: #333;
  --sf-text-soft: #666;
  --sf-muted: #6f746f;
  /* =========================================================
     04. LINE / BORDER COLORS
  ========================================================= */
  --sf-line: #ded8ca;
  --sf-border: #e7e4dc;
  --sf-green-line: #dce9e5;
  /* =========================================================
     05. ALERT COLORS
  ========================================================= */
  --sf-alert: #d9534f;
  --sf-alert-bg: #fff3f3;
  /* =========================================================
     06. TYPOGRAPHY
  ========================================================= */
  --sf-serif: "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  --sf-sans: "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    sans-serif;
  --sf-script: "Snell Roundhand",
    "Segoe Script",
    cursive;
  /* =========================================================
     07. CONTENT WIDTH
  ========================================================= */
  --sf-container: 1180px;
  --sf-narrow: 820px;
  --sf-mobile-gutter: 22px;
  /* =========================================================
     08. SHADOWS
  ========================================================= */
  --sf-shadow: 0 18px 50px rgba(27, 54, 49, 0.09);
  --sf-shadow-hover: 0 16px 32px rgba(23, 63, 56, 0.14);
  /* =========================================================
     09. MOTION / INTERACTION
  ========================================================= */
  --sf-motion: 0.28s cubic-bezier(0.2, 0.65, 0.3, 1);
  --sf-lift: -5px;
  --sf-press: -1px;
}