/* interview.css — M&Aインタビュー記事（News記事 / Figma 127:708・35:1599）
   構成: Hero(News 記事) → 記事カラム(幅917・左インデント x363)：
   全パーツ YuMincho・#000000。Figmaフォント情報（2026-07-05 反映）：
   #N社名ラベル(Demibold 20/30) / キャッチ(Demibold 36/52) / メイン写真(3:2) /
   氏名(Medium 20/30) / 肩書(Demibold 20/30) / リード(Demibold 20/30) /
   [小見出し(Demibold 24/30) + 本文(Demibold 20/30) + 写真(3:2)] の反復。
   命名リファクタ U3: iv-* を c-Interview__* へ規約化（共有 .c-PageHero/.c-PageHero__titleSub は U13/U14）。 */

/* Hero（M&A Story タイトル帯＝Figma Frame79 / node 635:1122・2026-07-05 更新反映）。
   背景(grey)・border は inner.css の .c-PageHero / .c-PageHero--alt を継承。
   padding のみ Frame79 の 40/40 に上書き（カテゴリトップの base 60/40 とは意図的に異なる＝M&A記事3ページ限定）。
   左右80pxは 1440フレーム内で中央1280帯(.l-Section__inner)により確保（標準帯方式）。
   帯高さ＝272px：内側 Frame4(VERTICAL・itemSpacing 20) の content 192 = パンくず28 + gap20 + Story96 + gap20 + 記事28。
   タイトル「Story」は .c-PageHero__titleMincho（YuMincho 500 / 96 / lh1.0）＝Figma と既に一致ゆえ据置。 */
.c-PageHero.c-PageHero--alt {
  padding: 40px 0;
}
/* パンくずの Figma 書式（YuMincho 500 / 16 / lh28 / #000 / gap20）は inner.css の base
   .c-Breadcrumb に一本化（全ページ共通）＝ここでの再定義は削除。サブ「記事」だけ interview 固有で残す。 */
.c-PageHero__titleSub {
  margin: 20px 0 0;
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink);
}

/* 記事カラム：Figma＝x363 / 幅917 / 右160（1440基準）。3カラムgridで比率維持、
   狭幅では左右マージンが24pxまで縮む。 */
.c-Interview__article {
  display: grid;
  grid-template-columns: minmax(24px, 363fr) minmax(0, 917fr) minmax(24px, 160fr);
  max-width: 1440px;
  margin: 0 auto;
}
.c-Interview__articleCol {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--ink);
}

.c-Interview__label {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5; /* 30px */
}
.c-Interview__catch {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 36px;
  font-weight: 600;
  line-height: 52px;
}
.c-Interview__figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 917 / 611;
  overflow: hidden;
  background: var(--paper-alt);
}
.c-Interview__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

.c-Interview__name {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.c-Interview__role {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5; /* 30px */
}
.c-Interview__lede {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5; /* 30px */
}
.c-Interview__heading {
  margin: 14px 0 0;
  font-family: var(--font-mincho);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}
.c-Interview__body {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5; /* 30px */
}
.c-Interview__body p { margin: 0 0 1.5em; }
.c-Interview__body p:last-child { margin-bottom: 0; }

/* 2026-07-07 デザイナー指定: interview.css は @media を持たず desktop固定サイズが mobile に出て、
   特に catch(36px/lh52px) が過大だった。狭幅(≤767px)用にタイポを縮小（本文はCompany最小の16pxへ）。
   px指定の line-height(catch/heading)も併せて上書き。スコープ＝M&A/news interview 3ページのみ。 */
/* 2026-07-07 デザイナー指定（スペース削除）: 記事グリッド 363fr/917fr/160fr は Figma desktop の
   オフセット配置で、狭幅(≤880px)では左が過大な空白(390pxで98px)になり本文が右に圧迫される。
   mobileでは単一カラム全幅化し左右は24pxに統一。スコープ＝M&A/news interview 3ページのみ。 */
@media (max-width: 880px) {
  .c-Interview__article { grid-template-columns: 1fr; padding-inline: 24px; }
  .c-Interview__articleCol { grid-column: 1; }
}
@media (max-width: 767px) {
  .c-Interview__catch { font-size: 26px; line-height: 1.4; }
  .c-Interview__heading { font-size: 20px; line-height: 1.4; }
  .c-Interview__name { font-size: 18px; }
  .c-Interview__label { font-size: 16px; }
  .c-Interview__role { font-size: 14px; }
  .c-Interview__lede { font-size: 16px; }
  .c-Interview__body { font-size: 16px; }
}