/* section.css — セクション共通シェル＋見出し（Figma: Section 2008:9700 ほか）
   実値: 青地 padding 144px 0 120px / 透かし英字 200px opacity 0.14
         見出し 32px Bold 白 + 下バー 60x6 / 内側 max-width 1200px gap 64px */

.section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-144) 0 var(--space-120);
  background: var(--color-primary);
  overflow: hidden;
}

/* 下矢印（::after）をはみ出させるため、矢印付きはクリップしない */
.section--arrow {
  overflow: visible;
}

.section__watermark {
  position: absolute;
  top: 1.1875rem;
  left: max(2.5rem, calc(50% - 42.5rem)); /* 1440pxで左40px。1440px超は中央基準で追従 */
  margin: 0;
  font-size: var(--font-size-watermark);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-wider);
  white-space: nowrap;
  background: var(--gradient-white-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.14;
  text-shadow: var(--shadow-watermark);
  pointer-events: none;
}

.section__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
  max-width: var(--layout-max);
}

/* セクション下端の吹き出し矢印（Figma: Border 1976:9370）。
   wall.css の .wall__notch と同じ三角形（120x40）・同じ置き方。
   ⚠ 起点は top:100%。bottom:-<高さ> だと、ボーダー幅が丸められた時に
     指定値と実寸がズレて隙間になる（SP実測 0.4px）ため使わない。 */
.section--arrow::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 3.75rem solid transparent;
  border-right: 3.75rem solid transparent;
  border-top: 2.5rem solid var(--color-primary);
  z-index: 1;
}

/* 角丸フロート型セクション（Figma: Value 2008:9743。上下120px・角丸40px）
   左右paddingは0：内側は section__inner の max-width: var(--layout-max) +
   中央寄せで他セクションのコンテンツ列と揃える */
.section--rounded {
  padding: var(--space-120) 0;
  border-radius: var(--radius-xl);
}

/* 透かし英字を中央寄せするバリアント（Value等） */
.section__watermark--center {
  top: .875rem;
  left: 50%;
  transform: translateX(-50%);
}

/* セクション見出し（白・中央 + 下線バー） */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.section-heading__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-heading);
  text-align: center;
}

.section-heading__bar {
  display: block;
  width: 3.75rem;
  height: .375rem;
  background: var(--color-white);
}

/* 左バー付きラベル見出し（Figma: 8px青ボーダー + pl 32px。Service/Company等） */
.heading-label {
  margin: 0;
  border-left: .5rem solid var(--color-primary);
  padding-left: var(--space-32);
  color: var(--color-black);
  font-size: var(--font-size-h3-lg);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

/* ライト背景用バリアント（黒文字 + 青バー。TRUSTED BY等） */
.section-heading--dark .section-heading__title {
  color: var(--color-black);
}
.section-heading--dark .section-heading__bar {
  background: var(--color-primary);
}
.section-heading--dark .section-heading__lead {
  color: var(--color-black);
}

/* ライト背景・黒バーのバリアント（掲載メディア等） */
.section-heading--ink .section-heading__title {
  color: var(--color-black);
}
.section-heading--ink .section-heading__bar {
  background: var(--color-black);
}
.section-heading--ink .section-heading__lead {
  color: var(--color-black);
  font-size: var(--font-size-h3);
  letter-spacing: normal;
}

/* 見出しの強調バリアント（Value: Black 900・字間10%） */
.section-heading__title--black {
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-widest);
}

/* 見出し下のリード文（Figma: 2008:9829 18.29px SemiBold 白） */
.section-heading__lead {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-widest);
  text-align: center;
}

/* --- SP ---------------------------------------------------------------- */
@media (max-width: 767px) {
  .section {
    padding: var(--space-48) 0 var(--space-48);
  }
  .section__watermark {
    font-size: var(--font-size-en-title);
    left: 50%;
    transform: translateX(-50%);
  }
  .section__watermark--center {
    left: 50%;
  }
  .section--rounded {
    padding: var(--space-48) 0 var(--space-40);
    border-radius: 0;
  }
  .section__inner {
    gap: var(--space-40);
    padding-inline: var(--space-24);
  }
  .section--arrow::after {
    border-left-width: 2.5rem;
    border-right-width: 2.5rem;
    border-top-width: 1.75rem;
  }
  .heading-label {
    font-size: var(--font-size-h4);
    padding-left: var(--space-16);
  }
}