@charset "utf-8";

/* ==================================================
 * ==================================================
 * root
 * ==================================================
 * ================================================== */
:root{
/* -- layout -------------------------------------- */
  --layout-inner-width: 1600px;
  --layout-inner-padding: clamp(1.5rem, 6vw, 6rem);
  --layout-rail-width: 0px;
  --layout-header-height: clamp(64px, 6vw, 96px);
  
/* -- space --------------------------------------- */
  --space-panel-block: clamp(4rem, 8vw, 8rem);

/* -- font-family --------------------------------------- */
  --font-base: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-en-sans: "Figtree", sans-serif;

  --fs-2xs: clamp(0.75rem, 0.8125vw, 0.8125rem);   /* 12px → 13px */
  --fs-xs:  clamp(0.8125rem, 0.875vw, 0.875rem);   /* 13px → 14px */
  --fs-sm:  clamp(0.875rem, 0.9375vw, 0.9375rem);  /* 14px → 15px */
  --fs-md:  clamp(0.9375rem, 1vw, 1rem);           /* 15px → 16px */
  --fs-lg:  clamp(1rem, 1.125vw, 1.125rem);        /* 16px → 18px */
  --fs-xl:  clamp(1.125rem, 1.25vw, 1.25rem);      /* 18px → 20px */
  --fs-2xl: clamp(1.25rem, 1.5vw, 1.5rem);         /* 20px → 24px */
  --fs-3xl: clamp(1.5rem, 2vw, 2rem);
  --fs-4xl: clamp(1.5rem, 2.5vw, 2.5rem);
  --fs-5xl: clamp(1.5rem, 3vw, 3rem);

/* -- color --------------------------------- */
  --color-white:  #FFFFFF;
  --color-black:  #000000;

  --color-brand: #30CEEC;
  --color-brand-light: #89DFEC;
  --color-brand-dark: #1184CD;

  --color-link: #0066CC;

/* -- color font ---------------------------------- */
  --color-fg-base: #202228;
  --color-fg-light: #F6F6F8;

/* -- color background ---------------------------- */
  --color-bg-base: #FFFFFF;
  --color-bg-soft: #F6F6F8;
  --color-bg-dark: #12141C;
  --color-bg-deep: #080A0C;

/* -- color border -------------------------------- */
  --color-border-base: rgba(0,0,0,.10);

/* -- color shadow -------------------------------- */
  --color-shadow-base: rgba(0,0,0,.20);

/* -- color background placeholder ----------------- */
  --color-bg-placeholder: rgba(0,0,0,.05);

/* -- radius --------------------------------------- */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 9999px;
}

/* ==================================================
 * ==================================================
 * reset
 * ==================================================
 * ================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, textarea, select{padding: 0;margin: 0;border: 0;}
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section{display: block;}
audio, canvas, video{display: inline-block;}
audio:not([controls]){display: none;}
embed, iframe, object, video{max-width: 100%;}
h1, h2, h3, h4, h5, h6{font-size: inherit;font-weight: inherit;line-height: inherit;}
img{display: block;max-width: 100%;height: auto;}
svg{display: block;max-width: 100%;height: auto;}
ol, ul{list-style: none;}
input, select, textarea{color: inherit;font: inherit;font-size: 16px;}
textarea{resize: vertical;}
button{color: inherit;font: inherit;background-color: transparent;padding: 0;margin: 0;border: none;appearance: none;touch-action: manipulation;-webkit-tap-highlight-color: transparent;cursor: pointer;}
button[disabled],
button[aria-disabled="true"]{cursor: default;}
strong{font-weight: inherit;}
em{font-style: italic;}
address{font-style: normal;}
a:link,a:active,a:visited{color: inherit;text-decoration: none;}
a:hover,a:focus-visible{text-decoration: none;}

/* ==================================================
 * ==================================================
 * base
 * ==================================================
 * ================================================== */
html{
  font-size: 100%;
  scrollbar-gutter: stable;
}
body{
  color: var(--color-fg-base);
  font-family: var(--font-base);
  font-size: var(--fs-md);
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
  text-align: left;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-bg-base);
}
body [data-ui-theme-surface="dark"]{
  color: var(--color-white);
}

/* ==================================================
 * wrapper
 * ================================================== */
#wrapper{text-align: left;width: 100%;position: relative;}

/* ==================================================
 * site-main
 * ================================================== */
