@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
**   既定 #f2f2f2（スキン）→ #b8b894（マットなカーキ／セージ）
**   コンテンツ枠は白のまま、外側の余白部分がこの色になる
**==================================================*/
body{
  background-color: #b8b894 !important;
}

/*==================================================
** カスタマイズ：アースカラー統一  2026-09-08
**   基調 = サンド #efe7d6 ／ アクセントの茶 = #b89a6a
**   対象: 記事エリア / サイドバー / 会話吹き出し(中＋枠線) /
**         自己紹介ボックス / フッター / 前後記事ナビ
**==================================================*/

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

/* --- 会話吹き出し（中の色・枠線・三角ポインター 連動） --- */
.speech-wrap{
  --cocoon-custom-background-color: #efe7d6 !important;
  --cocoon-custom-border-color: #b89a6a !important;
}
/* 付箋スタイル(sbs-stn)等は変数を経由しないので直接指定して確実に上書き */
.speech-wrap .speech-balloon,
.cocoon-block-balloon > .speech-balloon{
  background-color: #efe7d6 !important;
  border-color: #b89a6a !important;
}
/* アイコンの丸枠も吹き出しと同じ茶に（Cocoonは別変数を使うため個別指定） */
.speech-wrap .speech-icon img,
.speech-wrap .speech-icon amp-img{
  border-color: #b89a6a !important;
}
/* もじゃアイコンの白背景をサンド(#efe7d6)に差し替え */
.speech-wrap.sbp-l .speech-icon-image{
  content: url("images/mojya-icon.png") !important;
}

/* --- 記事下のカテゴリ／タグ帯（スキンのグレー #e6e6e6 → サンド） --- */
.article-footer,
.entry-footer{
  background-color: #efe7d6 !important;
}
/* --- 記事下のカテゴリ／タグのラベル --- */
.entry-categories .cat-link,
.entry-tags .tag-link,
a.cat-link,
a.tag-link{
  background-color: #efe7d6 !important;
  border-color: #b89a6a !important;
  color: #4a3f33 !important;
}

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

/* --- フッター（スキンの黒背景＋白文字 → サンド＋濃茶文字） --- */
#footer.footer{
  background-color: #b8b894 !important;
  color: #4a3f33 !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: #4a3f33 !important;
}
#footer a{
  color: #6b4e2e !important;
}
#footer a:hover{
  background-color: #e3d7bf !important;
}
#footer .author-box{            /* スキンの #fff 指定を上書き */
  background-color: #b8b894 !important;
  color: #4a3f33 !important;
}
#footer .footer-widgets{
  border-bottom-color: #cbb994 !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: #fcfaf5 !important;   /* 真っ白ではない生成り */
  border: 1px solid #b89a6a !important;   /* 吹き出しと同じ茶 */
}

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