@charset "utf-8";
/* ==================================================
   100億企業化における「PMVV策定」の重要性
   ================================================== */
/* ==========================================================================
   ソリューションページ 図解・比較表セクション
   ========================================================================== */

/* 全体コンテナ */
.sl-diag-container {
  width: 100%;
  margin: 0 auto;
}

/* タイトル (h3) */
.sl-diag-title {
  text-align: center;
  margin-bottom: 2em;
}

/* --------------------------------------------------------------------------
   1. 画像エリア（横スクロール対応）
   -------------------------------------------------------------------------- */
.sl-diag-image-scroll-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2em;
}

/* 画像の最小幅を確保してスマホ時に横スクロールを発生させる */
.sl-diag-image-inner {
  min-width: 650px; /* 画像が見やすくなる適切な最小幅 */
  width: 100%;
}

.sl-diag-image {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   2. 比較表エリア
   -------------------------------------------------------------------------- */
.sl-diag-table-wrapper {
  width: 100%;
}

.sl-diag-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* セル共通設定 */
.sl-diag-table th,
.sl-diag-table td {
  border: 1px solid #e0e0e0;
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.5;
  word-wrap: break-word;
}

/* 表のヘッダー列幅の設定 */
.sl-diag-th-label {
  width: 20%;
  font-weight: bold;
}

.sl-diag-th-legacy {
  width: 40%;
  font-weight: bold;
}

.sl-diag-th-future {
  width: 40%;
  font-weight: bold;
  color: #1a568c;
}

/* 左端（黒背景）の見出しセル */
.sl-diag-row-head {
  background-color: #000000;
  color: #ffffff;
  font-weight: bold;
}

/* バックキャスト型のテキスト装飾 */
.sl-diag-td-future {
  color: #1a568c;
}

/* --------------------------------------------------------------------------
   レスポンシブ調整（スマホ対応）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* スマホ時に表の列幅を調整 */
  .sl-diag-th-label {
    width: 28%;
  }
  .sl-diag-th-legacy,
  .sl-diag-th-future {
    width: 36%;
  }

  .sl-diag-table th,
  .sl-diag-table td {
    padding: 8px 10px;
  }
}

/* --------------------------------------------------------------------------
   内発的動機を引き出す「良いビジョン」のポイント
   -------------------------------------------------------------------------- */
/* ==========================================================================
   ビジョン比較表セクション（干渉防止のため .sl-cmp- プレフィックスを使用）
   ========================================================================== */

/* コンテナ全体 */
.sl-cmp-container {
  width: 100%;
  margin: 0 auto;
}

/* スクロールラッパー */
.sl-cmp-table-scroll {
  width: 100%;
}

/* 比較表本体 */
.sl-cmp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 各セル共通設定 */
.sl-cmp-table th,
.sl-cmp-table td {
  border: 1px solid #dcdcdc;
  padding: 14px 16px;
  vertical-align: middle;
  line-height: 1.6;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   PC用ヘッダー（1行目）設定
   -------------------------------------------------------------------------- */
.sl-cmp-th-label {
  width: 22%;
  font-weight: bold;
  text-align: left;
  border-top: none;
  border-left: none;
}

.sl-cmp-th-bad {
  width: 39%;
  font-weight: bold;
  text-align: left;
  background-color: #fcfcfc;
  border-top: none;
}

.sl-cmp-th-good {
  width: 39%;
  font-weight: bold;
  text-align: left;
  background-color: #fcfcfc;
  border-top: none;
}

/* --------------------------------------------------------------------------
   行見出し（左端の黒セル）設定
   -------------------------------------------------------------------------- */
.sl-cmp-row-head {
  background-color: #000000;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  border-left: none;
}

/* --------------------------------------------------------------------------
   リスト部分（箇条書きのドット表示）
   -------------------------------------------------------------------------- */
.sl-cmp-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-cmp-list li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.4em;
}

.sl-cmp-list li:last-child {
  margin-bottom: 0;
}

/* ドット（・）の追加 */
.sl-cmp-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* ==========================================================================
   スマホ表示（768px以下）：横スクロールせず縦に積み重ねる設定
   ========================================================================== */
@media screen and (max-width: 768px) {
  .sl-cmp-table {
    display: block;
    width: 100%;
    table-layout: auto;
  }

  /* 表のヘッダー（一番上のラベル行）を非表示化 */
  .sl-cmp-table thead {
    display: none;
  }

  .sl-cmp-table tbody {
    display: block;
    width: 100%;
  }

  .sl-cmp-table tr {
    display: block;
    margin-bottom: 25px;
    border: 1px solid #dcdcdc;
  }

  /* 項目見出し（①〜⑤）をカードの上部ヘッダーとして表示 */
  .sl-cmp-row-head {
    display: block;
    width: 100%;
    border: none;
    padding: 12px 15px;
  }

  /* 各セルをブロック要素化 */
  .sl-cmp-table td {
    display: block;
    width: 100%;
    border: none;
    border-top: 1px solid #eef0f2;
    padding: 15px;
    background-color: #ffffff;
  }

  /* セルの上部に「悪いビジョン」「良いビジョン」のラベルを見出しとして自動挿入 */
  .sl-cmp-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #dcdcdc;
  }

  /* 良いビジョンのラベルカラーを青色に強調 */
  .sl-cmp-table td[data-label="良いビジョン(内発的動機型)"]::before {
    color: #1a568c;
  }

  /* 悪いビジョンのラベルカラー設定 */
  .sl-cmp-table td[data-label="悪いビジョン(外発的動機型)"]::before {
    color: #333333;
  }
}

