@charset "utf-8";

/* ==========================================================================
   DX人材育成とは？
   ========================================================================== */

/* 全体コンテナ */
.fs-dx2-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.fs-dx2-container *,
.fs-dx2-container *::before,
.fs-dx2-container *::after {
  box-sizing: border-box;
}

/* 改行コントロール用クラス */
.fs-dx2-pc-only { display: block; }
.fs-dx2-sp-only { display: none; }

/* リード文 */
.fs-dx2-lead {
  position: relative;
  padding-left: 25px;
  margin-bottom: 35px;
}

.fs-dx2-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: #7f7f7f;
}

.fs-dx2-lead p {
  margin: 0;
  line-height: 1.6;
  color: #000000;
}

.fs-dx2-lead strong {
  font-weight: bold;
}

/* 対比セクション（Flexboxレイアウト） */
.fs-dx2-comparison {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

/* 各左右ボックス */
.fs-dx2-box {
  width: 100%;
  background-color: #f7f7f7;
  border-radius: 4px;
  overflow: hidden;
}

/* ボックスヘッダー共通 */
.fs-dx2-box-header {
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  padding: 15px 10px;
  border-radius: 25px;
  margin: 10px 10px 0 10px;
}

/* 左側ヘッダー色 */
.fs-dx2-header-left {
  background-color: #0099d8;
}

/* 右側ヘッダー色 */
.fs-dx2-header-right {
  background-color: #3b6e9c;
}

/* ボックスボディ */
.fs-dx2-box-body {
  padding: 25px 30px;
}

/* リストスタイル */
.fs-dx2-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fs-dx2-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  line-height: 1.5;
  color: #333333;
}

.fs-dx2-list li:last-child {
  margin-bottom: 0;
}

.fs-dx2-list li::before {
  content: "•";
  position: absolute;
  left: 5px;
  top: 0;
  color: #333333;
}

/* ★ここから修正：スマホ時はバランスの取れた「下向きのシャープな矢印」に */
.fs-dx2-arrow-area {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  position: relative;
  width: 100%;
}

/* スマホ用：下向き矢印の形状・余白バランスを調整 */
.fs-dx2-arrow-shape {
  background-color: #e6e6e6;
  width: 180px;
  height: 100px; /* 縦幅を少し広げてシャープな比率に */
  padding: 15px 15px 40px 15px; /* 下側の尖った部分に文字が被らないよう、下余白を多めに確保 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 比率を見直し、PC版のようにシャープに尖る下向き矢印のポリゴンに変更 */
  clip-path: polygon(25% 0%, 75% 0%, 75% 60%, 100% 60%, 50% 100%, 0% 60%, 25% 60%);
}

.fs-dx2-arrow-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #b30000;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  font-size: 14px; /* 文字が枠内に綺麗に収まるサイズ */
}
/* ★ここまで修正 */

/* 下部 まとめメッセージバナー */
.fs-dx2-summary-banner {
  background-color: #fff2cc;
  border-radius: 50px;
  padding: 20px 30px;
  width: 100%;
}

