body {
  margin: 0;
  line-height: normal;
}

:root {
  /* Common Style Variables */

  /* Color */
  --base-Line: #cdcdcd;
  --base-White: #fff;
  --color-chocolate: #cc6100;
  --color-gainsboro: #e6e6e6;
  /* Figma(menu/global) に合わせて 239 に調整 */
  --color-linen: rgba(248, 239, 227, 0.7);
  --helper-dark-brown: #62574d;
  --helper-ivory-2: #f8efe3;
  --helper-ivory-25: #f1e3d1;
  --main-green: #22bb99;
  --main-orangelight: #ff9500;

  /* Gap */
  --gap-8: 8px;
  --gap-11: 11px;
  --gap-15: 15px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-26: 26px;
  --gap-32: 32px;
  --gap-36: 36px;
  --gap-40: 40px;
  --gap-72: 72px;

  /* Padding */
  --padding-0: 0px;
  --padding-8: 8px;
  --padding-10: 10px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-20: 20px;
  --padding-24: 24px;
  --padding-26: 26px;
  --padding-30: 30px;
  --padding-32: 32px;
  --padding-36: 36px;
  --padding-40: 40px;
  --padding-64: 64px;

  /* BorderRadius */
  --br-20: 20px;
  --br-40: 40px;
  --br-80: 80px;
  --br-100: 100px;

  /* Font */
  --font-noto-sans-jp: Noto Sans JP;

  /* FontSize */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-32: 32px;

  /* WidthHeights */
  --height-16: 16px;
  --height-24: 24px;
  --height-40: 40px;
  --height-45: 45px;
  --height-48: 48px;
  --height-64: 64px;
  --height-72: 72px;
  --height-96: 96px;
  --height-100: 100px;
  --height-160: 160px;
  --width-24: 24px;
  --width-48: 48px;
  --width-72: 72px;
  --width-100: 100px;
  --width-160: 160px;
  --width-1440: 1440px;

  /* LineHeights */
  --lh-22: 22px;
  --lh-26: 26px;
  --lh-27: 27px;
  --lh-36: 36px;

  /* LetterSpacings */
  --ls-0_1: 0.1;

  --left-0: 0px;
  --left-20: 20px;
  --left-30: 30px;
  --left-56: 56px;
  --top-0: 0px;
  --top-18: 18px;
  --top-30: 30px;
  --top-66: 66px;
}

/* アンカー遷移(#features等)で見出しがヘッダーに隠れないようにする */
html {
  scroll-padding-top: 72px;
}