@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

/* フロントページ（ホームページ）の本文上アイキャッチを強制非表示 */
.home.page .entry-eye-catch {
    display: none !important;
}

/* 万が一、別の要素名で出力されている場合も考慮した広域指定 */
.home.page .eye-catch,
.home.page .eyecatch-column {
    display: none !important;
}
/* 1. ヘッダー内のロゴとタグラインを左寄せに固定 */
.header-in, .header-container-in {
    align-items: flex-start !important; /* 子要素を左揃えにする */
    text-align: left !important;

}

/* 3. タグライン（黒い帯）の位置調整 */
.tagline {
    margin-left: 0 !important;
    margin-right: auto !important;
}
/* 1. Google Fontsから明朝体（Noto Serif JP）を読み込む */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;600&display=swap');

/* 2. サイト全体の基本フォントを明朝体ベースに変更 */
body {
    font-family: "Noto Serif JP", serif !important;
    -webkit-font-smoothing: antialiased; /* 文字を滑らかにする */
}

/* 3. ヘッダーロゴのフォントを細身の明朝体にして高級感を出す */
.logo-text, .site-name-text-link {
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 300 !important; /* 細身にすることで知的な印象に */
    letter-spacing: 0.25em !important; /* 文字間隔を広げてラグジュアリーに */
    font-size: 28px !important;
}

/* 4. タグライン（黒い帯）の中の文字も整える */
.tagline {
    font-family: 'Noto Serif JP', serif !important;
    letter-spacing: 0.1em !important;
    font-weight: 300 !important;
}

/* 5. 記事の見出し（H2）もシャープな明朝体に */
.article h2 {
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 600 !important;
}
/* ロゴの背景にだけ暗めのグラデーションを敷いて文字を保護する */
.logo-header {
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0) 100%) !important;
    padding-left: 20px !important;
}

/* ロゴテキスト自体の設定（太さと鮮明さを強調） */
.site-name a,
.logo-text a {
    color: #ffffff !important;
    font-weight: 900 !important; /* 最大の太さに */
    letter-spacing: 0.1em !important; /* 文字の間隔を広げて高級感を出す */
    text-shadow: 1px 1px 8px rgba(0,0,0,0.8) !important; /* 影をより深く */
}
/* 検索ブロック全体の高さを抑える */
.wp-block-search .wp-block-search__inside-wrapper {
    gap: 4px !important; /* 入力欄とボタンの間の隙間を調整 */
}

/* 入力欄を細くする（上下の余白を最小限に） */
.wp-block-search__input {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: auto !important; /* 高さを自動調整に固定 */
    min-height: 30px !important; /* 最低限の高さを低めに設定 */
    line-height: 1.2 !important;
}

/* ボタンの高さを入力欄に合わせる */
.wp-block-search__button {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: auto !important;
    min-height: 30px !important;
    line-height: 1.2 !important;
}
/* モバイル（480px以下）専用の最終リセットスタイル */
@media screen and (max-width: 480px) {
  
  /* 1. 吹き出しの土台となるタグラインを完全に作り直す */
  #header .tagline {
    /* スキン側の固定幅・配置設定を強制解除 */
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    display: table !important; /* 文字幅に合わせるための指定 */
    
    /* デザインの再定義：左寄せ・コンパクト・洗練 */
    margin: 15px 0 0 5% !important; /* 左端から5%の位置に配置 */
    padding: 6px 14px !important;
    background-color: #222 !important; /* 背景色（Bizarre-foodの黒） */
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    white-space: normal !important; /* 折り返しを許可して枠外溢れを防止 */
    max-width: 80% !important; /* 画面右端にぶつからないように */
  }

  /* 2. PC版の「ツノ（吹き出しの突起）」をモバイル時のみ完全抹殺 */
  #header .tagline::before, 
  #header .tagline::after {
    content: none !important;
    display: none !important;
    border: none !important;
  }

  /* 3. ヘッダー内の余計な余白を詰める（任意調整） */
  .header-container-in {
    padding-bottom: 10px !important;
  }
}
/* --- 1. PC・モバイル共通：ツノ（吹き出し）を根絶 --- */
#header .tagline::before, 
#header .tagline::after,
.tagline::before, 
.tagline::after {
  content: none !important;
  display: none !important;
  border: none !important;
}

/* --- 2. モバイル専用（480px以下）の微調整 --- */
@media screen and (max-width: 480px) {
  #header .tagline {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    display: table !important; 
    margin: 15px 0 0 5% !important; 
    padding: 6px 14px !important;
    background-color: #222 !important; 
    font-size: 11px !important;
    font-weight: 300 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    border-radius: 4px !important;
    white-space: normal !important; 
    max-width: 80% !important;
  }
}

/* --- 3. PC専用：ツノが消えた後の位置の微調整（もしズレていれば） --- */
@media screen and (min-width: 481px) {
  #header .tagline {
    margin-top: 10px !important; /* ツノが消えて寂しくなった分の隙間調整 */
  }
}