@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){
  /*必要ならばここにコードを書く*/
}
/* レスポンシブデザイン用のメディアクエリ ここまで */

@import url("gbf-marker.css");

/* メディアライブラリから貼り付けた画像（wp-image系）の強制拡大を阻止 */
.entry-content img[class*="wp-image-"],
.entry-content img.gdb-asset {
    width: auto !important;      /* 横幅をコンテンツに合わせず自動に */
    height: auto !important;     /* 高さを維持 */
    max-width: 100% !important;  /* 親要素より大きい時だけ縮小 */
    display: inline-block;       /* ブロック要素化による強制拡大を防止 */
}

/* テーブル内の画像が巨大化するのを防ぐ（特に重要） */
.entry-content table td img {
    width: auto !important;
    max-width: 100% !important; /* 万が一親枠よりデカい場合は枠内に収める */
    height: auto !important;
}

/* サイトタイトル表示を強制復活させる最終命令 */
.logo.logo-header.logo-text .site-name-text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important; /* 黒文字 */
    font-size: 24px !important;
    height: auto !important;
    width: auto !important;
}

/* リンクエリアの高さが0になるのを防ぐ */
.site-name-text-link {
    display: block !important;
    height: auto !important;
    padding: 10px !important;
}


/* ==========================================
   CSSだけで画像の縦横比を強制固定（CLS対策）
   ========================================== */

/* 記事内の一般的な画像 */
.entry-content img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: attr(width) / attr(height); /* HTMLにサイズ属性があれば優先適用 */
}

/* 各種サムネイル画像（新着・人気・ナビカード等） */
.card-thumb img, 
.widget-entry-card-thumb img, 
.related-entry-card-thumb img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; /* サムネイルの縦横比（16:9）をロード前から強制確保 */
    object-fit: cover;
}