/* リノベーション個別ページ — セクションの視覚仕上げとレスポンシブ（C11）。
   機能CSS（FV 枠・価格ブロック・費用モーダル・★D の slot）は renovation.css。
   ⛔ rem を font-size に使わない。common.css:3-4 が `html { font-size: 62.5% }` を
      置いているので 1rem = 10px であり、rem で書くと意図の 1/10 の大きさになる
      （実測 2026-09-06: 概要カードのラベルが 0.84rem = 8.4px で読めなかった）。px で書く。
   ⛔ 全セレクタを body.single-renovation でスコープすること。
   ⛔ アーカイブ一覧と工務店LP のリノベカードのスタイルは子テーマの style.css 側。
      このファイルは single 専用（C11 裁定 A）。 */

/* ==========================================================================
   リノベーション評価（概要カード ＋ レーダーチャートの 2 カラム）
   ========================================================================== */

/* 見出しは全幅、その下を概要とチャートの 2 カラムに割る。
   .container は共有クラスなのでセクション配下に限って grid にする。 */
body.single-renovation .renovation-evaluation .container {
  display: grid;
  /* 概要とチャートを 1:1 で並べる */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  /* 行間は見出し → 内容の間隔そのもの。他セクションの見出し下（40px）に揃える。
     列間は概要とチャートの間隔。 */
  column-gap: 48px;
  row-gap: 40px;
}

body.single-renovation .renovation-evaluation .container>.renovation-section-ttl {
  grid-column: 1 / -1;
  /* grid の row-gap(40px) が「見出し → 内容」の間隔を受け持つ。ここで
     .renovation-section-ttl の margin-bottom(40px) を残すと 40+40=80px 空く。 */
  margin-bottom: 0;
}

/* 工務店LP から持ち込んだセクション見出し。
   意匠（英語・罫線・日本語の 3 段と inview のアニメーション）は親テーマ lp.css の
   .gallery-ttl-en / .gallery-border* が持つ。ここで足すのは
   LP 側で h2 に効いていた分だけ —
   LP は `#works-gallery h2 { display:inline-block }` で罫線を文字幅に合わせるが、
   リノベーション単票にその id は無いので同じ指定を自前で持つ。 */
body.single-renovation .renovation-section-ttl {
  /* ⛔ display:inline-block にしない。評価セクションの見出しは grid item
     （grid-column: 1 / -1）なので inline-block は block へ blockify され、
     罫線が文字幅ではなく container 幅（実測 1200px）まで伸びる。
     width の指定なら grid item でも効く。 */
  width: fit-content;
  margin-bottom: 40px;
}

/* lp.css の .f-40 は 4vw。LP は全幅レイアウトなので成立するが、こちらは container 幅で、
   広い画面では大きくなりすぎ、スマートフォンでは逆に小さくなりすぎる
   （実測 414px 幅で 16.56px。すぐ下の日本語 15px とほぼ並び、見出しに見えない）。
   ⚠ ここだけは LP と厳密には同じにならない。下限を持たせる方を採る。 */
body.single-renovation .renovation-section-ttl .gallery-ttl-en {
  font-size: clamp(26px, 4vw, 44px);
}

/* ⛔ 日本語の小見出しはサイト本文と同じゴシックのまま保つ。
   min / gothic を h2 に付けるのは lp.css の `.min .font-style` / `.gothic .font-style`
   （英語のフォント）を効かせるためだが、min のときは common.css:68 の
   `.min { font-family: 'Noto Serif JP', serif }` が h2 自身にも当たり、
   日本語まで明朝になってしまう。LP は #primary に付けるのでページ全体が明朝で揃うが、
   こちらは本文がゴシックのページなので、この 1 行だけ明朝になるのは持ち込みの範囲外。
   （common.css:8 の body と同じ指定） */
body.single-renovation .renovation-section-ttl .gallery-ttl {
  font-family: 'Noto Sans JP', sans-serif;
}

body.single-renovation .renovation-evaluation-overview {
  padding: 26px 30px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background: #fff;
}

