/* =====================================================
   SUICH | cases.css
   【用途】解決事例ページ（cases.html）専用スタイル
   　・解決事例カード（相談内容・調査・結果の3ステップ）
   　・お客様の声ブロック
   　・担当者メッセージ
===================================================== */

/* メインセクション */
.cases-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 96px;
}

/* セクション紹介 */
.section-intro { margin-bottom: 64px; }
.section-num {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  letter-spacing: 0.32em;
  color: var(--green-vivid);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.section-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700; color: var(--green-dark);
  line-height: 1.5; margin-bottom: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.lead-text { font-size: 16px; color: var(--grey-mid); line-height: 2; }

/* =====================================================
   事例カードリスト
===================================================== */
.case-list { display: flex; flex-direction: column; gap: 48px; }

.case-card {
  border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  transition: box-shadow .2s;
}
.case-card:hover { box-shadow: 0 8px 48px rgba(45,90,61,0.12); }

/* カードヘッダー：事例番号・種別・結果タグ */
.case-card-header {
  background: var(--green-dark);
  padding: 20px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.case-badge-wrap { display: flex; align-items: center; gap: 16px; }
.case-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px; font-weight: 600;
  color: var(--green-vivid); line-height: 1;
}
.case-type-tag {
  font-size: 12px; letter-spacing: 0.18em; color: var(--on-dark-high);
  border: 1px solid #FFF;
  padding: 5px 12px; border-radius: 2px; font-weight: 500; text-transform: uppercase;
}
.case-result-tag {
  font-size: 12px; letter-spacing: 0.1em;
  color: #fff; background: var(--green-accent);
  padding: 6px 14px; border-radius: 2px; font-weight: 600;
}

.ph-case{
  height: 250px;
}

.ph-case img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カード本体：3カラム（相談内容・調査・結果） */
.case-card-body {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: #fff;
}
.case-step { padding: 32px; border-right: 1px solid var(--border); }
.case-step:last-child { border-right: none; }
.case-step-label {
  font-size: 14px; letter-spacing: 0.22em; color: var(--green-accent);
  font-weight: 600; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.case-step-label::before { content: ''; width: 16px; height: 1px; background: var(--green-accent); }
.case-step-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px; font-weight: 700; color: var(--green-dark);
  line-height: 1.55; margin-bottom: 10px;
}
.case-step-body { font-size:16px; color: var(--grey-mid); line-height: 1.9; }

/* お客様の声 */
.case-voice {
  background: var(--green-pale);
  border-top: 1px solid var(--green-muted);
  padding: 22px 32px;
  display: flex; align-items: flex-start; gap: 16px;
}
.voice-icon { width: 28px; height: 28px; background: url("../img/icon_voice_g.png") no-repeat center / contain; }
.voice-text { font-size:16px; color: var(--grey-mid); line-height: 1.9; font-style: italic; }
.voice-text strong {
  display: block; font-style: normal;
  font-size: 16px; color: var(--green-mid);
  font-weight: 600; letter-spacing: 0.1em; margin-bottom: 6px;
}

/* 担当者メッセージ */
.case-message {
  background: var(--green-dark);
  padding: 20px 32px;
  display: flex; align-items: flex-start; gap: 16px;
}
.case-message p { font-size:16px; color: var(--on-dark-low); line-height: 1.9; }
.case-message p strong {
  display: block; color: var(--green-muted);
  font-size: 14px; letter-spacing: 0.15em; margin-bottom: 6px;
}

/* カード内CTA */
.case-cta {
  padding: 20px 32px; background: #fff;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.case-cta p { font-size:16px; color: var(--grey-mid); }
.btn-sm {
  background: var(--green-accent); color: #fff;
  padding: 11px 24px; font-size:16px; font-weight: 600;
  letter-spacing: 0.08em; text-decoration: none;
  border-radius: 2px; transition: background .2s;
}
.btn-sm:hover { background: var(--green-light); }

/* ヒーローフィルタータグ */
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hero-tag {
  border: 1px solid var(--on-dark-faint); color: var(--on-dark-low);
  padding: 7px 16px; border-radius: 2px; font-size:16px; letter-spacing: 0.08em;
}

/* レスポンシブ対応 */
@media (max-width: 900px) {
  .cases-section { padding: 64px 24px; }
  .case-card-body { grid-template-columns: 1fr; }
  .case-step { border-right: none; border-bottom: 1px solid var(--border); }
  .case-step:last-child { border-bottom: none; }
}

/* section headings (synced from guide.css) */

.section-num em {
  font-style: normal;
  font-size: 50px;
  font-weight: 500;
}

.section-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(24px, 3.7vw, 36px);
  font-weight: 700;
  color: var(--green-dark);
  line-height: 1.5;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Mobile layout */
@media (max-width: 900px) {
  .cases-section {
    padding: 14vw 5vw;
  }
  .case-card-head,
  .case-cta {
    display: grid;
    gap: 2vw;
    align-items: start;
  }
  .case-card-body {
    grid-template-columns: 1fr;
  }
  .case-step {
    padding: 5vw 4vw;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .case-step:last-child {
    border-bottom: none;
  }
  .case-voice,
  .case-message,
  .case-cta {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .case-cta-btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .cases-section {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}