:root {
  /* Fonts */
  font-family: 'Zen Kaku Gothic New', sans-serif;

  /* Font Colors */
  --text-body: #1a1a1c;
  --text-description: #626264;
  --text-placeholder: #757578;
  --text-link: #003ee5;
  --text-link-visited: #0000be;
  --text-alert: #ec0000;
  --text-disabled: #949497;

  /* Colors */
  --main-green: #269b5e;
  --main-light-green: #4fb9a6;
  --main-red: #e7230f;
  --main-yellow: #fcdd7a;
  --main-orange: #eb6543;
  --main-blue: #3c9be3;
  --main-navy: #2d68ac;
  --body-black: #1a1a1c;
  --body-description: #b2b2b2;
  --body-base: #f9f9f9;
  --base-white: #ffffff;
}

/* Font Style */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  color: var(--text-body);
  line-height: 1.5;
}

h1 {
  font-size: 42px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 26px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
}

button {
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Layout */
main {
  padding-top: 125px !important;
  padding-bottom: 104px !important;
}

.container {
  width: 1024px !important;
  margin: 0 auto !important;
}

@media screen and (max-width: 1024px) {
  /* Font Style */
  h1,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: 4%;
  }

  h1 {
    font-size: 26px;
  }

  h2 {
    font-size: 24px;
    font-weight: 400;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 20px;
  }

  h5 {
    font-size: 18px;
  }

  h6 {
    font-size: 16px;
  }

  p {
    font-size: 16px;
  }

  /* Layout */
  main {
    padding-top: 80px !important;
  }
  .container {
    width: 375px !important;
    padding: 0 16px !important;
  }
}