@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
*/

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


/* ===== Category Grid – Polished ===== */
.cg-cat{
  display:grid; gap:18px;
  grid-template-columns:repeat(var(--cg-cols,4), minmax(0,1fr));
}
.cg-cat__card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid #e5e7eb; border-radius:4px !important; overflow:hidden;
  background:#fff; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cg-cat__card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  border-color:#dfe3ea;
}
.cg-cat__thumb{ aspect-ratio:3/2 !important; background:#f5f7fb; }
.cg-cat__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.cg-cat__card:hover .cg-cat__thumb img{ transform:scale(1.03); }

.cg-cat__meta{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
}
.cg-cat__name{
  font-weight:700; line-height:1.25; color:#0f172a; /* slate-900 */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cg-cat__count{
  font-size:12px; color:#0b4fc2; background:#eaf2ff;
  padding:3px 8px; border-radius:999px; font-weight:700;
}

/* プレースホルダ（画像なしの箱も整える） */
.cg-cat__placeholder{
  width:100%; height:100%;
  background:linear-gradient(135deg,#f3f4f6,#eceff4);
}

/* レスポンシブ */
@media (max-width: 1024px){ .cg-cat{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 782px){ .cg-cat{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (max-width: 420px){ .cg-cat{ grid-template-columns:1fr; } }


.home-feature .entry-card-thumb { aspect-ratio: 3/2; }

/* 共通：セクション見出しと余白 */
.home-feature .section-title,
.home-popular .section-title{
  font-size:1.25rem; font-weight:700;
  border-left:4px solid #000; padding-left:.6em;
  margin:34px 0 14px;
}

.home-feature .section-title {
  font-size: 1.3rem;
  font-weight: 700;
  border-left: 4px solid #000;
  padding-left: 0.6em;
  margin: 38px 0 16px;
  letter-spacing: 0.02em;
}

.home-feature .section-lead,
.home-popular .section-lead{
  color:#666; margin-bottom:12px;
}

/* --- 新着 & 特集（縦カード想定） -------------------- */
.home-feature .entry-card,
.home-feature .related-entry-card,
.home-feature .widget-entry-card{
  /* カードの高さを揃える */
  display:flex; flex-direction:column; height:100%;
  border:1px solid #e7e9ee; border-radius:10px; overflow:hidden;
}
.home-feature .entry-card-thumb{
  aspect-ratio: 3/2; background:#f5f7fa;
}
.home-feature .entry-card-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:center 20%;
}
.home-feature .entry-card-content{
  padding:10px 12px; display:flex; flex-direction:column; gap:6px;
}
.home-feature .entry-card-title{
  font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.home-feature .entry-card-snippet{  /* 抜粋は1行だけに */
  font-size:.9rem; color:#555;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.home-feature .post-meta{
  margin-top:auto; font-size:.85rem; color:#6b7280;
}

/* PC時：新着横4カラムっぽく詰める（Cocoonの列数に依存せず効く） */
@media (min-width: 1025px){
  .home-feature .entry-cards .entry-card-wrap{ width: calc(25% - 12px); margin-right:16px; }
  .home-feature .entry-cards .entry-card-wrap:nth-child(4n){ margin-right:0; }
}

/* --- 人気（ランキング感を強化） -------------------- */
.home-popular .ranking-item, /* Cocoonの人気カード */
.home-popular .entry-card{
  position:relative; border:1px solid #e7e9ee; border-radius:10px; overflow:hidden;
}
.home-popular .entry-card-thumb{ aspect-ratio: 16/9; background:#f5f7fa; }
.home-popular .entry-card-thumb img{ width:100%; height:100%; object-fit:cover; }

.home-popular .entry-card-title{
  font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.home-popular {
  background: #fafafa;
  padding: 24px 16px;
  border-radius: 12px;
}


/* 人気の順位バッジ（1～3だけ色濃く） */
.home-popular .rank-number,
.home-popular .ranking-number{
  position:absolute; top:8px; left:8px;
  padding:2px 8px; font-size:12px; font-weight:800;
  background:rgba(0,0,0,.6); color:#fff; border-radius:999px;
}
.home-popular .entry-card-wrap:nth-child(1) .rank-number{ background:#d97706; } /* gold */
.home-popular .entry-card-wrap:nth-child(2) .rank-number{ background:#6b7280; } /* silver */
.home-popular .entry-card-wrap:nth-child(3) .rank-number{ background:#b45309; } /* bronze */

/* モバイル最適化 */
@media (max-width: 834px){
  .home-feature .entry-card-title,
  .home-popular .entry-card-title{ font-size:15px; }
  .home-feature .entry-card-snippet{ display:none; } /* 小さい画面では抜粋を消して視認性UP */
}




/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .cg-cat{
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

/*834px以下*/
@media screen and (max-width: 834px){
  .cg-cat{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
  .cg-cat__meta{
    padding:10px 12px;
  }
  .cg-cat__name{
    font-size:15px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .cg-cat{
    grid-template-columns:1fr;
    gap:14px;
  }
  .cg-cat__meta{
    padding:8px 10px;
  }
  .cg-cat__name{
    font-size:14px;
  }
}