@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){
  /*必要ならばここにコードを書く*/
}

/* =============================================================
   アイキャッチ画像の強制中央寄せ
   ============================================================= */
.eye-catch,
.article-header .eye-catch,
.post-thumbnail,
.eyecatch-wrap,
.entry-content .wp-block-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.eye-catch img,
.article-header .eye-catch img,
.post-thumbnail img,
.eyecatch-wrap img,
.entry-content .wp-block-image img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* =============================================================
   広告グループ・縦並び（1列）の完全中央揃え
   ============================================================= */
.ad-2columns,
.ad-3columns,
.wp-block-group.ad-2columns,
.wp-block-group.ad-3columns {
    display: flex !important;
    flex-direction: column !important; /* 縦方向（1列）に並べる */
    align-items: center !important;    /* 左右中央に寄せる */
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 600px !important;       /* 広がりすぎないように最大幅を制限 */
    float: none !important;
}

/* グループ内部のコンテナ対策 */
.wp-block-group.ad-2columns > .wp-block-group__inner-container,
.wp-block-group.ad-3columns > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* 各広告アイテムを縦並び・中央配置にする */
.ad-2columns > *,
.ad-3columns > *,
.wp-block-group.ad-2columns > *,
.wp-block-group.ad-3columns > * {
    width: 100% !important;
    max-width: 450px !important;       /* 各広告カードの最大幅 */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;    /* 広告同士の縦の間隔 */
    text-align: center !important;
    box-sizing: border-box !important;
    flex: none !important;
}

/* =============================================================
   グループブロックおよび広告の完全中央寄せ
   ============================================================= */
.wp-block-group.ad-2columns,
.wp-block-group.ad-3columns,
.ad-2columns,
.ad-3columns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 500px !important;
    float: none !important;
}

/* グループ内部のCocoon自動コンテナの中央化 */
.wp-block-group.ad-2columns > .wp-block-group__inner-container,
.wp-block-group.ad-3columns > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* 各広告アイテムを中央に配置 */
.wp-block-group.ad-2columns > *,
.wp-block-group.ad-3columns > *,
.ad-2columns > *,
.ad-3columns > * {
    width: 100% !important;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}