.footer {
  background: #172223;
  color: #ffffff;
  .-inner {
    max-width: 1040px;
    margin-inline: auto;
    padding: 64px 20px;
    @media (max-width: 768px) {
      padding: 40px 20px;
    }
  }
  & img[src*='logo'] {
    width: 280px;
    @media (max-width: 768px) {
      width: 200px;
    }
  }
  & ul {
    font-size: 14px;
    gap: 24px;
    @media (min-width: 769px) {
      font-size: min(calc(100vw * (14 / 1024)), 14px);
      gap: min(calc(100vw * (24 / 1440)), 24px);
    }
  }
  .-link {
    display: grid;
    padding-top: 20px;
    margin-top: 40px;
    border-top: 1px solid #fff;
    @media (max-width: 768px) {
      display: block;
      border: 0;
      margin: 0;
      padding: 0;
    }
    & a {
      display: flex;
      gap: 5px;
      @media (max-width: 768px) {
        line-height: 1;
      }
      &::before {
        content: '';
        width: 4px;
        height: 8px;
        background-color: #8d8d8d;
        clip-path: polygon(0 0, 100% 50%, 0% 100%);
        transform: translateY(0.5em);
        @media (max-width: 768px) {
          transform: translateY(4px);
        }
      }
    }
    & p {
      font-weight: 700;
    }
  }
  .-top {
    grid-column: 1;
    @media (max-width: 768px) {
      padding-top: 20px;
      margin-top: 40px;
      border-top: 1px solid #fff;
    }
  }
  .-creative {
    grid-column: 2;
    @media (max-width: 768px) {
      padding-top: 20px;
      margin-top: 20px;
      border-top: 1px solid #fff;
    }
    @media (max-width: 768px) {
      ul {
        margin-top: 24px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-left: 14px;
      }
    }
  }
  .-application {
    grid-column: 2;
    @media (max-width: 768px) {
      margin-top: 24px;
      ul {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-left: 14px;
      }
    }
  }
  .-prompt {
    grid-column: 3;
    grid-row: 1;
    @media (max-width: 768px) {
      margin-top: 24px;
      ul {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-left: 14px;
      }
    }
  }
  .-another {
    grid-column: 4;
    grid-row: 1;
    @media (max-width: 768px) {
      margin-top: 10px;
    }
    & ul {
      @media (min-width: 769px) {
        display: flex;
        gap: min(calc(100vw * (24 / 1440)), 24px);
      }
      @media (max-width: 768px) {
        display: flex;
        flex-direction: column;
        gap: 10px;
        & a {
          border-top: 1px solid #fff;
          margin-top: 8px;
          padding-top: 15px;
        }
      }
    }
  }
  .-policy {
    padding-top: 20px;
    margin-top: 40px;
    border-top: 1px solid #fff;
    display: flex;
    gap: 16px;
    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
      gap: 5px;
      border: 0;
      margin-top: 40px;
      padding: 0;
    }
  }
  .-copyright {
    background-color: #000;
    padding: 20px;
    text-align: right;
    font-size: 14px;
    @media (max-width: 768px) {
      text-align: left;
      background-color: #172223;
      padding-block: 0 40px;
    }
  }
}