@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){
  /*必要ならばここにコードを書く*/
}
/* ショートコードで表示される記事リストのコンテナ（全体をフレックスでラップ） */
.custom-cat-and-list-wrap {
    display: flex;
    flex-wrap: wrap; /* 必要であれば複数行に折り返す */
    gap: 15px; /* リストアイテム間の間隔 */
    padding: 10px; /* 全体の内側の余白 */
    background-color: #f9f9f9; /* リスト全体の背景色（好みで調整） */
    border: 1px solid #ddd; /* リスト全体の枠線（好みで調整） */
    border-radius: 8px; /* 全体の角を丸くする */
}

/* 各記事アイテムのコンテナ（サムネイルとテキストの横並びを制御） */
.custom-cat-and-list-wrap .custom-cat-and-list {
    display: flex; /* サムネイルとテキストを横並びにする */
    align-items: flex-start; /* 垂直方向の上揃え */
    width: 100%; /* 親要素の幅いっぱいに広げる */
    background-color: #fff; /* 各カードアイテムの背景色 */
    padding: 15px; /* 各カードアイテムの内側の余白 */
    border: 1px solid #eee; /* 各カードアイテムの枠線 */
    border-radius: 8px; /* 各カードアイテムの角を丸くする */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 各カードアイテムの影 */
    margin-bottom: 15px; /* 各アイテムの下の余白 */
    transition: transform 0.2s ease-in-out; /* ホバー時のアニメーション */
}

.custom-cat-and-list-wrap .custom-cat-and-list:hover {
    transform: translateY(-3px); /* ホバーで少し持ち上げる */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* ホバーで影を濃くする */
}

/* ★ サムネイル画像のラッパー（ここを最終調整！） */
.custom-cat-and-list-wrap .catlist-thumb-wrap {
    /* 幅と高さを調整します。新着記事のサムネイル比率（約1.76:1）に合わせて調整 */
    width: 180px;  /* 例として幅を180pxに設定。さらに大きくしたいならこの値を増やす */
    height: 102px; /* 高さ = 幅 / 1.76 で計算。180px / 1.76 = 102.27...px なので約102px */
    flex-shrink: 0;
    overflow: hidden; /* 画像が枠からはみ出た部分を隠す */
    position: relative;
    border-radius: 4px; /* 必要であれば角を丸くする */
}

/* ★ 実際のサムネイル画像 */
.custom-cat-and-list-wrap .catlist-thumb-wrap img.catlist-thumb {
    width: 100%; /* 親要素の幅に合わせる */
    height: 100%; /* 親要素の高さに合わせる */
    object-fit: cover; /* 枠を完全に覆うように拡大・トリミング */
    object-position: center; /* 画像を中央に配置 */
}

/* 右側のテキストコンテンツ */
.custom-cat-and-list-wrap .catlist-right {
    flex-grow: 1; /* 残りのスペースを全て使う */
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content: center; /* 垂直方向中央揃え */
    margin-left: 10px; /* サムネイルとの間隔をさらに詰める */
}

.custom-cat-and-list-wrap .catlist-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 3px; /* タイトル下の余白を詰める */
    line-height: 1.3;
}

.custom-cat-and-list-wrap .catlist-title a {
    color: #333;
    text-decoration: none;
}

.custom-cat-and-list-wrap .catlist-title a:hover {
    color: #0073aa;
    text-decoration: underline;
}

.custom-cat-and-list-wrap .catlist-categories {
    font-size: 0.9em;
    color: #555;
    line-height: 1.5;
}

.custom-cat-and-list-wrap .catlist-categories a {
    color: #0073aa;
    text-decoration: none;
}

.custom-cat-and-list-wrap .catlist-categories a:hover {
    text-decoration: underline;
}
/* AdVisionのオーバーレイ広告を少し上にずらして、メニューと被らないようにする */
iframe[src*="yicha.jp"] {
  margin-bottom: 60px !important;
  z-index: 9999 !important;
}