/* variables */

:root {
  /* colors */
  /* TODO: 限定的なものが混ざっているので整理する */

  --g-color--blue: #142f54;
  --g-color--blue--pro: #3684cd;
  --g-color--blue--student: #0044a8;

  --g-color--blue--strong: #5faff9;
  --g-color--blue--light: #7099d0;

  --g-color--gray: #b8b8b8;
  --g-color--gray--light: #f4f4f4;

  --g-color--white: #fff;

  --g-color--text: #333333;
  --g-color--text--strong: #faff00;

  --g-color--heading--blue: #2e5a96;

  --g-color--cv: #00b2c6;
  --g-color--cv--strong: #4eedff;

  --g-color--curriculum-1: #70b9e2;
  --g-color--curriculum-2: #4bb7be;
  --g-color--curriculum-3: #6eceac;

  /* font sizes */

  --g-fz--h1: 2.4rem;
  --g-fz--h2: 2.2rem;
  --g-fz--h3: 2rem;
  --g-fz--h4: 1.8rem;
  @media (min-width: 1024px) {
    --g-fz--h1: 4rem;
    --g-fz--h2: 3rem;
    --g-fz--h3: 2.4rem;
    --g-fz--h4: 2rem;
  }

  --g-fz--p1: 1.6rem;
  --g-fz--p2: 1.4rem;
  --g-fz--p3: 1.2rem;
  --g-fz--p4: 1rem;
  @media (min-width: 1024px) {
    --g-fz--p1: 1.8rem;
    --g-fz--p2: 1.6rem;
    --g-fz--p3: 1.4rem;
    --g-fz--p4: 1.2rem;
  }

  /* font families */

  --g-ff--noto-sans-jp: "Noto Sans JP", sans-serif;

  /* widths */

  --g-width--max: 192rem;
  --g-width--max-content: 110rem;
  --g-width--content-lg: 70rem;
  --g-width--content-md: 55rem; /* 暫定 */
  --g-width--content-sm: 36.6rem; /* 暫定 */
  --g-width--content-xs: 27.5rem; /* 暫定 */

  /* heights */

  --g-height--navbar: 5rem;
  @media (min-width: 1024px) {
    --g-height--navbar: 8rem;
  }

  /* spaces */

  --g-space--between-section: 5rem;
  --g-space--between-section--v-2: 2.5rem;
  @media (min-width: 1024px) {
    --g-space--between-section: 10rem;
    --g-space--between-section--v-2: 5rem;
  }
}

/*  */

html {
  scroll-behavior: smooth;
  scroll-padding: var(--g-height--navbar);
  font-size: 10px;
}

body {
  line-height: 1.5;
  font-size: var(--g-fz--p1);
  font-family: var(--g-ff--noto-sans-jp);
  font-weight: 400;
  color: var(--g-color--text);
  @media (min-width: 1024px) {
    line-height: 1.8;
  }
}

h1 {
  font-size: var(--g-fz--h1);
}
h2 {
  font-size: var(--g-fz--h2);
}
h3 {
  font-size: var(--g-fz--h3);
}
h4 {
  font-size: var(--g-fz--h4);
}

a,
button {
  transition: opacity 0.25s;
  &:hover {
    opacity: 0.75;
  }
}

button {
  cursor: pointer;
}