/* ma.css — M&A ページ（Figma 27:546 準拠）
   構成: Hero(M&A Strategy) → 事業承継解説＋概念図 → 当社の考え → Interview(2本) → Contactバンド。
   フォント: タイトル Yu Mincho 96, 見出し Yu Mincho 48/64, 本文 Yu Mincho 16/28・20/35,
   取材ラベル Yu Mincho 20/30, 取材見出し Yu Mincho 24/36(Demibold)。
   命名リファクタ U5: ma固有クラスを c-Ma__ ・ l-MaSplit ・ c-MaInterviewCard ・ c-MaContact へ規約化
   （共有 .c-PageHero/.c-PageHero__titleSub は U13/U14）。 */

/* タイトル帯は inner.css の .c-PageHero ＋ .c-PageHero--alt に一本化＝ここでは再定義しない
   （HTML hero に c-PageHero--alt を付与）。 */
body[data-page="ma"] .c-PageHero__titleSub {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
}

/* 左見出し＋右内容の2カラム帯（共通） */
.l-MaSplit {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
/* Figma 48:2516「会社情報」= 帯1280内 テキスト622 : gap19 : 概念図639、図はテキストに対し縦センター(counterAlign=CENTER)。
   旧 1fr:0.82fr+gap80 では図が約541pxに縮小し上端揃いだったのを是正（図size・縦中央をFigma比率で復元）。 */
.l-MaSplit.l-MaSplit--reverse {
  grid-template-columns: minmax(0, 622fr) minmax(0, 639fr);
  gap: clamp(16px, 2vw, 19px);
  align-items: center;
}

.c-Ma__h2 {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 500;
  line-height: 1.33;
  color: var(--ink);
}

.c-Ma__body {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink);
}
.c-Ma__body p { margin: 0 0 1.75em; }
.c-Ma__body p:last-child { margin-bottom: 0; }

.c-Ma__body--lg {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.75;
}

/* 概念図 */
.c-Ma__concept { margin: 0; }
.c-Ma__concept img { display: block; width: 100%; height: auto; }

/* Interview */
.l-MaInterviewList { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.c-MaInterviewCard figure { margin: 0; }
.c-MaInterviewCard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 425 / 284;
  object-fit: cover;
}
.c-MaInterviewCard .c-MaInterviewCard__label {
  margin: 18px 0 0;
  font-family: var(--font-mincho);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  /* デザイナー指定の例外（M&A Story ラベルのみ）: 狭幅で「社名 ｜ 氏名」が
     CJK既定の貪欲改行で人名を割る（例: 飯島→飯/島）のを防ぐ。日本語文節認識で
     折り返し、氏名等の語を割らず・長い社名も文節境界で折るため溢れ0。
     keep-all は長社名(15字)が溢れるため不可。Safari未対応時は normal にフォールバック
     （現状挙動＝悪化なし）。他ページ・他見出しへは非波及（この scoped クラス限定）。 */
  word-break: auto-phrase;
}
.c-MaInterviewCard .c-MaInterviewCard__title {
  margin: 10px 0 0;
  font-family: var(--font-mincho);
  font-size: clamp(16px, 2.0vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.c-MaInterviewCard .c-MaInterviewCard__read {
  /* Figma 27:546: Read → = Inter Regular 14px / line-height 28px（MCP実測 2026-07-01） */
  display: inline-block;
  margin: 14px 0 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ink);
  text-decoration: none;
}
.c-MaInterviewCard .c-MaInterviewCard__read::after { content: " →"; color: var(--accent); }

/* Contact バンドは inner.css の共通コンポーネント .c-ContactBand に統合（旧 .c-MaContact* を廃止） */

@media (max-width: 880px) {
  .l-MaSplit, .l-MaSplit.l-MaSplit--reverse { grid-template-columns: 1fr; gap: 28px; }
  .l-MaSplit--story { grid-template-columns: 1fr; }
}

/* Story帯（Figma準拠・2カラム）: 「Story」見出し＝左カラム、interview-list(740px)＝右カラム。
   gap/align-items は base .l-MaSplit を継承（clamp(32,5vw,80) / start）。
   ★2カラムは desktop(≥881)限定。こうしないと base rule が上の @media(max-880) より source順で
   後にあるため ≤880 でも2カラムに化け、狭幅で右列が細りサブタイトル(ラベル)が過剰折返しになる不具合
   （1ab689b は 1fr 一律化で直したが 1440 を崩した＝今回 min-width スコープで両立）。≤880 は縦積み。
   list の max-width:740 は mobile 全幅時の画像肥大防止（desktop は右カラム幅がキャップ）。 */
@media (min-width: 881px) {
  .l-MaSplit--story {
    grid-template-columns: 1fr minmax(0, 740px);
  }
}
.l-MaSplit--story .l-MaInterviewList {
  max-width: 740px;
}