.fs-dx2-summary-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.fs-dx2-summary-icon {
  color: #ffaa00;
  font-size: 1.6em;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.fs-dx2-summary-text {
  margin: 0;
  color: #b30000;
  line-height: 1.6;
  text-align: center;
}

.fs-dx2-summary-text strong {
  font-weight: bold;
}

.fs-dx2-underline {
  border-bottom: 2px solid #b30000;
  padding-bottom: 2px;
  font-weight: bold;
}


/* --- レスポンシブ対応 (PCサイズ: 768px以上) --- */
@media screen and (min-width: 768px) {
  .fs-dx2-pc-only { display: block; }
  .fs-dx2-sp-only { display: none; }

  .fs-dx2-comparison {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
  }

  .fs-dx2-box {
    width: 42%;
  }

  /* PC時はヘッダーを枠外（上部）に浮かせるようなマージン調整 */
  .fs-dx2-box-header {
    border-radius: 25px;
    padding: 12px 10px;
  }

  /* ★ここから修正：PC時は「右向きのシャープな矢印」にする */
  .fs-dx2-arrow-area {
    width: 16%;
    padding: 0;
  }

  /* PCレイアウト用の数値と右向きclip-path */
  .fs-dx2-arrow-shape {
    width: 130px;
    height: 140px;
    padding: 10px 25px 10px 10px; 
    clip-path: polygon(0% 25%, 55% 25%, 55% 0%, 100% 50%, 55% 100%, 55% 75%, 0% 75%);
  }

  .fs-dx2-arrow-text {
    background-color: transparent;
    z-index: 2;
    font-size: 16px;
  }
  /* ★ここまで修正 */

  .fs-dx2-summary-banner {
    padding: 25px 50px;
  }
  
  .fs-dx2-summary-text {
    text-align: left;
  }
}

/* スマホ用改行切り替え */
@media screen and (max-width: 767px) {
  .fs-dx2-pc-only { display: none; }
  .fs-dx2-sp-only { display: inline; }
}

/* ==========================================================================
   船井総研のDX人材育成支援の特長
   ========================================================================== */


/* 全体コンテナ */
.fs-dx-container {
  width: 100%;
  max-width: 1000px; /* 必要に応じて調整してください */
  margin: 0 auto;
  box-sizing: border-box;
}

.fs-dx-container *,
.fs-dx-container *::before,
.fs-dx-container *::after {
  box-sizing: border-box;
}

/* リード文 */
.fs-dx-lead {
  position: relative;
  padding-left: 25px;
  margin-bottom: 30px;
}

.fs-dx-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: #7f7f7f;
}

.fs-dx-lead p {
  margin: 0;
  line-height: 1.6;
  color: #333333;
}

.fs-dx-lead strong {
  background: linear-gradient(transparent 60%, #fff2cc 60%);
  font-weight: bold;
}

/* 3段組グリッド */
.fs-dx-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

/* カード共通（基本は白背景） */
.fs-dx-card {
  position: relative;
  flex: 1;
  background-color: #f7f9fa; /* Point 1, 3 は白に変更 */
  padding: 50px 20px 80px 20px; /* 下部にアイコン用の余白を確保 */
  border-radius: 4px;
}

/* 2番目のカード（Point 2）だけ背景を水色にする */
.fs-dx-card:nth-child(2) {
  background-color: #eef7ff;
  border: none; /* Point 2は枠線なし */
}

/* バッジ (Point 1~3) */
.fs-dx-badge {
  position: absolute;
  top: 15px;
  left: 20px;
  background-color: #0099d8;
  color: #ffffff;
  padding: 4px 20px;
  border-radius: 20px;
  font-weight: bold;
}

/* カード内見出し */
.fs-dx-card-title {
  margin: 10px 0 20px 0;
  color: #005596;
  font-weight: bold;
  line-height: 1.4;
}

.fs-dx-card-title strong {
  color: #005596;
  font-weight: bold;
}

/* リストスタイル */
.fs-dx-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fs-dx-list li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 15px;
  line-height: 1.6;
  color: #333333;
}

.fs-dx-list li:last-child {
  margin-bottom: 0;
}

.fs-dx-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #333333;
}

.fs-dx-list strong {
  font-weight: bold;
}

/* アイコン配置 */
.fs-dx-icon-wrap {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.fs-dx-icon {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* 下部 パートナー情報バナー */
.fs-dx-footer-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-top: 1px solid #005596;
  padding-top: 20px;
}

.fs-dx-partner-logos {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fs-dx-logo-img {
  max-width: 100%;
  height: auto;
}

.fs-dx-partner-text p {
  margin: 0;
  line-height: 1.6;
  color: #333333;
  text-align: center;
}


/* --- レスポンシブ対応 (PCサイズ: 768px以上) --- */
@media screen and (min-width: 768px) {
  .fs-dx-grid {
    flex-direction: row;
    align-items: stretch;
    gap: 15px;
  }

  .fs-dx-card {
    padding: 60px 20px 90px 20px;
  }

  .fs-dx-footer-banner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }

  .fs-dx-partner-text p {
    text-align: left;
  }
}


/* ==========================================================================
   よくあるご相談内容
   ========================================================================== */

/* 全体コンテナ */
.fs-dx3-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.fs-dx3-container *,
.fs-dx3-container *::before,
.fs-dx3-container *::after {
  box-sizing: border-box;
}

/* リード文 */
.fs-dx3-lead {
  position: relative;
  padding-left: 25px;
  margin-bottom: 30px;
}

.fs-dx3-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: #7f7f7f;
}

