/*
Theme Name: Cocoon Child
Description: Cocoon child theme
Theme URI: https://wp-cocoon.com/
Author: yhira
Author URI: https://wp-cocoon.com/
Template: cocoon-master
Version: 1.1.3
*/
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&display=swap");

/************************************
** 子テーマ用のスタイル
************************************/

/* ============================================
   ブログ記事 上部デザイン(RLead)
   対象: 記事タイトル / カテゴリラベル / 目次
   ============================================ */

/* 記事タイトル: 明朝×紺+金のアンダーライン */
.article h1.entry-title{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  font-weight:800;
  color:#12213e;
  font-size:1.7em;
  line-height:1.45;
  padding:0 0 18px;
  margin-bottom:20px;
  position:relative;
  border-bottom:1px solid #e3e6ee;
}
.article h1.entry-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:86px;
  height:3px;
  background:linear-gradient(90deg,#a8813f,#d9bc7f);
}

/* アイキャッチ上のカテゴリラベル: 紺×金 */
.cat-label{
  background:#12213e !important;
  color:#fff !important;
  border:1px solid #c8a86a !important;
  border-radius:4px;
  font-weight:600;
  letter-spacing:.06em;
}

/* 投稿日: 控えめなグレー */
.date-tags{color:#8a93a5;}

/* 目次: 白カード+金アクセント */
.toc{
  max-width:680px;
  margin:2em auto;
  background:#fff;
  border:1px solid #dfe4ec !important;
  border-radius:12px;
  box-shadow:0 4px 16px rgba(18,33,62,.07);
  padding:22px 28px 18px;
}
.toc .toc-title{
  display:block;
  text-align:center;
  font-weight:700;
  color:#12213e;
  font-size:1.05em;
  letter-spacing:.14em;
  margin-bottom:10px;
}
.toc .toc-title::before{content:"― ";color:#c8a86a;}
.toc .toc-list{margin:0;padding:0 0 0 1.5em;}
.toc .toc-list>li{
  margin:.45em 0;
  padding:0 0 .45em;
  border-bottom:1px dashed #e8ebf2;
}
.toc .toc-list>li:last-child{border-bottom:none;padding-bottom:0;}
.toc a{color:#1a3a6b !important;text-decoration:none;font-weight:600;}
.toc a:hover{color:#c8a86a !important;}
.toc .toc-list>li::marker{color:#c8a86a;font-weight:700;}

/* 投稿ページ: WPの背景画像(空)を隠してフラットな背景に */
body.single.custom-background{
  background:#f2f4f8 !important;
  background-image:none !important;
}

/* ============================================
   Q&A 知恵袋風デザイン (RLead)
   対象: 投稿内 .rlc-faq-q / .rlc-faq-a
   ============================================ */
.rlc p.rlc-faq-q{
  position:relative;
  margin:2.2em 0 0;
  padding:42px 18px 16px 66px;
  background:#fff;
  color:#1c2a45;
  font-weight:700;
  font-size:1.02em;
  line-height:1.7;
  border:1px solid #e3e6ee;
  border-left:1px solid #e3e6ee;
  border-bottom:none;
  border-radius:12px 12px 0 0;
  box-shadow:0 2px 10px rgba(18,33,62,.05);
}
.rlc p.rlc-faq-q::before{
  content:"Q";
  position:absolute;left:14px;top:12px;
  width:38px;height:38px;border-radius:50%;
  background:#12213e;color:#fff;
  font-weight:800;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
.rlc p.rlc-faq-q::after{
  content:"相談者さんからの質問";
  position:absolute;left:66px;top:15px;
  font-size:.72rem;font-weight:600;color:#8a93a5;letter-spacing:.05em;
}
.rlc p.rlc-faq-a{
  position:relative;
  margin:0 0 2.2em;
  padding:48px 18px 18px 66px;
  background:#fbf8f1;
  border:1px solid #eadfc4;
  border-top:1px dashed #e0d3b2;
  border-radius:0 0 12px 12px;
  line-height:1.9;
  box-shadow:0 2px 10px rgba(18,33,62,.05);
}
.rlc p.rlc-faq-a::before{
  content:"A";
  position:absolute;left:14px;top:14px;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#a8813f,#d9bc7f);color:#fff;
  font-weight:800;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
.rlc p.rlc-faq-a::after{
  content:"\2713 RLeadスタッフの回答";
  position:absolute;left:66px;top:16px;
  background:#12213e;color:#d9bc7f;
  padding:2px 12px;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.04em;
}

/* 記事のリード文(最初の段落): 導入カード */
.rlc > p:first-child{
  position:relative;
  max-width:760px;
  margin:1.8em auto 2.2em;
  padding:26px 26px 24px 30px;
  background:#fff;
  border:1px solid #e3e6ee;
  border-left:5px solid #c8a86a;
  border-radius:0 12px 12px 0;
  font-size:1.02em;
  line-height:2.05;
  color:#33415e;
  box-shadow:0 3px 14px rgba(18,33,62,.06);
}
.rlc > p:first-child::before{
  content:"\201C";
  position:absolute;right:14px;top:-6px;
  font-family:Georgia,serif;
  font-size:4.2em;line-height:1;font-weight:700;
  color:rgba(200,168,106,.28);
}

/* まとめの結論文(最後のh2直後の段落): POINTカード */
.rlc h2:last-of-type + p{
  position:relative;
  max-width:760px;
  margin:1.6em auto 2.4em;
  padding:34px 28px 28px;
  background:linear-gradient(160deg,#fdfaf3,#f7efdd);
  color:#12213e;
  border:1.5px solid #c8a86a;
  border-radius:14px;
  box-shadow:0 6px 20px rgba(18,33,62,.10);
  font-size:1.08em;
  font-weight:700;
  line-height:2;
  text-align:center;
}
.rlc h2:last-of-type + p::before{
  content:"\2726 POINT \2726";
  position:absolute;top:-13px;left:50%;
  transform:translateX(-50%);
  background:#12213e;
  color:#d9bc7f;
  border:1px solid #c8a86a;
  font-size:.72rem;font-weight:800;letter-spacing:.22em;
  padding:4px 18px;border-radius:999px;
  white-space:nowrap;
}

/* ============================================
   記事一覧(カテゴリアーカイブ)デザイン
   ============================================ */
body.archive.custom-background{
  background:#f2f4f8 !important;
  background-image:none !important;
}
h1.archive-title{
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  font-weight:800;
  color:#12213e;
  font-size:1.6em;
  padding:0 0 14px;
  margin:10px 0 26px;
  position:relative;
  border-bottom:1px solid #e3e6ee;
}
h1.archive-title::after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:86px;height:3px;
  background:linear-gradient(90deg,#a8813f,#d9bc7f);
}
h1.archive-title .fa{color:#c8a86a;}
.entry-card-wrap{
  background:#fff;
  border:1px solid #e3e6ee !important;
  border-radius:14px;
  padding:14px;
  margin-bottom:18px;
  box-shadow:0 4px 14px rgba(18,33,62,.07);
  transition:transform .2s ease,box-shadow .2s ease;
}
.entry-card-wrap:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(18,33,62,.14);
}
.entry-card-thumb{border-radius:10px;overflow:hidden;}
.entry-card-title{color:#12213e !important;font-weight:700;}
.entry-card-snippet{display:none;}
.entry-card-meta,.post-date{color:#8a93a5;}

/* パンくずリスト(記事→一覧への導線) */
.breadcrumb{
  font-size:.82rem;
  color:#8a93a5;
  margin:6px 0 14px;
}
.breadcrumb a{color:#1a3a6b;text-decoration:none;}
.breadcrumb a:hover{color:#c8a86a;}

/* ============================================
   記事・一覧ページ共通ヘッダー(Cocoonヘッダー)
   紺×金のコーポレートトーンに統一
   ============================================ */
#header-container{border-bottom:3px solid #c8a86a;}
#header-container,#header-container-in,#header,
.header-container,.header-container-in,.header,.header-in{
  background:#0f1f3e !important;
  background-image:none !important;
}
#header{padding:20px 0 !important;}
.header{height:auto !important;min-height:0 !important;}
#header .site-name{padding:0 !important;}
#header .site-name-text{
  color:#fff !important;
  font-family:"M PLUS Rounded 1c",sans-serif;
  font-weight:800;
  letter-spacing:.06em;
  font-size:1.5em;
}
.tagline{color:#c9d4e6 !important;}

/* 記事・一覧のサイドバー(空)を非表示にして全幅に */
.sidebar{display:none !important;}
.main{width:100% !important;}