:root {
  --min-device-width: 390px;
  --site-width: 1120px;
  --space-inline-negative: calc(var(--space-inline) * -1);
  --vw100: max(calc(100vw - var(--scrollbar-width, 0)), var(--min-device-width));
  --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));
  --half-leading: calc((1lh - 1em) / 2);
  --half-leading-trim: calc(var(--half-leading) * -1);
  --ascender: 0.15em;
}
@supports not (top: 1lh) {
  :root {
    --half-leading: 0px;
  }
}

:root {
  --letter-spacing: 0;
}

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

:root {
  --color-base: #111111;
  --color-outline: #111111;
  --color-base-light: #EEEEEE;
  --color-primary: #DE0739;
  --color-secondary: #002244;
  --color-tertiary-grad1: #3A746B;
  --color-tertiary-grad2: #111111;
  --color-tertiary-grad3: #4F8E8C;
  --color-tertiary-grad4: #002F28;
  --color-bg-base: #FFFFFF;
  --color-bg-beige: #E8E2D6;
  --color-bg-beige2: #F5F4F0;
  --color-bg-ash: #E3E3E3;
  --color-border: #CCCCCC;
  --color-light: #ffffff;
  --color-dark: #000000;
  --color-trans: transparent;
}

:root {
  --ff-shippori: "Shippori Mincho", serif;
  --ff-serif: var(--ff-shippori);
}

:root {
  --typography-title-md-r-font-family: var(--ff-serif);
  --typography-title-md-r-font-weight: 400;
  --typography-title-md-r-font-size: 1rem;
  --typography-title-md-r-line-height: 2;
  --typography-title-md-r-letter-spacing: 0.05em;
  --typography-title-md-b-font-family: var(--ff-serif);
  --typography-title-md-b-font-weight: 700;
  --typography-title-md-b-font-size: 1rem;
  --typography-title-md-b-line-height: 2;
  --typography-title-md-b-letter-spacing: 0.05em;
  --typography-title-smd-font-family: var(--ff-serif);
  --typography-title-smd-font-weight: 700;
  --typography-title-smd-font-size: 0.875rem;
  --typography-title-smd-line-height: 1.5714285714;
  --typography-title-smd-letter-spacing: 0.05em;
  --typography-title-xmd-font-family: var(--ff-serif);
  --typography-title-xmd-font-weight: 600;
  --typography-title-xmd-font-size: 1.25rem;
  --typography-title-xmd-line-height: 1.8;
  --typography-title-xmd-letter-spacing: 0.05em;
  --typography-title-xxmd-font-family: var(--ff-serif);
  --typography-title-xxmd-font-weight: 600;
  --typography-title-xxmd-font-size: 1.5rem;
  --typography-title-xxmd-line-height: 1.6666666667;
  --typography-title-xxmd-letter-spacing: 0.05em;
  --typography-title-lg-font-family: var(--ff-serif);
  --typography-title-lg-font-weight: 600;
  --typography-title-lg-font-size: 1.75rem;
  --typography-title-lg-line-height: 1.8571428571;
  --typography-title-lg-letter-spacing: 0.05em;
  --typography-title-xlg-font-family: var(--ff-serif);
  --typography-title-xlg-font-weight: 600;
  --typography-title-xlg-font-size: 2rem;
  --typography-title-xlg-line-height: 1.4375;
  --typography-title-xlg-letter-spacing: 0.05em;
  --typography-title-xxlg-font-family: var(--ff-serif);
  --typography-title-xxlg-font-weight: 600;
  --typography-title-xxlg-font-size: 3.125rem;
  --typography-title-xxlg-line-height: 1.68;
  --typography-title-xxlg-letter-spacing: 0;
  --typography-title-xxxlg-font-family: var(--ff-serif);
  --typography-title-xxxlg-font-weight: 600;
  --typography-title-xxxlg-font-size: 5rem;
  --typography-title-xxxlg-line-height: 1.125;
  --typography-title-xxxlg-letter-spacing: 0;
  --typography-title-xxxxlg-font-family: var(--ff-serif);
  --typography-title-xxxxlg-font-weight: 600;
  --typography-title-xxxxlg-font-size: 5.625rem;
  --typography-title-xxxxlg-line-height: 1.4444444444;
  --typography-title-xxxxlg-letter-spacing: 0;
  --typography-title-xxxxxlg-font-family: var(--ff-serif);
  --typography-title-xxxxxlg-font-weight: 600;
  --typography-title-xxxxxlg-font-size: 13.75rem;
  --typography-title-xxxxxlg-line-height: 1;
  --typography-title-xxxxxlg-letter-spacing: 0;
}
@media (width <= 1120px) {
  :root {
    --typography-title-lg-font-size: 1.5rem;
  }
}
@media (width <= 1120px) {
  :root {
    --typography-title-xxxlg-font-size: 3.25rem;
  }
}

:root {
  --space-inline: 20px;
}
@media (width <= 1120px) {
  :root {
    --space-inline: 15px;
  }
}

:root {
  --space-block-section: var(--space-block-xxl);
  --space-block-section-half: var(--space-block-xxl-half);
  --space-block-xxl: 160px;
  --space-block-xxl-half: 80px;
  --space-block-xl: 80px;
  --space-block-lg2: 60px;
  --space-block-lg: 40px;
  --space-block-md: 30px;
  --space-block-sm: 20px;
  --space-block-xs: 10px;
  --space-block-xxs: 5px;
  --space-block-section-trim: calc(var(--space-block-section) - var(--half-leading));
  --space-block-section-half-trim: calc(var(--space-block-section-half) - var(--half-leading));
  --space-block-xxl-trim: calc(var(--space-block-xxl) - var(--half-leading));
  --space-block-xxl-half-trim: calc(var(--space-block-xxl-half) - var(--half-leading));
  --space-block-xl-trim: calc(var(--space-block-xl) - var(--half-leading));
  --space-block-lg2-trim: calc(var(--space-block-lg2) - 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));
}
@media (width <= 1120px) {
  :root {
    --space-block-xxl: 120px;
    --space-block-xxl-half: 60px;
  }
}
:root {
  --header-size: 90px;
  --header-z-index: 5000;
  --scroll-adjust: var(--header-current-size);
  --sec: 0.5s;
  --sec-fast: 0.3s;
  --sec-slow: 0.8s;
  --opacity: 0.5;
  --zoom: 1.1;
  --radius: 10px;
}
@media (width <= 768px) {
  :root {
    --header-size: 80px;
  }
}

html {
  scrollbar-gutter: stable;
}