/*
Theme Name: Cocoon Child (Performance Tuned)
Template: cocoon-master
Version: 2025-08-18
*/

/* ========== ベース安定化 ========== */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }

/* ロゴの明示サイズ（CLS抑制：実寸に合わせて調整可） */
.header-container-in.hlt-top-menu .logo-header img {
  width: 200px;  /* ←サイトの実寸に合わせて変更可 */
  height: 60px;  /* ←サイトの実寸に合わせて変更可 */
}

/* ========== アイキャッチ／サムネ：比率プレースホルダ ========== */
/* PCは16:9、SPは4:3。Cocoonの主要サムネ要素を対象に */
.eyecatch,
.entry-card-thumb,
.article-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f0f0f0;       /* プレースホルダ色 */
}
@media (max-width: 768px) {
  .eyecatch,
  .entry-card-thumb,
  .article-thumb {
    aspect-ratio: 4 / 3;
  }
}
.eyecatch img,
.entry-card-thumb img,
.article-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== 遅延読み込み画像のチラつき軽減 ========== */
img[loading="lazy"] {
  background: #f6f6f6;     /* うすい台紙で点滅感を抑える */
}

/* ========== 文字・レイアウトの微調整 ========== */
.entry-content figure { margin: 0; }
/* ボタンやアイコンの収まり（Shortcodes Ultimate対策） */
.su-button .su-icon,
.su-button .su-icon > img,
.su-button .su-icon:before {
  width: 1em;
  height: 1em;
  line-height: 1em;
  vertical-align: middle;
}

/* ========== 広告・iframe などのレイアウト揺れ対策（必要に応じて） ========== */
/* 汎用ラッパーに比率を与える例：<div class="ratio-16x9">で囲む */
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-16x9 > * ,
.ratio-4x3  > * ,
.ratio-1x1  > * { width: 100%; height: 100%; }

/* ========== 余白最適化（好みに応じて） ========== */
/* 例：カード間の無駄な余白を少し詰める */
.entry-card-wrap { margin-bottom: 1.0rem; }