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



/************************************
基本色指定
************************************/
:root {
    --main-pink: #e57d7d;
    --light-pink: #fdf2f2;
    --hover-pink: #ed9a9a;
}






/* ==================================================
検索ボタン削除
================================================== */

/* ロゴやメニューボタンは残し、検索ボタンだけを消す */
.mobile-header-menu-buttons .search-menu-button,
.header-container-in .search-menu-button {
    display: none !important;
}

/* 右側の余白（検索ボタンが入っていた場所）を詰める */
.header-column.header-column-3 {
    width: 0 !important;
    flex-basis: 0 !important;
}





/************************************
* インデックス多段表示（1列〜最大6列）
************************************/
/* 1. カード全体の枠組み */
.entry-card {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  position: relative !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* 2. 画像エリアの高さ調整（PC・タブレット用） */
/* 6列に合わせて少し高さを調整し、見栄えを良くしました */
.entry-card-thumb {
  width: 100% !important;
  height: 180px !important; 
  overflow: hidden !important;
  margin: 0 !important;
}

/* 3. 画像の表示方法 */
.entry-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 4. スマートフォンでの表示調整 */
@media screen and (max-width: 480px) {
  .entry-card-thumb {
    height: 140px !important; /* スマホで見やすい高さに調整 */
  }
}

/* 5. テキスト部分の調整 */
.entry-card-content {
  padding: 12px !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/************************************
* 画面幅に応じて列数を調整
************************************/
/* 基本設定：すべてのサイズでグリッド表示を適用 */
#main .list, 
#main .tiles, 
#main .vertical-card, 
#main .list.big-card {
    display: grid !important;
    gap: 10px !important; /* 隙間を一律10pxに固定 */
    width: 100% !important;
    max-width: none !important;
}

/* 1. 【超ワイド】 1400px以上：6列 */
@media screen and (min-width: 1400px) {
    #main .list, #main .tiles, #main .vertical-card, #main .list.big-card {
        grid-template-columns: repeat(6, 1fr) !important;
    }
}

/* 2. 【標準PC】 1100px 〜 1399px：5列 */
@media screen and (min-width: 1100px) and (max-width: 1399px) {
    #main .list, #main .tiles, #main .vertical-card, #main .list.big-card {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* 3. 【小さめPC・タブレット横】 900px 〜 1099px：4列 */
@media screen and (min-width: 900px) and (max-width: 1099px) {
    #main .list, #main .tiles, #main .vertical-card, #main .list.big-card {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* 4. 【タブレット縦】 600px 〜 899px：3列 */
@media screen and (min-width: 600px) and (max-width: 899px) {
    #main .list, #main .tiles, #main .vertical-card, #main .list.big-card {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 5. 【スマホ】 360px 〜 599px以下：2列 */
@media screen and (min-width: 360px) and (max-width: 599px) {
    #main .list, #main .tiles, #main .vertical-card, #main .list.big-card {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 6. 【スマホ】 359px以下：1列 */
@media screen and (max-width: 359px) {
    #main .list, #main .tiles, #main .vertical-card, #main .list.big-card {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}





/************************************
* カード内テキストの微調整
************************************/
/* タイトル：読みやすさを維持 */
.entry-card-title {
  font-size: 14px !important;
  font-weight: bold !important;
  margin-bottom: 5px !important;
  line-height: 1.4 !important;
  color: #333 !important;
}

/* 抜粋文：2行でカットしてスッキリ */
.entry-card-snippet {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px !important;
  color: #666 !important;
  margin-bottom: 8px !important;
}

/* 投稿日：右下に小さく配置 */
.post-date, .entry-card-date {
  font-size: 10px !important;
  color: #999 !important;
  text-align: right !important;
  margin-top: auto !important;
}

/* 不要な情報を表示しない */
.post-stats, .post-update, .category-link {
  display: none !important;
}








/* ==================================================
  インデックス（記事一覧）のスタイル調整
  SILKスキンの「画像の上にタイトルが重なる設定」を解除し、
  背景を白くして文字を読みやすくします。
================================================== */

/* 1. タイトルを画像の下（通常位置）に配置し、背景を白にする */
.archive .entry-card-content {
  position: relative !important; 
  background-color: #ffffff !important; 
  padding: 15px !important; /* 文字周りに適度な余白を追加 */
}

/* 2. タイトルの文字色を濃いグレーにして読みやすくする */
.archive .entry-card-title {
  color: #333333 !important; 
  position: static !important;
  font-weight: bold; /* 少し太字にして強調 */
}

/* 3. 画像の上に被っている黒い影（グラデーション）を消す */
.archive .entry-card-thumb-wrap::after {
  display: none !important;
}

/* 4. 画像の配置を正常化する */
.archive .entry-card-thumb-wrap {
  position: static !important;
}

/* 5. ラベル（カテゴリータグ）の位置を微調整 */
.archive .cat-label {
  top: 5px !important;    /* 上からの距離（数字を小さくすると上へ） */
  left: 5px !important;   /* 左からの距離（数字を小さくすると左へ） */
  padding: 3px 8px !important; /* ラベル自体の余白を少し整えてスッキリさせる */
}








/* ==================================================
関連記事　　見た目整頓
================================================== */
/* --- デザイン完全再現：関連記事CSS（最新微調整版） --- */

/* 全体コンテナ */
.custom-related-box-container {
    margin: 40px 0;
    clear: both;
}

/* 「関連記事」タイトル：サイズを大きく（18px → 22px） */
.related-box-main-title {
    font-size: 22px !important;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 12px;
}

.related-box-main-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px; /* 線も少し長く */
    height: 2px;
    background: #333;
}

/* 各記事の箱：隙間を半分に（24px → 12px） */
.related-box-item {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 12px; /* 隙間を半分に設定 */
    transition: 0.3s ease;
    overflow: hidden;
}

.related-box-item:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    border-color: #d0d0d0;
}

.related-box-link {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    text-decoration: none !important;
    color: inherit;
}

/* サムネイル部分：幅200px・左余白15px */
.related-box-thumb {
    flex: 0 0 200px;
    margin: 0 0 0 15px;
    position: relative;
    line-height: 0;
}

.related-box-thumb-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 2px;
}

/* ラベル：画像左上から4px固定 */
.related-box-thumb .cat-label {
    position: absolute;
    top: 4px !important;
    left: 4px !important;
    margin: 0 !important;
    font-size: 11px;
    padding: 3px 8px;
    white-space: nowrap;
    z-index: 1;
}

/* コンテンツ部分 */
.related-box-content {
    flex: 1;
    padding: 0 20px 25px 20px;
    position: relative;
}

/* タイトル：15px */
.related-box-title {
    font-size: 15px !important;
    line-height: 1.5;
    margin: 0 0 10px 0;
    color: #333;
    font-weight: bold;
}

/* 抜粋文：4行表示 */
.related-box-snippet {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* 日付を右下に配置 */
.related-box-meta {
    font-size: 11px;
    color: #aaa;
    position: absolute;
    bottom: 0;
    right: 20px;
}

/* スマホ表示対応 */
@media screen and (max-width: 480px) {
    .related-box-link {
        flex-direction: column;
        padding: 0;
    }
    .related-box-thumb {
        flex: 0 0 auto;
        width: calc(100% - 20px);
        margin: 10px auto;
    }
    .related-box-content {
        padding: 10px 15px 30px;
    }
    .related-box-snippet {
        -webkit-line-clamp: 3;
    }
}