@charset "utf-8";
/* ==========================================================================
   ご支援実績（一例）　補助金別　
   ========================================================================== */
/* 外枠の初期化とボックスサイジングの強制 */
.hzk-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.hzk-wrapper *,
.hzk-wrapper *::before,
.hzk-wrapper *::after {
  box-sizing: border-box !important;
}

/* フレックスレイアウトの強制固定 */
.hzk-flex-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  width: 100% !important;
}
.hzk-mb-40 {
  margin-bottom: 40px !important;
}

/* 各種カード幅の絶対指定 */
.hzk-card {
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #dcdcdc !important;
  background-color: #fff !important;
  height: auto !important;
}
.hzk-w-66 {
  width: calc(66.666% - 12px) !important;
  flex: 0 0 calc(66.666% - 12px) !important;
}
.hzk-w-33 {
  width: calc(33.333% - 16px) !important;
  flex: 0 0 calc(33.333% - 16px) !important;
}

/* タイドルバー */
.hzk-card-title-bar {
  background-color: #004bb1 !important;
  color: #fff !important;
  padding: 16px 20px !important;
}
.hzk-card-title-bar h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: bold !important;
  color: #fff !important;
}

/* メインコンテンツエリア */
.hzk-card-main-content {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* 【★超重要修正：上部説明テキストブロック全体の高さを270pxに完全固定化】
   これにより、テキスト量が少なくても一律の高さになり、下の「■実績」が水平に揃います */
.hzk-card-main-content > .hzk-split-container,
.hzk-card-main-content > .hzk-lead-text:first-child {
  height: 270px !important;
  min-height: 270px !important;
  margin-bottom: 24px !important;
}

/* 2カラム分割（大規模投資の部分） */
.hzk-split-container {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
}
.hzk-split-column {
  flex: 1 !important;
  width: 50% !important;
}

/* テキスト・リストの干渉除去 */
.hzk-lead-text {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  line-height: 1.6 !important;
}
.hzk-bullet-list {
  margin: 0 0 20px 0 !important;
  padding: 0 0 0 20px !important;
  list-style-type: disc !important;
}
.hzk-bullet-list li {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  display: list-item !important;
}
.hzk-highlight-text {
  color: #004bb1 !important;
  font-weight: bold !important;
}

/* 【★超重要修正：下揃え（margin-top: auto）を解除】 
   上部の高さ固定に従って、自然にその直後から「■実績」が配置されるようにします */
.hzk-results-block {
  margin-top: 0 !important; 
  padding-top: 0 !important;
}
.hzk-section-sub-title {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  font-weight: bold !important;
}
.hzk-table-section-title {
  margin: 20px 0 10px 0 !important;
  padding: 0 !important;
  font-weight: bold !important;
}

/* 実績数字ボックス（横並び強制） */
.hzk-stats-flex {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}
.hzk-stats-flex .hzk-stat-container {
  flex: 1 !important;
  margin-bottom: 0 !important;
}
.hzk-stat-container {
  border: 1px solid #004bb1 !important;
  margin-bottom: 16px !important;
  text-align: center !important;
  width: 100% !important;
}
.hzk-stat-header-label {
  display: block !important;
  background-color: #004bb1 !important;
  color: #fff !important;
  padding: 6px 10px !important;
  font-weight: bold !important;
}
.hzk-stat-body-value {
  margin: 0 !important;
  padding: 16px 10px !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 85px !important; /* ボックス自体の高さも水平に統一 */
}
.hzk-color-blue {
  color: #004bb1 !important;
}
.hzk-font-large {
  letter-spacing: 0.05em !important;
}
.hzk-small-note {
  font-weight: normal !important;
  font-size: 0.8em !important;
  margin-left: 4px !important;
  color: inherit !important;
}

/* テーブルのリセットと再定義 */
.hzk-tables-flex {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  width: 100% !important;
}
.hzk-data-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 0 16px 0 !important;
  display: table !important;
}
.hzk-tables-flex .hzk-data-table {
  margin-bottom: 0 !important;
}
.hzk-data-table tr {
  display: table-row !important;
}
.hzk-data-table th,
.hzk-data-table td {
  border: 1px solid #bcbcbc !important;
  padding: 10px 12px !important;
  display: table-cell !important;
}
.hzk-th-left {
  background-color: #7f7f7f !important;
  color: #fff !important;
  font-weight: normal !important;
  text-align: left !important;
}
.hzk-th-right {
  background-color: #7f7f7f !important;
  color: #fff !important;
  font-weight: normal !important;
  text-align: right !important;
}
.hzk-td-price {
  text-align: right !important;
  background-color: #f9f9f9 !important;
}

