/* ==========================================================================
   Layout
   ページセクションの配置とグローバルなレイアウトを管理するスタイル。
   ========================================================================== */

body.landing_page {
  display: grid;
  grid-template: 
    "hero"     minmax(calc(var(--hero-min-height, 600px) + 4.5rem), calc(100svh + 4.5rem))
    "campaign" auto
    "creation" auto
    "courses"  auto
    "faq"      auto
    "books"    auto
    "footer"   auto
    / 1fr;

  #hero {
    grid-area: hero;
    inline-size: 100% !important;
  }

  #campaign {
    grid-area: campaign;
    margin-block-start: 4rem;
    inline-size: 100% !important;
  }

  #creation {
    grid-area: creation;
    inline-size: 100% !important;
    background-color: #fff9c7;
  }

  #courses {
    grid-area: courses;
    inline-size: 100% !important;
    background-color: var(--light);
  }

  #faq {
    grid-area: faq;
    inline-size: 100% !important;
    background-color: #fff7ea;
  }

  #books {
    grid-area: books;
    inline-size: 100% !important;
    background-color: #f3f6ff;
  }

  #footer {
    grid-area: footer;
    inline-size: 100% !important;
  }

  /* セクション */
  section {
    padding-block: 3rem;
  }
}