/*
 * Shared site header for the top page and corporate pages (/company, /services, …).
 * Markup comes from scripts/lib/site-chrome.mjs (pagesHeader) and is mirrored in
 * index.html / Timewitch.dc.html. Keep the two in sync.
 */
/* ロゴ左端・ナビ中央・アクション右端の3カラム */
.tw-site-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:15px clamp(16px,2.5vw,36px);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);background:linear-gradient(180deg, rgba(8,13,28,0.97) 0%, rgba(8,13,28,0.9) 60%, rgba(8,13,28,0.78) 100%);border-bottom:1px solid rgba(233,201,135,0.16)}
.tw-site-header__logo{display:flex;align-items:center;justify-self:start}
.tw-logo-img{height:56px;width:auto;display:block;filter:drop-shadow(0 0 8px rgba(233,201,135,0.28))}
.tw-site-nav{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.tw-site-nav__link{display:block;background:none;border:none;margin:0;cursor:pointer;font:600 13px/1 'Zen Kaku Gothic New',sans-serif;color:#c9d4e6;letter-spacing:0.04em;white-space:nowrap;padding:9px 13px;border-radius:9px;transition:background .2s,color .2s}
.tw-site-nav__link:hover,.tw-site-nav__link:focus-visible{color:#f6dd97;background:rgba(233,201,135,0.12)}
.tw-site-nav__link[aria-current="page"],.tw-site-nav__link.is-current{color:#f6dd97;font-weight:700}
.tw-site-header__actions{justify-self:end;display:flex;align-items:center;gap:12px}
.tw-cta-gate{font:700 12.5px/1 'Zen Kaku Gothic New',sans-serif;color:#0c1428;letter-spacing:0.06em;padding:10px 18px;border:none;border-radius:999px;background:linear-gradient(180deg,#f6dd97,#d3ab63);white-space:nowrap}
.tw-cta-gate:hover{color:#0c1428;filter:brightness(1.06)}
.tw-save-label{display:inline}

/* About Timewitch ▸ 会社概要 / 事業内容 / パーパス (hover / keyboard focus で開く) */
.tw-site-nav__group{position:relative}
.tw-site-nav__trigger::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.7;transition:transform .2s}
.tw-site-nav__group:hover > .tw-site-nav__trigger::after,.tw-site-nav__group:focus-within > .tw-site-nav__trigger::after{transform:translateY(-1px) rotate(225deg)}
.tw-site-nav__sub{position:absolute;top:100%;left:50%;margin-left:-80px;width:160px;padding-top:8px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.tw-site-nav__trigger{cursor:default}
.tw-site-nav__group:hover .tw-site-nav__sub,.tw-site-nav__group:focus-within .tw-site-nav__sub{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s,visibility 0s}
.tw-site-nav__sub-inner{display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid rgba(233,201,135,0.2);border-radius:12px;background:rgba(10,17,36,0.97);box-shadow:0 14px 34px rgba(0,0,0,0.45)}
.tw-site-nav__sub .tw-site-nav__link{padding:11px 16px}

@media (max-width: 1180px) {
  .tw-site-nav__link{padding:9px 9px}
  .tw-save-label{display:none}
}
/* 3カラムが収まらない幅では、ナビを残り幅の中央に置く */
@media (max-width: 1060px) {
  .tw-site-header{display:flex}
  .tw-site-nav{flex:1}
  .tw-site-header__logo,.tw-site-header__actions{flex:none}
}
@media (max-width: 860px) {
  .tw-site-header{gap:10px;padding-left:16px;padding-right:16px}
  .tw-logo-img{height:40px}
  .tw-site-nav{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tw-site-nav::-webkit-scrollbar{display:none}
  .tw-site-nav__link{padding:8px 10px;font-size:12px}
  /* 横スクロールではドロップダウンが切れるので、子メニューを横並びに展開する */
  .tw-site-nav__group,.tw-site-nav__sub,.tw-site-nav__sub-inner{display:contents}
  .tw-site-nav__trigger{display:none}
  .tw-site-nav__sub{opacity:1;visibility:visible;transform:none}
  .tw-site-nav__sub .tw-site-nav__link{padding:8px 10px}
  .tw-site-header__actions{gap:8px}
  .tw-cta-gate{padding:9px 12px;font-size:11.5px}
}