/* Power Platform 業務DX支援ページ専用スタイル。
   縦余白(.fdb-block)・見出し(.topSub h2)・ボタン(.btn__contact)は既存style.cssを利用し、
   ここではセクション内の横並び・ラベル等の最小限のみ定義する */

/* 本文リード（Figma Dev Mode確定値: 18px太字/行28px。イントロ・CTAで2箇所とも一致=意図的） */
.pp-lead {
  font-size: 18px;
  font-weight: bold;
  line-height: 28px;
  letter-spacing: 0.075em;
  color: #000;
  margin-bottom: 60px;
}
/* 小リード（Figma確定値: 13px太字/行26px。強み・プロセスのh2下で2箇所とも一致=意図的。
   margin値自体は指示によりFigma確定値=26pxから上書き） */
.pp-lead-sm {
  font-size: 13px;
  font-weight: bold;
  line-height: 26px;
  color: #000;
  margin-top: 40px;
  margin-bottom: 42px;
}

/* ボタン2つの横並び（Figma: 345×48px・間隔50px・文字16px太字白。モバイルは縦積み） */
.pp-btns {
  --btn-gap: 50px;
  display: flex;
  justify-content: center;
  gap: var(--btn-gap);
  flex-wrap: wrap;
}
.pp-btns .btn__contact {
  margin: 0;
  width: 100%;
  max-width: 345px;
}
.pp-btns .btn__contact a {
  font-size: 16px;
}
/* 2つ目のボタン（資料DL）は既存サイトの青 */
.pp-btns .btn__contact--blue {
  background-color: #004098;
}
/* SP: 2ボタンの縦間隔を半分に（PCは--btn-gapのまま） */
@media screen and (max-width: 767px) {
  .pp-btns {
    row-gap: calc(var(--btn-gap) / 2);
  }
}

/* 課題セクション＝グレー(#F2F2F2)の吹き出し。下端に下向き三角の尻尾を付ける。
   .fdb-block は overflow:hidden なので、この節だけ visible に上書きして尻尾を出す */
.pp-sec-gray {
  position: relative;
  z-index: 1; /* 次のセクション(白背景)より手前に描画し、はみ出す三角の尻尾を隠さないため */
  overflow: visible;
  background-color: #f2f2f2;
}
.pp-sec-gray::after {
  content: '';
  position: absolute;
  /* 三角(高さ61px)の大部分はグレー箱の中に埋め込まれ、先端の約20.8pxだけが下に飛び出す
     （Figma実測: Rectangle49下端とPolygon2先端の差=20.8px。61-20.8≒40pxだけ箱側にずらす） */
  top: calc(100% - 40px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  /* Figma "Polygon 2" の実SVGパス(viewBox 128.78×60.77)から採寸。
     旧148×60はバウンディングボックスの外接矩形と実形状を混同していた誤り */
  border-width: 61px 64px 0 64px;
  border-color: #f2f2f2 transparent transparent transparent;
}
/* 吹き出し内の内容幅だけ整える（枠・塗りは持たせない） */
.pp-bubble {
  max-width: 1180px;
  margin: 0 auto;
}

/* 課題セクション見出し（“…”付き・中央・24px） */
.pp-check {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.075em;
  text-align: center;
  color: #000;
  margin-bottom: 60px;
}

/* 課題カード（枠線なし・丸アイコン。行間隔はFigmaの40px）。
   アイコン列・テキスト列とも幅を固定し、justify-content:space-betweenで
   両端に配置することで、テキストの長さに関わらずアイコン位置と隙間を6件で統一する。
   3つの寸法をカスタムプロパティにして関係をコードで保証する（テキスト幅=全体-アイコン-隙間）。
   合計: 70px + 16px + 226px = 312px */
.pp-challenge {
  --icon-size: 70px;
  --icon-gap: 16px;
  --body-width: 226px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--icon-size) + var(--icon-gap) + var(--body-width));
  margin: 0 auto 40px;
}
/* 70pxの円(span)にアイコン(34〜40px、Figma実寸)を中央配置。アイコン自体は引き伸ばさない */
.pp-challenge-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  background-color: #8d8d8d;
}
.pp-challenge-body {
  width: var(--body-width);
}
.pp-challenge-title {
  color: #000;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0.3em;
}
/* Figma確定値: タイトル+説明とも太字（6件全てで一貫、指示揺れではなく意図的） */
.pp-challenge p {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.6;
  margin: 0;
  color: #000;
}

/* ソリューション見出し（インラインロゴ・24px） */
.pp-solution-copy {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.075em;
}
.pp-solution-copy img {
  height: calc(60px * 0.95); /* 95%に縮小 */
  width: auto;
  vertical-align: middle;
  margin: 0 0.2em;
}
/* 右カラムの説明文（Figma: 太字15px/25px） */
.pp-solution-lead {
  font-weight: bold;
  font-size: 15px;
  line-height: 25px;
}

/* 2カラムの列間を通常のBootstrapガター(30px)より広め(約40px)にする。
   コンポーネント一覧・支援プロセスの2箇所で使用（どちらも .col-12.col-md-6 を実際に使用） */
.pp-2col > .col-12.col-md-6 {
  padding-left: 20px;
  padding-right: 20px;
}