/* レスポンシブ対応 (992px以下で縦並びにスイッチ) */
@media (max-width: 992px) {
  .hzk-flex-row {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .hzk-w-66,
  .hzk-w-33 {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  
  /* スマホ時は縦一列になるため、高さの固定指定を解除（自然に縮むように） */
  .hzk-card-main-content > .hzk-split-container,
  .hzk-card-main-content > .hzk-lead-text:first-child {
    height: auto !important;
    min-height: auto !important;
    margin-bottom: 16px !important;
  }
  .hzk-stat-body-value {
    min-height: auto !important;
  }
  
  .hzk-split-container {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .hzk-split-column {
    width: 100% !important;
  }
  .hzk-stats-flex,
  .hzk-tables-flex {
    flex-direction: column !important;
    gap: 12px !important;
  }
}


    .design02 {

     width: 100%;

     text-align: center;

     border-collapse: collapse;

     border-spacing: 0;

    }

    .design02 th {

     padding: 8px;

     background: #e9faf9;

     border: solid 1px #778ca3;

    }

    .design02 td {

     padding: 8px;

     border: solid 1px #778ca3;

    }    

   .design02 tr:first-child {

        padding: 8px;

        border: solid 1px #778ca3;

        background-color:#2F5597;

    }    

.design02 {

     background-color: #ffffff;

} 


/* ==========================================================================
   ご支援実績セクション（修正・最適化版）
   ========================================================================== */

/* ==========================================================================
   ご支援実績セクション（構造適正化・完全版）
   ========================================================================== */

.ex-perf-container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.ex-perf-container *,
.ex-perf-container *::before,
.ex-perf-container *::after {
  box-sizing: border-box;
}

/* 行（セクション）の定義 */
.ex-perf-row {
  display: flex;
  align-items: stretch;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}

.ex-perf-row:first-child {
  border-top: 1px solid #ccc;
}

/* 左側：グレーのラベルボックス共通（1〜3行目用） */
.ex-perf-lead-box {
  flex: 0 0 160px;
  background-color: #dcdcdc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.ex-perf-lead-text {
  font-weight: bold;
  line-height: 1.4;
  font-size: 1.1em;
  color: #333333;
}

/* 右側：コンテンツエリア */
.ex-perf-body {
  flex: 1;
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- 1. 実績セクションのスタイル --- */
.ex-perf-stats-grid {
  display: flex;
  width: 100%;
}

.ex-perf-stat-card {
  flex: 1;
  text-align: center;
  padding: 0 10px;
}

.ex-perf-stat-header {
  background-color: #2b579a;
  color: #ffffff;
  padding: 6px 4px;
  font-weight: bold;
  margin-bottom: 15px;
}

.ex-perf-stat-body {
  display: inline-block;
  white-space: nowrap;
  border-bottom: 2px solid #000000;
}

.ex-perf-number {
  font-weight: 500;
  letter-spacing: -0.05em;
  font-size: 2.4em; 
  line-height: 1;
}

.ex-perf-unit {
  font-weight: normal;
  font-size: 1.2em;
  margin-left: 2px;
}

.ex-perf-unit-txt {
  font-weight: bold;
  font-size: 1.1em;
  margin-left: 2px;
  margin-right: 2px;
}

/* 注記テキスト */
.ex-perf-note {
  font-size: 0.8em;
  color: #333333;
  margin: 8px 0 0 0;
  text-align: center;
}

/* --- 2. リストスタイル（1〜3行目共通） --- */
.ex-perf-list {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
  display: block !important;
}

.ex-perf-list li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 12px;
  line-height: 1.6;
  list-style-type: none !important;
}

.ex-perf-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #333333;
  font-size: 1.2em;
  line-height: 1.4;
}

.ex-perf-list li:last-child {
  margin-bottom: 0;
}

/* --- 黒丸を非表示にする設定 --- */
.ex-perf-container .ex-perf-list-no-bullet::before {
  display: none !important;
}

/* ==========================================================================
   4行目：ZEBプランナー専用のレイアウト調整（PC版）
   ========================================================================== */
.ex-perf-row-zeb {
  position: relative;
  padding: 20px 0;
}

.ex-perf-body-zeb {
  width: 100%;
  padding-left: 200px; /* 左側にスペースを確保 */
}

.ex-perf-list-zeb {
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.ex-perf-list-zeb > li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 16px;
  line-height: 1.6;
}

.ex-perf-list-zeb > li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #333333;
  font-size: 1.2em;
  line-height: 1.4;
}

/* 左側グレーボックス（PC版配置固定） */
.ex-perf-lead-box-absolute {
  position: absolute;
  left: 0;
  top: 20px;
  width: 160px;
  /* 右側のテキスト1つ目の塊（ex-perf-zeb-top）と同じ高さで止まる設定 */
  height: calc(100% - 210px); 
  min-height: 150px;
  background-color: #dcdcdc;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

/* 左側ロゴ画像（PC版配置固定：大規模建築物のテキスト開始位置に同期） */
.ex-perf-logo-absolute {
  position: absolute;
  left: 0;
  bottom: 80px; /* 下部からの位置で「大規模建築物」のテキストラインに固定 */
  width: 160px;
  text-align: center;
}

.ex-perf-logo-img {
  max-width: 95px;
  height: auto;
  display: inline-block;
}

/* ==========================================================================
   レスポンシブ対応（タブレット・スマートフォン向け）
   ========================================================================== */
@media screen and (max-width: 768px) {
  .ex-perf-row {
    flex-direction: column;
    align-items: stretch;
    padding: 24px 0;
  }

  .ex-perf-lead-box {
    flex: none;
    width: 100%;
    padding: 15px;
    margin-bottom: 16px;
    border-radius: 6px;
  }

  .ex-perf-body {
    padding-left: 0;
  }

  .ex-perf-stats-grid {
    flex-direction: column;
    gap: 16px;
  }

  .ex-perf-stat-card {
    padding: 0;
  }

  .ex-perf-stat-header {
    margin-bottom: 8px;
  }

  /* --------------------------------------------------
     ★ スマホ表示における ZEBプランナー箇所の並び順完全制御
     -------------------------------------------------- */
  .ex-perf-row-zeb {
    display: flex !important;
    flex-direction: column !important;
  }

  .ex-perf-body-zeb {
    padding-left: 0 !important;
    order: 3 !important; /* テキスト全体を一番下に */
  }

  /* スマホ時はliの擬似ドットを全て非表示 */
  .ex-perf-list-zeb > li {
    padding-left: 0 !important;
  }
  .ex-perf-list-zeb > li::before {
    display: none !important;
  }

  /* ① グレーボックスを最上部に配置 */
  .ex-perf-lead-box-absolute {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 10px !important;
    border-radius: 6px !important;
    padding: 15px !important;
    order: 1 !important;
  }

  /* ② ロゴ画像をグレーボックスのすぐ下に配置 */
  .ex-perf-logo-absolute {
    position: relative !important;
    left: 0 !important;
    bottom: 0 !important;
    top: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 24px 0 !important;
    order: 2 !important;
  }

  .ex-perf-logo-img {
    max-width: 120px !important;
  }
}