@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 3.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/


/*
★★ となりカイゼン部：カスタムカード用CSS 完成版 ★★
*/

/* [最重要] 親テーマの画像絶対配置を解除してレイアウトを正常化 */
.catpost-item img {
  position: static !important; /* absoluteを解除して通常配置に戻す */
}

/* 新しいカードレイアウトの基本デザイン */
.catpost-item {
  background: #fff;
  border-radius: 8px; /* カードの角を丸く */
  overflow: hidden; /* 角丸からはみ出した画像を隠す */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 薄い影をつける */
  display: flex; /* Flexboxを有効化 */
  flex-direction: column; /* 要素を縦に並べる */
  height: 100%; /* 高さを揃える */
}

/* 画像部分の調整 */
.catpost-item__figure {
  margin: 0;
  padding: 0;
  line-height: 0; /* 画像下の余白を消す */
}
.catpost-item__figure img {
  width: 100%;
  height: auto;
}

/* テキスト部分全体の調整 */
.catpost-item__body {
  padding: 16px 20px; /* 内側の余白 */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 高さを可変にする */
}

/* カテゴリータグ */
.new-card-category {
  display: inline-block;
  background: #007bff;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 8px;
  order: 1; /* 表示順を一番上に */
  align-self: flex-start; /* 左寄せ */
}
/* カテゴリーの色分け（必要に応じて） */
.cat-id-1 { background: #007bff; } /* カテゴリーIDが1の場合の色 */
.cat-id-2 { background: #28a745; } /* カテゴリーIDが2の場合の色 */


/* タイトル */
.catpost-item__title {
  font-size: 18px;
  line-height: 1.5;
  margin: 8px 0;
  font-weight: bold;
  order: 2;
}

/* 評価表示エリア */
.custom-rating-area {
  font-size: 13px;
  line-height: 1.6;
  color: #555;
  margin: 8px 0;
  order: 3; /* 表示順を日付の前に */
}

/* 日付 */
.catpost-item__meta {
  margin-top: auto; /* 日付を一番下に固定 */
  padding-top: 10px;
  font-size: 12px;
  color: #888;
  order: 4;
}