@charset "utf-8";

/* 建築・省エネ・創エネページ（/energy/）だけで使うパーツ（`.p-energy-*`）。
   共通パーツは components.css。命名: _claude/css-architecture.md 5章
   グラフ内の文字は最小12px（Figma は8〜11px） */

/* ============================================================
 * .p-energy-skill — 丸バッジ＋青い小見出し＋本文（設計力・施工力・企画力）
 * .p-energy-skill-container — 並べる親（縦）
 * Figma: skill-block（1520:182）
 * ============================================================ */
.p-energy-skill-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* 9.30 修正依頼「枠があった方が見やすい」「もう少し字を小さく」→ 1項目ずつ枠で囲む（下のシステム建築のカードと同じ枠）、本文 18 → 15 */
.p-energy-skill {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-28);
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
  background: var(--color-white);
}

.p-energy-skill__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px; /* 文字を20pxに上げたのに合わせて 76→88（2026-09-17） */
  height: 88px;
  padding-bottom: 2px; /* Noto Sans JP 対策（字面を1px持ち上げる） */
  border-radius: var(--radius-full);
  background: var(--color-brand);
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
}

.p-energy-skill__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* 本文（18px）と同じ大きさだと見出しに見えないので、一段上の title（PC20／SP18）に（2026-09-17） */
.p-energy-skill__title {
  word-break: auto-phrase; /* 「追求し／た」のような切れ方を避ける（対応ブラウザのみ） */
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-brand);
}

.p-energy-skill__text {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* ============================================================
 * .p-energy-earthquake-heading — 地震対策の見出し
 * .p-energy-earthquake-box — 青い帯の見出し付きの箱
 * .p-energy-earthquake-box-container — 並べる親（2列・高さを揃える）
 * Figma: eq-head（1520:195）／eq-box（1520:198）
 * ============================================================ */
/* 9.30 修正依頼「目立たす」→ .c-lead と同じ文字の幅の青い下線 */
.p-energy-earthquake-heading {
  width: fit-content;
  max-width: 100%;
  padding-bottom: var(--space-10);
  border-bottom: 2px solid var(--color-brand);
  font-size: var(--font-size-heading-3);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.p-energy-earthquake-box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

.p-energy-earthquake-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  overflow: hidden;
  border: 2px solid var(--color-brand); /* 見出しの帯と同じ色 */
  border-radius: var(--radius-10);
  background: var(--color-surface-muted);
}

.p-energy-earthquake-box__header {
  padding: var(--space-14) var(--space-24);
  background: var(--color-brand);
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-white);
}

.p-energy-earthquake-box__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-4) var(--space-20) var(--space-20);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* ============================================================
 * .p-energy-system-building-card — システム建築の特長カード（青の一言とアイコンを横並び＋見出し＋本文）
 * .p-energy-system-building-card-container — 並べる親（3列）
 * Figma: sb-cards の Feature (reform)（1679:258）
 * ============================================================ */
.p-energy-system-building-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

/* 1行目に青の一言とアイコンを横並び（上下中央）、その下に見出し・本文を全幅（2026-09-17 ユーザー指示）。
   HTML はアイコンが先頭のままなので、grid で位置を決める */
.p-energy-system-building-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: var(--space-8) var(--space-12);
  padding: 22px;
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
  background: var(--color-white);
}

.p-energy-system-building-card__icon {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 60px;
  height: 60px;
  color: var(--color-brand);
}

.p-energy-system-building-card__english {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  word-break: keep-all; /* 狭い幅では「30% / DOWN」「約 / 2倍」ではなく空白の位置で折り返す */
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-brand);
}

.p-energy-system-building-card__title {
  grid-column: 1 / -1;
  word-break: auto-phrase; /* 「抑え／られる」のような途中の折り返しを避ける（対応ブラウザのみ） */
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.p-energy-system-building-card__text {
  grid-column: 1 / -1;
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* ============================================================
 * .p-energy-schedule — 工期比較（凡例＋日数比の積み上げ横棒2本＋まとめ）
 * 各区間の幅は style="--days: 75" を 180日（在来工法の合計）で割って決める。--start は開始日（SPの帯で使う）
 * Figma: koki-hikaku（1679:275）
 * ============================================================ */
.p-energy-schedule {
  --color-schedule-material: #b8d1e8;
  --color-schedule-factory:  #4d85ba;
  --color-schedule-site:     var(--color-brand);
  padding: var(--space-24);
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
  background: var(--color-white);
}

.p-energy-schedule__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-24);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: #737a85;
}