.fs-dx3-lead p {
  margin: 0;
  line-height: 1.6;
  color: #000000;
}

.fs-dx3-lead strong {
  font-weight: bold;
}

/* 課題グリッド（スマホ時は1列、PC時は2列） */
.fs-dx3-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 課題カード共通 */
.fs-dx3-card {
  width: 100%;
  background-color: #f7f9fa;
  border-left: 6px solid #3b7bb8; /* 左側の青いアクセント線 */
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* カードタイトル */
.fs-dx3-card-title {
  margin: 0 0 10px 0;
  color: #21539f;
  font-weight: bold;
  line-height: 1.4;
}

/* カード内説明文 */
.fs-dx3-card-text {
  margin: 0;
  color: #333333;
  line-height: 1.6;
}


/* --- レスポンシブ対応 (PCサイズ: 768px以上) --- */
@media screen and (min-width: 768px) {
  .fs-dx3-grid {
    gap: 20px 2.5%; /* 横の隙間をパーセントにしてきれいに2分割 */
  }

  .fs-dx3-card {
    width: 48.75%; /* (100% - 2.5%) / 2 */
    padding: 20px 25px;
  }
}


/* リストの機能に頼らず、文字として「・」を左側に強制的に表示させる */
.zoho-dx-support ul.zd-list {
  list-style: none !important;    /* 既存のバグるリスト機能をあえて完全に切る */
  padding: 0 !important;          /* 余白をゼロにしてリセット */
  margin: 20px 0 !important;      /* 上下の余白 */
}

.zoho-dx-support li.zd-list-item {
  position: relative !important;  /* 「・」を配置するための基準点にする */
  display: block !important;      /* ブロック要素として扱う */
  padding-left: 1.2em !important; /* 「・」が入る分の隙間を左側に空ける */
  margin-bottom: 12px !important; /* 行と行の間隔 */
  line-height: 1.7 !important;    /* 読みやすい行高 */
  color: #333333 !important;      /* 文字色 */
}

/* 各リストの先頭に、本物の「・」と同じ見た目の文字を埋め込む */
.zoho-dx-support li.zd-list-item::before {
  content: "•" !important;         /* 箇条書き用の黒丸（ビュレット）を文字として生成 */
  position: absolute !important;  /* 左端に固定配置 */
  left: 0 !important;             /* 左端ぴったりに置く */
  top: 0 !important;              /* 上端ぴったりに置く */
  color: #333333 !important;      /* 「・」の色（文字色と合わせる） */
}


/* ==========================================================================
   ご支援イメージ
   ========================================================================== */

/* 全体コンテナ */
.fs-dx4-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}
.fs-dx4-container *, .fs-dx4-container *::before, .fs-dx4-container *::after {
  box-sizing: border-box;
}

/* リード文 */
.fs-dx4-lead {
  position: relative;
  padding-left: 25px;
  margin-bottom: 25px;
}
.fs-dx4-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: #7f7f7f;
}
.fs-dx4-lead p {
  margin: 0;
  line-height: 1.6;
  color: #000000;
}

/* メインボード枠 */
.fs-dx4-board {
  border: 2px solid #0099d8;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
  width: 100%;
}
.fs-dx4-board-header {
  background-color: #0099d8;
  color: #ffffff;
  padding: 12px 20px;
  font-weight: bold;
  text-align: center;
}
.fs-dx4-board-body {
  padding: 20px;
  background-color: #ffffff;
  overflow-x: auto; /* 万が一の時のはみ出し防止 */
}