body.single-renovation .renovation-evaluation-list {
  margin: 0;
}

/* 任意項目の dl は必須項目の dl と区切り線で分ける。
   モックは区切り用の 1 要素を持つが、実装は dl を 2 本に分けているので
   2 本目の上辺を区切り線として使う。 */
body.single-renovation .renovation-evaluation-list-optional {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #dedede;
}

body.single-renovation .renovation-evaluation-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid #dedede;
}

body.single-renovation .renovation-evaluation-list .renovation-evaluation-row:last-child {
  border-bottom: none;
}

body.single-renovation .renovation-evaluation-row dt {
  margin: 0;
  color: #292929;
  font-size: 14px;
  font-weight: 400;
}

body.single-renovation .renovation-evaluation-row dd {
  flex: 0 0 auto;
  margin: 0;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* バッジの色は 3 系統（EvaluationVisibility::badgeTone）。
   モックの style.css 545-565 に合わせる:
   取得済み → 紺 / 等級 → 金 / 未取得・対応不可 → 灰。
   ⛔ 未取得を取得済みと同じ紺にしない。「無」「対応不可」が認定バッジに読める。
   ⛔ 等級を取得済みと同じ紺にしない。BRONZE と GOLD の差が消える。 */
body.single-renovation .renovation-evaluation-row dd.renovation-evaluation-value-affirmative {
  background: #e7ecf5;
  color: #1c2b4a;
}

/* GOLD はモックの実数値（#f7ecd3 / #96690f）。
   ⚠ SILVER / BRONZE はモックに無いので、同じ「金属の淡色＋濃い同系文字」の作りで
      こちらが決めた。等級同士が並んだときに区別がつくことを優先している。 */
body.single-renovation .renovation-evaluation-row dd.renovation-evaluation-value-gold {
  background: #f7ecd3;
  color: #96690f;
}

body.single-renovation .renovation-evaluation-row dd.renovation-evaluation-value-silver {
  background: #eaecee;
  color: #5e6a72;
}

body.single-renovation .renovation-evaluation-row dd.renovation-evaluation-value-bronze {
  background: #f2e5da;
  color: #8a5a34;
}

body.single-renovation .renovation-evaluation-row dd.renovation-evaluation-value-muted {
  background: #eeeeec;
  color: #6f6f6f;
  font-weight: 500;
}

/* 見出しの下線を工務店カラーにする。親テーマ post.css の `.model-house li h3`（コンセプト紹介の
   小見出し）と `.detail-block h2`（床面積・施工面積・評価指標・仕様）は #3a9ab6 固定で、
   リノベ単票ではここだけ工務店カラーが当たっていなかった。
   色はテンプレートが .renovation-accent-scope の style に --renovation-accent で渡す。
   ここはその値が無いときの既定（LandingPageTheme::DEFAULT_ACCENT と同値）。
   ⚠ VR 単票などは同じ親 CSS を使うが、範囲外（body.single-renovation に限る）。 */
body.single-renovation .model-house li h3,
body.single-renovation .detail-block h2 {
  border-bottom-color: var(--renovation-accent, #3796b7);
}

/* 評価線・平均線の色はチャート本体と凡例で同じ値を使う。定義元をここ 1 か所に
   まとめ、SVG 側と凡例側は var() で参照する（色の二重管理をしない）。
   評価線は見出し <h2> と同じアクセント色で、テンプレートが
   .renovation-radar の style に --renovation-radar-data を差し込む。
   ここはその値が無いときの既定（LandingPageTheme::DEFAULT_ACCENT と同値）。 */
body.single-renovation .renovation-radar {
  --renovation-radar-data: #3796b7;
  --renovation-radar-average: #879db4;
  min-width: 0;
}

/* ラベルを大きくすると外周ラベルが viewBox から数 px はみ出す。枠で切れないよう
   はみ出しを許可する（はみ出し先は column の余白 / container の padding 内）。 */
/* The chart is replaced content. Without an explicit size its `width:auto` falls
   back to the default replaced-element size (300px wide) in some Safari versions,
   so an inline SVG with only a viewBox does not fill the slot (measured on the
   reporter's Safari: SVG 300px wide, grid ~77% of the slot). Do not rely on the
   browser's intrinsic-size heuristics: fill the 460:440 slot explicitly.
   ⛔ Keep width/height. Chrome resolves auto to 100%, Safari to 300px. */
body.single-renovation .renovation-radar-slot>svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* レーダーチャートの線。
   ⚠ SVG 側は stroke="currentColor" なので、指定が無いと本文の色（#3e3a35）を継ぎ、
      1px でも太く濃く見える。罫線は薄いグレーで置く。 */
body.single-renovation .renovation-radar-slot .radar-grid,
body.single-renovation .renovation-radar-slot .radar-axes {
  stroke: #e2e2e0;
  stroke-width: 1;
}

/* 一番外側の五角形だけはチャートの枠として太くする（内側の目盛りは 1 のまま）。 */
body.single-renovation .renovation-radar-slot .radar-grid .radar-grid-outer {
  stroke-width: 2.5;
}

body.single-renovation .renovation-radar-slot .radar-labels {
  fill: #2b2b2b;
  font-size: 16px;
}

/* 値の数字だけ評価線と同じ色にする（軸名・単位は本文色のまま）。色はチャート本体と
   同じ CSS 変数を参照し、二重管理にしない。 */
body.single-renovation .renovation-radar-slot .radar-label-value {
  fill: var(--renovation-radar-data);
  font-size: 18px;
  font-weight: 700;
}

body.single-renovation .renovation-radar-slot .radar-value-unit {
  font-size: 13px;
}

/* 線の太さは SVG 側が --radar-data-stroke / --radar-average-stroke で渡し、
   ドット半径（r）も評価線の太さから算出する。ここでは色だけを持ち、太さの
   二重管理をしない。 */
body.single-renovation .renovation-radar-slot .radar-data {
  fill: var(--renovation-radar-data);
  fill-opacity: 0.18;
  stroke: var(--renovation-radar-data);
  stroke-width: var(--radar-data-stroke, 3);
  stroke-linejoin: round;
}

body.single-renovation .renovation-radar-slot .radar-average {
  fill: #000000;
  fill-opacity: 0.03;
  stroke: var(--renovation-radar-average);
  stroke-width: var(--radar-average-stroke, 3);
  stroke-dasharray: 4 3;
}

/* チャート下の凡例。線見本はチャート本体と同じ var() を参照する。
   平均線があるときだけ SVG 側が 2 つ目の項目を出す。 */
body.single-renovation .renovation-radar-slot .radar-legend-label {
  fill: #6f6f6f;
  /* チャート本体の軸名（16px）より小さく、凡例として控えめにする。 */
  font-size: 13px;
}

body.single-renovation .renovation-radar-slot .radar-legend-data .radar-legend-swatch {
  stroke: var(--renovation-radar-data);
  /* チャートの評価線と見た目の太さを揃える。水平な見本は同じ太さでも細く
     見えるため +0.5 する。 */
  stroke-width: calc(var(--radar-data-stroke, 3) + 0.5);
}

body.single-renovation .renovation-radar-slot .radar-legend-average .radar-legend-swatch {
  stroke: var(--renovation-radar-average);
  /* 平均線の見本も同じ理由で +0.5。 */
  stroke-width: calc(var(--radar-average-stroke, 3) + 0.5);
  stroke-dasharray: 4 3;
}

body.single-renovation .renovation-radar-slot .radar-data-point {
  fill: var(--renovation-radar-data);
}

body.single-renovation .renovation-radar-slot .radar-data-point-missing {
  fill: #fff;
  stroke: #9aa0a6;
  stroke-width: 1.5;
}

/* 評価線・平均線の登場アニメーション。チャート中心を基準に scale(0)=全軸0 から
   scale(1)=実値へ拡大する（レーダーは中心からの放射なので一様な拡大が
   「各軸の値 0→実値」と等価）。平均線を 0.5 秒で描き、平均線があるときは
   それが終わった直後（0.5 秒遅延）から評価線を 0.5 秒で描く。イージングは
   両者共通。平均線が無い投稿では評価線を即時に描く（空白の待ちを作らない）。
   ⚠ 初期状態を隠すのは JS が .is-armed を付けたときだけ。JS 無効でも実値で出る。 */
body.single-renovation .renovation-radar-slot .radar-data-layer,
body.single-renovation .renovation-radar-slot .radar-average-layer {
  /* transform-origin は SVG が style 属性で出す（RadarChartRenderer の中心）。 */
  transform-box: view-box;
}

body.single-renovation .renovation-radar-slot.is-armed .radar-data-layer,
body.single-renovation .renovation-radar-slot.is-armed .radar-average-layer {
  transform: scale(0);
}

/* 平均線が先（0.5 秒、遅延なし）。 */
body.single-renovation .renovation-radar-slot.is-armed.is-visible .radar-average-layer {
  animation: renovation-radar-grow 0.5s cubic-bezier(0, 0, 0.15, 1) forwards;
}

/* 評価線は 0.5 秒。平均線があるときだけ、その完了直後（+0.5 秒）から始める。 */
body.single-renovation .renovation-radar-slot.is-armed.is-visible .radar-data-layer {
  animation: renovation-radar-grow 0.5s cubic-bezier(0, 0, 0.15, 1) forwards;
}

body.single-renovation .renovation-radar-slot.is-armed.is-visible:has(.radar-average-layer) .radar-data-layer {
  animation-delay: 0.5s;
}

@keyframes renovation-radar-grow {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-renovation .renovation-radar-slot.is-armed .radar-data-layer,
  body.single-renovation .renovation-radar-slot.is-armed .radar-average-layer {
    transform: none;
  }

  body.single-renovation .renovation-radar-slot.is-armed.is-visible .radar-data-layer,
  body.single-renovation .renovation-radar-slot.is-armed.is-visible .radar-average-layer {
    animation: none;
  }
}

body.single-renovation .renovation-radar-slot .radar-label-missing,
body.single-renovation .renovation-radar-slot .radar-label-note {
  fill: #9aa0a6;
}

body.single-renovation .renovation-radar-slot .radar-label-note {
  font-size: 12px;
}

/* ==========================================================================
   評価指標（.detail-block_05）
   ========================================================================== */

/* 親 post.css は .detail-block_02〜_04 にしか .label / .data の幅を与えて
   いない。_05 は同じマークアップなのに規則が無く、ラベルと値が繋がって
   描画される（実測）。_04 と同じ配分を _05 にも与える。 */
body.single-renovation .detail-block_05 {
  width: 100%;
  /* 親 post.css は _02/_03 にしか margin-bottom を置いていないので、_05 と
     次の _04（仕様）が接してしまう。_02/_03 と同じ 4% を与える。 */
  margin-bottom: 4%;
}

/* モック style.css:781-797 の .performance-row に合わせる:
   ラベルは 180px 固定・太字、値は残り全部。
   ⚠ 親の _02〜_04 は % 幅なので、ここだけ固定幅にすると他の detail-block と
      揃わないように見えるが、モックも評価指標だけ固定幅（180px）で他とは別扱い。 */
body.single-renovation .detail-block_05 .label {
  /* モックの .performance-row dt は 180px だが、モックの 1rem は 15px 基準で
     ラベルが 0.86rem ≒ 13px。こちらは親テーマの .detail-block を継いで 17px なので、
     同じ 180px では最長ラベルが収まらない。
     ⛔ 幅は「最長ラベルが 1 行に収まること」で決める。テーマは全要素 border-box なので
        padding-right 28px は width の内側に入る。
     2026-10-05 更新（表示から「一次」を外した。最長ラベルは「BEI　エネルギー消費量等級」）。
     実測（staging・算出済みスタイル weight 700 のまま計測）。文字サイズは画面幅で変わり、
     1100px 以上は 17px / letter-spacing 0.85px、1024px 以下は 16px / 0.8px。幅は大きい方で決める:
                                         17px        16px
        「BEI　エネルギー消費量等級」     226.55px    213.22px  → 230 + 28 = 258px
        「気密性能　C値」                 119.13px    112.11px
        「工事価格」「断熱等級」「耐震性能」 71.41px   67.20px
        （参考）旧「BEI　一次エネルギー消費量等級」 262.25px → 旧幅 298px
     ⛔ 判定は「行数」で見ること。scrollWidth も要素の高さも判別できない
        （ラベルは折り返すので横に溢れず、flex item の高さは行の高さに引き伸ばされる）。
        Range.getClientRects().length で実測（17px）: 250px は 2 行・258px は 1 行。 */
  width: 258px;
  flex: 0 0 258px;
  padding-right: 28px;
  font-weight: 700;
}

body.single-renovation .detail-block_05 .data {
  width: auto;
  flex: 1;
  min-width: 0;
  color: #6f6f6f;
}

/* 未取得の指標は控えめに。評価概要のバッジと同じ判断
   （出さないのではなく、取得済みと見分けがつく形で出す）。 */
body.single-renovation .detail-block_05 .data.renovation-metric-missing {
  color: #a5a5a0;
}

@media (max-width: 767px) {
  body.single-renovation .detail-block_05 .label {
    width: 100%;
    flex: 0 0 100%;
    padding-right: 0;
  }

  /* ラベルを全幅にしただけでは値は次の行へ落ちない。
     値の flex-basis が 0 のままだと「100% + 0」で行に収まる判定になり、
     値はラベルの行の右端に幅 0 で残って 1 文字ずつ縦に溢れる
     （実測 393px: 値の幅 0px・「断熱等級3相当」が 7 行）。
     値も全幅にして必ず次の行へ送る。 */
  body.single-renovation .detail-block_05 .data {
    flex: 0 0 100%;
  }
}

/* ==========================================================================
   施工事例スライドショー（slick）
   ========================================================================== */

body.single-renovation .renovation-case-slideshow {
  position: relative;
}

body.single-renovation .renovation-case-main {
  overflow: hidden;
  border: 1px solid #dedede;
  border-radius: 6px;
  background: #f7f7f5;
}

body.single-renovation .renovation-case-slide {
  aspect-ratio: 16 / 9;
}

body.single-renovation .renovation-case-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 矢印は slick が .renovation-case-arrows へ移すが、この箱は高さ 0 なので
   そのままだと slick-theme の top:50% / left:-25px が主画像の外側で解決され、
   画面外へ出る（実測: left -25px / top 450px）。主画像と同じ寸法の
   オーバーレイにして、その中で位置を決める。 */
body.single-renovation .renovation-case-arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
  z-index: 3;
}

body.single-renovation .renovation-case-arrows .slick-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dedede;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  pointer-events: auto;
}

