/* 補助金.com ヒーロー — 静的スプリットレイアウト
   資格コンパスと同系のデザイン言語：グラデ・glassmorphism・重いshadow を廃し、
   白カード＋フラットボタン＋SVGアイコンで信頼感を表現する。
   ---------------------------------------------------------------- */

/* ================================================================
   Hero コンテナ
   ================================================================ */
.hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 44px 36px 40px;
  margin: 0 0 28px;
  position: relative;
  overflow: hidden;
}

/* 背景画像（地域・風景）。テキスト/データカードの可読性を保つため白系オーバーレイで薄く敷く */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(105deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 42%, rgba(255,255,255,.72) 78%, rgba(255,255,255,.62) 100%),
    url('img/hero/1513407030348-c983a97b98d8.jpg');
  background-size: cover, cover;
  background-position: center, center;
  z-index: 0;
  pointer-events: none;
}

/* スプリット: 左テキスト ＋ 右データカード */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ================================================================
   左カラム：テキスト
   ================================================================ */

/* アイキャッチ eyebrow */
.hero-eyebrow {
  display: block;
  font-size: .7rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

/* H1 は app.css のスタイルを活かしつつ em カラーのみ追加 */
.hero h1 em {
  color: var(--brand);
  font-style: normal;
}

/* リード文 */
.hero-lead {
  font-size: .97rem;
  color: #3a4862;
  line-height: 1.9;
  margin: 10px 0 20px;
  max-width: 52ch;
}
.hero-lead strong { color: var(--brand-ink); }

/* ================================================================
   USP リスト（フラット・SVGアイコン）
   ================================================================ */
.hero-usp {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-usp li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .88rem;
  color: var(--ink);
  line-height: 1.5;
}

.husp-ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--brand);
  stroke: var(--brand);
  display: block;
}

.hero-usp strong {
  color: var(--brand-ink);
  font-weight: 800;
}

/* ================================================================
   CTA ボタン（フラット・グラデなし）
   ================================================================ */

/* app.css の .hcta / .hcta.primary をそのまま使用。
   旧 hj_hero.css のグラデ・heavy shadow override は廃止。 */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ================================================================
   右カラム：データカード
   ================================================================ */
.hero-vis {
  position: relative;
}

.hero-data-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 20px 20px;
}

/* eyebrow */
.hdc-eyebrow {
  font-size: .68rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* JS が .st.num/.lbl で動的生成するグリッド */
.hdc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.hdc-stats .st {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 12px;
  text-align: center;
}

.hdc-stats .num {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.hdc-stats .lbl {
  display: block;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: .01em;
  line-height: 1.4;
}

/* 出典注記 */
.hdc-source {
  font-size: .68rem;
  color: var(--faint);
  margin: 0;
  line-height: 1.5;
}

/* ================================================================
   レスポンシブ
   ================================================================ */

/* タブレット幅では右カラムを縮める */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr 280px;
    gap: 32px;
  }
}

/* スマホ: 縦積み・右カラム非表示 */
@media (max-width: 680px) {
  .hero {
    padding: 28px 20px 24px;
    border-radius: var(--r-md);
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero-vis {
    display: none;
  }
  .hero-usp li {
    font-size: .84rem;
  }
}

/* 印刷 */
@media print {
  .hero-vis { display: none !important; }
  .hero-cta { display: none !important; }
}