/* =====================================================================
   /work-support 固有スタイル
   出典: Figma consulting 530:4577 / 現行サイト実測
   共通: page-header, section-label, feature-*, recruit-cta は他CSSに定義
   ===================================================================== */

/* ---- リード: .lead* は components.css に共通化。consulting は既定値（イラスト432px）のまま ---- */

/* ---- お困りごと ---- */
.troubles { padding-block: 80px 100px; background: var(--c-bg); }
.center-heading {
  margin: 0 0 48px;
  text-align: center;
  font-size: var(--fs-subhead);   /* 28px */
  font-weight: var(--fw-semibold);
  color: var(--c-text-strong);
}
.center-heading .accent { color: var(--c-primary); }

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.case-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--c-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.case-no {
  align-self: center;
  margin-bottom: 16px;
  padding: 4px 24px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--radius-pill);
  font-family: "Inter", sans-serif;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}
.case-img { border-radius: 12px; overflow: hidden; }
.case-img img { width: 100%; height: auto; display: block; }
.case-title {
  margin: 20px 0 16px;
  font-size: 1.1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  color: var(--c-text-strong);
}
.case-points { display: flex; flex-direction: column; gap: 8px; }
/* 現行サイトは各項目の頭に「・」が付く。ul の list-style を全体で none にしているため擬似要素で復元 */
.case-points li {
  display: flex;
  gap: 2px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text-strong);
}
.case-points li::before { content: "・"; flex: 0 0 auto; }

/* サポート帯（青グラデ + ロゴ）
   現行サイト実測: 1080×90 / linear-gradient(93.05deg, #B0D5FF 0%, #485BBF 100%) / padding 22px 40px
   ※水色→青の明るいグラデ。濃紺への3色グラデではない */
.support-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 56px;
  padding: 24px 40px;
  background: linear-gradient(93.05deg, #B0D5FF 0%, var(--c-primary) 100%);
  border-radius: var(--radius-pill);
  color: var(--c-on-primary);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-semibold);
}
/* 画像を作り直してはいない。使っているのは既存の logo-white.png のまま。
   直したのは大きさ。**箱は中央で揃っていたが、字面の大きさが違っていた。**
   ロゴは全体高さの70%しか字面がなく（残りは 'y' の下と余白）、幅150pxでは
   字面が 16.7px。隣の和文は 24px あるため、ロゴだけ小さく浮いて見えていた。
   幅200pxで字面 22.3px となり、和文の 93% でほぼ揃う。
   字面の中心は箱の中心より 0.5px 上にあるので、その分だけ下げる。 */
.support-banner-logo {
  display: block;
  width: 200px;
  height: auto;
  transform: translateY(0.5px);
}

/* 本当に狭いときだけ縦積み。ロゴ150px＋和文8文字は 500px を切ると窮屈になる */
@media (max-width: 499px) {
  .support-banner { flex-direction: column; gap: 8px; padding: 20px; }
}

/* ---- FEATURE: .feature-section* は components.css に共通化 ---- */

/* ---- 支援サービス例: カードは components.css の「3カラムのカードグリッド」を使う ---- */
/* 上余白は .deco-section が持つ（components.css）。ここは下だけ */
.svc-examples { padding-bottom: 100px; }

/* ---- 応募者採用に注力できる仕組み
       カード本体は components.css の「帯見出し付きカード」を使う。ここは差分のみ ---- */
.sikumi { padding-block: 0 100px; }
/* ⚠️ 共通部品の値を上書きする差分は min-width で囲む。
   メディアクエリ外に置くと、このファイルが components.css より後に読まれるぶん
   SP用の共通指定（max-width 839px）にも勝ってしまい、縦積みのレイアウトが壊れる。 */
@media (min-width: 840px) {
  /* 現行サイト実測: 見出しと画像は上端揃え（中央揃えだと画像が見出しより上にはみ出し、
     画像の下に余分な隙間ができる）。項目間は40px。 */
  .sikumi-item { align-items: flex-start; }
  .sikumi-item + .sikumi-item { margin-top: 40px; }
}

/* =====================================================================
   レスポンシブ
   ===================================================================== */
/* SPの縦余白は現行サイト実測の 50px 基調に合わせる */
@media (max-width: 839px) {
  .troubles { padding-block: 50px; }
  .center-heading { margin-bottom: 28px; }
  .case-grid { grid-template-columns: 1fr; gap: 16px; }
  .case-card { padding: 20px; }
  .case-title { margin: 16px 0 12px; }
  /* 縦積みにはしない。ロゴ150px＋テキストは 500px 程度まで横並びで収まるのに、
     839px で積んでいたためタブレットや小さめのPC画面でロゴが上に乗り、
     「上揃いになっている」ように見えていた（2026-08-17 指摘）。 */
  .support-banner { gap: 10px; margin-top: 32px; padding: 20px 24px; font-size: 1.25rem; text-align: center; }

  .svc-examples { padding-bottom: 50px; }
  .svc-card-title { margin-top: 16px; margin-bottom: 10px; }

  .sikumi { padding-block: 0 50px; }
  .sikumi-title { margin-bottom: 14px; }
}