@charset "UTF-8";
/* ==========================================================================
   P01 法務AXとは（design/P01 法務AXとは.dc.html）
   目次は廃止。各セクションは12カラム全幅、本文の行長だけ40em（.lab-measure）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   P01-1 タイトル
   -------------------------------------------------------------------------- */
.lab-ax-title {
  padding: 96px 0;

  @media (max-width: 1023px) {
    padding: 64px 0;
  }

  @media (max-width: 767px) {
    padding: 48px 0 32px;
  }

  & .lab-ax-title__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1088px;

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

/* --------------------------------------------------------------------------
   P01-2 定義ブロック
   -------------------------------------------------------------------------- */
.lab-ax-def {
  padding-bottom: 96px;

  @media (max-width: 767px) {
    padding: 48px 0;
  }

  /* 見出し・カードの文はすべて中央揃え */
  & .lab-section-head {
    justify-content: center;
    text-align: center;

    @media (max-width: 767px) {
      align-items: center;
    }
  }

  & .lab-ax-def__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;

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

  & .lab-ax-def__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 36px 48px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);
    text-align: center;

    @media (max-width: 1023px) {
      padding: 28px 32px;
    }

    @media (max-width: 767px) {
      gap: 16px;
      padding: 20px 24px;
    }
  }

  & .lab-ax-def__text {
    font-size: var(--lab-fs-h3);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
    text-wrap: balance;

    @media (max-width: 1023px) {
      font-size: 1.5rem;
    }

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

  & .lab-ax-def__shift {
    padding-top: 24px;
    border-top: 1px solid var(--lab-line);
    font-size: var(--lab-fs-lead);
    line-height: 1.9;
    letter-spacing: .04em;

    @media (max-width: 767px) {
      padding-top: 16px;
      font-size: var(--lab-fs-body);
      line-height: 1.85;
    }

    /* モバイルでマーカーが2行に折れたとき、各行の端にも左右の余白と面を付ける */
    & .lab-marker {
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  }
}

/* --------------------------------------------------------------------------
   P01-3 従来の組織 vs AX後の組織（#compare：トップの「詳しく見る」の着地点）
   -------------------------------------------------------------------------- */
.lab-ax-compare {
  padding-bottom: var(--lab-space-96);
  scroll-margin-top: var(--lab-space-32);

  @media (max-width: 767px) {
    padding-bottom: var(--lab-space-64);
    scroll-margin-top: var(--lab-space-24);
  }
}

/* --------------------------------------------------------------------------
   P01-4 「AIに判断を任せるのは怖い」への応答 → ▼ で責任分界へ
   デスクトップは淡色パネル、モバイルはセクション全幅の淡色面
   -------------------------------------------------------------------------- */
.lab-ax-concern {
  padding-bottom: 32px;

  @media (max-width: 767px) {
    padding: 48px 0 24px;
    background: var(--lab-bg-1);
  }

  & .lab-ax-concern__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    @media (max-width: 767px) {
      align-items: stretch;
    }
  }

  /* 見出し・本文・要点の枠はすべて中央揃え */
  & .lab-ax-concern__panel {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    padding: 64px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);

    @media (max-width: 1023px) {
      padding: 48px;
    }

    @media (max-width: 767px) {
      gap: 24px;
      padding: 0;
      border-radius: 0;
      background: transparent;
    }
  }

  /* 本文は読みやすい長さ（1行40字前後）まで広げて中央に。モバイルは左揃え */
  & .lab-ax-concern__text {
    max-width: 52em;
    text-wrap: balance;

    @media (max-width: 767px) {
      text-align: left;
      text-wrap: pretty;
    }
  }

  & .lab-ax-concern__key {
    align-self: stretch;
    padding: 32px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
    text-wrap: balance;

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

    @media (max-width: 767px) {
      padding: 24px;
      font-size: var(--lab-fs-lead);
      line-height: 1.7;
      text-wrap: wrap;
    }
  }

  & .lab-ax-concern__next {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-navy);
  }

  /* 「その設計が「責任分界」」はモバイルだけ */
  & .lab-ax-concern__next-label {
    display: none;

    @media (max-width: 767px) {
      display: block;
    }
  }

  & .lab-ax-concern__next-mark {
    font-size: var(--lab-fs-body);
    line-height: 1;
  }
}

/* --------------------------------------------------------------------------
   P01-5 責任分界（#bunkai）4区分：デスクトップ横4列／タブレット2×2／モバイル縦積み
   面の濃淡 bg-1 → bg-2 → navy → ink で「人の判断が重くなる順」（.lab-tier と同じ配色）
   -------------------------------------------------------------------------- */
