@layer contents {
  :root {
    --color-base: #404040;
    --color-white: #fff;
    --color-black: #000;
    --color-light-bg: #edebe2;
    --color-primary: #004098;
    --color-gray: #5f5f5f;
    --color-light-gray: #ebebeb;
    --color-lighter-gray: #e0e0e0;
    --color-lighter-gray-02: #ddd;
    --color-dark-brown: #231815;
  }
}

@layer contents {
  :root {
    --font-family-base: "Lato", "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-family-noto: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-size-base: 1rem;
  }
}

@layer contents {
  :root {
    --max-width-xxl: 1512px;
    --max-width-xl: 1136px;
    --max-width-l: 944px;
    --max-width-m: 752px;
  }
}

@layer contents {
  :root {
    --transition-duration: 0.3s;
    --transition-timing-function: ease-out;
    --transition-default: var(--transition-duration) var(--transition-timing-function);
  }
}

@layer contents {

  .u-d-none {
    display: none !important;
  }

  .u-v-hidden {
    visibility: hidden !important;
  }

  @media screen and (max-width: 896px) {
    .u-d-sm-none {
      display: none !important;
    }

    .u-v-sm-hidden {
      visibility: hidden !important;
    }
  }

  @media (min-width: 897px) {
    .u-d-md-none {
      display: none !important;
    }

    .u-v-md-hidden {
      visibility: hidden !important;
    }
  }
}