/*
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;}

/* ============================================
   v8: 記事・一覧にヘッダー(メニュー付き)を表示
   各記事のページタイプが「本文のみ」のため、ヘッダー・パンくず・
   前後記事ナビ・フッターがテーマ側で非表示になっていたのを戻す
   ============================================ */
body.content-only .header-container,
body.content-only .breadcrumb,
body.content-only .under-entry-content,
body.content-only .footer{display:block !important;}
body.content-only .date-tags{display:flex !important;}

/* グローバルメニュー(外観→メニュー「ヘッダーメニュー」) */
#navi,#navi .navi-in,#navi .navi-in > ul{background:#0f1f3e !important;}
#navi{border-top:1px solid rgba(255,255,255,.08);}
#navi .navi-in > ul{justify-content:center;}
#navi .navi-in a{
  color:#fff !important;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  font-weight:700;font-size:.92rem;letter-spacing:.06em;
  position:relative;transition:color .2s;
}
#navi .navi-in a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:8px;height:2px;
  background:#c8a86a;transition:left .25s,right .25s;
}
#navi .navi-in a:hover{color:#e2c891 !important;background:transparent !important;}
#navi .navi-in a:hover::after{left:22%;right:22%;}
#navi .navi-in > ul > li:last-child > a{
  background:#c8a86a !important;color:#0f1f3e !important;border-radius:999px;
  margin:0 0 0 10px;padding:0 20px;line-height:34px;height:34px;
}
#navi .navi-in > ul > li:last-child{display:flex;align-items:center;}
#navi .navi-in > ul > li:last-child > a::after{display:none;}
#navi .navi-in > ul > li:last-child > a:hover{background:#e2c891 !important;}
/* スマホ: 横スクロールのメニュー */
@media screen and (max-width:1023px){
  #navi .navi-in > ul.menu-mobile{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
  #navi .navi-in > ul.menu-mobile::-webkit-scrollbar{display:none;}
  #navi .navi-in > ul.menu-mobile > li{flex:none;}
  #navi .navi-in a{font-size:.8rem;padding:0 12px;}
  #navi .navi-in > ul > li:last-child > a{margin:0 10px;line-height:30px;height:30px;padding:0 14px;}
}
/* フッター(紺で統一) */
body.content-only .footer{background:#0b1633 !important;color:#c9d4e6;}
body.content-only .footer a{color:#c9d4e6 !important;}

/* ---- v8.1: ヘッダーを1行にまとめて常に表示(トップページと同じ追従ヘッダー) ---- */
body.content-only #header-container{position:sticky;top:0;z-index:999;box-shadow:0 4px 16px rgba(4,10,30,.25);}
body.admin-bar.content-only #header-container{top:32px;}
@media screen and (max-width:782px){body.admin-bar.content-only #header-container{top:46px;}}
@media screen and (max-width:600px){body.admin-bar.content-only #header-container{top:0;}}
body.content-only #header-container-in{display:flex;align-items:center;max-width:1240px;margin:0 auto;padding:0 20px;}
body.content-only #header{flex:none;padding:0 !important;background:transparent !important;}
body.content-only #header-in{display:flex;align-items:center;width:auto;max-width:none;padding:0;}
body.content-only #header .tagline{display:none;}
body.content-only #header .logo-header{margin:0;padding:0;}
body.content-only #header .site-name-text{font-size:1.35em;}
body.content-only #navi{flex:1;min-width:0;border-top:none;background:transparent !important;}
body.content-only #navi .navi-in,body.content-only #navi .navi-in > ul{background:transparent !important;}
body.content-only #navi .navi-in{width:auto;max-width:none;}
body.content-only #navi .navi-in > ul.menu-pc{justify-content:flex-end;}
body.content-only #navi .navi-in > ul > li{width:auto;}
body.content-only #navi .navi-in a{padding:0 16px;}
/* スマホ: ロゴの下にメニュー(横スクロール)を1段 */
@media screen and (max-width:1023px){
  body.content-only #header-container-in{flex-direction:column;align-items:stretch;padding:0;}
  body.content-only #header{padding:10px 16px 2px !important;}
  body.content-only #header .site-name-text{font-size:1.15em;}
  body.content-only #navi .navi-in > ul.menu-mobile{justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);}
}

/* ============================================
   v9: 記事・一覧のヘッダーをトップページと同じデザインに統一
   (functions.php が共通ヘッダーを出力。Cocoon標準ヘッダーは非表示)
   ============================================ */
body.rl-has-hd #header-container{display:none !important;}
/* ===== 共通ヘッダー(トップページと同じデザイン) ===== */
.rl-hd{position:sticky;top:0;z-index:1000;width:100%;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(19,39,66,.08);box-shadow:0 10px 30px rgba(8,19,33,.06);font-family:"Noto Sans JP",sans-serif;line-height:1.5;}
body.admin-bar .rl-hd{top:32px;}
@media screen and (max-width:782px){body.admin-bar .rl-hd{top:46px;}}
@media screen and (max-width:600px){body.admin-bar .rl-hd{top:0;}}
.rl-hd *,.rl-hd *::before,.rl-hd *::after{box-sizing:border-box;}
.rl-hd a{text-decoration:none !important;}
.rl-hd-in{width:min(1240px,calc(100% - 56px));margin:0 auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.rl-brand{display:flex;align-items:center;gap:15px;min-width:0;}
.rl-brand-logo{width:72px;height:72px;flex:0 0 auto;display:block;}
.rl-brand-logo img{width:100%;height:100%;object-fit:contain;display:block;max-width:none;}
.rl-brand-text{display:block;min-width:0;}
.rl-brand-name{display:block;font-size:18px;line-height:1.2;font-weight:800;letter-spacing:.08em;color:#081321;}
.rl-brand-sub{display:block;margin-top:4px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8190a6;}
.rl-nav{display:flex;align-items:center;gap:30px;margin-left:auto;}
.rl-hd .rl-nav a{position:relative;padding:8px 0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#132742;white-space:nowrap;}
.rl-hd .rl-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:#132742;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1);}
.rl-hd .rl-nav a:hover::after,.rl-hd .rl-nav a.is-current::after{transform:scaleX(1);}
.rl-hd .rl-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid #132742;color:#132742;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:all .3s cubic-bezier(.22,1,.36,1);white-space:nowrap;border-radius:0;}
.rl-hd .rl-cta:hover{background:#132742;color:#fff;}
.rl-toggle{display:none;width:46px;height:46px;border:none;background:transparent;position:relative;cursor:pointer;flex:0 0 auto;padding:0;}
.rl-toggle span{position:absolute;left:10px;width:26px;height:1.5px;background:#132742;transition:.3s cubic-bezier(.22,1,.36,1);}
.rl-toggle span:nth-child(1){top:15px;}.rl-toggle span:nth-child(2){top:22px;}.rl-toggle span:nth-child(3){top:29px;}
.rl-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.rl-toggle.open span:nth-child(2){opacity:0;}
.rl-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.rl-panel{position:absolute;top:100%;left:20px;right:20px;background:#fff;border:1px solid #d3dce8;box-shadow:0 24px 60px rgba(8,19,33,.08);opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s cubic-bezier(.22,1,.36,1);z-index:999;}
.rl-panel.active{opacity:1;visibility:visible;transform:none;}
.rl-hd .rl-mnav{display:block;}
.rl-hd .rl-mnav a{display:block;padding:15px 22px;border-top:1px solid #d3dce8;color:#132742;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.rl-hd .rl-mnav a:first-child{border-top:none;}
.rl-hd .rl-mnav a.is-current{background:#f6f8fb;}
.rl-hd .rl-mcontact{display:block;margin:18px 22px 22px;padding:14px 16px;border:1px solid #132742;text-align:center;color:#132742;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
@media (max-width:1100px){.rl-nav,.rl-hd .rl-cta{display:none;}.rl-toggle{display:inline-block;}}
@media (max-width:767px){.rl-hd-in{min-height:76px;width:calc(100% - 40px);}}
@media (max-width:420px){.rl-brand-sub{font-size:9px;letter-spacing:.1em;white-space:nowrap;}.rl-brand{gap:12px;}}