.p-energy-schedule__legend li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.p-energy-schedule__legend li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--swatch);
}

.p-energy-schedule__row {
  margin-top: 13px;
}

.p-energy-schedule__row + .p-energy-schedule__row {
  margin-top: var(--space-28);
}

.p-energy-schedule__row-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-ink);
}

.p-energy-schedule__row--new .p-energy-schedule__row-header {
  color: var(--color-brand);
}

.p-energy-schedule__bar {
  display: flex;
  height: 32px;
  overflow: hidden;
  border-radius: 6px;
}

.p-energy-schedule__segment {
  flex: 0 0 calc(var(--days) / 180 * 100%);
  overflow: hidden;
  padding: var(--space-8) var(--space-10);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  white-space: nowrap;
  color: var(--color-white);
}

.p-energy-schedule__segment--material { background: var(--color-schedule-material); color: var(--color-ink); }
.p-energy-schedule__segment--factory  { background: var(--color-schedule-factory); }
.p-energy-schedule__segment--site     { background: var(--color-schedule-site); }

/* 短縮分は赤で目立たせる（2026-09-18 先方「この部分が重要（赤系で目立たす）」）。薄い赤の地＋赤の枠＋赤の太字 */
.p-energy-schedule__segment--saved {
  padding-left: var(--space-12);
  border-radius: 0 6px 6px 0;
  background: var(--color-emphasis-tint);
  box-shadow: inset 0 0 0 2px var(--color-emphasis);
  color: var(--color-emphasis);
}

.p-energy-schedule__summary {
  margin-top: var(--space-20);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.p-energy-schedule__note {
  margin-top: var(--space-8);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: #737a85;
}

/* ============================================================
 * .p-energy-benefit-card — 太陽光のメリットカード（見出し＋右アイコン＋本文＋任意でミニ棒グラフ）
 * .p-energy-benefit-card-container — 並べる親（2列）
 * Figma: benefit-cards の Feature (reform)（1679:303 他）
 * ============================================================ */
.p-energy-benefit-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 行ごとの高さは中身に合わせる（2026-09-17：下段にも図・項目を入れたので、全行を揃えると上段の下が空く）。同じ行の2枚は grid の stretch で揃う */
  gap: var(--space-20);
}

.p-energy-benefit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 22px;
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
  background: var(--color-white);
}

/* 見出しとアイコンを横並びで上下中央（2026-09-17 ユーザー「アイコン小さくて見にくい」「位置も不自然」。
   上揃えだと1行の見出しの横に52pxのアイコンが下へはみ出して、見出しと本文の間が不自然に空いていた） */
.p-energy-benefit-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.p-energy-benefit-card__title {
  flex: 1;
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.p-energy-benefit-card__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  color: var(--color-brand);
}

/* グラフの出典 */
.p-energy-benefit-card__source {
  font-size: var(--font-size-label-small);
  line-height: var(--line-height-label);
  color: var(--color-text-mute);
}

/* 出典のリンク（外部サイト・別タブ）。文字色は出典と同じで下線、末尾に外部リンクのアイコン */
.p-energy-benefit-card__source-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.p-energy-benefit-card__source-link:hover { color: var(--color-brand); }

.p-energy-benefit-card__source-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.125em;
}

/* 余剰電力の活用例（余剰電力 → 売電／蓄電池の活用）。先方資料「太陽光発電システム」の図より */
.p-energy-surplus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-20);
}

.p-energy-surplus__source {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-14);
  border-radius: var(--radius-6);
  background: var(--color-brand);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-white);
}

.p-energy-surplus__list {
  display: grid;
  gap: var(--space-8);
}

