@charset "utf-8";
/* ==========================================================================
   コンタクトセンターの立ち上げ
   ========================================================================== */
/* ==========================================
   コンタクトセンター立ち上げセクション 独自CSS
   （カード独立・高精度水平アライメント版）
   ========================================== */

/* 全体コンテナ */
.cc-launch-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  line-height: 1.6;
  color: #333333;
}

.cc-launch-container * {
  box-sizing: border-box;
}

/* 共通アイコン画像スタイル */
.cc-launch-icon-img {
  display: block;
  width: 48px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* --- 上部：目的・本質エリア --- */
.cc-launch-top-row {
  display: flex;
  border: 1px solid #cccccc;
  margin-bottom: 40px;
}

.cc-launch-purpose-box {
  display: flex;
  flex: 1.2;
  border-right: 1px solid #cccccc;
}

.cc-launch-purpose-title {
  background-color: #0068b7;
  color: #ffffff;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.2em;
}

.cc-launch-purpose-list {
  margin: 0;
  padding: 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.cc-launch-purpose-list li {
  position: relative;
  padding-left: 20px;
}

.cc-launch-purpose-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #000000;
  font-weight: bold;
}

.cc-launch-essence-box {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
  gap: 20px;
}

.cc-launch-essence-icon {
  flex-shrink: 0;
}

.cc-launch-essence-box .cc-launch-icon-img {
  width: 56px; 
}

.cc-launch-essence-text {
  margin: 0;
}

.cc-launch-highlight {
  color: #0068b7;
  font-weight: bold;
}

/* --- 中部：ステップ＆効果エリア --- */
.cc-launch-steps-section {
  margin-bottom: 40px;
}

.cc-launch-section-title {
  position: relative;
  margin: 0 0 24px 0;
  padding-bottom: 8px;
  font-weight: bold;
  border-bottom: 1px solid #0068b7;
  padding-left: 12px;
}

.cc-launch-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 4px;
  height: 100%;
  background-color: #0068b7;
}

.cc-launch-flex-wrapper {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

/* ステップのグリッド（PC時は横に6枚並ぶ） */
.cc-launch-steps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  flex: 3.8; /* 効果ボックスとの比率調整 */
}

/* ①〜⑥ 各独立したカードの枠線と背景 */
.cc-launch-step-card {
  border: 1px solid #0068b7;
  background-color: #eaf3fa; /* 添付画像の薄い青色の背景 */
  padding: 15px 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* タイトルエリア：最小高さを固定して、画像の開始位置を完全に水平同期 */
.cc-launch-step-header {
  color: #0068b7;
  font-weight: bold;
  text-align: center;
  height: 77px; /* 2行のタイトルが入っても崩れない高さ */
  display: flex;
  align-items: center;
  justify-content: center;
  align-items:flex-start;
}

/* 画像エリア：高さを一律で固定することで、画像自体の水平ラインと、下のテキスト開始位置を完璧に揃える */
.cc-launch-step-icon-wrap {
  height: 75px; /* アイコン表示エリアの高さを統一 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
}

/* 説明テキストエリア：flex-growにより、テキスト量に関わらず全カードの底辺が揃う */
.cc-launch-step-desc {
  margin: 0;
  text-align: left;
  flex-grow: 1;
}


/* 主な効果ブロックのスタイル */
.cc-launch-effect-box {
  flex: 1.2;
  background-color: #0068b7;
  color: #ffffff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cc-launch-effect-title {
  margin: 0 0 10px 0;
  font-weight: bold;
}

.cc-launch-effect-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 15px 0;
}

.cc-launch-effect-img {
  display: block;
  width: 65px;
  height: auto;
  object-fit: contain;
}

.cc-launch-effect-list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  width: 100%;
}

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

.cc-launch-effect-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* --- 下部：まとめのテキスト --- */
.cc-launch-footer-text {
  text-align: center;
  font-weight: bold;
  margin-top: 30px;
}

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

