@charset "utf-8";

@layer reset, base, component, project, combined-utility, single-utility;

@layer base {
  body {
    font-family: 'Noto Serif JP', serif;
    letter-spacing: 0.1rem;
  }

  img {
    height: auto;
    width: min(750px, 100%);
  }
}

@layer project {
  .p-frame {
    margin-inline: auto;
    max-width: 760px;
  }
}

@layer combined-utility {
  .u-text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .u-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .u-text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .u-text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .u-text-4-5xl {
    font-size: 2.625rem;
    line-height: 2.92rem;
  }

    .u-sm-text-6xl {
font-size: 2.8rem;;
line-height: 3rem;
    }


  @media (min-width: 480px) {
    .u-sm-text-2xl {
      font-size: 1.5rem;
      line-height: 2rem;
    }

    .u-sm-text-3xl {
      font-size: 1.875rem;
      line-height: 2.25rem;
    }

    .u-sm-text-4xl {
      font-size: 2.25rem;
      line-height: 2.5rem;
    }

    .u-sm-text-4-5xl {
      font-size: 2.625rem;
      line-height: 2.92rem;
    }

    .u-sm-text-6xl {
      font-size: 2.8rem;
line-height:3rem;
    }

    .u-sm-text-7-5xl {
      font-size: 5.25rem;
      line-height: 1;
    }
  }
}

@layer single-utility {
  .u-leading-0 {
    line-height: 0;
  }

  .u-leading-relaxed {
    line-height: 1.75;
  }

  .u--ml-3 {
    margin-left: -12px;
  }

  @media (min-width: 480px) {
    .u-sm--ml-5 {
      margin-left: -20px;
    }
  }

  .u-mt-5 {
    margin-top: 20px;
  }

  .u-mt-30 {
    margin-top: 120px;
  }

  @media (min-width: 480px) {
    .u-sm-mt-8 {
      margin-top: 32px;
    }
  }

  .u-text-center {
    text-align: center;
  }
}