@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; /* ★文字を完全中央揃えにする */
}

/* サイドバーを中央ぞろえ */

#sidebar {
    text-align: center;
}

/* 投稿ページ（記事ページ）のときだけヘッダーロゴを非表示にする */
.single .logo-header {
  display: none;
}

/* 本文上のアイキャッチ画像を強制的にnote風（縦短め）にする */
.entry-content .eye-catch,
.eye-catch-wrap img,
img.wp-post-image.eye-catch {
    width: 100% !important;
    height: 200px !important; /* ★ここでお好みの高さに調整 */
    object-fit: cover !important;
    object-position: center !important;
}

/* 投稿記事のタイトル（H1）の文字サイズ変更 */
.article h1 {
  font-size: 28px; /* お好みのピクセル数に変更 */
}


/* PC表示でサイドバーを残しつつ、記事の中身をゆったり広めに調整 */
@media screen and (min-width: 1024px) {
  /* 1. 記事の表示エリアの幅をもう少し広げる */
  .single-post main.main {
    max-width: 780px; 
    margin-left: auto;
    margin-right: auto;
  }

  /* 2. 文字の左右の余白はすっきり20pxを維持 */
  .single-post .entry-content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 記事タイトルの「||」の位置で強制的に改行させる設定 */
.entry-title {
    white-space: pre-wrap;
}
.entry-title::before {
    display: none;
}

/* 記事タイトル（H1）と本文のH2見出しで、||による改行を画面に反映させる */
.entry-title,
.article h2,
.entry-content h2 {
    white-space: pre-wrap !important;
    line-height: 1.5 !important;
}