/* 1200px以下：タブレットサイズ（効果エリアを下に落とし、ステップを広々見せる） */
@media screen and (max-width: 1200px) {
  .cc-launch-flex-wrapper {
    flex-direction: column;
  }
  
  .cc-launch-effect-box {
    margin-top: 20px;
  }
}

/* 850px以下：6列だと横幅が狭くなりテキストが読みにくいため、3列×2行に美しく切り替え */
@media screen and (max-width: 850px) {
  .cc-launch-steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

/* 560px以下：スマホサイズ（縦長画面では2列または1列へ） */
@media screen and (max-width: 560px) {
  .cc-launch-top-row {
    flex-direction: column;
    border: none;
  }

  .cc-launch-purpose-box {
    border: 1px solid #cccccc;
    margin-bottom: 15px;
    flex-direction: column;
  }

  .cc-launch-purpose-title {
    writing-mode: horizontal-tb;
    width: auto;
    padding: 10px;
  }

  .cc-launch-essence-box {
    border: 1px solid #cccccc;
    gap: 10px;
    padding: 15px;
  }

  .cc-launch-essence-box .cc-launch-icon-img {
    width: 40px; 
  }
  
  .cc-launch-steps-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホでは2列でコンパクトに */
    gap: 8px;
  }

  .cc-launch-step-header {
    min-height: auto; /* スマホ時はそれぞれのテキスト量に合わせる */
  }

  .cc-launch-effect-img {
    width: 50px;
  }
}

/* =======================================================
  ■ ソリューションステップ＆効果スタイルシート (ユニーク接頭辞 sop-)
  ・縦一列(垂直フロー型)・レスポンシブ準拠・画像アイコン対応
  ・font-family, font-size の強制的なグローバル定義は排除しています。
  ============================================================ */

/* 全体外枠 */
.sop-section-container {
  width: 100%;
  box-sizing: border-box;
}

/* 継承用リセット設定 */
.sop-section-container *,
.sop-section-container *::before,
.sop-section-container *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 縦一列フロー親ラッパー */
.sop-steps-vertical-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  gap: 20px; /* 各要素間の等間隔隙間を設定 */
}

/* ステップ個別横長カード */
.sop-step-row-card {
  width: 100%;
  background-color: #f0f7fc; /* 薄いブルー */
  border: 1px solid #0066b3; /* 濃いブルー */
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column; /* スマホでは縦並び */
  gap: 16px;
  align-items: center;
}

/* 左カラム：番号＆画像アイコン */
.sop-step-badge-col {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sop-step-number-badge {
  font-weight: bold;
  color: #0066b3;
}

.sop-step-icon-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sop-step-img-icon {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* アスペクト比を保って収める */
}

/* 右カラム：テキスト情報 */
.sop-step-content-col {
  flex-grow: 1;
  width: 100%;
}

.sop-step-row-title {
  font-weight: bold;
  color: #0066b3;
  margin-bottom: 8px;
}

.sop-step-row-desc {
  color: #333333;
  line-height: 1.6;
}

/* 立ち上げによる主な効果 横長カード */
.sop-effect-row-card {
  width: 100%;
  background-color: #0066b3; /* 青いソリッド背景 */
  color: #ffffff;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 10px; /* 効果を少し強調するため上のマージンを追加 */
}

/* 効果カードのヘッダー */
.sop-effect-row-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 16px;
}

.sop-effect-graphic-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sop-effect-img-icon {
  width: 80px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.sop-effect-title-box {
  text-align: center;
}

.sop-effect-subtitle-tag {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.05em;
}

.sop-effect-row-title {
  color: #ffffff;
  font-weight: bold;
}

/* 効果カードのボディ＆リスト */
.sop-effect-row-body {
  width: 100%;
}

.sop-effect-row-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sop-effect-row-item {
  position: relative;
  padding-left: 20px;
  line-height: 1.6;
}

.sop-effect-row-item::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffffff;
  font-weight: bold;
}

