/* ===============================================
# service.css
=============================================== */

/* ===============================================
# page mv
=============================================== */
.c-page-mv--service {
  background-image: url(../images/service/mv.jpg);
}

/* ===============================================
# service intro
=============================================== */

.p-service-intro__text {
  max-width: 64rem;
}

@media screen and (min-width: 768px) {
  .p-service-intro__text {
    max-width: rem;
  }
}

.p-service-intro__text p {
  line-height: 1.8;
}

.p-service-intro__text p + p {
  margin-top: 1.2rem;
}

/* イラスト */
.c-intro__title-image {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
  opacity: 0.8;
}

@media screen and (min-width: 768px) {
  .c-intro__title-image {
    opacity: 0.3;
  }
}

/* ===============================================
# service block common
=============================================== */
.p-service-block {
  position: relative;
  background: var(--t-blue);
  color: var(--white);
  overflow: hidden;
  letter-spacing: 0.05rem;
}

.p-service-block__head {
  position: relative;
}

.p-service-block .c-section-head {
  margin-bottom: 4rem;
}

.p-service-block__lead-group {
  display: grid;
  gap: 2.4rem;
}

/* 事業紹介title */
.p-service-block__lead {
  font-size: clamp(3.6rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  font-family: serif;
}

.p-service-block__description {
  margin-top: 0;
  font-size: clamp(1.4rem, 2.5vw, 1.6rem);
}

.p-service-block__description p {
  line-height: 1.8;
}

.p-service-block__description p + p {
  margin-top: 1.2rem;
}

@media screen and (min-width: 768px) {
  .p-service-block .c-section-head {
    margin-bottom: 6rem;
  }

  .p-service-block__lead-group {
    gap: 4rem;
  }
}

/* 写真1だけトリミング */
.p-service-block__image--main img {
  object-position: left center;
}

/* ===============================================
# reverse section head
=============================================== */
.c-section-head--reverse {
  text-align: right;
}

.c-section-head--reverse .c-section-head__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

.c-section-head--reverse .c-section-head__title-en {
  text-align: right;
}

/* ===============================================
# civil block
=============================================== */
.p-service-block--civil .p-service-block__lead-group {
  max-width: 100rem;
}

/* ===============================================
# port block
=============================================== */
@media screen and (min-width: 768px) {
  .p-service-block--port .c-section-head {
    width: min(100%, 78rem);
    margin-left: auto;
  }

  .p-service-block--port .p-service-block__lead-group {
    width: min(100%, 100rem);
    margin-left: auto;
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .p-service-block--port .p-service-block__lead {
    width: min(100%, 62rem);
    margin-left: auto;
  }

  .p-service-block--port .p-service-block__description {
    width: min(100%, 73rem);
    margin-left: auto;
  }
}

/* ===============================================
# service visual
=============================================== */
.p-service-block__visual {
  position: relative;
  margin-top: 2rem;
  background: linear-gradient(135deg, #f2f2f2 0%, #7fb2ff 100%);
  clip-path: polygon(0 22%, 100% 0, 100% 78%, 0 100%);
  overflow: hidden;
}

.p-service-block__image--single img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .p-service-block__visual {
    margin-top: 4rem;
    clip-path: polygon(0 28%, 100% 0, 100% 72%, 0 100%);
  }
}

/* スペース調整 */

.p-service-block.p-service-block--civil.l-section-space {
  padding-bottom: 0;
}

.p-service-block.p-service-block--port.l-section-space {
  padding-top: 0;
}

/* ===============================================
# port block spacing
=============================================== */
.p-service-block--port {
  padding-bottom: 8rem;
}

@media screen and (min-width: 768px) {
  .p-service-block--port {
    padding-bottom: 12rem;
  }
  .p-service-block--port .p-service-block__lead {
    width: min(100%, 75rem);
    margin-left: auto;
  }
}