@charset "UTF-8";
/* CSS Document */

/* ========================================
   FOOTER COMMON
======================================== */

footer {
  display: grid;
  font-size: 1rem;
  color: var(--color_white);
  background: url(../images/common/bg_footer.webp) no-repeat center bottom / cover;
}

@media (max-width: 750px) {
  footer {
    gap: calc(80 / var(--size_window) * 100vw);
    padding-block: calc(80 / var(--size_window) * 100vw);
    text-align: center;
  }
}

@media (min-width: 750px) {
  footer {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: min(80 / var(--size_window) * 100vw, 80px);
    padding:
      min(60 / var(--size_window) * 100vw, 60px)
      max(min(100 / var(--size_window) * 100vw, 100px), (100vw - 1500px) / 2);
    text-align: right;
  }
}

footer ul {
  display: grid;
  justify-content: center;
  align-items: center;
}

footer li {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 750px) {
  footer ul {
    grid-template-columns: repeat(3, calc(80 / var(--size_window) * 100vw));
    gap: calc(60 / var(--size_window) * 100vw);
  }
}

@media (min-width: 750px) {
  footer ul {
    grid-template-columns: repeat(3, min(60 / var(--size_window) * 100vw, 60px));
    gap: min(30 / var(--size_window) * 100vw, 30px);
  }
}

footer .copyright {
  display: grid;
}

footer .copyright a {
  color: #abcd03;
}

@media (max-width: 750px) {
  footer .copyright {
    gap: calc(48 / var(--size_window) * 100vw);
  }

  footer .copyright a {
    width: fit-content;
    margin-inline: auto;
  }
}

@media (min-width: 750px) {
  footer .copyright {
    gap: min(16 / var(--size_window) * 100vw, 16px);
  }
}

/* ========================================
   TOP ONLY
======================================== */

/* TOPだけ背景なし・横幅フル */
body#top footer {
  background: none;
  width: 100%;
  justify-self: stretch;
  max-width: none;
}

/* SPECIALは共通背景を明示 */
body#special footer {
  background: url(../images/common/bg_footer.webp) no-repeat center bottom / cover;
}