/* ==========================================================================
   footer.css — サイトフッター（Figma: Footer 1440×316）
   --------------------------------------------------------------------------
   背景：縦グラデ #469bf6 → 70% / 上下padding40 / 中央揃え gap32
   ロゴ 32px Bold / ナビ 18.286px Bold（| 区切り gap16・項目間 gap32）
   SNS 48px×2（gap8）/ コピーライト 16px Bold
   ========================================================================== */
.ic-footer {
  padding-block: var(--space-40);
  background: var(--gradient-footer);
  color: var(--color-white);
}
.ic-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-24);
}
.ic-footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
}
.ic-footer__logo {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading); /* 48px */
  color: var(--color-white);
  white-space: nowrap;
}
.ic-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-32);
}
.ic-footer__nav li {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading); /* 27.435px */
  white-space: nowrap;
}
.ic-footer__nav li:not(:last-child)::after { content: "|"; }
.ic-footer__nav a { color: var(--color-white); }

.ic-footer__sns { display: flex; align-items: center; gap: var(--space-8); }
.ic-footer__sns a,
.ic-footer__sns span { display: block; width: 3rem; height: 3rem; }
.ic-footer__sns img { width: 100%; height: 100%; }

.ic-footer__copy {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  line-height: var(--line-height-heading); /* 24px */
  text-align: center;
}

/* --- SP（767px以下・Figma未定義）------------------------------------------- */
/* 区切りの「|」は li の ::after なので、ナビが折り返すと行末に取り残される。
   SP は改行前提のため区切りを消し、gap だけで項目を分ける。 */
@media (max-width: 767px) {
  .ic-footer__nav ul { gap: var(--space-16) var(--space-24); }
  .ic-footer__nav li:not(:last-child)::after { content: none; }
}