@charset "UTF-8";

/**
 * variables
 */
:root {
  /* --- colors --- */
  --color-theme: #234D80;
  --color-theme-pale: #426FA8;
  --color-theme-light: #1A8CCD;
  --color-highlight: #FF9D00;
  --color-black: #000000;
  --color-white: #FFF;
  --color-dark: #333333;
  --color-deep-gray: #707070;
  --color-middle-gray: #969696;
  --color-light-gray: #F6F9FC;
  --color-light-beige: #FEF8EB;
  --color-soft-white: #F0F0F0;

  /* --- fonts --- */
  --font-combine: "Josefin Sans", "Noto Sans JP", sans-serif;
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Josefin Sans", sans-serif;

  /* --- container size --- */
  --container-fluid: 100%;
  --container-wide-value: 1920;
  --container-wide: calc(var(--container-wide-value) * 1px);
  --container-middle-value: 1400;
  --container-middle: calc(var(--container-middle-value) * 1px);
  --container-narrow-value: 1200;
  --container-narrow: calc(var(--container-narrow-value) * 1px);

  /* --- utility --- */
  --box-shadow-standard: 0px 8px 8px rgba(0, 0, 0, .15);
  --transition-default: .3s ease;
  --zindex-behind: -1;
  --zindex-base: 0;
  --zindex-front: 1;
  --zindex-overlay: 10;
  --zindex-floating-element: 20;
}

/* --- for small viewport --- */
@media screen and (max-width: 960px) {
  :root {
    /* --- space / gutter --- */
    --global-gutter: 10px;
  }
}