@import url("./page-common.css");

/* ===== Hero: Figma widths (Frame 834px / body 911px, node 1:7798) ===== */
.p-hero__content {
  max-width: 990px;
}

/* 見出しが+2pxされたぶん「…実装支援」の末尾1文字が折り返すため、
   Figma の 834px から見出し行が入りきる幅まで広げている */
.p-hero__heading,
.p-hero__divider {
  max-width: 870px;
}

/* Figma title (node 1:7801) has NO letter-spacing; the shared 2px pushed the
   16-char title over the 834px box and forced a 2nd line. */
.p-hero__title {
  letter-spacing: normal;
}

.p-sus-target-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ===== OUR PROCESS: cyclical 4 steps figure ===== */
/* Figma S03_process 5:4661: pad60 / セクション内 gap20 */
.p-sus__process-section {
  background-color: var(--color-bg-card);
  padding-block: 60px;
}

.p-sus__process-section .p-section__header {
  margin-bottom: 20px;
}

/* Figma figure_esg 5:4666: 下余白18px（カード列は255px枠に250pxを中央配置） */
.p-sus__process-box {
  background-color: var(--color-bg);
  border-radius: 12px;
  padding: 28px 28px 18px;
  box-shadow: 0 4px 20px rgba(21, 40, 30, 0.06);
  margin-top: 20px;
}

/* Figma 5:4667: 24px / 高さ34px（AUTO行送り） */
.p-sus__process-box__title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  letter-spacing: 2px;
  line-height: 36px;
  margin-bottom: 18px;
}

/* Figma Frame 7974: 高さ20px の1行 */
.p-sus__process-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: var(--color-accent);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.p-sus__process-cycle img {
  display: block;
}

/* Figma Line 8 / Line 9: 223px・1px・#bd8f45 */
.p-sus__process-cycle::before,
.p-sus__process-cycle::after {
  content: "";
  flex: 0 1 223px;
  height: 1px;
  background-color: var(--color-accent);
  min-width: 40px;
}

.p-sus__step-cards {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 255px;
}

.p-sus__step-sep {
  align-self: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
}

/* Figma card_01〜04: 217.25×250 固定高・内容は上寄せ（下に余白が残る） */
.p-sus__step-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 250px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  /* 詳細の各項目が+2pxでも1行に収まるよう、Figma の左右14pxを詰めている */
  padding: 14px 8px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(25, 92, 61, 0.1);
}

/* Figma: 67×20 のピル（pad 4/12・テキスト高12px） */
.p-sus__step-card__badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: var(--color-primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  color: #ffffff;
  letter-spacing: 1.2px;
}

.p-sus__step-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 24px;
  min-height: 44px;
}

/* Figma: 189.25×108 固定（STEP01のみ101）。行送り18pxで5行=90px */
.p-sus__step-card__detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: none;
  width: 100%;
  height: 108px;
  background-color: var(--color-bg-alt);
  border-radius: 6px;
  padding: 10px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 20px;
  text-align: left;
}

/* Figma 5:4679: STEP01だけ Regular・行送り15px・#000（6行=90px / 箱101px） */
.p-sus__step-card:first-child .p-sus__step-card__detail {
  height: 101px;
  padding: 5px 2px;
  font-weight: 400;
  color: #000000;
  line-height: 17px;
}

/* Figma Line 24: M0 0 L5 4 L10 0 / 2px #195c3d（実寸 11.25×6.06） */
.p-sus__step-card__arrow {
  display: block;
  width: 11.25px;
  height: 6.06px;
}

.p-sus__step-card__arrow img {
  display: block;
  width: 100%;
  height: 100%;
}

/* STEP03/04 の長い項目を1行に収める */
.p-sus__step-card__detail-item--oneline-sp {
  white-space: nowrap;
}

/* ===== STEP body text with gold highlight ===== */
.p-sus__body {
  margin-bottom: 30px;
}

.p-sus__body p {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 32px;
  letter-spacing: 0.14px;
}

.p-sus__body p + p {
  margin-top: 12px;
}

/* Figma Rectangle 45/46/47: gold marker band overlapping emphasized phrases */
.p-sus__body strong {
  font-weight: 700;
  color: var(--color-primary);
  background-image: linear-gradient(
    transparent 68%,
    rgba(189, 143, 69, 0.6) 68%,
    rgba(189, 143, 69, 0.6) 90%,
    transparent 90%
  );
  text-decoration: none;
}

/* STEP04 section: ivory background (Figma S07_step04) */
.p-section--step04 {
  background-color: var(--color-bg-alt);
}

/* ===== Shared figure panel (Figma: white bg + shadow, radius 14) ===== */
.p-sus__figure {
  background-color: var(--color-bg);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 4px 20px rgba(21, 40, 30, 0.08);
}

/* seminar figure uses soft ivory panel without shadow (Figma node 1:8363) */
.p-sus__figure--soft {
  background-color: rgba(244, 242, 236, 0.6);
  border-radius: 12px;
  box-shadow: none;
}

.p-sus__figure + .p-sus__figure {
  margin-top: 40px;
}

/* Figma Frame 935/936: アイコンとタイトルは上揃え（KPI見出しのみ中央揃え） */
.p-sus__figure-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #aecbbc;
  margin-bottom: 20px;
}

.p-sus__figure-head__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--color-bg);
}

.p-sus__figure-head__icon img {
  display: block;
}

/* Figma 5:4722: 20px / 高さ29px（AUTO行送り） */
.p-sus__figure-head__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
  color: var(--color-primary);
  letter-spacing: 1px;
}

.p-sus__figure-head__note {
  margin-left: auto;
  align-self: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.39px;
}

/* KPI table head variant (Figma 5:4794: ベタ塗り丸 + Serif Regular 14px / 下余白16px) */
.p-sus__figure-head--kpi {
  align-items: center;
  border-bottom-color: #ece9dd;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.p-sus__figure-head--kpi .p-sus__figure-head__icon {
  border: none;
  background-color: var(--color-bg-card);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
}

.p-sus__figure-head--kpi .p-sus__figure-head__title {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: var(--color-text);
  letter-spacing: 1.12px;
}

/* ===== STEP01: materiality flow — Figma-exact canvas (flow 944×185) ===== */
.p-sus__materiality {
  position: relative;
  width: 100%;
  aspect-ratio: 944 / 185;
}

