body {
  color: var(--colorBlack);
}
.pageContainer {
  margin-bottom: 0;
}

#pageCase__lead {
  position: relative;

  &::before {
    content: "";
    background: url(../../images/case/case02-reef-right.png) no-repeat center center / contain;
    width: 4.6rem;
    height: 2.7rem;
    position: absolute;
    top: 111.4rem;
    right: 6.1rem;
    z-index: -1;
    animation: fall-right 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  .pageCase__lead-text {
    text-align: center;
    line-height: 1.875;
    letter-spacing: 0.54px;
    margin-block: 6rem 1.7rem;
  }

  @media screen and (max-width: 1360px) {
    &::before {
      display: none;
    }
  }
}

.caseArticle {
  background-color: var(--colorWhite);
  padding: 3.6rem 3rem 4.8rem 3rem;
  border-radius: 20px;
  border: 1px solid var(--colorGreen);
  margin-top: 3.4rem;
}

.groupContent__lead {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid #aeb7c0;
  display: flex;
  align-items: center;
  gap: 2.9rem;

  h2 {
    font-size: 2.6rem;
    font-family: var(--familyZenMaruGothic);
    font-weight: 700;
    line-height: 1.34615;
    letter-spacing: 0.84px;
  }
}

.strengthTag {
  display: inline-block;
  border-radius: 17.087px 17.087px 0 17.087px;
  background-color: var(--colorGreen);
  color: var(--colorWhite);
  font-size: 2rem;
  font-family: var(--familyNunito);
  font-weight: 700;
  letter-spacing: 1.149px;
  line-height: 1;
  height: 5.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding-inline: 1.1rem;
}

.strengthTag .number {
  display: inline-block;
  font-family: var(--familyNunito);
  font-size: 3.4175rem;
  color: var(--colorYellow);
  font-style: italic;
  font-weight: 600;
  line-height: 1.5667;
  letter-spacing: 2.05px;
}

.caseArticle__contents {
  margin-top: 3.3rem;
  display: flex;
  gap: 3.6346%;
}

.caseArticle__img {
  border-radius: 30px 30px 0 30px;
  border-radius: 30px 30px 0 30px;
  overflow: hidden;
  flex: 0 1 42.39%;
  aspect-ratio: 440 / 268;
  height: fit-content;
}

.caseArticle__img img {
  object-fit: cover;
  width: 100%;
}

.caseArticle__details {
  flex: 1;
}

.caseArticle__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 2rem;
}
.caseArticle__tag {
  position: relative;
  border-radius: 5px;
  background-color: #ffeaf4;
  border: 1px solid #ffc5e1;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 0.5em 0.65625em;
}
.caseArticle__tag:not(:last-of-type)::before {
  content: "";
  display: inline-block;
  background: url(../../images/case/icon-tag-add.svg) no-repeat center center / contain;
  width: 1.1rem;
  height: 1.1rem;
  position: absolute;
  top: 50%;
  right: -1.6rem;
  transform: translateY(-50%);
}
/* タクソノミーのslug別に背景色をあてる */
/* 子育て支援事業 */
.caseArticle__tag--child-raising {
  background-color: #ffeaf4;
  border: 1px solid #ffc5e1;
}
/* 国際理解事業 */
.caseArticle__tag--international {
  background-color: #ffebc6;
  border: 1px solid #ffd280;
}
/* 学校・保育園給食事業 */
.caseArticle__tag--school-lunch {
  background-color: #dcf1cc;
  border: 1px solid #98d46a;
}
/* モビリティサービス事業 */
.caseArticle__tag--mobility {
  background-color: #ccecf4;
  border: 1px solid #b2d6df;
}
/* 障がい福祉事業 */
.caseArticle__tag--disability-welfare {
  background-color: #fee5d8;
  border: 1px solid #deb7a3;
}
/* 公共施設・指定管理、PFI事業 */
.caseArticle__tag--public-facilities {
  background-color: #e5deed;
  border: 1px solid #d5cddd;
}
/* BPOプラットフォーム事業 */
.caseArticle__tag--bpo {
  background-color: #b3e1b7;
  border: 1px solid #a6d4aa;
}

.caseArticle__textarea {
  margin-top: 2.7rem;
  padding-top: 1.9rem;
  border-top: 2px solid #aeb7c0;
  line-height: 1.625;
  letter-spacing: 0.54px;
}

.pageCase__button-wrapper {
  margin-top: 5.8rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .caseArticle {
    padding: 1.6rem 2rem 3.1rem;
  }

  .caseArticle__contents {
    flex-direction: column;
    gap: 2.3rem;
  }

  .groupContent__lead {
    align-items: baseline;
    padding-bottom: 1.3rem;
    gap: 1.3rem;
    position: relative;

    .strengthTag {
      font-size: 1.8rem;
      white-space: nowrap;
      height: 5.2rem;
      letter-spacing: 1px;
      position: absolute;
      left: -1rem;
      top: 0;
      padding-inline: 0.4rem;
    }

    .strengthTag .number {
      font-size: 2.4rem;
      letter-spacing: 0;
    }

    h2 {
      font-size: 2.2rem;
      line-height: 1.36;
      letter-spacing: 0;
      margin-left: 8.7rem;
      margin-top: 0;
    }
  }

  .caseArticle__tag {
    font-size: 1.05rem;
    padding: 0.5em 1em;
  }
}

.footer {
  .leaf-1 {
    width: 6.593rem;
    height: 8.986rem;
    background-image: url(../../images/group/img_bg_footer-leaf-1.webp);
    top: calc(-43.6rem - 8.986rem);
    animation: fall-left 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: 0.5s;
  }

  .leaf-2 {
    width: 8.444rem;
    height: 8.521rem;
    background-image: url(../../images/group/img_bg_footer-leaf-2.webp);
    top: calc(-30.8rem - 8.444rem);
    left: 3.5417%;
    animation: fall-right 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  @media screen and (max-width: 1360px) {
    .leaf-1,
    .leaf-2 {
      display: none;
    }
  }
}