.lab-ax-bunkai {
  padding: 64px 0 128px;

  @media (max-width: 1023px) {
    padding: 48px 0 96px;
  }

  @media (max-width: 767px) {
    padding: 48px 0 64px;
  }

  & .lab-ax-bunkai__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;

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

  /* 見出し・本文・例はすべて中央揃え（4区分のカードはそのまま） */
  & .lab-section-head {
    justify-content: center;
    text-align: center;

    @media (max-width: 767px) {
      align-items: center;
    }
  }

  & .lab-ax-bunkai__lead {
    align-self: center;
    max-width: 52em;
    text-align: center;
    text-wrap: balance;

    @media (max-width: 767px) {
      text-align: left;
      text-wrap: pretty;
    }
  }

  & .lab-ax-bunkai__example {
    text-align: center;
    padding: 24px 32px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.85;
    letter-spacing: .04em;
    text-wrap: pretty;

    @media (max-width: 767px) {
      padding: 16px;
    }
  }

  & .lab-ax-bunkai__tiers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;

    @media (max-width: 1023px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

  /* 1024〜1439px は4列のまま狭くなるため、内余白・区分名・dl の間隔を流動させる（1440 で必ずデザイン値に届くよう係数はわずかに大きめ） */
  & .lab-ax-bunkai__tier {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(24px, 2.23vw, 32px);
    border-radius: var(--lab-radius-md);

    @media (max-width: 1023px) {
      padding: 32px;
    }

    @media (max-width: 767px) {
      gap: 12px;
      padding: 24px;
    }

    &.lab-ax-bunkai__tier--green {
      background: var(--lab-bg-1);
    }

    &.lab-ax-bunkai__tier--yellow {
      background: var(--lab-bg-2);
    }

    &.lab-ax-bunkai__tier--red {
      background: var(--lab-navy);
      color: var(--lab-white);
    }

    &.lab-ax-bunkai__tier--black {
      background: var(--lab-ink);
      color: var(--lab-white);
    }

    &.lab-ax-bunkai__tier--red,
    &.lab-ax-bunkai__tier--black {
      & .lab-ax-bunkai__tier-label {
        color: var(--lab-white);
      }

      & .lab-ax-bunkai__tier-meta {
        border-top-color: var(--lab-negative);
      }
    }
  }

  /* 番号＋区分名（区分名は必ず文字で示す） */
  & .lab-ax-bunkai__tier-label {
    display: flex;
    gap: 12px;
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-navy);
  }

  /* タブレットは従来vsAX後のカード見出し（h3）と同じ 24px にそろえる */
  & .lab-ax-bunkai__tier-name {
    font-size: clamp(1.375rem, 1.95vw, 1.75rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;

    @media (max-width: 1023px) {
      font-size: 1.5rem;
    }

    @media (max-width: 767px) {
      font-size: 1.375rem;
    }
  }

  /* 4列が狭い幅で最終行が1〜2字だけにならないよう pretty。{…} の語は途中で改行させない */
  & .lab-ax-bunkai__tier-text {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    text-wrap: pretty;
  }

  & .lab-ax-bunkai__keep {
    white-space: nowrap;
  }

  & .lab-ax-bunkai__tier-meta {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: clamp(12px, 1.12vw, 16px);
    row-gap: 4px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--lab-line);
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;

    @media (max-width: 1023px) {
      column-gap: 16px;
    }

    @media (max-width: 767px) {
      column-gap: 12px;
      margin-top: 0;
      padding-top: 12px;
    }

    & dt {
      font-weight: 700;
    }
  }

  & .lab-ax-bunkai__summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 48px;
    border: 2px solid var(--lab-navy);
    border-radius: var(--lab-radius-md);
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-navy);
    text-wrap: pretty;

    @media (max-width: 1023px) {
      padding: 32px;
    }

    @media (max-width: 767px) {
      padding: 24px;
      font-size: var(--lab-fs-lead);
      line-height: 1.7;
    }
  }
}

/* --------------------------------------------------------------------------
   P01-7 診断CTA帯（#cta：青い面＋inverse 64pxボタン、7＋5）
   -------------------------------------------------------------------------- */
