// Override default typography(CSS variables)
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
  font-family: "Noto Sans JP", -apple-system, blinkmacsystemfont, "Segoe UI", meiryo, sans-serif;

  &.text-black { color: #1A1A1C; }
}

.layout-container, #content {
  font-weight: 400;

  .h1, .h2, .h3, .h4, .h5, .h6,
  h2.home__section-title {
    font-weight: 600;
  }

  .h1,
  h1.title-decorator {
    font-size: 2.25rem; 
    line-height: 1.4;

    @media (min-width: 768px) {
      font-size: 2.75rem;
      line-height: 1.4;
    } 
  }

  .h2,
  h2.home__section-title {
    font-size: 1.75rem;
    line-height: 1.5;
    letter-spacing: .1px;

    @media (min-width: 768px) {
      font-size: 2rem;
      line-height: 1.5;
      letter-spacing: .1px;
    }
  }

  .h3 {
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1.6rem;
      line-height: 1.5;
      letter-spacing: .2px;
    }
  }

  .h4 {
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1.35rem;
      line-height: 1.5;
      letter-spacing: .2px;
    }
  }

  .h5 {
    font-size: 1.06rem;
    line-height: 1.7;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1.2rem;
      line-height: 1.6;
      letter-spacing: .2px;
    }
  }

  .h6 {
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1rem;
      line-height: 1.7;
      letter-spacing: .2px;
    }
  }
}


.editor-content,
.content-block,
.content-block__description {
  h2,h3,h4,h5,h6 {
    margin-bottom: inherit;
    font-weight: 600;
  }

  h2 {
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1.75rem;
      line-height: 1.5;
      letter-spacing: .1px;
    }
  }
  h3 {
    font-size: 1.5rem;
    line-height: 1.5;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1.6rem;
      line-height: 1.5;
      letter-spacing: .2px;
    }
  }
  h4 {
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1.35rem;
      line-height: 1.5;
      letter-spacing: .2px;
    }
  }
  h5 {
    font-size: 1.06rem;
    line-height: 1.7;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1.2rem;
      line-height: 1.6;
      letter-spacing: .2px;
    }
  }
  h6 {
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1rem;
      line-height: 1.7;
      letter-spacing: .2px;
    }
  }

  p, li {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .2px;

    @media (min-width: 768px) {
      font-size: 1rem;
      line-height: 1.75;
      letter-spacing: .2px;
    }
  }
}

.content-block__description {
  a { color: var(--secondary); }
  em { font-style: normal; }
}
