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

/*固定ページの日付非表示*/
.page .date-tags,
.page .author-info {
display: none;
}

/* トップページ以外でヘッダー画像部分の隙間を完全に詰める */
body:not(.home):not(.front-page) .header-container {
  background-image: none !important;
  min-height: 0 !important;
}

body:not(.home):not(.front-page) .header {
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 10px !important;    /* ロゴの上の隙間（お好みで調整） */
  padding-bottom: 10px !important; /* ロゴの下の隙間（お好みで調整） */
}

/* ロゴの高さ制限による隙間を解除 */
body:not(.home):not(.front-page) .header-in {
  min-height: 0 !important;
}

/* アピールエリアやヘッダー下の不要な余白を消す */
body:not(.home):not(.front-page) .appeal,
body:not(.home):not(.front-page) .navi-in {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* カラムで右側をスマホでは上に表示（指定した場所のみ） */
@media screen and (max-width: 834px) {
  .wp-block-columns.reverse-column {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* 親のカラム全体（画像と文字を囲む外枠）の設定 */
.center-text-ignore-img {
  position: relative;
  display: flex;
  justify-content: center; /* 全体の中央に寄せる */
  align-items: center;     /* 上下中央揃え */
  min-height: 120px;       /* 画像の高さに合わせて調整してください */
}

/* 左側の画像カラム（位置を左端に固定して浮かせる） */
.center-text-ignore-img > .wp-block-column:first-child {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 画像を上下中央に */
  margin: 0 !important;
  width: auto !important;      /* 横幅を固定化させない */
  max-width: 30% !important;   /* 画像が大きすぎて文字に被る場合は調整 */
}

/* 右側の文字カラム（横幅を100%にして、文字を完全中央にする） */
.center-text-ignore-img > .wp-block-column:last-child {
  flex-basis: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-align: center; /* ★文字を完全中央揃えにする */
}