@charset "utf-8";
/* ==========================================================================
   補助金サポート 4つの支援ページ 共通スタイル
     subsidy-bansou.html   （伴走支援）
     subsidy-shinsei.html  （申請支援）
     subsidy-brushup.html  （ブラッシュアップ支援）
     subsidy-partner.html  （パートナー支援）

   🔴 読み込み順：style.css（サイト共通）→ subsidy.css（下層ページ共通）→ service.css（このファイル）
      style.css と subsidy.css は変更していません。4ページとも同じ部品を使うので、
      レイアウトの基本形は完全に統一されています。

   ・subsidy.css から使い回しているもの：
       .back-home（← TOPに戻る）／.page-hero（ファーストビュー）／.prose（長文）
       .key-msg（キーメッセージ）／.role-grid .role（会社と事務所の役割）
   ・style.css から使い回しているもの：
       ヘッダー／フッター／ハンバーガー／.section-title／.btn／.contact／.reveal

   構成:
     01. ページごとのアクセント色（1か所で切り替え）
     02. サービス名バッジ
     03. セクションの余白（4ページとも短めに）
     04. チェックリスト
     05. 「こんな方におすすめです」カード
     06. 注記
   ========================================================================== */

/* ---------- 01. ページごとのアクセント色 ----------
   <main class="svc">        … オレンジ（伴走支援・ブラッシュアップ支援）
   <main class="svc svc--sky"> … 水色  （申請支援・パートナー支援）
   TOPページ／補助金サポート全体ページのカードのアイコン色と揃えています。
   レイアウトは4ページとも同じで、変わるのは色だけです。
   ------------------------------------------------------------------------ */
.svc{
  --accent:var(--orange);
  --accent-text:var(--orange-text);
  --accent-soft:var(--orange-light);
  --accent-tint:var(--orange-tint);
}
.svc--sky{
  --accent:var(--sky-deep);
  --accent-text:var(--sky-text);
  --accent-soft:var(--sky);
  --accent-tint:var(--sky-tint);
}

/* subsidy.css のキーメッセージを、そのページのアクセント色に合わせる */
.svc .key-msg{
  border-left-color:var(--accent);
  color:var(--accent-text);
}

/* ---------- 02. サービス名バッジ ----------
   ファーストビューでサービス名が最初に目に入るようにする
   ------------------------------------------------------------------------ */
.svc-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px 9px 16px;
  border-radius:999px;
  background:var(--white);
  border:1.5px solid var(--accent-soft);
  color:var(--accent-text);
  font-size:clamp(13px,3vw,15px);
  font-weight:800;letter-spacing:.03em;line-height:1.4;
  box-shadow:var(--shadow-sm);
  margin-bottom:clamp(16px,2.6vw,24px);
}
.svc-badge__icon{width:18px;height:18px;flex:0 0 auto;}

/* ---------- 03. セクションの余白 ----------
   1ページを短く保つため、TOP・全体ページより少し詰める
   ------------------------------------------------------------------------ */
.section--compact{padding:clamp(46px,6.8vw,86px) 0;}

/* ---------- 04. チェックリスト（・で並んでいた項目） ---------- */
.check-list{
  max-width:720px;margin:clamp(18px,2.6vw,26px) auto;
  display:grid;gap:8px;
}
.check-list li{
  position:relative;
  padding:12px 18px 12px 44px;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:12px;
  font-size:clamp(14.5px,3.1vw,16px);
  font-weight:600;line-height:1.7;color:var(--text);
}
/* CSSだけで描くチェックマーク（画像は使いません） */
.check-list li::before{
  content:"";position:absolute;left:19px;top:50%;
  width:6px;height:11px;margin-top:-8px;
  border:solid var(--accent);
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}

/* ---------- 05. 「こんな方におすすめです」カード ---------- */
.reco{
  max-width:720px;margin-inline:auto;
  background:var(--white);
  border:1px solid var(--line);
  border-top:5px solid var(--accent-soft);
  border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,34px) clamp(20px,3vw,32px);
  box-shadow:var(--shadow-sm);
}
.reco .check-list{margin:0;gap:0;}
.reco .check-list li{
  background:transparent;border:none;border-radius:0;
  padding:13px 0 13px 32px;
  border-bottom:1px dotted var(--line);
}
.reco .check-list li:last-child{border-bottom:none;padding-bottom:0;}
.reco .check-list li:first-child{padding-top:0;}
.reco .check-list li::before{left:6px;}

/* ---------- 06. 注記 ---------- */
.note{
  max-width:720px;margin:clamp(16px,2.4vw,22px) auto 0;
  font-size:clamp(12px,2.6vw,13px);
  line-height:1.85;color:var(--text-sub);
}

/* ---------- 極小幅（〜359px）だけの微調整 ----------
   375px以上の表示には影響しません。この4ページだけに効きます
   （subsidy.html は service.css を読み込んでいないため無関係）
   ------------------------------------------------------------------------ */
@media (max-width:359px){
  .check-list li{padding:11px 14px 11px 38px;}
  .check-list li::before{left:16px;}
  /* メインメッセージを2行に収める */
  .svc .page-hero__title{font-size:23px;}
  .svc-badge{font-size:12.5px;padding:8px 16px 8px 13px;}
}