@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) .header-in {
  display: none;
}

/* トップページ以外でヘッダーの背景画像を非表示 */
body:not(.home) .header {
  background-image: none !important;
  min-height: auto !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;
  }
}

/* サイドバー人気記事のタイトルを左揃え・文字を小さくする（一括版） */
.sidebar .widget_popular_entries .entry-title,
.sidebar .widget_popular_entries .widget-entry-card-title,
.sidebar .widget_popular_entries .widget-entry-card-content {
  text-align: left !important;
  font-size: 14px !important; /* 好みの大きさに調整（12px〜13pxがおすすめ） */
}

/* アイキャッチをタイトルより上に強制移動 */
.entry-header {
    display: flex;
    flex-direction: column;
}
.entry-header .eye-catch-wrap {
    order: -1;
}

/* ==========================================
   現代風シンプルデザイン（30代〜60代男性向け）
========================================== */

/* --- H2見出し：重厚感と清潔感のある左帯＋下線 --- */
.article h2 {
  position: relative;
  padding: 0.8em 1em 0.8em 1.2em;
  margin: 2.5em 0 1.5em;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.4;
  color: #1a202c; /* ダークグレーで可読性を確保 */
  background-color: #f7fafc; /* 超薄い背景色で視覚的ブロック化 */
  border-left: 5px solid #191970; /* 落ち着いたシックなブルー */
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0 4px 4px 0;
}

/* --- H3見出し：スマートな左バーのみ --- */
.article h3 {
  padding: 0.4em 0 0.4em 0.8em;
  margin: 2em 0 1em;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.4;
  color: #2d3748;
  border-left: 4px solid #2C3E50; /* シックなスレートグレー */
  border-bottom: none; /* 装飾を削ぎ落としてスッキリ */
  background: none;
}

/* --- H4見出し：さりげない下線のみ --- */
.article h4 {
  padding: 0 0 0.4em 0;
  margin: 1.8em 0 0.8em;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.4;
  color: #2d3748;
  border-bottom: 2px solid #e2e8f0; /* 控えめな下線 */
  background: none;
}