@charset "utf-8";
/* ==========================================================================
   コンタクトセンター・ベンチマーク診断
   ========================================================================== */
/* 全体を囲むセクションの調整（必要に応じて余白を調整してください） */
.cc-assessment-section {
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
}

/* 上部テキストのスタイリング */
.cc-assessment-lead {
    font-size: 18px;
    font-weight: bold;
    color: #384674; /* 画像の濃い紺色に合わせた上品なカラー */
    text-align: center;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* 画像を囲む共通のコンテナ設定 */
.cc-image-slider-container {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 改行のPC/スマホ制御（PCのときだけ指定の位置で改行させる） */
.pc-only {
    display: block;
}

/* --- スマホ表示（画面幅768px以下）のスタイル --- */
@media screen and (max-width: 768px) {
    .cc-assessment-lead {
        font-size: 15px; /* スマホ用に文字サイズを少し小さく */
        text-align: left; /* スマホのときは左詰めにしたい場合はここをleftに（中央ならcenter） */
        padding: 0 5px;
    }
    
    .pc-only {
        display: none; /* スマホでは指定位置の改行を無効化し、自動折り返しにする */
    }

    .cc-image-slider-container {
        overflow-x: auto;                  /* 横方向のはみ出しをスクロール可能に */
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
    }

    .cc-image-slider-container img {
        min-width: 800px; /* スマホでも文字が読める最小幅を確保 */
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* スマホ用スクロールバーのデザイン調整（不要なら削除してください） */
    .cc-image-slider-container::-webkit-scrollbar {
        height: 6px;
    }
    .cc-image-slider-container::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 3px;
    }
    .cc-image-slider-container::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }
}

/* --- PC表示（画面幅769px以上）のスタイル --- */
@media screen and (min-width: 769px) {
    .cc-image-slider-container img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}

/* ==========================================================================
   コンタクトセンターマネジメントの 最適化/高度化伴走支援
   ========================================================================== */
/* 全体コンテナ */
.ocm-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  background-color: #ffffff;
  border: 1px solid #eef2f5;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.ocm-wrapper *, .ocm-wrapper *::before, .ocm-wrapper *::after {
  box-sizing: border-box;
}

/* メインタイトル */
.ocm-main-title {
  text-align: center;
  color: #2b3a67;
  margin: 0 0 35px 0;
  font-weight: bold;
}

