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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ (Jewelry Champagne Gold)
*/

/* =====================================================
   Jewelry Champagne Gold (大人可愛いジュエリー配色)
   ===================================================== */
:root {
  /* カラーパレット */
  /* メイン：輝くシャンパンゴールド */
  --omj-champagne: #DBC084;
  /* 背景用：透き通るようなミルクベージュ */
  --omj-pale-bg: #FCFAF7; 
  /* アクセント：金属光沢のグラデーション */
  --omj-gold-grad: linear-gradient(120deg, #E8D3A2 0%, #C8AA6E 100%);
  /* テキスト：黒ではなく、上品なココアグレー */
  --omj-text-cocoa: #6B5D52;
  /* 枠線：肌馴染みのいいベージュ */
  --omj-border-soft: #F0E6D8;
  
  /* デザイン定義 */
  --omj-font-serif: "Shippori Mincho", serif;
  --omj-font-sans: "Zen Maru Gothic", sans-serif;
  --omj-radius: 24px; /* コロンとした丸み */
  --omj-shadow-glow: 0 8px 24px rgba(219, 192, 132, 0.2); /* 金色のオーラ */
}

/* 全体の基本設定 */
body {
  font-family: var(--omj-font-sans) !important;
  color: var(--omj-text-cocoa);
  background-color: #FAFAFA !important;
  /* 和紙のような繊細なテクスチャ */
  background-image: radial-gradient(#E8D3A2 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

/* リンク色も上品に */
a { color: #B08D55; transition: opacity 0.3s; }
a:hover { color: #DBC084; opacity: 0.8; }


/* =====================================================
   全体共通部 (ヘッダー・フッター)
   ===================================================== */

/* ヘッダー */
.header-in {
  background-color: #fff;
  border-bottom: none;
  /* 下に細い金のライン */
  box-shadow: 0 4px 10px rgba(0,0,0,0.02), 0 2px 0 var(--omj-champagne);
}
.site-name-text {
  font-family: var(--omj-font-serif);
  color: #B08D55; /* ブロンズゴールド */
  font-weight: 500;
  letter-spacing: 0.05em;
}
.tagline {
  color: #998B82;
  font-size: 0.75rem;
}

/* フッター */
.footer {
  background: #F8F5F0 !important; /* 濃すぎないミルクティー色 */
  color: var(--omj-text-cocoa) !important;
  border-top: 3px solid #E8D3A2;
}
.footer a { color: var(--omj-text-cocoa) !important; }
.footer-widgets { color: var(--omj-text-cocoa); }

/* ページトップへ戻るボタン */
.go-to-top-button {
  background: var(--omj-gold-grad) !important; /* キラキラ */
  color: #fff !important;
  border-radius: 50% !important;
  width: 48px !important; height: 48px !important;
  box-shadow: 0 4px 12px rgba(196, 168, 104, 0.4) !important;
  border: 1px solid #fff !important;
}


/* =====================================================
   記事一覧 (エントリーカード) - ふんわり浮くカード
   ===================================================== */

.entry-card-wrap {
  background-color: #fff;
  border: 1px solid var(--omj-border-soft);
  border-radius: var(--omj-radius);
  /* 影をピンクゴールドっぽくして「肌映り」を良く */
  box-shadow: 0 4px 15px rgba(219, 180, 160, 0.08);
  margin-bottom: 24px !important;
  transition: all 0.3s ease;
  padding: 20px !important;
}
.entry-card-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(219, 180, 160, 0.2);
  border-color: #E8D3A2;
}

/* 記事タイトル */
.entry-card-title {
  font-family: var(--omj-font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--omj-text-cocoa);
  margin-bottom: 10px;
  line-height: 1.5;
}

/* カテゴリラベル（ジュエリータグ風） */
.cat-label {
  background: #fff !important;
  color: #B08D55 !important;
  border: 1px solid #B08D55 !important;
  border-radius: 99em !important;
  padding: 2px 10px !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.05em;
  box-shadow: none !important;
}


/* =====================================================
   ページネーション
   ===================================================== */
.pagination .page-numbers {
  border-radius: 50% !important;
  border: 1px solid var(--omj-border-soft) !important;
  background: #fff;
  color: #998B82;
  width: 42px; height: 42px;
  line-height: 40px;
  margin: 0 4px;
  transition: all 0.3s;
}
.pagination .current {
  background: var(--omj-gold-grad) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(200, 170, 110, 0.3);
}
.pagination-next-link {
  border-radius: 99em !important;
  background: #fff !important;
  color: #B08D55 !important;
  border: 1px solid #B08D55 !important;
}


/* =====================================================
   サイドバー
   ===================================================== */
.sidebar {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* 見出し */
.sidebar h2, .sidebar h3 {
  background: transparent !important;
  color: #B08D55 !important;
  padding: 0.5em 0 !important;
  /* 飾り罫線 */
  border-bottom: 1px solid #E8D3A2 !important;
  font-family: var(--omj-font-serif) !important;
  text-align: center;
  margin-bottom: 1.5em !important;
  letter-spacing: 0.1em;
}

/* リストアイテム */
.widget_categories ul li a, 
.widget_recent_entries ul li a, 
.widget_archive ul li a,
.widget_meta ul li a {
  background: #fff;
  border: 1px solid var(--omj-border-soft);
  padding: 12px 16px !important;
  transition: all 0.3s;
  border-radius: 12px; /* 少し丸く */
  margin-bottom: 8px;
  color: var(--omj-text-cocoa);
  font-size: 0.9rem;
}
.widget_categories ul li a:hover, 
.widget_recent_entries ul li a:hover {
  background-color: #FFFDF9 !important;
  border-color: #E8D3A2;
  color: #B08D55 !important;
  transform: translateX(3px);
}

/* 検索窓 */
.search-box {
  border: 1px solid #E8D3A2;
  border-radius: 99em;
  padding: 4px 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
input.search-edit {
  border: none !important;
  background: transparent !important;
}
.search-submit {
  color: #C8AA6E !important;
  font-size: 1.1rem;
}


/* =====================================================
   記事詳細 (本文デザイン) - ここが一番大事
   ===================================================== */

/* 記事タイトル */
h1.entry-title {
  font-family: var(--omj-font-serif);
  font-size: 1.7rem;
  color: #5A4D44;
  border-bottom: 1px solid #E8D3A2;
  padding-bottom: 20px;
  margin-bottom: 36px;
  text-align: center; /* タイトルは真ん中がおしゃれ */
  line-height: 1.4;
}

/* --- H2見出し: リボンのような上品なあしらい --- */
.article h2 {
  /* 背景は薄いミルクベージュ */
  background: #FDFBF7 !important;
  color: #6B5D52 !important;
  padding: 1.2em 1.5em !important;
  margin: 4em 0 2.5em !important;
  border: none !important;
  
  /* 下線だけキラッとさせる */
  border-bottom: 2px solid #E8D3A2 !important;
  
  border-radius: var(--omj-radius) !important;
  font-family: var(--omj-font-serif) !important;
  font-size: 1.5rem !important;
  position: relative !important;
  /* ふんわり浮く影 */
  box-shadow: 0 6px 20px rgba(219, 192, 132, 0.15) !important;
}
/* 中央に小さな宝石のようなアクセント */
.article h2::after {
  content: "✦";
  display: block !important;
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  color: #C8AA6E;
  background: #FDFBF7; /* 線を隠すための背景色 */
  padding: 0 10px;
  font-size: 14px;
  line-height: 1;
}
.article h2::before { display: none !important; }


/* --- H3見出し: 左寄せですっきり、上品に --- */
.article h3 {
  background: transparent !important;
  border: none !important;
  /* 左に金の縦ライン */
  border-left: 4px solid #DBC084 !important;
  /* 背景をほんのり色付け */
  background: linear-gradient(to right, #FFFDF9, transparent) !important;
  
  padding: 0.6em 0.8em !important;
  margin: 3em 0 1.5em !important; /* 上下の余白調整 */
  font-size: 1.2rem !important; /* 文字サイズを少し小さく */
  color: #6B5D52 !important;
  text-align: left !important; /* 左寄せに変更 */
  font-weight: 700;
  line-height: 1.5;
}
.article h3::after { display: none !important; } /* 下線装飾を削除 */

/* スマホでの余白を詰める（メディアクエリ外でも効くように調整） */
@media screen and (max-width: 480px){
  .article h2 { margin-top: 2.5em !important; margin-bottom: 1.5em !important; }
  .article h3 { margin-top: 2em !important; margin-bottom: 1em !important; }
}


/* --- H4見出し: シンプルな装飾 --- */
.article h4 {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 2.5em 0 1.2em !important;
  font-size: 1.15rem !important;
  color: #8C7E75 !important;
  display: flex;
  align-items: center;
}
.article h4::before {
  content: ''; 
  display: inline-block;
  width: 6px; height: 6px;
  background: #DBC084;
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 0 3px rgba(219, 192, 132, 0.2); /* 輪っか */
}


/* --- リスト (ul/ol) --- */
.article ul {
  list-style: none !important; 
  padding: 2.5em !important; 
  margin: 2.5em 0 !important;
  background: #fff !important; 
  border: 1px solid #F2ECE4 !important; /* 枠線を薄く */
  border-radius: var(--omj-radius) !important;
  position: relative;
}
/* ちょっとした装飾（テープ） */
.article ul::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 12px;
  background: rgba(232, 211, 162, 0.4); /* マステ風 */
  transform: translateX(-50%) rotate(-2deg);
}

.article ul li {
  position: relative !important; 
  margin-bottom: 0.8em !important; 
  padding-left: 1.5em !important; 
  border: none !important;
}
.article ul li::before {
  content: "✧"; /* 星よりもキラキラ */
  color: #DBC084; 
  position: absolute; left: 0; 
  font-size: 1.2em;
}

/* 番号リスト */
.article ol {
  list-style: none !important; 
  padding: 2.5em !important; 
  margin: 2.5em 0 !important;
  background: #FCFCFA !important; 
  border-radius: var(--omj-radius) !important; 
  border: 1px dashed #E0D5C6 !important; /* 破線で可愛く */
}
.article ol li {
  position: relative !important; 
  margin-bottom: 1em !important; 
  padding-left: 2.5em !important; 
  border: none !important;
}
.article ol li::before {
  counter-increment: list-item; 
  content: counter(list-item);
  color: #B08D55;
  font-family: var(--omj-font-serif);
  font-size: 1.1rem;
  font-style: italic; /* イタリックでおしゃれに */
  position: absolute; left: 0; top: -3px;
  width: 1.5em; text-align: center;
}


/* --- テーブル --- */
.article table {
  width: 100% !important; 
  border-collapse: separate !important; 
  border-spacing: 0 !important;
  border-radius: 12px !important; 
  overflow: hidden !important;
  border: 1px solid #EAE6DF !important;
  margin: 2.5em 0 !important;
}
.article th {
  background: #F2EBE0 !important; /* 濃い金ではなくミルクティー色 */
  color: #6B5D52 !important; 
  padding: 1.2em !important;
  text-align: center !important; 
  border: none !important; 
  font-family: var(--omj-font-serif) !important;
  font-weight: 600;
}
.article td {
  padding: 1.2em !important; 
  background: #fff !important; 
  border: none !important; 
  border-bottom: 1px solid #F5F0EB !important;
}
.article tr:last-child td { border-bottom: none !important; }


/* --- 引用 (Blockquote) --- */
.article blockquote {
  background: #FCFCFC; 
  border: none;
  border-left: 3px solid #E8D3A2;
  padding: 2em;
  margin: 3em 0;
  color: #7A7067;
  font-style: italic;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.article blockquote::before {
  content: "“";
  color: #E8D3A2;
  font-size: 4rem;
  position: absolute; top: 10px; left: 10px;
  line-height: 1; opacity: 0.5;
}


/* --- 囲み枠 (Shortcodes) --- */
/* ポイント（ゴールド） */
.box-gold {
  margin: 3em 0;
  background: #fff;
  border: 1px solid #DBC084;
  border-radius: 16px;
  padding: 2em;
  position: relative;
  box-shadow: 0 4px 15px rgba(219, 192, 132, 0.1);
}
.box-gold-title {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--omj-gold-grad);
  color: #fff;
  padding: 4px 20px;
  border-radius: 99em;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 8px rgba(196, 168, 104, 0.25);
}

/* NG/注意（ピンクグレー） */
.box-warn {
  margin: 3em 0;
  background: #FCF8F8;
  border: 1px dashed #D6ACAC;
  padding: 2em;
  border-radius: 16px;
  color: #755;
  text-align: center;
}

/* -------------------------------------------
   関連記事 (Related Entries)
   ------------------------------------------- */
/* 枠のデザインをメインのカードと合わせる */
.related-entry-card-wrap {
  background-color: #fff;
  border: 1px solid var(--omj-border-soft);
  border-radius: var(--omj-radius);
  box-shadow: 0 4px 10px rgba(219, 180, 160, 0.08);
  transition: all 0.3s ease;
  overflow: hidden; /* 画像の角丸漏れ防止 */
}

/* ホバー時の動き */
.related-entry-card-wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(219, 180, 160, 0.15);
  border-color: #E8D3A2;
  background-color: #FFFDF9; /* ほんのり色づく */
}

/* 関連記事のタイトル */
.related-entry-card-title {
  font-family: var(--omj-font-serif);
  color: var(--omj-text-cocoa);
  font-weight: 500;
  line-height: 1.4;
}
/* --- 関連記事 & 新着記事のデザイン修正 --- */

/* タイトルをゴシック・太字・少し小さく */
.related-entry-card-title,
.widget-entry-card-title {
  font-family: var(--omj-font-sans) !important; /* 丸ゴシック */
  font-weight: 700 !important; /* 太字 */
  font-size: 0.95rem !important; /* 少し小さく */
  line-height: 1.5;
  color: #5A4D44;
}

/* 画像の角を丸くする */
.related-entry-card-thumb img,
.widget-entry-card-thumb img {
  border-radius: 12px !important;
  /* 画像にもほんのり枠線 */
  border: 1px solid #F0E6D8; 
}


/* -------------------------------------------
   前後の記事へのリンク (ページ下部)
   ------------------------------------------- */
/* --- 前後の記事ナビ (画像なし・シンプル) --- */
/* 画像を強制的に消す */
.pager-post-navi .post-navi-card-thumb,
.pager-post-navi img {
  display: none !important;
}

/* リンクボタンの形 */
.pager-post-navi a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 60px; /* 高さを確保 */
  background: #fff !important;
  border: 1px solid var(--omj-border-soft) !important;
  border-radius: 99em !important; /* 楕円形 */
  color: var(--omj-text-cocoa) !important;
  padding: 10px 25px !important;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s;
}
.pager-post-navi a:hover {
  background: #FFFDF9 !important;
  border-color: #E8D3A2 !important;
  color: #B08D55 !important;
}
/* -------------------------------------------
   カルーセル (ヘッダー下のスライド記事)
   ------------------------------------------- */
/* デフォルトの四角を丸く */
.carousel-entry-card-wrap {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* カルーセル内のタイトル背景 */
/* デフォルトの黒い帯を上品なグラデーションに */
.carousel-entry-card-content {
  background: linear-gradient(to top, rgba(107, 93, 82, 0.9) 0%, rgba(107, 93, 82, 0) 100%) !important;
}
.carousel-entry-card-title {
  font-family: var(--omj-font-serif);
}



/* =====================================================
   人気記事 (本文・サイドバー共通) の修正
   ===================================================== */

/* --- 1. 人気記事だけの基本設定 --- */
/* クラス名を限定して、他の「新着記事」などに影響しないようにする */
.widget_popular_entries .a-wrap {
  padding: 0px !important;      /* 内側の余白を小さく */
  margin-bottom: 0px !important; /* カード同士の隙間を詰める */
  min-height: auto !important;   /* 高さが間延びしないように */
  align-items: center;           /* 上下中央揃え */
}

/* --- 2. 画像を小さくする (1〜3位) --- */
.widget_popular_entries .card-thumb {
  width: 110px !important;       /* 120pxから70pxに縮小 */
  margin-right: 0px !important;
  flex-shrink: 0;               /* 画像が潰れないように */
}

.widget_popular_entries .card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;            /* トリミングして綺麗に見せる */
  border-radius: 10px !important;
}

/* タイトル文字サイズもバランスを見て少し小さく */
.widget_popular_entries .card-title {
  font-size: 13px !important;
  line-height: 1.4;
  margin-bottom: 0 !important;
}


/* =====================================================
   ウィジェット：この記事を書いた人 (強制デザイン上書き)
   ===================================================== */

/* 親テーマの横並び(float)を強制解除し、縦積みのカードにする */
#author_box-2 .author-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  
  /* カードのデザイン */
  background-color: #fff !important;
  border: 1px solid #F0E6D8 !important;
  border-radius: 24px !important;
  /* 内側に点線のステッチ装飾 */
  box-shadow: 
    0 4px 20px rgba(219, 192, 132, 0.15),
    inset 0 0 0 5px #fff,
    inset 0 0 0 6px #F5F0EB !important;
  padding: 30px 20px !important;
  margin-bottom: 30px !important;
}

/* 1. 「この記事を書いた人」というラベル */
#author_box-2 .author-widget-name {
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: #998B82;
  margin-bottom: 15px;
  letter-spacing: 0.1em;
  font-weight: bold;
  background: transparent !important; /* 背景色がついている場合除去 */
}

/* 2. プロフィール画像 */
#author_box-2 .author-thumb {
  float: none !important; /* 親テーマの左寄せを無効化 */
  margin: 0 0 15px 0 !important;
  width: auto !important;
}

#author_box-2 .author-thumb img {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  object-fit: cover;
  /* 金色のリング装飾 */
  border: 4px solid #fff !important;
  box-shadow: 0 0 0 1px #DBC084, 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* 3. 文字エリア全体 */
#author_box-2 .author-content {
  float: none !important; /* 親テーマの右寄せを無効化 */
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important; /* 基本は中央揃え */
}

