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

/*==================================================
** カスタマイズ：ヘッダー（サイト名拡大＋カフェ写真背景）
** 追加日: 2026-09-08 ／ 背景写真: Unsplash License
**==================================================*/

/* --- サイト名を約1.5倍に --- */
#header .site-name-text{
  font-size: 42px !important;          /* 既定 28px ×1.5 */
}
@media screen and (max-width: 1023px){
  #header .site-name-text{ font-size: 36px !important; }
}
@media screen and (max-width: 834px){
  #header .site-name-text{ font-size: 33px !important; }   /* 既定 22px ×1.5 */
}
@media screen and (max-width: 480px){
  #header .site-name-text{ font-size: 27px !important; }   /* 既定 18px ×1.5 */
}

/* --- ヘッダー背景：カフェ写真＋ぼかし（B-1: blur 3px / 明るめ） --- */
#header{
  position: relative;
  overflow: hidden;
  background-color: #2b2119;           /* 画像読込前・端の保険色 */
}
#header::before{
  content: "";
  position: absolute;
  inset: -24px;                        /* ぼかしの縁欠けを隠す */
  background-image: url("images/header-bg.jpg");
  background-size: cover;
  background-position: center 45%;   /* PC: 写真の縦位置（小さいほど写真が下がる） */
  filter: blur(3px) brightness(0.95) saturate(1.06);
  z-index: 0;
  pointer-events: none;
}
@media screen and (max-width: 1023px){
  /* スマホ・タブレットは中央のまま（現状維持） */
  #header::before{ background-position: center; }
}
#header::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25,17,12,0.14), rgba(25,17,12,0.32));
  z-index: 0;
  pointer-events: none;
}
#header-in{
  position: relative;
  z-index: 1;
  padding-top: 34px;
  padding-bottom: 34px;
}
#header .site-name-text,
#header .tagline{
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
@media screen and (max-width: 480px){
  #header-in{ padding-top: 22px; padding-bottom: 22px; }
}

/*==================================================
** カスタマイズ：SNSボタンを非表示（未使用のため） 2026-09-08
**   .sns-share  = 記事上下の X / Facebook / はてブ / Pocket シェアボタン
**   .sns-follow = 「Geckoをフォローする」フォローボタン（feedly等）
**==================================================*/
.sns-share,
.sns-follow{
  display: none !important;
}

/*==================================================
** カスタマイズ：サイト本体の背景色  2026-09-08（2026-09-20 #336600 に変更）
**   既定 #f2f2f2（スキン）→ #336600（深緑）
**   コンテンツ枠は白のまま、外側の余白部分がこの色になる
**==================================================*/
body{
  background-color: #336600 !important;
}

/*==================================================
** カスタマイズ：アースカラー統一  2026-09-08（2026-09-20 記事エリアを #999966 系に濃色化）
**   基調 = オリーブ #999966 ／ アクセントの濃茶 = #604020 ／ 吹き出し・セル = #d4d4aa
**   対象: 記事エリア / サイドバー / 会話吹き出し(中＋枠線) /
**         自己紹介ボックス / フッター / 前後記事ナビ
**   濃くなった分、本文の文字色も読みやすいよう暗めに調整
**==================================================*/

/* --- 記事エリア・サイドバー --- */
.main,
.sidebar{
  background-color: #999966 !important;
  color: #2b2410 !important;
}

/* --- 会話吹き出し（中の色・枠線・三角ポインター 連動） --- */
/*   2026-09-20: 本体(.main)と同化しないよう、吹き出しの中だけ #d4d4aa に。枠線は濃茶 #604020 ではっきり */
.speech-wrap{
  --cocoon-custom-background-color: #d4d4aa !important;
  --cocoon-custom-border-color: #604020 !important;
  --cocoon-custom-text-color: #2b2410 !important;
}
/* 付箋スタイル(sbs-stn)等は変数を経由しないので直接指定して確実に上書き */
.speech-wrap .speech-balloon,
.cocoon-block-balloon > .speech-balloon{
  background-color: #d4d4aa !important;
  border-color: #604020 !important;
  color: #2b2410 !important;
}
/* アイコンの丸枠も同じ濃茶に（Cocoonは別変数を使うため個別指定） */
.speech-wrap .speech-icon img,
.speech-wrap .speech-icon amp-img{
  border-color: #604020 !important;
}
/* もじゃ・Gecko、両方のアイコンの背景を吹き出しと同じ色(#d4d4aa)に差し替え */
.speech-wrap.sbp-l .speech-icon-image{
  content: url("images/mojya-icon.png") !important;
}
.speech-wrap.sbp-r .speech-icon-image{
  content: url("images/gecko-icon.png") !important;
}

/* --- 記事下のカテゴリ／タグ帯（スキンのグレー #e6e6e6 → オリーブ） --- */
.article-footer,
.entry-footer{
  background-color: #999966 !important;
}
/* --- 記事下のカテゴリ／タグのラベル（背景はオリーブのまま、枠線を濃茶に、文字は本文と同じ濃茶） --- */
.entry-categories .cat-link,
.entry-tags .tag-link,
a.cat-link,
a.tag-link{
  background-color: #999966 !important;
  border-color: #604020 !important;
  color: #2b2410 !important;
}

/* --- 自己紹介（プロフィール／著者ボックス） --- */
.author-box{
  background-color: #999966 !important;
  border-color: #604020 !important;
  color: #2b2410 !important;
}

/* --- フッター（本体と同じ背景色に追従。2026-09-20 #336600・文字は明るい色に反転） --- */
#footer.footer{
  background-color: #336600 !important;
  color: #f0ead9 !important;
}
#footer .footer-title,
#footer .footer-bottom-logo,
#footer .footer-bottom-logo a,
#footer .logo-footer,
#footer .site-name-text,
#footer .footer-meta,
#footer .navi-footer a{
  color: #f0ead9 !important;
}
#footer a{
  color: #e3cf8f !important;
}
#footer a:hover{
  background-color: #35893a !important;
}
#footer .author-box{            /* スキンの #fff 指定を上書き */
  background-color: #336600 !important;
  color: #f0ead9 !important;
}
#footer .footer-widgets{
  border-bottom-color: #4f9450 !important;
}

/* --- 記事内の表：真っ白すぎたのでトーンを抑えた色に、枠線は濃茶ではっきり --- */
.entry-content .wp-block-table table{
  border-collapse: collapse !important;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td{
  background-color: #d4d4aa !important;
  border: 1px solid #604020 !important;
}

/* --- 前の記事・次の記事ナビ（本文背景と同色に） --- */
.pager-post-navi{
  background-color: #999966 !important;
}
.pager-post-navi a{
  background-color: #999966 !important;
  border: 2px solid #604020 !important;
  color: #2b2410 !important;
}

/* --- 過去記事の「疑似サブタイトル」対策 2026-09-20 ---
   古い記事は見出しタグではなく bold-green 等の色文字をサブタイトル代わりに使っている。
   既定の緑(#3eb370)がオリーブ背景(#999966)と同化して見えにくいため、濃い緑に変更。
   赤(#e60033)・青(#0095d9)は色味が離れているため据え置き。 */
.entry-content .bold-green,
.main .bold-green{
  color: #0d5c2f !important;
}