/* =========================================================
   Layout: header / footer
   ========================================================= */

/* ---------- header ---------- */
/* 最初はページ上部に置いたまま（スクロールに追従しない）。一定量スクロールしたら JS で is-sticky を付け、上からスライドして固定表示する */
.l-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--color-white);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.05);
}

/* スライドアウト中（is-sticky を外したあとの 0.3s）も fixed のまま見せる */
.l-header.is-sticky,
.l-header.is-leaving {
  position: fixed;
}

/* 終了状態は要素本来の状態と同じなので forwards は付けない。
   transform を残すと、fixed な子孫（SP メニュー）の位置基準がヘッダーに移ってしまう */
.l-header.is-sticky {
  animation: header-slide-in 0.3s backwards;
}

.l-header.is-leaving {
  animation: header-slide-out 0.3s both;
}

@keyframes header-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes header-slide-out {
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.l-header__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40.96px;              /* Figma SP: 310 幅の 34px を 375 幅に換算 */
  padding: 10px 16px;
}

.l-header__logo img {
  width: 114px;
  height: 20.96px;
}

.l-header__toggle {
  position: absolute;
  top: 10.5px;
  right: 14.5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 24px;
  height: 18px;
}

/* 押せる範囲だけ 44px 四方に広げる（見た目は 24x18 のまま） */
.l-header__toggle::before {
  content: "";
  position: absolute;
  inset: -13px -10px;
}

.l-header__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-magenta);
  transition: transform 0.3s, opacity 0.3s;
}

.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.l-header__toggle[aria-expanded="true"] .l-header__toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* SP のメニュー（Figma にデザインなし。既存トークンで構成） */
.l-header__nav {
  position: fixed;
  inset: 40.96px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;   /* 画面が低くて収まらないときは上詰めにして、上が切れずにスクロールできるようにする */
  align-items: center;
  gap: 32px;
  padding: 40px var(--gutter);
  background: var(--color-white);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.l-header__nav[data-state="open"] {
  visibility: visible;
  opacity: 1;
}

.l-header__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: -4px;           /* リンクの上下余白 16px のうち、端の 4px を打ち消す（端の位置は従来どおり） */
}

/* 項目の間隔はリンクの余白で作る（文字の間隔 32px = 上下 16px × 2） */
.l-header__link {
  display: block;
  padding: 16px 12px;
  margin-right: -0.025em;       /* 行末の字間の半分を打ち消す（Figma はリンク枠を整数に切り上げている） */
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: background-color 0.2s;
}

@media (hover: hover) {
  .l-header__link:hover {
    background: var(--color-hover-bg);
  }
}

.l-header__cta {
  display: block;
  padding: 16px 40px;
  border-radius: 80px;
  background: var(--grad);
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: filter 0.2s;
}

.l-header__cta:hover {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .l-header__nav,
  .l-header__link,
  .l-header__cta,
  .l-header__toggle-bar {
    transition: none;
  }

  .l-header.is-sticky,
  .l-header.is-leaving {
    animation: none;
  }
}

@media (min-width: 768px) {
  .l-header {
    border-radius: 0 0 24px 24px;
    box-shadow: none;
  }

  .l-header__inner {
    justify-content: space-between;
    width: min(var(--container), 100% - var(--gutter) * 2);
    height: 64px;
    margin-inline: auto;
    padding: 0;
  }

  .l-header__logo img {
    width: 176px;
    height: 32px;
  }

  .l-header__toggle {
    top: 23px;
    right: var(--gutter);
  }

  .l-header__nav {
    inset: 64px 0 0;
  }

  .l-header__link,
  .l-header__cta {
    font-size: 0.875rem;
  }
}

/* ナビ 672px + ロゴ 176px が収まる幅になるまではハンバーガーのまま */
@media (min-width: 1024px) {
  .l-header__toggle {
    display: none;
  }

  .l-header__nav {
    position: static;
    flex-direction: row;
    align-self: stretch;          /* ヘッダーの高さいっぱいに広げ、リンクのホバー背景を上下端まで出す */
    gap: 20px;                    /* 最後のリンクの右余白 20px と合わせて、ボタンまで 40px */
    padding: 0;
    background: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
  }

  .l-header__list {
    flex-direction: row;
    align-self: stretch;
    align-items: stretch;
    margin-block: 0;
  }

  .l-header__list > li {
    display: flex;
  }

  .l-header__link {
    /* ホバー背景はヘッダーの高さいっぱい。項目の間隔 40px は左右の余白 20px × 2 で作る */
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 14px;
    color: var(--color-text);
  }

  .l-header__cta {
    padding: 12px 23.65px 12px 24px;
    font-size: 0.875rem;
    line-height: 14px;
  }
}

/* ---------- footer ---------- */
.l-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 56px var(--gutter);
}

.l-footer__logo img {
  width: 176px;
  height: 32.35px;
}

.l-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.l-footer__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  font-size: 0.75rem;
  line-height: 12.11px;
  letter-spacing: 0.05em;
}

.l-footer__copy {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 97px;
  border-top: 0.83px solid var(--color-divider);
  text-align: center;
  /* Figma: Neue Haas Grotesk Display Pro（Web 配信なし）。Inter で代替 */
  font-size: 0.6875rem;
  line-height: 16.95px;
  letter-spacing: 0.2em;
}

@media (min-width: 768px) {
  .l-footer__logo img {
    height: 32px;
  }

  .l-footer__nav {
    gap: 16px;
  }

  .l-footer__list {
    flex-direction: row;
    gap: 40px;
    line-height: 12px;
  }

  .l-footer__copy {
    border-top-width: 1px;
    font-size: 0.75rem;
    line-height: 14px;
  }
}