@layer contents {
  :root {
    --color-primary: #1f6fc6;
    --color-secondary: #024da1;
    --color-white: #fff;
    --color-black: #000;
    --color-gray-dark: #333;
    --color-gray: #6c7683;
    --color-gray-medium: #c9d3db;
    --color-gray-light: #e3e8ec;
    --color-gray-light-medium: #e4ebf3;
    --color-gray-lighter: #f1f5f9;
    --color-gray-darker: #030d19;
    --color-gray-light-dark: #0c2038;
    --color-gray-cool: #c8d3de;
    --color-gray-hover: #ccc;
    --color-checkbox-border: #a1b5cb;
    --color-button-accordian: #f8fafc;
    --color-button-secondary: #cbd9e7;
    --color-red: #d0021b;
    --color-blue-01: #1f8cc6;
    --color-blue-02: #1fa6c6;
    --color-blue-03: #f0f4f8;
    --color-blue-04: #a2cbe1;
    --color-blue-05: #1c69b9;
    --color-blue-06: #004da1;
    --color-green-01: #4abcbc;
    --color-green-02: #84c3ab;
    --color-green-03: #4bbcbc;
    --color-green-04: #1fa5c6;
    --gradient-footer-01: linear-gradient(#1e3b59 0%, #2c3239 100%);
    --gradient-footer-02: linear-gradient(#1f6fc6 0%, #134174 22.66%, #2b3238 100%);
  }
}

@layer contents {
  :root {
    --font-family: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --font-family-inter: "Inter", "Helvetica Neue", arial, sans-serif;
    --font-family-montserrat: "Montserrat", "Helvetica Neue", arial, sans-serif;
    --font-family-rockwell: "Rockwell", serif;
    --font-size-base: 1rem;
  }
}

@layer contents {
  :root {
    --max-width-xxxl: 1600px;
    --max-width-xxl: 1440px;
    --max-width-xl: 1170px;
    --max-width-lg: 970px;
    --max-width-md: 870px;
    --desktop-content-width: 1210px;
    --desktop-content-width-narrow: 910px;
  }
}

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

@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;
    }
  }
}