/* 導入リスト */
.fs-dx4-intro-list {
  padding-left: 20px;
  margin: 0 0 20px 0;
}
.fs-dx4-intro-list li {
  margin-bottom: 10px;
  line-height: 1.6;
  color: #333333;
}

/* 注記 */
.fs-dx4-note {
  text-align: right;
  color: #666666;
  margin-bottom: 15px;
}

/* 軸ラベル（デフォルト・スマホ時は非表示） */
.fs-dx4-axis-column {
  display: none;
}

/* フェーズブロック */
.fs-dx4-phase-block {
  margin-bottom: 40px;
  background-color: #fcfdfe;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  padding: 15px;
}
.fs-dx4-phase-block:last-child {
  margin-bottom: 0;
}

/* フェーズ大見出し */
.fs-dx4-phase-tag {
  background-color: #3388cc;
  color: #ffffff;
  padding: 8px 15px;
  font-weight: bold;
  margin-bottom: 15px;
  border-radius: 4px;
  display: inline-block;
}

/* PJステップ配置 */
.fs-dx4-pj-flow-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}
.fs-dx4-pj-step {
  background-color: #3b7bb8;
  color: #ffffff;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  border-radius: 4px;
}

/* 中間テキスト */
.fs-dx4-connect-text {
  color: #004488;
  font-weight: bold;
  text-align: center;
  margin: 15px 0;
}

