@charset "UTF-8";

:root {
  /* ===== プリミティブ ===== */

  /* ===== ポップパターン プリミティブカラー グレースケール===== */
  --color-white: #fff;
  --color-black: #000;
  --color-gray-900: #1d1d1d;
  --color-gray-800: #333;
  --color-gray-700: #3d3d3d;
  --color-gray-600: #4d4d4d;
  --color-gray-500: #919191;
  --color-gray-400: #aeaeae;
  --color-gray-300: #c5c5c5;
  --color-gray-200: #d9d9d9;
  --color-gray-100: #eee;

  /* ===== ポップパターン プリミティブカラー オレンジ===== */
  --color-orange-50: #ffefd7;
  --color-orange-100: #ffad5c;
  --color-orange-200: #ff8f5c;
  --color-orange-300: #fd7d43;
  --color-orange-400: #f4881c;

  /* ===== ポップパターン プリミティブカラー 黄色===== */
  --color-yellow-50: #fffbe9;
  --color-yellow-100: #fffbcd;
  --color-yellow-200: #feffb0;
  --color-yellow-300: #ffe145;
  --color-yellow-400: #ffcf76;
  --color-yellow-500: #ffc225;

  /* ===== ポップパターン プリミティブカラー ライム===== */
  --color-lime-100: #fdffcd;
  --color-lime-300: #e8f679;

  /* ===== ポップパターン プリミティブカラー 緑===== */
  --color-green-50: #eefff6;
  --color-green-100: #deffee;
  --color-green-200: #b0f4d6;
  --color-green-300: #9be8d6;
  --color-green-400: #6de1cd;
  --color-green-500: #65d9be;
  --color-green-600: #4cc4b0;
  --color-green-700: #37b7a2;

  /* ===== ポップパターン プリミティブカラー 青===== */
  --color-blue-50: #eef9ff;
  --color-blue-100: #dff3ff;
  --color-blue-200: #beefff;
  --color-blue-300: #a7dfff;
  --color-blue-400: #99e9ff;
  --color-blue-500: #73c2fb;
  --color-blue-600: #66c3f9;
  --color-blue-700: #50b3ec;
  --color-blue-800: #26a1e8;

  /* ===== ポップパターン プリミティブカラー 紫===== */
  --color-purple-300: #b592f3;
  --color-purple-400: #ad7ad4;

  /* ===== ポップパターン プリミティブカラー ピンク===== */
  --color-pink-50: #fff6f8;
  --color-pink-100: #fbf1f0;
  --color-pink-200: #ffd4df;
  --color-pink-300: #ffc5bf;
  --color-pink-400: #ff9eab;
  --color-pink-450: #fc8898;
  --color-pink-500: #ff74a7;
  --color-pink-600: #ff7d9e;
  --color-pink-700: #ff5981;

  /* ===== ポップパターン プリミティブカラー 青紫===== */
  --color-periwinkle-100: #b3c5ff;

  /* ===== ポップパターン プリミティブカラー コーラル===== */
  --color-coral-100: #ffc4c5;

  /* ===== 余白 ===== */
  --padding-0: 0;
  --padding-2: 0.125rem;
  --padding-4: 0.25rem;
  --padding-6: 0.375rem;
  --padding-8: 0.5rem;
  --padding-12: 0.75rem;
  --padding-16: 1rem;
  --padding-20: 1.25rem;
  --padding-24: 1.5rem;
  --padding-32: 2rem;
  --padding-40: 2.5rem;
  --padding-48: 3rem;
  --padding-56: 3.5rem;
  --padding-64: 4rem;
  --padding-72: 4.5rem;
  --padding-80: 5rem;
  --padding-88: 5.5rem;
  --padding-96: 6rem;
  --padding-104: 6.5rem;

  /* ===== 余白 ===== */
  --side-padding-pc: var(--padding-24);
  --side-padding-sp: var(--padding-16);
  --section-gap-pc: var(--padding-56);
  --section-gap-sp: var(--padding-56);

  /* ===== 幅 ===== */
  --content-width: 920px;

  /* ===== 間隔 ===== */
  --gap-0: 0;
  --gap-2: 0.125rem;
  --gap-4: 0.25rem;
  --gap-6: 0.375rem;
  --gap-8: 0.5rem;
  --gap-12: 0.75rem;
  --gap-16: 1rem;
  --gap-20: 1.25rem;
  --gap-24: 1.5rem;
  --gap-32: 2rem;
  --gap-40: 2.5rem;
  --gap-48: 3rem;
  --gap-56: 3.5rem;
  --gap-72: 4.5rem;
  --gap-auto: auto;

  /* ===== 角丸 ===== */
  --border-radius-none: 0;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 16px;
  --border-radius-full: 9999px;

  /* ===== フォントの太さ ===== */
  --font-weight-char-regular: 400;
  --font-weight-char-medium: 500;
  --font-weight-char-semibold: 600;
  --font-weight-char-bold: 700;

  /* ===== フォントサイズ ===== */
  --font-size-10: 0.625rem;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-42: 2.625rem;
  --font-size-48: 3rem;
  --font-size-54: 3.375rem;

  /* ===== フォントサイズ ===== */
  --fs-en-heading: var(--font-size-18);
  --fs-jp-heading: var(--font-size-24);
  --fs-jp-heading-sp: var(--font-size-20);
  --fs-base: var(--font-size-16);
  --fs-small: var(--font-size-12);
  --fs-large: var(--font-size-18);

  /* ===== 文字高さ ===== */
  --line-height-16: 1rem;
  --line-height-20: 1.25rem;
  --line-height-24: 1.5rem;
  --line-height-28: 1.75rem;
  --line-height-32: 2rem;
  --line-height-36: 2.25rem;
  --line-height-44: 2.75rem;
  --line-height-48: 3rem;
  --line-height-56: 3.5rem;
  --line-height-64: 4rem;
  --line-height-72: 4.5rem;
  --line-height-84: 5.25rem;

  /* ===== 文字間隔 ===== */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ===== ブレイクポイント（JS参照用コメント）=====
       header: 1100px / other sections: 768px */
  --header-height: 86px;
  /* ===== セマンティック ===== */

  /* ===== カラー（モノトーン仮値）===== */
  --color-bg: #fff;
  --color-bg-sub: #f2f2f2;
  --color-text: #333;
  --color-text-sub: #777;
  --color-border: #ccc;
  --color-line: #999;
  --color-placeholder: #ddd;
  --color-placeholder-dark: #bbb;
  --btn-primary-bg: var(--color-green-700);
  --btn-primary-text: var(--color-white);
  --btn-primary-bg-hover: var(--color-green-600);
  --bg-pattern-base: var(--color-white);
  --bg-pattern-soft: var(--color-green-100);
  --bg-pattern-pop: var(--color-lime-300);
  --bg-pattern-mid: var(--color-green-500);
  --bg-pattern-deep: var(--color-green-700);
  --text-pattern-mid: var(--color-white);
  --text-pattern-deep: var(--color-white);
}