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

/************************************
** 子テーマ用のスタイルを書く
************************************/
}
/* YouTube埋め込みの重なり対策 */
.entry-content iframe,
.widget iframe {
  position: relative;
  z-index: 300; /* 他の要素より大きい値に設定 */
}

/* もしモバイルフッターボタンなど特定の要素と重なる場合 */
.mobile-footer-buttons {
  z-index: 500; /* 動画よりさらに大きい値に設定 */
}

/* YouTube埋め込みとコンテンツの間に余白を追加 */
.wp-block-embed-youtube {
    margin-bottom: 20px; /* 必要に応じて数値を調整 */
    margin-top: 20px;
}

/* AdSense広告ユニットに余白を追加（広告を囲む要素のクラス名を確認してください） */
.ad-space {
    margin-top: 20px; /* 必要に応じて数値を調整 */
    margin-bottom: 20px;
}

/* YouTube埋め込みをレスポンシブ化して重なりを防止 */
iframe[src*="youtube"],
.wp-block-embed__wrapper iframe {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    margin: 20px 0;
}

/* 画像の回り込みが YouTube に干渉しないようにする */
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* 回り込み画像の後のYouTubeが食い込む場合の対策 */
.wp-block-image {
    margin-bottom: 20px;
    clear: both;
}

/* アイキャッチ画像との重なり防止 */
.entry-content iframe {
    clear: both;
}
/* 画像がYouTubeの上に回り込むのを完全に防ぐ */
.wp-block-embed,
.wp-block-embed__wrapper,
.entry-content iframe {
    clear: both !important;
    margin-top: 20px;
    display: block;
}
/* 画像に YouTube が重なるのを完全に防止する */
.wp-block-image,
.wp-block-image figure,
.wp-block-image img {
    float: none !important;
    clear: both !important;
    display: block;
    margin-bottom: 20px;
}

/* YouTube（iframe）が画像に食い込まないように強制 */
.wp-block-embed,
.wp-block-embed__wrapper,
.entry-content iframe {
    float: none !important;
    clear: both !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    margin-top: 20px;
}
/* --- カスタムHTMLで貼った YouTube が画像に食い込む問題の完全対策 --- */

/* カスタムHTML内の iframe を完全に独立させる */
.entry-content .wp-block-html iframe {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 25px;
    margin-bottom: 25px;
    position: relative !important;
    z-index: 1;
}

/* 上の画像が YouTube に重ならないように画像側をリセット */
.wp-block-image,
.wp-block-image figure,
.wp-block-image img {
    float: none !important;
    clear: both !important;
    display: block !important;
    margin-bottom: 25px;
    position: relative !important;
    z-index: 2;
}

/* 画像の回り込み解除（右寄せ・左寄せ画像の影響を遮断） */
.wp-block-image {
    clear: both !important;
    margin-bottom: 20px;
}