/* ============================================================
   common.css — shared base / header / footer / contact CTA
   ============================================================ */

:root {
  --navy: #25426B;
  --navy-soft: #4a6a98;
  --yellow: #F3CB00;
  --paper: #fffefd;
  --breadcrumb-bg: #d7dee8;
  --pale: #f0f8ff;
  --ink: #4d4d4d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  font-family: "Noto Sans JP", sans-serif;
  color: #222;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ────────────────────────────────────────────────────────────
   Heading/paragraph margin reset inside <main>
   Strip browser default *margins* on semantic tags. We use the
   tag name `main` (not the class) as the ancestor so the selector
   specificity stays low (0,0,2) — that way any class-level rule
   like `.sec-crew__body { margin: 0 auto }` still wins.
   Padding is only reset on list elements (for their indentation).
   ──────────────────────────────────────────────────────────── */
main h1, main h2, main h3, main h4, main h5, main h6,
main p, main figure { margin: 0; }
main ul, main ol { margin: 0; padding: 0; list-style: none; }

/* Screen-reader only — visible to assistive tech & search engines,
   visually hidden. Used e.g. for the <h1> overlaid on FV slider. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ────────────────────────────────────────────────────────────
   Layout root — 1440px design canvas
   ──────────────────────────────────────────────────────────── */
.root {
  width: 1440px;
  margin: 0 auto;
}

/* Wrap is the scaling viewport on smaller screens */
.root-wrap { width: 100%; overflow-x: clip; overflow-y: visible; }

/* ────────────────────────────────────────────────────────────
   Header
   ──────────────────────────────────────────────────────────── */
.site-header { background: #fff; height: 200px; width: 100%; }
.site-header__inner { position: relative; margin: 0 auto; width: 1440px; height: 200px; }
.site-header__bg { display: block; }

.hdr-logo-hit {
  position: absolute; left: 4px; top: 40px;
  width: 280px; height: 74px; border-radius: 6px;
  z-index: 10;
  cursor: pointer;
}
.mhdr__logo { cursor: pointer; }

/* Three brand pills — each has a white mask + the pill image on top */
.hdr-pill-mask { position: absolute; background: #fff; }
.hdr-pill-mask--iteee         { left: 778px; top: 38px; width: 212px; height: 68px; }
.hdr-pill-mask--systemsharing { left: 994px; top: 38px; width: 212px; height: 68px; }
.hdr-pill-mask--aiocr         { left: 1210px; top: 38px; width: 212px; height: 68px; }

.brand-pill {
  position: absolute; width: 208px; height: 64px;
}
.brand-pill--iteee         { left: 780px; top: 40px; }
.brand-pill--systemsharing { left: 996px; top: 40px; }
.brand-pill--aiocr         { left: 1212px; top: 40px; }

/* Nav row */
/* マスクの左端を breadcrumb(.breadcrumb__list max-width: 1400px)と同じ位置(left: 20px)に揃え、
   右端は CTA ボタン(left: 938px)の直前で止める。
   (CTA ボタンの絵柄は SVG ヘッダー背景内にあるため、白マスクで覆うと見えなくなる) */
.hdr-nav-mask { position: absolute; left: 20px; top: 134px; width: 918px; height: 50px; background: #fff; }
.hdr-nav      { position: absolute; left: 12px; top: 138px; height: 48px; display: flex; align-items: center; gap: 6px; }
.hdr-nav-item {
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  padding: 6px 14px; border-radius: 6px;
  transition: transform .25s var(--ease-sharp, ease), background .2s ease;
}
.hdr-nav-item__en { font-family: Outfit, sans-serif; font-weight: 700; font-size: 17px; color: var(--navy); }
.hdr-nav-item__ja { font-size: 12px; color: var(--ink); margin-top: 4px; letter-spacing: .02em; }
.hdr-nav-item:hover {
  transform: translateY(-2px);
  background: rgba(37, 66, 107, .06);
}

/* CTA hit zones */
.hdr-cta-recruit { position: absolute; left:  938px; top: 124px; width: 185px; height: 56px; border-radius: 8px; }
.hdr-cta-contact { position: absolute; left: 1137px; top: 124px; width: 283px; height: 56px; border-radius: 8px; }

/* ────────────────────────────────────────────────────────────
   Mobile header — hidden on desktop, shown on mobile
   ──────────────────────────────────────────────────────────── */
.mhdr { display: none; }

/* ────────────────────────────────────────────────────────────
   Responsive: scale the 1440 canvas on smaller viewports
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1439px) {
  .root-wrap { width: 100vw; }
  .root {
    zoom: calc(100vw / 1440);
    /* Fallback: most browsers support zoom; for older ones the page
       just stays at 1440 and horizontally scrolls. */
  }
}

@media (max-width: 767px) {
  /* On mobile, hide the desktop header (it's huge & illegible when shrunken
     to phone width) and show a mobile hamburger header instead. */
  .site-header { display: none; }
  .mhdr {
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 16px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
            backdrop-filter: blur(16px) saturate(1.4);
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid rgba(229, 229, 229, .8);
    box-shadow: 0 1px 0 rgba(37, 66, 107, .06);
  }
  .mhdr__logo img { height: 32px; width: auto; }
  .mhdr__burger {
    width: 40px; height: 40px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
  }
  .mhdr__burger span {
    display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px;
    transition: transform .25s, opacity .25s;
  }
  .mhdr__panel {
    position: fixed; top: 56px; left: 0; right: 0;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
            backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid rgba(229, 229, 229, .7);
    padding: 8px 0; max-height: 0; overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    z-index: 99;
    box-shadow:
      0 12px 32px rgba(37, 66, 107, .14),
      inset 0 1px 0 rgba(255, 255, 255, .9);
  }
  .mhdr.is-open .mhdr__panel { max-height: 80vh; padding: 12px 0; overflow-y: auto; }
  .mhdr.is-open .mhdr__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mhdr.is-open .mhdr__burger span:nth-child(2) { opacity: 0; }
  .mhdr.is-open .mhdr__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mhdr__list { list-style: none; margin: 0; padding: 0; }
  .mhdr__list a {
    display: block; padding: 12px 20px; font-size: 15px; color: var(--navy);
    font-weight: 600; border-bottom: 1px solid rgba(37, 66, 107, .1);
  }
  .mhdr__list a:hover,
  .mhdr__list a:active { background: rgba(37, 66, 107, .06); }

  /* ── ハンバーガー内: ソリューションLPボタン群 ── */
  .mhdr__sols {
    padding: 18px 20px 16px;
    border-bottom: 1px solid rgba(37, 66, 107, .1);
    background: transparent;
  }
  .mhdr__section-label {
    margin: 0 0 12px;
    font-family: Outfit, sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #888;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  /* ラッパーは無装飾 - ピル画像そのものがボタンの見た目 */
  .mhdr__sol-btn {
    display: block;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 auto 12px;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
  }
  .mhdr__sol-btn:last-child { margin-bottom: 0; }
  .mhdr__sol-btn:hover,
  .mhdr__sol-btn:active {
    transform: translateY(-1px);
    filter: brightness(1.05);
  }
  .mhdr__sol-btn img {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* ── ハンバーガー内: CTAボタン群 (採用 / 問い合わせ) ── */
  .mhdr__cta {
    padding: 18px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mhdr__cta-btn {
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-decoration: none;
    transition: filter .2s ease, transform .2s ease;
  }
  .mhdr__cta-btn--recruit {
    background: #fff;
    color: var(--navy);
    border: 1.5px solid var(--navy);
  }
  .mhdr__cta-btn--contact {
    background: var(--yellow);
    color: var(--navy);
  }
  .mhdr__cta-btn:hover,
  .mhdr__cta-btn:active {
    filter: brightness(1.05);
    transform: translateY(-1px);
  }
}

/* Footer accordion is mobile-only (handled by site-footer.css @media);
   on PC the sitemap shows 4 columns fully expanded as in the original
   design. The toggle button stays hidden at >720px. */

/* ────────────────────────────────────────────────────────────
   FV slider — responsive height
   Original .vt-fv is fixed 705px tall (designed for 1440 wide).
   On narrower viewports, scale the height proportionally so the
   slide artwork doesn't sit in a letterboxed window.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .vt-fv__dot-hits { bottom: 12px; }
}
@media (max-width: 767px) {
  .vt-fv__dot-hits { bottom: 8px; gap: 6px; }
  .vt-fv__dot-hit  { width: 20px; height: 20px; }
}

/* ============================================================
   STICKY HEADER + GLOBAL MEGA MENU (フッターと同期したホバー展開)
   ============================================================ */
.mhdr {
  position: sticky;
  top: 0;
  z-index: 9999;
}
.root-wrap {
  position: sticky;
  top: 0;
  z-index: 9000;
  background: #fff;
}
/* メガメニューがメインコンテンツの全要素より前に表示されるよう保証 */
.site-header { overflow: visible; }
.site-header__inner { overflow: visible; }

/* ── 各ナビ項目を group化、ホバーでメガメニュー表示 ── */
.hdr-nav-group {
  position: relative;
}
.hdr-nav-mega {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateX(0);
  /* グラスモーフィズム: 半透明 + フロストブラー */
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
          backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 10px;
  padding: 12px 8px;
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  z-index: 300;
  box-shadow:
    0 10px 32px rgba(37, 66, 107, .18),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  margin-top: 14px;
}
/* ホバー時の見えない橋(マウスが離れないように) */
.hdr-nav-mega::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.hdr-nav-mega ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hdr-nav-mega li a {
  display: block;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}
.hdr-nav-mega li a:hover {
  background: rgba(37, 66, 107, .08);
  color: #0a2a52;
}
.hdr-nav-group:hover .hdr-nav-mega,
.hdr-nav-group:focus-within .hdr-nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) translateY(2px);
}

/* ===== 汎用サブページラッパ（フォールバックテンプレート用・直書き廃止） ===== */
.sub-wrap { max-width: 960px; margin: 0 auto; padding: 48px 20px; }

/* ────────────────────────────────────────────────────────────
   ヘッダーの余白＋段間を詰める（200px → 146px、段間 21px→8px）
   ・内側を丸ごと上へ移動して上の余白を除去
   ・下の余白は背景画像だけクリップ（メガメニュー非影響）
   ・下段(ナビ/CTA)は header.svg 側で -13px 上へ寄せ済み。HTML側の
     オーバーレイ(ナビ/マスク/CTA)も同量上げて位置を一致させる。
   ──────────────────────────────────────────────────────────── */
.site-header,
.site-header__inner { height: 146px; }
.site-header__inner { transform: translateY(-34px); }
.site-header__bg { clip-path: inset(0 0 20px 0); }
.hdr-nav-mask    { top: 121px; }
.hdr-nav         { top: 125px; }
.hdr-cta-recruit { top: 111px; }
.hdr-cta-contact { top: 111px; }