.p-energy-surplus__item {
  position: relative;
  word-break: auto-phrase;
  padding: var(--space-10) var(--space-14);
  border-radius: var(--radius-6);
  background: var(--color-brand-tint);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* 左の「余剰電力」から出る矢印（間隔20pxの中に置く） */
.p-energy-surplus__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  border: 6px solid transparent;
  border-left: 9px solid var(--color-brand);
  border-right: 0;
  transform: translateY(-50%);
}

.p-energy-surplus__title {
  display: block;
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-body);
  color: var(--color-brand);
}

/* BCP対策としての太陽光発電＋蓄電池（3項目）。先方資料より */
.p-energy-bcp-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-16);
}

.p-energy-bcp-list dt,
.p-energy-bcp-list dd {
  word-break: auto-phrase;
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body);
}

.p-energy-bcp-list dt {
  font-weight: 700;
  color: var(--color-brand);
}

.p-energy-bcp-list dd { color: var(--color-ink-soft); }

.p-energy-benefit-card__text {
  /* 「通常の電気料/金」「6/円」のように語や数値の途中で折り返さないよう、文節で折り返す（対応ブラウザのみ。非対応は通常の折り返し） */
  word-break: auto-phrase;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* ミニ棒グラフ：棒の長さは style="--ratio: 90%" で指定 */
.p-energy-mini-chart {
  display: grid;
  /* 項目名と数値の列は文字に合わせる（15pxで「通常の電気料金」「15〜18円」が折り返さないように） */
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px var(--space-12);
}

.p-energy-mini-chart dt {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: #737a85;
}

.p-energy-mini-chart dd {
  display: contents;
}

.p-energy-mini-chart__bar {
  width: var(--ratio);
  height: 18px;
  border-radius: 9px;
  background: #d9dee3;
}

.p-energy-mini-chart__value {
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  text-align: right;
  color: var(--color-ink);
}

.p-energy-mini-chart .is-highlight,
.p-energy-mini-chart .is-highlight + dd .p-energy-mini-chart__value { color: var(--color-brand); }
.p-energy-mini-chart .is-highlight + dd .p-energy-mini-chart__bar  { background: var(--color-brand); }

/* ============================================================
 * .p-energy-chart-panel — グラフ3枚を並べる親（上：価格＝全幅／下：効率2つ＝2列）
 * .p-energy-chart — グラフ1枚のカード（タイトル → 説明 → グラフ）
 * .p-energy-chart--price — 価格：横長の折れ線＋右に要点（.p-energy-price-summary が凡例を兼ねる）
 * .p-energy-bar-chart — 棒グラフ（棒の高さは style="--height: 82.5px"、色は --bar-color）
 * Figma: panel-charts（1679:325）。2026-09-18 ユーザー「中もっと整頓して整理」で、1つの枠に3列 → カード3枚に組み替え
 * ============================================================ */
.p-energy-chart-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.p-energy-chart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-24);
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
  background: var(--color-white);
}

.p-energy-chart--price { grid-column: 1 / -1; }

.p-energy-chart__title {
  word-break: keep-all; /* 狭い幅で「（万円/kW）」の途中で折り返さないよう、括弧の前で折り返す */
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

/* グラフの読み方の説明（2026-09-18 先方「説明がないと分からない」）。
   下の2枚は説明の長さが違うので、下の余白を auto にしてグラフをカードの下端にそろえる（2つの棒の基準線が横一列になる） */
.p-energy-chart__description {
  margin-top: var(--space-6);
  margin-bottom: auto;
  word-break: auto-phrase; /* 「導入費／用」のような切れ方を避ける（対応ブラウザのみ） */
  font-size: var(--font-size-label);
  line-height: var(--line-height-body);
  color: var(--color-ink-soft);
}

/* 価格：左に横長の折れ線、右に要点 */
.p-energy-chart__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  gap: var(--space-40);
  margin-top: var(--space-20);
}

/* SVG グラフの中の文字：SVG は枠の幅に合わせて伸び縮みするので、js/pages/energy.js が測った縮尺（--chart-scale）で割り戻し、
   どの幅でも表示が --font-size-label（15px）になるようにする。JS が動かないときは縮尺1として扱う */
