@charset "UTF-8";

/**
 * variables
 */
:root {
  /* --- colors --- */
  --color-theme: #134986;
  --color-theme-shadow: #003065;
  --color-theme-pale: #afcbe0;
  --color-theme-light: #F6F7FF;
  --color-link: #0c4482;
  --color-admonition: #d60000;
  --color-accent: #eb6605;
  --color-highlight: #ff7f00;
  --color-highlight-shadow: #cd6600;
  --color-black: #000;
  --color-gray: #aaa;
  --color-white: #fff;
  --color-plae-white: #f2ffff;
  --color-base: var(--color-black);
  --color-border: var(--color-gray);

  /* --- fonts --- */
  --font-ja: "Noto Sans JP", sans-serif;
  --font-ja-serif: "Noto Serif JP", serif;

  /* --- container size --- */
  --container-fluid: 100%;
  --container-wide-value: 1440;
  --container-wide: calc(var(--container-wide-value) * 1px);
  --container-middle-value: 1180;
  --container-middle: calc(var(--container-middle-value) * 1px);
  --container-narrow-value: 600;
  --container-narrow: calc(var(--container-narrow-value) * 1px);

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

  /* --- space / gutter --- */
  --global-spacer: 20px;
  --global-gutter: 20px;
  --wp--style--root--padding-left: 0;
  --wp--style--root--padding-right: 0;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  :root {
    --rate: 100vw / 390;
    --cqi: 100cqi / 390;
  }
}
@media screen and (max-width: 960px) {
  :root {
    /* --- space / gutter --- */
    /* --global-gutter: 20px; */
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  :root {
    --rate: .1rem;
    --cqi: 100cqi / 1440;
  }
}
@media screen and (min-width: 961px) {
  :root {
  }
}