:root {
	/*
  font
  */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
		sans-serif;
	/* 
    -apple-system: macOSのSan Francisco (iOSも含む)
    BlinkMacSystemFont: macOSの古いフォント (fallback)
    "Segoe UI": Windows
    Roboto: Android
    "Helvetica Neue": macOS用のフォント (古いバージョンで使われることが多い)
    Arial: Fallbackフォント (Linuxなど)
    sans-serif: 最後のデフォルト
  */

	/*
  spacing
  */
	--s-xs: 4px;
	--s-s: 8px;
	--s-xm: 12px;
	--s-m: 20px;
	--s-l: 32px;
	--s-xl: 48px;
	--s-2xl: 60px;
	--s-3xl: 90px;
	/*
  color
  */
	--c-black: #000000;
	--c-white: #ffffff;
	--c-white-m15: rgba(255, 255, 255, 0.15);
	--c-white-m30: rgba(255, 255, 255, 0.3);
	--c-white-m60: rgba(255, 255, 255, 0.6);
	--c-gray100: #e9e9e9;
	--c-gray200: #d3d3d3;
	--c-gray300: #bdbdbd;
	--c-gray500: #989898;
	--c-gray900: #333333;
	--c-blue900: #01162c;
	--c-blue800: #01264d;
	--c-blue500: #4da0f8;
	--c-blue400: #6ab2ff;
	--c-green300: #def190;
	--iconic-gray: #263032;
	--c-orange600: #ffa959;
	--c-orange200: #ffebd4;
	/*
  font-size
  */
	--fs-xs: 10px;
	--fs-s: 12px;
	--fs-sm: 14px;
	--fs-m: 16px;
	--fs-l: 18px;
	--fs-xl: 20px;
	--fs-2xl: 24px;
	--fs-3xl: 32px;
	--fs-4xl: 48px;

	/*
  font-weight
  */
	--fw-bold: 700;
	--fw-normal: 500;
	/*
  border-radius
  */
	--radius-s: 3px;
	--radius-m: 12px;
	--radius-xl: 24px;
	--radius-2xl: 48px;
	--radius-circle: 100%;
	--radius-full: 9999px;

	/*
line-height
  */
	--lh-fit: 1;
	--lh-narrow: 1.2;
	--lh-normal: 1.5;
	--lh-wide: 2;

	/*
gradient
  */
	--gradient-blue: radial-gradient(
		circle farthest-corner at 10% 20%,
		rgba(2, 37, 78, 1) 0%,
		rgba(4, 56, 126, 1) 19.7%,
		rgba(85, 245, 221, 1) 100.2%
	);
	/*
transition
  */
	--transition-s: 0.2s;
}