/* ==========================================================================
   header.css — サイトヘッダー（Figma: Header 1440×96）
   --------------------------------------------------------------------------
   ロゴ 24px Bold（字間0.04em）/ ナビ 16px Medium gap80 / ボタン .ic-btn--pill
   ※ モバイル表示は Figma 未定義のため、トークンのみで最小構成（トグル＋縦積み）
   ========================================================================== */
.ic-header {
  /* 全ページ・全幅で画面上端に追従（html/body は overflow-x: clip なので
     スクロールコンテナを作らず sticky が効く）。*/
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-white);
}
.ic-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 90rem; /* 1440px */
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.ic-header__logo {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-logo);
  line-height: var(--line-height-logo);
  letter-spacing: var(--letter-spacing-medium);
  color: var(--color-text-dark);
  white-space: nowrap;
}
.ic-header__logo img { height: 2.625rem; width: auto; } /* ロゴ画像を使う場合（行高42px）*/

.ic-header__menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-80);
  height: 100%;
}
.ic-header__nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-80);
}
.ic-header__nav a {
  display: block;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-dark);
  white-space: nowrap;
}
.ic-header__nav a:hover,
.ic-header__nav .current-menu-item > a { color: var(--color-primary); }

/* トグル（モバイルのみ表示）*/
.ic-header__toggle {
  display: none;
  position: relative;
  width: var(--space-40);
  height: var(--space-40);
}
.ic-header__toggle span,
.ic-header__toggle span::before,
.ic-header__toggle span::after {
  position: absolute;
  left: 50%;
  width: var(--space-24);
  height: var(--border-width-2);
  background: var(--color-text-dark);
  margin-left: calc(var(--space-24) / -2);
  border-radius: var(--radius-full);
  content: "";
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.28, 1), opacity 0.2s ease;
}
.ic-header__toggle span { top: 50%; margin-top: calc(var(--border-width-2) / -2); }
.ic-header__toggle span::before { top: calc(var(--space-8) * -1); }
.ic-header__toggle span::after  { top: var(--space-8); }
.ic-header__toggle[aria-expanded="true"] span { background: transparent; }
.ic-header__toggle[aria-expanded="true"] span::before { transform: translateY(var(--space-8)) rotate(45deg); }
.ic-header__toggle[aria-expanded="true"] span::after  { transform: translateY(calc(var(--space-8) * -1)) rotate(-45deg); }


/* ==========================================================================
   SP（767px以下）：フルスクリーン・ドロワーメニュー
   ※ Figma 未定義（SPデザイン無し）のため実装判断。値はすべてトークン参照。
   ========================================================================== */
@media (max-width: 767px) {
  .ic-header__inner { padding-inline: var(--space-24); }
  .ic-header__toggle { display: block; }

  /* ヘッダー下いっぱいに開くパネル。閉じている間も DOM 上に残し、
     visibility で操作対象から外す（transition を効かせるため display は使わない）。*/
  .ic-header__menu {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-40);
    height: auto;
    padding: var(--space-40) var(--space-24) var(--space-48);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-white);
    background-image: var(--gradient-page-head);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--space-16) * -1));
    transition:
      opacity 0.3s ease,
      transform 0.4s cubic-bezier(0.22, 0.9, 0.28, 1),
      visibility 0s linear 0.4s;
  }
  .ic-header__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.3s ease,
      transform 0.4s cubic-bezier(0.22, 0.9, 0.28, 1),
      visibility 0s linear 0s;
  }
  /* 背景の飾り英字（サイト内の見出し背景英字と同じ扱い）*/
  .ic-header__menu::after {
    position: absolute;
    right: var(--space-24);
    bottom: calc(var(--space-8) * -1);
    z-index: -1;
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-display-en);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-heading-bg-text);
    pointer-events: none;
    content: "MENU";
  }

  .ic-header__nav { position: relative; }
  .ic-header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* 1項目ずつ時間差で立ち上げる */
  .ic-header__nav li {
    opacity: 0;
    transform: translateY(var(--space-16));
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.22, 0.9, 0.28, 1);
  }
  /* CTA はナビ直下（上寄せ）*/
  .ic-header__menu .ic-btn {
    width: 100%;
    justify-content: center;
    opacity: 0;
    transform: translateY(var(--space-16));
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.22, 0.9, 0.28, 1);
  }
  .ic-header__menu.is-open .ic-header__nav li,
  .ic-header__menu.is-open .ic-btn {
    opacity: 1;
    transform: none;
  }
  .ic-header__menu.is-open .ic-header__nav li:nth-child(1) { transition-delay: 0.08s; }
  .ic-header__menu.is-open .ic-header__nav li:nth-child(2) { transition-delay: 0.14s; }
  .ic-header__menu.is-open .ic-header__nav li:nth-child(3) { transition-delay: 0.2s; }
  .ic-header__menu.is-open .ic-header__nav li:nth-child(4) { transition-delay: 0.26s; }
  .ic-header__menu.is-open .ic-header__nav li:nth-child(5) { transition-delay: 0.32s; }
  .ic-header__menu.is-open .ic-header__nav li:nth-child(6) { transition-delay: 0.38s; }
  .ic-header__menu.is-open .ic-header__nav li:nth-child(n + 7) { transition-delay: 0.44s; }
  .ic-header__menu.is-open .ic-btn { transition-delay: 0.5s; }

  /* 行そのものをタップ領域に。右端にシェブロン。*/
  .ic-header__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    padding-block: var(--space-20);
    border-bottom: var(--border-width) solid var(--color-border-light);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h3-lg);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-wide);
  }
  .ic-header__nav a::after {
    flex: none;
    width: var(--space-8);
    height: var(--space-8);
    border-top: var(--border-width-2) solid var(--color-primary);
    border-right: var(--border-width-2) solid var(--color-primary);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    content: "";
  }
  .ic-header__nav a:hover::after,
  .ic-header__nav a:focus-visible::after,
  .ic-header__nav .current-menu-item > a::after { transform: translateX(var(--space-4)) rotate(45deg); }

  /* 開いている間は背面をスクロールさせない。
     overflow: hidden にすると body 自身がスクロールコンテナになり、
     sticky ヘッダーが「ドキュメント上端」に貼り付いて画面外へ消えるため、
     位置を保持する position: fixed 方式でロックする（top は nav.js が付与）。*/
  body.ic-nav-open {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .ic-header__menu,
  .ic-header__nav li,
  .ic-header__menu .ic-btn,
  .ic-header__nav a::after { transition: none; }
  .ic-header__menu { transform: none; }
  .ic-header__nav li,
  .ic-header__menu .ic-btn { transform: none; }
}