@charset "utf-8";
/* ==========================================================================
   ヨドラム工業 — HEADER
   HERO 上は透明 → HERO を抜けたら白背景・ネイビー文字へ（260ms）
   ========================================================================== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--c-white);
  transition:
    height var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
}

/* HERO 上での可読性を上げる薄いグラデーション（Drop Shadow は使わない） */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,24,44,.55), rgba(7,24,44,0));
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
}

/* --- HERO を抜けた状態 -------------------------------------------------- */
.header.is-solid {
  height: var(--header-h-solid);
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: 0 var(--bd-w) 0 var(--bd-light);   /* 1px の薄い境界線 */
}
.header.is-solid::before { opacity: 0; }

.header__inner {
  position: relative;
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
}

/* --------------------------------------------------------------------------
   LOGO
   -------------------------------------------------------------------------- */
.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  margin-right: auto;
}
.logo__mark {
  position: relative;
  width: clamp(32px, 3.2vw, 40px);
  aspect-ratio: 320 / 248;
  flex: none;
}
.logo__mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--t-base) var(--ease-out);
}
.logo__mark .is-navy { opacity: 0; }
.header.is-solid .logo__mark .is-white { opacity: 0; }
.header.is-solid .logo__mark .is-navy  { opacity: 1; }

.logo__text { display: grid; gap: 2px; line-height: 1; }
.logo__en {
  font-family: var(--font-en);
  font-weight: var(--fw-display);
  font-size: clamp(.8rem, .85vw, .95rem);
  letter-spacing: .2em;
}
.logo__jp {
  font-size: clamp(.58rem, .6vw, .66rem);
  font-weight: var(--fw-medium);
  letter-spacing: .22em;
  opacity: .78;
}

/* --------------------------------------------------------------------------
   GLOBAL NAV
   -------------------------------------------------------------------------- */
.gnav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
}

.gnav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hit);
  font-size: .87rem;
  font-weight: var(--fw-medium);
  letter-spacing: .1em;
  white-space: nowrap;
}
.gnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: var(--bd-accent);
  background: var(--c-yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-slow) var(--ease-out);
}
.gnav__link:hover::after,
.gnav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
}

/* --------------------------------------------------------------------------
   HAMBURGER
   -------------------------------------------------------------------------- */
.burger {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: var(--hit);
  padding-inline: 4px;
}
.burger__label {
  font-family: var(--font-en);
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .18em;
}
.burger__bars {
  position: relative;
  width: 26px;
  height: 12px;
  flex: none;
}
.burger__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-slow) var(--ease-out);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { bottom: 0; }

/* --- ブレイクポイント ---------------------------------------------------- */
@media (max-width: 1000px) {
  .gnav, .header__cta { display: none; }
  .burger { display: flex; }
}

/* --------------------------------------------------------------------------
   メニュー展開中 — ヘッダーは常に透明・白文字
   -------------------------------------------------------------------------- */
.header.is-menu-open {
  color: var(--c-white);
  background: transparent;
  box-shadow: none;
}
.header.is-menu-open::before { opacity: 0; }
.header.is-menu-open .logo__mark .is-white { opacity: 1; }
.header.is-menu-open .logo__mark .is-navy  { opacity: 0; }
.header.is-menu-open .burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.header.is-menu-open .burger__bars span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }