@charset "utf-8";
.service {
  padding-top: clamp(2.5rem, 0.833rem + 3.47vw, 5rem);
  padding-bottom: clamp(7.5rem, 5.833rem + 3.47vw, 10rem);
}
.service__inner {
      padding-left: clamp(1.25rem, -5.917rem + 14.93vw, 12rem);
    padding-right: clamp(3.75rem, -1.75rem + 11.46vw, 12rem);
}
.service__container {
      display: flex;
    flex-direction: column;
    row-gap: 64px;
}
.service__content {
      background-image: url(https://fthoumonkango.co.jp/system_panel/uploads/images/pg-bg.png);
    background-size: 100%;
    padding: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem) clamp(1.125rem, -4.446rem + 8.71vw, 6rem)  clamp(2.5rem, 0.833rem + 3.47vw, 5rem);
}
.service-content__top {
      margin-top: clamp(1rem, 0.333rem + 1.39vw, 2rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(1.25rem, -2.821rem + 6.36vw, 4.813rem);
}
.service-content-top__left {
      display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(0.625rem, -2.089rem + 4.24vw, 3rem);
}
.service-content-top-left__item {
    padding: clamp(0.5rem, 0.143rem + 0.56vw, 0.813rem);
    border: 3px solid #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    max-width: 192px;
}
.service-content-top-left__text {
    font-size: clamp(0.75rem, 0.464rem + 0.45vw, 1rem);
    font-weight: 600;
    text-align: center;
}
.service-content-top-left__img {
      aspect-ratio: 1/1;
    max-width: 120px;
    object-fit: contain;
}
.service-content-top__title {
    font-size: clamp(1rem, 0.857rem + 0.22vw, 1.125rem);
    font-weight: 700;
}
.service-content-top__text {
      margin-top: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    font-weight: 400;
}

.service-content__bottom {
      margin-top: clamp(2rem, 1.429rem + 0.89vw, 2.5rem);
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}
.service-content-bottom__box {
      display: flex;
    column-gap: 20px;
}
.service-content-bottom__title {
      writing-mode: vertical-lr;
    height: fit-content;
    padding-top: 4px;
    border-top: 6px solid #000;
}
.service-content-bottom-titlr__text {
      font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2em;
}
.service-content-bottom__items {
      display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 20px;
}
.service-content-bottom__img {
      height: auto;
    aspect-ratio: 226/151;
    object-fit: cover;
}
.service-content-bottom__item {
  font-weight: 600;
}

@media (max-width: 1023px) {
  .service-content__top {
        grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
  }
  .service-content__bottom {
        display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .service-content-bottom__items {
        display: flex;
    flex-direction: column;
    width: 100%;
  }
  .service-content-bottom__img {
        max-width: 226px;
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .service__inner {
    padding: 0;
  }
  .service-content-top-left__item {
        padding: 2px;
    height: clamp(7rem, 5.836rem + 4.77vw, 8.125rem);
  }
  .service-content-top-left__img {
    width: clamp(3.75rem, 3.103rem + 2.65vw, 4.375rem);
  }
  .service-content__bottom {
    grid-template-columns: repeat(1, 1fr);
  }
  .service-content-bottom__img {
        max-width: 100%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 389px) {
  .service-content-top__left {
        grid-template-columns: repeat(1, 1fr);
    row-gap: 10px;
    align-items: center;
  }
}