/* 人材育成カード配置 */
.fs-dx4-hr-flow-wrap {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.fs-dx4-hr-subtext {
  color: #003366;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
}
.fs-dx4-hr-box {
  background-color: #0d2a54;
  color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}
.fs-dx4-box-target {
  display: block;
  font-weight: bold;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 5px;
  margin-bottom: 8px;
  color: #ffcc00;
}
.fs-dx4-hr-box p {
  margin: 0;
  line-height: 1.4;
}

/* 特殊カラーボックス */
.fs-dx4-box-dark { background-color: #051630; }
.fs-dx4-box-blue { background-color: #0044aa; }


/* --- PCレイアウト設定 (PCサイズ: 992px以上) --- */
@media screen and (min-width: 992px) {
  .fs-dx4-process-container {
    display: flex;
    gap: 15px;
    width: 100%;
  }

  /* 左側の固定見出し軸 */
  .fs-dx4-axis-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50px;
    flex-shrink: 0;
    padding: 60px 0 30px 0;
  }
  .fs-dx4-axis-label {
    background-color: #4a4a4a;
    color: #ffffff;
    writing-mode: vertical-rl;
    text-combine-upright: all;
    padding: 15px 5px;
    font-weight: bold;
    border-radius: 4px;
    text-align: center;
    letter-spacing: 2px;
  }
  .fs-dx4-axis-pj { height: 160px; }
  .fs-dx4-axis-hr { height: 260px; background-color: #616161; }

  /* 2つのフェーズを横並びにするラッパー */
  .fs-dx4-phases-wrapper {
    display: flex;
    flex-grow: 1;
    gap: 20px;
    width: calc(100% - 65px);
  }

  /* 各フェーズの横幅を固定pxではなく％で最適化 */
  .fs-dx4-phase-1 {
    width: 54%;
  }
  .fs-dx4-phase-2 {
    width: 46%;
  }

  .fs-dx4-phase-block {
    margin-bottom: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    display: flex;
    flex-direction: column;
  }

  /* 横並びの矢印ヘッダー表現 */
  .fs-dx4-phase-tag {
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    padding: 10px 20px;
    text-align: center;
  }
  .fs-dx4-phase-tag::after {
    content: "";
    position: absolute;
    right: -15px;
    top: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 15px solid #3388cc;
    z-index: 5;
  }

  /* PJステップの横並び矢印風レイアウト */
  .fs-dx4-pj-flow-wrap {
    flex-direction: row;
    height: 160px;
    gap: 4px;
    align-items: flex-start;
  }
  .fs-dx4-pj-step {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background-color: #3b7bb8;
    position: relative;
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%, 12% 50%);
  }
  .fs-dx4-pj-flow-wrap .fs-dx4-pj-step:first-child {
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
  }

  /* 中間テキストの調整 */
  .fs-dx4-connect-text {
    height: 40px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 人材育成ブロックの横並び */
  .fs-dx4-hr-flow-wrap {
    flex-direction: row;
    height: 280px;
    gap: 10px;
  }
  .fs-dx4-hr-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .fs-dx4-hr-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
  }

  /* フェーズ2のグリッド配置（はみ出し対策） */
  .fs-dx4-hr-flow-wrap.fs-dx4-hr-phase2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.2fr 0.8fr;
    gap: 10px;
  }
  .fs-dx4-hr-phase2 .fs-dx4-hr-card {
    width: 100%;
  }
  .fs-dx4-hr-all {
    grid-column: 1 / 3;
  }
}



/* --- Zoho DX Support Section --- */
.zoho-dx-support {
  width: 100%;
  max-width: 1200px; /* 必要に応じてサイトのメイン幅に合わせて調整してください */
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid #ccc;
  background-color: #fff;
}

/* すべての子要素にbox-sizingを適用 */
.zoho-dx-support *,
.zoho-dx-support *::before,
.zoho-dx-support *::after {
  box-sizing: border-box;
}

/* タイトルエリア */
.zoho-dx-support .zd-title {
  margin: 0;
  padding: 12px 20px;
  background-color: #0099d4; /* 画像の鮮やかな水色 */
  color: #fff;
  font-weight: bold;
  text-align: center;
}

/* コンテンツエリア */
.zoho-dx-support .zd-content {
  padding: 20px;
}

/* 箇条書きリスト */
.zoho-dx-support .zd-list {
  margin: 0 0 20px 0;
  padding-left: 20px;
  list-style-type: disc;
}

.zoho-dx-support .zd-list-item {
  margin-bottom: 10px;
  line-height: 1.6;
}

.zoho-dx-support .zd-list-item:last-child {
  margin-bottom: 0;
}

/* 画像エリア（レスポンシブ対応） */
.zoho-dx-support .zd-image-wrapper {
  width: 100%;
}

.zoho-dx-support .zd-image {
  display: block;
  width: 100%;
  height: auto;
}

/* パディング等の微調整（画面サイズが小さい場合） */
@media (max-width: 768px) {
  .zoho-dx-support .zd-title {
    padding: 10px 15px;
  }
  .zoho-dx-support .zd-content {
    padding: 15px;
  }
}

/* --- スマホ時の画像横スクロール対応 --- */
@media (max-width: 768px) {
  /* 親要素（画像ラッパー）を横スクロール可能にする */
  .zoho-dx-support .zd-image-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
    margin-bottom: 10px;
  }

  /* 画像が縮まないように最小横幅（ブレイクポイント）を設定する */
  .zoho-dx-support .zd-image {
    width: auto;             /* 自動幅にする */
    max-width: none;         /* 最大幅の制限を解除 */
    min-width: 700px;        /* ★スマホ画面で画像を表示させたい最小の横幅（必要に応じて調整してください） */
    height: auto;
  }
}

/* PCでは案内を非表示にする */
.zd-scroll-notice {
  display: none;
}

/* スマホ表示（768px以下）のときだけ表示 */
@media (max-width: 768px) {
  .zd-scroll-notice {
    display: block;
    text-align: center;
    font-size: 11px;
    color: #666;
    background-color: #f5f5f5;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: bold;
    display: inline-block; /* 横幅をテキストに合わせる */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* 中央寄せ */
  }
}


/* ==========================================================================
   アウトプットイメージ
   ========================================================================== */
/* 全体コンテナ */
.fs-rep-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}

.fs-rep-container *,
.fs-rep-container *::before,
.fs-rep-container *::after {
  box-sizing: border-box;
}

/* リード文 */
.fs-rep-lead {
  position: relative;
  padding-left: 25px;
  margin-bottom: 30px;
}

.fs-rep-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  background-color: #7f7f7f;
}

.fs-rep-lead p {
  margin: 0;
  line-height: 1.6;
  color: #333333;
  font-weight: bold;
}

