@charset "UTF-8";
/* ==========================================================================
   P06 研究所について（ワイヤー：P06 研究所について.dc.html／見た目：design/P00・P01）
   セクション：タイトル → ミッション → 研究の原則 → 所長メッセージ（bg-1）→ メンバー
              → 活動実績（bg-1）→ 運営会社・関連サイト → 共通CTA（③研究会を強調）
   ========================================================================== */

/* ワイヤーのデスクトップ改行を行ブロックで再現（モバイルは自然改行）。
   収まらない幅（1024〜1279px など）では行ブロック内でバランス改行し、短い孤立行を作らない */
.lab-about-line {
  display: block;
  text-wrap: balance;

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

/* 見出し内の文節（「を、」の前などで割れないように文節単位で折り返す） */
.lab-about-phrase {
  display: inline-block;
}

/* --------------------------------------------------------------------------
   P06-1 タイトル（P01-1 型）
   -------------------------------------------------------------------------- */
.lab-about-title {
  & .lab-about-title__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1088px;
    padding-block: 96px;

    @media (max-width: 1023px) {
      gap: 24px;
      padding-block: 64px;
    }

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

/* --------------------------------------------------------------------------
   P06-2 ミッション（見出し6＋本文6：本文は7列目から・40em）
   -------------------------------------------------------------------------- */
.lab-about-mission {
  padding: 0 0 96px;

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

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

  & .lab-about-mission__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;
    }

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

  & .lab-about-mission__head {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    gap: 16px;

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

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

  & .lab-about-mission__body {
    grid-column: 7 / span 6;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 40em;
    padding-top: 8px;

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

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

/* --------------------------------------------------------------------------
   P06-2.5 研究の原則（3カラム・bg-1 カード）
   -------------------------------------------------------------------------- */
.lab-about-principles {
  padding: 0 0 128px;

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

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

  & .lab-about-principles__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lab-gutter);
    margin-top: 48px;

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

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

  & .lab-about-principles__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-bg-1);

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

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

  & .lab-about-principles__no {
    font-size: var(--lab-fs-label);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--lab-navy);
  }

  /* カード見出し（title 20px／モバイル18px） */
  & .lab-about-principles__title {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    text-wrap: balance;

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

  & .lab-about-principles__text {
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
  }
}

/* --------------------------------------------------------------------------
   P06-3 所長メッセージ（bg-1：写真3＋本文7）
   -------------------------------------------------------------------------- */
.lab-about-message {
  padding: 128px 0;
  background: var(--lab-bg-1);

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

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

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

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

  /* 写真（5:6）は文章のかたまりの縦の中央に */
  & .lab-about-message__photo {
    grid-column: 1 / span 4;
    aspect-ratio: 5 / 6;
    color: var(--lab-ink-2);

    /* モバイルは ワイヤーどおり 写真（中央・幅200px）→ 見出し → 本文 → 署名 */
    @media (max-width: 767px) {
      width: 200px;
      align-self: center;
    }
  }

  & .lab-about-message__body {
    grid-column: 6 / span 7;
    display: flex;
    flex-direction: column;
    gap: 32px;

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

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

  & .lab-about-message__head {
    display: flex;
    flex-direction: column;
    gap: 16px;

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

  & .lab-about-message__text {
    display: flex;
    flex-direction: column;
    gap: 24px;

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

  /* 署名：右寄せ。デスクトップは1行、タブレット以下は肩書を2行に */
  & .lab-about-message__sign {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--lab-line);
    text-align: right;

    @media (max-width: 1023px) {
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }
  }

  & .lab-about-message__roles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: var(--lab-fs-small);
    line-height: 1.7;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

    @media (max-width: 1023px) {
      flex-direction: column;
      align-items: flex-end;
    }
  }

  & .lab-about-message__sep {
    @media (max-width: 1023px) {
      display: none;
    }
  }

  & .lab-about-message__name {
    font-size: var(--lab-fs-title);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .08em;
    color: var(--lab-ink);

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

/* --------------------------------------------------------------------------
   P06-5 活動実績（bg-1：数値4枠）
   -------------------------------------------------------------------------- */
.lab-about-record {
  padding: 128px 0;
  background: var(--lab-bg-1);

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

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

  /* 数値4枠：白い面を罫線で4分割（モバイル2×2） */
  & .lab-about-record__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 48px;
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);
    overflow: hidden;

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

  & .lab-about-record__stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 12px;
    padding: 40px 32px;

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

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

    &:not(:first-child) {
      border-left: 1px solid var(--lab-line);
    }

    &:nth-child(3) {
      @media (max-width: 767px) {
        border-left: 0;
      }
    }

    &:nth-child(n + 3) {
      @media (max-width: 767px) {
        border-top: 1px solid var(--lab-line);
      }
    }
  }

  /* 数値（display 56px）。4分割のセルが狭い 1024〜1279px では幅に合わせて縮める（.lab-h1 と同じ 3.9vw） */
  & .lab-about-record__value {
    font-size: clamp(2.5rem, 3.9vw, var(--lab-fs-display));
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    font-feature-settings: 'palt';
    white-space: nowrap;
    color: var(--lab-primary);

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

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

    /* 事実確認待ちの値はプレースホルダ色 */
    &.lab-about-record__value--placeholder {
      color: var(--lab-ink-3);
    }
  }

  & .lab-about-record__unit {
    margin-left: 4px;
    font-size: var(--lab-fs-h4);
    letter-spacing: .04em;

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

  & .lab-about-record__label {
    font-size: var(--lab-fs-lead);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--lab-ink-2);

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

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

/* --------------------------------------------------------------------------
   P06-6 運営会社・関連サイト（3カード・外部リンク）
   -------------------------------------------------------------------------- */
.lab-about-sites {
  padding: 128px 0;

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

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

  & .lab-about-sites__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lab-gutter);
    margin-top: 48px;

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

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

  & .lab-about-sites__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 32px;
    border: 1px solid var(--lab-line);
    border-radius: var(--lab-radius-md);
    background: var(--lab-white);

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

  & .lab-about-sites__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-lead);
    }
  }

  & .lab-about-sites__text {
    flex: 1;
    font-size: var(--lab-fs-body);
    line-height: 1.85;
    letter-spacing: .04em;
    color: var(--lab-ink-2);
  }

  & .lab-about-sites__link {
    margin-top: 4px;
  }
}