.site-main{
  background: var(--color-bg-base);
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* ==================================================
 * ==================================================
 * section
 * ==================================================
 * ================================================== */
.section{
  width: 100%;
  overflow-x: clip;
  --section-gutter: var(--layout-inner-padding);
}

@media (min-width: 1025px){
  .section{
    --section-gutter: max(var(--layout-inner-padding), calc((100vw - var(--layout-rail-width) - var(--layout-inner-width)) / 2 + var(--layout-inner-padding)));
    padding-left: var(--layout-rail-width);
  }
  .section--full{
    padding-left: 0;
  }
}

/* ==================================================
 * section__inner
 * ================================================== */
.section__inner{
  width: 100%;
  max-width: var(--layout-inner-width);
  padding-inline: var(--layout-inner-padding);
  margin-inline: auto;
}
.section__inner--full{
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
  margin-inline: auto;
}

/* ==================================================
 * section__panel
 * ================================================== */
.section__panel{
  --section-space-top: var(--space-panel-block);
  --section-space-bottom: var(--space-panel-block);
  background: var(--section-panel-bg, transparent);
  padding-top: var(--section-space-top);
  padding-bottom: var(--section-space-bottom);
  padding-inline: 0;
}
.section__panel--bg-white{
  --section-panel-bg: var(--color-white);
}
.section__panel--bg-base{
  --section-panel-bg: var(--color-bg-base);
}
.section__panel--bg-soft{
  --section-panel-bg: var(--color-bg-soft);
}
.section__panel--bg-dark{
  --section-panel-bg: var(--color-bg-dark);
}
.section__panel--bg-deep{
  --section-panel-bg: var(--color-bg-deep);
}
.section__panel--bg-black{
  --section-panel-bg: var(--color-black);
}

/* ==================================================
 * section space
 * ================================================== */
.section--space-top-none .section__panel{
  --section-space-top: 0px;
}
.section--space-bottom-none .section__panel{
  --section-space-bottom: 0px;
}
.section--space-top-expanded .section__panel{
  --section-space-top: clamp(8rem, 16vw, 16rem);
}
.section--space-bottom-expanded .section__panel{
  --section-space-bottom: clamp(8rem, 16vw, 16rem);
}
.section--space-none .section__panel{
  --section-space-top: 0px;
  --section-space-bottom: 0px;
}



/* ==================================================
 * ==================================================
 * section--overlap / section--underlap
 * ==================================================
 * ================================================== */
.section--overlap,
.section--underlap{
  position: relative;
}
.section--overlap .section__panel--overlap,
.section--underlap .section__panel--underlap{
  background: var(--section-panel-bg, var(--color-bg-base));
  position: relative;
  z-index: 1;
}
.section.is-ui-section-stack-item{
  position: relative;
  z-index: var(--ui-section-stack-index, 1);
}

/* 現行overlapとの移行互換 */
.section.is-ui-overlap-sticky{
  position: sticky;
  top: min(0px, calc(100svh - var(--ui-overlap-sticky-height, 100svh)));
}

/* 共通layer track */
.section.is-ui-section-layer-before{
  --ui-section-layer-before: min(
    var(--ui-underlap-cover-height, 0px),
    var(--ui-section-sticky-height, 0px),
    100svh
  );
  margin-top: calc(0px - var(--ui-section-layer-before));
  scroll-margin-top: calc(0px - var(--ui-section-layer-before));
}
.section.is-ui-section-layer-after{
  --ui-section-layer-after: min(
    var(--ui-overlap-next-height, 0px),
    100svh
  );
  margin-bottom: calc(0px - var(--ui-section-layer-after));
}
.ui-section-layer-spacer{
  width: 100%;
  height: 0;
  pointer-events: none;
}
.ui-section-layer-spacer--before{
  height: var(--ui-section-layer-before, 0px);
}
.ui-section-layer-spacer--after{
  height: var(--ui-section-layer-after, 0px);
}

/* 局所化されたnative sticky */
.section.is-ui-layer-overlap-sticky > .section__panel{
  position: sticky;
  top: min(0px, calc(100svh - var(--ui-section-sticky-height, 100svh)));
}
.section.is-ui-underlap-sticky > .section__panel{
  position: sticky;
  bottom: min(0px, calc(100svh - var(--ui-section-sticky-height, 100svh)));
}

/* ==================================================
 * ==================================================
 * section__shell
 * ==================================================
 * ================================================== */
.section__shell{
  width: 100%;
  padding-inline: var(--layout-inner-padding);
}

@media (min-width: 1025px){
  .section__shell{
    width: min(100%, calc(var(--layout-inner-width) + var(--layout-rail-width)));
    padding-left: calc(var(--layout-inner-padding) + var(--layout-rail-width));
    padding-right: var(--layout-inner-padding);
    margin-inline: auto;
  }
}

/* ==================================================
 * layered-shell
 * ================================================== */
.section--overlap .section__shell--overlap,
.section--underlap .section__shell--underlap{
  width: 100%;
  padding-inline: var(--layout-inner-padding);
}

@media (min-width: 1025px){
  .section--overlap .section__shell--overlap,
  .section--underlap .section__shell--underlap{
    width: min(100%, calc(var(--layout-inner-width) + var(--layout-rail-width)));
    padding-left: calc(var(--layout-inner-padding) + var(--layout-rail-width));
    padding-right: var(--layout-inner-padding);
    margin-inline: auto;
  }
}

/* ==================================================
 * ==================================================
 * section-blocks
 * ==================================================
 * ================================================== */
.section-blocks{
  display: grid;
  gap: var(--section-block-gap, var(--space-panel-block));
}
.section-block{
  min-width: 0;
}

/* ==================================================
 * u-visually-hidden
 * ================================================== */
.u-visually-hidden{
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

/* ==================================================
 * u-underline-sweep
 * ================================================== */
.u-underline-sweep{
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.u-underline-sweep::after{
  content: "";
  border-bottom: 1px solid currentColor;
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  left: -100%;
  pointer-events: none;
  transition: left 400ms ease;
}
.u-underline-sweep:hover::after,
.u-underline-sweep:focus-visible::after{
  left: 0;
}

@media (prefers-reduced-motion: reduce){
  .u-underline-sweep::after{
    transition: none;
  }
}

/* ==================================================
 * u-underline-swap
 * ================================================== */
.u-underline-swap{
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}
.u-underline-swap::before,
.u-underline-swap::after{
  content: '';
  height: 0;
  border-bottom: 1px solid currentColor;
  position: absolute;
  left: 0;right: 0;bottom: 0;
  pointer-events: none;
  will-change: transform;
}
.u-underline-swap::before{
  transform: translateX(0);
  transition: transform .4s ease;
}
.u-underline-swap::after{
  transform: translateX(-120%);
  transition: transform .4s ease .2s;
}
.u-underline-swap:hover::before,
.u-underline-swap:focus-visible::before{
  transform: translateX(120%);
}
.u-underline-swap:hover::after,
.u-underline-swap:focus-visible::after{
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce){
  .u-underline-swap::before,
  .u-underline-swap::after{
    transition: none;
    transform: translateX(0);
  }
}

/* ==================================================
 * u-slot
 * ================================================== */
.u-slot-trigger{
  cursor: pointer;
}
.u-slot-clip{
  line-height: 1.4;
  display: inline-block;
  flex: 0 0 auto;
  height: 1.4em;
  position: relative;
  overflow: hidden;
}
.u-text-slot{
  display: inline-flex;
  position: relative;
  transform: translateY(0);
  transition: transform .4s ease;
  will-change: transform;
}
.u-text-slot::after{
  content: attr(data-text);
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}
.u-slot-trigger:hover .u-text-slot,
.u-slot-trigger:focus-visible .u-text-slot{
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce){
  .u-text-slot{
    transition: none;
  }
  .u-slot-trigger:hover .u-text-slot,
  .u-slot-trigger:focus-visible .u-text-slot{
    transform: none;
  }
}

/* ==================================================
 * u-text-marker
 * ================================================== */
.u-text-marker{
  color: inherit;
  font-weight: 600;
  background-image: linear-gradient(transparent 58%, rgba(238,93,160,.22) 58%);
  padding-inline: 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ==================================================
 * ==================================================
 * ui-image-placeholder
 * ==================================================
 * ================================================== */
.ui-image-placeholder{
  background-color: var(--color-bg-placeholder);
}

/* ==================================================
 * text reveal
 * ================================================== */
.ui-text-reveal{
  display: inline-block;
}
.ui-text-reveal__char{
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.4em, 0);
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(200ms + (var(--text-reveal-index) * 60ms));
}
.is-text-reveal-ready .ui-text-reveal__char{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce){
  .ui-text-reveal__char{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==================================================
 * ui-tel
 * ================================================== */
.ui-tel{cursor: default;}

/* ==================================================
 * ui-sns
 * ================================================== */
.ui-sns__label{
  font-family: var(--font-en-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: center;
}
.ui-sns__list{
  display: flex;
  align-items: center;
  justify-content: center;
  row-gap: 0.75rem;
  column-gap: 0.75rem;
}
.ui-sns__item{
  flex: 0 0 auto;
}
.ui-sns__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: color 200ms cubic-bezier(.2,.8,.2,1), transform 200ms cubic-bezier(.2,.8,.2,1), opacity 200ms cubic-bezier(.2,.8,.2,1);
}
.ui-sns__icon{
  width: 18px;
  height: 18px;
}
.ui-sns__icon > svg{
  width: 100%;
}

/* ==================================================
 * ==================================================
 * ui-list
 * ==================================================
 * ================================================== */
.ui-list{
  display: grid;
  min-width: 0;
}

/* ==================================================
 * ui-list--definition
 * ================================================== */
.ui-list--definition > div{
  display: grid;
  gap: 0.5rem clamp(1.5rem, 2vw, 2rem);
  min-width: 0;
  padding-block: 1rem;
  border-top: 1px dashed var(--color-border-base);
}
.ui-list--definition > div:first-child{
  padding-top: 0;
  border-top: none;
}
.ui-list--definition > div:last-child{
  padding-bottom: 0;
}
.ui-list--definition > div > dt{
  font-weight: 500;
  line-height: 1.6;
  min-width: 0;
}
.ui-list--definition > div > dd{
  line-height: 1.6;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 768px){
  .ui-list--definition > div{
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    align-items: start;
  }
}

/* ==================================================
 * ui-list--number
 * ================================================== */
.ui-list--number{
  counter-reset: item;
}
.ui-list--number > li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5em;
  counter-increment: item;
  min-width: 0;
}
.ui-list--number > li::before{
  content: counter(item) ")";
  color: currentColor;
  font-variant-numeric: tabular-nums;
  line-height: inherit;
}

/* ==================================================
 * ui-list--dot
 * ================================================== */
.ui-list--dot > li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.5em;
  min-width: 0;
}
.ui-list--dot > li::before{
  content: "・";
  color: currentColor;
  line-height: inherit;
}

/* ==================================================
 * ui-list--note
 * ================================================== */
.ui-list--note > li{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.25em;
  min-width: 0;
}
.ui-list--note > li::before{
  content: "※";
  color: currentColor;
  line-height: inherit;
}

.ui-list--note > li > span{
  min-width: 0;
}

/* ==================================================
 * ==================================================
 * morph-button
 * ==================================================
 * ================================================== */
.morph-button{
  --btn-height: 60px;
  --btn-label-min-width: 128px;
  --btn-icon-width: 60px;
  --btn-seam-depth: 10px;
  --btn-gap: 6px;
  --btn-outer-radius: 6px;
  --btn-inner-radius: 2px;
  --btn-label-shape-inset: 10px;

  --btn-label-fg: var(--color-white);
  --btn-label-fg-active: var(--color-brand);
  --btn-label-bg: var(--color-bg-dark);
  --btn-label-bg-active: var(--color-bg-dark);
  --btn-label-border: transparent;
  --btn-label-border-active: transparent;

  --btn-icon-fg: var(--color-white);
  --btn-icon-fg-active: var(--color-brand);
  --btn-icon-bg: var(--color-bg-dark);
  --btn-icon-bg-active: var(--color-bg-dark);
  --btn-icon-border: transparent;
  --btn-icon-border-active: transparent;

  --btn-shape-stroke-width: 1;
  --btn-arrow-size: 18px;
  --btn-arrow-optical-shift: 2px;

  display: inline-flex;
  align-items: center;
  position: relative;
}
.morph-button--brand{
  --btn-label-fg-active: var(--color-white);
  --btn-label-bg: var(--color-brand-dark);
  --btn-label-bg-active: var(--color-brand);

  --btn-icon-fg-active: var(--color-white);
  --btn-icon-bg: var(--color-brand-dark);
  --btn-icon-bg-active: var(--color-brand);
}
.morph-button:lang(en){
  font-family: var(--font-en-sans);
}
.morph-button .morph-button__label{
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: var(--btn-label-min-width);
  height: var(--btn-height);
  margin-right: calc((var(--btn-seam-depth) * -1) + var(--btn-gap));
  position: relative;
  z-index: 1;
  overflow: visible;
}
.morph-button .morph-button__label-shape{
  width: calc(100% - var(--btn-label-shape-inset));
  inset: 0 0 0 var(--btn-label-shape-inset);
}
.morph-button .morph-button__icon{
  color: var(--btn-icon-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--btn-icon-width);
  width: var(--btn-icon-width);
  min-width: var(--btn-icon-width);
  height: var(--btn-height);
  position: relative;
  z-index: 2;
  transition: color .6s cubic-bezier(.22,.61,.36,1);
  overflow: visible;
}
.morph-button .morph-button__shape{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.morph-button .morph-button__shape path{
  transition:
    fill .6s cubic-bezier(.22,.61,.36,1),
    stroke .6s cubic-bezier(.22,.61,.36,1);
  stroke-width: var(--btn-shape-stroke-width);
  vector-effect: non-scaling-stroke;
}
.morph-button .morph-button__label-shape path{
  fill: var(--btn-label-bg);
  stroke: var(--btn-label-border);
}
.morph-button .morph-button__icon-shape path{
  fill: var(--btn-icon-bg);
  stroke: var(--btn-icon-border);
}
.morph-button .morph-button__label-text{
  color: var(--btn-label-fg);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: var(--btn-height);
  padding-inline: 2rem;
  position: relative;
  z-index: 2;
  transition: color .4s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.morph-button .morph-button__arrow{
  display: block;
  width: var(--btn-arrow-size);
  height: var(--btn-arrow-size);
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.morph-button .morph-button__arrow-svg{
  width: var(--btn-arrow-size);
  height: var(--btn-arrow-size);
  position: absolute;
  inset: 0;
  transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.morph-button .morph-button__arrow-svg--current{
  transform: translateX(var(--btn-arrow-optical-shift));
  opacity: 1;
}
.morph-button .morph-button__arrow-svg--next{
  transform: translateX(calc(-135% + var(--btn-arrow-optical-shift)));
  opacity: 0;
}
.morph-button.is-morph-active .morph-button__label-shape path{
  fill: var(--btn-label-bg-active);
  stroke: var(--btn-label-border-active);
}
.morph-button.is-morph-active .morph-button__icon-shape path{
  fill: var(--btn-icon-bg-active);
  stroke: var(--btn-icon-border-active);
}
.morph-button.is-morph-active .morph-button__label-text{
  color: var(--btn-label-fg-active);
  transform: translateX(1px);
}
.morph-button.is-morph-active .morph-button__icon{
  color: var(--btn-icon-fg-active);
}
.morph-button.is-morph-active .morph-button__arrow-svg--current{
  transform: translateX(calc(135% + var(--btn-arrow-optical-shift)));
  opacity: 0;
}
.morph-button.is-morph-active .morph-button__arrow-svg--next{
  transform: translateX(var(--btn-arrow-optical-shift));
  opacity: 1;
}
.morph-button:focus-visible{
  outline: none;
}

/* ==================================================
 * morph-button reduced-motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  .morph-button .morph-button__icon,
  .morph-button .morph-button__shape path,
  .morph-button .morph-button__label-text,
  .morph-button .morph-button__arrow-svg{
    transition: none;
  }
}

/* ==================================================
 * ==================================================
 * site-transition
 * ==================================================
 * ================================================== */
.site-transition[hidden]{
  display: none !important;
}

.site-transition{
  --site-transition-logo-color: rgba(255,255,255,.60);
  --site-transition-back-bg: #30323A;
  --site-transition-middle-a-bg: #282A32;
  --site-transition-middle-b-bg: #20222A;
  --site-transition-middle-c-bg: #181A22;
  --site-transition-front-bg: var(--color-bg-dark);
  --site-transition-edge-radius: clamp(3rem, 6vw, 6rem);
  --site-transition-ease-cover: cubic-bezier(.78,0,.22,1);
  --site-transition-ease-reveal: cubic-bezier(.22,1,.36,1);
  position: fixed;
  inset: 0;
  z-index: 9000;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
.site-transition.is-leaving,
.site-transition.is-entering,
.site-transition.is-entered,
.site-transition.is-intro,
.site-transition.is-intro-revealed{
  visibility: visible;
}
.site-transition__layer{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc(100% + var(--site-transition-edge-radius)), 0);
  transition-property: transform;
  transition-timing-function: var(--site-transition-ease-cover);
  will-change: transform;
  backface-visibility: hidden;
}
.site-transition__layer::before,
.site-transition__layer::after{
  content: "";
  background: inherit;
  width: 112%;
  height: calc(var(--site-transition-edge-radius) * 2);
  position: absolute;
  left: -6%;
  z-index: -1;
  pointer-events: none;
}
.site-transition__layer::before{
  top: calc(var(--site-transition-edge-radius) * -1);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.site-transition__layer::after{
  bottom: calc(var(--site-transition-edge-radius) * -1);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.site-transition__layer--back{
  background: var(--site-transition-back-bg);
  z-index: 1;
}
.site-transition__layer--middle-a{
  background: var(--site-transition-middle-a-bg);
  z-index: 2;
}
.site-transition__layer--middle-b{
  background: var(--site-transition-middle-b-bg);
  z-index: 3;
}
.site-transition__layer--middle-c{
  background: var(--site-transition-middle-c-bg);
  z-index: 4;
}
.site-transition__layer--front{
  background: var(--site-transition-front-bg);
  z-index: 5;
  isolation: isolate;
}
.site-transition__layer--front::before,
.site-transition__layer--front::after{
  background: var(--site-transition-front-bg);
}

/* ==================================================
 * logo
 * ================================================== */
.site-transition__logo{
  color: var(--site-transition-logo-color);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(1);
  transform-origin: center;
  transition:
    opacity 360ms ease,
    transform 560ms var(--site-transition-ease-reveal);
  will-change: opacity, transform;
}
.site-transition__logo-mark{
  display: block;
  width: clamp(4rem, 6vw, 6rem);
  height: clamp(4rem, 6vw, 6rem);
  transform-origin: center;
  will-change: transform;
}
.site-transition__logo-mark > svg{
  width: 100%;
  max-width: none;
  height: 100%;
  opacity: 1;
  will-change: opacity;
}
.site-transition.is-leaving .site-transition__logo-mark,
.site-transition.is-entering .site-transition__logo-mark,
.site-transition.is-entered .site-transition__logo-mark,
.site-transition.is-intro .site-transition__logo-mark,
.site-transition.is-intro-revealed .site-transition__logo-mark,
html.is-site-transition-pending .site-transition__logo-mark,
html.is-site-transition-intro-pending .site-transition__logo-mark{
  animation: site-transition-logo-spin 4000ms linear infinite;
}
.site-transition.is-leaving .site-transition__logo-mark > svg,
.site-transition.is-entering .site-transition__logo-mark > svg,
.site-transition.is-entered .site-transition__logo-mark > svg,
.site-transition.is-intro .site-transition__logo-mark > svg,
.site-transition.is-intro-revealed .site-transition__logo-mark > svg,
html.is-site-transition-pending .site-transition__logo-mark > svg,
html.is-site-transition-intro-pending .site-transition__logo-mark > svg{
  animation: site-transition-logo-breathe 2400ms ease-in-out infinite;
}

/* ==================================================
 * leaving
 * ================================================== */
.site-transition.is-leaving .site-transition__layer--back{
  transform: translate3d(0, 0, 0);
  transition-duration: 540ms;
  transition-delay: 0ms;
}
.site-transition.is-leaving .site-transition__layer--middle-a{
  transform: translate3d(0, 0, 0);
  transition-duration: 590ms;
  transition-delay: 40ms;
}
.site-transition.is-leaving .site-transition__layer--middle-b{
  transform: translate3d(0, 0, 0);
  transition-duration: 640ms;
  transition-delay: 80ms;
}
.site-transition.is-leaving .site-transition__layer--middle-c{
  transform: translate3d(0, 0, 0);
  transition-duration: 690ms;
  transition-delay: 120ms;
}
.site-transition.is-leaving .site-transition__layer--front{
  transform: translate3d(0, 0, 0);
  transition-duration: 740ms;
  transition-delay: 160ms;
}
.site-transition.is-leaving .site-transition__logo{
  opacity: .88;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 360ms;
}

/* ==================================================
 * entering
 * ================================================== */
.site-transition.is-entering .site-transition__layer{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: none;
}
.site-transition.is-entering .site-transition__logo{
  opacity: .88;
  transform: translate3d(0, 0, 0) scale(1);
  transition: none;
}
.site-transition.is-entered .site-transition__layer--front{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 760ms var(--site-transition-ease-cover) 0ms;
}
.site-transition.is-entered .site-transition__layer--middle-c{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 780ms var(--site-transition-ease-cover) 40ms;
}
.site-transition.is-entered .site-transition__layer--middle-b{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 800ms var(--site-transition-ease-cover) 80ms;
}
.site-transition.is-entered .site-transition__layer--middle-a{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 820ms var(--site-transition-ease-cover) 120ms;
}
.site-transition.is-entered .site-transition__layer--back{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 840ms var(--site-transition-ease-cover) 160ms;
}
.site-transition.is-entered .site-transition__logo{
  opacity: 0;
  transform: translate3d(0, -2rem, 0) scale(.35);
  transition:
    opacity 520ms ease 80ms,
    transform 760ms var(--site-transition-ease-cover);
}

/* ==================================================
 * intro
 * ================================================== */
.site-transition.is-intro .site-transition__layer{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: none;
}
.site-transition.is-intro .site-transition__logo{
  opacity: .88;
  transform: translate3d(0, 0, 0) scale(1);
  transition: none;
}
.site-transition.is-intro-revealed .site-transition__layer--front{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 840ms var(--site-transition-ease-cover) 0ms;
}
.site-transition.is-intro-revealed .site-transition__layer--middle-c{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 860ms var(--site-transition-ease-cover) 40ms;
}
.site-transition.is-intro-revealed .site-transition__layer--middle-b{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 880ms var(--site-transition-ease-cover) 80ms;
}
.site-transition.is-intro-revealed .site-transition__layer--middle-a{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 900ms var(--site-transition-ease-cover) 120ms;
}
.site-transition.is-intro-revealed .site-transition__layer--back{
  transform: translate3d(0, calc(-100% - var(--site-transition-edge-radius)), 0);
  transition: transform 920ms var(--site-transition-ease-cover) 160ms;
}
.site-transition.is-intro-revealed .site-transition__logo{
  opacity: 0;
  transform: translate3d(0, -2rem, 0) scale(.35);
  transition:
    opacity 600ms ease 100ms,
    transform 840ms var(--site-transition-ease-cover);
}

/* ==================================================
 * pending state before JS boot
 * ================================================== */
html.is-site-transition-pending body,
html.is-site-transition-intro-pending body{
  background: var(--color-bg-base);
}
html.is-site-transition-pending body > :not(.site-transition),
html.is-site-transition-intro-pending body > :not(.site-transition){
  visibility: visible;
}
html.is-site-transition-pending .site-transition[hidden],
html.is-site-transition-intro-pending .site-transition[hidden]{
  display: block !important;
}
html.is-site-transition-pending .site-transition,
html.is-site-transition-intro-pending .site-transition{
  visibility: visible;
}
html.is-site-transition-pending .site-transition__layer,
html.is-site-transition-intro-pending .site-transition__layer{
  transform: translate3d(0, 0, 0);
  transition: none;
}
html.is-site-transition-pending .site-transition__logo,
html.is-site-transition-intro-pending .site-transition__logo{
  opacity: .88;
  transform: translate3d(0, 0, 0) scale(1);
  transition: none;
}

/* ==================================================
 * body state
 * ================================================== */
body.is-page-leaving,
body.is-page-entering{
  cursor: progress;
}

/* ==================================================
 * reduced motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  .site-transition__layer,
  .site-transition__logo,
  .site-transition__logo-mark,
  .site-transition__logo-mark > svg{
    transition: none !important;
    animation: none !important;
  }
  .site-transition.is-entered .site-transition__logo,
  .site-transition.is-intro-revealed .site-transition__logo{
    transform: none;
  }
}

/* ==================================================
 * ==================================================
 * site-header
 * ==================================================
 * ================================================== */
.site-header{
  --z-header: 2000;
  --z-header-backdrop: 1700;
  --z-header-drawer: 1800;
  --z-header-bar: 2001;
  --z-header-toggle: 2002;
  --z-header-backdrop-pc: 2400;
  --z-header-drawer-pc: 2500;
  height: var(--layout-header-height);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  transition: transform 400ms ease;
}
.site-header.hide-up{
  transform: translateY(calc(-100% - 5px));
}

@media (min-width: 1025px){
  .site-header{
    pointer-events: none;
  }
  .site-header.hide-up{
    transform: none;
  }
}

/* ==================================================
 * ==================================================
 * site-header__bar
 * ==================================================
 * ================================================== */
.site-header__bar{
  height: var(--layout-header-height);
  position: relative;
  z-index: var(--z-header-bar);
  transition: opacity 220ms cubic-bezier(.22,1,.36,1), transform 320ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.site-header.hide-up .site-header__bar{
  opacity: 0;
  transform: translate3d(0, -10px, 0);
}
body.is-menu-active .site-header__bar{
  pointer-events: none;
}

@media (min-width: 1025px){
  .site-header__bar{
    transform: none;
    transition: none;
    will-change: auto;
    pointer-events: none;
  }
  .site-header.hide-up .site-header__bar{
    opacity: 1;
    transform: none;
  }
}

/* ==================================================
 * site-header__inner
 * ================================================== */
.site-header__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  max-width: var(--layout-inner-width);
  height: var(--layout-header-height);
  padding-inline: clamp(1rem, 3vw, 3rem);
  margin-inline: auto;
}

@media (min-width: 1025px){
  .site-header__inner{
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: clamp(1rem, 2vw, 2rem);
  }
}

/* ==================================================
 * ==================================================
 * site-header__title
 * ==================================================
 * ================================================== */
.site-header__title{
  display: inline-flex;
  align-items: center;
  min-width: 0;
  pointer-events: auto;
}
.site-header__logo{
  --site-header-logo-mark-size: clamp(32px, 3vw, 48px);
  --site-header-logo-word-size: clamp(96px, 12vw, 144px);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  column-gap: clamp(0.625rem, 1vw, 1rem);
  min-width: 0;
  transition: color 200ms cubic-bezier(.2,.8,.2,1);
}
.site-header__logo-mark{
  display: block;
  flex: 0 0 auto;
  width: var(--site-header-logo-mark-size);
  height: var(--site-header-logo-mark-size);
}
.site-header__logo-mark > svg{
  width: 100%;
  max-width: none;
  height: 100%;
  transform-origin: center;
  transition: filter 640ms ease;
}
.site-header__logo:hover .site-header__logo-mark > svg,
.site-header__logo:focus-visible .site-header__logo-mark > svg{
  filter: grayscale(1);
  animation: ui-spin-360 720ms cubic-bezier(.22,1,.36,1);
}
.site-header__logo-word{
  display: block;
  flex: 0 1 auto;
  width: var(--site-header-logo-word-size);
  min-width: 0;
}
.site-header__logo-word > svg{
  width: 100%;
  max-width: none;
}
body[data-ui-theme="dark"] .site-header__logo{
  color: var(--color-white) !important;
}
body[data-ui-theme="light"] .site-header__logo{
  color: var(--color-fg-base) !important;
}
body.is-menu-active .site-header__logo{
  color: var(--color-fg-base) !important;
}

@media (min-width: 1025px){
  .site-header__logo{
    --site-header-logo-mark-size: clamp(40px, 3vw, 48px);
    --site-header-logo-word-size: clamp(128px, 11vw, 176px);
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header__logo:hover .site-header__logo-mark > svg,
  .site-header__logo:focus-visible .site-header__logo-mark > svg{
    animation: none !important;
  }
}

/* ==================================================
 * ==================================================
 * site-header__primary-nav
 * ==================================================
 * ================================================== */
.site-header__primary-nav{
  --site-header-primary-link-fg-light-color: rgba(0,0,0,.80);
  --site-header-primary-link-fg-dark-color: rgba(255,255,255,.80);
  --site-header-primary-surface-bg-light-color: rgba(255,255,255,.20);
  --site-header-primary-surface-bg-dark-color: rgba(255,255,255,.20);
  --site-header-primary-surface-shadow-color: rgba(0,0,0,.10);
  display: none;
}

@media (min-width: 1025px){
  .site-header__primary-nav{
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--layout-header-height);
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms cubic-bezier(.22,1,.36,1), transform 320ms cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
  }
  .site-header.is-primary-nav-hidden .site-header__primary-nav{
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -10px, 0);
    pointer-events: none;
    transition: opacity 180ms cubic-bezier(.22,1,.36,1), transform 260ms cubic-bezier(.22,1,.36,1), visibility 0s linear 260ms;
    will-change: opacity, transform;
  }
  .site-header__primary-menu{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.25rem, 0.75vw, 1rem);
    max-width: 100%;
    min-width: 0;
  }
  .site-header__primary-menu > .menu-item{
    display: inline-flex;
    align-items: center;
    height: var(--layout-header-height);
    min-width: 0;
    position: relative;
  }
  .site-header__primary-menu .menu-link{
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-xs);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color 200ms cubic-bezier(.2,.8,.2,1);
  }
  .site-header__primary-menu .menu-link > *{
    position: relative;
    z-index: 1;
  }
  .site-header__primary-menu .menu-link[data-ui-theme-local="light"]{
    color: var(--site-header-primary-link-fg-light-color);
  }
  .site-header__primary-menu .menu-link[data-ui-theme-local="dark"]{
    color: var(--site-header-primary-link-fg-dark-color);
  }
  .site-header__primary-menu > .menu-item > .menu-link::before{
    content: "";
    border-radius: inherit;
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity 200ms cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .site-header__primary-menu > .menu-item > .menu-link[data-ui-theme-local="light"]::before{
    background: var(--site-header-primary-surface-bg-light-color);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .site-header__primary-menu > .menu-item > .menu-link[data-ui-theme-local="dark"]::before{
    background: var(--site-header-primary-surface-bg-dark-color);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .site-header__primary-menu > .menu-item:hover > .menu-link::before,
  .site-header__primary-menu > .menu-item:focus-within > .menu-link::before{
    opacity: 1;
  }
  .site-header__primary-menu > .menu-item > .sub-menu{
    background: var(--site-header-primary-surface-bg-light-color);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: grid;
    gap: 0.75rem;
    width: max-content;
    max-width: min(20rem, calc(100vw - (var(--layout-inner-padding) * 2)));
    min-width: 10rem;
    padding: 1.5rem;
    border-radius: var(--radius-xs);
    box-shadow: 0 16px 32px var(--site-header-primary-surface-shadow-color);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity 180ms cubic-bezier(.22,1,.36,1), top 240ms cubic-bezier(.22,1,.36,1), visibility 0s linear 240ms;
    pointer-events: none;
    isolation: isolate;
  }
  .site-header__primary-menu > .menu-item > .menu-link[data-ui-theme-local="dark"] + .sub-menu{
    background: var(--site-header-primary-surface-bg-dark-color);
  }
  .site-header__primary-menu > .menu-item > .sub-menu::before{
    content: "";
    height: 1rem;
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    z-index: 2;
  }
  .site-header__primary-menu > .menu-item:hover > .sub-menu,
  .site-header__primary-menu > .menu-item:focus-within > .sub-menu{
    top: 100%;
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms cubic-bezier(.22,1,.36,1), top 240ms cubic-bezier(.22,1,.36,1), visibility 0s linear 0s;
    pointer-events: auto;
  }
  .site-header__primary-menu .sub-menu .menu-item{
    min-width: 0;
    position: relative;
    z-index: 1;
  }
  .site-header__primary-menu .sub-menu .menu-link{
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-align: left;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
  }
  .site-header__primary-menu .sub-menu .menu-link::before{
    content: none;
  }
  .site-header__primary-menu > .menu-item > .menu-link[data-ui-theme-local="light"] + .sub-menu .menu-link{
    color: var(--site-header-primary-link-fg-light-color);
  }
  .site-header__primary-menu > .menu-item > .menu-link[data-ui-theme-local="dark"] + .sub-menu .menu-link{
    color: var(--site-header-primary-link-fg-dark-color);
  }
}

/* ==================================================
 * ==================================================
 * site-header__actions
 * ==================================================
 * ================================================== */
.site-header__actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--layout-header-height);
  position: relative;
  z-index: var(--z-header-toggle);
  pointer-events: auto;
}
body.is-menu-active .site-header__actions{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ==================================================
 * site-header__toggle
 * ================================================== */
.site-header__toggle{
  --site-header-toggle-icon-light-color: var(--color-fg-base);
  --site-header-toggle-icon-dark-color: var(--color-white);
  display: grid;
  place-items: center;
  width: var(--layout-header-height);
  height: var(--layout-header-height);
  margin-right: calc(clamp(0rem, 1vw, 1rem) * -1);
}
.site-header__toggle-inner{
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
}
.site-header__toggle-icon{
  width: 20px;
  height: 20px;
  position: relative;
}
.site-header__toggle-icon span{
  background-color: var(--site-header-toggle-icon-dark-color);
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform-origin: center;
  transition: background-color 200ms cubic-bezier(.2,.8,.2,1);
}
.site-header__toggle-icon span:nth-child(1){
  transform: translateY(calc(-50% - 8px));
}
.site-header__toggle-icon span:nth-child(2){
  transform: translateY(-50%);
}
.site-header__toggle-icon span:nth-child(3){
  transform: translateY(calc(-50% + 8px));
}
body[data-ui-theme-toggle="light"] .site-header__toggle-icon span,
body:not([data-ui-theme-toggle])[data-ui-theme="light"] .site-header__toggle-icon span{
  background-color: var(--site-header-toggle-icon-light-color) !important;
}
body[data-ui-theme-toggle="dark"] .site-header__toggle-icon span,
body:not([data-ui-theme-toggle])[data-ui-theme="dark"] .site-header__toggle-icon span{
  background-color: var(--site-header-toggle-icon-dark-color) !important;
}

/* ==================================================
 * ==================================================
 * is-menu-locked
 * ==================================================
 * ================================================== */
body.is-menu-locked{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  overflow: hidden;
}

/* ==================================================
 * ==================================================
 * site-header__backdrop
 * ==================================================
 * ================================================== */
.site-header__backdrop{
  --site-header-backdrop-bg-color: rgba(0,0,0,.40);
  background: var(--site-header-backdrop-bg-color);
  position: fixed;
  inset: 0;
  z-index: var(--z-header-backdrop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 360ms;
}
.site-header__backdrop.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 360ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}

@media (min-width: 1025px){
  .site-header__backdrop{
    z-index: var(--z-header-backdrop-pc);
  }
}

/* ==================================================
 * ==================================================
 * site-header__drawer
 * ==================================================
 * ================================================== */
.site-header__drawer{
  --site-header-drawer-bg-color: var(--color-brand);

  --site-header-drawer-scrollbar-thumb-color: rgba(0,0,0,.20);
  --site-header-drawer-scrollbar-track-color: rgba(0,0,0,.05);

  --site-header-drawer-close-color: var(--color-fg-base);

  --site-header-drawer-menu-link-color: var(--color-fg-base);
  --site-header-drawer-menu-link-color-hover: var(--color-fg-base);
  --site-header-drawer-menu-link-ja-color: rgba(0,0,0,.80);
  --site-header-drawer-menu-link-ja-color-hover: var(--color-fg-base);
  --site-header-drawer-menu-link-border-color: rgba(0,0,0,.10);
  --site-header-drawer-menu-link-border-color-hover: rgba(0,0,0,.20);

  --site-header-drawer-plus-bg-color: var(--color-brand-dark);
  --site-header-drawer-plus-bg-color-hover: var(--color-black);
  --site-header-drawer-plus-color: var(--color-white);
  --site-header-drawer-plus-ja-color: rgba(255,255,255,.72);
  --site-header-drawer-plus-border-color: rgba(255,255,255,.08);
  --site-header-drawer-plus-border-color-hover: rgba(255,255,255,.18);

  --site-header-drawer-sub-menu-link-color: rgba(0,0,0,.60);
  --site-header-drawer-sub-menu-link-color-hover: var(--color-fg-base);
  --site-header-drawer-sub-menu-border-color: rgba(0,0,0,.10);
  
  background: var(--site-header-drawer-bg-color);
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header-drawer);
  transform: translate3d(0,-100%,0);
  visibility: hidden;
  pointer-events: none;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 360ms;
  will-change: transform;
  overflow: hidden;
}
.site-header__drawer.open{
  transform: translate3d(0,0,0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
.site-header__drawer-inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  height: 100%;
  min-width: 0;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(.2,.8,.2,1);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--site-header-drawer-scrollbar-thumb-color) var(--site-header-drawer-scrollbar-track-color);
}
.site-header__drawer.is-content-visible .site-header__drawer-inner{
  opacity: 1;
}
.site-header__drawer-close{
  color: var(--site-header-drawer-close-color);
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  justify-self: end;
  align-self: start;
  width: var(--layout-header-height);
  height: var(--layout-header-height);
  min-width: 0;
  min-height: 0;
  outline: none;
  position: sticky;
  top: 0;
  z-index: 3;
}
.site-header__drawer-close-inner{
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-width: 0;
  border-radius: var(--radius-pill);
}
.site-header__drawer-close-icon{
  color: currentColor;
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
}
.site-header__drawer-close-icon span{
  background: currentColor;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform-origin: center;
}
.site-header__drawer-close-icon span:nth-child(1){
  transform: translateY(-50%) rotate(45deg);
}
.site-header__drawer-close-icon span:nth-child(2){
  transform: translateY(-50%) rotate(-45deg);
}
.site-header__drawer-content{
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.site-header__drawer-nav{
  padding-top: clamp(6rem, 8vw, 8rem);
  padding-bottom: clamp(3rem, 4vw, 4rem);
  padding-inline: clamp(1.5rem, 4vw, 4rem);
}
.site-header__drawer-menu{
  display: grid;
}

@media (min-width: 1025px){
  .site-header__drawer{
    width: 560px;
    left: auto;
    z-index: var(--z-header-drawer-pc);
    transform: translate3d(100%,0,0);
    overscroll-behavior: contain;
  }
}

/* ==================================================
 * site-header__drawer-menu item
 * ================================================== */
.site-header__drawer-menu > .menu-item{
  opacity: 0;
  transform: translate3d(0,3px,0);
  transition: opacity 520ms cubic-bezier(.22,1,.36,1), transform 420ms cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.site-header__drawer.is-content-visible .site-header__drawer-menu > .menu-item{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition-delay: 140ms;
}

/* ==================================================
 * site-header__drawer-menu link
 * ================================================== */
.site-header__drawer-menu > .menu-item > .menu-link{
  color: var(--site-header-drawer-menu-link-color);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.25rem, 1.5vw, 1.5rem);
  position: relative;
  transition: color 260ms cubic-bezier(.2,.8,.2,1);
}
.site-header__drawer-menu > .menu-item > .menu-link::before,
.site-header__drawer-menu > .menu-item > .menu-link::after{
  content: "";
  border-top: 1px solid var(--site-header-drawer-menu-link-border-color);
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.site-header__drawer-menu > .menu-item > .menu-link::after{
  border-top-color: var(--site-header-drawer-menu-link-border-color-hover);
  transform: scale3d(0, 1, 1);
  transform-origin: left center;
  transition: transform 560ms cubic-bezier(.22,1,.36,1);
}
.site-header__drawer-menu > .menu-item > .menu-link:hover,
.site-header__drawer-menu > .menu-item > .menu-link:focus-visible{
  color: var(--site-header-drawer-menu-link-color-hover);
}
.site-header__drawer-menu > .menu-item > .menu-link:hover::after,
.site-header__drawer-menu > .menu-item > .menu-link:focus-visible::after{
  transform: scale3d(1, 1, 1);
}
.site-header__drawer-menu > .menu-item > .menu-link .menu-text-en{
  color: currentColor;
  font-family: var(--font-en-sans);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  grid-column: 1;
  grid-row: 1;
}
.site-header__drawer-menu > .menu-item > .menu-link .menu-text-ja{
  color: var(--site-header-drawer-menu-link-ja-color);
  font-size: var(--fs-xs);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
  transition: color 260ms cubic-bezier(.2,.8,.2,1);
}
.site-header__drawer-menu > .menu-item > .menu-link:hover .menu-text-ja,
.site-header__drawer-menu > .menu-item > .menu-link:focus-visible .menu-text-ja{
  color: var(--site-header-drawer-menu-link-ja-color-hover);
}

/* ==================================================
 * site-header__drawer-menu plus
 * ================================================== */
.site-header__drawer-menu > .menu-item--plus{
  margin-top: clamp(2rem, 3vw, 3rem);
}
.site-header__drawer-menu > .menu-item--plus > .menu-link{
  color: var(--site-header-drawer-plus-color);
  background-color: var(--site-header-drawer-plus-bg-color);
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 2vw, 2rem);
  padding-block: clamp(1.5rem, 2vw, 2rem);
  padding-inline: clamp(1.5rem, 2vw, 2rem);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--site-header-drawer-plus-border-color);
  overflow: hidden;
  transition:
    color 260ms cubic-bezier(.2,.8,.2,1),
    background-color 360ms cubic-bezier(.2,.8,.2,1),
    box-shadow 360ms cubic-bezier(.2,.8,.2,1);
}
.site-header__drawer-menu > .menu-item--plus > .menu-link::before,
.site-header__drawer-menu > .menu-item--plus > .menu-link::after{
  content: none;
}
.site-header__drawer-menu > .menu-item--plus > .menu-link .menu-text-en{
  color: currentColor;
  font-size: var(--fs-xl);
  line-height: 1.1;
}
.site-header__drawer-menu > .menu-item--plus > .menu-link .menu-text-ja{
  color: var(--site-header-drawer-plus-ja-color);
}
.site-header__drawer-menu > .menu-item--plus > .menu-link:hover,
.site-header__drawer-menu > .menu-item--plus > .menu-link:focus-visible,
.site-header__drawer-menu > .menu-item--plus.is-current > .menu-link{
  color: var(--site-header-drawer-plus-color);
  background-color: var(--site-header-drawer-plus-bg-color-hover);
  box-shadow: inset 0 0 0 1px var(--site-header-drawer-plus-border-color-hover);
}
.site-header__drawer-menu > .menu-item--plus > .menu-link:hover .menu-text-ja,
.site-header__drawer-menu > .menu-item--plus > .menu-link:focus-visible .menu-text-ja,
.site-header__drawer-menu > .menu-item--plus.is-current > .menu-link .menu-text-ja{
  color: var(--site-header-drawer-plus-color);
}

/* ==================================================
 * site-header__drawer-menu sub-menu
 * ================================================== */
.site-header__drawer-menu .sub-menu{
  display: grid;
  gap: clamp(0.5rem, 0.75vw, 0.75rem);
  padding-top: clamp(1rem, 1.5vw, 1.5rem);
  padding-bottom: clamp(1.5rem, 2vw, 2rem);
  padding-left: clamp(1rem, 2vw, 2rem);
  border-bottom: 1px solid var(--site-header-drawer-sub-menu-border-color);
}
.site-header__drawer-menu .sub-menu .menu-link{
  color: var(--site-header-drawer-sub-menu-link-color);
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
  transition: color 260ms cubic-bezier(.2,.8,.2,1), transform 360ms cubic-bezier(.22,1,.36,1);
}
.site-header__drawer-menu .sub-menu .menu-link::before{
  content: "";
  background: currentColor;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 1px;
  margin-top: 0.85em;
  margin-right: 0.75rem;
  opacity: .50;
  transition: width 360ms cubic-bezier(.22,1,.36,1), opacity 260ms cubic-bezier(.2,.8,.2,1);
}
.site-header__drawer-menu .sub-menu .menu-link:hover,
.site-header__drawer-menu .sub-menu .menu-link:focus-visible{
  color: var(--site-header-drawer-sub-menu-link-color-hover);
  transform: translate3d(4px,0,0);
}
.site-header__drawer-menu .sub-menu .menu-link:hover::before,
.site-header__drawer-menu .sub-menu .menu-link:focus-visible::before{
  width: 1rem;
  opacity: .80;
}
.site-header__drawer-menu .sub-menu .menu-text-en{
  display: none;
}

/* ==================================================
 * reduced motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  .site-header,
  .site-header__bar,
  .site-header__logo,
  .site-header__logo-mark > svg,
  .site-header__primary-nav,
  .site-header__actions,
  .site-header__drawer,
  .site-header__drawer-inner,
  .site-header__backdrop,
  .site-header__toggle-icon,
  .site-header__toggle-icon span,
  .site-header__drawer-menu > .menu-item,
  .site-header__drawer-menu > .menu-item > .menu-link,
  .site-header__drawer-menu > .menu-item > .menu-link::before,
  .site-header__drawer-menu > .menu-item > .menu-link::after,
  .site-header__drawer-menu .sub-menu .menu-link,
  .site-header__drawer-menu .sub-menu .menu-link::before,
  .site-header__primary-menu .menu-link,
  .site-header__primary-menu > .menu-item > .menu-link::before,
  .site-header__primary-menu > .menu-item > .sub-menu,
  .site-header__primary-menu .menu-link .u-text-slot{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ==================================================
 * ==================================================
 * site-breadcrumb
 * ==================================================
 * ================================================== */
.site-breadcrumb{
  --site-breadcrumb-color-light: var(--color-fg-base);
  --site-breadcrumb-color-light-hover: rgba(0,0,0,.60);
  --site-breadcrumb-color-dark: var(--color-white);
  --site-breadcrumb-color-dark-hover: rgba(255,255,255,.60);
  --site-breadcrumb-rule-color-light: rgba(0,0,0,.40);
  --site-breadcrumb-rule-color-dark: rgba(255,255,255,.40);

  display: none;
}

@media (min-width: 1025px){
  .site-breadcrumb{
    color: var(--site-breadcrumb-color-dark);
    font-family: var(--font-en-sans);
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    width: 100%;
    padding-inline: clamp(1rem, 3vw, 3rem);
    position: fixed;
    top: var(--layout-header-height);
    left: 0;
    z-index: var(--z-header-bar);
    pointer-events: none;
  }
  .site-breadcrumb__inner{
    width: 100%;
    max-width: var(--layout-inner-width);
    margin-inline: auto;
  }
  .site-breadcrumb__list{
    display: flex;
    align-items: center;
    min-width: 0;
    overflow: hidden;
  }
  .site-breadcrumb__item{
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
  .site-breadcrumb__item + .site-breadcrumb__item::before{
    content: "";
    background: var(--site-breadcrumb-rule-color-dark);
    flex: 0 0 auto;
    width: 0.75rem;
    height: 1px;
    margin-inline: 0.75rem;
    transition: background-color 200ms cubic-bezier(.2,.8,.2,1);
  }
  .site-breadcrumb__link,
  .site-breadcrumb__text{
    color: var(--site-breadcrumb-color-dark);
    display: block;
    max-width: 14rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 200ms cubic-bezier(.2,.8,.2,1);
  }
  .site-breadcrumb__link{
    pointer-events: auto;
  }
  body[data-ui-theme="light"] .site-breadcrumb{
    color: var(--site-breadcrumb-color-light);
  }
  body[data-ui-theme="light"] .site-breadcrumb__item + .site-breadcrumb__item::before{
    background: var(--site-breadcrumb-rule-color-light);
  }
  body[data-ui-theme="light"] .site-breadcrumb__link,
  body[data-ui-theme="light"] .site-breadcrumb__text{
    color: var(--site-breadcrumb-color-light);
  }
  body[data-ui-theme="dark"] .site-breadcrumb{
    color: var(--site-breadcrumb-color-dark);
  }
  body[data-ui-theme="dark"] .site-breadcrumb__item + .site-breadcrumb__item::before{
    background: var(--site-breadcrumb-rule-color-dark);
  }
  body[data-ui-theme="dark"] .site-breadcrumb__link,
  body[data-ui-theme="dark"] .site-breadcrumb__text{
    color: var(--site-breadcrumb-color-dark);
  }
  body[data-ui-theme="light"] .site-breadcrumb__link:hover,
  body[data-ui-theme="light"] .site-breadcrumb__link:focus-visible{
    color: var(--site-breadcrumb-color-light-hover);
  }
  body[data-ui-theme="dark"] .site-breadcrumb__link:hover,
  body[data-ui-theme="dark"] .site-breadcrumb__link:focus-visible{
    color: var(--site-breadcrumb-color-dark-hover);
  }
  body.is-menu-active .site-breadcrumb{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-breadcrumb,
  .site-breadcrumb__item + .site-breadcrumb__item::before,
  .site-breadcrumb__link,
  .site-breadcrumb__text{
    transition: none !important;
  }
}

/* ==================================================
 * ==================================================
 * site-footer
 * ==================================================
 * ================================================== */
.site-footer{
  --theme-surface-divider: rgba(255,255,255,.20);

  --site-footer-bg-color: var(--color-bg-dark);

  --site-footer-title-color: var(--color-white);
  --site-footer-text-color: rgba(255,255,255,.80);

  --site-footer-title-shadow-color: rgba(0,0,0,.20);
  --site-footer-text-shadow-color: rgba(0,0,0,.20);

  --site-footer-marquee-color: rgba(255,255,255,.20);

  --site-footer-utility-border-color: rgba(255,255,255,.20);
  --site-footer-utility-menu-link-color: rgba(255,255,255,.60);
  --site-footer-utility-menu-link-color-hover: rgba(255,255,255,.80);
  --site-footer-utility-copyright-color: rgba(255,255,255,.40);

  --site-footer-scrim-bg:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.60) 45%, rgba(0,0,0,.40) 100%),
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.80) 100%);

  background: var(--site-footer-bg-color);
  min-height: 100lvh;
  position: sticky;
  bottom: 0;
  z-index: 0;
  overflow: clip;
  isolation: isolate;
}

/* ==================================================
 * site-footer panel
 * ================================================== */
.site-footer__panel{
  min-height: 100lvh;
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.site-footer__media{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.site-footer__slide{
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1800ms cubic-bezier(.32,0,.12,1), visibility 0s linear 1800ms;
  will-change: opacity;
}
.site-footer__slide.is-active{
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 1800ms cubic-bezier(.32,0,.12,1), visibility 0s linear 0s;
}
.site-footer__slide.is-previous{
  z-index: 0;
  opacity: 0;
  visibility: visible;
  transition: opacity 1800ms cubic-bezier(.32,0,.12,1), visibility 0s linear 1800ms;
}
.site-footer__image{
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(24px);
  transform: translate3d(0, 0, 0) scale(1.12);
  transform-origin: center center;
  pointer-events: none;
}
.site-footer__scrim{
  background: var(--site-footer-scrim-bg);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ==================================================
 * site-footer marquee
 * ================================================== */
.site-footer__marquee{
  contain: paint;
  color: var(--site-footer-marquee-color);
  width: 100vw;
  margin-right: -50vw;
  margin-left: -50vw;
  position: absolute;
  right: 50%;
  bottom: clamp(4rem, 8vw, 8rem);
  left: 50%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.site-footer__marquee-track{
  display: flex;
  align-items: center;
  width: max-content;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  animation: ui-marquee-x 960s linear infinite;
}
.site-footer__marquee-text{
  font-family: var(--font-en-sans);
  font-size: clamp(8rem, 24vw, 24rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  flex: 0 0 auto;
  padding-right: clamp(2rem, 4vw, 4rem);
}

/* ==================================================
 * site-footer layout
 * ================================================== */
.site-footer__inner{
  display: grid;
  grid-template-rows: minmax(min-content, 1fr) auto;
  row-gap: clamp(2rem, 4vw, 4rem);
  width: 100%;
  min-height: 100lvh;
  padding-top: calc(var(--layout-header-height) + clamp(2rem, 4vw, 4rem));
  padding-bottom: clamp(1.5rem, 3vw, 3rem);
  padding-inline: var(--layout-inner-padding);
  margin-inline: auto;
  position: relative;
  z-index: 3;
}
.site-footer__main{
  display: grid;
  align-content: end;
  min-width: 0;
}
.site-footer__content{
  display: grid;
  gap: clamp(1.5rem, 2vw, 2rem);
  width: min(100%, 56rem);
  min-width: 0;
}
.site-footer__head{
  display: grid;
  gap: clamp(0.75rem, 1vw, 1rem);
  min-width: 0;
}
.site-footer__title{
  color: var(--site-footer-title-color);
  font-size: var(--fs-4xl);
  font-weight: 600;
  line-height: 1.2;
  text-shadow: 0 8px 24px var(--site-footer-title-shadow-color);
  text-wrap: balance;
}
.site-footer__body{
  display: grid;
  gap: clamp(0.75rem, 1vw, 1rem);
  width: min(100%, 32rem);
  min-width: 0;
}
.site-footer__text{
  color: var(--site-footer-text-color);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  text-shadow: 0 4px 16px var(--site-footer-text-shadow-color);
}

/* ==================================================
 * site-footer utility
 * ================================================== */
.site-footer__utility{
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 4rem);
  width: 100%;
  padding-top: clamp(1.5rem, 2vw, 2rem);
  border-top: 1px solid var(--site-footer-utility-border-color);
}
.site-footer__nav{
  min-width: 0;
}
.site-footer__menu{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(0.5rem, 1vw, 1rem);
  min-width: 0;
}
.site-footer__menu .menu-item{
  min-width: 0;
}
.site-footer__menu .menu-link{
  color: var(--site-footer-utility-menu-link-color);
  font-family: var(--font-en-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 200ms cubic-bezier(.2,.8,.2,1);
}
.site-footer__menu .menu-link:hover,
.site-footer__menu .menu-link:focus-visible{
  color: var(--site-footer-utility-menu-link-color-hover);
}
.site-footer__copyright{
  color: var(--site-footer-utility-copyright-color);
  font-family: var(--font-en-sans);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ==================================================
 * site-footer responsive 1025px
 * ================================================== */
@media (min-width: 1025px){
  .site-footer[data-ui-theme-surface="dark"]::before{
    content: "";
    background: var(--theme-surface-divider);
    width: 1px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--layout-rail-width);
    z-index: 4;
    transform: scaleX(.5);
    transform-origin: left top;
    pointer-events: none;
  }
  .site-footer__inner{
    width: min(100%, calc(var(--layout-inner-width) + var(--layout-rail-width)));
    padding-right: var(--layout-inner-padding);
    padding-left: calc(var(--layout-inner-padding) + var(--layout-rail-width));
  }
  .site-footer__menu{
    flex-direction: row;
    flex-wrap: wrap;
  }
  .site-footer__utility{
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .site-footer__copyright{
    text-align: right;
    white-space: nowrap;
  }
}

/* ==================================================
 * site-footer reduced motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  .site-footer__slide,
  .site-footer__marquee-track{
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .site-footer__menu .menu-link{
    transition: none !important;
  }
}

/* ==================================================
 * ==================================================
 * site-to-top
 * ==================================================
 * ================================================== */
.site-to-top{
  --site-to-top-fg-light-color: rgba(0,0,0,.80);
  --site-to-top-fg-dark-color: rgba(255,255,255,.80);
  --site-to-top-bg-color: rgba(255,255,255,.10);
  --site-to-top-bg-color-hover: rgba(255,255,255,.20);
  --site-to-top-shadow-color: rgba(0,0,0,.10);

  color: var(--site-to-top-fg-dark-color);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--site-to-top-bg-color);
  border-radius: var(--radius-pill);
  box-shadow: 0 2rem 4rem var(--site-to-top-shadow-color);
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 3001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0.5rem, 0);
  transition: color 200ms cubic-bezier(.2,.8,.2,1), background-color 200ms cubic-bezier(.2,.8,.2,1), opacity 200ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 200ms, transform 200ms cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  padding: 0;
}
body[data-ui-theme-float="dark"] .site-to-top{
  color: var(--site-to-top-fg-dark-color);
  background-color: var(--site-to-top-bg-color);
}
body[data-ui-theme-float="light"] .site-to-top{
  color: var(--site-to-top-fg-light-color);
  background-color: var(--site-to-top-bg-color);
}
body[data-ui-theme-float="dark"] .site-to-top:hover,
body[data-ui-theme-float="dark"] .site-to-top:focus-visible,
body[data-ui-theme-float="light"] .site-to-top:hover,
body[data-ui-theme-float="light"] .site-to-top:focus-visible{
  background-color: var(--site-to-top-bg-color-hover);
}
.site-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition: color 200ms cubic-bezier(.2,.8,.2,1), background-color 200ms cubic-bezier(.2,.8,.2,1), opacity 200ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s, transform 200ms cubic-bezier(.2,.8,.2,1);
}
body.is-menu-active .site-to-top{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0.5rem, 0);
}
.site-to-top__icon{
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  position: relative;
  z-index: 1;
  transform: rotate(-90deg);
}
.site-to-top__icon > svg{
  width: 100%;
}


/* ==================================================
 * site-to-top reduced motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  .site-to-top{
    transition: none !important;
  }
}

/* ==================================================
 * ==================================================
 * keyframes
 * ==================================================
 * ================================================== */
@keyframes site-transition-logo-spin{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes site-transition-logo-breathe{
  0%,
  100%{
    opacity: .72;
  }
  50%{
    opacity: 1;
  }
}
@keyframes ui-spin-360{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
@keyframes ui-marquee-x{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes rule-infinite-horizontal{
  0%{opacity: 0;transform: translateX(-100%);}
  10%{opacity: 1;}
  50%{opacity: 1;transform: translateX(0);}
  90%{opacity: 1;}
  100%{opacity: 0;transform: translateX(100%);}
}
@keyframes rule-infinite-vertical{
  0%{transform: translateY(-100%);opacity: 0;}
  10%{opacity: 1;}
  50%{transform: translateY(0%);opacity: 1;}
  90%{opacity: 1;}
  100%{transform: translateY(100%);opacity: 0;}
}