.p-energy-chart__graphic text,
.p-energy-payback__chart text {
  font-size: calc(var(--chart-font-size, var(--font-size-label)) / var(--chart-scale, 1));
}

.p-energy-chart__graphic {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* 価格の折れ線は横長（--wide）と SP 用の縦長（--narrow）の2枚。SP で出し分ける */
.p-energy-chart__graphic--narrow { display: none; }

/* 価格の要点。左の線の色＝グラフの線の色（凡例を兼ねる） */
.p-energy-price-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.p-energy-price-summary__item {
  padding-left: var(--space-16);
  border-left: 3px solid var(--color-brand);
}

.p-energy-price-summary__item--industrial { border-left-color: #9ebfde; }

.p-energy-price-summary__label {
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-ink);
}

.p-energy-price-summary__value {
  margin-top: var(--space-4);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  color: var(--color-text-mute);
}

.p-energy-price-summary__value strong {
  font-size: var(--font-size-heading-1);
  font-weight: 700;
  color: var(--color-ink);
}

.p-energy-price-summary__unit {
  margin-left: var(--space-4);
  font-size: var(--font-size-label-small);
}

.p-energy-price-summary__change {
  margin-top: var(--space-4);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.p-energy-bar-chart {
  margin-top: 22px;
}

.p-energy-bar-chart__plot {
  position: relative;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  align-items: end;
  height: 224px;
  padding-inline: var(--bar-padding, 0px);
  border-bottom: 2px solid #d9dee3;
}

.p-energy-bar-chart__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.p-energy-bar-chart__value {
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-ink);
}

.p-energy-bar-chart__bar {
  width: var(--bar-width, 34px);
  height: var(--height);
  border-radius: 2px 2px 0 0;
  background: var(--bar-color);
}

.p-energy-bar-chart__axis {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding-inline: var(--bar-padding, 0px);
  margin-top: 6px;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  text-align: center;
  color: #737a85;
}

/* 理論限界などの破線（下からの高さを style="--position: 161.7px"） */
.p-energy-bar-chart__limit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--position);
  border-top: 2px dashed #d95959;
  font-size: var(--font-size-label);
  line-height: 1;
  color: #bf5959;
}

/* 文字が長く右端の棒の数値に重なるので、左の低い棒の上に収まる幅で「理論限界」の後ろ（空白）で折り返す */
.p-energy-bar-chart__limit span {
  position: absolute;
  left: 4px;
  bottom: 4px;
  max-width: 60%;
  line-height: var(--line-height-label);
  word-break: keep-all;
}

.p-energy-bar-chart--wide {
  --bar-width: 60px;
  --bar-padding: 4px;
}

/* ============================================================
 * .p-energy-payback — 回収シミュレーション（折れ線SVG＋比較表）
 * Figma: roi-block（1679:333）
 * ============================================================ */
.p-energy-payback {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: var(--space-24);
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
  background: var(--color-white);
}

.p-energy-payback__chart {
  flex: 1;
  min-width: 0;
  overflow: visible;
}

/* 文字15pxで、横軸の年と縦軸の「-300」、回収点の2つのラベルと点が重ならないよう離す（SVG の単位） */
.p-energy-payback__axis-x { transform: translateY(6px); }
.p-energy-payback__callout { transform: translateY(8px); }
.p-energy-payback__callout--subsidy { transform: translateY(-6px); }

/* SP だけ使う HTML の凡例（PC は SVG 内の凡例） */
.p-energy-payback__legend { display: none; }

.p-energy-payback__table {
  flex: 0 0 380px; /* 15pxで「約32万円／年」「回収完了（損益分岐）」が折り返さない幅 */
  padding: var(--space-14) var(--space-16);
  border-radius: var(--radius-8);
  background: var(--color-surface-muted);
}

.p-energy-payback__table table {
  width: 100%;
}

.p-energy-payback__table th,
.p-energy-payback__table td {
  padding: 13px 0;
  text-align: center;
  vertical-align: middle;
}

.p-energy-payback__table thead th:first-child { text-align: left; }

.p-energy-payback__table thead th {
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #d9dee3;
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: #737a85;
}

.p-energy-payback__table tbody tr + tr > * {
  border-top: 2px solid #e0e8f0;
}

