@charset "utf-8";
/*
Theme Name: Muum Child
Template: muum_tcd085
Version: 1.0.0
Description: Child theme of Muum (TCD085)
*/

/* ------------------------------------------------------------------
 サムネイル比率を全て 1.90:1 に統一
 親テーマは固定 width/height でトリミング表示しているため、
 height を解除して aspect-ratio で上書き(レスポンシブCSSにも勝つよう !important)
------------------------------------------------------------------ */

/* 記事一覧(ブログリスト type1/type2) */
.blog_list.type1 .image_wrap,
.blog_list.type2 .image_wrap,

/* トップページ タブ記事一覧 */
#index_tab_post_list .post_list.type1 .image_wrap,
#index_tab_post_list .post_list.type2 .image_wrap,

/* ランキングページ */
#ranking_list .post_list .image_wrap,

/* 関連記事・前後記事 */
#related_post .image_wrap,
#next_prev_post .image_wrap,

/* メガメニュー */
.megamenu_blog_list .image_wrap,
.megamenu_page .image_wrap,

/* ウィジェット(タブ記事) */
.widget_tab_post_list .image_wrap {
  height: auto !important;
  aspect-ratio: 1.9 / 1;
}

/* 記事ページのアイキャッチ */
#post_image {
  height: auto !important;
  aspect-ratio: 1.9 / 1;
}

/* トップページ下部の記事一覧(特集記事・最近の記事など)
   タイトルが画像上に重なるレイアウトのため .item 自体を 1.90:1 に */
.bottom_post_list .item {
  height: auto !important;
  aspect-ratio: 1.9 / 1;
}

/* ヘッダーカルーセル type1(トップの大きな記事スライド) */
#header_carousel_type1,
#header_carousel_type1 .post_list {
  height: auto !important;
}
#header_carousel_type1 .item {
  height: auto !important;
  aspect-ratio: 1.9 / 1;
}

/* ヘッダーカルーセル type2 */
#header_carousel_type2 .item {
  height: auto !important;
}
#header_carousel_type2 .item .link {
  height: auto !important;
  aspect-ratio: 1.9 / 1;
}

/* フッターカルーセル */
#footer_carousel,
#footer_carousel .post_list {
  height: auto !important;
}
#footer_carousel .item {
  height: auto !important;
  aspect-ratio: 1.9 / 1;
}

/* メガメニューのカルーセル */
.megamenu_carousel .post_list {
  height: auto !important;
}
.megamenu_carousel .item {
  height: auto !important;
  aspect-ratio: 1.9 / 1;
}

/* 記事リストウィジェット(styled_post_list1)
   内側の .image に height:100px !important があるため専用対応。
   画像は 130×68px(=1.90:1)、行の高さ100pxは維持して画像を上下中央に配置 */
.styled_post_list1 .image_wrap {
  width: 130px !important;
  height: 68px !important;
  margin-top: 16px; /* (100 - 68) / 2 で上下中央 */
}
.styled_post_list1 .image {
  height: 100% !important;
}
.styled_post_list1 .title_area {
  width: calc(100% - 130px) !important;
}

/* 記事スライダーウィジェット */
.post_slider_widget .post_slider,
.post_slider_widget .item,
.post_slider_widget .item .link {
  height: auto !important;
}
.post_slider_widget .item .link {
  aspect-ratio: 1.9 / 1;
}

/* ------------------------------------------------------------------
 カテゴリーラベルをアイキャッチに重ねず、画像の上(外側)に表示
 バッジ(高さ40px)分の帯をカード上部に確保する方式。
 :has() でカテゴリー表示があるリストにのみ適用
------------------------------------------------------------------ */

/* カード型リスト: リスト内にカテゴリーがあれば全カードに帯を確保(行の高さを揃えるため) */
.blog_list.type1:has(.category) .item,
.blog_list.type2:has(.category) .item,
#index_tab_post_list .post_list.type1:has(.category) .item,
#index_tab_post_list .post_list.type2:has(.category) .item,
#ranking_list .post_list:has(.category) .item,
.bottom_post_list:has(.category) .item,
#related_post .related_post_list:has(.category) .item,
#related_post:has(.category) .item,
.megamenu_carousel:has(.category) .item,
#footer_carousel:has(.category) .item {
  padding-top: 40px;
}

/* 記事スライダーウィジェット(バッジ高さ30px) */
.post_slider_widget .post_slider:has(.category) .item {
  padding-top: 30px;
}

/* 記事リストウィジェット(PRラベル高さ30px、該当行のみ) */
.styled_post_list1 li:has(> .category) {
  padding-top: 30px;
}

/* 記事ページのアイキャッチ: 画像自体が背景のため、上に40pxの余白を作りバッジを外に出す */
#post_image:has(> .category) {
  margin-top: 40px;
  overflow: visible;
}
#post_image .category {
  top: -40px !important;
}

/* ------------------------------------------------------------------
 記事ページ上部のPR表記
------------------------------------------------------------------ */
.pr_notice {
  display: block;
  margin: 0 0 30px;
  padding: 10px 16px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: #777;
}

/* このファイルにカスタムCSSを追記してください */