/* グリッドコンテナ（スマホ時は1列縦並び） */
.fs-rep-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* スライドカード共通 */
.fs-rep-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* スライドヘッダー（青帯部分） */
.fs-rep-card-header {
  background-color: #0070c0;
  color: #ffffff;
  padding: 10px 15px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 文字が溢れた場合は「...」にする */
}

/* スライド内ボディ（画像エリア） */
.fs-rep-card-body {
  width: 100%;
  padding: 10px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 報告書画像（アスペクト比を維持してレスポンシブ化） */
.fs-rep-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* --- レスポンシブ対応 (PCサイズ: 768px以上) --- */
@media screen and (min-width: 768px) {
  /* PC時は3列のグリッド配置に変形 */
  .fs-rep-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px 2%; /* 横のすき間を均等に2%に設定 */
  }

  /* 3列並びにするための幅調整 (100% - (2% * 2)) / 3 = 32% */
  .fs-rep-card {
    width: 32%;
  }
}

/* ==========================================================================
   【ご参考】実践型DX人材育成支援メニュー
   ========================================================================== */
/* ==========================================================================
   独自ソリューションセクション用スタイル（干渉防止・全幅見出し対応版）
   ========================================================================== */

/* 全体コンテナ */
.sol-section-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /*padding: 40px 20px;*/
  box-sizing: border-box;
}

/* 共通ボックスサイジング適用 */
.sol-section-container *,
.sol-section-container ::before,
.sol-section-container ::after {
  box-sizing: border-box;
}

/* メインキャッチコピー */
.sol-section-header {
  margin-bottom: 30px;
}
.sol-section-lead {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin: 0;
  line-height: 1.5;
}
/* 左側のスクエアマーク */
.sol-section-lead::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #7f7f7f;
  margin-right: 12px;
  flex-shrink: 0;
}

/* グリッドレイアウトベース（PCサイズ：2列） */
.sol-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

/* 各カードのスタイル */
.sol-section-card {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  padding: 30px;
  display: flex;
  flex-direction: column; /* 上下構造に変更 */
}

/* カード上部：枠内全体（全幅）に広げるエリア */
.sol-section-card-top {
  width: 100%;
  margin-bottom: 20px;
}

/* カード下部：箇条書きと画像を横並びにするエリア */
.sol-section-card-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-grow: 1;
}

/* 注釈バッジ（集合研修） */
.sol-section-sub-badge {
  display: block;
  font-weight: bold;
  color: #000000;
  margin-bottom: 5px;
}

/* メイン青丸バッジ */
.sol-section-badge {
  display: inline-block;
  background-color: #0091ca;
  color: #ffffff;
  font-weight: bold;
  padding: 6px 25px;
  border-radius: 20px;
  margin-bottom: 15px;
  text-align: center;
}

/* カード内タイトル（枠内全体に配置） */
.sol-section-card-title {
  color: #1a5394;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
  width: 100%;
}

/* 下部左側：箇条書きテキストエリア */
.sol-section-card-content {
  flex: 1;
}

/* 箇条書きリスト */
.sol-section-list {
  margin: 0;
  padding-left: 18px;
  list-style-type: disc;
}
.sol-section-list li {
  margin-bottom: 8px;
  line-height: 1.6;
}
.sol-section-list li:last-child {
  margin-bottom: 0;
}

