/* =========================================================
   Header
   モバイルファースト（min-width）で記述
   ========================================================= */

/* 共通の変数ファイルがあればそちらに移してください */
:root {
  --color-primary: #558f41;
  --color-sub: #7DBD76;
  --color-text: #333;
  --color-border: #ddd;
  --header-h: 64px;
}
@media (min-width: 1024px) {
  :root { --header-h: 88px; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.is-scroll-locked { overflow: hidden; }

/* ---------- バー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__bar {
  background: #fff;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  height: var(--header-h);
  margin-inline: auto;
}
.site-header__logo img {
  display: block;
  height: 40px;
  width: auto;
}

/* ---------- ハンバーガー（SP） ---------- */
.nav-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-toggle__line {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  transition: transform .3s, opacity .3s;
}
.nav-toggle__line:nth-child(1) { top: 14px; }
.nav-toggle__line:nth-child(2) { top: 21px; }
.nav-toggle__line:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- グローバルナビ（SP：全画面ドロワー） ---------- */
.gnav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 8px 16px 40px;
  background: #fff;
}
.site-header.is-nav-open .gnav { display: block; }

.gnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gnav a {
  color: var(--color-text);
  text-decoration: none;
}
.gnav__item {
  border-bottom: 1px solid var(--color-border);
}
.gnav__link {
  display: block;
  width: 100%;
  padding: 16px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}

/* 事業内容の矢印 */
.gnav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.gnav__trigger::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .5;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s;
}
.gnav__trigger[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(-135deg);
}

.gnav__extra {
  margin-top: 24px !important;
  font-size: .875rem;
}
.gnav__extra a {
  display: block;
  padding: 8px 4px;
}

/* ---------- 事業内容パネル（SP：アコーディオン） ---------- */
.service-panel {
  display: none;
  padding: 0 0 16px;
}
.service-panel.is-open { display: block; }

.service-panel__list {
  display: grid;
  gap: 8px;
}
.svc {
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-sub) 12%, white);
}
.svc a {
  position: relative;
  display: block;
  padding: 12px 16px 12px 32px;
}
/* 「›」 */
.svc a::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-primary);
  border-right: 1.5px solid var(--color-primary);
  transform: translateY(-50%) rotate(45deg);
}
.svc__main { font-weight: 700; }
.svc__sub a {
  padding-left: 48px;
  font-size: .9375rem;
}
.svc__sub a::before { left: 30px; }

/* =========================================================
   PC
   ========================================================= */
@media (min-width: 1024px) {

  .site-header__logo img { height: 56px; }
  .nav-toggle { display: none; }

  .gnav {
    display: block;
    position: static;
    overflow: visible;
    padding: 0;
    background: none;
  }
  .gnav__extra { display: none; }

  .gnav__list {
    display: flex;
    gap: 56px;
  }
  .gnav__item { border-bottom: 0; }
  .gnav__link {
    padding: 8px 0;
    transition: color .2s;
  }
  .gnav__link:hover,
  .gnav__trigger[aria-expanded="true"] {
    color: var(--color-primary);
  }

  /* パネル：ヘッダー直下に全幅で、上からプルダウン */
  .service-panel {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 32px 16px;
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .35s ease, visibility 0s .35s;
  }
  .service-panel.is-open {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path .35s ease;
    background-color: var(--color-primary);
  }

  .gnav .service-panel__list {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin-inline: auto;
  }
  .svc {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding-inline: 20px;
    border-radius: 999px;
    background: #fff;
    font-size: .9375rem;
    white-space: nowrap;
  }
  .svc--group  { grid-column: span 6; } /* 1024〜1279px：1行に1つ */
  .svc--single { grid-column: span 0; }

  .svc a {
    padding: 8px 0 8px 18px;
    transition: color .2s;
  }
  .svc a:hover { color: var(--color-primary); }
  .svc a::before { left: 2px; }

  /* 親項目は矢印なし＋右に区切り線 */
  .svc__main {
    padding: 8px 20px 8px 0 !important;
    font-weight: 400;
    border-right: 1px solid var(--color-border);
  }
  .svc__main::before { display: none; }

  .svc__sub {
    display: flex;
    gap: 20px;
    padding-left: 20px !important;
  }
  .svc__sub a {
    padding-left: 18px;
    font-size: inherit;
  }
  .svc__sub a::before { left: 2px; }
}

/* 広い画面：業務アプリとホームページを横並びに */
@media (min-width: 1280px) {
  .svc--group { grid-column: span 3; }
}

@media (prefers-reduced-motion: reduce) {
  .service-panel,
  .service-panel.is-open,
  .nav-toggle__line,
  .gnav__trigger::after {
    transition: none;
  }
}