/* p-representativeMessage
---------------------------------------------------------------------------- */
.p-representativeMessage {
  padding-block: 8rem 10rem;
  color: #1A1A1A;
}

.p-representativeMessage-lead {
  display: grid;
  grid-template: ". . img" 6rem ". . img" 5.5rem "txt . img" auto ". . img" 1fr/1fr 10rem 38rem;
  padding-bottom: 6rem;
  position: relative;
}

.p-representativeMessage-lead::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -36rem;
  z-index: -1;
  width: 148rem;
  aspect-ratio: 1480/574;
  background-color: #F8F8F8;
}

.p-representativeMessage-lead-txt {
  grid-area: txt;
  font-size: 1.6rem;
  line-height: 1.8125;
  font-weight: 400;
  padding-left: 3rem;
  border-left: 0.2rem solid #073190;
}
.p-representativeMessage-lead-txt em {
  font-weight: 700;
  color: #073190;
}

.p-representativeMessage-lead-img-wrap {
  grid-area: img;
}

.p-representativeMessage-lead-img {
  width: 36rem;
  aspect-ratio: 360/416;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 2rem 2rem #C8E1F3;
}
.p-representativeMessage-lead-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.p-representativeMessage-lead-img-txt {
  font-size: 1.6rem;
  line-height: 1.8125;
  font-weight: 700;
  margin-block: 3.7rem 1.8rem;
}

.p-representativeMessage-lead-img-name {
  font-size: 4rem;
  line-height: 1;
  font-weight: 500;
  font-family: "Caveat";
}

.p-representativeMessage-body {
  padding-block: 10.5rem 10rem;
  margin-top: 7rem;
  position: relative;
}

.p-representativeMessage-body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: calc(50% + 72rem);
  height: 100%;
  background-color: #F8F8F8;
}

.p-representativeMessage-body-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0 5.9rem;
  margin-bottom: 4.7rem;
}

.p-representativeMessage-body-wrapper._reverse {
  flex-direction: row-reverse;
}

.p-representativeMessage-body-img {
  width: 34.7rem;
  aspect-ratio: 347/510;
}
.p-representativeMessage-body-img img {
  width: 32.7rem;
  height: 49rem;
  object-fit: cover;
  object-position: center;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 2rem 2rem #C8E1F3;
}

.p-representativeMessage-body-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4.7rem;
  padding-top: 0.5rem;
}

.p-representativeMessage-body-sec {
  margin-bottom: 4.7rem;
}

.p-representativeMessage-body-sec._large {
  margin-bottom: 6.7rem;
}

.p-representativeMessage-ttl {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #BEBEBE;
  margin-bottom: 2.8rem;
  position: relative;
}

.p-representativeMessage-ttl::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 10rem;
  height: 2px;
  background-color: #073190;
}

.p-representativeMessage-txt {
  font-size: 1.6rem;
  line-height: 1.8125;
  font-weight: 400;
}

.p-representativeMessage-career {
  width: 96rem;
  padding-block: 3.4rem;
  padding-inline: 4.8rem;
  background-color: #fff;
  border: 0.6rem solid rgba(7, 48, 144, 0.2);
  border-radius: 1.5rem;
  margin-inline: auto;
}

.p-representativeMessage-career-ttl {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
  column-gap: 1rem;
  font-size: 2rem;
  line-height: 1.45;
  font-weight: 700;
  color: #073190;
}

.p-representativeMessage-career-ttl::before {
  content: "";
  width: 0.8rem;
  aspect-ratio: 1;
  background-color: currentColor;
  border-radius: 50%;
}

.p-representativeMessage-career-txt {
  font-size: 1.6rem;
  line-height: 1.8125;
  font-weight: 400;
  margin-top: 1.2rem;
}

@media screen and (max-width: 767px) {
  .p-representativeMessage {
    padding-block: 13.3333333333vw;
  }
  .p-representativeMessage-lead {
    grid-template: "img" auto "." 11.2vw "txt" auto/1fr;
    padding-bottom: 10.6666666667vw;
  }
  .p-representativeMessage-lead::before {
    width: 100vw;
    aspect-ratio: 375/1278;
    left: -5.3333333333vw;
  }
  .p-representativeMessage-lead-txt {
    font-size: 4.2666666667vw;
    padding-left: initial;
    border-left: none;
    padding-right: 0;
  }
  .p-representativeMessage-lead-img-wrap {
    width: 73.0666666667vw;
    padding-left: 5.6vw;
  }
  .p-representativeMessage-lead-img {
    width: 69.3333333333vw;
    aspect-ratio: 260/300;
    border-radius: 4vw;
    overflow: hidden;
    box-shadow: 3.7333333333vw 3.7333333333vw #C8E1F3;
  }
  .p-representativeMessage-lead-img-txt {
    font-size: 3.7333333333vw;
    line-height: 1.8;
    margin-block: 8.5333333333vw 3.7333333333vw;
  }
  .p-representativeMessage-lead-img-name {
    font-size: 8vw;
  }
  .p-representativeMessage-body {
    padding-block: 13.3333333333vw;
    margin-top: 13.3333333333vw;
  }
  .p-representativeMessage-body::after {
    width: 100%;
  }
  .p-representativeMessage-body-wrapper,
  .p-representativeMessage-body-wrapper._reverse {
    flex-direction: column;
    gap: 7.2vw;
    margin-bottom: 7.2vw;
  }
  .p-representativeMessage-body-img {
    width: 100%;
    aspect-ratio: 335/228.65;
  }
  .p-representativeMessage-body-img img {
    width: 85.8293333333vw;
    height: 57.2746666667vw;
    border-radius: 4vw;
    overflow: hidden;
    box-shadow: 3.4666666667vw 3.4666666667vw #C8E1F3;
  }
  .p-representativeMessage-body-wrap {
    gap: 7.2vw;
    padding-top: 0;
  }
  .p-representativeMessage-body-sec,
  .p-representativeMessage-body-sec._large {
    margin-bottom: 7.2vw;
  }
  .p-representativeMessage-ttl {
    font-size: 5.3333333333vw;
    line-height: 1.5;
    padding-bottom: 4vw;
    margin-bottom: 4.8vw;
  }
  .p-representativeMessage-ttl::before {
    width: 21.3333333333vw;
  }
  .p-representativeMessage-txt {
    font-size: 4.2666666667vw;
  }
  .p-representativeMessage-career {
    width: 100%;
    padding-block: 3.7333333333vw;
    padding-inline: 3.7333333333vw;
    border: 1.6vw solid rgba(7, 48, 144, 0.2);
    border-radius: 4vw;
  }
  .p-representativeMessage-career-ttl {
    column-gap: 2.6666666667vw;
    font-size: 4.8vw;
  }
  .p-representativeMessage-career-ttl::before {
    width: 2.1333333333vw;
  }
  .p-representativeMessage-career-txt {
    font-size: 4.2666666667vw;
    margin-top: 4vw;
  }
}