@layer components {
  .operation-flow {
    position: relative;
    isolation: isolate;
    block-size: 170cqi;
    margin-block-start: -6.5cqi;
    overflow: hidden;
    background-image: linear-gradient(180deg, oklch(97.015% 0 0), oklch(100% 0 0));
    color: oklch(31.714% 0 0);
    font-family: var(--font-hero);
  }

  .operation-flow__texture {
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline-start: -13.75cqi;
    inline-size: 127.5cqi;
    block-size: 170cqi;
    max-inline-size: none;
    object-fit: cover;
    opacity: 0.2;
    mix-blend-mode: multiply;
  }

  .operation-flow__syatyo {
    position: absolute;
    z-index: 1;
    inset-block-start: 3.95cqi;
    inset-inline-start: -3.75cqi;
    inline-size: 40.5cqi;
    block-size: 53.2cqi;
    max-inline-size: none;
  }

  .operation-flow__creative {
    position: absolute;
    z-index: 3;
    inset-block-start: 130cqi;
    inset-inline-start: 68.25cqi;
    inline-size: 31.75cqi;
    block-size: 40cqi;
    max-inline-size: none;
    pointer-events: none;
  }

  .operation-flow__title {
    position: absolute;
    z-index: 2;
    inset-block-start: 12cqi;
    inset-inline-start: 25.25cqi;
    inline-size: 49.25cqi;
    color: oklch(31.714% 0 0);
    font-size: 8cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.4cqi;
    text-align: center;
    white-space: nowrap;
    text-shadow:
      0.45cqi 0 0 oklch(100% 0 0),
      -0.45cqi 0 0 oklch(100% 0 0),
      0 0.45cqi 0 oklch(100% 0 0),
      0 -0.45cqi 0 oklch(100% 0 0),
      0.45cqi 0.45cqi 0 oklch(100% 0 0),
      -0.45cqi 0.45cqi 0 oklch(100% 0 0),
      0.45cqi -0.45cqi 0 oklch(100% 0 0),
      -0.45cqi -0.45cqi 0 oklch(100% 0 0);
  }

  .operation-flow__line {
    position: absolute;
    z-index: 1;
    inset-block-start: 32cqi;
    inset-inline-start: 47.5cqi;
    inline-size: 4.75cqi;
    block-size: 111.25cqi;
    background-color: oklch(66.503% 0.1804 8.68);
  }

  .operation-flow__list {
    position: absolute;
    z-index: 2;
    inset-block-start: 29.5cqi;
    inset-inline-start: 7.5cqi;
    display: flex;
    flex-direction: column;
    gap: 2cqi;
    inline-size: 85cqi;
    block-size: 128.5cqi;
    list-style: none;
  }

  .operation-flow-step {
    position: relative;
    flex: 0 0 19.75cqi;
    inline-size: 85cqi;
    block-size: 19.75cqi;
    border: 3px solid oklch(66.503% 0.1804 8.68);
    border-radius: 11.25cqi;
    background-color: oklch(100% 0 0);
  }

  .operation-flow-step:nth-child(2),
  .operation-flow-step:nth-child(4),
  .operation-flow-step:nth-child(6) {
    background-color: oklch(93.371% 0.031 0.19);
  }

  .operation-flow-step__num {
    position: absolute;
    inset-block-start: 4.25cqi;
    inset-inline-start: 4.25cqi;
    display: grid;
    place-items: center;
    inline-size: 10cqi;
    block-size: 10cqi;
    border-radius: 50%;
    background-color: oklch(66.503% 0.1804 8.68);
    color: oklch(95.066% 0.1212 101.83);
    font-size: 5cqi;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -0.15cqi;
    white-space: nowrap;
  }

  .operation-flow-step:first-child .operation-flow-step__num {
    letter-spacing: 0;
  }

  .operation-flow-step__body {
    position: absolute;
    inset-block-start: 3.25cqi;
    inset-inline-start: 17.5cqi;
    inline-size: 60cqi;
  }

  .operation-flow-step__body--single {
    inset-block-start: 6cqi;
  }

  .operation-flow-step__title {
    color: oklch(31.714% 0 0);
    font-size: 5cqi;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .operation-flow-step__text {
    color: oklch(31.714% 0 0);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2cqi;
    white-space: nowrap;
  }
}