.sec_flow_hero_ptn_1 {
  position: relative;
  background: radial-gradient(ellipse at 0% 90%, var(--sage-pale) 0, transparent 18%), radial-gradient(ellipse at 100% 8%, var(--sage-pale) 0, transparent 20%), var(--white);

  &::before {
    position: absolute;
    left: -24px;
    bottom: 35px;
    width: 64px;
    height: 140px;
    background: url("../images/service-scope-leaves.png") center / contain no-repeat;
    content: "";
    pointer-events: none;

    @media (max-width: 900px) {
      left: -28px;
      width: 52px;
    }
  }

  > .wrap {
    position: relative;
    padding-block: 45px 64px;
    padding-inline: 60px 20px;
    max-width: 1320px;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 32px;

    @media (max-width: 1200px) {
      gap: 24px;
    }

    @media (max-width: 900px) {
      padding-block: 40px 52px;
      padding-inline: 28px;
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
    }

    @media (max-width: 520px) {
      padding-top: 37px;
    }
  }

  .main {
    min-width: 0;
  }

  .breadcrumb {
    margin-bottom: 28px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.75em;

    ol {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 12px;
      list-style: none;
    }

    li {
      display: flex;
      align-items: center;
      gap: 12px;

      & + li::before {
        color: var(--sage);
        content: "/";
      }
    }

    a {
      text-underline-offset: 0.2em;

      @media (hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .ttl {
    color: var(--heading);
    font-family: var(--font-jp);
    font-size: 48px;
    font-weight: 900;
    line-height: 1.4em;
    letter-spacing: -0.045em;

    @media (max-width: 1200px) {
      font-size: 44px;
    }

    @media (max-width: 1000px) {
      font-size: 40px;
    }

    @media (max-width: 700px) {
      font-size: 36px;
    }

    @media (max-width: 500px) {
      font-size: 32px;
    }

    @media (max-width: 370px) {
      font-size: 28px;
    }
  }

  .lead {
    margin-top: 20px;
    color: var(--ink);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.7em;
    text-wrap: balance;

    @media (max-width: 1000px) {
      font-size: 20px;
    }

    @media (max-width: 400px) {
      font-size: 18px;
    }
  }

  .word {
    display: inline-block;
  }

  .txt {
    margin-top: 20px;
    max-width: 560px;
    color: var(--ink-soft);
    font-size: var(--copy-size);
    line-height: 1.75em;
    text-wrap: pretty;
  }

  .list {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    li {
      color: var(--heading);
      background: var(--sage-pale);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.75em;
      border-radius: 24px;

      a {
        padding: 5px 12px;
        display: block;
        line-height: 1.75em;
        transition: background-color 180ms ease;
        border-radius: inherit;

        @media (hover: hover) {
          &:hover { background: #dbe8d9; }
        }
      }
    }
  }
}