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

body.site_inner {
  display: grid;
  grid-template: 
    "billboard"         300px
    "course-intro"      auto
    "course-overview"   auto
    "course-texts"      auto
    "course-faq"        auto
    "related-courses"   auto
    "recommended-books" auto
    "footer"            auto
    / 1fr;

  #billboard {
    grid-area: billboard;
    inline-size: 100% !important;
    padding-block-start: 0 !important;
  }

  #course-intro {
    grid-area: course-intro;
    margin-block-start: 4.1rem;
    inline-size: 100% !important;
  }

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

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

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

  #related-courses {
    grid-area: related-courses;
    inline-size: 100% !important;
    background-color: #edf3ff;
  }

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

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

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

.section-bg-cream {
  background-color: #fff7ea;
}

.section-bg-honey {
  background-color: #fff3d6;
}

.section-bg-mist {
  background-color: #e3f9d7;
}
.section-bg-mint {
  background-color: #eef9f4;
}

.section-bg-lilac {
  background-color: #fce2f1;
}

.ui.cards.value-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-inline: 0;
}

.ui.cards.value-cards > .card {
  width: 100% !important;
  margin: 0 !important;
}

.useful-category {
  scroll-margin-top: 6rem;
}

@media (max-width: 767px) {
  .ui.cards.value-cards {
    grid-template-columns: 1fr;
  }
}