/* =======================================================
  ■ レスポンシブ用メディアクエリ (タブレット・PC向け左右2カラム構造化)
============================================================ */
@media (min-width: 640px) {
  
  .sop-steps-vertical-flow {
    gap: 24px;
  }

  /* 各ステップカードを左右並びにしてスマートに */
  .sop-step-row-card {
    flex-direction: row;
    align-items: center; /* ← flex-start から center に変更 */
    padding: 28px;
    gap: 24px;
  }
  
  .sop-step-badge-col {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 60px;
  }
  
  /* 以下省略 */  
  .sop-step-number-badge {
    line-height: 1;
  }

  /* 効果カードを左右2カラムに分けて見やすく配置 */
  .sop-effect-row-card {
    flex-direction: row;
    align-items: center;
    padding: 32px;
    gap: 32px;
  }

  .sop-effect-row-header {
    flex-direction: row;
    align-items: center;
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 0;
    padding-right: 32px;
    width: 45%;
    gap: 16px;
    flex-shrink: 0;
  }

  .sop-effect-title-box {
    text-align: left;
  }

  .sop-effect-img-icon {
    width: 100px;
  }

  .sop-effect-row-body {
    flex-grow: 1;
  }
}

@media screen and (max-width: 768px) {
  .sop-step-row-title {
    text-align: center;
  }
}

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

/* --- ご支援イメージ 全体コンテナ --- */
.support-step-container {
  width: 100%;
  box-sizing: border-box;
  margin: 2rem auto;
  padding: 0 10px;
}

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

/* --- グリッドレイアウト（PCは3カラム） --- */
.support-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 24px;
  position: relative;
}

/* --- カードスタイル --- */
.support-step-card {
  background-color: #f1f3f7;
  border: 1px solid #104e9c;
  display: block;
}

/* --- カードヘッダー（青い帯） --- */
.support-step-header {
  background-color: #0070c0;
  padding: 10px 12px;
}

/* --- フェーズタイトル（テキストと白色アイコンの横並び） --- */
.support-step-title {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center; /* 中央揃え */
  gap: 8px; /* テキストとアイコンの間隔 */
}

/* --- 【修正】画像をCSSで強制的に白色にするスタイル --- */
.support-step-white-icon {
  width: auto;
  height: 1.5em; /* テキストより少しだけ大きめに調整 */
  vertical-align: middle;
  object-fit: contain;
  
  /* 以下の2行で画像の色を強制的に白に変換します */
  filter: brightness(0) invert(1);
}

/* --- カードボディ --- */
.support-step-body {
  padding: 16px;
}

/* --- コンテンツタイトルと期間 --- */
.support-step-content-title {
  color: #104e9c;
  text-align: center;
  margin: 0 0 16px 0;
  font-weight: bold;
  line-height: 1.4;
}

.support-step-period {
  display: inline-block;
  margin-top: 4px;
}

/* --- リスト（箇条書き） --- */
.support-step-list {
  margin: 0;
  padding: 0;                /* 左のパディングを一度リセット */
  list-style: none;          /* ブラウザ標準の・を非表示にする（バグ回避） */
}

.support-step-list li {
  margin-bottom: 8px;
  line-height: 1.5;
  text-align: left;
  position: relative;        /* 疑似要素の位置の基準にする */
  padding-left: 1em;         /* 「・」の分だけ左側に余白を作る */
}

/* 疑似要素で「・」を強制的に表示させる */
.support-step-list li::before {
  content: "・";             /* 先頭に「・」を付与 */
  position: absolute;
  left: 0;                   /* 左端に固定 */
  top: 0;                    /* 上端に合わせる */
  color: #333333;            /* 文字と同じ色（必要に応じて変更してください） */
}

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