/* 名前 */
#author_box-2 .author-name {
  margin-bottom: 10px !important;
  float: none !important;
  width: 100% !important;
  text-align: center !important;
}
#author_box-2 .author-name a {
  font-family: "Shippori Mincho", serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #5A4D44 !important;
  text-decoration: none !important;
}

/* 自己紹介文 */
#author_box-2 .author-description {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: #6B5D52 !important;
  text-align: left !important; /* 長文なので左揃えで読みやすく */
  margin-top: 15px !important;
  width: 100% !important;
}
#author_box-2 .author-description p {
  margin-bottom: 1em !important;
}
/* 専門分野のところを見やすく */
#author_box-2 .author-description b {
  color: #B08D55;
  display: inline-block;
  margin-bottom: 4px;
}

/* 4. SNSボタンエリア */
#author_box-2 .author-follows {
  width: 100% !important;
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px dashed #E8D3A2 !important; /* 点線で区切る */
  display: flex;
  justify-content: center; /* ボタンを中央寄せ */
  flex-wrap: wrap;
}

/* 「〜をフォローする」の文字を消す（スッキリさせるため） */
#author_box-2 .sns-follow-message {
  display: none !important;
}

/* SNSボタンの装飾 */
#author_box-2 .sns-follow-buttons a {
  width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 18px !important;
  border-radius: 50% !important;
  
  background-color: #fff !important;
  border: 1px solid #DBC084 !important;
  color: #DBC084 !important;
  
  margin: 0 6px 8px !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
}

#author_box-2 .sns-follow-buttons a:hover {
  background-color: #DBC084 !important;
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(219, 192, 132, 0.4) !important;
}

/* アイコンの位置微調整 */
#author_box-2 .sns-follow-buttons a span {
  line-height: 38px !important;
}



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

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

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