.sec_works_hero {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #dce9f8;
  background: linear-gradient(110deg, #f8fbff 0%, #eaf5ff 100%);

  &::after {
    position: absolute;
    top: 45px;
    right: -15px;
    width: 260px;
    height: 195px;
    border: 1px solid #93c5ff;
    border-top: 0;
    content: "";
    opacity: .65;
    transform: skewX(-43deg);
    pointer-events: none;
    @media (max-width: 600px) { display: none; }
  }

  .wrap {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: 26px 40px 70px;
    max-width: 1360px;
    @media (max-width: 800px) { padding: 24px 28px 60px; }
    @media (max-width: 600px) { padding: 23px 18px 48px; }
  }

  .breadcrumb {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    color: #607994;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4em;

    a:hover, a:focus-visible { color: var(--works-blue); text-decoration: underline; }
    @media (max-width: 800px) { margin-bottom: 42px; }
    @media (max-width: 600px) { margin-bottom: 35px; }
  }

  .main {
    max-width: 900px;
    .kicker { margin-bottom: 16px; }
    h1 {
      color: #0b2447;
      font-size: 46px;
      font-weight: 800;
      line-height: 1.35em;
      letter-spacing: -.04em;
      @media (max-width: 1200px) { font-size: 42px; }
      @media (max-width: 1000px) { font-size: 38px; }
      @media (max-width: 600px) { font-size: 34px; }
      @media (max-width: 400px) { font-size: 30px; }
    }
    p:last-child {
      margin-top: 20px;
      color: #415f80;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.8em;
      @media (max-width: 600px) { margin-top: 16px; font-size: 14px; }
    }
  }
}