/* =========================================================
   bg.css — 背景イラスト差し替え用オーバーライド
   style.css の後に読み込む。既存レイアウトはそのまま、
   ヒーローと未来セクションの背景だけイラストに差し替え。
   ========================================================= */

/* ---- Hero：生成した明るい空イラストを背景に ---- */
.hero{
  background:
    linear-gradient(180deg, rgba(255,253,245,0) 68%, rgba(255,253,245,.35) 100%),
    url("../assets/generated/hero_bg.jpg") center bottom / cover no-repeat;
}
/* CSSで描いていた太陽・浮遊する雲はイラストと重なるので非表示 */
.hero .hero-sun,
.hero .cloud{ display:none; }

/* コピーの可読性を少しだけ補強（明るい空の上でもくっきり） */
.hero-lead{ text-shadow:0 1px 6px rgba(255,255,255,.8); }

/* ---- 未来セクション：生成した未来都市イラストを背景に ---- */
.future{
  background:
    linear-gradient(180deg, rgba(238,247,255,.92) 0%, rgba(238,247,255,.45) 16%, rgba(238,247,255,0) 34%),
    url("../assets/generated/future_city.jpg") center bottom / cover no-repeat;
}
/* CSSで描いていたビルのシルエットは不要 */
.future .future-city{ display:none; }
/* 見出しの可読性補強 */
.future h2{ text-shadow:0 2px 10px rgba(255,255,255,.9); }
.future p{ text-shadow:0 1px 6px rgba(255,255,255,.85); }

@media (max-width:720px){
  .hero{
    background:
      linear-gradient(180deg, rgba(255,253,245,0) 58%, rgba(255,253,245,.62) 100%),
      url("../assets/generated/hero_bg.jpg") center bottom / cover no-repeat;
  }
  .future{
    background:
      linear-gradient(180deg, rgba(238,247,255,.96) 0%, rgba(238,247,255,.66) 22%, rgba(238,247,255,.08) 48%),
      url("../assets/generated/future_city.jpg") center bottom / cover no-repeat;
  }
}