:root{--paper:#F7F7F6;--surface:#FFFFFF;--sunk:#F1F1EF;--line:#E3E3DF;--line-2:#D2D2CD;
--ink:#17181C;--graphite:#4A4E56;--body:#53565D;--faint:#838A93;--sun-1:#D9765C;--sun-2:#EDB98E;
--glow:#C0654B;--ember:#E29472;--ease:cubic-bezier(.22,.61,.36,1);--maxw:1180px}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.nav-menu ul,.nav-drop-list,.nav-sub{list-style:none;margin:0;padding:0}
.nav-menu li,.nav-drop-list li,.nav-sub li{list-style:none}
.nav-menu a{text-decoration:none}
.page-light .nav::before{opacity:0}
.page-light .nav-logo,.page-light .nav-menu .en{color:var(--ink)}
.page-light .nav-menu .ja{color:var(--graphite)}
.page-light .nav-burger span{background:var(--ink)}
.page-light .nav-menu a:hover .en{color:var(--ember)}
/* ---------- nav (上部・横一列) ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50}
.nav::before{ /* FV上: 上端から下へ自然に消えるシアー (reprolife参考) */
  content:"";position:absolute;left:0;right:0;top:0;height:240px;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(12,16,52,0.62) 0%,rgba(12,16,52,0.4576) 19%,rgba(12,16,52,0.3354) 34%,rgba(12,16,52,0.2368) 47%,rgba(12,16,52,0.1724) 56.5%,rgba(12,16,52,0.1203) 65%,rgba(12,16,52,0.0781) 73%,rgba(12,16,52,0.0465) 80.2%,rgba(12,16,52,0.026) 86.1%,rgba(12,16,52,0.013) 91%,rgba(12,16,52,0.005) 95.2%,rgba(12,16,52,0.0012) 98.2%,rgba(12,16,52,0.0) 100%);
  transition:opacity .75s var(--ease);
}
/* スクロール後: 白のシアーへクロスフェード (常に存在させて透明度だけ動かす) */
.nav.is-stuck{background:transparent;border-bottom:0}
.nav.is-stuck::before{opacity:0}
.nav::after{
  content:"";position:absolute;left:0;right:0;top:0;height:240px;
  pointer-events:none;z-index:0;opacity:0;
  transition:opacity .75s var(--ease);
  background:linear-gradient(180deg,rgba(247,247,246,0.72) 0%,rgba(247,247,246,0.5314) 19%,rgba(247,247,246,0.3895) 34%,rgba(247,247,246,0.275) 47%,rgba(247,247,246,0.2002) 56.5%,rgba(247,247,246,0.1397) 65%,rgba(247,247,246,0.0907) 73%,rgba(247,247,246,0.054) 80.2%,rgba(247,247,246,0.0302) 86.1%,rgba(247,247,246,0.0151) 91%,rgba(247,247,246,0.0058) 95.2%,rgba(247,247,246,0.0014) 98.2%,rgba(247,247,246,0.0) 100%);
}
.nav.is-stuck::after{opacity:1}
.nav-inner{position:relative;z-index:1}
.nav.is-stuck::before{opacity:0}
.nav-inner{
  position:relative;
  width:min(100% - 3rem,1560px);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:82px;
}
.nav-logo{color:#fff;transition:color .75s var(--ease)}
.nav.is-stuck .nav-logo{color:var(--ink)}
.nav-logo .wm{width:132px;height:auto;display:block}
.nav-menu{display:flex;align-items:center}
.nav-menu ul{display:flex;flex-direction:row;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem)}
.nav-menu li{position:relative}
.nav-menu a{
  display:flex;flex-direction:column;align-items:center;line-height:1.25;
  transition:opacity .3s var(--ease);
}
.nav-menu .en{
  font-family:"Gotham","Montserrat",system-ui,sans-serif;font-weight:500;
  font-size:.82rem;letter-spacing:.08em;color:#fff;transition:color .75s var(--ease);
  white-space:nowrap;
}
.nav-menu .ja{
  font-size:.58rem;letter-spacing:.06em;color:rgba(255,255,255,.78);
  margin-top:.2em;transition:color .75s var(--ease);white-space:nowrap;
}
.nav.is-stuck .nav-menu .en{color:var(--ink)}
.nav.is-stuck .nav-menu .ja{color:var(--graphite)}
.nav-menu a:hover .en{color:var(--ember)}
.nav-menu .nav-top{display:flex;flex-direction:column;align-items:center;line-height:1.25;cursor:default}
.nav-menu .has-drop:hover .nav-top .en{color:var(--ember)}
.nav-menu .is-ext .ext-arrow{
  position:absolute;left:-.95em;top:.05em;
  font-size:.72rem;color:var(--ember);
}
.nav-burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;z-index:2}
.nav-burger span{position:absolute;left:11px;width:22px;height:1.5px;background:#fff;transition:background .75s var(--ease),top .35s var(--ease),transform .35s var(--ease)}
.nav.is-stuck .nav-burger span{background:var(--ink)}
.nav-burger span:nth-child(1){top:18px}
.nav-burger span:nth-child(2){top:25px}
.nav-burger[aria-expanded="true"] span:nth-child(1){top:21.5px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){top:21.5px;transform:rotate(-45deg)}
@media (max-width:768px){
  .nav-burger{display:block}
  .nav-inner{height:68px}
  .nav-menu{
    position:fixed;inset:68px 0 auto;padding:1.8rem 1.5rem 2.4rem;display:block;
    background:rgba(247,247,246,.97);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.35s var(--ease);
  }
  .nav.is-stuck .nav-menu{border-radius:0;padding:1.8rem 1.5rem 2.4rem;border-left:0;border-right:0;border-top:0}
  .nav-menu.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav-menu ul{flex-direction:column;align-items:flex-start;gap:1.3rem}
  .nav-menu a,
  .nav-menu .nav-top{align-items:flex-start}
  .nav-menu .en{color:var(--ink)}
  .nav-menu .ja{color:var(--faint)}
  .nav-menu .is-ext .ext-arrow{position:static;margin-bottom:.1em}
}
/* ---------- ナビ: OUR SERVICES のホバーメニュー (3 サービス + ゾスAI の 3 製品) ---------- */
.nav-menu .has-drop{position:relative}
.nav-menu .nav-drop{
  position:absolute;left:50%;top:100%;z-index:60;
  transform:translate(-50%,6px);opacity:0;visibility:hidden;pointer-events:none;
  padding-top:14px;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav-menu .has-drop:hover .nav-drop,
.nav-menu .has-drop:focus-within .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* 親の .nav-menu ul{display:flex}
を打ち消して縦積みにする */
.nav-menu .nav-drop-list,
.nav-menu .nav-sub{display:block;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:0;list-style:none}
.nav-menu .nav-drop-list{
  width:286px;padding:.5rem;
  background:rgba(255,255,255,.98);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 26px 60px -24px rgba(23,24,28,.34);
  text-align:left;
}
.nav-menu .nav-drop-list > li + li{margin-top:.1rem}
.nav-menu .nav-drop-list > li > a,
.nav-menu .nav-drop-list > li > .nd-head{
  display:flex;flex-direction:row;align-items:center;gap:.7rem;
  padding:.58rem .6rem;border-radius:10px;transition:background .25s var(--ease);
}
.nav-menu .nav-drop-list > li > a:hover{background:var(--sunk)}
.nav-menu .nav-drop-list > li > .nd-head{cursor:default}
.nav-menu .nav-drop-list img{width:26px;height:26px;flex:0 0 auto}
.nav-menu .nav-drop .nd-t{display:flex;flex-direction:column;align-items:flex-start;gap:.12em;min-width:0}
.nav-menu .nav-drop .nd-kana{font-size:.86rem;font-weight:700;color:var(--ink);letter-spacing:.03em;white-space:nowrap}
.nav-menu .nav-drop .nd-en{
  font-family:"Gotham","Montserrat",system-ui,sans-serif;font-weight:500;
  font-size:.56rem;letter-spacing:.1em;color:var(--faint);white-space:nowrap;
}
/* ゾスAI から分岐する 3 製品 */
.nav-menu .nav-sub{margin:.05rem 0 .3rem 2.2rem;padding-left:.8rem;border-left:1px solid var(--line-2)}
.nav-menu .nav-sub > li + li{margin-top:.05rem}
.nav-menu .nav-sub a{
  display:flex;flex-direction:column;align-items:flex-start;gap:.1em;
  padding:.36rem .5rem;border-radius:8px;transition:background .25s var(--ease);
}
.nav-menu .nav-sub a:hover{background:var(--sunk)}
.nav-menu .nav-sub .sn{
  font-family:"Gotham","Montserrat",system-ui,sans-serif;font-weight:500;
  font-size:.68rem;letter-spacing:.08em;color:var(--graphite);white-space:nowrap;
}
.nav-menu .nav-sub a:hover .sn{color:var(--glow)}
.nav-menu .nav-sub .sj{font-size:.56rem;letter-spacing:.03em;color:var(--faint);white-space:nowrap}
@media (max-width:900px){
  /* SP はドロワー内にそのまま展開 */
  .nav-menu .nav-drop{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;padding-top:.5rem}
  .nav-menu .nav-drop-list{width:auto;background:transparent;border:0;box-shadow:none;padding:0}
  .nav-menu .nav-drop-list > li > a,
.nav-menu .nav-drop-list > li > .nd-head{padding:.4rem 0}
  .nav-menu .nav-sub{margin-left:2rem}
  /* PC 用の「タップ・ホバー中は左に 50% 寄せる」指定がスマホでも効いて
     ずれていたため、スマホでは常に動かさない */
  .nav-menu .has-drop:hover .nav-drop,
  .nav-menu .has-drop:focus-within .nav-drop{transform:none}
  /* メニューを閉じている間は、中のサービス一覧も押せないようにする (見えないリンクがタップを奪って SKILL NODE 等へ飛んでいた) */
  .nav-menu:not(.is-open) .has-drop .nav-drop{visibility:hidden;pointer-events:none}
}