/* コンテンツ配置（PC時：3カラム横並び） */
.ocm-content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* 左右のテキストボックス共通 */
.ocm-side-box {
  flex: 1;
  background-color: #f5f6fa;
  border-radius: 12px;
  padding: 30px 20px 25px 20px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* バッジ（見出しリボン） */
.ocm-badge {
  display: inline-block;
  padding: 8px 24px;
  border-radius: 20px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  width: 80%;
  max-width: 180px;
}

.ocm-badge-blue {
  background-color: #2b3a67;
}

.ocm-badge-purple {
  background-color: #3b3b6d;
}

/* リストスタイル */
.ocm-list {
  width: 100%;
  margin: 0;
  padding: 0 0 0 15px;
  color: #333333;
}

.ocm-list li {
  margin-bottom: 12px;
  line-height: 1.5;
}

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

/* 中央体制図エリア */
.ocm-diagram-box {
  flex: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

/* 体制図画像（レスポンシブ対応） */
.ocm-diagram-img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* --- レスポンシブ対応（タブレット・スマホサイズ） --- */
@media screen and (max-width: 960px) {
  .ocm-content-container {
    flex-direction: column;
    gap: 30px;
  }
  
  .ocm-side-box {
    width: 100%;
    min-height: auto;
    flex: none;
  }
  
  .ocm-diagram-box {
    width: 100%;
    flex: none;
    padding: 20px 0;
  }
  
  .ocm-diagram-img {
    max-width: 80%; /* スマホ・タブレット時に画像が大きくなりすぎないよう調整 */
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .ocm-badge {
    width: 100%;
  }
  
  .ocm-diagram-img {
    max-width: 100%;
  }
}

/* ==========================================================================
   独自のユニーククラス (.support-flow-section) で干渉を防止
   ========================================================================== */

.support-flow-section {
  width: 100%;
  box-sizing: border-box;
  margin: 20px auto;
}

.support-flow-section *,
.support-flow-section *::before,
.support-flow-section *::after {
  box-sizing: border-box;
}

/* ヘッダータイトル（PC版の並び） */
.sf-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sf-title-box {
  background-color: #3b3d6b; /* 濃いネイビー */
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  padding: 12px 10px;
}

.sf-title-left {
  width: 56%;
}

.sf-title-right {
  width: 40%;
}

/* コンテンツコンテナ */
.sf-container {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 行間の隙間 */
}

/* 1行分のレイアウト */
.sf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 左側：ご支援の流れブロック */
.sf-content-block {
  width: 56%;
  background-color: #f7f9fc; /* 薄いグレーパープル調の背景 */
  border-radius: 12px;
  padding: 25px 20px;
}

/* 各ブロック内の見出し (h3) */
.sf-block-title {
  color: #3b3d6b;
  margin: 0 0 20px 0;
  padding-left: 10px;
  border-left: 4px solid #3b3d6b;
  font-weight: bold;
}

/* 3ステップの横並び */
.sf-step-grid {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.sf-step-item {
  flex: 1;
  text-align: center;
}

/* ★改善：見出しテキストを囲むブロック（高さを固定して中央寄せ） */
.sf-step-title-box {
  height: 3.2em; /* 2行分が入る高さを完全に固定 */
  display: flex;
  align-items: center; /* 上下の中央に配置 */
  justify-content: center; /* 左右の中央に配置 */
  margin-bottom: 15px;
}

.sf-step-item h4 {
  color: #666666;
  margin: 0;
  padding: 0;
  line-height: 1.4;
  text-align: center;
}

/* ★改善：アイコンエリア（画像の大きさがバラバラでも水平・垂直中央に揃う） */
.sf-icon {
  height: 65px; /* アイコン表示エリアの高さを固定 */
  width: 100%;
  display: flex;
  align-items: center;     /* 縦方向の中央揃え（これで上下が揃う） */
  justify-content: center;   /* 横方向の中央揃え */
  margin-bottom: 15px;
}

/* アイコン画像そのものの制御 */
.sf-icon img {
  max-height: 100%; /* 高さは最大65pxに制限 */
  max-width: 100%;  /* 横幅もはみ出さないように制限 */
  width: auto;      /* 縦横比を維持 */
  height: auto;     /* 縦横比を維持 */
  object-fit: contain; /* 枠内に綺麗に収める */
}

.sf-step-item p {
  color: #333333;
  margin: 0;
  text-align: left;
}

/* 中央の矢印 */
.sf-arrow-divider {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid #3b3d6b;
  margin: 0 10px;
}

/* 右側：成果物イメージブロック */
.sf-image-block {
  width: 40%;
}

.sf-image-wrapper {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* ==========================================================================
   レスポンシブ対応 (タブレット・スマホ向け: 960px以下)
   ========================================================================== */
@media screen and (max-width: 960px) {
  /* ヘッダーの横並びを解除 */
  .sf-header {
    display: none; /* スマホ・タブレット時はヘッダー自体を非表示に */
  }

  .sf-row {
    flex-direction: column;
    align-items: stretch;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  .sf-content-block {
    width: 100%;
    padding: 15px 10px;
    background-color: transparent; /* 親側で白背景にするため透明化 */
  }

  /* 矢印を下に向けに変更 */
  .sf-arrow-divider {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #3b3d6b;
    margin: 15px auto;
  }

  .sf-image-block {
    width: 100%;
  }

  .sf-image-wrapper {
    box-shadow: none;
    border: 1px solid #eee;
  }

  /* 画面幅がかなり狭いスマホ向け (560px以下) */
  @media screen and (max-width: 560px) {
    .sf-step-grid {
      flex-direction: column;
      gap: 25px;
    }
    .sf-step-title-box {
      height: auto; /* スマホ縦並び時は高さ固定を解除 */
      margin-bottom: 8px;
    }
    .sf-icon {
      margin-bottom: 8px;
    }
    .sf-step-item p {
      text-align: center;
    }
  }
}

/* ==========================================================================
   CXテクノロジー コンサルティング
   ========================================================================== */
   /* --- ソリューションフェーズ共通スタイル --- */
.sol-phase-section {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 0px;
  box-sizing: border-box;
}

/* ヘッダー部分 */
.sol-phase-header {
  text-align: center;
  margin-bottom: 40px;
}

.sol-phase-lead {
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #333333;
}

.sol-phase-note {
  margin: 4px 0 0 0;
  color: #555555;
}

/* グリッドコンテナ（2列レイアウト・レスポンシブ） */
.sol-phase-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

/* カード本体 */
.sol-phase-card {
  flex: 1 1 calc(50% - 15px);
  /* 画面幅に応じて幅を調整 */
  min-width: 300px;
  max-width: 485px;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* カードヘッダー（紺色背景部分） */
.sol-phase-card-header {
  background-color: #353666;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* アイコンを包む白い円 */
.sol-phase-icon-wrap {
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sol-phase-icon {
  width: 65%;
  height: 65%;
  object-fit: contain;
}

/* カード見出し（h3） */
.sol-phase-card-title {
  color: #ffffff;
  margin: 0;
  font-weight: bold;
}

/* カード本文エリア */
.sol-phase-card-body {
  padding: 24px;
  color: #333333;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sol-phase-card-body p {
  margin: 0;
}

/* テキストリンク（下線付き） */
.sol-phase-link {
  color: #b5478e;
  /* 紫・ピンク系のリンク色 */
  text-decoration: underline;
}

.sol-phase-link:hover {
  text-decoration: none;
}

/* スマートフォン用調整 (画面幅 640px 以下) */
@media (max-width: 640px) {
  .sol-phase-container {
    gap: 20px;
  }

  .sol-phase-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .sol-phase-card-header {
    padding: 20px;
    gap: 15px;
  }

  .sol-phase-icon-wrap {
    width: 50px;
    height: 50px;
  }

  .sol-phase-card-body {
    padding: 20px;
  }
}

/* ==========================================================================
   ご支援可能なシステム
   ========================================================================== */

   /* 全体コンテナ（ご要望により背景を白に設定） */
.cases-section2-container {
  width: 100%;
  max-width: 1100px; /* 既存サイトの幅に合わせて調整してください */
  margin: 0 auto;
  padding: 40px 0px;
  background-color: #ffffff; /* 背景色：白 */
  box-sizing: border-box;
}

/* メイン見出し */
.cases-section2-main-title {
  text-align: center;
  color: #2b365e; /* 既存に合わせた濃紺 */
  margin-top: 0;
  margin-bottom: 40px;
  font-weight: bold;
}

/* 3カラムラッパー */
.cases-section2-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 25px;
}

/* 各カード（シャドウ付きの白いボックス） */
.cases-section2-card {
  flex: 1;
  background-color: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0; /* 白背景でも映えるよう、ごく薄い境界線を追加 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* ご要望のシャドウ効果 */
  padding: 35px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* カード内見出しエリア */
.cases-section2-card-header {
  position: relative;
  text-align: center;
  padding-bottom: 25px;
  margin-bottom: 25px;
}

/* 見出し下の矢印付き区切り線をCSSで再現 */
.cases-section2-card-header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #94a3b8; /* 線。元の青みがかったグレー */
}

.cases-section2-card-header::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: #94a3b8 transparent transparent transparent; /* 線の色と同じ突起 */
}

/* 見出しテキスト */
.cases-section2-card-title {
  color: #2b365e;
  font-size: 1.35em;
  font-weight: bold;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* 導入事例（順不同）の補足テキスト */
.cases-section2-title-sub {
  font-size: 0.65em;
  color: #2b365e;
  font-weight: normal;
}

/* カードボディ */
.cases-section2-card-body {
  flex-grow: 1;
}

/* 箇条書きリスト */
.cases-section2-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cases-section2-list li {
  position: relative;
  line-height: 1.8;
  color: #333333;
  margin-bottom: 12px;
}

.cases-section2-list li:last-child {
  margin-bottom: 0;
}


/* 導入事例（リンク）のスタイル */
.cases-section2-list-links li a {
  color: #333333;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.cases-section2-list-links li a:hover {
  color: #4f46e5; /* ホバー時のカラー。サイトに合わせて変更してください */
}


/* ==========================================================================
   レスポンシブ（タブレット・スマホ対応）
   ========================================================================== */
@media screen and (max-width: 850px) {
  /* タブレット・スマホで縦並びにする */
  .cases-section2-wrapper {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .cases-section2-card {
    width: 100%;
    max-width: 480px; /* 横に広がりすぎないように制限 */
    padding: 30px 24px;
  }
}


/* ==========================================================================
   COPCをベースとした 人材育成研修(SV・MGR研修)
   ========================================================================== */

/* 全体を囲む白背景のベースカード */
.sol-dis-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.sol-dis-wrapper * {
  box-sizing: border-box;
}

/* メインのフレックスコンテナ */
.sol-dis-flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

/* 共通のグレー背景ボックス */
.sol-dis-box {
  background-color: #f5f6fa;
  border-radius: 8px;
  padding: 25px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 320px;
}

/* 各エリアの幅比率 */
.sol-dis-issue-box {
  width: 22%;
  justify-content: flex-start;
}

.sol-dis-effect-box {
  width: 72%;
  justify-content: flex-start;
}

/* 上部のネイビーのバッジ */
.sol-dis-badge {
  display: inline-block;
  width: 100%;
  max-width: 580px;
  background-color: #343363;
  color: #ffffff;
  text-align: center;
  padding: 8px 10px;
  border-radius: 50px;
  font-weight: bold;
  margin-bottom: 25px;
  line-height: 1.2;
}

/* 課題テキスト */
.sol-dis-issue-text {
  text-align: center;
  font-weight: bold;
  line-height: 1.6;
  margin: auto 0;
}

/* 中間矢印のコンテナ */
.sol-dis-arrow-next {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 縦に細長い三角形をCSSの clip-path で再現 */
.sol-dis-arrow-triangle {
  width: 100%;
  height: 86px; /* 画像の細長い比率に合わせて設定 */
  background-color: #343363;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

/* 影響エリアの見出し */
.sol-dis-lead-title {
  text-align: center;
  font-weight: bold;
  margin: 0 0 20px 0;
  line-height: 1.4;
}

/* 画像配置コンテナ */
.sol-dis-image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}

/* 5連カード画像（レスポンシブ対応） */
.sol-dis-effect-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* レスポンシブ対応（タブレット・スマホサイズ） */
@media screen and (max-width: 860px) {
  .sol-dis-flex-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .sol-dis-issue-box,
  .sol-dis-effect-box {
    width: 100%;
    min-height: auto;
  }
  
  /* スマホ時は矢印を下向きの扁平な三角形に回転 */
  .sol-dis-arrow-next {
    width: 86px;
    margin: 5px 0;
  }
  
  .sol-dis-arrow-triangle {
    width: 100%;
    height: 18px;
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
  }
}

@media screen and (max-width: 520px) {
  .sol-dis-wrapper {
    padding: 15px;
  }
}

/* 画像グリッドのベースコンテナ */
.slide-grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 画像と画像の間の余白（上下左右共通） */
  width: 100%;
  max-width: 1200px; /* コンテンツの最大幅に合わせて調整してください */
  margin: 0 auto;
  box-sizing: border-box;
}

.slide-grid-container * {
  box-sizing: border-box;
}

/* PC：2つずつ横並び（50%から余白の半分を引く） */
.slide-grid-item {
  width: calc(50% - 10px); 
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 画像自体のレスポンス設定 */
.slide-grid-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px; /* スライドの角を少し丸める場合（不要なら削除してください） */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 軽い影をつける場合 */
}

/* スマートフォン対応（タブレットサイズ以下から縦並びに切り替え） */
@media screen and (max-width: 768px) {
  .slide-grid-container {
    gap: 15px; /* スマホ時の隙間を少し狭く */
  }
  
  /* SP：1つずつ縦並び（100%幅） */
  .slide-grid-item {
    width: 100%;
  }
}