:root{
  /* ========== Colors ========== */
  --c-ink:      #1A474C;  /* 本文テキスト */
  --c-bg:       #fff8f3;  /* 背景ベース */
  --c-surface:  #FFFFFF;  /* カード/ボックス */

  /* アクセント */
  --c-service:  #338998;  /* サービス系アクセント */

  /* リンク */
  --link:       var(--c-brand);
  --link-hover: color-mix(in srgb, var(--link) 88%, #000 12%);

  /* 背景グリッド（任意） */
  --grid-line:     rgba(0,0,0,.05);
  --bg-grid-size:  20px;   /* 罫線ピッチ */
  --bg-grid-attach: fixed; /* モバイルで重いときは scroll に */

  /* ========== Spacing ========== */
  --sp-0:  0;
  --sp-1:  .25rem; /* 4px  */
  --sp-2:  .5rem;  /* 8px  */
  --sp-3:  .75rem; /* 12px */
  --sp-4:  1rem;   /* 16px */
  --sp-6:  1.5rem; /* 24px */
  --sp-8:  2rem;   /* 32px */
  --sp-12: 3rem;   /* 48px */

  /* ========== Typography ========== */
  --lh: 1.7;
  --fz-300:.875rem;
  --fz-400:1rem;
  --fz-500:1.125rem;
  --fz-600:1.25rem;

  /* 見出しスケール */
  --h1: clamp(1.9rem, 4vw, 2.6rem);
  --h2: clamp(1.5rem, 3vw, 2rem);
  --h3: clamp(1.25rem, 2.2vw, 1.5rem);
  --h4: 1.125rem;
  --h5: 1rem;
  --h6: .875rem;

  /* ========== Components ========== */
  --btn-offset: 7px;  /* ハイライト影のオフセット */
  --btn-radius: 0;    /* ボタン角丸（0=角ばり） */
	
/* Sticky Note (付箋) */
  --note-bg:           var(--c-surface);            /* ベース背景色 */
  --note-shadow:       0 4px 6px rgba(0,0,0,.15);   /* 影（持ち上がり感） */
  --note-strip-width:  10px;                        /* 左帯の太さ */
  --note-radius:       var(--radius);               /* 角丸（サイト共通半径に追従） */
  --note-corner-size:  .9rem;                       /* 犬耳（三角折り）のサイズ */
  --note-accent:       var(--c-service);            /* デフォルトの帯・強調色 */

  /* ========== Layout ========== */
  --radius:    .75rem;
  --shadow:    0 6px 18px rgba(0,0,0,.06);
  --container: 1200px;
  --z-header:  10;
}