:root {
  --color-base: #001F3D;
  --color-base-rgb:0, 31, 61;
  --color-outline: #001F3D;
  --color-outline-rgb:0, 31, 61;
  --color-primary: #00D9FF;
  --color-primary-rgb:0, 217, 255;
  --color-primary-dark: #00A7D1;
  --color-primary-dark-rgb:0, 167, 209;
  --color-attention: #E5001A;
  --color-attention-rgb:229, 0, 26;
  --color-inactive: #888888;
  --color-inactive-rgb:136, 136, 136;
  --color-bg-inactive: #F5F5F5;
  --color-bg-inactive-rgb:245, 245, 245;
  --color-border-inactive: #CCCCCC;
  --color-border-inactive-rgb:204, 204, 204;
  --color-light: #ffffff;
  --color-light-rgb:255, 255, 255;
  --color-dark: #000000;
  --color-dark-rgb:0, 0, 0;
  --color-border: #B2D4E5;
  --color-border-rgb:178, 212, 229;
  --color-shadow: #B2D4E5;
  --color-shadow-rgb:178, 212, 229;
  --color-bg-base: #ffffff;
  --color-bg-base-rgb:255, 255, 255;
  --color-bg-dark: #001F3D;
  --color-bg-dark-rgb:0, 31, 61;
  --color-bg-pale: #E8F7FF;
  --color-bg-pale-rgb:232, 247, 255;
  --color-bg-pale2: #F8F8F8;
  --color-bg-pale2-rgb:248, 248, 248;
  --color-stack1: #003D79;
  --color-stack1-rgb:0, 61, 121;
  --color-stack2: #2382AF;
  --color-stack2-rgb:35, 130, 175;
  --color-stack3: #8385B5;
  --color-stack3-rgb:131, 133, 181;
}

:root {
  --typography-base-font-family: var(--ff-sans-serif);
  --typography-base-font-weight: 500;
  --typography-base-font-size: 1.375rem;
  --typography-base-line-height: 1.7272727273;
  --typography-base-letter-spacing: 0.05em;
}
@media (width <= 768px) {
  :root {
    --typography-base-font-size: 1.125rem;
    --typography-base-line-height: 1.7777777778;
  }
}

:root {
  --space-inline: 70px;
  --space-inline-negative: calc(var(--space-inline) * -1);
}
@media (width <= 1400px) {
  :root {
    --space-inline: 40px;
  }
}
@media (width <= 768px) {
  :root {
    --space-inline: 15px;
  }
}

:root {
  --space-block-xl: 120px;
  --space-block-xl-half: calc(var(--space-block-xl) / 2);
  --space-block-lg: 100px;
  --space-block-md: 100px;
  --space-block-sm: 80px;
  --space-block-xs: 40px;
  --space-block-xxs: 20px;
  --space-block-xxxs: 7px;
  --space-block-xl-trim: calc(var(--space-block-xl) - var(--half-leading));
  --space-block-xl-half-trim: calc(var(--space-block-xl-half) - var(--half-leading));
  --space-block-lg-trim: calc(var(--space-block-lg) - var(--half-leading));
  --space-block-md-trim: calc(var(--space-block-md) - var(--half-leading));
  --space-block-sm-trim: calc(var(--space-block-sm) - var(--half-leading));
  --space-block-xs-trim: calc(var(--space-block-xs) - var(--half-leading));
  --space-block-xxs-trim: calc(var(--space-block-xxs) - var(--half-leading));
  --space-block-xxxs-trim: calc(var(--space-block-xxxs) - var(--half-leading));
}
@media (width <= 1000px) {
  :root {
    --space-block-xl: 60px;
    --space-block-lg: 50px;
    --space-block-md: 50px;
    --space-block-sm: 40px;
    --space-block-xs: 20px;
    --space-block-xxs: 10px;
    --space-block-xxxs: 5px;
  }
}
:root {
  --ff-zenkaku: "Zen Kaku Gothic New", sans-serif;
  --ff-grotesk: "Hanken Grotesk", sans-serif;
  --ff-sans-serif: var(--ff-zenkaku);
  --ff-sans-serif2: var(--ff-grotesk);
  --letter-spacing: 0.05em;
  --site-width: 1000px;
  --site-width2: 1200px;
  --content-width: 920px;
  --vw100: calc(100vw - var(--scrollbar-width, 0));
  --vw: calc(var(--vw100) / 100);
  --site-outer: max(0px, calc((var(--vw100) - var(--site-width)) / 2));
  --site-gutter: max(var(--site-outer), var(--space-inline));
  --header-size-small: 100px;
  --header-size-large: 170px;
  --scroll-adjust: var(--header-size-small);
  --header-z-index: 5000;
  --footer-adjust: 50px;
  --min-device-width: 360px;
  --sec: 0.5s;
  --sec-fast: 0.2s;
  --sec-slow: 1s;
  --opacity: 0.6;
  --zoom: 1.1;
  --radius: 10px;
  --radius-large: 18px;
  --line-height-small: 1.4285714286;
  --ascender: 0.15em;
  --half-leading: calc((1lh - 1em) / 2);
  --half-leading-trim: calc(var(--half-leading) * -1);
}
@media (width <= 1400px) {
  :root {
    --header-size-large: var(--header-size-small);
  }
}
@media (width <= 768px) {
  :root {
    --header-size-small: 76px;
  }
}
@media (width <= 768px) {
  :root {
    --radius: 6px;
  }
}
@supports not (top: 1lh) {
  :root {
    --half-leading: 0px;
  }
}

:not(:root) {
  letter-spacing: var(--letter-spacing);
}

html {
  scrollbar-gutter: stable;
}