@charset "UTF-8";
/* ==========================================================================
   P00 トップ（design/P00 トップ.dc.html）
   ========================================================================== */

/* --------------------------------------------------------------------------
   P00-1 ヒーロー（6＋6、右はデモの GIF を流すショーケース）
   -------------------------------------------------------------------------- */
.lab-top-hero {
  border-bottom: 1px solid var(--lab-line);

  & .lab-top-hero__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--lab-gutter);
    align-items: center;
    padding-block: 96px;

    @media (max-width: 1023px) {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 48px;
      padding-block: 64px;
    }

    @media (max-width: 767px) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-block: 48px;
    }
  }

  & .lab-top-hero__body {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

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

    @media (max-width: 767px) {
      width: 100%;
    }
  }

  & .lab-top-hero__kicker {
    font-size: clamp(var(--lab-fs-body), 1.25vw, var(--lab-fs-lead));
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .04em;

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

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

  & .lab-top-hero__sep {
    color: var(--lab-ink-3);
  }

  /* 6カラムに収まるよう、デスクトップは見出しを一回り小さく（タブレット・モバイルは .lab-h1 のまま） */
  & .lab-top-hero__title {
    margin-top: 32px;
    font-size: clamp(2.25rem, 3.6vw, var(--lab-fs-display));

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

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

  & .lab-top-hero__accent {
    color: var(--lab-primary);
  }

  & .lab-top-hero__dash {
    letter-spacing: 0;
  }

  & .lab-top-hero__lead {
    margin-top: 32px;
    font-size: var(--lab-fs-lead);
    line-height: 1.9;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
    text-wrap: pretty;

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

  /* 「法務AXとは」：下線2pxの大きいテキストリンク */
  & .lab-top-hero__ax {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin-top: 40px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--lab-primary);
    font-size: var(--lab-fs-h4);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-primary);
    transition: color var(--lab-dur-fast) var(--lab-ease-out), border-color var(--lab-dur-fast) var(--lab-ease-out);

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

    &:hover {
      border-color: var(--lab-navy);
      color: var(--lab-navy);
    }
  }

  & .lab-top-hero__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;

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

  /* ショーケース：GIF を大きく見せるため、デスクトップでは右の余白に少しはみ出す */
  & .lab-top-hero__visual {
    grid-column: 7 / span 6;
    width: calc(100% + 48px);

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

    @media (max-width: 767px) {
      width: 100%;
      margin-top: 32px;
    }
  }
}

/* ヒーローのショーケース（_inc/components/demo-thumb.php の lab_demo_showcase()） */
.lab-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;

  & .lab-showcase__screen {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);

    & picture,
    & img {
      display: block;
      width: 100%;
      height: 100%;
    }

    & img {
      object-fit: cover;
    }
  }

  & .lab-showcase__nav {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    column-gap: 16px;
    width: 100%;
    margin-top: 20px;

    @media (max-width: 767px) {
      margin-top: 16px;
      column-gap: 8px;
    }
  }

  & .lab-showcase__title {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;

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

  /* 三角のアイコンだけ（押せる範囲は44px） */
  & .lab-showcase__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lab-ink-3);
    cursor: pointer;
    transition: color var(--lab-dur-fast) var(--lab-ease-out);

    &:hover {
      color: var(--lab-primary);
    }

    & svg {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linejoin: round;
    }
  }

  & .lab-showcase__button {
    margin-top: 16px;
    min-width: 200px;

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

/* --------------------------------------------------------------------------
   P00-2 4導線（カード4枚／モバイル2×2）
   -------------------------------------------------------------------------- */
.lab-top-routes {
  padding: 64px 0 128px;

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

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

  & .lab-top-routes__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--lab-gutter);

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

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

    & > li {
      display: flex;
    }
  }

  & .lab-top-routes__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-height: 240px;
    padding: clamp(24px, 2.2vw, 32px);
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);
    transition: border-color var(--lab-dur-fast) var(--lab-ease-out);

    @media (max-width: 767px) {
      gap: 8px;
      min-height: 176px;
      padding: 16px;
    }

    &:hover {
      border-color: var(--lab-primary);
    }
  }

  & .lab-top-routes__title {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;

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

  & .lab-top-routes__text {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink-3);

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

  & .lab-top-routes__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: auto;
    font-size: var(--lab-fs-small);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--lab-primary);
  }
}

