/* =========================================================
   Case Page – Unified Stylesheet (Fixed)
   ========================================================= */

/* ---------- 変数 ---------- */
:root {
  --content-width: 1120px;
  --blue-main: #2c7ecb;
  --blue-light: #00a8c9;
  --gray-bg: #f6f8fb;
  --text-main: #222;
}

/* ---------- Reset（最小限） ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text-main);
  background: var(--gray-bg);
}

/* =========================================================
   共通ラッパー
   ======================================================== */
.case-section {
  margin-top: -300px;       /* ← KV分だけ上に伸ばす */
  padding-top: 240px;       /* ← 中身のサマリー位置 */
  padding-bottom: 80px;
}

.case-container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 16px;
}

.case-bg {
  position: fixed;
  inset: 0;
  background: var(--gray-bg);
  z-index: -1;
}
/* マーカーを消したリスト */
  ul.no-marker {
  list-style: none;
  margin: 0;
  padding: 0 40px;
  box-sizing: border-box;
  }

@media (max-width: 768px) {
  ul.no-marker {
    padding: 0 24px;
  }
}
/* =========================================================
   KV：青の帯を白枠と同幅＋重なり（最終版・統合）
   ========================================================= */
.case-kv {
 position: relative;
 padding-top: 20px;     /* 100px → 56px くらいが目安 */
 padding-bottom: 100px;  /* 120px → 88px */

  margin-top: -32px;
  background: none;
  z-index: 2; /* 青帯の親要素 */
}

/* 青い帯 */
.case-kv::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  transform: translateX(-50%);
  width: 1120px;
  height: 100%;
  background-color:  var(--blue-main);
  border-radius: 16px;
  z-index: 0;
}

/* 中央寄せ＆幅制御 */
.case-kv-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative; /* 青帯より前に出す */
  z-index: 1;
}

/* 見出し・キャッチ */
.case-kv-title {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin-top: 0;         /* 重要：-80px を使わない */
  margin-bottom: 12px;   /* 16px → 少しタイトに */

}

.case-kv-catch {
  font-size: 18px;       /* 20px → 18pxで密度アップ（任意） */
  line-height: 1.55;     /* 1.6 → 1.55 */
  margin: 0;
  color: #fff;

}



/* イラスト */
.case-kv-illust img {
  max-width: 320px;
  height: auto;
}

/* レスポンシブ（KV） */
@media screen and (max-width: 768px) {
  .case-kv {
    padding-top: 40px;
    padding-bottom: 70px;
    margin-top: -24px;
  }
  .case-kv::before {
    width: calc(100% - 32px);
    border-radius: 12px;
  }
  .case-kv-inner {
    flex-direction: column;
    text-align: center;
  }
  .case-kv-title {
    font-size: 28px;
  }
  .case-kv-catch {
    font-size: 16px;
  }
 
}

/*浮き出し効果*/

.case-kv {
  overflow: visible;
}

.case-kv-illust {
  position: relative;
  z-index: 2;
  transform: translateY(-60px); /* ← ここを好きな高さに調整 */
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
}

@media (max-width: 768px) {
  .case-kv-illust {
    transform: translateY(-10px);
  }
}
/* =========================================================
   KV下：白いサマリーカード
   ========================================================= */
.case-summary {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 32px 40px;
  /* height: 300px;  固定高さは崩れの原因になるので外す */
  margin-top: -80px;  /* まずは -120px → -80px に */

  max-width: var(--content-width);
  position: relative;
  z-index: 3; /* 青帯より前に確実に */
}


/* サマリー上段（ロゴ＋タイトル横並び） */
.case-summary-head {
  display: flex;
  align-items: center;
   justify-content: center; /* ← これだけ追加でセンターになる！ */
  gap: 40px;
  margin-bottom: 20px;
 
}

.case-summary-head img {
  width: 200px;
  max-height: auto;
  height: none;
}

/* タイトル（事例の下のテキスト） */
.case-summary-ttl {
  margin-top: 0;
  color: var(--text-main); /* ← #222 に修正 */
}
.case-summary-ttl p {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-main); /* 白背景上なので黒系 */
}

/* 下段メタ情報 */
.case-summary-meta {
  display: flex;
  align-items: center;
  justify-content: center; /* センター寄せは維持 */
  flex-wrap: wrap;
  gap: 16px 24px;
}

.case-summary-meta p {
  margin: 0;
}

.case-summary-meta b {
  font-weight: 700;
}

/* ★追加：事例区分/領域を「必ず2行」にする */
.case-meta-text{
  display: flex;
  flex-direction: column;
  gap: 8px;        /* 2行の間隔（好みで調整） */
}

/* カテゴリタグ */
.case-cat {
  list-style: none;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;          /* ★追加：タグが多い/狭いときだけ折り返す */
  justify-content: center;  /* ★追加：中央寄せデザインに合わせる */
}

