@charset "utf-8";

/* ==================================================
 * site-header
 * ================================================== */
.site-header{
  --header-height: var(--layout-header-height); 
  --header-font-size-drawer-ja: var(--fs-md);
  --header-font-size-drawer-en: var(--fs-xs);
  
  --z-header: 2000;
  --z-header-title: 2002;
  --z-header-backdrop: 1700;
  --z-header-drawer: 1800;
  --z-header-bar: 2001;
  --z-header-rail: 3000;
  --z-header-backdrop-pc: 2400;
  --z-header-drawer-pc: 2500;
  --z-header-drawer-rail-cover: 2501;
  
  height: var(--header-height);
  position: fixed;
  top: 0;left: 0;right: 0;
  z-index: var(--z-header);
  transition: transform .4s ease;
}
.site-header.hide-up{
  transform: translateY(calc(-100% - 5px));
}

/* ==================================================
 * hide-up motion polish
 * ================================================== */
.site-header__bar,
.site-header__rail{
  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,
.site-header.hide-up .site-header__rail{
  opacity: 0;
  transform: translate3d(0, -10px, 0);
}

/* ==================================================
 * site-header__bar
 * ================================================== */
.site-header__bar{
  display: flex;align-items: center;justify-content: flex-start;
  height: var(--header-height);
  padding-left: clamp(1.5rem, 2.5vw, 2.5rem);
  position: relative;
  z-index: var(--z-header-bar);
}

/* ==================================================
 * site-header__title
 * ================================================== */
.site-header__title{
  display: inline-flex;align-items: center;
  height: var(--header-height);
}
.site-header__logo{
  color: var(--color-fg-white);
  display: flex;align-items: center;
  height: 56px;
}
.site-header__logo-svg{
  display: block;
  height: 24px;
}
.site-header__logo-svg > svg{
  display: block;
  width: auto;
  max-width: none;
  height: 100%;
}
body[data-ui-theme="dark"] .site-header__logo,
body[data-ui-theme-default="dark"]:not([data-ui-theme]) .site-header__logo{
  color: var(--color-fg-white) !important;
}
body[data-ui-theme="light"] .site-header__logo,
body[data-ui-theme-default="light"]:not([data-ui-theme]) .site-header__logo{
  color: var(--color-fg-brand-dark) !important;
}
body.is-menu-active .site-header__logo{
  color: var(--color-fg-brand-dark) !important;
}

/* ==================================================
 * site-header__primary-nav
 * ================================================== */
.site-header__primary-nav{
  display: none;
}

/* ==================================================
 * site-header__rail
 * ================================================== */
.site-header__rail{
  display: flex;
  height: var(--header-height);
  position: absolute;
  top: 0;right: 0;
  z-index: var(--z-header-rail);
}
.site-header__rail-sns{
  display: none;
}

/* ==================================================
 * site-header__toggle
 * ================================================== */
.site-header__toggle{
  display: grid;place-items: center;
  width: var(--header-height);
  height: var(--header-height);
}
.site-header__toggle-inner{
  background: rgba(255,255,255,.20);
  display: grid;place-items: center;gap: 10px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
}
body[data-ui-theme-default="light"]:not([data-ui-theme]) .site-header__toggle-icon{
  color: var(--color-fg-brand-dark) !important;
}
body[data-ui-theme-default="dark"]:not([data-ui-theme]) .site-header__toggle-icon{
  color: var(--color-fg-white) !important;
}
body[data-ui-theme-rail="dark"] .site-header__toggle-inner,
body:not([data-ui-theme-rail])[data-ui-theme="dark"] .site-header__toggle-inner{
  background: rgba(255,255,255,.20);
}
body[data-ui-theme-rail="light"] .site-header__toggle-inner,
body:not([data-ui-theme-rail])[data-ui-theme="light"] .site-header__toggle-inner{
  background: rgba(0,0,0,.20);
}
.site-header__toggle-icon{
  color: var(--color-fg-white);
  width: 20px;
  height: 20px;
  position: relative;
}
.site-header__toggle-icon span{
  background: currentColor;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 50%;
  transform-origin: center;
  transition:
    transform 280ms cubic-bezier(.2,.8,.2,1),
    opacity 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));
}
.site-header__toggle.open .site-header__toggle-icon span:nth-child(1){
  transform: translateY(-50%) rotate(45deg);
}
.site-header__toggle.open .site-header__toggle-icon span:nth-child(2){
  opacity: 0;
}
.site-header__toggle.open .site-header__toggle-icon span:nth-child(3){
  transform: translateY(-50%) rotate(-45deg);
}
body[data-ui-theme-rail="dark"] .site-header__toggle-icon,
body:not([data-ui-theme-rail])[data-ui-theme="dark"] .site-header__toggle-icon{
  color: var(--color-fg-white) !important;
}
body[data-ui-theme-rail="light"] .site-header__toggle-icon,
body:not([data-ui-theme-rail])[data-ui-theme="light"] .site-header__toggle-icon{
  color: var(--color-fg-brand-dark) !important;
}
body.is-menu-active .site-header__toggle-icon{
  color: var(--color-fg-brand-dark) !important;
}

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

