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

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


@charset "UTF-8";

/*!
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;
  padding: 0.5em 0 0.5em 0 !important;
  margin: 3em 0 1.5em !important;
  font-size: 1.35rem !important;
  color: #6B5D52 !important;
  position: relative !important;
  text-align: center; /* H3もセンター寄せで雑誌っぽく */
}
/* 下に筆で引いたようなライン */
.article h3::after {
  content: "";
  display: block !important;
  width: 60px;
  height: 3px;
  background: var(--omj-gold-grad);
  margin: 10px auto 0;
  border-radius: 3px;
}
.article h3::before { display: none !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;
}



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

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

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