.case-cat li {
  background-color: rgb(212, 210, 210);
  color: var(--text-main);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
}

/* SP（サマリー） */
@media screen and (max-width: 768px) {
  .case-summary {
    margin: -80px 16px 48px;
    padding: 24px 20px;
  }
  .case-summary-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* =========================================================
   背景・課題 共通ブロック
   ========================================================= */
.case-block{
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  margin-top:30px;
}
.case-block{
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
}

/* 左：青い矢印ラベル */
.case-arrow {
  position: relative;
  width: 100px;
  height: 96px;
  flex-shrink: 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-arrow::after {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.case-arrow.bg {
  background: var(--blue-light);
}
.case-arrow.bg::after {
  border-top: 24px solid var(--blue-light);
}
.case-arrow.issue {
  background: var(--blue-main);
}
.case-arrow.issue::after {
  border-top: 24px solid var(--blue-main);
}

/* 右：白いカード */
.case-card {
  background: #fff;
  width: 100%;
  padding: 24px 32px;
  margin-left: -16px; /* 矢印に密着 */
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.case-card p {
  margin: 0;
  line-height: 1.7;
}
.case-card ul {
  margin: 0;
  padding-left: 1.2em;
}
.case-card li {
  margin-bottom: 8px;
}




/* =========================================
   スマホ時のみ（ブレークポイントは必要に応じて調整）
   ========================================= */
@media (max-width: 767px) {

  /* セクション単位でz-index計算を閉じる */
  .case-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    isolation: isolate;
  }

  /* “青帯＋浅いV字” を横いっぱいで形成 */
  .case-arrow {
    /* 調整用パラメータ */
    --valleyY: 74%;   /* V字の浅さ（大→浅い） */
    --valleyW: 34%;   /* V字の横の広がり（大→ワイド） */

    width: 100%;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    border-radius: 8px 8px 0 0;
    position: relative;

    /* 帯全体をV字に切り抜く */
    clip-path: polygon(
      0 0, 100% 0, 100% var(--valleyY),
      calc(50% + var(--valleyW)/2) var(--valleyY),
      50% 100%,
      calc(50% - var(--valleyW)/2) var(--valleyY),
      0 var(--valleyY)
    );

    /* ▼ カードの上に“乗って見える”よう前面に */
    z-index: 2;
    /* 三角部分はクリックを遮らない（任意） */
    pointer-events: none;
  }

  /* 色（既存の変数を使用） */
  .case-arrow.bg    { background: var(--blue-light); }
  .case-arrow.issue { background: var(--blue-main); }

  /* 白カード：上に寄せて密着、テキストはしっかり見せる */
  .case-card {
    /* 調整用パラメータ：『乗せ具合』 */
    --overlap: 20px; /* 帯をどれだけカードに食い込ませるか（8～16px目安） */

    background: #fff;
    width: 100%;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    border-radius: 0 0 8px 8px;

    /* ▼ 間を詰める：帯へ少し食い込ませる */
    margin-left: 0;                         /* PCの -16px を打ち消し */
    margin-top: calc(-1 * var(--overlap));  /* 上に引き上げ＝密着 */

    /* ▼ テキストが矢印に隠れないよう、上パディングを増量 */
    padding: calc(24px + var(--overlap)) 20px 24px;

    position: relative;
    z-index: 1;  /* テキストは帯の“下に回り込まない” */
  }

  /* 文字の読みやすさ（任意で） */
  .case-card p  { margin: 0; line-height: 1.8; }
  .case-card ul { margin: 0; padding-left: 1.2em; }
  .case-card li { margin-bottom: 10px; }
}
/* =========================================================
   解決セクション
   ========================================================= */
.case-solution {
  background: #fff;
  max-width: var(--content-width);
  margin: 80px auto 0;
  padding: 64px 40px 56px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  position: relative;
  overflow: visible; /* 赤丸をはみ出させる */
}

/* 赤い丸 */
.case-solution-ttl {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.case-solution-ttl span {
  width: 90px;
  height: 90px;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8344e;
  color: #fff;
}

/* リード文 */
.case-solution-lead {
  margin-top: 30px;
  text-align: left;
}

/* 見出しの左に赤い縦線 */
.case-solution-item h3 {
  position: relative;
  font-size: 16px;
  padding-left: 20px;
  font-weight: bold;
  color: #e8344e;
}
.case-solution-item h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 4px;
  height: 1.2em;
  background-color: #e8344e;
  border-radius: 2px;
}

.case-solution-item-ttl{
 font-size: 16px;
 padding-left: 16px;

}
 

/* =========================================================
   成果セクション（青い“枠あり”丸バッジ）
   ========================================================= */

.case-result {
  background: #fff;
  max-width: var(--content-width);
  margin: 64px auto 0;            /* 「解決」の直下に自然な余白で続く */
  padding: 64px 40px 56px;        /* 上側はバッジ分を見越して少し広め */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  position: relative;
  overflow: visible;              /* バッジをはみ出させる */
  z-index: 0;
}

/* 青い“輪郭”丸（中央上に重ねる） */
.case-result-ttl {
  position: absolute;
  top: -40px;                     /* はみ出し量（解決と揃え） */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.case-result-ttl span {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;

  /* 青丸 背景は青、外周は青、文字白 */
  background: var(--blue-main);
  color: #fff;
  border: 4px solid var(--blue-main);

  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* 見出し（項目）に青の縦線 — 解決と同様 */
.case-result-item {
  padding-top: 16px; /* 例：16〜24pxでお好み調整 */
}

.case-result-item h3 {
  position: relative;
  font-size: 16px;
  padding-left: 20px;
  margin: 0 0 8px;
  color: var(--blue-main);
  font-weight: bold;
}

.case-result-item h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 4px;
  height: 1.6em;
  background-color: var(--blue-main);
  border-radius: 2px;
}

/* 説明文など */
.case-result p {
  margin: 0 0 12px;
  line-height: 1.7;
}

/* 成果のポイントをタグ風に（任意） */
.case-result-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 12px 0 0;
}

.case-result-tags li {
  background: #eef6ff;
  color: #1e3a8a;
  border: 1px solid rgba(44,126,203,0.25); /* 青系の淡い枠 */
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* スマホ最適化 */
@media (max-width: 768px){
  .case-result {
    padding: 56px 20px 40px;
  }

  .case-results-stats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }

  .case-results-stats .item {
    width: 100%;
    max-width: 100%;
  }
}




/* =========================================================
   今後の展望：白いカード
   ========================================================= */
.case-future {
  background-color: #ffffff !important;
  max-width: 1120px;
  margin: 64px auto 0;
  padding: 48px 40px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}
.case-future-ttl {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--blue-main);
}

/* SP（Future） */
@media screen and (max-width: 768px) {
  .case-future {
    margin: 48px 16px 0;
    padding: 32px 20px;
  }
}

/* =========================================================
   数値カード（2枚・小型・センター寄せ）
   ========================================================= */

/* コンテナ */
.case-results-stats{
  display: flex;
  flex-wrap: wrap;          /* 折返し可 */
  gap: 16px;
  justify-content: center;  /* センター寄せ */
  margin: 24px auto;        /* 上下ややタイト + 中央寄せ */
  max-width: 720px;         /* 行幅を制限（2枚が収まる幅） */
  padding: 0 8px;           /* 端の余白ケア */
}

/* カード */
.case-results-stats .item{
  background: var(--blue-main);
  color: #fff;
  padding: 18px 20px;       /* 小型化 */
  border-radius: 12px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;

  /* 2カードでちょうど良い幅（最小320px、画面に応じ縮小） */
  width: min(320px, 42vw);
  box-sizing: border-box;
}

/* タイトル */
.case-results-stats .item .label{
  font-size: 18px;          /* 小さめ */
  font-weight: 700;
  line-height: 1.45;
  min-height: 44px;         /* 2行想定の高さを少し低く */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 最大（任意表示用：保持） */
.case-results-stats .item .max{
  font-size: 14px;
  font-weight: 700;
  opacity: 0.9;
  height: 24px;
  margin-top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
}

/* 数字 */
.case-results-stats .item .value{
  font-size: 40px;          /* 小型化 */
  font-weight: 800;
  margin: 6px 0 2px;
  line-height: 1;
}

/* 下線 */
.case-results-stats .item .value::after{
  content: "";
  display: block;
  width: 80%;
  height: 2px;
  background: rgba(255,255,255,0.7);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* SP（～768px）：縦1列・センター */
@media (max-width: 768px){
  .case-results-stats{
    flex-direction: column;
    align-items: center;     /* 縦積みでもカードを中央に */
    max-width: 520px;        /* 余白を少し広めに */
  }
  .case-results-stats .item{
    width: min(420px, 92vw); /* 画面幅に合わせて広げる */
  }
}

/* タブレット〜PCで2枚をきれいに */
@media (min-width: 769px){
  .case-results-stats{
    max-width: 700px;        /* 2枚 + gap で中央に綺麗に収まる */
  }
}




/* =========================================================
  スペーサー
   ========================================================= */
.spacer-responsive {
  height: 48px;
}
@media screen and (max-width: 768px) {
  .spacer-responsive {
    height: 24px;
  }
}
/* Caseページだけ本文を16px基準にする */
.case-section{
  font-size: 15px;
}

/* 外部CSSがpに14pxを直接当てていても戻す */
.case-section p{
  font-size: 1em;
}

/* 長いURLなどの横はみ出し防止 */
.case-section a{
  overflow-wrap: anywhere;
  word-break: break-word;
}