.sec_seo_hero_ptn_1 {
  background: radial-gradient(ellipse at 0% 90%, var(--sage-pale) 0, transparent 22%), radial-gradient(ellipse at 100% 12%, var(--yellow) 0, transparent 24%), var(--white);

  > .wrap {
    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: 1000px) {
      gap: 20px;
    }

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

    @media (max-width: 600px) {
      padding-inline: 22px;
    }

    @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;

    a {
      padding: 8px 14px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--heading);
      background: var(--sage-pale);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.75em;
      border-radius: 24px;
      word-break: normal;
      transition: background-color 180ms ease;

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

    .arrow {
      width: 7px;
      height: 7px;
      flex-shrink: 0;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-2px) rotate(45deg);
    }
  }

  .note {
    margin-top: 16px;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.75em;
    text-wrap: pretty;
  }

  .image {
    min-width: 0;

    @media (max-width: 900px) {
      margin-inline: auto;
      width: 100%;
      max-width: 600px;
    }

    img {
      width: 100%;
      display: block;
    }
  }
}