@media screen and (min-width: 1025px){
  html.is-menu-locked,
  body.is-menu-locked{
    overflow: hidden;
  }

  body.is-menu-locked{
    width: auto;
    height: auto;
    position: static;
  }
}

/* ==================================================
 * site-header__backdrop
 * ================================================== */
.site-header__backdrop{
  background: rgba(0,0,0,.40);
  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;
}

/* ==================================================
 * site-header__drawer
 * ================================================== */
.site-header__drawer{
  background: var(--color-bg-white);
  width: 100%;
  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{
  height: 100%;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.site-header__drawer.is-content-visible .site-header__drawer-inner{
  opacity: 1;
}
.site-header__drawer-nav{
  padding: 96px clamp(1.5rem, 3vw, 3rem) 48px;
}
.site-header__drawer-menu .menu-link{
  color: var(--color-fg-brand-dark);
  display: flex;align-items: baseline;justify-content: space-between;gap: 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.20);
  transition: color 200ms cubic-bezier(.2,.8,.2,1);
}
.site-header__drawer-menu .menu-link:hover,
.site-header__drawer-menu .menu-link:focus-visible{
  color: var(--color-fg-accent-warm);
}
.site-header__drawer-menu .menu-link .menu-text-ja{
  font-size: 1.125rem;
  font-size: var(--header-font-size-drawer-ja);
}
.site-header__drawer-menu .menu-link .menu-text-en{
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-size: var(--header-font-size-drawer-en);
}
.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);
}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(1){transition-delay: 140ms;}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(2){transition-delay: 170ms;}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(3){transition-delay: 200ms;}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(4){transition-delay: 230ms;}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(5){transition-delay: 260ms;}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(6){transition-delay: 290ms;}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(7){transition-delay: 320ms;}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(8){transition-delay: 350ms;}
.site-header__drawer.is-content-visible .site-header__drawer-menu .menu-item:nth-child(n+9){transition-delay: 380ms;}
.site-header__drawer-menu .menu-item.is-drawer-accent + .menu-item.is-drawer-accent{
  margin-top: 0.5rem;
}
.site-header__drawer-menu .menu-item:not(.is-drawer-accent) + .menu-item.is-drawer-accent{
  margin-top: 2rem;
}
.site-header__drawer-menu .menu-item.is-drawer-accent .menu-link{
  background: rgba(74,71,75,.20);
  padding: 1rem;
  border: 1px solid rgba(74,71,75,.40);
  border-radius: var(--radius-xs);
  transition: background-color 200ms cubic-bezier(.2,.8,.2,1), border-color 200ms cubic-bezier(.2,.8,.2,1);
}
.site-header__drawer-menu .menu-item.is-drawer-accent .menu-link .menu-icon{
  color: var(--color-fg-brand-dark);
  background: rgba(255,255,255,.40);
  display: inline-flex;align-items: center;justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(74,71,75,.40);
  border-radius: var(--radius-pill);
  transition: color 200ms cubic-bezier(.2,.8,.2,1), border-color 200ms cubic-bezier(.2,.8,.2,1), transform 300ms cubic-bezier(.22,1,.36,1);
}
.site-header__drawer-menu .menu-item.is-drawer-accent .menu-link .menu-icon svg{
  width: 16px;
  height: 16px;
}
.site-header__drawer-menu .menu-item.is-drawer-accent .menu-link:hover,
.site-header__drawer-menu .menu-item.is-drawer-accent .menu-link:focus-visible{
  background: rgba(114,105,98,.20);
  border-color: rgba(114,105,98,.40);
}
.site-header__drawer-menu .menu-item.is-drawer-accent .menu-link:hover .menu-icon,
.site-header__drawer-menu .menu-item.is-drawer-accent .menu-link:focus-visible .menu-icon{
  color: var(--color-fg-accent-warm);
  border-color: rgba(114,105,98,.40);
  transform: rotate(315deg);
}

/* ==================================================
 * site-header__drawer-sns
 * ================================================== */
