/*
 * 会社概要（/company/）— DESIGN_SYSTEM v2「A-4 Data」適用
 * 正本: source/DESIGN_SYSTEM.md（v2）
 *
 * 旧実装は tailwind-pages.css ＋ .crm-lp-wrapper（WP 干渉対策の
 * 全要素 background !important）で組まれており、v1 時代の #19CDB2 を
 * 18 箇所に直書きしていた。v2 化にあたり次を廃止した。
 *   - 見出し帯の border-left: 4px（§11 NG#1 / v1 Hard Rule も同じく禁止）
 *   - 目次の左カラーバー（同上）
 *   - 「01」〜「06」の飾り数字（§4 / NG#3）
 *   - 全セクションを囲む rounded-2xl + shadow（§5「囲いカードは
 *     アーカイブ一覧とギャラリーのみ」・A-4 は罫線行が主役）
 *   - #19CDB2 のテキスト（白地とのコントラスト 2.0:1・§5 は 4.5:1 以上）
 *   - 画像の group-hover:scale-105 / duration-500（§6 の 4 種・3 段に不適合）
 *
 * トークンは corporate-v2.css の .brand-v2 スコープを使う。
 * このファイルは :root を定義しない（§14-1: style.css の :root は
 * media 記事 1,000 本超が参照しているため触らない）。
 */

/* ============================================================
   0. ページ土台
   このページは style.css を読まないので素タグのグローバル CSS は
   当たらないが、AGENTS.md の「本文で <section> を使うなら reset を
   明示する」に従って打ち消しを書いておく。
   ============================================================ */

.cp-body,
.cp-body *,
.cp-body *::before,
.cp-body *::after {
  box-sizing: border-box;
}

.cp-body {
  margin: 0;
  font-family: var(--sans);
  background: var(--v2-bg);
  color: var(--ink);
}

.cp-body a {
  color: inherit;
  text-decoration: none;
}

.cp-body img {
  display: block;
  max-width: 100%;
  height: auto;
}

.cp-body figure {
  margin: 0;
}

.cp-body .cp-sec {
  position: static;
  background: transparent;
  padding: 0;
  margin: 0;
  scroll-margin-top: 96px;
}

/* ============================================================
   1. レイアウト（.v2-inner と同じ器 ＋ 目次カラム）
   ============================================================ */

.cp-body .cp-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.cp-body .cp-hero {
  padding: 56px 0 44px;
}

/*
 * flanking の ✧（trail）は .v2-flank の右下 14px 外側に出る。会社トップは h1 が
 * 長いので本文と横位置がずれるが、「会社概要」は 4 文字で幅が狭く、そのままだと
 * リード文の 1 行目に重なる。h1 とリードの間に trail の逃げ（14px + 星の高さ）を取る。
 */
.cp-body .cp-hero .v2-display {
  margin: 14px 0 0;
}

.cp-body .cp-hero .v2-lead {
  margin: 32px 0 0;
  max-width: 40em;
  line-height: 2.0;
}

.cp-body .cp-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 8px;
}

/* セクション間は罫線 1 本で区切る（.v2-block と同じ文法） */
.cp-body .cp-sec + .cp-sec {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px solid var(--line);
}

.cp-body .cp-sec-head {
  margin-bottom: 28px;
}

.cp-body .cp-sec-head .v2-h2 {
  margin: 0;
}

/* ============================================================
   2. 目次（sticky）
   旧実装は ul の左に 2px のグレー帯を引き、hover で teal の帯へ
   差し替えていた（§11 NG#1）。v2 では帯を持たず、背景と文字色で示す。
   ============================================================ */

.cp-body .cp-toc {
  position: sticky;
  top: 96px;
}

.cp-body .cp-toc__eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 12px;
}

.cp-body .cp-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cp-body .cp-toc__link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--v2-muted);
  transition: background .15s var(--ease-out), color .15s var(--ease-out);
}

.cp-body .cp-toc__link:hover {
  background: #FAFBFC;
  color: var(--ink);
}

/* ============================================================
   3. ミッション（囲いなしのステートメント）
   ============================================================ */

