@charset "UTF-8";

/* =====================================================
   FULLSCREEN MENU – MYTHOS
===================================================== */

/* =====================================================
   ROOT
===================================================== */

.site-menu{
  position: fixed;
  inset: 0;
  z-index: 10000; /* ← header(9999)より上に固定 */

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity var(--dur-4) var(--ease-out),
    visibility var(--dur-4) var(--ease-out);

  color: var(--menu-ink);
  font-family: var(--menu-font);
  letter-spacing: var(--menu-letter);
  text-transform: uppercase;
}

html.is-menu-open .site-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =====================================================
   BACKGROUND
===================================================== */

.site-menu__bg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--menu-bg-alpha));
  z-index: 0;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: opacity var(--dur-4) var(--ease-out);
}

/* =====================================================
   WRAP
===================================================== */

.site-menu__wrap{
  position: relative;
  z-index: 1;

  height: 100svh;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 24px;

  overflow: hidden;
}

/* =====================================================
   CLOSE BUTTON
===================================================== */

.site-menu__close{
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 10001;

  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--menu-ink);

  opacity: .92;
  transition: opacity var(--dur-2) var(--ease);
}

.site-menu__close:hover{
  opacity: .72;
}

.site-menu__close span{ display:none; }

.site-menu__close::before,
.site-menu__close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:28px;
  height:1px;
  background: currentColor;
  transform-origin:center;
  transition: transform var(--dur-4) var(--ease-out);
}

.site-menu__close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.site-menu__close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* =====================================================
   NAV
===================================================== */

.site-menu__nav{
  width: min(560px, 100%);
  text-align: center;
  margin-inline: auto;
}

/* =====================================================
   LIST
===================================================== */

.site-menu__list{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.site-menu__list li{
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}

html.is-menu-open .site-menu__list li{
  opacity: 1;
  transform: translateY(0);
}

html.is-menu-open .site-menu__list li:nth-child(1){ transition-delay: 120ms; }
html.is-menu-open .site-menu__list li:nth-child(2){ transition-delay: 220ms; }
html.is-menu-open .site-menu__list li:nth-child(3){ transition-delay: 320ms; }
html.is-menu-open .site-menu__list li:nth-child(4){ transition-delay: 420ms; }
html.is-menu-open .site-menu__list li:nth-child(5){ transition-delay: 520ms; }
html.is-menu-open .site-menu__list li:nth-child(6){ transition-delay: 620ms; }

/* =====================================================
   LINK
===================================================== */

.site-menu__list a{
  color: inherit;
  text-decoration: none;

  font-size: 15px;
  letter-spacing: .18em;
  line-height: 1.4;

  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

.site-menu__list a:hover{
  opacity: .78;
  transform: translateY(1px);
}

/* =====================================================
   Scroll Lock
===================================================== */

html.is-menu-open,
html.is-menu-open body{
  overflow: hidden;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px){

  .site-menu__wrap{
    padding: 0 20px;
  }

  .site-menu__list{
    gap: 18px;
  }

  .site-menu__list a{
    font-size: 13px;
    letter-spacing: .16em;
  }
}

/* =====================================================
   Reduced Motion
===================================================== */

@media (prefers-reduced-motion: reduce){
  .site-menu,
  .site-menu__bg,
  .site-menu__list li,
  .site-menu__list a,
  .site-menu__close{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}