.p-energy-payback__table tbody th {
  white-space: nowrap; /* 「回収完了（損益分岐）」を1行に。列の幅は文字に合わせる */
  font-size: var(--font-size-label);
  font-weight: 400;
  line-height: var(--line-height-label);
  text-align: left;
  color: var(--color-ink);
}

.p-energy-payback__table td {
  white-space: nowrap;
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-ink);
}

.p-energy-payback__table .is-subsidy {
  color: var(--color-brand);
}

/* ============================================================
 * .p-energy-life-card — 寿命カード（見出し＋大きな年数＋説明）
 * .p-energy-life-card-container — 並べる親（2列）
 * Figma: lifecycle-card（1918:219）
 * ============================================================ */
.p-energy-life-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20);
}

.p-energy-life-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-20) 22px 22px;
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-8);
  background: var(--color-white);
}

.p-energy-life-card__title {
  font-size: var(--font-size-title-small);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-ink);
}

.p-energy-life-card__value {
  margin-top: var(--space-8);
  font-size: var(--font-size-heading-1);
  font-weight: 700;
  line-height: var(--line-height-label);
  color: var(--color-brand);
}

.p-energy-life-card__text {
  margin-top: var(--space-10);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: #737a85;
}

/* ============================================================
 * 本文幅が940pxを切る幅（979px以下）：グラフ3つを3列に並べると目盛りが入らない
 * ============================================================ */
@media (max-width: 979px) {
  /* 3列のカードが細くなるので、アイコンを小さくして青の一言の幅を確保 */
  .p-energy-system-building-card__icon {
    width: 44px;
    height: 44px;
  }

  /* 価格：要点はグラフの下に横並び */
  .p-energy-chart__body {
    grid-template-columns: 1fr;
    gap: var(--space-20);
  }

  .p-energy-price-summary {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-16) var(--space-40);
  }

  /* 回収シミュレーション：グラフと表を縦に。凡例は HTML に出す（SVG 内の凡例は縮尺で重なるため） */
  .p-energy-payback {
    flex-direction: column;
    gap: var(--space-16);
  }

  .p-energy-payback__chart { width: 100%; }
  .p-energy-payback__chart-legend { display: none; }

  .p-energy-payback__table {
    flex-basis: auto;
    width: 100%;
  }
}

/* ============================================================
 * SP（767px以下）
 * ============================================================ */
