/* //////////////////////////////////////////////////

Title : variables.scss
For   : bell-c/

Created       : 2025-10-29
Last Modified : 2025-10-29

==========================================

Content

////////////////////////////////////////////////// */
/**
 * variables
 */
:root {
  /* --- colors --- */
  --color-primary: #063488;
  --color-secondary: #3768c0;
  --color-tertiary: #58bdeb;
  --color-background-default: #ebf7fc;
  --color-background-gradient: linear-gradient(to right top, var(--color-primary), var(--color-secondary));
  --color-admonition: #d60000;
  --color-black: #313131;
  --color-light-gray: #e2eaee;
  --color-white: #fff;
  --color-base: var(--color-black);
  /* --- fonts --- */
  --font-ja-vaule: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo;
  --font-en-vaule: "Poppins";
  --font-ja: var(--font-ja-vaule), sans-serif;
  --font-en: var(--font-en-vaule), sans-serif;
  --font-combine: var(--font-en-vaule), var(--font-ja-vaule), sans-serif;
  /* --- container size --- */
  --container-fluid: 100%;
  --container-widest-value: 1920;
  --container-widest: calc(var(--container-widest-value) * var(--rate));
  --container-wide-value: 1700;
  --container-wide: calc(var(--container-wide-value) * var(--rate));
  --container-middle-value: 1440;
  --container-middle: calc(var(--container-middle-value) * var(--rate));
  /* --- utility --- */
  --opacity-default: .7;
  --transition-default: 0.3s ease;
  --zindex-behind: -1;
  --zindex-base: 0;
  --zindex-front: 1;
  --zindex-overlay: 10;
  --zindex-floating-element: 20;
  /* --- space / gutter --- */
  --global-gutter: calc(30 * var(--rate));
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  :root {
    --rate: 100vw / 767;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  :root {
    --rate: 0.1rem;
  }
}
/*# sourceMappingURL=variables.css.map */