/* ======================================================================
   Kyoto Red Data Book Template - edit_sp.css
   Project: Kyoto Prefecture Red Data Book (Kyoto RDB)
   Purpose: テンプレート共通の本文エリアスタイル（スマホ版）
   Placement: /shared/templates/[テンプレートID]/style/edit_sp.css
   ====================================================================== */

@charset "utf-8";

/* ------------------------------
   Hero - Responsive
   ------------------------------ */
@media (max-width: 960px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  /* スマホ版ではヒーロー画像を全体的に大きく見せる */
  .rdb-hero__image {
    width: 90% !important;
    min-width: 90%;
    margin: 0 auto;
  }

  /* スマホ版では検索バーの幅を広げる */
  .rdb-search {
    width: 90% !important;
    max-width: 100% !important;
  }
}

/* ------------------------------
   Category Grid - Responsive
   ------------------------------ */
@media (max-width: 1024px) {
  .rdb-cats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .rdb-cats__grid {
    grid-template-columns: 1fr;
    /* スマホ版でカードが大きすぎるのを防ぐため、全体の幅を制限し中央に寄せる */
    width: 80%;
    max-width: 320px;
  }
}


/* ------------------------------
   Sub-category Grid - Responsive
   ------------------------------ */
@media (max-width: 768px) {
  #tmp_contents .subcat-grid {
    grid-template-columns: repeat(3, 1fr);
    /* タブレットでは3列 */
  }
}

@media (max-width: 560px) {
  #tmp_contents .subcat-grid {
    grid-template-columns: repeat(2, 1fr);
    /* スマートフォンでは2列 */
  }
}