/* --------------------------------------------------------------------------
   P00-3 法務AXとは（図解）
   -------------------------------------------------------------------------- */
.lab-top-ax {
  padding-block: var(--lab-space-96);
  background: var(--lab-white);

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

  & .lab-top-ax__panel {
    display: flex;
    flex-direction: column;
    gap: var(--lab-space-32);
    margin-top: var(--lab-space-48);

    @media (max-width: 767px) { margin-top: var(--lab-space-32); }
  }

  & .lab-top-ax__intro {
    display: flex;
    flex-direction: column;
    gap: var(--lab-space-12);
    text-align: center;

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

  & .lab-top-ax__catch {
    font-size: var(--lab-fs-heading-l);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
    color: var(--lab-navy);
    text-wrap: balance;

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

  & .lab-top-ax__def,
  & .lab-top-ax__shift {
    font-size: var(--lab-fs-body);
    line-height: 1.9;
    color: var(--lab-ink-2);
  }

  & .lab-top-ax__shift .lab-marker {
    padding: 0;
    background: transparent;
    color: var(--lab-navy);
  }

  & > .lab-container > .lab-sp-more { margin-top: var(--lab-space-24); }
}

/* --------------------------------------------------------------------------
   P00-4 体験ピックアップ（7＋5、右列に上罫2px）
   -------------------------------------------------------------------------- */
.lab-top-demo {
  padding-top: 128px;

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

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

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

    @media (max-width: 767px) {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 32px;
    }
  }

  & .lab-top-demo__media {
    grid-column: 1 / span 7;
    color: var(--lab-ink-2);
  }

  & .lab-top-demo__body {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 24px;
    border-top: 2px solid var(--lab-primary);

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

  & .lab-top-demo__title {
    font-size: clamp(1.5rem, 1.95vw, var(--lab-fs-h3));
    overflow-wrap: anywhere;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
    word-break: auto-phrase;

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

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

  & .lab-top-demo__text {
    display: flex;
    flex-direction: column;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-top-demo__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;

    @media (max-width: 767px) {
      width: 100%;
    }
  }

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

/* --------------------------------------------------------------------------
   P00-5 最新記事（6＋6）
   -------------------------------------------------------------------------- */
.lab-top-latest {
  padding: 128px 0;

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

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

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

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

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

  & .lab-top-latest__feature {
    grid-column: 1 / span 6;

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

  & .lab-top-latest__rows {
    grid-column: 7 / span 6;

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

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

/* --------------------------------------------------------------------------
   P00-6 次回研究会（4＋8）
   -------------------------------------------------------------------------- */
.lab-top-seminar {
  padding: 96px 0;
  background: var(--lab-bg-1);

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

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

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

  & .lab-top-seminar__head {
    grid-column: 1 / span 4;

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

  & .lab-top-seminar__card {
    grid-column: 5 / span 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
    align-items: end;
    padding: 48px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);

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

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

  & .lab-top-seminar__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;

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

  /* 空状態：線 #6F6F6F の枠＋「次回開催は準備中」 */
  & .lab-top-seminar__empty {
    grid-column: 5 / span 8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    padding: 48px;
    border: 1px solid var(--lab-ink-3);

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

    @media (max-width: 767px) {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      padding: 24px;
    }
  }

  & .lab-top-seminar__empty-text {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;

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

/* --------------------------------------------------------------------------
   P00-7 研究所について（写真3＋本文7）
   -------------------------------------------------------------------------- */
.lab-top-about {
  padding: 128px 0;

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

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

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

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

  /* 所長写真（研究所についてと同じ 5:6） */
  & .lab-top-about__photo {
    grid-column: 1 / span 3;
    aspect-ratio: 5 / 6;
    color: var(--lab-ink-2);

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

    @media (max-width: 767px) {
      order: 2;
      width: 50%;
    }
  }

  & .lab-top-about__body {
    grid-column: 5 / span 7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;

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

    /* モバイルは 見出し → 写真 → ミッション → リンク の順に並べ替える */
    @media (max-width: 767px) {
      display: contents;
    }
  }

  & .lab-top-about__head {
    @media (max-width: 767px) {
      order: 1;
    }
  }

  & .lab-top-about__mission {
    font-size: var(--lab-fs-h3);
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
    color: var(--lab-ink-3);

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

  & .lab-top-about__link {
    margin-top: 8px;

    @media (max-width: 767px) {
      order: 4;
      margin-top: 0;
    }
  }
}