/* ============================================================
 * COMPANY ページ専用のスタイル
 * ============================================================
 * 共通部分（色・ヘッダー・ボタン・フッター）は shared.css にある。
 * 記載内容は本番の company.html と同じ。
 *
 * ★経歴を追記・修正するときは、必ずリポジトリ直下の company-sources.md を先に読むこと。
 *   出典と、書いてはいけない事項がそこに集約されている（本番には配信されないファイル）。
 *   このHTMLはソース表示で誰でも読めるため、取り決めの中身をここには書かない。
 * ============================================================ */

/* ---------- ヒーロー（全画面にしない） ---------- */
/* トップページと同じく、最初の画面いっぱいを使う。
   ヘッダーは下へスクロールするまで出ないので、上の余白は少なめでよい。 */
.ch{position:relative;overflow:hidden;
  min-height:100svh;display:grid;align-content:center;text-align:center;
  padding:120px 24px 80px;
  background:radial-gradient(72% 78% at 50% 38%,var(--teal-pale) 0%,#fff 66%)}
/* 文字は光より前に出す（PRICE と同じ作り） */
.ch__in{position:relative;z-index:2}
.ch__h1{margin:0;font-weight:900;color:var(--teal);font-size:clamp(26px,5.6vw,56px);
  line-height:1.28;letter-spacing:.02em}
/* 1段目は英字なので字間を広げる。2段目は日本語なので詰める */
.ch__h1 .hln--1{letter-spacing:.14em}
.ch__h1 .hln--2{letter-spacing:-.01em}
/* 3段目は説明文。上の2段よりはっきり小さくする */
.ch__sub{margin:26px auto 0;max-width:660px;color:var(--ink-mid);
  font-size:clamp(14px,1.6vw,16px);font-weight:500}

/* 動きを控える設定のときは、最初から出しておく */
@media(prefers-reduced-motion:reduce){
  }

/* ---------- 会社概要 ---------- */
.prof{border-top:1px solid var(--line)}
.prof__row{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--line)}
@media(min-width:720px){.prof__row{grid-template-columns:220px 1fr;gap:32px;align-items:baseline}}
.prof__k{margin:0;font-size:13px;font-weight:900;color:var(--ink)}
.prof__k small{display:block;font-weight:700;color:var(--ink-dim);font-size:11px;margin-top:3px}
.prof__v{margin:0;font-size:14.5px;color:var(--ink-mid);line-height:1.95}
.prof__v ul{margin:0;padding-left:1.2em}
.prof__v li{margin-bottom:4px}
.prof__note{margin:26px 0 0;font-size:13px;color:var(--ink-mid)}

/* LinkedIn の印。四角＋矢印の外部リンク記号ではなく、公式のマークを使う。
   マーク自体が「外のサイトへ行く」ことを示すため、記号は重ねない。 */
.exlink--li svg{width:15px;height:15px;fill:#0a66c2;color:#0a66c2}

/* ---------- 主要メンバー ---------- */
.mem{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:1000px){.mem{grid-template-columns:1fr 1fr;gap:28px}}
.mem__card{display:flex;flex-direction:column;padding:30px 28px;border-radius:24px;background:#fff;
  border:1px solid var(--line)}
/* 役割の札。CEO は緑、アドバイザーは青にして役割の違いを色でも示す */
.mem__role{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:7px 14px;border-radius:999px;font-size:11px;font-weight:800;line-height:1;
  letter-spacing:.12em;color:#fff;background:color-mix(in srgb,var(--c) 82%,#000)}
.mem__name{margin:14px 0 3px;font-size:25px;font-weight:900;letter-spacing:.02em}
.mem__en{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--ink-dim)}
.mem__title{margin:0;font-size:13px;font-weight:800;color:color-mix(in srgb,var(--c) 82%,#000)}
/* 小見出しの上の余白。26px は空きすぎだったので詰める。
   Profile の直前は箇条書き（Career）なので、そのぶんさらに小さくする。 */
.mem__h{margin:18px 0 8px;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--teal-text)}
.mem__list + .mem__h,
.mem__foot .mem__h:first-child{margin-top:4px}
.mem__list{margin:0;padding-left:1.15em;font-size:13.5px;color:var(--ink-mid);line-height:1.85}
/* 2枚を横に並べたとき、Career の行数が違うと Profile の位置がずれるため、
   経歴の欄に最低の高さを持たせている。
   10.5em は実測に合わせた値：カード内の本文幅は約446px（1行あたり約33文字）で、
   経歴3項目は両名とも5行＝約137px（10.1em）。ここに少しだけ余裕を足したもの。
   ★以前は 18em を入れていたため、中身より 70px 以上大きく、その差が
     そのまま空白になって「Profile の上が広い」原因になっていた。
   （縦に積む幅では余白が増えるだけなので効かせない） */
@media(min-width:1000px){.mem__list{min-height:10.5em}}
.mem__list li{margin-bottom:6px}
/* 最後の項目の下余白は消す。付いたままだと、次に来る Profile 見出しの
   上余白と足し合わさって、指定より広く空いてしまう。 */
.mem__list li:last-child{margin-bottom:0}
.mem__pr{margin:0 0 10px;font-size:13.5px;color:var(--ink-mid);line-height:1.9}
.mem__pr:last-child{margin-bottom:0}
/* 参考情報。出典を示す姿勢はライブラリと同じ */
.mem__src{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:7px;font-size:12.5px}
.mem__src a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px;
  font-weight:700}
.mem__foot{margin-top:0}