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

/****************************************************************************************
** 【追加機能・カスタマイズ一覧】
** 1. アイキャッチ画像の強制中央寄せ（PC/スマホ共通で美しく配置）
** 2. 広告グループ（2カラム・3カラム）の完全縦並び（1列）＆中央揃え・最大幅制限
** 3. スマホ・タブレット表示時（834px以下）のヘッダー画像最適化
    - 左右が切り切れないように background-size: contain を適用
    - アスペクト比（3:1）を維持して文字やキャラクターが画面内に収まるように自動調整
****************************************************************************************/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /* スマホ・タブレット表示時にヘッダー画像が切れないように調整 */
  .header-container, #header {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    aspect-ratio: 3 / 1 !important;
    height: auto !important;
  }
}

/*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;
}