/* --- 注記（下部ライン） --- */
.support-step-footer-note {
  display: block;
  text-align: center;
  margin-top: 32px;
  position: relative;
}

.support-step-footer-note::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: #0070c0;
  z-index: 1;
}

.support-step-footer-note span {
  background-color: #ffffff; /* 背景色に合わせて任意に変更してください */
  padding: 0 5px;
  position: relative;
  z-index: 2;
  color: #333333;
}

/* --- レスポンシブ対応（タブレット・スマホ） --- */
@media screen and (max-width: 960px) {
  .support-step-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media screen and (max-width: 640px) {
  .support-step-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


.sol-proc-container {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  row-gap: 50px;
  padding: 20px 10px;
}

.sol-proc-card {
  position: relative;
  background-color: #f1f3f7;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* --- ヘッダーの中身を左右中央に寄せる --- */
.sol-proc-card-header {
  background: linear-gradient(135deg, #006cb8 0%, #005694 100%);
  padding: 12px 20px;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
  display: flex;
  
  /* ✕ 変更前: justify-content: space-between; */
  justify-content: center; /* ◯ 変更後: 中身を左右中央に集める */
  align-items: center;
  
  gap: 12px; /* ◯ 追加: 文字とアイコンの間の「すき間」をお好みの幅（12px等）で設定 */
  box-sizing: border-box;
}
/* 文字の上下にある不要な行高の余白をクリア */
.sol-proc-badge {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1; /* ← 追加：文字の上下の隙間をなくして中央に */
}

.sol-proc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

/* 画像が持っている下隙間をクリア */
.sol-proc-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block; /* ← 追加：画像の下に生まれる隙間を排除して中央に */
}

.sol-proc-card-body {
  padding: 24px 50px;
  flex-grow: 1;
  box-sizing: border-box;
}

.sol-proc-card-title {
  margin: 0 0 16px 0;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

.sol-proc-duration {
  color: #006cb8;
  font-weight: 700;
  margin-top: 4px;
}

.sol-proc-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.sol-proc-list li {
  position: relative;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 12px;
  padding-left: 14px;
}

.sol-proc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  background-color: #334155;
  border-radius: 50%;
}

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

.sol-proc-connector {
  position: absolute;
  left: 50%;
  bottom: -36px;
  transform: translateX(-50%);
  width: 20px;
  height: 24px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sol-proc-line {
  width: 0px;
  height: 100%;
  border-left: 2px dashed #006cb8;
}

.sol-proc-arrowhead {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #006cb8;
  margin-top: -2px;
}

/* ==========================================
   報告書イメージ
   ========================================== */

/* --- ダウンロードコンテンツ 全体コンテナ --- */
.support-download-container {
  width: 100%;
  box-sizing: border-box;
  margin: 2rem auto;
  padding: 0 10px;
}

.support-download-container *,
.support-download-container *::before,
.support-download-container *::after {
  box-sizing: border-box;
}

/* --- グリッドレイアウト（PCは横並び2カラム） --- */
.support-download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* --- カードスタイル --- */
.support-download-card {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* --- カードヘッダー（青い帯） --- */
.support-download-header {
  background-color: #0070c0;
  padding: 12px;
  text-align: center;
}

/* --- タイトルテキスト --- */
.support-download-title {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-weight: bold;
  line-height: 1.4;
}

/* --- カードボディ（画像エリア） --- */
.support-download-body {
  background-color: #ffffff;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 画像のコンテナ（枠線と影で書類らしさを表現） --- */
.support-download-image-wrap {
  width: 100%;
  line-height: 0;
}

.support-download-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- レスポンシブ対応（スマホサイズで縦並び） --- */
@media screen and (max-width: 768px) {
  .support-download-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .sol-proc-card-title{
    text-align: center;
  }
  .sol-proc-card-body {
    padding: 24px 20px;
  }

  .s-list-contents-5 dd .box .boxin{
    min-height: 80px;
  }

}