@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Template: cocoon-master
Version: 1.1.3
*/


/*******************************************************
* レスポンシブデザイン対応
********************************************************/
@media (max-width: 768px) {
    .post-grid .listing-item {
        width: calc(50% - 20px); /* タブレットでは2列 */
    }
}

@media (max-width: 480px) {
    .post-grid .listing-item {
        width: 100%; /* スマートフォンでは1列 */
    }
}
/* =================================================
   基本設定
================================================= */

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

/* =================================================
   共通レイアウト
================================================= */

.posts-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.section {
    margin-bottom: 20px;
}

.section h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #333;
}

/* =================================================
   投稿スライダー
================================================= */

.posts-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
}

.posts-slider::-webkit-scrollbar {
    display: none;
}

/* =================================================
   Cocoon標準 entry-card（触らない）
================================================= */

/* ※ entry-card は Cocoon に任せる */

/* =================================================
   ✅ 検索・カテゴリ専用修正（重要）
================================================= */

.search-grid-layout .main .entries,
.category-grid-layout .main .entries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* カードの高さ崩れ防止 */
.search-grid-layout .entry-card,
.category-grid-layout .entry-card {
    height: auto !important;
    align-items: flex-start;
}

/* テキスト領域の引き伸ばし解除 */
.search-grid-layout .entry-card-content,
.category-grid-layout .entry-card-content {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 0;
}

.search-grid-layout .entry-card-content::after,
.category-grid-layout .entry-card-content::after {
    display: none;
}

/* =================================================
   独自カード（post-card 等）
================================================= */

.post-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 340px;
    height: 400px;
    display: flex;
    flex-direction: column;
}

.post-thumbnail {
    height: 250px;
}

.post-thumbnail img {
    object-fit: cover;
}

/* =================================================
   カテゴリページ独自カード
================================================= */

.category-post-card {
    background: #fff;
    border-radius: 15px;
    height: 280px;
}

/* =================================================
   検索ページ独自カード
================================================= */

.search-post-card {
    background: #fff;
    border-radius: 15px;
    height: 290px;
}

/* =================================================
   レスポンシブ
================================================= */

@media (max-width: 834px) {
    .search-grid-layout .main .entries,
    .category-grid-layout .main .entries {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .search-grid-layout .main .entries,
    .category-grid-layout .main .entries {
        grid-template-columns: 1fr;
    }
}

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*フッター画像の修正*/
.footer-bottom-logo .logo-image {
	max-width: 100%;
}

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

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

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

/************************************
** 画像の枠線設定
************************************/
/* 太 */
img.border-b {
border: solid 5px #cccccc; /* スタイル,太さ,色 */
}
/* 細 */
img.border-l {
border: solid 2px #cccccc; /* スタイル,太さ,色 */
}

/*******************************************************
* 新人ブログマラソンインデックスページの記事グリッド表示
********************************************************/
.post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 各要素間の間隔 */
}

.post-grid .listing-item {
    width: calc(33.333% - 20px); /* 3列にする */
    box-sizing: border-box;
}

.post-grid .image {
    width: 100%;
    height: 150px; /* 統一された高さ */
    overflow: hidden; /* はみ出しを防ぐ */
    display: flex;
    align-items: center;
    justify-content: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 影を追加 */
    border-radius: 4px; /* 角を少し丸める */
}

.post-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* アスペクト比を維持しつつ枠いっぱいに表示 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 影を追加 */
    border-radius: 4px; /* 角を少し丸める */
}


/*******************************************************
* レスポンシブデザイン対応
********************************************************/
@media (max-width: 768px) {
    .post-grid .listing-item {
        width: calc(50% - 20px); /* タブレットでは2列 */
    }
}

@media (max-width: 480px) {
    .post-grid .listing-item {
        width: 100%; /* スマートフォンでは1列 */
    }
}