@charset "utf-8";


/*---------------------------
ご支援イメージ
/*---------------------------
/* 全体のコンテナ設定 */
.solution-section-container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 50px;
}

.solution-section-container *,
.solution-section-container *::before,
.solution-section-container *::after {
  box-sizing: border-box;
}

/* 各ボックスの共通設定 */
.solution-section-box {
  margin-bottom: 40px;
}
.solution-section-box:last-child {
  margin-bottom: 0;
}

/* 見出しの共通設定 */
.solution-section-title {
  margin: 0;
  padding: 12px;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}

/* 課題見出し（濃い青） */
.solution-section-title-issue {
  background-color: #2b579a;
}

/* 期待される効果見出し（明るい水色） */
.solution-section-title-effect {
  background-color: #00b0f0;
}

/* コンテンツエリアの共通設定 */
.solution-section-content {
  padding: 24px 16px;
  background-color: #ffffff;
}

/* --- 課題セクションのレイアウト（修正版: PC基準） --- */
.solution-section-issue-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* 中央に寄せる */
  gap: 0; /* paddingで調整 */
  position: relative; /* 三角形配置の基準点 */
}

/* 中央の三角形をCSSで再現 */
.solution-section-issue-wrapper::before {
  content: "";
  display: block;
  /* 三角形のサイズと色（borderで作る） */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 35px; /* 上 下 0、左の厚みで三角形を作る */
  border-color: transparent transparent transparent #005bac; /* 左側のborderに青色を指定 */
  
  /* 配置設定 */
  position: absolute;
  left: 50%; /* 中央から */
  top: 50%;
  transform: translate(-50%, -50%); /* 自身のサイズ分戻して完全中央 */
  z-index: 2; /* テキストより上 */
}

.solution-section-issue-left,
.solution-section-issue-right {
  display: flex;
  align-items: center;
  min-height: 85px; /* テキスト量に関わらず高さを確保して配置を安定させる */
}

.solution-section-issue-left {
  width: 50%;
  padding-right: 60px; /* 三角形との距離（35px + 余白） */
  text-align: left;
}

.solution-section-issue-right {
  width: 50%;
  padding-left: 60px; /* 三角形との距離 */
  line-height: 1.6;
  color: #000000;
}

/* 青色強調テキスト */
.solution-section-highlight-text {
  margin: 0;
  color: #005bac;
  line-height: 1.5;
}

/* --- 期待される効果セクションのレイアウト --- */
.solution-section-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.solution-section-list-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 24px;
}

.solution-section-list-item:last-child {
  margin-bottom: 0;
}

/* 元画像にあるグレーの丸丸（弾丸マーク）の再現 */
.solution-section-list-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.5em;
  width: 10px;
  height: 10px;
  background-color: #888888;
  border-radius: 50%;
}

.solution-section-list-title {
  margin: 0 0 4px 0;
  color: #005bac;
  font-weight: bold;
  line-height: 1.4;
}

.solution-section-list-desc {
  margin: 0;
  line-height: 1.6;
  color: #000000;
}

/* --- レスポンシブ対応（タブレット・スマホ向け） --- */
@media (max-width: 768px) {
  .solution-section-issue-wrapper {
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    padding-top: 20px; /* 三角形用の上余白 */
    gap: 16px;
  }

  .solution-section-issue-left,
  .solution-section-issue-right {
    width: 100%;
    padding: 0; /* paddingをリセット */
    min-height: auto; /* 高さを自動に */
    text-align: left;
  }

  /* スマホ時は三角形を下向き（▼）に変更 */
  .solution-section-issue-wrapper::before {
    position: relative; /* 配置をフローに戻す */
    left: auto;
    top: auto;
    transform: none; /* 中央寄せ解除 */
    margin: 8px 0; /* テキスト間の余白 */
    
    /* 三角形を下向きに変更 */
    border-width: 25px 20px 0 20px; /* 左 右 0、上で厚み、下は0 */
    border-color: #005bac transparent transparent transparent; /* 上側のborderに青色を指定 */
  }
  
  .solution-section-issue-right p {
    text-align: left; /* テキストは左寄せに戻す */
  }
  
  .solution-section-content {
    padding: 20px 12px;
  }
}


/*---------------------------------
ご支援実績（一例）　補助金別
/*---------------------------------
/* 全体コンテナ */
.subsidy-section-container {
  width: 100%;
  box-sizing: border-box;
  line-height: 1.6;
}

.subsidy-section-container *,
.subsidy-section-container *::before,
.subsidy-section-container *::after {
  box-sizing: border-box;
}

/* 左右のレイアウト（PCベース） */
.subsidy-flex-wrapper {
  display: flex;
  align-items: stretch; /* 左右のボックスの高さを揃える */
  position: relative;
  gap: 60px; /* 左右のコーナーの間の隙間を広めに確保 */
}

.subsidy-column-main {
  flex: 2;
  min-width: 0;
  position: relative; /* 点線の位置の基準にする */
}

/* 左コーナーの右側（隙間のちょうど中央）に上から下まで突き抜ける点線を配置 */
.subsidy-column-main::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px; /* gap（60px）のちょうど半分を指定して中央に配置 */
  width: 1px;
  border-right: 1px dotted #ccc;
}

.subsidy-column-sub {
  flex: 1;
  min-width: 0;
}

/* 青色ヘッダー */
.subsidy-header-blue {
  background-color: #215394;
  color: #ffffff;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-bottom: 20px;
}

.subsidy-ampersand {
  font-weight: normal;
}

