@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}










.all-category-wrap {
  width: 100%;
  margin: 0 auto;
}

.all-category-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.all-category-col {
  flex: 1 1 0;
  text-align: center;
}

.all-category-name-link {
  font-weight: bold;
  text-decoration: none;
}

.all-category-thumb-link {
  display: block;
}

.all-category-thumb {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.all-category-thumb--noimage {
  background: #f5f5f5;
  padding-top: 56.25%; /* 16:9枠だけ表示したい場合 */
}

/* スマホ時に2列 or 1列にしたいときの例 */
@media (max-width: 767px) {
  .all-category-row {
    flex-wrap: wrap;
  }
  .all-category-col {
    flex: 0 0 50%; /* 2列表示の例。1列にしたければ100%に変更 */
  }
}

.custom-search-grid {
  margin-top: 1rem;
}

.custom-search-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.custom-search-col {
  flex: 1 1 0;
  text-align: center;
}

.custom-search-thumb {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.custom-search-thumb--noimage {
  width: 100%;
  padding-top: 56.25%;
  background: #f5f5f5;
}

.custom-search-item-title {
  display: inline-block;
  margin-top: 0.25rem;
}

/* スマホで列数を変えたいとき */
@media (max-width: 767px) {
  .custom-search-row {
    flex-wrap: wrap;
  }
  .custom-search-col {
    flex: 0 0 50%; /* 必要に応じて 50% などに変更 */
  }
}

/* PC (768px以上) では 3カラム＝33%ずつ */
@media (min-width: 768px) {
  .custom-search-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .custom-search-col {
    flex: 0 0 calc(33.333% - 1rem); /* ほぼ33%固定 */
    box-sizing: border-box;
  }
}

/* SP 側はお好みで（例：1カラム） */
@media (max-width: 767px) {
  .custom-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .custom-search-col {
    flex: 0 0 100%;
  }
}