/* Figma Line 10–14: clean green connectors drawn over the flow */
.p-sus__materiality-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.p-sus__materiality-lines path {
  stroke: var(--color-primary);
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.p-sus__materiality-lines__dot {
  fill: var(--color-primary);
}

/* 縦積み時だけ使う SP 専用コネクタ（Figma Line 10–12 / Line 13 / Line 16） */
.p-sus__materiality-fan,
.p-sus__materiality-drop {
  display: none;
}

.p-sus__materiality-fan path,
.p-sus__materiality-drop path {
  stroke: var(--color-primary);
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.p-sus__materiality-fan circle {
  fill: var(--color-primary);
}

.p-sus__issue-list,
.p-sus__issue-circle,
.p-sus__output-item {
  position: absolute;
  z-index: 1;
}

.p-sus__issue-list {
  left: 0;
  top: 0;
  /* Figma は 312/944=33.05% だが、文字を+2pxした説明文が収まるよう 323px 相当まで広げている */
  width: 34.22%;
  height: 100%;
  display: grid;
  grid-template-rows: 32.43% 32.43% 27.03%;
  gap: 3.78%;
}

/* Figma のラベル列は138pxだが、+2px した「競合企業の重要項目」が 146px あり
   説明文に重なるため列を広げている（説明文の左端は3カード共通） */
.p-sus__issue-item {
  display: grid;
  grid-template-columns: 156px 1fr;
  align-items: center;
  padding: 0 10px;
  background-color: var(--color-bg-alt);
  border-radius: 4px;
}

.p-sus__issue-item__label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.p-sus__issue-item__label img {
  flex-shrink: 0;
}

/* Figma: 9px・1行13px（2行で26px） */
.p-sus__issue-item__desc {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 15px;
  white-space: nowrap;
}

.p-sus__issue-circle {
  left: 40.89%;
  top: 7.03%;
  width: 16.84%;
  height: 85.95%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Figma Ellipse 1(159・#f0f2f1 40%) / Ellipse 2(145・#f0f2f1)、いずれも1px #195c3d */
.p-sus__issue-circle__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  pointer-events: none;
}

.p-sus__issue-circle__ring--outer {
  width: 100%;
  height: 100%;
  background-color: rgba(240, 242, 241, 0.4);
}

/* Figma Ellipse 2: 142px（159 に対して 89.31%） */
.p-sus__issue-circle__ring--inner {
  width: 89.31%;
  height: 89.31%;
  background-color: #f0f2f1;
}

/* Figma Frame: 128×128 の円（159に対して80.5%） */
.p-sus__issue-circle__text {
  position: relative;
  z-index: 1;
  width: 80.5%;
  height: 80.5%;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.72px;
  line-height: 19px;
}

.p-sus__output-item {
  top: 0;
  width: 13.35%;
  height: 99.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 10px;
  background-color: var(--color-bg-card);
  border-radius: 10px;
  text-align: center;
}

.p-sus__output-item--survey {
  left: 65.57%;
}

.p-sus__output-item--map {
  left: 86.23%;
}

.p-sus__output-item__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 20px;
}

/* Figma: ClipboardText / ChartScatter は不透明度 50% */
.p-sus__output-item img {
  display: block;
  opacity: 0.5;
}

/* Notes: gold-outlined pills with Figma Polygon arrow above (node 1:7952) */
.p-sus__materiality-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.p-sus__materiality-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

/* Figma Polygon 1: M10 8 L5 0 L0 8（上向き）／線幅1pxを含めた実寸 10.85×9.21 */
.p-sus__materiality-note__arrow {
  display: block;
  width: 10.85px;
  height: 9.21px;
}

.p-sus__materiality-note p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 71px;
  padding: 3px 8px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-accent);
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-accent);
  line-height: 19px;
  letter-spacing: 0.6px;
  text-align: center;
}

/* ===== STEP02: KPI table ===== */
.p-sus__kpi-scroll {
  position: relative;
  overflow-x: auto;
}

/* Figma: 列幅 64/110/303/90/90/110/110/60、セル間は1pxの白のみ（行間は0） */
.p-sus__kpi-table {
  width: 100%;
  min-width: 944px;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: var(--color-bg);
  font-size: 11px;
  color: var(--color-text);
}

.p-sus__kpi-table th,
.p-sus__kpi-table td {
  border-right: 1px solid #ffffff;
  padding: 0 4px 0 6px;
  vertical-align: middle;
}

.p-sus__kpi-table th:last-child,
.p-sus__kpi-table td:last-child {
  border-right: 0;
}

.p-sus__kpi-table th {
  height: 32px;
  background-color: #14402a;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.p-sus__kpi-table td {
  height: 28px;
  font-weight: 500;
  line-height: 1.4;
  background-color: #eaf6f0;
  white-space: nowrap;
}

/* Figma Rectangle 529: 2列目以降の本文だけに背景ブラー(radius 5)がかかる */
.p-sus__kpi-haze {
  position: absolute;
  left: 6.886%;
  right: 0;
  top: 32px;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.01);
  -webkit-backdrop-filter: blur(2.5px);
  backdrop-filter: blur(2.5px);
  pointer-events: none;
}

/* KPI section themes (Figma: 社会=green / 環境=amber / ガバナンス=gray) */
.p-sus__kpi-table tr.is-env td {
  background-color: #fcf7e8;
}

.p-sus__kpi-table tr.is-gov td {
  background-color: #efefef;
}

