/* Only the four service figures use this font and these rules.
   Palette, labels, heavy strokes and desktop geometry follow the supplied PNGs. */
@font-face {
  font-family: "HDP Diagram JP";
  src: url("../fonts/hdp-diagram-jp-black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

#wrapper .hdp-diagram {
  container-type: inline-size;
  width: 100%; max-width: 915px; margin: 0 auto;
  font-family: "HDP Diagram JP", "Noto Sans JP", sans-serif;
  font-size: 24px; font-weight: 900; line-height: 1.25;
  color: #595959; text-align: center; letter-spacing: 0;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
#wrapper .hdp-diagram *, #wrapper .hdp-diagram *::before, #wrapper .hdp-diagram *::after { box-sizing: border-box; }
#wrapper .hdp-diagram figcaption { margin: 0; padding: 0; font-weight: 900; }
#wrapper .hdp-diagram strong { font-weight: 900; }
#wrapper .hdp-diagram ul, #wrapper .hdp-diagram li { margin: 0; padding: 0; list-style: none; }
#wrapper .hdp-diagram-canvas { position: relative; isolation: isolate; }
#wrapper .hdp-diagram-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: -1; }
#wrapper .hdp-diagram-lines path { fill: none; stroke: #bfbfbf; stroke-linejoin: miter; }
#wrapper .hdp-diagram-lines .hdp-diagram-arrow { fill: #bfbfbf; stroke: none; }
#wrapper .hdp-diagram-narrow { display: none; }
#wrapper .hdp-diagram .hdp-break-sp, #wrapper .hdp-diagram .hdp-break-small { display: none; }
#wrapper .hdp-diagram-node { position: absolute; display: flex; align-items: center; justify-content: center; }
#wrapper .hdp-diagram-logo { display: flex; align-items: center; justify-content: center; }
#wrapper .hdp-diagram .hdp-diagram-logo img { display: block; width: 70%; height: auto; max-width: 100%; }

/* Construction management: the original triangle and its three participants. */
#wrapper .hdp-cm figcaption { color: #193f61; font-size: 2.65cqw; line-height: 1.2; margin-bottom: 1.15cqw; }
#wrapper .hdp-cm figcaption > span { display: inline-block; }
#wrapper .hdp-cm .hdp-diagram-canvas { aspect-ratio: 1635 / 775; }
#wrapper .hdp-cm .hdp-diagram-lines path { stroke-width: 42; }
#wrapper .hdp-cm .hdp-diagram-node { border: .67cqw solid; background: #f2f2f2; font-size: 2.65cqw; }
#wrapper .hdp-cm-quality { left: 41.35%; top: 1.29%; width: 16.94%; height: 24.52%; flex-direction: column; gap: .75cqw; color: #ed7d31; }
#wrapper .hdp-cm-quality > span { color: #595959; font-size: 1.95cqw; letter-spacing: .22em; padding-left: .22em; }
#wrapper .hdp-cm-cost { left: 15.9%; top: 38.06%; width: 22.94%; height: 26.32%; color: #44a9c4; }
#wrapper .hdp-cm-logo { position: absolute; left: 42.51%; top: 37.29%; width: 14.44%; height: 30.19%; }
#wrapper .hdp-cm-logo .hdp-diagram-logo { width: 100%; height: 100%; background: #4472c4; }
#wrapper .hdp-cm-schedule { left: 60.55%; top: 38.06%; width: 22.87%; height: 26.32%; color: #7030a0; }
#wrapper .hdp-cm .hdp-cm-owner { left: 0; top: 75.23%; width: 17.55%; height: 24.77%; background: #193f61; border-color: #193f61; color: #fff; }
#wrapper .hdp-cm-meeting { left: 34.74%; top: 73.68%; width: 29.24%; height: 26.32%; flex-direction: column; gap: .65cqw; color: #4472c4; }
#wrapper .hdp-cm-meeting > span { color: #595959; font-size: 1.85cqw; white-space: nowrap; }
#wrapper .hdp-cm .hdp-cm-contractor { left: 83.3%; top: 76.65%; width: 16.7%; height: 23.35%; background: #ed7d31; border-color: #ed7d31; color: #fff; }

/* Due diligence: preserve the two blue fields, white bars and broad chevron. */
#wrapper .hdp-dd { max-width: 727px; }
#wrapper .hdp-dd figcaption { font-size: 4.5cqw; line-height: 1.2; margin-bottom: 3.6cqw; white-space: nowrap; }
#wrapper .hdp-dd-evaluation { position: relative; padding: 1.9cqw 10.2cqw 1.7cqw; background: #567fc9; }
#wrapper .hdp-dd-evaluation::after { position: absolute; content: ""; left: 0; right: 0; top: calc(100% - 1px); height: 4.9cqw; background: #457ac9; clip-path: polygon(0 0, 100% 0, 50% 100%); }
#wrapper .hdp-dd .hdp-diagram-logo { width: 13.5cqw; height: 9.2cqw; margin: 0 auto 2.1cqw; }
#wrapper .hdp-dd .hdp-diagram-logo img { width: 100%; }
#wrapper .hdp-dd-items { display: grid; gap: 2.4cqw; }
#wrapper .hdp-dd-items li { display: flex; align-items: center; justify-content: center; min-height: 6.7cqw; border-radius: 1.5cqw; background: #fff; box-shadow: -.9cqw -.8cqw 0 #d9d9d9; font-size: 4.45cqw; line-height: 1.15; padding: .35cqw .7cqw; }
#wrapper .hdp-dd-solution { padding: 7.15cqw 10.2cqw 2cqw; background: #50c3f3; }
#wrapper .hdp-dd-solution li { box-shadow: -.9cqw -.8cqw 0 #bfbfbf; }

/* Value-up design: the original three colours and triangular relationship. */
#wrapper .hdp-value figcaption { font-size: 3.7cqw; line-height: 1; }
#wrapper .hdp-value .hdp-diagram-canvas { aspect-ratio: 1894 / 823; }
#wrapper .hdp-value .hdp-diagram-lines path { stroke-width: 52; }
#wrapper .hdp-value-card { position: absolute; width: 30.1%; height: 36.82%; border: .74cqw solid var(--hdp-node-color); border-radius: 3.2cqw; overflow: hidden; background: var(--hdp-node-color); display: flex; flex-direction: column; font-size: 2.85cqw; }
#wrapper .hdp-value-card > strong { display: flex; align-items: center; justify-content: center; flex: 0 0 37%; background: var(--hdp-node-color); color: #fff; }
#wrapper .hdp-value-card > span { display: flex; align-items: center; justify-content: center; flex: 1; background: #fff; }
#wrapper .hdp-value-plan { --hdp-node-color: #4472c4; top: 0; left: 0; }
#wrapper .hdp-value-design { --hdp-node-color: #ff4e79; top: 0; right: 0; }
#wrapper .hdp-value-build { --hdp-node-color: #ed7d31; top: 63.06%; left: 34.95%; }
#wrapper .hdp-value-team { position: absolute; top: 23.8%; left: 30%; width: 40%; font-size: 2.65cqw; line-height: 1.2; }
#wrapper .hdp-value-team ul { width: max-content; max-width: 100%; margin: .5cqw auto 0; padding-left: 1em; text-align: left; font-family: "Arial Black", "HDP Diagram JP", sans-serif; font-size: 2.45cqw; line-height: 1.05; }
#wrapper .hdp-value-team li { list-style: disc; }

/* Energy: matching stakeholder colours, core outline and upward support arrow. */
#wrapper .hdp-energy .hdp-diagram-canvas { aspect-ratio: 1485 / 864; }
#wrapper .hdp-energy .hdp-diagram-lines path { stroke-width: 43; }
#wrapper .hdp-energy .hdp-diagram-node { border: .74cqw solid; background: #f5f5f5; font-size: 2.96cqw; line-height: 1.2; }
#wrapper .hdp-energy .hdp-energy-developer { left: 22.76%; top: 0; width: 54.95%; height: 20.72%; border-color: #4472c4; background: #4472c4; color: #fff; font-size: 3.5cqw; }
#wrapper .hdp-energy-adviser { left: 0; top: 35.76%; width: 21.62%; height: 25.69%; color: #ed7d31; }
#wrapper .hdp-energy-expert { right: 0; top: 35.76%; width: 21.62%; height: 25.69%; color: #ff4e79; }
#wrapper .hdp-energy-core { position: absolute; left: 28.28%; top: 34.95%; width: 42.42%; height: 43.06%; border: 1cqw solid #2e75b6; border-radius: 4.7cqw; background: #d0eeed; color: #2f5597; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; font-size: 3.05cqw; line-height: 1.15; }
#wrapper .hdp-energy-core .hdp-diagram-logo { width: 30.4%; aspect-ratio: 182 / 172; background: #4789c2; border: .2cqw solid #295e7d; }
#wrapper .hdp-energy-government { left: 0; top: 74.42%; width: 21.62%; height: 25.58%; color: #213864; }
#wrapper .hdp-energy-stakeholder { right: 0; top: 74.42%; width: 21.62%; height: 25.58%; color: #7030a0; }
#wrapper .hdp-energy-action { position: absolute; top: 81.3%; left: 25%; width: 50%; font-size: 2.96cqw; }
#wrapper .hdp-energy-coexistence { position: absolute; top: 93.7%; left: 23%; width: 54%; font-size: 2.8cqw; }

/* Mobile: same words, colours and heavy lines, with taller canvases and rerouted
   connections so text does not shrink with the original landscape PNG. */
@media screen and (max-width: 767px) {
  #wrapper .hdp-diagram { width: calc(100% - 32px); max-width: 520px; font-size: 18px; }
  #wrapper .hdp-diagram-wide { display: none; }
  #wrapper .hdp-diagram-narrow { display: block; }
  #wrapper .hdp-diagram .hdp-break-sp { display: initial; }
  #wrapper .hdp-diagram .hdp-diagram-lines path { stroke-width: 10px; vector-effect: non-scaling-stroke; }
  #wrapper .hdp-diagram .hdp-diagram-lines .hdp-diagram-arrow { stroke: none; }
  #wrapper .hdp-cm figcaption { font-size: clamp(17px, 5cqw, 23px); line-height: 1.45; margin-bottom: 22px; }
  #wrapper .hdp-cm .hdp-diagram-canvas { height: 710px; aspect-ratio: auto; }
  #wrapper .hdp-cm .hdp-diagram-node { border-width: 5px; font-size: clamp(16px, 4.9cqw, 22px); padding: 8px 3px; }
  #wrapper .hdp-cm-quality { left: 23%; top: 10px; width: 54%; height: 126px; gap: 10px; }
  #wrapper .hdp-cm-quality > span { font-size: 15px; }
  #wrapper .hdp-cm-cost { left: 0; top: 315px; width: 45%; height: 96px; }
  #wrapper .hdp-cm-logo { left: 50%; top: 186px; width: 84px; height: 84px; transform: translateX(-50%); }
  #wrapper .hdp-cm-schedule { left: auto; right: 0; top: 315px; width: 45%; height: 96px; }
  #wrapper .hdp-cm .hdp-cm-owner { left: 0; top: 477px; width: 37.78%; height: 76px; font-size: clamp(16px, 4.9cqw, 22px); }
  #wrapper .hdp-cm-meeting { left: 16%; top: 601px; width: 68%; height: 109px; gap: 10px; }
  #wrapper .hdp-cm-meeting > span { font-size: 14px; white-space: normal; line-height: 1.5; max-width: 94%; }
  #wrapper .hdp-cm-contract-owner, #wrapper .hdp-cm-contracts { display: block; }
  #wrapper .hdp-cm .hdp-cm-contractor { left: auto; right: 0; top: 477px; width: 37.78%; height: 76px; font-size: clamp(16px, 4.9cqw, 22px); }

  #wrapper .hdp-dd figcaption { font-size: clamp(17px, 5.1cqw, 23px); line-height: 1.45; margin-bottom: 28px; white-space: normal; }
  #wrapper .hdp-dd figcaption > span { display: inline-block; }
  #wrapper .hdp-dd-evaluation { padding: 20px 18px 18px; }
  #wrapper .hdp-dd .hdp-diagram-logo { width: 72px; height: 56px; margin-bottom: 24px; }
  #wrapper .hdp-dd-evaluation::after { height: 30px; }
  #wrapper .hdp-dd-items { gap: 20px; }
  #wrapper .hdp-dd-items li { min-height: 64px; padding: 12px 6px; font-size: clamp(16px, 4.8cqw, 22px); line-height: 1.4; border-radius: 9px; box-shadow: -5px -5px 0 #d9d9d9; }
  #wrapper .hdp-dd-solution { padding: 48px 18px 20px; }
  #wrapper .hdp-dd-solution li { box-shadow: -5px -5px 0 #bfbfbf; }

  #wrapper .hdp-value figcaption { font-size: clamp(23px, 7.2cqw, 32px); line-height: 1.3; margin-bottom: 24px; }
  #wrapper .hdp-value .hdp-diagram-canvas { height: 650px; aspect-ratio: auto; }
  #wrapper .hdp-value-card { width: 46%; height: 174px; border-width: 5px; border-radius: 24px; font-size: clamp(15px, 4.45cqw, 21px); line-height: 1.4; }
  #wrapper .hdp-value-card > strong { flex-basis: 35%; font-size: clamp(16px, 4.8cqw, 22px); }
  #wrapper .hdp-value-card > span { padding: 8px 5px; }
  #wrapper .hdp-value-plan, #wrapper .hdp-value-design { top: 10px; }
  #wrapper .hdp-value-team { top: 256px; left: 8%; width: 84%; font-size: clamp(16px, 4.6cqw, 21px); line-height: 1.4; }
  #wrapper .hdp-value-team ul { margin-top: 12px; font-size: clamp(18px, 5cqw, 23px); line-height: 1.2; }
  #wrapper .hdp-value-build { top: 476px; left: 16%; width: 68%; }

  #wrapper .hdp-energy .hdp-diagram-canvas { height: 835px; aspect-ratio: auto; }
  #wrapper .hdp-energy .hdp-diagram-node { border-width: 5px; font-size: clamp(17px, 5cqw, 23px); padding: 7px 3px; }
  #wrapper .hdp-energy .hdp-energy-developer { left: 14%; top: 0; width: 72%; height: 84px; font-size: clamp(23px, 6.6cqw, 30px); }
  #wrapper .hdp-energy-adviser { left: 0; top: 160px; width: 46%; height: 88px; }
  #wrapper .hdp-energy-expert { right: 0; top: 160px; width: 46%; height: 88px; }
  #wrapper .hdp-energy-core { left: 9%; top: 320px; width: 82%; height: 230px; border-width: 7px; border-radius: 34px; font-size: clamp(18px, 5.45cqw, 25px); }
  #wrapper .hdp-energy-core .hdp-diagram-logo { width: 80px; height: 76px; border-width: 2px; }
  #wrapper .hdp-energy-government { left: 0; top: 658px; width: 40%; height: 92px; }
  #wrapper .hdp-energy-stakeholder { right: 0; top: 658px; width: 46%; height: 92px; }
  #wrapper .hdp-energy-action { left: 10%; top: 584px; width: 80%; font-size: clamp(19px, 5.5cqw, 25px); }
  #wrapper .hdp-energy-coexistence { left: 0; top: 794px; width: 100%; font-size: clamp(17px, 5cqw, 23px); }
}
@media screen and (max-width: 359px) {
  #wrapper .hdp-diagram .hdp-break-small { display: initial; }
}