/* heading.css — セクション見出し（左に7pxの帯）
   Figma: タイトル1 1879:13673 / タイトル2 1880:13678（32px: 1919:51233・42.667px: 1919:51235）/ タイトル3 1916:51308
   Figma の帯（線）は幅に含まれないため、padding-left は 40px − 7px にして文字位置を一致させる */

.heading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  margin: 0;
  padding-left: calc(var(--space-40) - var(--border-width-7));
  border-left: var(--border-width-7) solid var(--color-black);
  color: var(--color-black);
}

.heading__label {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* タイトル1：日本語ラベル＋英語（Black 56px）*/
.heading__en {
  margin: 0;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
}

/* タイトル2：タイトルのみ（25.6px / 32px / 42.667px）*/
.heading__title {
  margin: 0;
  font-size: var(--font-size-h2-lead);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  word-break: break-word;
}

/* 出現時：帯が上から伸びてから文字がフェードイン（JS 有効時のみ）*/
.js .heading[data-reveal] {
  border-left-color: transparent;
  transform: none;
  opacity: 1;
}

.js .heading[data-reveal]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--border-width-7));
  width: var(--border-width-7);
  background: var(--color-black);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--duration-reveal) var(--ease-out);
}

.js .heading[data-reveal] > * {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition:
    opacity var(--duration-reveal) var(--ease-out) calc(var(--duration-reveal) / 2),
    transform var(--duration-reveal) var(--ease-out) calc(var(--duration-reveal) / 2);
}

.js .heading[data-reveal].is-visible::before {
  transform: scaleY(1);
}

.js .heading[data-reveal].is-visible > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .heading[data-reveal] { border-left-color: var(--color-black); }
  .js .heading[data-reveal]::before { display: none; }
  .js .heading[data-reveal] > * { opacity: 1; transform: none; transition: none; }
}

.heading--lg .heading__title { font-size: var(--font-size-h2); }
.heading--xl .heading__title { font-size: var(--font-size-h1); }

/* タイトル3：ラベル＋タイトル（32px）。項目間は16px */
.heading--labeled {
  gap: var(--space-16);
}

.heading--labeled .heading__title {
  font-size: var(--font-size-h2);
}

/* ラベル＋タイトル 42.667px（私たちについて「私たちの理念」）Figma: 1916:51309 */
.heading--labeled.heading--xl .heading__title {
  font-size: var(--font-size-h1);
}

/* SP だけの改行位置 */
.heading__br-sp {
  display: none;
}

/* SP：帯から文字までを狭める（文字位置 40px → 24px。SPデザイン未支給のため仮値）*/
@media (max-width: 767px) {
  .heading {
    gap: var(--space-4);
    padding-left: calc(var(--space-24) - var(--border-width-7));
  }

  .heading--labeled {
    gap: var(--space-8);
  }

  .heading__br-sp {
    display: inline;
  }

  /* タイトルはタイプスケールを1段階ずつ下げる（SPデザイン未支給のため仮値）*/
  .heading__title { font-size: var(--font-size-h3-lg); }
  .heading--lg .heading__title,
  .heading--labeled .heading__title { font-size: var(--font-size-h2-lead); }
  .heading--xl .heading__title,
  .heading--labeled.heading--xl .heading__title { font-size: var(--font-size-h2); }
}