.p-sus__kpi-theme {
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.p-sus__kpi-status {
  text-align: center;
  white-space: nowrap;
}

/* Figma Smiley / SmileySad: 9×9枠に7.31pxのアイコン（Smiley #bd8f45 / Sad #e05959） */
.p-sus__kpi-face {
  display: inline-block;
  width: 9px;
  height: 9px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7.31px 7.31px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23bd8f45' stroke-width='16'><circle cx='128' cy='128' r='96'/><circle cx='92' cy='108' r='6' fill='%23bd8f45' stroke='none'/><circle cx='164' cy='108' r='6' fill='%23bd8f45' stroke='none'/><path d='M86 152c9 17 24 26 42 26s33-9 42-26' stroke-linecap='round'/></svg>");
}

.p-sus__kpi-face--sad {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='none' stroke='%23e05959' stroke-width='16'><circle cx='128' cy='128' r='96'/><circle cx='92' cy='108' r='6' fill='%23e05959' stroke='none'/><circle cx='164' cy='108' r='6' fill='%23e05959' stroke='none'/><path d='M86 174c9-17 24-26 42-26s33 9 42 26' stroke-linecap='round'/></svg>");
}

/* Figma double-wave-break: 高さ34px、周期24.55pxの波線を1px #195c3d で 7px/17px に2本 */
.p-sus__kpi-break td {
  height: 34px;
  border-right: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24.5549' height='10.84' viewBox='0 -0.5 24.5549 10.84'><path d='M0 4.92 2.7283 8.13 5.4566 9.84 8.185 9.25 10.9133 6.63 13.6416 3.21 16.3699 0.59 19.0983 0 21.8266 1.71 24.5549 4.92' fill='none' stroke='%23195c3d' stroke-width='1'/></svg>") repeat-x left 7px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24.5549' height='10.84' viewBox='0 -0.5 24.5549 10.84'><path d='M0 4.92 2.7283 8.13 5.4566 9.84 8.185 9.25 10.9133 6.63 13.6416 3.21 16.3699 0.59 19.0983 0 21.8266 1.71 24.5549 4.92' fill='none' stroke='%23195c3d' stroke-width='1'/></svg>") repeat-x left 17px;
  background-color: transparent;
}

/* Figma: Noto Sans JP Medium 10 / #6f7572 / 右寄せ、表の10px下 */
.p-sus__kpi-note {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #6f7572;
  letter-spacing: 0.3px;
  text-align: right;
}

/* ===== STEP03: penetration map — Figma-exact canvas (group 920×578) ===== */
.p-sus__map {
  position: relative;
  width: 100%;
  aspect-ratio: 920 / 578;
  overflow: visible;
}

/* 象限チャートと施策リスト見出し・行アイコンは SP レイアウト専用（Figma 5:10682） */
.p-sus__map-chart,
.p-sus__map-listtitle,
.p-sus__map-card__icon {
  display: none;
}

/* Figma Rectangle 524: soft blurred gradient blob (no border) */
.p-sus__map-bg {
  position: absolute;
  left: 3.7%;
  top: 7.44%;
  width: 90.54%;
  height: 84.95%;
  border-radius: 1000px;
  background: linear-gradient(88.68deg, var(--color-bg-alt) 6.1%, var(--color-bg-card) 93.18%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* Figma Group 7975/7976: axis lines with endpoint dots */
.p-sus__map-axis {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.p-sus__map-axis--h {
  left: 3.7%;
  top: 45.67%;
  width: 90.76%;
  height: 0.87%;
}

.p-sus__map-axis--v {
  left: 49.02%;
  top: 6.92%;
  width: 0.54%;
  height: 86.33%;
}

/* Figma Arrow 1-3: gold flow arrows (native size, centered, CSS-rotated) */
.p-sus__map-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

.p-sus__map-arrows__item {
  position: absolute;
  display: block;
  transform-origin: center;
}

/* Arrow 1: sweeps center-top → right (24.37deg). Figma inner box 310.359×67.769 */
.p-sus__map-arrows__item--1 {
  left: 55.47%;
  top: 38.01%;
  width: 33.73%;
  height: 11.72%;
  transform: translate(-50%, -50%) rotate(24.37deg);
}

/* Arrow 2: curls from lower-center up (24.37deg). Figma inner box 98.876×82.619 */
.p-sus__map-arrows__item--2 {
  left: 38.04%;
  top: 54.07%;
  width: 10.75%;
  height: 14.29%;
  transform: translate(-50%, -50%) rotate(24.37deg);
}

/* Arrow 3: small curl upper-left (-135deg). Figma inner box 81.849×39.435 */
.p-sus__map-arrows__item--3 {
  left: 27.82%;
  top: 17.27%;
  width: 8.90%;
  height: 6.82%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

.p-sus__map-label {
  position: absolute;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.45px;
  z-index: 2;
}

.p-sus__map-label--top {
  top: 0;
  left: 49.24%;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.35;
}

.p-sus__map-label--bottom {
  bottom: 0;
  left: 49.57%;
  transform: translateX(-50%);
}

.p-sus__map-label--left {
  left: 0.84%;
  top: 46%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  letter-spacing: 4px;
}

.p-sus__map-label--right {
  right: 2.85%;
  top: 46%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  letter-spacing: 4px;
}

.p-sus__map-center {
  position: absolute;
  top: 46.11%;
  left: 49.08%;
  transform: translate(-50%, -50%);
  width: 17.28%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.p-sus__map-center__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
}

.p-sus__map-center__ring--outer {
  width: 100%;
  height: 100%;
}

.p-sus__map-center__ring--inner {
  width: 91%;
  height: 91%;
}

.p-sus__map-center__text {
  position: relative;
  z-index: 1;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}

.p-sus__map-center__text em {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.78px;
}

/* 見出し・本文が+2pxされたぶん、Figma の左右16pxを詰めて文字を1行に収めている */
.p-sus__map-card {
  position: absolute;
  width: 24.24%;
  background-color: var(--color-bg);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(21, 40, 30, 0.09);
  padding: 14px 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-sus__map-card__head {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.p-sus__map-card__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-sus__map-card__illust {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.p-sus__map-card__illust img {
  position: absolute;
  display: block;
  max-width: none;
}

.p-sus__map-card__illust--04 {
  width: 92px;
  height: 65px;
}

.p-sus__map-card__illust--04 img {
  width: 288.18%;
  height: 273.8%;
  left: -27.02%;
  top: -36.1%;
}

.p-sus__map-card__illust--mapping,
.p-sus__map-card__illust--03 {
  width: 80px;
  height: 56px;
}

.p-sus__map-card__illust--mapping img,
.p-sus__map-card__illust--03 img {
  width: 290.54%;
  height: 276.04%;
  left: -153.23%;
  top: -38.47%;
}

.p-sus__map-card__illust--02,
.p-sus__map-card__illust--01 {
  width: 92px;
  height: 65px;
}

.p-sus__map-card__illust--02 img {
  width: 352.59%;
  height: 334.99%;
  left: -126.38%;
  top: -180.14%;
}

.p-sus__map-card__illust--01 img {
  width: 362.66%;
  height: 344.56%;
  left: -23.64%;
  top: -192.66%;
}

.p-sus__map-card__illust--sr {
  width: 79px;
  height: 56px;
}

.p-sus__map-card__illust--sr img {
  width: 352.59%;
  height: 334.99%;
  left: -233.55%;
  top: -184.84%;
}

.p-sus__map-card__num {
  font-size: 31px;
  font-weight: 500;
  color: var(--color-accent);
  opacity: 0.3;
  line-height: 1;
}

.p-sus__map-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 24px;
  padding-bottom: 8px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}

.p-sus__map-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-accent);
}

.p-sus__map-card__text {
  font-size: 13px;
  color: var(--color-text);
  line-height: 20px;
}

.p-sus__map-note {
  position: absolute;
  left: 60.43%;
  top: 81.83%;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 29.89%;
  padding: 10px 12px;
  background-color: var(--color-bg-card);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 18px;
  z-index: 2;
}

.p-sus__map-note span {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background-color: var(--color-primary);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  font-style: normal;
}

/* ===== STEP03: World Cafe real-scene photos (Figma Frame 8024) ===== */
.p-sus__worldcafe {
  margin-top: 40px;
}

.p-sus__worldcafe-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 32px;
  letter-spacing: 0.42px;
  margin-bottom: 10px;
}

.p-sus__worldcafe + .p-sus__figure {
  margin-top: 40px;
}

.p-sus__worldcafe-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.p-sus__worldcafe-photo {
  aspect-ratio: 309 / 208;
  overflow: hidden;
  background-color: var(--color-bg-card);
}

.p-sus__worldcafe-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== STEP03: seminar example ===== */
/* Figma は内容944pxに対し866px幅だが、コンテンツ拡大後は内容1120pxに対して
   左に取り残されるため図全体を全幅に伸ばしている。区切り幅・下段のSTEPボックスも
   同じ 1120/866 = 1.2933 倍で揃え、接続線の位置関係を保っている
   （接続SVGは preserveAspectRatio="none" なので幅に比例して伸びる） */
.p-sus__seminar-cards {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 100%;
}

.p-sus__seminar-sep {
  align-self: center;
  flex: 0 0 18.1px;
  width: 18.1px;
  text-align: center;
  font-size: 16px;
  color: var(--color-primary);
}

.p-sus__seminar-card {
  flex: 1 1 163px;
  background-color: var(--color-bg);
  border-radius: 10px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.p-sus__seminar-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-bg-card);
  margin-bottom: 10px;
}

.p-sus__seminar-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 21px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.p-sus__seminar-card__time {
  display: inline-block;
  margin-block: 10px;
  padding: 3px 10px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
}

.p-sus__seminar-card__text {
  width: 100%;
  padding-top: 11px;
  border-top: 1px solid rgba(25, 92, 61, 0.15);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 22px;
}

/* Figma card 2 (node 1:8394): text area is wider (145px) than others so the copy
   fits in 3 lines. align-items:center on the card lets it overflow equally into the
   padding. The divider (node 1:8393) must stay at the 127px content width, so it is
   drawn with a centered ::before instead of the full-width border-top. */
.p-sus__seminar-card__text--wide {
  width: calc(100% + 18px);
  border-top: none;
  position: relative;
}

.p-sus__seminar-card__text--wide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 18px);
  border-top: 1px solid rgba(25, 92, 61, 0.15);
}

.p-sus__seminar-card__text-keep {
  white-space: nowrap;
}

/* Figma Line 22/23: green connectors from card row to the STEP detail boxes.
   Width is capped to the 866px card row so viewBox units map 1:1 to px. */
.p-sus__seminar-links {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 44px;
  margin-top: 6px;
}

.p-sus__seminar-links path {
  stroke: var(--color-primary);
  stroke-width: 1.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.p-sus__seminar-links circle {
  fill: var(--color-primary);
}

.p-sus__seminar-details {
  display: grid;
  /* Figma 346px / gap20px / 左オフセット77px を 1.2933 倍。接続線の下端に中心が合う */
  grid-template-columns: repeat(2, minmax(0, 447px));
  gap: 26px;
  margin-top: 0;
  margin-left: 100px;
  justify-content: start;
}

.p-sus__seminar-detail {
  background-color: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  padding: 16px 18px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  min-height: 209px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.p-sus__seminar-detail__step {
  display: inline-block;
  padding: 3px 10px;
  background-color: var(--color-primary);
  border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.p-sus__seminar-detail__text {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 19px;
  text-align: center;
}

.p-sus__seminar-detail__mock {
  background-color: var(--color-bg-alt);
  border-radius: 8px;
  width: 100%;
  /* Figma 294px。STEPボックスと同じ 1.2933 倍でカード内の占有比を保つ */
  max-width: 380px;
  min-height: 105px;
}

.p-sus__seminar-detail__mock--postits {
  padding: 13px 18px 16px;
}

.p-sus__seminar-postits {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.p-sus__seminar-postits__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.p-sus__seminar-postits__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 22px;
}

.p-sus__seminar-postits__cluster {
  position: relative;
  width: 77px;
  height: 58px;
}

.p-sus__seminar-postits__cluster img {
  position: absolute;
  display: block;
}

.p-sus__seminar-postits__cluster img:nth-child(1) { left: 0; top: 3px; }
.p-sus__seminar-postits__cluster img:nth-child(2) { left: 25px; top: 12px; }
.p-sus__seminar-postits__cluster img:nth-child(3) { left: 50px; top: 0; }
.p-sus__seminar-postits__cluster img:nth-child(4) { left: 57px; top: 25px; }
.p-sus__seminar-postits__cluster img:nth-child(5) { left: 33px; top: 38px; }
.p-sus__seminar-postits__cluster img:nth-child(6) { left: 3px; top: 33px; }

.p-sus__seminar-detail__mock--sheet {
  padding: 9px 13px 8px;
}

.p-sus__seminar-sheet {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Figma は3等分。テーマ名が+2pxで収まらないため、罫線だけの2列から幅を借りている */
.p-sus__seminar-sheet__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 4px;
}

.p-sus__seminar-sheet__row--head span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  background-color: rgba(25, 92, 61, 0.11);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.2;
  text-align: center;
}

.p-sus__seminar-sheet__row--body span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  background-color: var(--color-bg);
  font-size: 8px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
  text-align: center;
  padding: 6px 4px;
}

.p-sus__seminar-sheet__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 58px;
  background-color: var(--color-bg);
  padding: 6px 9px;
}

.p-sus__seminar-sheet__lines img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== STEP04: cycle note (Figma 1:8659 gradient banner) ===== */
.p-sus__cycle-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px 32px;
  background-image: linear-gradient(100deg, #86aa98 0%, #195c3d 68%);
  border-radius: 8px;
}

.p-sus__cycle-note img {
  flex-shrink: 0;
  transform: scaleX(-1);
}

.p-sus__cycle-note p {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  line-height: 28px;
}

@media (max-width: 1024px) {
  .p-sus-target-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .p-sus__step-cards {
    flex-wrap: wrap;
  }

  .p-sus__step-card {
    flex: 1 1 40%;
  }

  .p-sus__step-sep {
    display: none;
  }

  .p-sus__materiality {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .p-sus__materiality-lines {
    display: none;
  }

  .p-sus__issue-list,
  .p-sus__output-item {
    position: static;
    width: 100%;
    height: auto;
  }

  /* keep as containing block: the ring images inside are absolutely positioned */
  .p-sus__issue-circle {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .p-sus__issue-list {
    gap: 7px;
  }

  .p-sus__issue-item,
  .p-sus__issue-item--short {
    min-height: 56px;
  }

  .p-sus__issue-circle {
    aspect-ratio: 1;
    max-width: 159px;
    margin-inline: auto;
  }

  .p-sus__output-item {
    min-height: 120px;
  }

  .p-sus__materiality-notes {
    grid-template-columns: 1fr;
  }

  .p-sus__map {
    aspect-ratio: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: visible;
  }

  .p-sus__map-bg,
  .p-sus__map-axis,
  .p-sus__map-label,
  .p-sus__map-arrows {
    display: none;
  }

  .p-sus__map-center {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    order: -1;
    margin-inline: auto;
    width: 159px;
    aspect-ratio: 1;
  }

  .p-sus__map-card {
    position: relative !important;
    inset: auto !important;
    width: 100%;
  }

  .p-sus__map-note {
    position: static;
    max-width: none;
  }

  .p-sus__seminar-cards {
    flex-direction: column;
    gap: 10px;
  }

  .p-sus__seminar-sep {
    display: none;
  }

  .p-sus__seminar-details {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .p-sus__seminar-links {
    display: none;
  }
}

/* SP-only label above seminar detail cards (Figma 5:10836) */
.p-sus__seminar-steps-label {
  margin: 20px 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
}

@media (max-width: 768px) {
  /* Figma SP 5:10366: FVタイトルは2行のため 26px、サブは Sans */
  .p-hero__inner {
    padding-bottom: 37px;
  }

  .p-hero__title {
    font-size: 28px;
    line-height: 39px;
  }

  .p-hero__subtitle {
    font-family: var(--font-family);
    line-height: 20px;
  }

  /* --- TARGET cards (Figma 5:10377) --- */
  /* Figma のラベル→見出しは 20px（共通の 7px ではない） */
  .p-section:has(.p-sus-target-grid) .p-section__header .c-section-label {
    margin-bottom: 20px;
  }

  .p-sus-target-grid {
    grid-template-columns: 1fr;
  }

  /* Figma 5:10380: 枠 342×156 に 1px の内側線。上下パディング 28 から線の分を引く */
  .p-sus-target-grid .p-challenge-card--compact .p-challenge-card__top {
    padding: 27px 20px;
  }

  /* Figma はカード内の改行位置を PC と変えるため、u-pc / u-sp で出し分ける */
  .p-sus-target-grid .p-challenge-card__title br {
    display: inline;
  }

  .p-sus-target-grid .p-challenge-card__title {
    width: 280px;
    font-size: 18px;
    line-height: 26px;
  }

  /* --- OUR PROCESS (Figma 5:10396: white box + stacked bordered cards) --- */
  .p-sus__process-section {
    padding-block: 56px;
  }

  /* Figma 5:10400: 13px・3行で高さ66px */
  .p-sus__process-section .p-section__lead {
    line-height: 24px;
  }

  .p-sus__process-box {
    margin-top: 20px;
    padding: 24px 20px;
    border-radius: 8px;
    box-shadow: none;
  }

  /* Figma SP 5:10402: 18px / 高さ26px */
  .p-sus__process-box__title {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: normal;
    margin-bottom: 20px;
  }

  /* Figma SP 5:10403: 11px・2行で高さ26px */
  .p-sus__process-cycle {
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    margin-bottom: 20px;
  }

  .p-sus__process-cycle::before,
  .p-sus__process-cycle::after {
    display: none;
  }

  .p-sus__step-cards {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    height: auto;
  }

  /* Figma SP 5:10404: 302幅・pad20/16・gap12・角丸4・高さは内容依存。
     枠線は内側1pxのぶんパディングから引く */
  .p-sus__step-card {
    flex: none;
    gap: 12px;
    height: auto;
    min-height: 0;
    padding: 19px 15px;
    border-radius: 4px;
    box-shadow: none;
  }

  /* Figma SP: 65×25（pad6/12・11px・テキスト高13px） */
  .p-sus__step-card__badge {
    padding: 6px 12px;
    font-size: 13px;
    line-height: 15px;
    letter-spacing: normal;
  }

  .p-sus__step-card__title {
    font-family: var(--font-serif);
    font-size: 17px;
    min-height: 0;
    line-height: 1.4;
  }

  .p-sus__step-card__title br:not(.u-sp) {
    display: none;
  }

  /* 1枚目だけ17文字あり、+2px では1行に収まらないため PC の改行位置を残す */
  .p-sus__step-card:first-child .p-sus__step-card__title br {
    display: inline;
  }

  /* Figma SP 5:10408: #f0f0ed・pad12・角丸4・項目は 12px で gap4 */
  .p-sus__step-card__detail,
  .p-sus__step-card:first-child .p-sus__step-card__detail {
    justify-content: flex-start;
    gap: 4px;
    flex: none;
    min-height: 0;
    height: auto;
    background-color: #f0f0ed;
    border-radius: 4px;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    line-height: 16px;
  }

  /* Figma 5:10411〜5:10413: STEP01 だけ3行目以降のテキスト枠が 17px */
  .p-sus__step-card:first-child .p-sus__step-card__detail {
    line-height: 19px;
  }

  .p-sus__step-card:first-child .p-sus__step-card__detail-item:nth-child(-n + 2) {
    line-height: 16px;
  }

  /* SP: STEP03/04 の長い項目の字詰め */
  .p-sus__step-card__detail-item--oneline-sp {
    font-size: 12px;
    letter-spacing: -0.02em;
  }

  /* Figma 5:10414: SP の矢印は 10×4 */
  .p-sus__step-card__arrow,
  .p-sus__step-card__arrow img {
    width: 10px;
    height: 4px;
  }

  /* --- STEP bodies: plain text, no highlight, flowing lines --- */
  .p-sus__body {
    margin-bottom: 20px;
  }

  .p-sus__body p {
    line-height: 27px;
    letter-spacing: normal;
  }

  /* Figma 5:11054: 段落の間は1行ぶん空く */
  .p-sus__body p + p {
    margin-top: 25px;
  }

  .p-sus__body br:not(.u-sp) {
    display: none;
  }

  .p-sus__body strong {
    font-weight: inherit;
    color: inherit;
    background: none;
  }

  /* --- Shared figure panel --- */
  .p-sus__figure {
    padding: 24px 20px;
    border-radius: 8px;
  }

  .p-sus__figure-head {
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 20px;
  }

  .p-sus__figure-head__icon {
    border: none;
  }

  .p-sus__figure-head__title {
    font-size: 19px;
    letter-spacing: normal;
  }

  .p-sus__figure-head__note {
    margin-left: 0;
    margin-top: 6px;
    width: 100%;
    font-size: 14px;
    text-align: center;
  }

  /* --- STEP01 materiality: single vertical flow
     (Figma 5:10454: pill → issues → pill → circle → pill → outputs) --- */
  .p-sus__figure--materiality {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .p-sus__figure--materiality .p-sus__figure-head {
    margin-bottom: 10px;
  }

  .p-sus__figure--materiality .p-sus__materiality,
  .p-sus__figure--materiality .p-sus__materiality-notes {
    display: contents;
  }

  .p-sus__figure--materiality .p-sus__materiality-note:nth-child(1) { order: 1; }
  .p-sus__figure--materiality .p-sus__issue-list { order: 2; }
  .p-sus__figure--materiality .p-sus__materiality-fan { order: 3; }
  .p-sus__figure--materiality .p-sus__materiality-note:nth-child(2) { order: 4; }
  .p-sus__figure--materiality .p-sus__issue-circle { order: 5; }
  .p-sus__figure--materiality .p-sus__materiality-drop--1 { order: 6; }
  .p-sus__figure--materiality .p-sus__materiality-note:nth-child(3) { order: 7; }
  .p-sus__figure--materiality .p-sus__output-item--survey { order: 8; }
  .p-sus__figure--materiality .p-sus__materiality-drop--2 { order: 9; }
  .p-sus__figure--materiality .p-sus__output-item--map { order: 10; }

  /* Figma: 3行のイシューから中央へ集約する 312×79 の線。線の直後に次のピルが続く */
  .p-sus__materiality-fan {
    display: block;
    width: 312px;
    max-width: none;
    height: 79px;
    margin-inline: -5px;
    margin-bottom: -10px;
  }

  /* Figma Frame 7977: 先頭のピルとイシュー行の間だけ 7px */
  .p-sus__figure--materiality .p-sus__issue-list {
    margin-top: -3px;
  }

  /* SP の Polygon 1 は 10×8 */
  .p-sus__materiality-note__arrow {
    width: 10px;
    height: 8px;
  }

  /* Figma Line 13 / Line 16: 占有高 34.71px の垂直コネクタ */
  .p-sus__materiality-drop {
    display: block;
    width: 30px;
    height: 34.71px;
    margin-inline: auto;
  }

  /* arrow sits below the pill on SP */
  .p-sus__materiality-note {
    flex-direction: column-reverse;
  }

  .p-sus__issue-list {
    gap: 7px;
  }

  /* Figma 5:10454: 上2行は高さ60px固定・3行目は50px、内容は上下中央 */
  .p-sus__issue-item,
  .p-sus__issue-item--short {
    /* Figma 5:10471: ラベル列128px + gap10px で説明文の左端が x=148 になる */
    grid-template-columns: 128px 1fr;
    align-items: center;
    gap: 10px;
    height: 60px;
    min-height: 0;
    padding: 9px 10px;
  }

  .p-sus__issue-item--short {
    height: 50px;
  }

  .p-sus__issue-item__label {
    white-space: normal;
  }

  .p-sus__issue-item__desc {
    white-space: normal;
    line-height: 15px;
  }

  .p-sus__issue-circle {
    width: 159px;
    max-width: 159px;
    margin-inline: auto;
  }

  .p-sus__output-item {
    flex: none;
    width: 126px;
    min-height: 136px;
    margin-inline: auto;
  }

  /* Figma 5:10511: 社員アンケートだけ 137px */
  .p-sus__output-item--survey {
    min-height: 137px;
  }

  /* --- STEP02 KPI table --- */
  /* Figma 5:10528: アイコン＋2行見出しを1行に並べ、表までは 16+16px */
  .p-sus__figure-head--kpi {
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 32px;
  }

  .p-sus__figure-head--kpi .p-sus__figure-head__title {
    width: 209px;
    line-height: 22px;
    letter-spacing: normal;
  }

  /* Figma 5:10533: 表は枠の左端から14px、右はボックス端まで伸びて切れる */
  .p-sus__kpi-scroll {
    margin-inline: -20px;
    padding: 16px 0 17px 14px;
  }

  /* Figma 5:10535: SP は「テーマ／マテリアリティ／取組み施策・KPI」の3列のみ */
  .p-sus__kpi-table {
    width: 338px;
    min-width: 338px;
  }

  .p-sus__kpi-table col:nth-child(1) {
    width: 65px !important;
  }

  .p-sus__kpi-table col:nth-child(2) {
    width: 111px !important;
  }

  .p-sus__kpi-table col:nth-child(3) {
    width: 162px !important;
  }

  .p-sus__kpi-table col:nth-child(n + 4) {
    width: 0 !important;
  }

  .p-sus__kpi-table th:nth-child(n + 4),
  .p-sus__kpi-table td:nth-child(n + 4) {
    display: none;
  }

  /* SP は .p-sus__kpi-scroll に 16px/17px の上下パディングが付くため、
     ブラーの基準位置もその分ずらさないと見出し行に被る（16 + 見出し行32 = 48） */
  .p-sus__kpi-haze {
    left: 79px;
    top: 48px;
    bottom: 17px;
  }

  .p-sus__kpi-note {
    margin-top: 16px;
    font-size: 13px;
    line-height: 15px;
    color: #808080;
    opacity: 1;
    text-align: left;
  }

  /* Figma 5:10641: STEP03 の枠は高さ固定 4762px で、内容が下 19px はみ出す。
     結果として勉強会ボックス下の余白は 40px ではなく 21px になる */
  #step-03 {
    padding-bottom: 21px;
  }

  /* --- STEP03 浸透施策マップ 一覧（Figma 5:10648 / 342×778）--- */
  .p-sus__maplist {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--color-bg-alt);
    border-radius: 8px;
    padding: 24px 20px;
    margin-bottom: 20px;
  }

  .p-sus__maplist .p-sus__figure-head {
    margin-bottom: 0;
  }

  .p-sus__maplist .p-sus__figure-head__title {
    line-height: 26px;
  }

  .p-sus__maplist-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: #ffffff;
    border-radius: 4px;
    padding: 16px 14px;
  }

  .p-sus__maplist-item__head {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .p-sus__maplist-item__num {
    flex-shrink: 0;
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #d9d9d4;
  }

  .p-sus__maplist-item__title {
    width: 220px;
    font-size: 16px;
    font-weight: 700;
    line-height: 19px;
    color: var(--color-primary);
  }

  .p-sus__maplist-item__title--wide {
    width: 274px;
  }

  .p-sus__maplist-item__text {
    width: 274px;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: var(--color-text);
  }

  /* --- STEP03 浸透施策マップ（Figma 5:10682 / 342×1268・内側 pad 22.45）--- */
  .p-sus__figure--map {
    background-color: #f1f2ef;
    box-shadow: none;
    padding: 22px 22px 42px;
  }

  .p-sus__map {
    gap: 12px;
  }

  .p-sus__map-center,
  .p-sus__map-card__illust {
    display: none;
  }

  /* 象限チャート：Figma の描画範囲は 324×445（カード左右 9px の位置まで張り出す）。
     吹き出しは Figma 実測の % で置くため、文字も 324px 基準の cqw で拡縮させて
     枠と文字の比率を保つ（360px 幅でも吹き出しから文字がはみ出さない） */
  .p-sus__map-chart {
    display: block;
    position: relative;
    container-type: inline-size;
    order: -2;
    width: calc(100% + 26px);
    margin-inline: -13px;
    margin-top: 52px;
    margin-bottom: 11px;
    aspect-ratio: 324 / 445;
  }

  .p-sus__map-chart__lines {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Figma 324px 基準で 14px / 行送り17px */
  .p-sus__map-chart__label {
    position: absolute;
    font-size: 4.321cqw;
    font-weight: 700;
    line-height: 5.247cqw;
    color: #0c6147;
  }

  .p-sus__map-chart__label--top {
    left: 40.76%;
    top: 0;
  }

  .p-sus__map-chart__label--bottom {
    left: 40.74%;
    top: 96.85%;
  }

  .p-sus__map-chart__label--left,
  .p-sus__map-chart__label--right {
    top: 42.25%;
    writing-mode: vertical-rl;
    color: #195c3d;
  }

  .p-sus__map-chart__label--left { left: 0; }
  .p-sus__map-chart__label--right { left: 95.37%; }

  /* 白い吹き出し（Figma Group 8030〜8035）。数値は 324px 基準の実測 px を cqw 換算 */
  .p-sus__map-chart__bubble {
    position: absolute;
    display: block;
    background-color: #ffffff;
    border-radius: 1.235cqw;
    padding: 2.469cqw 0 0 3.395cqw;
    font-size: 3.704cqw;
    font-weight: 700;
    line-height: 5.997cqw;
    color: #17221e;
  }

  .p-sus__map-chart__bubble em {
    display: block;
    font-style: normal;
    font-size: 6.481cqw;
    line-height: 7.716cqw;
    color: #e7d6b7;
  }

  .p-sus__map-chart__bubble--04 {
    left: 0;
    top: 4.94%;
    width: 34.57%;
    height: 12.58%;
  }

  .p-sus__map-chart__bubble--mapping {
    left: 10.49%;
    top: 22.47%;
    width: 37.04%;
    height: 12.58%;
    padding-top: 4.012cqw;
  }

  /* 2行の書名が枠内に収まるよう、Figma の上余白 4px を 2px に詰めている */
  .p-sus__map-chart__bubble--03 {
    left: 63.27%;
    top: 52.36%;
    width: 30.86%;
    height: 13.26%;
    padding-top: 0.617cqw;
    font-size: 3.302cqw;
    line-height: 5.247cqw;
  }

  .p-sus__map-chart__bubble--03 em {
    line-height: 6.79cqw;
  }

  /* 「トップコミットメント」は+2pxのままだと枠内に入らず折り返して隣の吹き出しに隠れる。
     字間で差分を吸収して1行に収め、重なる「部門のSR」より前面に置く */
  .p-sus__map-chart__bubble--02 {
    left: 8.33%;
    top: 58.43%;
    width: 34.57%;
    height: 12.58%;
    padding-top: 2.16cqw;
    padding-left: 3.086cqw;
    font-size: 3.457cqw;
    letter-spacing: -0.37cqw;
    z-index: 1;
  }

  .p-sus__map-chart__bubble--sr {
    left: 39.2%;
    top: 68.09%;
    width: 26.54%;
    height: 12.58%;
    padding-top: 4.012cqw;
  }

  .p-sus__map-chart__bubble--01 {
    left: 1.54%;
    top: 74.38%;
    width: 35.19%;
    height: 12.58%;
    padding-top: 2.16cqw;
    padding-left: 5.864cqw;
  }

  /* 中央の円（外 105 / 中 95 の #bfd2cb 線 ＋ 内 84 のベタ塗り） */
  .p-sus__map-chart__center {
    position: absolute;
    left: 48.61%;
    top: 49.55%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 32.41%;
    aspect-ratio: 1;
    border: 1px solid #bfd2cb;
    border-radius: 50%;
    text-align: center;
    z-index: 2;
  }

  .p-sus__map-chart__center::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90.48%;
    height: 90.48%;
    border: 1px solid #bfd2cb;
    border-radius: 50%;
  }

  .p-sus__map-chart__center::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background-color: #0c6147;
    border-radius: 50%;
  }

  .p-sus__map-chart__center-lead,
  .p-sus__map-chart__center strong,
  .p-sus__map-chart__center-note {
    position: relative;
    z-index: 1;
    color: #ffffff;
  }

  /* 3行とも直径84pxのベタ塗り円の内側に収まる字送りに詰めている
     （+2px のままでは「最適な施策選定」「組織の状態に合わせて」が円からはみ出す） */
  .p-sus__map-chart__center-lead {
    font-size: 2.623cqw;
    line-height: 3.086cqw;
  }

  .p-sus__map-chart__center strong {
    margin-top: 1.389cqw;
    padding-bottom: 1.235cqw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 3.395cqw;
    font-weight: 700;
    line-height: 4.321cqw;
  }

  .p-sus__map-chart__center-note {
    margin-top: 0.617cqw;
    font-size: 2.284cqw;
    line-height: 2.932cqw;
  }

  /* 注記バー（Figma Group 8036 276.08×48 / #f3f5f3） */
  .p-sus__map-note {
    order: -1;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 340px;
    max-width: 100%;
    min-height: 48px;
    margin-inline: auto;
    margin-bottom: 31px;
    padding: 10px 8px 8px;
    background-color: #f3f5f3;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 17px;
    color: #4b5651;
  }

  .p-sus__map-note span {
    width: 17.2px;
    height: 18px;
    border-radius: 4px;
    background-color: #0c6147;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
  }

  /* 「施策について」見出し＋区切り線（Figma y=685 / 715） */
  .p-sus__map-listtitle {
    display: block;
    order: 0;
    padding-bottom: 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(12, 97, 71, 0.25);
    font-size: 17px;
    font-weight: 700;
    line-height: 20px;
    color: #0c6147;
  }

  .p-sus__map-card--01 { order: 1; }
  .p-sus__map-card--02 { order: 2; }
  .p-sus__map-card--03 { order: 3; }
  .p-sus__map-card--04 { order: 4; }
  .p-sus__map-card--mapping { order: 5; }
  .p-sus__map-card--sr { order: 6; }

  /* 施策リストの各行（Figma 297.1×72 / #fafbf9 + #e8ece8 1px）。
     本文が+2pxされたぶん3行目が枠外に出るため、高さは下限としてのみ効かせる */
  .p-sus__map-card {
    display: block;
    min-height: 72px;
    padding: 10px 12px 10px 52.54px;
    background-color: #fafbf9;
    border: 1px solid #e8ece8;
    border-radius: 4px;
    box-shadow: none;
  }

  .p-sus__map-card__head {
    display: block;
  }

  /* 番号を持たない2行は 30.57×32 の淡色ボックス＋線画アイコン（Figma y=1090 / 1174） */
  .p-sus__map-card__icon {
    position: absolute;
    left: 14.33px;
    top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30.57px;
    height: 32px;
    background-color: #eef3ef;
    border-radius: 4px;
  }

  .p-sus__map-card__icon svg {
    display: block;
  }

  .p-sus__map-card__num {
    position: absolute;
    left: 15.28px;
    top: 9px;
    font-size: 21px;
    font-weight: 700;
    line-height: 25px;
    color: #e7d6b7;
    opacity: 1;
  }

  .p-sus__map-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #17221e;
    line-height: 17px;
    padding-bottom: 0;
  }

  .p-sus__map-card__title::after {
    display: none;
  }

  .p-sus__map-card__title br:not(.u-sp) {
    display: none;
  }

  .p-sus__map-card__text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 17px;
    color: #4b5651;
  }

  /* --- World cafe photos --- */
  .p-sus__worldcafe {
    margin-top: 20px;
  }

  /* Figma 5:10779: 13px・テキスト枠16px、写真までは20px */
  .p-sus__worldcafe-title {
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 20px;
    color: var(--color-text);
    letter-spacing: normal;
  }

  .p-sus__worldcafe + .p-sus__figure {
    margin-top: 20px;
  }

  .p-sus__worldcafe-photos {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .p-sus__worldcafe-photo {
    aspect-ratio: 342 / 200;
    border-radius: 4px;
  }

  /* --- Seminar example (Figma 5:10784) --- */
  /* Figma の枠は高さ固定 1481px で、内容 1475px の下に 6px 余る */
  .p-sus__figure--soft {
    background-color: var(--color-bg-alt);
    padding-bottom: 30px;
  }

  /* 見出しはアイコン＋タイトルを中央寄せ、注記は22px下に置く */
  .p-sus__figure--soft .p-sus__figure-head {
    justify-content: center;
    column-gap: 10px;
    row-gap: 22px;
    margin-bottom: 10px;
  }

  .p-sus__figure--soft .p-sus__figure-head__title {
    line-height: 26px;
  }

  .p-sus__figure--soft .p-sus__figure-head__note {
    margin-top: 0;
    line-height: 16px;
  }

  /* 縦並びでは flex-basis が高さになるため内容依存に戻す */
  .p-sus__seminar-card {
    flex: 0 0 auto;
    border-radius: 4px;
    padding: 16px 14px;
    box-shadow: none;
  }

  .p-sus__seminar-card__ico {
    width: 20px;
    height: 20px;
    border-radius: 0;
    background: none;
    margin-bottom: 8px;
  }

  /* Figma 5:10784: タイトル枠17px・時間ピル21px・本文12px/160% で1行カードは142px */
  .p-sus__seminar-card__title {
    font-size: 16px;
    line-height: 19px;
    min-height: 0;
  }

  .p-sus__seminar-card__title br:not(.u-sp),
  .p-sus__seminar-card__text br:not(.u-sp) {
    display: none;
  }

  .p-sus__seminar-card__time {
    margin-block: 8px;
    padding: 3px 9px;
    border: 1px solid var(--color-accent);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 15px;
    color: var(--color-accent);
  }

  .p-sus__seminar-card__text {
    font-size: 14px;
    line-height: 21px;
    padding-top: 8px;
    border-top: 1px solid #d9d9d4;
  }

  .p-sus__seminar-card__text--wide {
    width: 100%;
    border-top: 1px solid #d9d9d4;
  }

  .p-sus__seminar-card__text--wide::before {
    display: none;
  }

  /* Figma: 90度回転した「›」の占有高は 5px（カード間 10+5+10=25px） */
  .p-sus__seminar-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 5px;
    height: 5px;
    min-height: 0;
    line-height: 1;
    transform: rotate(90deg);
  }

  /* Figma 5:10836: 12px・テキスト枠17px、前後とも22px */
  .p-sus__seminar-steps-label {
    margin-block: 22px;
    line-height: 19px;
  }

  /* 狭い画面では親幅に合わせて表示 */
  .p-sus__seminar-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    width: 100%;
    margin-top: 0;
    margin-inline: 0;
    justify-items: stretch;
  }

  .p-sus__seminar-detail {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 209px;
    padding: 6px 18px;
    gap: 6px;
  }

  .p-sus__seminar-detail__step {
    padding: 3px 10px;
    line-height: 16px;
  }

  .p-sus__seminar-detail__text {
    width: 100%;
    max-width: none;
  }

  .p-sus__seminar-detail__mock {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 105px;
    flex-shrink: 0;
  }

  /* --- STEP04 --- */
  /* Figma 5:11051: 下余白は他ステップの40pxではなく56px */
  .p-section.p-section--step04 {
    background-color: var(--color-bg);
    padding-bottom: 56px;
  }

  /* Figma 5:11053: STEP04 の見出しだけ 20px（他ステップは 22px） */
  .p-section--step04 .p-svc-head__title {
    font-size: 22px;
    line-height: 31px;
  }

  .p-sus__cycle-note {
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 24px 20px;
    background-image: none;
    background-color: var(--color-primary);
  }

  .p-sus__cycle-note img {
    width: 29px;
    height: auto;
  }

  .p-sus__cycle-note p {
    font-size: 15px;
    line-height: 24px;
  }
}