/* --------------------------------------------------------------------------
PMVV策定コンサルティングの特徴・強み
 -------------------------------------------------------------------------- */

/* ==========================================
   ソリューションフローエリア設定
   ========================================== */
.sol-flow-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px 0px;
}

.sol-flow-container *,
.sol-flow-container *::before,
.sol-flow-container *::after {
  box-sizing: border-box;
}

/* --- 上部フロー構造（PC時は左寄せ指定） --- */
.sol-flow-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.sol-box-black {
  background-color: #000000;
  color: #ffffff;
  padding: 14px 20px;
  text-align: center;
  font-weight: bold;
  flex: 0 0 200px;
}

.sol-box-gradient {
  background: linear-gradient(90deg, #8198c0 0%, #e0ccce 100%);
  color: #ffffff;
  padding: 14px 20px;
  text-align: center;
  font-weight: bold;
  flex: 0 0 200px;
}

/* --- 矢印パーツ（PC時：横向き） --- */
.sol-arrow-right {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sol-arrow-label {
  white-space: nowrap;
  margin-top: 6px;
}

.sol-arrow-line-wrap {
  width: 100%;
  display: flex;
  align-items: center;
}

/* PC時は下部矢印を非表示 */
.sol-arrow-bottom-wrap {
  display: none;
}

.sol-arrow-line {
  flex: 1;
  height: 2px;
  background-color: #000000;
}

.sol-arrow-head {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #000000;
  flex-shrink: 0;
}

/* --- 下向き三角矢印 --- */
.sol-arrow-down {
  width: 0;
  height: 0;
  margin: 0 auto 20px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 25px solid #888888;
}

/* --- 中央帯 --- */
.sol-banner-black {
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  padding: 12px 10px;
  margin-bottom: 20px;
}

.sol-banner-title {
  font-weight: bold;
}

/* --- 4つの戦略グリッド --- */
.sol-strategy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 30px;
}

.sol-strategy-card {
  background-color: #f2f2f2;
  padding: 25px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sol-card-title {
  font-weight: bold;
}

/* --- 下部テキスト説明 --- */
.sol-features-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sol-feature-title {
  font-weight: bold;
}

.sol-feature-desc {
  padding-left: 0.5em;
  line-height: 1.6;
}

/* ==========================================
   レスポンシブ対応（スマホ・タブレット向け）
   ========================================== */
@media screen and (max-width: 768px) {
  .sol-flow-top {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }

  .sol-box-black,
  .sol-box-gradient {
    flex: none;
    width: 100%;
  }

  .sol-arrow-right {
    flex: none;
    width: 100%;
    padding: 5px 0;
  }

  .sol-arrow-label {
    margin: 6px 0;
  }

  /* スマホ表示時は「線＋矢印」パーツを縦方向に変換 */
  .sol-arrow-line-wrap {
    flex-direction: column;
    width: auto;
  }

  /* ワークショップ下の矢印パーツを表示化 */
  .sol-arrow-bottom-wrap {
    display: flex;
  }

  .sol-arrow-line {
    width: 2px;
    height: 20px;
  }

  .sol-arrow-head {
    border-top: 10px solid #000000;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 0;
  }

  .sol-strategy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .sol-strategy-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
ご支援のフロー・ステップ
 -------------------------------------------------------------------------- */
/* ==========================================
   ステップ（プロセス）エリア設定
   ========================================== */
.sol-step-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.sol-step-container *,
.sol-step-container *::before,
.sol-step-container *::after {
  box-sizing: border-box;
}

/* 4列グリッド配置（高さ揃えの軸） */
.sol-step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  align-items: stretch;
  padding: 20px 0px;
}

.sol-step-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ヘッダー部分（グラデーション背景＆高さを揃える処理） */
.sol-step-header {
  background: linear-gradient(90deg, #8198c0 0%, #e0ccce 100%);
  color: #ffffff;
  padding: 15px 10px;
  text-align: center;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 文字数に関わらず①〜④の高さを自動均等揃え */
  flex: 0 0 100px; 
  margin-bottom: 10px; /* タイトル枠と説明文枠の間に余白を追加 */
}

.sol-step-num {
  display: block;
  line-height: 1.2;
}

.sol-step-title {
  line-height: 1.3;
}

/* ボディ部分（グレー背景） */
.sol-step-body {
  background-color: #f2f2f2;
  padding: 20px 15px;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none; /* リストリセット */
}

/* 冒頭に「・」を確実に付与する処理 */
.sol-step-body li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.6;
}

.sol-step-body li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* ==========================================
   レスポンシブ対応
   ========================================== */
@media screen and (max-width: 768px) {
  .sol-step-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .sol-step-header {
    flex: 0 0 90px;
  }
}

@media screen and (max-width: 480px) {
  .sol-step-grid {
    grid-template-columns: 1fr;
  }

  .sol-step-header {
    flex: none;
    padding: 12px 10px;
  }
}