@charset "utf-8";

.p-service {
  margin-top: -266px;
  padding: 365px 0 130px;
  background: #f4f4f4;

  @media (width < 768px) {
    margin-top: -138px;
    padding: 210px 0 60px;
  }

  .l-inner {
    max-width: 1216px;
  }
}

.p-service__text {
  margin-top: 32px;
}

.p-service__nav {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 38px;

  @media (width < 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
  }
}

.p-service-link {
  width: 100%;
  max-width: 367px;
  background: #fff;
  height: 68px;
  padding: 10px;

  @media (width < 768px) {
    height: 54px;
    padding: 6px;
    gap: 5px;
  }

  .c-link-btn__arrow {
    width: 50px;
    background: #292f33;

    @media (width < 768px) {
      width: 40px;
    }

    img {
      transform: rotate(90deg);
    }
  }
}

.p-service-link__logo {
  flex: 1 1 auto;

  img {
    height: 100%;
    object-fit: contain;
    margin: auto;
  }
}

.p-service-link__logo.is-white {
  height: 70%;
}

.p-service-link__logo.is-gray {
  height: 100%;
  img {
    background: hsla(0, 0%, 0%, 0.7);
    width: 160px;
    border-radius: 5px;
    padding: 4px 0;
  }
}

.p-service-link:hover {
  .c-link-btn__arrow {
    background: var(--color-red);
  }
}

.p-service-lists {
  padding: 99px 0 487px;

  @media (width < 768px) {
    padding: 60px 0 420px;
  }

  .l-inner {
    max-width: 1040px;
    display: flex;
    flex-direction: column;
    gap: 99px;
  }
}

.p-service-list {
  scroll-margin-top: 80px;

  @media (width < 768px) {
    scroll-margin-top: 60px;
  }
}

.p-service-list__flex {
  margin-top: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  @media (width < 768px) {
    margin-top: 40px;
    flex-direction: column;
  }
}

.p-service-list__logo {
  width: 44%;
  aspect-ratio: 44/38;
  background: #f4f4f4;
  border: 1px solid #bcbcbc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;

  @media (width < 768px) {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }

  img {
    width: auto;
    height: 48px;
    object-fit: contain;
  }
}

.p-service-list__logo.is-gray {
  background: #4d4d4d;

  img {
    height: 80px;
  }
}

.p-service-list__body {
  max-width: 480px;
  min-width: 135px;
  width: 54%;

  @media (width < 768px) {
    width: 100%;
    max-width: 100%;
  }
}

.p-service-list__text {
}

.p-service-list__text:not(:first-of-type) {
  margin-top: 25px;
}

.p-service-list__link {
  margin-top: 32px;
  max-width: 251px;
  background: #292f32;
  padding: 4px 4px 4px 17px;

  .c-link-btn__arrow {
    img {
      width: 12px;
    }
  }
}

.p-service-list__link:hover {
  background: #b30a14;
}