/* 下部右側：画像エリア */
.sol-section-card-img {
  width: 40%;
  max-width: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sol-section-card-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* フッターキャッチコピー */
.sol-section-footer {
  text-align: center;
  margin-top: 40px;
}
.sol-section-footer-title {
  display: inline-block;
  color: #c00000;
  font-weight: bold;
  line-height: 1.4;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 4px solid #f2e3be; /* アンダーライン */
}


/* ==========================================================================
   レスポンシブ対応（タブレット・スマートフォン）
   ========================================================================== */

/* タブレット・スマホ：2列から1列へ */
@media screen and (max-width: 960px) {
  .sol-section-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* スマホ小型画面：カード下部のレイアウトを縦並びに調整 */
@media screen and (max-width: 560px) {
  .sol-section-card-bottom {
    flex-direction: column; /* リストの下に画像を配置 */
    align-items: center;
  }
  .sol-section-card-img {
    width: 70%; /* スマホ用に画像を拡大調整 */
    max-width: 100%;
    margin-top: 15px;
  }
  .sol-section-badge {
    width: 100%; /* スマホ時はバッジを横いっぱいに広げて見やすく */
  }
}


/* ==========================================================================
   図表セクション用スタイル（スマホ横スクロール対応）
   ========================================================================== */

/* 全体コンテナ */
.sol-flow-container {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  /*padding: 0 20px;*/
  box-sizing: border-box;
}

/* 共通ボックスサイジング */
.sol-flow-container *,
.sol-flow-container ::before,
.sol-section-container ::after {
  box-sizing: border-box;
}

/* 上部テキストスタイル */
.sol-flow-header {
  margin-bottom: 20px;
}
/*.sol-flow-lead {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin: 0;
  line-height: 1.5;
}
/* 左側のスクエアマーク */
/*.sol-flow-lead::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #7f7f7f;
  margin-right: 12px;
  flex-shrink: 0;
}

.sol-flow-lead strong{
      background: linear-gradient(transparent 60%, #fff2cc 60%);
    font-weight: bold;
}*/

.sol-flow-lead {
  position: relative;
  padding-left: 25px; /* スクエアマークの分、左側に余白を作る */
  font-weight: bold;
  margin: 0 0 25px 0;
  line-height: 1.7;   /* スマホで文字が重ならないよう少し広げる */
}

/* 左側のスクエアマーク */
.sol-flow-lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;           /* 1行目の文字の高さの中央に配置 */
  width: 12px;
  height: 12px;
  background-color: #7f7f7f;
}

/* 強調（下線マーカー）部分 */
.sol-flow-lead strong {
  background: linear-gradient(transparent 60%, #fff2cc 60%);
  font-weight: bold;
  display: inline;
  
  /* ↓これを入れることで、スマホで2行に折り返しても両方の行に綺麗に下線が引かれます */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* 横スクロールを制御する外枠 */
.sol-flow-scroll-box {
  width: 100%;
  overflow-x: auto;         /* 横方向のハミ出しをスクロール可能に */
  overflow-y: hidden;       /* 縦方向のハミ出しは隠す */
  -webkit-overflow-scrolling: touch; /* iOS（Safari）での滑らかなスクロール */
  background-color: #ffffff;
  border: 1px solid #e0e0e0; /* 綺麗に見せるための薄い外枠 */
  padding: 10px;
}

/* 画像を包むラッパー（最小横幅を担保する） */
.sol-flow-image-wrap {
  width: 100%;
  min-width: 900px; /* スマホやタブレットでも画像が潰れない最小幅（画像に合わせて調整可） */
}

/* 画像自体のレスポンシブ制御 */
.sol-flow-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   スクロールバーのカスタマイズ（スマホ等での視認性向上）
   ========================================================================== */
.sol-flow-scroll-box::-webkit-scrollbar {
  height: 8px; /* スクロールバーの太さ */
}
.sol-flow-scroll-box::-webkit-scrollbar-track {
  background: #f1f1f1; /* バーの背景の溝 */
  border-radius: 4px;
}
.sol-flow-scroll-box::-webkit-scrollbar-thumb {
  background: #cccccc; /* バー本体の色 */
  border-radius: 4px;
}
.sol-flow-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #aab2bd; /* バーホバー時の色 */
}

/* ==========================================================================
   レスポンシブ対応（PCサイズ時の調整）
   ========================================================================== */
@media screen and (min-width: 961px) {
  /* PCなど十分な画面幅がある場合は、スクロールさせずに100%で綺麗に収める */
  .sol-flow-image-wrap {
    min-width: 100%;
  }
  .sol-flow-scroll-box {
    overflow-x: visible; /* PCではスクロールさせない */
    border: none;        /* PCでは外枠をなくしてすっきり見せる（お好みで） */
    padding: 0;
  }
}