.lab-ax-cta {
  padding: 96px 0;
  background: var(--lab-primary);
  color: var(--lab-white);

  @media (max-width: 767px) {
    padding: 64px 0;
  }

  & .lab-ax-cta__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--lab-gutter);
    align-items: center;

    @media (max-width: 1023px) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
    }

    @media (max-width: 767px) {
      align-items: stretch;
      gap: 24px;
    }
  }

  & .lab-ax-cta__head {
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    gap: 16px;

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

  & .lab-ax-cta__action {
    grid-column: 8 / span 5;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  & .lab-ax-cta__button {
    padding-inline: 48px;

    @media (max-width: 767px) {
      padding-inline: 24px;
    }
  }
}

/* --------------------------------------------------------------------------
   P01-8 関連記事（noteカード row×3、8カラム幅）
   -------------------------------------------------------------------------- */
.lab-ax-related {
  padding: 128px 0 96px;

  @media (max-width: 1023px) {
    padding: 96px 0;
  }

  @media (max-width: 767px) {
    padding: 64px 0;
  }

  & .lab-ax-related__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--lab-gutter);
    margin-top: 48px;

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

    @media (max-width: 767px) {
      margin-top: 24px;
    }
  }

  & .lab-ax-related__list {
    grid-column: 1 / span 8;

    @media (max-width: 1023px) {
      grid-column: 1 / -1;
    }
  }

  & .lab-ax-related__more {
    margin-top: 16px;
  }
}

/* --------------------------------------------------------------------------
   P01-任意 サービス両輪（CTAなし・本体リンクのみ）
   -------------------------------------------------------------------------- */
.lab-ax-services {
  padding-block: var(--lab-space-96);
  background: var(--lab-bg-1);
  color: var(--lab-service-ink);
  line-height: 1.6;
  letter-spacing: 0;

  @media (max-width: 768px) { padding-block: var(--lab-space-48) var(--lab-space-64); }

  & > .lab-container {
    max-width: var(--lab-service-container);
    padding-inline: var(--lab-space-16);
  }

  & .lab-ax-services__title {
    font-size: var(--lab-fs-h3);
    font-weight: 700;
    line-height: 1.6;
    color: var(--lab-navy);
    text-align: center;
    text-wrap: balance;

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

  & .lab-ax-services__grid {
    display: grid;
    /* 本体と同じ画像の幅比に合わせ、左右の画像・本文の開始位置を揃える */
    grid-template-columns: minmax(0, 1042fr) minmax(0, 1000fr);
    gap: calc(var(--lab-space-16) + var(--lab-space-4));
    margin-top: calc(var(--lab-space-32) + var(--lab-space-8));

    @media (max-width: 768px) {
      grid-template-columns: minmax(0, 1fr);
      margin-top: var(--lab-space-32);
    }
  }

  & .lab-ax-services__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--lab-service-border);
    border-radius: calc(var(--lab-radius-md) + var(--lab-space-2));
    background: var(--lab-white);
  }

  & .lab-ax-services__name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--lab-space-4) + var(--lab-space-2));
    padding: calc(var(--lab-space-16) + var(--lab-space-4));
    background: var(--lab-service-tool);
    color: var(--lab-white);
    font-size: var(--lab-fs-lead);
    font-weight: 600;
    line-height: 1.6;
    text-wrap: wrap;
  }

  & .lab-ax-services__card--consulting .lab-ax-services__name {
    background: var(--lab-service-consulting);
  }

  & .lab-ax-services__logo {
    flex: none;
    width: calc(var(--lab-space-64) + var(--lab-space-4));
    height: auto;
  }

  & .lab-ax-services__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: calc(var(--lab-space-16) + var(--lab-space-4));
  }

  & .lab-ax-services__image {
    width: 100%;
    max-width: var(--lab-service-image-width);
    height: auto;
    margin: 0 auto var(--lab-space-16);
  }

  & .lab-ax-services__card:not(.lab-ax-services__card--consulting) .lab-ax-services__image {
    max-width: calc(var(--lab-service-image-width) * 1.042);
  }

  & .lab-ax-services__catch {
    margin-bottom: var(--lab-space-16);
    font-size: var(--lab-fs-h4);
    font-weight: 700;

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

  & .lab-ax-services__text {
    margin-bottom: var(--lab-space-16);
    font-size: var(--lab-fs-lead);
    font-weight: 400;

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

  & .lab-ax-services__link {
    display: block;
    width: 100%;
    margin-top: auto;
    padding: var(--lab-space-12);
    border: 2px solid var(--lab-service-button-border);
    border-radius: var(--lab-radius-sm);
    background: var(--lab-service-button-bg);
    color: var(--lab-service-button-ink);
    font-size: var(--lab-fs-body);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    transition: opacity var(--lab-dur-fast);

    &:hover { opacity: .8; }
    &:focus-visible { outline-color: var(--lab-primary); outline-offset: var(--lab-space-4); }
  }
}

/* --------------------------------------------------------------------------
   P01-9 共通CTAの下：設計・実装の支援について（控えめなリンク帯）
   -------------------------------------------------------------------------- */
.lab-ax-support {
  padding: 24px 0;
  border-top: 1px solid var(--lab-line);
  background: var(--lab-bg-1);

  @media (max-width: 767px) {
    padding: 16px 0;
  }
}