/* ============================================================
   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; display: block; width: 208px; height: 64px;
  z-index: 10; cursor: pointer;
}
.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 */
a.hdr-cta-recruit { position: absolute; left:  938px; top: 124px; width: 185px; height: 56px; border-radius: 8px; z-index: 10; }
a.hdr-cta-contact { position: absolute; left: 1137px; top: 124px; width: 283px; height: 56px; border-radius: 8px; z-index: 10; }

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

/* ────────────────────────────────────────────────────────────
   Responsive: scale the 1440 canvas on smaller viewports
   ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (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: 1023px) {
  /* On phones and tablets, use the readable hamburger header instead of
     shrinking the 1440px desktop artwork and its fixed click targets. */
  .root-wrap { width: 100%; }
  .root { width: 100%; zoom: 1; }
  .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); */
    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 {
  background: #fff;
}
/* メガメニューがメインコンテンツの全要素より前に表示されるよう保証 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9000;
  overflow: visible;
}
.site-header__inner { overflow: visible; }

/* ── 各ナビ項目を group化、ホバーでメガメニュー表示 ── */
.hdr-nav-group {
  position: relative;
  align-self: stretch;      /* ナビ高さいっぱいに伸ばし、サブメニューの top:100% を安定させる */
  display: flex;
  align-items: center;
}
.hdr-nav-mega {
  position: absolute;
  line-height: 1.4;
  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: 6px;
}
/* ホバー時の見えない橋(マウスが離れないように) */
.hdr-nav-mega::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}
.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; }

/* ============================================================
   WordPress 管理バー対応（スクロール時の潜り込み防止）
   ログイン時の管理バー(固定/32px, ≤782pxで46px, ≤600pxは非固定)分だけ
   スティッキーヘッダーの固定位置を下げる。静的サイトには .admin-bar が
   付かないため影響しない。
   ============================================================ */
.admin-bar .site-header { top: 32px; }
.admin-bar .mhdr      { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .mhdr    { top: 46px; }
}
@media screen and (max-width: 600px) {
  .admin-bar .mhdr    { top: 0; }
}

/* ────────────────────────────────────────────────────────────
   ヘッダー上部の余白を狭める（上側24pxをクロップ：余白40→16px）
   ──────────────────────────────────────────────────────────── */
.site-header,
.site-header__inner { height: 114px; }
.site-header__inner { transform: translateY(-24px); }

/* Compact only the upper brand area. Navigation and page flow stay unchanged. */
.site-header__inner::before {
  content: '';
  position: absolute;
  top: -47px;
  left: 0;
  width: 1440px;
  height: 200px;
  background: url('../assets/header.png') top center / 1440px 200px no-repeat;
  clip-path: inset(120px 0 20px 0);
  pointer-events: none;
}
.site-header__bg {
  position: absolute;
  inset: 0;
  width: 1440px;
  height: 200px;
  clip-path: inset(0 0 80px 0);
  transform: scaleY(.67);
  transform-origin: top center;
}
.hdr-logo-hit {
  top: 27px;
  height: 50px;
}
.hdr-pill-mask,
.brand-pill {
  transform: translateY(-13px) scaleY(.67);
  transform-origin: top center;
}
.hdr-nav-mask {
  left: 20px;
  top: 94px;
  height: 46px;
}

/* Reference header: compact 1440 × 136 desktop composition. */
@media (min-width: 1024px) {
  .site-header,
  .site-header__inner { height: 136px; }
  .site-header__inner { transform: none; }
  .site-header__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 1440px;
    height: 136px;
    background: url('../assets/header.png') center -48px / 1440px 200px no-repeat;
    clip-path: inset(72px 0 0 0);
    pointer-events: none;
  }
  .site-header__bg {
    position: absolute;
    left: 0;
    top: -33px;
    width: 1440px;
    height: 200px;
    clip-path: inset(0 0 95px 0);
    transform: none;
  }
  .hdr-logo-hit { top: 7px; height: 61px; }
  .hdr-pill-mask--iteee,
  .hdr-pill-mask--systemsharing,
  .hdr-pill-mask--aiocr { top: 5px; }
  .brand-pill--iteee,
  .brand-pill--systemsharing,
  .brand-pill--aiocr { top: 7px; transform: none; }
  .hdr-nav-mask { left: 20px; top: 86px; height: 46px; }
  .hdr-nav { left: 20px; top: 93px; height: 43px; gap: 4px; }
  .hdr-nav-item { padding: 4px 19px; }
  .hdr-nav-item__en { font-size: 16px; }
  .hdr-nav-item__ja { margin-top: 3px; font-size: 11px; }
  a.hdr-cta-recruit,
  a.hdr-cta-contact { top: 76px; }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .site-header { height: calc(136px * (100vw / 1440px)); }
  .site-header__inner {
    margin: 0;
    transform-origin: top left;
    transform: scale(calc(100vw / 1440px));
  }
}