@media (max-width: 767px) {
  /* 2カラムだと本文の列が細すぎるので、バッジ＋見出しを横並び、本文は下に全幅 */
  .p-energy-skill {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-12) var(--space-14);
    padding: var(--space-16);
  }

  .p-energy-skill__body { display: contents; }

  .p-energy-skill__badge {
    width: 72px;
    height: 72px;
  }

  .p-energy-skill__text { grid-column: 1 / -1; }

  /* BCPの3項目：横に並べると説明の列が細すぎるので、項目名の下に説明 */
  .p-energy-bcp-list { grid-template-columns: 1fr; }
  .p-energy-bcp-list dd {
    padding-top: 0;
    border-top: 0;
  }



  .p-energy-earthquake-box-container,
  .p-energy-system-building-card-container,
  .p-energy-benefit-card-container,
  .p-energy-life-card-container {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  /* 1列になるので高さは揃えない（揃えると短いカードの下が空く） */
  .p-energy-benefit-card-container {
    grid-auto-rows: auto;
  }

  .p-energy-earthquake-box__header { padding: var(--space-12) var(--space-16); }
  .p-energy-earthquake-box__body { padding: 0 var(--space-16) var(--space-16); }

  .p-energy-schedule { padding: var(--space-16); }

  /* 横スクロールにすると2本の長さを一度に比べられないので、帯は幅に収めたまま、
     区間の文字は帯の下に「色見本＋区間名＋日数」の内訳として並べる。
     帯の色は各区間の ::before を style="--start: 75"（開始日）と --days で置く */
  .p-energy-schedule__legend { display: none; } /* 内訳に色見本が付くので不要 */

  .p-energy-schedule__row-header {
    margin-bottom: var(--space-8);
  }

  .p-energy-schedule__bar {
    position: relative;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-16);
    height: auto;
    padding-top: 34px; /* 帯22＋間12 */
    overflow: visible;
    border-radius: 0;
  }

  .p-energy-schedule__segment {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    overflow: visible;
    padding: 0;
    background: none;
    font-weight: 500;
    color: var(--color-ink);
  }

  /* 帯の区間 */
  .p-energy-schedule__segment::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--start) / 180 * 100%);
    width: calc(var(--days) / 180 * 100%);
    height: 22px;
    background: var(--segment-color);
  }

  .p-energy-schedule__segment:first-child::before { border-radius: 4px 0 0 4px; }
  .p-energy-schedule__segment:last-child::before  { border-radius: 0 4px 4px 0; }

  /* 内訳の色見本 */
  .p-energy-schedule__segment::after {
    content: "";
    order: -1;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--segment-color);
  }

  .p-energy-schedule__segment--material { --segment-color: var(--color-schedule-material); }
  .p-energy-schedule__segment--factory  { --segment-color: var(--color-schedule-factory); }
  .p-energy-schedule__segment--site     { --segment-color: var(--color-schedule-site); }

  /* 短縮分は内訳の中で一番目立たせる（PC と同じ赤） */
  .p-energy-schedule__segment--saved {
    --segment-color: var(--color-emphasis-tint);
    font-weight: 700;
    color: var(--color-emphasis);
    box-shadow: none;
  }

  .p-energy-schedule__segment--saved::before,
  .p-energy-schedule__segment--saved::after { box-shadow: inset 0 0 0 2px var(--color-emphasis); }

  .p-energy-schedule__summary { line-height: var(--line-height-heading); }

  /* 横に並べると潰れるので1枚ずつ縦に */
  .p-energy-chart-panel {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .p-energy-chart { padding: var(--space-16); }

  .p-energy-chart__graphic--wide { display: none; }
  .p-energy-chart__graphic--narrow { display: block; }

  .p-energy-price-summary { gap: var(--space-16) var(--space-32); }

  /* 5本の棒グラフの年（「2010年頃」）は、SP の幅では15pxだと折り返すのでここだけ13px（3本のグラフは15pxで入る） */
  .p-energy-bar-chart:not(.p-energy-bar-chart--wide) .p-energy-bar-chart__axis { font-size: var(--font-size-label-small); }

  .p-energy-payback { padding: var(--space-16); }

  /* 左下の「-300」と「0年」、右端の「24年」がはみ出す・重なるので、両端の年を内側へ寄せる */
  .p-energy-payback__axis-x text:first-child { text-anchor: start; }
  .p-energy-payback__axis-x text:last-child { text-anchor: end; }

  .p-energy-payback__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-16);
    font-size: var(--font-size-label);
    line-height: var(--line-height-label);
    color: #737a85;
  }

  .p-energy-payback__legend li {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .p-energy-payback__legend li::before {
    content: "";
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: #9ebfde;
  }

  .p-energy-payback__legend .is-subsidy { font-weight: 700; color: var(--color-brand); }
  .p-energy-payback__legend .is-subsidy::before { background: var(--color-brand); }

  /* 表：項目名を上に1行、その下に「なし｜あり」の数字を大きく2列 */
  .p-energy-payback__table {
    padding: var(--space-12) var(--space-16) var(--space-4);
  }

  .p-energy-payback__table table,
  .p-energy-payback__table thead,
  .p-energy-payback__table tbody { display: block; }

  .p-energy-payback__table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-12);
  }

  .p-energy-payback__table thead th:first-child { display: none; }

  .p-energy-payback__table thead th {
    padding-bottom: var(--space-8);
  }

  .p-energy-payback__table tbody th {
    grid-column: 1 / -1;
    width: auto;
    padding: var(--space-14) 0 var(--space-4);
    color: #555;
  }

  .p-energy-payback__table tbody td {
    padding: 0 0 var(--space-14);
    font-size: var(--font-size-title-small);
  }

  .p-energy-payback__table tbody tr + tr > * { border-top: 0; }
  .p-energy-payback__table tbody tr + tr { border-top: 2px solid #e0e8f0; }
}