body.single-renovation .renovation-case-arrows .slick-prev {
  left: 18px;
}

body.single-renovation .renovation-case-arrows .slick-next {
  right: 18px;
}

/* slick-theme は 'slick' フォント前提の白い矢印を出す。フォントに依存しない
   文字へ差し替え、白い丸の上で読める色にする。 */
/* ⛔ 矢印に文字（‹ ›）を使わない。グリフは字面の中で上下にも左右にも中心に無く、
   フォント依存の左右のアキも入るので、丸の中で右下へ寄って見える（実測で確認）。
   罫線 2 本を回した図形にすると、寸法だけで決まるのでフォントに左右されない。
   ⛔ slick-theme は :before に position:absolute と 'slick' フォントを当てるので、
   どちらも打ち消してから置く。 */
body.single-renovation .renovation-case-arrows .slick-arrow:before {
  content: '';
  position: static;
  display: block;
  width: 11px;
  height: 11px;
  opacity: 1;
  border-top: 2px solid #1c2b4a;
  border-right: 2px solid #1c2b4a;
}

/* 回した正方形は「見た目の重心」が線の側へ寄るので、線幅の分だけ戻して
   丸の中心に合わせる。 */
body.single-renovation .renovation-case-arrows .slick-prev:before {
  transform: translateX(3px) rotate(-135deg);
}

