@charset "UTF-8";
/* トップ／法務AXとはで共有する比較図解。色・サイズは既存トークンを使用。 */
.lab-ax-diagram {
  color: var(--lab-navy);

  & .lab-ax-diagram__comparison {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lab-space-32);
    align-items: stretch;

    @media (max-width: 1023px) {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--lab-space-48);
    }
  }

  & .lab-ax-diagram__card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: var(--lab-space-32);
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);

    @media (max-width: 767px) { padding: var(--lab-space-24) var(--lab-space-16); }

    &.lab-ax-diagram__card--after { background: var(--lab-bg-2); }
  }

  & .lab-ax-diagram__head {
    min-height: var(--lab-space-96);

    @media (max-width: 767px) { min-height: 0; }
  }

  & .lab-ax-diagram__title {
    font-size: var(--lab-fs-heading-l);
    line-height: 1.45;
    letter-spacing: .02em;
    font-feature-settings: 'palt';

    @media (max-width: 767px) { font-size: var(--lab-fs-h4); }
  }

  & .lab-ax-diagram__subtitle {
    margin-top: var(--lab-space-8);
    font-size: var(--lab-fs-body);
    line-height: 1.8;
    letter-spacing: .025em;
  }

  & .lab-ax-diagram__stage {
    height: calc(var(--lab-space-128) * 2 + var(--lab-space-32));
    margin-top: var(--lab-space-16);
    min-width: 0;

    @media (max-width: 767px) { height: auto; }
  }

  & .lab-ax-diagram__stage--before {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--lab-space-32);

    @media (max-width: 767px) { gap: var(--lab-space-16); }
  }

  & .lab-ax-diagram__reviewer {
    width: 60%;
    max-width: calc(var(--lab-space-128) * 2);
    height: 100%;
    object-fit: cover;
    object-position: center 35%;

    @media (max-width: 767px) {
      height: calc(var(--lab-space-96) * 2);
      object-fit: contain;
      object-position: bottom;
    }
  }

  & .lab-ax-diagram__assistant {
    position: relative;
    width: 28%;
    max-width: var(--lab-space-128);

    & > svg { width: 100%; }
    & > span {
      position: absolute;
      left: 50%;
      bottom: 3%;
      transform: translateX(-50%);
      font-size: var(--lab-fs-title);
      font-weight: 700;
    }
  }

  & .lab-ax-diagram__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lab-space-16);
    margin-top: var(--lab-space-8);
    margin-bottom: var(--lab-space-24);
    min-height: calc(var(--lab-space-64) + var(--lab-space-48));

    @media (max-width: 767px) { gap: var(--lab-space-8); }
  }

  & .lab-ax-diagram__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lab-space-8);
    font-size: var(--lab-fs-small);
    line-height: 1.55;
    letter-spacing: 0;
    text-align: center;

    @media (max-width: 767px) { font-size: var(--lab-fs-label); }

    &:not(:last-child)::after {
      content: '→';
      position: absolute;
      top: var(--lab-space-16);
      right: calc(var(--lab-space-16) * -1);
      color: var(--lab-primary);
      font-size: var(--lab-fs-h4);

      @media (max-width: 767px) {
        top: var(--lab-space-8);
        right: calc(var(--lab-space-8) * -1);
        font-size: var(--lab-fs-lead);
      }
    }
  }

  & .lab-ax-diagram__step-icon {
    display: grid;
    place-items: center;
    width: var(--lab-space-64);
    height: var(--lab-space-64);
    border-radius: 50%;
    background: var(--lab-white);

    @media (max-width: 767px) { width: var(--lab-space-48); height: var(--lab-space-48); }
    & > svg { width: var(--lab-space-32); height: var(--lab-space-32); }
  }

  & .lab-ax-diagram__stage--after {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--lab-space-12);
    margin-bottom: var(--lab-space-24);
    height: auto;
    min-height: calc(var(--lab-space-128) * 3 + var(--lab-space-24));

    @container (max-width: 480px) {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--lab-space-16);
    }

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: var(--lab-space-16);
      margin-bottom: var(--lab-space-16);
      min-height: 0;
    }
  }

  & .lab-ax-diagram__pipeline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr);
    gap: var(--lab-space-12);
    align-items: center;
    min-width: 0;

    @media (max-width: 767px) { gap: var(--lab-space-8); }
  }

  & .lab-ax-diagram__documents {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-self: stretch;
    padding: var(--lab-space-8);
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: 0;

    @media (max-width: 767px) {
      padding: var(--lab-space-8) var(--lab-space-4);
      font-size: var(--lab-fs-label);
    }

    & > li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--lab-space-8);
      min-height: var(--lab-space-96);
      padding-block: var(--lab-space-12);
      text-align: center;

      @media (max-width: 767px) { padding-block: var(--lab-space-8); }

      & + li { border-top: 1px solid var(--lab-line-soft); }
      & > svg {
        flex: none;
        width: calc(var(--lab-space-32) + var(--lab-space-8));
        height: calc(var(--lab-space-32) + var(--lab-space-8));

        @media (max-width: 767px) { width: var(--lab-space-32); height: var(--lab-space-32); }
      }
      & > span { min-width: 0; max-width: 100%; text-wrap: balance; }
    }

    &::after {
      content: '→';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: var(--lab-fs-title);
      color: var(--lab-primary);
    }

    &.lab-ax-diagram__documents--input::after { right: calc(var(--lab-space-12) * -1); }
    &.lab-ax-diagram__documents--output::after { left: calc(var(--lab-space-12) * -1); }
  }

  & .lab-ax-diagram__ai {
    min-width: 0;
    text-align: center;
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0;

    & > p {
      padding: var(--lab-space-8) var(--lab-space-4);
      border-radius: var(--lab-radius-md);
      background: var(--lab-white);
    }
  }

  & .lab-ax-diagram__ai-image {
    position: relative;
    width: 100%;
    max-width: calc(var(--lab-space-128) + var(--lab-space-32));
    margin-inline: auto;

    & > img { width: 100%; }
    & > span {
      position: absolute;
      left: 50%;
      bottom: 13%;
      transform: translateX(-50%);
      font-size: var(--lab-fs-title);
      color: var(--lab-primary);
    }
  }

  & .lab-ax-diagram__owner {
    min-width: 0;
    text-align: center;

    @container (max-width: 480px) {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--lab-space-16);
      text-align: left;
    }

    & > img {
      width: 100%;
      max-width: calc(var(--lab-space-128) + var(--lab-space-32));
      margin-inline: auto;

      @container (max-width: 480px) { width: var(--lab-space-96); margin-inline: 0; }
    }

    & > p {
      margin-top: var(--lab-space-8);
      font-size: var(--lab-fs-label);
      font-weight: 700;
      line-height: 1.7;
      letter-spacing: 0;
    }
  }

  & .lab-ax-diagram__roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lab-space-16);
    margin-top: auto;
    padding-top: var(--lab-space-24);
    border-top: 1px dotted var(--lab-navy);

    @media (max-width: 767px) { grid-template-columns: minmax(0, 1fr); gap: var(--lab-space-8); }

    & > p {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--lab-space-8);
      padding: var(--lab-space-12) var(--lab-space-8);
      border-radius: var(--lab-space-32);
      background: var(--lab-white);
      font-size: var(--lab-fs-lead);
      font-weight: 700;
      line-height: 1.6;
      letter-spacing: .01em;

      @media (max-width: 767px) { font-size: var(--lab-fs-body); }
      & > svg { flex: none; width: var(--lab-space-24); height: var(--lab-space-24); }
    }
  }

  & .lab-ax-diagram__text {
    margin-top: var(--lab-space-16);
    min-height: calc(var(--lab-space-64) + var(--lab-space-24));
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .025em;
    text-wrap: pretty;

    @media (max-width: 767px) { min-height: 0; }
  }

  & .lab-ax-diagram__transition {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 42%;
    width: var(--lab-space-48);
    height: var(--lab-space-32);
    transform: translate(-50%, -50%);
    background: var(--lab-primary);
    clip-path: polygon(0 28%, 58% 28%, 58% 0, 100% 50%, 58% 100%, 58% 72%, 0 72%);

    @media (max-width: 1023px) {
      position: static;
      justify-self: center;
      transform: rotate(90deg);
    }
  }

  /* ゴールの一文：枠の中央にそろえる */
  & .lab-ax-diagram__goal {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--lab-space-24);
    padding: var(--lab-space-24) var(--lab-space-32);
    border: 1px solid var(--lab-navy);
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);

    @media (max-width: 767px) {
      padding: var(--lab-space-24) var(--lab-space-16);
    }

    & > p {
      flex: 1;
      text-align: center;
      font-size: var(--lab-fs-h4);
      font-weight: 700;
      line-height: 1.65;
      letter-spacing: .02em;
      font-feature-settings: 'palt';
      text-wrap: balance;

      @media (max-width: 767px) { font-size: var(--lab-fs-lead); }
    }
  }

  & .lab-ax-diagram__goal-break {
    @media (max-width: 1023px) { display: none; }
  }
}