/* 紹介文エリア */
.subsidy-intro-flex {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.subsidy-intro-box {
  flex: 1;
  min-width: 0;
  min-height: 250px;
}

.subsidy-full-width {
  width: 100%;
}

.subsidy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subsidy-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
}

.subsidy-list li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}

/* 実績タイトル */
.subsidy-result-title {
  font-weight: bold;
  margin: 25px 0 10px 0;
}

/* 実績数値ボックス */
.subsidy-achievement-flex {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.subsidy-achievement-box {
  flex: 1;
  border: 1px solid #215394;
  min-width: 0;
}

.subsidy-achieve-header {
  background-color: #3b6b9c;
  color: #ffffff;
  text-align: center;
  padding: 6px;
}

.subsidy-achieve-header .subsidy-note {
  font-weight: normal;
}

.subsidy-achieve-body {
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
}

.subsidy-underline {
  text-decoration: underline;
  font-weight: bold;
}

.subsidy-amount-text {
  font-weight: bold;
}

.subsidy-date-note {
  font-weight: normal;
  margin-left: 5px;
}

/* テーブルスタイル */
.subsidy-table-flex {
  display: flex;
  gap: 20px;
}

.subsidy-table {
  flex: 1;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}

.subsidy-table th, 
.subsidy-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.subsidy-table th {
  background-color: #7f7f7f;
  color: #ffffff;
  font-weight: normal;
}

.subsidy-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* レスポンシブ対応 (タブレット・スマホサイズ) */
@media (max-width: 992px) {
  .subsidy-flex-wrapper {
    flex-direction: column;
    gap: 0; /* スマホ時はgapをリセット */
  }
  
  .subsidy-column-main {
    width: 100%;
    margin-bottom: 50px;
  }

  /* スマホ縦並びの時は中央の点線を消す */
  .subsidy-column-main::after {
    display: none;
  }

  .subsidy-column-sub {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .subsidy-intro-flex,
  .subsidy-achievement-flex,
  .subsidy-table-flex {
    flex-direction: column;
    gap: 15px;
  }
  
  .subsidy-header-blue {
    flex-direction: column;
    gap: 5px;
    padding: 15px 10px;
  }
  
  .subsidy-achieve-body {
    min-height: auto;
    padding: 15px;
  }

  .subsidy-full-width {
    min-height: auto;
  }


  .subsidy-intro-box {
  min-height: auto;
  }


}




/* 全体コンテナ */
.subsidy-triple-container {
  width: 100%;
  box-sizing: border-box;
  line-height: 1.6;
  padding-top: 100px;
}

.subsidy-triple-container *,
.subsidy-triple-container *::before,
.subsidy-triple-container *::after {
  box-sizing: border-box;
}

/* 3カラムレイアウト（PCベース） */
.subsidy-triple-wrapper {
  display: flex;
  align-items: stretch; /* すべてのカラムの高さを揃える */
  gap: 60px; /* カラム間の隙間 */
}

.subsidy-triple-column {
  flex: 1; /* 3つのカラムを均等幅にする */
  min-width: 0;
  position: relative;
}

/* 1つ目と2つ目のカラムの右側に、隙間の中央に位置する点線を配置 */
.subsidy-triple-column:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -30px; /* gap(60px)のちょうど半分 */
  width: 1px;
  border-right: 1px dotted #ccc;
}

/* 青色ヘッダー */
.subsidy-triple-header {
  background-color: #215394;
  color: #ffffff;
  padding: 12px;
  font-weight: bold;
  margin-bottom: 20px;
    display: flex;
  align-items: center;      /* 上下中央揃え */
  justify-content: center;  /* 左右中央揃え */
  min-height: 70px;         /* 3つのヘッダーの高さを固定で揃える */
  text-align: center;
}

/* 紹介文エリア */
.subsidy-triple-intro {
  margin-bottom: 20px;
  min-height: 220px;
}

.subsidy-triple-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subsidy-triple-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 8px;
}

.subsidy-triple-list li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
}

/* 実績タイトル */
.subsidy-triple-result-title {
  font-weight: bold;
  margin: 25px 0 10px 0;
}

.subsidy-triple-title-note {
  font-weight: normal;
}

/* 実績数値ボックス */
.subsidy-triple-achieve-box {
  width: 100%;
  border: 1px solid #215394;
  margin-bottom: 20px;
}

.subsidy-triple-achieve-header {
  background-color: #3b6b9c;
  color: #ffffff;
  text-align: center;
  padding: 6px;
}

.subsidy-triple-achieve-body {
  padding: 15px;
  text-align: center;
}

.subsidy-triple-underline {
  text-decoration: underline;
  font-weight: bold;
}

/* テーブルスタイル */
.subsidy-triple-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 15px;
}

.subsidy-triple-table th, 
.subsidy-triple-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.subsidy-triple-table th {
  background-color: #7f7f7f;
  color: #ffffff;
  font-weight: normal;
}

/* レスポンシブ対応 (タブレット・スマホサイズ) */
@media (max-width: 992px) {
  .subsidy-triple-wrapper {
    flex-direction: column;
    gap: 0;
  }
  
  .subsidy-triple-column {
    width: 100%;
    margin-bottom: 50px; /* 縦並び時の各コーナー間の余白 */
  }

  .subsidy-triple-column:last-child{
    margin-bottom: 0;
  }

  /* スマホ時は縦の点線を消去 */
  .subsidy-triple-column:not(:last-child)::after {
    display: none;
  }
}


@media (max-width: 640px) {
  .subsidy-triple-intro {
    min-height: auto;
  }

  .subsidy-triple-container {
  padding-top: 50px;
  }


}