.site-header__drawer-sns{
  padding-bottom: clamp(4rem, 8vw, 8rem);
  opacity: 0;
  transform: translate3d(0, 3px, 0);
  transition: opacity 520ms cubic-bezier(.22,1,.36,1), transform 420ms cubic-bezier(.22,1,.36,1);
}
.site-header__drawer.is-content-visible .site-header__drawer-sns{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 260ms;
}
.site-header__drawer-sns .ui-sns__label{
  color: var(--color-fg-brand-dark);
}
.site-header__drawer-sns .ui-sns__link{
  color: var(--color-fg-brand-dark);
  border: 1px solid rgba(0,0,0,.20);
}

/* ==================================================
 * pc
 * ================================================== */
@media screen and (min-width: 1025px){
  .site-header{
    pointer-events: none;
  }
  .site-header.hide-up{
    transform: none;
  }
  .site-header.hide-up .site-header__bar,
  .site-header.hide-up .site-header__rail{
    opacity: 1;
    transform: none;
  }
  .site-header.is-bar-hidden .site-header__bar{
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    pointer-events: none;
  }

  /* ==================================================
   * site-header__bar
   * ================================================== */
  .site-header__bar{
    gap: clamp(2rem, 4vw, 4rem);
    padding-right: var(--layout-rail-width);
  }
  .site-header__bar::after{
    content: '';
    position: absolute;
    border-bottom: 1px solid transparent;
    bottom: 0;left: 0;right: var(--layout-rail-width);
    pointer-events: none;
  }
  body[data-ui-theme="light"] .site-header__bar::after,
  body[data-ui-theme-default="light"]:not([data-ui-theme]) .site-header__bar::after{
    border-bottom-color: rgba(0,0,0,.20);
  }
  body[data-ui-theme="dark"] .site-header__bar::after,
  body[data-ui-theme-default="dark"]:not([data-ui-theme]) .site-header__bar::after{
    border-bottom-color: rgba(255,255,255,.20);
  }

  /* ==================================================
   * site-header__title
   * ================================================== */
  .site-header__title{
    flex: 0 0 auto;
    position: relative;
    z-index: var(--z-header-title);
  }
  .site-header__logo{
    pointer-events: auto;
  }
  body.is-menu-active[data-ui-theme="dark"] .site-header__logo{
    color: var(--color-fg-white) !important;
  }

  /* ==================================================
   * site-header__primary-nav
   * ================================================== */
  .site-header__primary-nav{
    display: flex;align-items: center;justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: clamp(1.5rem, 3vw, 3rem);
    pointer-events: auto;
  }
  .site-header__primary-menu{
    display: flex;flex-wrap: nowrap;align-items: center;gap: clamp(1.5rem, 2vw, 2rem);
    min-width: 0;
  }
  .site-header__primary-menu .menu-item{
    flex: 0 0 auto;
  }
  .site-header__primary-menu .menu-link{
    font-weight: 450;
    display: inline-flex;align-items: center;
    white-space: nowrap;
  }
  body[data-ui-theme="dark"] .site-header__primary-menu .menu-link,
  body[data-ui-theme-default="dark"]:not([data-ui-theme]) .site-header__primary-menu .menu-link{
    color: var(--color-fg-white);
  }
  body[data-ui-theme="light"] .site-header__primary-menu .menu-link,
  body[data-ui-theme-default="light"]:not([data-ui-theme]) .site-header__primary-menu .menu-link{
    color: var(--color-fg-brand-dark);
  }

  /* ==================================================
   * site-header__rail
   * ================================================== */
  .site-header__rail{
    background: transparent;
    width: var(--layout-rail-width);
    height: 100vh;height: 100dvh;
    position: fixed;
    pointer-events: auto;
  }
  .site-header__rail::before{
    content: '';
    background: var(--header-rail-divider, rgba(255,255,255,.20));
    width: 1px;
    position: absolute;
    top: 0;bottom: 0;left: 0;
    transform-origin: left top;
    pointer-events: none;
    transform: scaleX(0.5);
  }  
  body[data-ui-theme-rail="light"] .site-header__rail{
    --header-rail-divider: rgba(0,0,0,.20);
  }
  body[data-ui-theme-rail="dark"] .site-header__rail{
    --header-rail-divider: rgba(255,255,255,.20);
  }
  body.is-menu-active .site-header__rail{
    --header-rail-divider: rgba(0,0,0,.20);
  }
  
  /* ==================================================
   * site-header__toggle
   * ================================================== */
  .site-header__toggle{
    width: 100%;
    position: absolute;
    top: 0;left: 0;
  }
  .site-header__toggle::after{
    content: '';
    width: 100%;
    height: 0;
    border-bottom: 1px solid transparent;
    position: absolute;
    left: 0;bottom: 0;
    pointer-events: none;
  }
  body[data-ui-theme-rail="dark"] .site-header__toggle-inner,
  body:not([data-ui-theme-rail])[data-ui-theme="dark"] .site-header__toggle-inner,
  body[data-ui-theme-rail="light"] .site-header__toggle-inner,
  body:not([data-ui-theme-rail])[data-ui-theme="light"] .site-header__toggle-inner,
  body.is-menu-active .site-header__toggle-inner{
    background: transparent;
  }
  body[data-ui-theme-rail="light"] .site-header__toggle::after,
  body:not([data-ui-theme-rail])[data-ui-theme="light"] .site-header__toggle::after{
    border-bottom-color: rgba(0,0,0,.20) !important;
  }
  body[data-ui-theme-rail="dark"] .site-header__toggle::after,
  body:not([data-ui-theme-rail])[data-ui-theme="dark"] .site-header__toggle::after{
    border-bottom-color: rgba(255,255,255,.20) !important;
  }
  body.is-menu-active .site-header__toggle::after{
    border-bottom-color: rgba(0,0,0,.20) !important;
  }

  /* ==================================================
   * site-header__rail-sns
   * ================================================== */
  .site-header__rail-sns{
    display: flex;justify-content: center;
    width: 100%;
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
  }
  .site-header__rail-sns .ui-sns__list{
    flex-direction: column;
  }
  .site-header__rail-sns .ui-sns__link{
    border: 1px solid transparent;
  }
  .site-header__rail-sns .ui-sns__link[data-sns-theme="light"]{
    color: var(--color-fg-brand-dark) !important;
  }
  .site-header__rail-sns .ui-sns__link[data-sns-theme="dark"]{
    color: var(--color-fg-white) !important;
  }
  .site-header__rail-sns .ui-sns__link[data-sns-theme="light"]:hover,
  .site-header__rail-sns .ui-sns__link[data-sns-theme="light"]:focus-visible{
    border-color: rgba(0,0,0,.20);
  }
  .site-header__rail-sns .ui-sns__link[data-sns-theme="dark"]:hover,
  .site-header__rail-sns .ui-sns__link[data-sns-theme="dark"]:focus-visible{
    border-color: rgba(255,255,255,.20);
  }
  body.is-menu-active .site-header__rail-sns .ui-sns__link{
    color: var(--color-fg-brand-dark) !important;
  }
  body.is-menu-active .site-header__rail-sns .ui-sns__link:hover,
  body.is-menu-active .site-header__rail-sns .ui-sns__link:focus-visible{
    border-color: rgba(0,0,0,.20);
  }
  /* ==================================================
   * site-header__backdrop
   * ================================================== */
  .site-header__backdrop{
    z-index: var(--z-header-backdrop-pc);
  }
  
  /* ==================================================
   * site-header__drawer
   * ================================================== */
  .site-header__drawer{
    width: min(512px, 92vw);
    left: auto;
    z-index: var(--z-header-drawer-pc);
    transform: translate3d(100%,0,0);
    transition: transform 360ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 360ms;
  }
  .site-header__drawer.open{
    transform: translate3d(0,0,0);
    transition: transform 360ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
  }
  .site-header__drawer,
  .site-header__drawer-inner{
    overscroll-behavior: contain;
  }
  .site-header__drawer.open::after{
    content: '';
    background: var(--color-bg-white);
    width: var(--layout-rail-width);
    height: 100vh;height: 100dvh;
    position: fixed;
    top: 0;right: 0;
    z-index: var(--z-header-drawer-rail-cover);
    pointer-events: none;
  }
  .site-header__drawer-nav{
    padding: 96px calc(clamp(1.5rem, 3vw, 3rem) + var(--layout-rail-width)) clamp(1.5rem, 3vw, 3rem) 48px;
  }

  /* ==================================================
   * site-header__drawer-sns
   * ================================================== */
  .site-header__drawer-sns{
    display: none;
  }
}

/* ==================================================
 * ui-theme-ready
 * ================================================== */
html:not(.ui-theme-ready) .site-header{
  opacity: 0;
}

html.ui-theme-ready .site-header{
  opacity: 1;
  transition: opacity 120ms ease;
}

/* ==================================================
 * reduced motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  html.ui-theme-ready .site-header,
  .site-header,
  .site-header__drawer,
  .site-header__drawer-inner,
  .site-header__backdrop,
  .site-header__drawer-menu .menu-item,
  .site-header__drawer-sns,
  .site-header__drawer-sns .ui-sns__link{
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .site-header__toggle-icon span{
    transition: none !important;
    animation: none !important;
  }
}