/* transformation.css — 変革セクション（Figma: Value 2019:8637 / TRANSFORMATION）
   実値: 青パネル 1376x630 右角丸なし・左角丸32（右端まで届く帯）
         タイトル 32px Bold 白 / 本文 18.29px Medium lh 1.5
         円図: 312px 円 border 16px 白 / 内円 199px #1561AB / ラベル 24px・48px */

.transformation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 上114px = Figma実値（本文ブロックの開始位置が書き出し実測と一致）。
     下は Figma の宣言値が120pxだが、フレーム高さ654pxから 上114 + 本文470 を引くと
     70pxしか残らず、宣言値と矛盾する（Figma側が固定高さで本文を溢れさせている）。
     描かれている見た目（654px）を正とし、実測70pxをグリッドに載せた72pxを採用。
     結果セクション高さは656pxで、Figmaとの差は2px。⚠要デザイン確認 */
  padding: var(--space-114) var(--space-120) var(--space-72);
  overflow: hidden;
}

/* 右端まで伸びる青帯（Figma: 2019:8778。左のみ角丸32） */
.transformation::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 4rem;
  right: 0;
  height: 39.375rem;
  border-radius: var(--radius-32) 0 0 var(--radius-32);
  background: var(--color-primary);
}

.transformation__watermark {
  position: absolute;
  top: 1.1875rem;
  left: max(7.5rem, calc(50% - 37.5rem)); /* 1440pxで左120px。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;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.14;
  pointer-events: none;
}

.transformation__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-80);
  width: 100%;
  max-width: var(--layout-max);
}

.transformation__body {
  display: flex;
  flex: 1;
  min-width: 0;
  max-width: 37.5rem;
  flex-direction: column;
  gap: var(--space-24);
  color: var(--color-white);
}

.transformation__title {
  margin: 0;
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

.transformation__text {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-widest);
}

/* --- 変革・改善の円図 ---
   Figmaのフレーム書き出し1枚（背景透過）。円・弧のグラデーション・重なり・矢印・
   円内文字までまとめて画像に含める。枠は Figma実値 560x300 とぴったり同じなので
   等倍で流し込むだけでよい。背景が透けるため、後ろの透かし英字は生のまま見える。 */
.transformation__figure {
  flex: 1;
  min-width: 0;
}

.transformation__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- SP: 本文→円図の縦積み ------------------------------------------------- */
@media (max-width: 767px) {
  .transformation {
    padding: var(--space-80) var(--space-24) var(--space-64);
  }
  /* SPはセクション全面を青帯にする（PCの右寄せ帯・左角丸は解除） */
  .transformation::before {
    inset: 0;
    height: auto;
    border-radius: 0;
  }
  .transformation__watermark {
    font-size: var(--font-size-en-title);
    left: var(--space-24);
  }
  .transformation__inner {
    flex-direction: column;
    gap: var(--space-40);
  }
  .transformation__body {
    max-width: 100%;
  }
  /* 円図は画像1枚なので幅いっぱいで比率縮小に任せる（円内文字も一緒に縮む） */
  .transformation__figure {
    width: 100%;
  }
}