/* company.html 固有スタイル。型(styles.css)・共通部品(custom.css)は編集禁止。
   使う部品: .page-head / .breadcrumb / .section / .section__head / .eyebrow / .section__lead /
   .about__grid .about__text .about__name .about__role .about__titles / .line-list / .state-list /
   .claim / .text-link / .scope-note / .btn
   ここにはミッション本文幅・代表プロフィール内の余白・会社概要dl・対応領域グリッド・会社概要末尾CTAの余白、の5点だけを追加する。 */

/* ---- ミッション: H2(左)＋本文(右) 7fr/5fr（design-direction-r4 §3.3） ---- */
.co-mission-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.co-mission-grid .section__head { max-width: none; margin-bottom: 0; }
.co-mission-grid h2 { margin-bottom: 0; }
.co-mission { max-width: 640px; padding-top: 4px; }
@media (max-width: 900px) {
  .co-mission-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- 代表プロフィール: 経歴・メッセージ・3つの軸・結びの余白調整 ---- */
.co-founder .line-list { margin-bottom: 40px; }
.co-founder .state-list { margin: 32px 0 0; }
.co-founder .closing { margin-top: 40px; }
/* B7: 代表写真の下に約800pxの空白ができる問題。右列を読み進める間、写真を追従させる（.about__gridは既存でalign-items:start） */
@media (min-width: 901px) {
  .co-founder figure { position: sticky; top: 112px; }
}
/* design-direction-r4 §3.3: 代表の2列は写真列を4fr→3frに詰める（共通の.about__gridは4fr/8fr・custom.css編集禁止のためここで上書き） */
@media (min-width: 901px) {
  .co-founder .about__grid { grid-template-columns: 3fr 9fr; }
}

/* ---- 会社概要: dl の2列表 ---- */
.co-overview { max-width: 800px; margin: 32px 0 0; border-top: 1px solid var(--rule); }
.co-overview > div { display: grid; grid-template-columns: 160px 1fr; gap: 8px 24px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.co-overview dt { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.co-overview dd { margin: 0; font-size: 15px; line-height: 1.9; color: var(--ink); }
@media (max-width: 600px) {
  .co-overview > div { grid-template-columns: 1fr; gap: 4px; }
}
.co-overview + .text-link { margin-top: 32px; }

/* ---- 対応領域: 2列グリッド(works.htmlの展開できる領域と同型) ---- */
.co-coverage { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; margin: 48px 0 40px; }
.co-coverage > div { border-top: 2px solid var(--ink); padding-top: 20px; }
.co-coverage h3 { font-size: 20px; margin-bottom: 10px; }
.co-coverage p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); }
@media (max-width: 900px) {
  .co-coverage { grid-template-columns: 1fr; gap: 32px; }
}

/* ==== design-review-r4 C5 ==== */
/* ミッション見出しを 56px に（page-head の h1 64 より一段下、1→10 の大見出しの熱量に寄せる） */
.co-mission-grid h2 { font-size: 56px; line-height: 1.3; }
@media (max-width: 900px) { .co-mission-grid h2 { font-size: 40px; } }
@media (max-width: 600px) { .co-mission-grid h2 { font-size: 32px; } }
/* 会社概要は博展型: 見出しを左、罫線区切りの表を右（表の左端を代表プロフィール本文の列に揃える） */
@media (min-width: 901px) {
  #overview { display: grid; grid-template-columns: 3fr 9fr; column-gap: 24px; align-items: start; }
  #overview > .section__head { grid-column: 1; margin-bottom: 0; }
  #overview > .co-overview { grid-column: 2; max-width: none; margin-top: 0; }
  #overview > .text-link, #overview > .btn { grid-column: 2; justify-self: start; }
}