/* ==========================================================================
   heading.css — セクション見出し（Figma: title > Heading 1200×212）
   --------------------------------------------------------------------------
   構造：
   .ic-heading
     .ic-heading__row      （高さ120・下揃え・gap40・右padding80）
       .ic-heading__bg     （背景英字 136px 水色10%・絶対配置・上下中央）
       .ic-heading__en     （英字 72px Poppins Medium・メインblue）
       .ic-heading__ja     （和文 25.6px Bold #333）
     .ic-heading__lead     （リード 16px Medium #333・最大720）
   ========================================================================== */
.ic-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 100%;
  max-width: var(--container-width);
}
.ic-heading__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-16) var(--space-40);
  min-height: 7.5rem; /* 120px */
  padding-right: var(--space-80);
  overflow-x: clip;
}
/* SP 専用の背景英字（'bg' 引数指定時のみ出力）。PC は en 側だけを使う */
.ic-heading__bg--sp { display: none; }
.ic-heading__bg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-bg);
  line-height: var(--line-height-display-bg);
  color: var(--color-heading-bg-text);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.ic-heading__en {
  position: relative;
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-display-en);
  line-height: var(--line-height-display-en);
  color: var(--color-primary);
  white-space: nowrap;
}
.ic-heading__ja {
  position: relative;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2-lead);
  line-height: var(--line-height-body); /* 40.96px */
  color: var(--color-text-dark);
}
/* 「&」は一回り小さい（Figma Q&A：背景 100px／手前 60px）。
   親の英字サイズは SP で縮むため、px 相当の固定値ではなく親に対する比率で持つ
   （PC では 136px×0.7353=100px / 72px×0.8333=60px と Figma 実値に一致）。 */
.ic-heading__bg .ic-heading__amp { font-size: 0.7353em; }
.ic-heading__en .ic-heading__amp { font-size: 0.8333em; }
.ic-heading__lead {
  max-width: var(--width-lead);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-dark);
}
.ic-heading--lead-full .ic-heading__lead { max-width: none; }

/* 暗背景用（TOP Company）：全て白、背景英字は白15% */
.ic-heading--on-dark .ic-heading__bg { color: var(--color-heading-bg-text-on-dark); }
.ic-heading--on-dark .ic-heading__en,
.ic-heading--on-dark .ic-heading__ja,
.ic-heading--on-dark .ic-heading__lead { color: var(--color-white); }
.ic-heading--on-dark .ic-heading__ja { line-height: var(--line-height-none); }

/* 中央寄せバリエーション */
.ic-heading--center { align-items: center; text-align: center; }
.ic-heading--center .ic-heading__row { justify-content: center; padding-right: 0; }
.ic-heading--center .ic-heading__bg { left: 50%; transform: translate(-50%, -50%); }

/* モバイル（Figma未定義）：英字の下に和文を積み、見出し行は中央寄せ。背景英字は伏せる。
   PCは「英字＋背景英字＋和文」を横並びで重ねるが、SP幅では背景英字が英字と重なって
   可読性を落とし、右端で見切れるため非表示にする（装飾のみで情報は持たない）。
   ただし 'bg' 引数で SP 用の短い文字列が指定された見出しだけは、そちらを表示する。 */
@media (max-width: 767px) {
  .ic-heading { gap: var(--space-24); }
  .ic-heading__row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding-right: 0;
    min-height: 0;
    text-align: center;
  }
  .ic-heading__bg { display: none; }
  /* SP 用の背景英字が指定された見出しだけ、中央基準で表示する */
  .ic-heading__bg--sp {
    display: block;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-large);
    line-height: var(--line-height-display-bg);
  }
  /* 和文はタイプスケールで一段下げる（h2-lead 25.6px → h3-lg 21.33px 相当）*/
  .ic-heading__ja { font-size: var(--font-size-h3-lg); }
  /* 英字は行高＝文字サイズ（1）にして、和文との間のアキを gap だけで決める */
  .ic-heading__en { font-size: var(--font-size-h1); line-height: var(--line-height-none); white-space: normal; }
}

/* ==========================================================================
   .ic-section-head — 中央揃えの見出しブロック（Figma: Money Lab > SectionHead）
   ラベル（下線・字間0.16em）＋見出し48px＋リード
   ========================================================================== */
.ic-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  text-align: center;
}
.ic-section-head__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-primary);
}
.ic-section-head__label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-label);
  text-decoration: underline;
  text-underline-position: from-font;
}
.ic-section-head__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-hero);
}
.ic-section-head__lead {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  color: var(--color-text-dark);
}
@media (max-width: 767px) {
  .ic-section-head__title { font-size: var(--font-size-h2-lead); letter-spacing: var(--letter-spacing-widest); }
}