body.single-renovation .renovation-case-arrows .slick-next:before {
  transform: translateX(-3px) rotate(45deg);
}

/* サムネイルは slick のスライドなので 1 枚ずつ左右 5px の padding を持つ。
   そのままだと列全体が主画像より左右 5px ずつ内側に入って線が揃わない。
   同じ幅だけ外へ引いて、主画像の左右と一致させる。 */
body.single-renovation .renovation-case-thumbs {
  margin: 14px -5px 0;
}

body.single-renovation .renovation-case-thumb {
  padding: 0 5px;
  cursor: pointer;
}

body.single-renovation .renovation-case-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

body.single-renovation .renovation-case-thumb:hover img {
  opacity: 0.85;
}

body.single-renovation .renovation-case-thumb.slick-current img {
  border-color: #1c2b4a;
  opacity: 1;
}

/* ==========================================================================
   Before / After 図面
   ========================================================================== */

body.single-renovation .renovation-ba-plan-list {
  display: flex;
  align-items: center;
  gap: 22px;
}

body.single-renovation .renovation-ba-plan-item {
  flex: 1;
  min-width: 0;
}

body.single-renovation .renovation-ba-plan-item img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #dedede;
  border-radius: 6px;
}

body.single-renovation .renovation-ba-plan-label {
  margin: 0 0 8px;
  color: #646464;
  font-size: 13px;
  font-weight: 700;
}

