/* ===================== FOOTER ===================== */
/* フッター上の白帯（ヘッダーと同系統の光ライン） */
footer::before {
  background     : radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.65) 35%,
    rgba(255, 255, 255, 0.1) 80%,
    rgba(255, 255, 255, 0) 100%
  ),
  linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.15) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  content        : "";
  filter         : blur(12px);
  height         : 40px; /* 細く柔らかい帯 */
  left           : 0;
  opacity        : 0.8;
  pointer-events : none;
  position       : absolute;
  right          : 0;
  top            : -20px; /* フッター上部に配置 */
  z-index        : 1;
}

/* position基準を設定（必須） */
footer {
  background  : #111111;
  border-top  : 1px solid rgba(255, 255, 255, 0.08);
  color       : #CCCCCC;
  font-family : "Noto Sans JP", sans-serif;
  font-size   : 0.9rem;
  overflow    : visible; /* 擬似要素のはみ出しを許可 */
  padding     : 28px 0 16px;
  position    : relative;
}

/* 全体レイアウト：左右に分ける */
footer .footer-inner {
  align-items     : flex-start;
  display         : flex;
  flex-wrap       : wrap;
  justify-content : space-between;
  margin          : 0 auto;
  width           : min(1200px, 90%);
}

/* ===================== 左側：パンくず ===================== */
#breadcrumbs {
  align-items : center;
  color       : #AAAAAA;
  display     : flex;
  flex        : 1;
  flex-wrap   : wrap;
  gap         : 8px;
  line-height : 1.4;
  min-width   : 220px;
}

#breadcrumbs > div {
  align-items : center;
  display     : flex;
  gap         : 6px;
}

#breadcrumbs > div:not(:last-child)::after {
  color     : rgba(255, 255, 255, 0.3);
  content   : "›";
  font-size : 0.8rem;
}

#breadcrumbs a {
  color           : var(--color-accent);
  font-weight     : 600;
  text-decoration : none;
  transition      : color 0.2s ease;
}

#breadcrumbs a:hover {
  color : var(--color-accent-dark);
}

#breadcrumbs .current {
  color   : #CCCCCC;
  opacity : 0.9;
}

/* ===================== 右側：ナビ＋コピー ===================== */
.footer-right {
  align-items    : flex-end;
  display        : flex;
  flex-direction : column;
  flex-shrink    : 0;
  gap            : 8px;
  text-align     : right;
}

/* メニューを右上に */
.footerNavi {
  border-top  : none;
  order       : -1; /* 上に配置 */
  padding-top : 0;
}

.footerNavi ul {
  display         : flex;
  flex-wrap       : wrap;
  gap             : 18px;
  justify-content : flex-end;
  list-style      : none;
  margin          : 0;
  padding         : 0;
}

.footerNavi li a {
  color           : #BBBBBB;
  font-size       : 0.85rem;
  text-decoration : none;
  transition      : color 0.2s ease, opacity 0.2s ease;
}

.footerNavi li a:hover {
  color   : var(--color-accent);
  opacity : 1;
}

/* コピーライトを右下に */
.footer-right .copy {
  color       : #888888;
  font-size   : 0.8rem;
  margin-top  : 4px;
  white-space : nowrap;
}

/* ===================== レスポンシブ ===================== */
@media (max-width : 768px) {
  footer .footer-inner {
    align-items    : flex-start;
    flex-direction : column;
    gap            : 10px;
  }

  .footer-right {
    align-items : flex-start;
    text-align  : left;
  }

  .footerNavi ul {
    gap             : 12px;
    justify-content : flex-start;
  }

  .footer-right .copy {
    font-size  : 0.75rem;
    margin-top : 6px;
  }
}

@media (max-width : 480px) {
  /* ===================== FOOTER ===================== */
  footer {
    padding    : 24px 16px;
    text-align : center;
  }

  .footer-inner {
    display : block;
  }

  .footerNavi ul {
    display        : flex;
    flex-direction : column;
    gap            : 8px;
    margin         : 20px 0;
    padding        : 0;
  }

  .footerNavi a {
    color           : var(--color-muted);
    text-decoration : none;
  }

  #breadcrumbs {
    display : none;
  }

  .copy {
    color     : #AAAAAA;
    font-size : 0.75rem;
  }
}