@layer base {
  html {
    font-size: 62.5%;
    /* scroll-behavior: smooth; */
  }

  body {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-normal);
    font-size: 1.6rem;
    color: var(--color-text);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.2;
    font-feature-settings: "palt" 1;
    font-kerning: normal;
    letter-spacing: .1em;
  }

  p {
    line-height: 1.8;

    /*  &+p {
      margin-top: 1em;
    }*/
    margin-bottom: 1em;
    ;

  }

  h1,
  h2 {
    margin-bottom: 0.5em;

  }

  h3,
  h4,
  h5 {
    margin-bottom: .8em;
  }

  ul,
  ol,
  dl,
  details {
    line-height: 1.45;

  }


  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  a {
    transition: color 0.2s ease;
  }

  /* サイト共通：テキストリンクの下線アニメーション（左→右） */
 /* a:not([class]) {*/
 a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition:
      background-size 0.2s ease,
      color 0.23s ease;
  }

  a:hover {
    background-size: 100% 1px;
  }

  @media screen and (max-width: 480px) {
    body {
      font-size: 1.4rem;
    }
  }
}