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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ========================================
   ヘッダー
======================================== */
/* ヘッダーキャッチフレーズ*/
#header .site-description,
.header .site-description,
.site-description,
[class*="tagline"]{
  display:block !important;
  color:#000;              /* ← 引用符は不要 */
  font-size:30px;
	font-weight: bold;
  letter-spacing:.03em;
  margin-top:-15px;
}
/* ヘッダーメニューの文字を太字に */
#navi .navi-in a {
  font-weight: bold;
	font-size:20px;
}

/* ========================================
   人気記事ウィジェット
======================================== */
/* サイドバーの人気記事サムネを正方形トリミング表示（フルサイズ画像を中央で切り抜き） */
#sidebar .popular-entry-card-thumb.widget-entry-card-thumb.card-thumb {
  --sz: 96px;           /* 一辺のサイズ。お好みで 96/120/140px などに */
  width: var(--sz);
  height: var(--sz);
  flex: 0 0 var(--sz);   /* 横並び時に幅を固定 */
  overflow: hidden;
  border-radius: 6px;    /* 角丸任意 */
}
#sidebar .popular-entry-card-thumb.widget-entry-card-thumb.card-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 正方形枠いっぱいに中央トリミング */
  object-position: center;
  display: block;
}
/* ── サイドバー人気記事：タイトルをサムネと縦中央に ── */
#sidebar .popular-entry-card {
  display: flex;           /* 横並びの親をflexに（既にflexならそのまま効く） */
  align-items: center;     /* ← 縦中央揃えのキモ */
}
#sidebar .popular-entry-card-title, .widget-entry-title {
  margin-left: -110px;
}

/* ========================================
   関連記事セクション
======================================== */
/* ── 関連記事のサムネイルを正方形で表示（中央トリミング） ── */
.related-entry-card-thumb.card-thumb.e-card-thumb {
  --sz: 112px;             /* 一辺。96/120/140pxなど好みで */
  width: var(--sz);
  height: var(--sz);
  overflow: hidden;
  border-radius: 6px;      /* 角丸は任意 */
  position: relative;      /* ラベルの位置決め用 */
}

.related-entry-card-thumb.card-thumb.e-card-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* フルサイズ画像を中央でクロップ */
  object-position: center;
  display: block;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
/* ========================================
   人気記事ウィジェット
======================================== */
  /* 枠（figure）を正方形に固定：#sidebar 有無どちらでもヒットさせる */
  #sidebar figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb,
  #sidebar figure.new-entry-card-thumb.widget-entry-card-thumb.card-thumb,
  #sidebar figure.related-entry-card-thumb.card-thumb,
  figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb,
  figure.new-entry-card-thumb.widget-entry-card-thumb.card-thumb,
  figure.related-entry-card-thumb.card-thumb {
    --sz: 96px; /* 好みで 96/120/140 などに */
    width: var(--sz) !important;
    height: var(--sz) !important;
    flex: 0 0 var(--sz) !important;
    overflow: hidden;
    border-radius: 6px;
    margin: 0;
    line-height: 0; /* 余白対策 */
  }
  /* 画像：auto を確実に潰す（ピクセル指定＋!important＋高い特異性） */
  #sidebar figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb > img.wp-post-image,
  #sidebar figure.new-entry-card-thumb.widget-entry-card-thumb.card-thumb > img.wp-post-image,
  #sidebar figure.related-entry-card-thumb.card-thumb > img.wp-post-image,
  figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb > img.wp-post-image,
  figure.new-entry-card-thumb.widget-entry-card-thumb.card-thumb > img.wp-post-image,
  figure.related-entry-card-thumb.card-thumb > img.wp-post-image {
    width: var(--sz) !important;   /* 100% ではなく px 値で固定 */
    height: var(--sz) !important;  /* ← height:auto!important を上から完全に打ち消す */
    max-width: none !important;     /* テーマの max-width:100% を無効化 */
    object-fit: cover;
    object-position: center;
    display: block;
  }
  /*   記事タイトルを縦方向の真ん中に */
  :is(#sidebar, .sidebar) .popular-entry-card,
  :is(#sidebar, .sidebar) .widget-entry-card,
  :is(#sidebar, .sidebar) .new-entry-card, 
	 :is(#sidebar, .sidebar) .card-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
		margin-left: 0 !important;
    padding-left: 10px !important;
    min-width: 0; 
  }
}

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