@charset "utf-8";
/* ==========================================================================
   ヨドラム工業 — FULLSCREEN MOBILE MENU
   右からのドロワーではなく、Clip Path による Mask Reveal で開く
   番号 = Yellow / 英字 = White / 日本語 = 補助（薄い White）
   ========================================================================== */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--c-navy);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--header-h) + var(--sp-4))
    var(--gutter)
    calc(var(--sp-4) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;

  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path var(--t-reveal) var(--ease-mask),
    visibility 0s linear var(--t-reveal);
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition:
    clip-path var(--t-reveal) var(--ease-mask),
    visibility 0s linear 0s;
}

/* --------------------------------------------------------------------------
   NAV LIST
   -------------------------------------------------------------------------- */
.menu__list { display: grid; }

.menu__item { border-bottom: var(--bd-w) solid var(--bd-navy); }

.menu__link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 1.1em;
  row-gap: .1em;
  padding: .78em .2em;
  min-height: var(--hit);

  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
}
.menu.is-open .menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(260ms + var(--i) * 50ms);
}

/* 番号のみ Yellow */
.menu__no {
  grid-row: 1 / 3;
  font-family: var(--font-num);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-yellow);
  flex: none;
}

/* 英字が主役 */
.menu__en {
  font-family: var(--font-en);
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  font-weight: var(--fw-display);
  letter-spacing: .1em;
  line-height: 1.15;
  color: var(--c-white);
}

/* 日本語は補助 */
.menu__ja {
  font-size: .74rem;
  font-weight: var(--fw-medium);
  letter-spacing: .16em;
  line-height: 1.5;
  color: var(--c-on-navy-mute);
}

/* 黄色いラインが左から伸びる */
.menu__link { position: relative; }
.menu__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: var(--bd-accent);
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow) var(--ease-out);
}
.menu__link:hover::after,
.menu__link:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   FOOT
   -------------------------------------------------------------------------- */
.menu__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  display: grid;
  gap: var(--sp-4);

  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
}
.menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: 620ms; }

.menu__tel {
  display: flex;
  align-items: baseline;
  gap: .7em;
  font-family: var(--font-en);
  font-size: 1.55rem;
  font-weight: var(--fw-display);
  letter-spacing: .03em;
}
.menu__tel small {
  font-family: var(--font-jp);
  font-size: .66rem;
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  color: var(--c-on-navy-mute);
}

.menu__sns {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  min-height: var(--hit);
  font-family: var(--font-en);
  font-size: .74rem;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  color: var(--c-on-navy-mute);
  transition: color var(--t-base) var(--ease-out);
}
.menu__sns:hover,
.menu__sns:focus-visible { color: var(--c-yellow); }
.menu__sns svg { width: 18px; height: 18px; flex: none; }


/* 画面の高さが足りない端末ではさらに詰める（スクロールは可能） */
@media (max-height: 760px) {
  .menu__link { padding-block: .62em; }
  .menu__en   { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .menu__tel  { font-size: 1.35rem; }
  .menu__foot { gap: var(--sp-3); padding-top: var(--sp-4); }
}