@charset "UTF-8";

/* index
--------------------------------------------------*/

/* hero
--------------------------------------------------*/

.p-hero__swiper {
  width: 100%;
}

.p-hero__swiper .swiper-slide {
  aspect-ratio: 4/3;
}

.p-hero__swiper .c-picture {
  display: block;
  height: 100%;
  width: 100%;
}

.p-hero__swiper .c-picture img {
  -o-object-fit: cover;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.p-hero__pagination {
  align-items: center;
  display: flex;
  gap: clamp(0.75rem, calc(0.75rem + (1.125rem - 0.75rem) * (100vw - 375px) / (1801px - 375px)), 1.125rem);
  justify-content: center;
  padding: 1.5rem 0;
}

.p-hero__pagination .swiper-pagination-bullet {
  background-color: var(--custom-color-1);
  border-radius: 50%;
  cursor: pointer;
  height: clamp(0.75rem, calc(0.75rem + (1.125rem - 0.75rem) * (100vw - 375px) / (1801px - 375px)), 1.125rem);
  margin: 0 !important;
  opacity: 0.35;
  transition: opacity var(--custom-transition-duration) var(--custom-transition-timing-function);
  width: clamp(0.75rem, calc(0.75rem + (1.125rem - 0.75rem) * (100vw - 375px) / (1801px - 375px)), 1.125rem);
}

.p-hero__pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/* about
--------------------------------------------------*/

.p-about {
  padding-bottom: 0;
  padding-top: 3.75rem;
}

.p-about__title {
  color: var(--custom-color-1);
  font-size: clamp(2rem, calc(2rem + (4rem - 2rem) * (100vw - 375px) / (1801px - 375px)), 4rem);
  font-weight: bold;
  margin-bottom: 2rem;
  text-align: center;
}

/* サービスカード
--------------------------------------------------*/

.p-about__services {
  background: linear-gradient(to right, #cce0f4 0%, #1e9cd7 56%, #0075be 86%, #005B97 100%);
  display: flex;
  flex-direction: column;
  padding-top: 4.75rem;
}

.p-about__description {
  margin-left: auto;
  margin-right: auto;
  max-width: 53.125rem;
  padding-bottom: 3.75rem;
}

.p-about__service {
  display: flex;
  flex-direction: column;
}

.p-about__service + .p-about__service {
  margin-top: 7.75rem;
}

.p-about__service--img-right .p-about__service-more {
  text-align: left;
}

.p-about__service--img-left .p-about__service-more {
  text-align: right;
}

.p-about__service-img {
  aspect-ratio: 3/2;
  width: 100%;
}

.p-about__service-img .c-picture {
  display: block;
  height: 100%;
  width: 100%;
}

.p-about__service-img .c-picture img {
  -o-object-fit: cover;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.p-about__service-body-inner {
  background-color: white;
  height: 100%;
  padding: clamp(1.875rem, calc(1.875rem + (3.125rem - 1.875rem) * (100vw - 375px) / (1801px - 375px)), 3.125rem) clamp(1rem, calc(1rem + (5.625rem - 1rem) * (100vw - 375px) / (1801px - 375px)), 5.625rem);
}

.p-about__service-heading {
  color: var(--custom-color-1);
  font-size: clamp(1.125rem, calc(1.125rem + (2.625rem - 1.125rem) * (100vw - 375px) / (1801px - 375px)), 2.625rem);
  font-weight: bold;
  margin-bottom: clamp(1.5rem, calc(1.5rem + (3.5rem - 1.5rem) * (100vw - 375px) / (1801px - 375px)), 3.5rem);
  text-align: center;
}

.p-about__service-text {
  line-height: var(--custom-line-height-base);
  margin-bottom: 4rem;
}

/* images
--------------------------------------------------*/

.p-about__images {
  display: flex;
  flex-wrap: wrap;
  padding-top: 3rem;
}

.p-about__image {
  flex: 1;
}

.l-footer {
  margin-top: 0;
}

@media only screen and (min-width: 768px) {
  .p-hero__swiper .swiper-slide {
    aspect-ratio: 1920/724;
  }

  .p-about__title {
    margin-bottom: 2.5rem;
  }

  .p-about__service {
    flex-direction: row;
    min-height: 26.25rem;
  }

  .p-about__service--img-right {
    flex-direction: row-reverse;
  }

  .p-about__service-img {
    aspect-ratio: auto;
    flex: 0 0 46.875vw;
  }

  .p-about__service-body {
    display: flex;
    flex: 0 0 53.125vw;
    flex-direction: column;
    justify-content: center;
    padding-top: 2.625rem;
  }
}

@media only screen and (max-width: 767px) {
  .p-about__service--img-right .p-about__service-more {
    text-align: right;
  }

  .p-about__image {
    flex: 50%;
  }
}
/* ============================================================
 * max-width: 550px 以下の端末向け clamp() フォールバック
 * （iPhone 12 Mini など clamp() の calc() が正常動作しない場合）
 * clamp(MIN, ...) の MIN を直接指定して上書き
 * ============================================================ */
@media screen and (max-width: 550px) {
  .p-hero__pagination {
    gap: 0.75rem;
  }

  .p-hero__pagination .swiper-pagination-bullet {
    height: 0.75rem;
    width: 0.75rem;
  }

  .p-about__title {
    font-size: 2rem;
  }

  .p-about__service-body-inner {
    padding: 1.875rem 1rem;
  }

  .p-about__service-heading {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
  }
}