@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* -----------------------------------
   フクシル：クリーンレイアウト × ヴィンテージ風デザイン
----------------------------------- */

/* 1. 全体の背景と文字色 */
body {
  background-color: #f4efe9; /* 全体の背景（くすんだベージュ） */
  color: #4a4036; /* 文字色（こげ茶） */
}

/* 2. ヘッダー周りとロゴ（活版印刷風スタイル） */
.header-container {
  background-color: #eaddcf;
  border-bottom: 3px solid #8c6b5d;
}
.logo-text {
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-name-text {
  font-size: 36px;
  color: #5c433b;
  font-weight: 900;
  letter-spacing: 4px;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
}

/* 3. メイン記事とサイドバーを「白いカード」のように独立させる */
.main, .sidebar {
  background-color: #fdfdfc; /* 古紙のような温かみのある白 */
  border: 1px solid #e2d5c8; /* 薄いヴィンテージ枠線 */
  border-radius: 8px; /* 参考サイトのような少し丸みのある角 */
  box-shadow: 0 2px 6px rgba(92, 67, 59, 0.05); /* ほんのりブラウンの影 */
}

/* 4. 記事一覧のカード（参考サイト風・ふわっと浮き出る動き） */
.entry-card-wrap,
.related-entry-card-wrap {
  background-color: #fdfdfc;
  border-radius: 8px;
  border: 1px solid #e2d5c8;
  transition: all 0.3s ease; /* ホバー時の滑らかなアニメーション */
  overflow: hidden;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  box-shadow: 0 6px 15px rgba(92, 67, 59, 0.15); 
  transform: translateY(-3px); /* マウスを乗せるとフワッと浮く */
}

/* 5. グローバルナビゲーション（メニュー） */
.navi {
  background-color: #eaddcf; 
  border-top: 1px solid #c2b0a3;
  border-bottom: 1px solid #c2b0a3;
}
.navi-in a {
  color: #5c433b;
  font-weight: bold;
  letter-spacing: 1px;
}
.navi-in a:hover {
  background-color: #8c6b5d; /* ホバーでヴィンテージブラウンに */
  color: #fdfdfc;
}

/* 6. サイドバーの見出し（参考サイトのようにスッキリ） */
.sidebar h3 {
  background-color: #8c6b5d; 
  color: #fdfdfc;
  font-size: 16px;
  letter-spacing: 2px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
}

/* 7. カテゴリのバッジ（アクセントカラー） */
.cat-label, .entry-category {
  background-color: #b26a4f !important; /* 色褪せたレンガ色（テラコッタ） */
  color: #fff !important;
  border-radius: 2px;
  letter-spacing: 1px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}