/* コンポーネント一覧 */
.pp-comp {
  display: flex;
}
.pp-comp img {
  flex-shrink: 0;
  margin-right: 16px;
  max-height: 50px;
}
/* Figma確定値: 名前=太字15px／役割(括弧書き)=通常13px／説明=通常13px行24px。
   6件中5件がこの分割パターンで一致（Power BIのみ一括太字だったため多数派に正規化） */
.pp-comp-name {
  font-weight: bold;
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 0;
}
.pp-comp-role {
  font-weight: normal;
  font-size: 13px;
}
.pp-comp-desc {
  font-size: 13px;
  line-height: 24px;
  margin: 0;
}

/* [セクション上部パディング上書き] 既定70px（style.cssの.fdb-block）→ 0（指示により） */
.pp-sec-usecase.fdb-block {
  padding-top: 0;
}
/* 2つ目のカテゴリ群（自動化・アプリ化）の上マージンを1つ目(.mt-5=48px)より詰める */
.pp-uc-group-2 {
  margin-top: 20px;
}
.pp-uc-cat {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #000;
  margin-bottom: 16px;
}
.pp-uc-case {
  margin-bottom: 0;
}
.pp-uc-title {
  color: #6e1e82;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0.5em;
}
/* [style.css既定への対抗策] style.cssの `.fdb-block img + p { margin-top: 20px }`
   (画像直後のpに効く汎用ルール)に、詳細度2クラスで勝って0に上書きする */
.pp-uc-case .pp-uc-title {
  margin-top: 0;
}
.pp-uc-row {
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
}
.pp-uc-row p {
  font-size: 13px;
  line-height: 18px;
  margin: 0;
  color: #000;
}
/* Before=グレー / After=紫、47×35px・文字は太さ400・10px（Figma） */
.pp-label {
  flex-shrink: 0;
  width: 47px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  padding: 0;
  margin-right: 10px;
}
/* 写真は10pxの薄グレーフレーム付き（Figma: 338×190の#F2F2F2に318×170の画像） */
.pp-uc-img {
  padding: 10px;
  background-color: #f2f2f2;
}
.pp-label--before {
  background: #c1c1c1;
}
.pp-label--after {
  background: #6e1e82;
}
.pp-uc-after {
  color: #6e1e82;
  font-weight: bold;
}
/* 使用製品の注記（カード下・グレー #7E7E7E・10px） */
.pp-uc-note {
  margin-top: 0.8em;
  font-size: 10px;
  color: #7e7e7e;
}

/* [セクション上部パディング上書き] 既定70px（style.cssの.fdb-block）→ 35px（半分） */
.pp-sec-strengths.fdb-block {
  padding-top: 35px;
}
/* VXアクトの強み（Figma: タイトル16px紫/サブ14px/本文13px 行24px）。
   タイトル・サブは行数差があっても本文の開始位置が3カードで揃うよう
   line-heightから導いたmin-height（2行分）を確保する。
   本文（最後のp）は「あと何行になるか」を予想できないため、
   min-heightで行数を仮定するのではなく、.pp-strengthをflex化してflex-growで
   残り高さを本文に吸収させ、カード全体の高さを揃える（内容が増減しても崩れない） */
.pp-strength {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pp-strength-title {
  --line-h: 24px;
  color: #6e1e82;
  font-weight: bold;
  font-size: 16px;
  line-height: var(--line-h);
  margin-bottom: 10px;
}
.pp-strength-sub {
  --line-h: 22px;
  font-weight: bold;
  font-size: 14px;
  line-height: var(--line-h);
  margin-bottom: 2px;
}
/* [style.css既定への対抗策] style.cssの `.fdb-block img + p { margin-top: 20px }`
   (画像直後のpに効く汎用ルール)に、詳細度2クラスで勝って8pxに縮める。
   具体的な活用イメージ節と同程度の詰まったバランスにする指示 */
.pp-strength .pp-strength-sub {
  margin-top: 8px;
}
.pp-strength p:last-child {
  font-size: 13px;
  line-height: 24px;
  margin: 0;
  flex-grow: 1; /* 残りの高さを吸収し、3カードの高さを揃える */
}

/* [セクション上部パディング上書き] 既定70px（style.cssの.fdb-block）→ 35px（半分） */
.pp-sec-process.fdb-block {
  padding-top: 35px;
}
/* 支援プロセス（Figma: 60pxアイコン左＋タイトル・本文一体で右。タイトル=太字、本文=通常） */
.pp-process {
  display: flex;
  align-items: center;
}
.pp-process-icon {
  flex-shrink: 0;
  width: calc(60px * 0.9); /* 90%に縮小 */
  height: calc(60px * 0.9);
  margin-right: 16px;
}
/* Figma確定値: タイトル=太字16px／役割(括弧書き)=通常13px（コンポーネント一覧と同じ分割パターン） */
.pp-process-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  margin: 0 0 0.3em;
}
.pp-process-role {
  font-weight: normal;
  font-size: 13px;
}
.pp-process-body {
  font-size: 13px;
  line-height: 24px;
  margin: 0;
}

/* [セクション上部パディング上書き] 既定70px（style.cssの.fdb-block）→ 48px */
.pp-sec-cta.fdb-block {
  padding-top: 48px;
}

p:has(wbr) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}