body.single-renovation .renovation-ba-plan-arrow {
  flex: 0 0 auto;
  padding-top: 20px;
  color: #4a6089;
  font-size: 26px;
}

/* ==========================================================================
   スマートフォン
   モックは PC のみで media query を持たないため、SP はテーマの既存
   ブレークポイント（max-width: 767px）に合わせて実測しながら決めた。
   ========================================================================== */

/* 2 カラムの解除だけは 767px ではなく 991px で行う。
   モックは PC のみで media query を 1 つも持たないため、切替点は実測で決めた:
   幅 768〜991px では概要カードが 200〜364px まで細り、必須ラベルが折り返す。
   991px で 1 カラムへ倒すと全幅で dt が 1 行に収まる（実測で確認）。
   ⚠ 991px はテーマ内で 2 番目に多いブレークポイントでもある。 */
@media (max-width: 991px) {
  body.single-renovation .renovation-evaluation .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  /* 1 カラムになったらチャートを概要カードより上に出す（ユーザー指示 2026-09-06）。
     ⚠ order は grid item にしか効かないので、見出しにも明示の order を与えて
     3 者の順序を確定させる（既定 0 のままだとチャートの -1 が見出しより前へ回る）。 */
  body.single-renovation .renovation-evaluation .container>.renovation-section-ttl {
    order: 0;
  }

  body.single-renovation .renovation-evaluation .renovation-radar {
    order: 1;
  }

  body.single-renovation .renovation-evaluation .renovation-evaluation-overview {
    order: 2;
  }
}

@media (max-width: 767px) {
  body.single-renovation .renovation-evaluation-overview {
    padding: 18px 18px;
  }

  body.single-renovation .renovation-evaluation-row {
    gap: 12px;
    padding: 10px 0;
  }

  body.single-renovation .renovation-case-arrows .slick-arrow {
    width: 34px;
    height: 34px;
  }

  body.single-renovation .renovation-case-arrows .slick-prev {
    left: 8px;
  }

  body.single-renovation .renovation-case-arrows .slick-next {
    right: 8px;
  }

  body.single-renovation .renovation-case-arrows .slick-arrow:before {
    width: 9px;
    height: 9px;
  }

  /* 図面は横に並べると 1 枚あたりが読めない幅になるので縦に積み、
     矢印は下向きにせず回転で向きだけ合わせる。 */
  body.single-renovation .renovation-ba-plan-list {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  body.single-renovation .renovation-ba-plan-arrow {
    padding-top: 0;
    text-align: center;
    transform: rotate(90deg);
  }
}