/* 共通ヘッダー（他デザインのページに載せる用。.site-header の中だけに効く） */
.site-header{--blue:#123AF4;--ink:#111827;--line:#DFE6F0;position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
.site-header *{box-sizing:border-box}
.site-header a{color:inherit;text-decoration:none}
.site-header button{font:inherit;background:none;border:0;cursor:pointer;padding:0}
.site-header .wrap{max-width:1440px;margin:0 auto;padding:0 56px}
.site-header .header-inner{display:flex;align-items:center;height:72px;gap:40px}
.site-header .vf-logo{font-family:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:19px;letter-spacing:.02em;white-space:nowrap;line-height:1}
.site-header .vf-logo:hover{color:var(--blue)}
.site-header .gnav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:700;padding-left:32px;border-left:1px solid var(--line)}
.site-header .gnav a{position:relative;padding:6px 0}
.site-header .gnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .2s}
.site-header .gnav a:hover::after,.site-header .gnav a[aria-current="page"]::after{transform:scaleX(1)}
.site-header .gnav a[aria-current="page"]{color:var(--blue)}
.site-header .gnav-lab{color:var(--ink)}
.site-header .gnav-lab[aria-current="page"],.site-header .gnav-lab:hover{color:var(--blue)}
.site-header .gnav-lab .pxt{-webkit-mask-image:url(../assets/brand/logo-header.svg);mask-image:url(../assets/brand/logo-header.svg)}
.site-header .pxt{display:block;background:currentColor;aspect-ratio:var(--ar);height:13px;width:auto;-webkit-mask:var(--src) left center/contain no-repeat;mask:var(--src) left center/contain no-repeat}
.site-header .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site-header .header-actions{margin-left:auto;display:flex;align-items:center;gap:22px}
.site-header .btn-outline{border:1.5px solid var(--blue);color:var(--blue);font-size:13px;font-weight:700;padding:7px 18px;border-radius:4px;transition:background .2s,color .2s}
.site-header .btn-outline:hover{background:var(--blue);color:#fff}
.site-header .header-tag{font-family:"Share Tech Mono",monospace;font-size:8px;line-height:1.25;color:#9aa6c4;letter-spacing:.06em}
.site-header .menu-btn{display:none;width:36px;height:36px;position:relative}
.site-header .menu-btn span{position:absolute;left:8px;right:8px;height:2px;background:var(--blue);transition:transform .2s}
.site-header .menu-btn span:first-child{top:13px}.site-header .menu-btn span:last-child{top:21px}
.menu-open .site-header .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-open .site-header .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1080px){.site-header .wrap{padding:0 32px}.site-header .header-tag{display:none}.site-header .gnav{gap:22px;padding-left:20px}.site-header .header-inner{gap:24px}}
@media (max-width:860px){
  .site-header .wrap{padding:0 16px}
  .site-header .header-inner{height:60px}
  .site-header .vf-logo{font-size:17px}
  .site-header .gnav{position:fixed;inset:60px 0 auto 0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 20px;border-left:0;border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s}
  .site-header .gnav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
  .menu-open .site-header .gnav{transform:none;opacity:1;pointer-events:auto}
  .site-header .menu-btn{display:block}
  .site-header .btn-outline{display:none}
}
.site-header .vf-logo{font-size:0!important;letter-spacing:0;display:inline-block;height:20px;aspect-ratio:615/190;background:currentColor;flex:none;
  -webkit-mask:url(../assets/brand/vlvt-logo.png) center/contain no-repeat;mask:url(../assets/brand/vlvt-logo.png) center/contain no-repeat}
@media (max-width:860px){.site-header .vf-logo{height:17px}}

/* モバイルメニューの先頭に会社トップ（PCではロゴがその役割なので非表示） */
.gnav-home{display:none}
@media (max-width:860px){
  .gnav .gnav-home{display:flex;align-items:baseline;gap:10px;font-family:"Familjen Grotesk",sans-serif;font-size:17px;letter-spacing:.02em}
  .gnav-home small{font-family:inherit;font-size:11px;font-weight:500;color:#7a8091}
  .gnav-home small::before{content:"← ";}
}

/* モバイルメニュー：画面幅いっぱいではなく、右上に開く小さめのパネル */
@media (max-width:860px){
  .site-header .gnav,.gnav{left:auto;right:12px;top:68px;bottom:auto;width:min(290px,calc(100vw - 24px));align-items:stretch;text-align:left;
    padding:4px 18px 8px;border:1px solid var(--line,#e3e6ee);border-radius:14px;box-shadow:0 18px 44px rgba(13,19,48,.18);transform-origin:top right}
  .site-header .gnav a,.gnav a{text-align:left;align-self:stretch}
  .site-header .gnav a:last-child,.gnav a:last-child{border-bottom:0}
}
