@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){
  /*必要ならばここにコードを書く*/
}
:root {
  --key-color: #a89bbf;
  --key-color-dark: #8a7ba0;
  --key-color-light: #e8e2f0;
}

/* ヘッダー */
#header { background-color: #a89bbf; }

/* リンク色 */
a { color: #8a7ba0; }
a:hover { color: #6b5d8a; }

/* 見出し */
.entry-title, h1, h2, h3 { color: #6b5d8a; }

/* ボタン */
.btn, .button { background-color: #a89bbf; border-color: #8a7ba0; }

/* カテゴリラベル */
.cat-label { background-color: #a89bbf; }

/* サイドバーウィジェットヘッダー */
.widget-title, .widgettitle { background-color: #a89bbf !important; color: #ffffff !important; }
.sidebar .widget-title { background-color: #a89bbf !important; }
#sidebar .widget-title { background-color: #a89bbf !important; }

.widget-title { background-color: #a89bbf !important; color: #ffffff !important; border-color: #8a7ba0 !important; }

/* ブロックウィジェットタイトル */
.wp-block-heading { background-color: #a89bbf !important; color: #ffffff !important; }

/* ヘッダー・ナビ */
.header-container, .navi { background-color: #a89bbf !important; }
.navi a { color: #ffffff !important; }

/* フッター */
footer#footer, footer.footer-container { background-color: #a89bbf !important; color: #ffffff !important; }
.go-to-top-button { background-color: #8a7ba0 !important; }

/* ===== 記事本文の文中リンクを定番の青に（2026-07-22 ワカボンさん希望） =====
   :not([class]) ＝ クラスの付いていないリンクだけを対象にする指定。
   本文に手で入れたテキストリンクだけが青くなり、
   ブログカード・関連記事カード・ボタン（すべてクラス付き）は今の見た目のまま。 */
.entry-content a:not([class]) { color: #1155cc; }
.entry-content a:not([class]):hover { color: #0b3d91; }
/* 目次（もくじ）だけは元のラベンダーのまま残す */
#toc a:not([class]) { color: #8a7ba0; }
#toc a:not([class]):hover { color: #6b5d8a; }

/* ===== ヘッダーメニュー「今日のひとこと」を目立たせる（2026-07-24・v2） ===== */
/* 文字を囲む item-label だけをピル型ボタンにする（メニュー全体だと巨大化するため） */
.navi a[href*="/omamori/"] .item-label,
#navi a[href*="/omamori/"] .item-label,
.navi-menu a[href*="/omamori/"] .item-label {
  display: inline-block;
  color: #1155cc;
  background: #ffffff;
  font-weight: 700;
  border-radius: 999px;
  padding: 5px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.navi a[href*="/omamori/"] .item-label::before,
#navi a[href*="/omamori/"] .item-label::before {
  content: "\1F38B "; /* 🎋 */
}
.navi a[href*="/omamori/"]:hover .item-label,
#navi a[href*="/omamori/"]:hover .item-label {
  background: #eef3ff;
  color: #0b3d91;
}
/* item-labelが無い環境(モバイル等)のフォールバック */
.navi a[href*="/omamori/"], #navi a[href*="/omamori/"] { color: #1155cc; font-weight: 700; }

/* ===== ヘッダーをXのバナーと統一（2026-07-26） ===== */
/* 高さ固定(min-height)を解除して、画像の縦横比そのままで表示する */
body #header,
body #header-in {
  min-height: 0 !important;
  height: auto !important;
}
body #header {
  aspect-ratio: 3 / 1;
  background-size: cover !important;
  background-position: center center !important;
}
/* サイト名の文字は画像に描かれているので画面上は隠す（検索エンジン・読み上げには残す） */
body #header .site-name-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* スマホは少し寄せて（ズームして）文字を読みやすく */
@media screen and (max-width: 834px) {
  body #header { aspect-ratio: 1.8 / 1; }
}