.cp-body .cp-mission {
  font-size: clamp(21px, 3.1vw, 32px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}

.cp-body .cp-mission-rule {
  width: 56px;
  height: 2px;
  background: var(--teal);
  margin: 22px 0 0;
  border-radius: 2px;
}

/* ============================================================
   4. 提供サービス（データ行・ロゴ ＋ 説明 ＋ リンク）
   ============================================================ */

.cp-body .cp-svc {
  border-top: 1px solid var(--line);
}

/* ロゴ列は 3 ブランドで最も横長の「超速AIパートナー」（256x44）が
   max-width で潰れない幅にする。200px だと 200x34 に縮み、他 2 つの 44px と
   高さが揃わない。 */
.cp-body .cp-svc__row {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  gap: 12px 28px;
  align-items: center;
  padding: 26px 10px;
  border-bottom: 1px solid var(--line);
  transition: background .15s var(--ease-out);
}

.cp-body a.cp-svc__row:hover {
  background: #FAFBFC;
}

.cp-body .cp-svc__logo {
  max-height: 44px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.cp-body .cp-svc__desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--v2-muted);
  margin: 0;
}

.cp-body a.cp-svc__row:hover .v2-link__arrow {
  transform: translateX(4px);
}

.cp-body .cp-svc-foot {
  margin-top: 26px;
}

/* ============================================================
   5. 会社情報の数値
   資本金・設立日は等幅 ＋ tabular-nums（§2 Data）。
   ============================================================ */

.cp-body .v2-facts__val .v2-data {
  font-size: 13.5px;
}

.cp-body .v2-facts__val small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--faint);
}

/* ============================================================
   6. 代表紹介（囲いなし）
   ============================================================ */

.cp-body .cp-profile {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 32px;
  align-items: start;
}

.cp-body .cp-profile__photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.cp-body .cp-profile__role {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 8px;
}

.cp-body .cp-profile__name {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 16px;
}

.cp-body .cp-profile__name span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--faint);
  margin-left: 10px;
}

.cp-body .cp-profile__bio {
  font-size: 14px;
  line-height: 1.9;
  color: var(--v2-muted);
  margin: 0;
}

/* ============================================================
   7. オフィス（ギャラリー）
   囲いカードが許されるのはアーカイブ一覧とギャラリーだけ（§5）。
   hover の拡大（旧 scale-105 / 500ms）は §6 に無いので持たない。
   ============================================================ */

.cp-body .cp-gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.cp-body .cp-photo {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* 元画像は 2048x1366（3:2）。旧実装の 4:3 クロップをやめて素の比率で置く */
.cp-body .cp-photo img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
}

.cp-body .cp-photo figcaption {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}

/* ============================================================
   8. アクセス
   ============================================================ */

.cp-body .cp-map {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.cp-body .cp-map iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}

.cp-body .cp-addr {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
}

/* アイコンチップは白地 ＋ 1px 枠 ＋ 黒ストローク（§5・淡色面は禁止） */
.cp-body .cp-addr__ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  color: #000;
  display: grid;
  place-items: center;
}

.cp-body .cp-addr__ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cp-body .cp-addr__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--v2-muted);
  margin: 0;
}

.cp-body .cp-addr__text .v2-data {
  font-size: 13px;
}

/* ============================================================
   9. 締めの CONTACT
   本文と同じ「罫線 1 本で区切る」文法に合わせる。
   ============================================================ */

.cp-body .v2-contact {
  border-top: 1px solid var(--line);
}

/* ============================================================
   10. レスポンシブ
   ============================================================ */

@media (max-width: 980px) {
  .cp-body .cp-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* 目次は横並びのピルへ。sticky は解除する */
  .cp-body .cp-toc {
    position: static;
  }

  .cp-body .cp-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .cp-body .cp-toc__link {
    border: 1px solid var(--line);
    border-radius: 9999px;
    padding: 7px 14px;
    font-size: 12.5px;
  }

  .cp-body .cp-gal {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .cp-body .cp-hero {
    padding: 40px 0 32px;
  }

  .cp-body .cp-sec + .cp-sec {
    margin-top: 48px;
    padding-top: 48px;
  }

  .cp-body .cp-svc__row {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .cp-body .cp-profile {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cp-body .cp-gal {
    grid-template-columns: 1fr;
  }

  .cp-body .cp-map iframe {
    height: 300px;
  }
}