@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){
  /*必要ならばここにコードを書く*/
}

/* 共通スタイル */
.recommended-posts2-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* アイテム間のスペース */
}

.recommended-post2-item {
    width: calc(25% - 10px); /* 横に3つ並べる */
    box-sizing: border-box;
    margin-bottom: 10px; /* 縦のスペース */
    border: 2px solid #ddd; /* 全体の枠線 */
    border-radius: 5px; /* 角を丸くする（オプション） */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影の追加 */
    overflow: hidden; /* 枠線や影の内側に画像を収める */
}

.recommended-post2-item img {
    width: 100%;
    height: auto;
    display: block; /* ブロック要素として表示（余白を防ぐ） */
}

.recommended-post2-item p {
    font-size: 12px;
    text-align: center;
    margin: 10px 0 0; /* タイトルの上部にマージンを追加 */
}

/* スマホ向けスタイル */
@media (max-width: 767px) {
    .recommended-post2-item {
        width: calc(50% - 10px); /* 横に2つ並べる */
    }
}

.related-posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* アイテム間のスペース */
}

.related-post-item {
    width: calc(25% - 10px); /* 横に3つ並べる */
    box-sizing: border-box;
    margin-bottom: 10px; /* 縦のスペース */
 border: 2px solid #ddd; /* 全体の枠線 */
    border-radius: 5px; /* 角を丸くする（オプション） */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影の追加 */
    overflow: hidden; /* 枠線や影の内側に画像を収める */
}

.related-post-item img {
    width: 100%;
    height: auto;
}

.related-post-item p {
    font-size: 12px;
    text-align: center;
}

/* スマホ用のスタイル */
@media (max-width: 768px) {
    .related-post-item {
        width: calc(50% - 10px); /* 横に2つ並べる */
    }
}