.section-about {
  .about-concept {
    h2 {
      font-size: 44px;
      @media screen and (max-width: 768px) {
        font-size: 32px;
      }
    }
    .about-text {
      text-align: center;
      position: relative;
      &.mt48 {
        @media screen and (max-width: 768px) {
          margin-top: 24px;
        }
      }
      &::before, &::after {
        content: "";
        position: absolute;
        z-index: -1;
      }
      &::before {
        top: -120px;
        left: -280px;
        display: block;
        width: clamp(300px, 39vw, 442px);
        height: clamp(252px, 32vw, 374px);
        background: url(/facetofes/2026/img/illust/illust03.png) no-repeat center center / contain;
        @media screen and (max-width: 1000px) {
          left: -195px;
          bottom: -130px;
          top: auto;
        }
        @media screen and (max-width: 768px) {
          content: none;
        }
      }
      &::after {
        bottom: -200px;
        right: -280px;
        display: block;
        width: clamp(300px, 39vw, 400px);
        height: clamp(252px, 41vw, 423px);
        background: url(/facetofes/2026/img/illust/illust01.png) no-repeat center center / contain;
        transform: scale(-1, 1) rotate(-2deg);
        @media screen and (max-width: 1000px) {
          right: -195px;
        }
        @media screen and (max-width: 768px) {
          bottom: -228px;
          right: -154px;
        }
      }
      p {
        font-size: 20px;
        line-height: 1.8;
        @media screen and (max-width: 768px) {
          font-size: 16px;
        }
        &:not(:first-child) {
          margin-top: 30px;
          @media screen and (max-width: 768px) {
            margin-top: 16px;
          }
        }
      }
    }
    .about-concept-text {
      position: relative;
      &::before, &::after {
        content: "";
        position: absolute;
        z-index: -3;
      }
      &::before {
        top: 0;
        right: 0;
        width: 40px;
        height: 42px;
        background: url("/facetofes/2026/img/icon/icon-sankaku.svg") no-repeat center / contain;
        @media screen and (max-width: 768px) {
          width: 34px;
          top: -70px;
          right: 0;
        }
      }
      &::after {
        bottom: -20px;
        left: 0;
        width: 27px;
        height: 27px;
        background: url("/facetofes/2026/img/icon/icon-round.svg") no-repeat center / contain;
        @media screen and (max-width: 768px) {
          width: 20px;
          bottom: -60px;
          left: 0;
        }
      }
    }
    .about-concept-stage {
      margin-top: 146px;
      position: relative;
      background-color: var(--white);
      box-shadow: var(--ftf-shadow);
      padding: 83px 80px 36px;
      border-radius: 20px;
      @media screen and (max-width: 768px) {
        padding: 60px 20px 24px;
        margin: 100px auto 0;
        max-width: 500px;
        width: 100%;
      }
      h3 {
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 488px;
        width: 100%;
        @media screen and (max-width: 768px) {
          top: -30px;
        }
      }
      .about-stage-list {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 48px;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          align-items: center;
          gap: 24px;
        }
        .about-stage-list__item {
          max-width: 400px;
          width: 100%;
          p {
            margin-top: 10px;
            text-align: left;
          }
        }
      }
      .mentaro-loop {
        position: absolute;
        left: 0;
        width: 100%;
        height: auto;
        z-index: -5;
        @media screen and (min-width: 768px) {
          top: 50%;
          transform: translateY(-50%);
        }
        @media screen and (max-width: 768px) {
          bottom: -260px;
        }
        .swiper-wrapper {
          transition-timing-function: linear;
          .swiper-slide {
            margin-right: 140px;
            width: 922px;
            @media screen and (max-width: 768px) {
              width: 500px;
              margin-right: 60px;
            }
            img {
              display: block;
              width: 922px;
              height: auto;
              @media screen and (max-width: 768px) {
                width: 500px;
              }
            }
          }
        }
      }
    }
    .about-cta {
      gap: 40px;
      align-items: center;
      margin-top: 36px;
      @media screen and (max-width: 768px) {
        gap: 24px;
      }
    }
  }
  .section-report {
    position: relative;
    padding-bottom: 100px;
    @media screen and (max-width: 768px) {
      margin-top: 160px;
      padding-bottom: 20vw;
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 100vw;
      height: 100%;
      z-index: -5;
      background: url(/facetofes/2026/img/bg/bg03.png) no-repeat top center / cover;
      transform: translateX(-50%);
      @media screen and (max-width: 768px) {
        background: url(/facetofes/2026/img/bg/bg03_sp.png) no-repeat center top / cover;
      }
    }
    .illust-box {
      &::before, &::after {
        content: "";
        position: absolute;
      }
      &::before {
        top: 0;
        right: -4vw;
        width: 164px;
        height: 120px;
        z-index: -5;
        background: url(/facetofes/2026/img/illust/mentaro.png) no-repeat center center / contain;
        @media screen and (max-width: 768px) {
          top: -12vw;
          right: -54px;
          width: 130px;
        }
      }
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: -4vw;
        width: 124px;
        height: 178px;
        z-index: -2;
        background: url(/facetofes/2026/img/illust/chiemaru01.png) no-repeat center center / contain;
        transform: scale(-1, 1);
        @media screen and (max-width: 1000px) {
          left: 0;
          bottom: -67px;
        }
        @media screen and (max-width: 768px) {
          width: 92px;
          bottom: -80px;
          left: 0;
        }
      }
      .report-list {
        position: relative;
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
        @media screen and (max-width: 768px) {
          max-width: 500px;
        }
        .report-list-item {
          .report-list-item__image {
            border-radius: 10px;
            box-shadow: var(--ftf-shadow);
            overflow: hidden;
          }
          .report-list-item__text {
            display: flex;
            align-items: center;
            justify-content: space-between;
            p {
              font-family: var(--sansation);
              font-size: clamp(36px, 4vw, 54px);
              @media screen and (max-width: 768px) {
                font-size: 40px;
                line-height: 1;
              }
            }
          }
        }
      }
    }
  }
}