@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;
}

/* --- 引用画像専用のヴィンテージ風フレーム --- */
.quoted-fashion-snap {
  max-width: 500px; /* 画像が大きくなりすぎないように制限 */
  margin: 40px auto; /* 上下の中央に配置し、余白をしっかり取る */
  padding: 15px 15px 10px 15px;
  background-color: #fdfdfc; /* 写真の白枠（ポラロイド風） */
  border: 1px solid #dcd0c5;
  box-shadow: 2px 4px 10px rgba(92, 67, 59, 0.15); /* 少し浮き出たような影 */
  border-radius: 2px;
}

.quoted-fashion-snap img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #eee; /* 画像自体の薄い境界線 */
}

/* --- 出典元のテキストデザイン --- */
.quote-source {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #7a6b63;
  text-align: right; /* 右寄せにしてスタイリッシュに */
  font-family: "游明朝", YuMincho, serif; /* ここも明朝体で雰囲気を統一 */
}

.quote-label {
  font-weight: bold;
  color: #b26a4f; /* アクセントのレンガ色 */
  margin-right: 5px;
}

.quote-source a {
  color: #7a6b63;
  text-decoration: underline; /* リンクであることを分かりやすく */
}

.quote-source a:hover {
  color: #5c433b;
}

/* --- ヴィンテージ風 文章引用ボックス（Lightning用） --- */
.vintage-quote-box {
  position: relative;
  background-color: #f4efe9; /* 少し古い紙のような色 */
  border-left: 5px solid #8c6b5d; /* 左側に太いブラウンの線 */
  padding: 20px 20px 10px 40px;
  margin: 30px 0;
  color: #4a4036;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", serif; /* 雑誌風の明朝体 */
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.05);
}

/* 左上の大きな引用符（クォーテーション）マーク */
.vintage-quote-box::before {
  content: "“";
  font-family: serif;
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 40px;
  color: #c2b0a3;
  line-height: 1;
}

.vintage-quote-box p {
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* 出典元のテキスト */
.vintage-quote-box cite {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #7a6b63;
  font-style: normal;
}

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

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

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