@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.1
*/

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ============================================
   SUNSETCRUZU — Navy × Warm カスタムCSS
   Cocoon Child テーマ style.css に追記
   ============================================ */

/* --- Google Fonts 読み込み --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');

/* ============================================
   0. CSS変数（カラーパレット）
   ============================================ */
:root {
  --sc-navy: #1a2f4a;
  --sc-navy-light: #2a4a6a;
  --sc-navy-dark: #0f1f33;
  --sc-gold: #c5944a;
  --sc-gold-light: #d4af55;
  --sc-gold-muted: #b89d5a;
  --sc-ivory: #f5f3ee;
  --sc-ivory-dark: #eae7df;
  --sc-white: #fff;
  --sc-text: #2a2a2a;
  --sc-text-muted: #777;
  --sc-text-light: #999;
  --sc-border: #ddd8ce;
  --sc-serif: 'Noto Serif JP', Georgia, 'YuMincho', 'Yu Mincho', serif;
}

/* ============================================
   1. 全体ベース
   ============================================ */
body {
  background-color: var(--sc-ivory) !important;
  color: var(--sc-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  line-height: 1.8;
}

/* コンテンツ幅の最大値 */
.wrap {
  max-width: 1160px;
}

/* ============================================
   2. ヘッダー
   ============================================ */
.header,
#header {
  background-color: var(--sc-navy) !important;
  border-bottom: 3px solid var(--sc-gold) !important;
}

.header-in {
  padding: 20px 0 16px;
}

/* サイトタイトル */
.site-name-text,
.header .site-name-text a {
  font-family: var(--sc-serif) !important;
  color: var(--sc-ivory) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: 4px !important;
}

/* キャッチフレーズ */
.tagline,
#header .tagline {
  color: rgba(245, 243, 238, 0.4) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
}

/* ============================================
   3. グローバルナビ
   ============================================ */
.navi,
#navi {
  background-color: var(--sc-navy-dark) !important;
  border: none !important;
}

.navi-in > ul > li > a,
#navi .navi-in a {
  color: rgba(245, 243, 238, 0.65) !important;
  font-size: 12px !important;
  letter-spacing: 1.5px !important;
  padding: 12px 20px !important;
  transition: color 0.3s ease;
}

.navi-in > ul > li > a:hover,
#navi .navi-in a:hover {
  color: var(--sc-gold-light) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 現在ページのナビ */
.navi-in > ul > .current-menu-item > a {
  color: var(--sc-gold-light) !important;
  border-bottom: 2px solid var(--sc-gold) !important;
}

/* ドロップダウン */
.navi-in > ul .sub-menu {
  background-color: var(--sc-navy) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.navi-in > ul .sub-menu li a {
  color: rgba(245, 243, 238, 0.6) !important;
  font-size: 12px !important;
}

.navi-in > ul .sub-menu li a:hover {
  color: var(--sc-gold-light) !important;
}

/* ============================================
   4. メインコンテンツエリア
   ============================================ */
.main {
  background: transparent;
}

/* ============================================
   5. 記事カード（トップ一覧）
   ============================================ */
.entry-card-wrap {
  border-radius: 8px !important;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entry-card-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(26, 47, 74, 0.08);
}

.entry-card {
  background: var(--sc-white) !important;
  border: 0.5px solid var(--sc-border) !important;
  border-radius: 8px !important;
}

/* カードタイトル */
.entry-card-title,
.card-title {
  font-family: var(--sc-serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--sc-text) !important;
  line-height: 1.7 !important;
}

/* カード内スニペット */
.entry-card-snippet {
  color: var(--sc-text-muted) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* カード日付 */
.entry-date,
.post-date,
.entry-card .post-date {
  color: var(--sc-text-light) !important;
  font-size: 11px !important;
}

/* カテゴリラベル */
.cat-label {
  background-color: var(--sc-navy) !important;
  color: var(--sc-ivory) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  border-radius: 2px !important;
  padding: 2px 10px !important;
}

/* 特定カテゴリのアクセントカラー */
.cat-label.cat-investment,
.cat-label[style*="background-color"] {
  /* Cocoon設定でカテゴリ色を個別指定してもOK */
}

/* ============================================
   6. 記事本文
   ============================================ */
.article {
  background: var(--sc-white) !important;
  border: 0.5px solid var(--sc-border) !important;
  border-radius: 8px !important;
  padding: 40px !important;
}

/* 記事タイトル */
.entry-title,
.article h1 {
  font-family: var(--sc-serif) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: var(--sc-text) !important;
  line-height: 1.6 !important;
  border: none !important;
  padding-bottom: 16px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--sc-border) !important;
}

/* H2 見出し — 既存のネイビー配色を維持・洗練 */
.article h2 {
  font-family: var(--sc-serif) !important;
  background: var(--sc-navy) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  padding: 14px 24px !important;
  border-radius: 4px !important;
  border: none !important;
  border-left: 4px solid var(--sc-gold) !important;
  margin: 40px 0 24px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.5px !important;
}

/* H3 見出し */
.article h3 {
  font-family: var(--sc-serif) !important;
  background: var(--sc-navy) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  border-radius: 3px !important;
  border: none !important;
  margin: 32px 0 16px !important;
  line-height: 1.6 !important;
}

/* H4 見出し */
.article h4 {
  font-family: var(--sc-serif) !important;
  color: var(--sc-navy) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  border-bottom: 2px solid var(--sc-gold) !important;
  padding-bottom: 8px !important;
  margin: 28px 0 14px !important;
}

/* 本文 */
.article p {
  line-height: 2.0 !important;
  margin-bottom: 1.5em !important;
}

/* 引用 */
.article blockquote {
  background: var(--sc-ivory) !important;
  border-left: 4px solid var(--sc-gold-muted) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 20px 24px !important;
  color: var(--sc-text-muted) !important;
  font-family: var(--sc-serif);
}

/* テーブル */
.article table {
  border-collapse: collapse;
}

.article table th {
  background: var(--sc-navy) !important;
  color: #fff !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
}

.article table td {
  padding: 10px 16px !important;
  border-color: var(--sc-border) !important;
  font-size: 14px !important;
}

.article table tr:nth-child(even) {
  background: var(--sc-ivory) !important;
}

/* ============================================
   7. 目次 (TOC)
   ============================================ */
.toc {
  background: var(--sc-ivory) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 8px !important;
  padding: 24px !important;
}

.toc-title {
  font-family: var(--sc-serif) !important;
  color: var(--sc-navy) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-align: center;
  margin-bottom: 12px !important;
}

.toc a {
  color: var(--sc-text) !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.toc a:hover {
  color: var(--sc-gold) !important;
}

/* ============================================
   8. サイドバー
   ============================================ */
.sidebar {
  background: transparent;
}

.widget {
  background: var(--sc-white) !important;
  border: 0.5px solid var(--sc-border) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

/* ウィジェットタイトル */
.widget-title,
.widget_title {
  font-family: var(--sc-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--sc-navy) !important;
  border-bottom: 2px solid var(--sc-gold) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* サイドバー記事リスト */
.widget .entry-card-title {
  font-size: 13px !important;
}

/* プロフィールウィジェット */
.author-box {
  background: var(--sc-white) !important;
  border: 0.5px solid var(--sc-border) !important;
  border-radius: 8px !important;
}

.author-name {
  font-family: var(--sc-serif) !important;
}

/* ============================================
   9. ページネーション
   ============================================ */
.pagination .page-numbers {
  border: 0.5px solid var(--sc-border) !important;
  color: var(--sc-text-muted) !important;
  border-radius: 4px !important;
  transition: all 0.2s ease;
}

.pagination .page-numbers:hover {
  background: var(--sc-navy) !important;
  color: #fff !important;
  border-color: var(--sc-navy) !important;
}

.pagination .current {
  background: var(--sc-navy) !important;
  color: #fff !important;
  border-color: var(--sc-navy) !important;
}

/* ============================================
   10. フッター
   ============================================ */
.footer,
#footer {
  background-color: var(--sc-navy) !important;
  border-top: 3px solid var(--sc-gold) !important;
}

.footer-in {
  color: rgba(245, 243, 238, 0.5) !important;
  padding: 32px 0 !important;
}

.footer a {
  color: rgba(245, 243, 238, 0.6) !important;
  transition: color 0.2s;
}

.footer a:hover {
  color: var(--sc-gold-light) !important;
}

.copyright {
  color: rgba(245, 243, 238, 0.35) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}

/* フッターナビ */
.footer-bottom-menu a {
  color: rgba(245, 243, 238, 0.5) !important;
  font-size: 12px !important;
}

/* ============================================
   11. リンク・ボタン
   ============================================ */
a {
  color: var(--sc-navy-light);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--sc-gold);
}

/* 続きを読むボタン */
.entry-read a,
.more-link {
  color: var(--sc-navy) !important;
  border: 1px solid var(--sc-navy) !important;
  border-radius: 4px !important;
  padding: 8px 20px !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  transition: all 0.2s ease !important;
}

.entry-read a:hover,
.more-link:hover {
  background: var(--sc-navy) !important;
  color: #fff !important;
}

/* ============================================
   12. パンくずリスト
   ============================================ */
.breadcrumb {
  font-size: 12px !important;
  color: var(--sc-text-light) !important;
  padding: 12px 0 !important;
}

.breadcrumb a {
  color: var(--sc-text-muted) !important;
}

/* ============================================
   13. SNSシェアボタン
   ============================================ */
.ss-top .sns-share-message,
.ss-bottom .sns-share-message {
  font-family: var(--sc-serif) !important;
  color: var(--sc-text-muted) !important;
}

/* ============================================
   14. アピールエリア / CTA
   ============================================ */
.appeal {
  background: var(--sc-navy) !important;
}

.appeal-title {
  font-family: var(--sc-serif) !important;
  color: var(--sc-ivory) !important;
  letter-spacing: 2px !important;
}

.appeal-btn {
  background: var(--sc-gold) !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
}

/* ============================================
   15. モバイル対応
   ============================================ */
@media screen and (max-width: 834px) {
  .article {
    padding: 24px 16px !important;
  }

  .article h2 {
    font-size: 18px !important;
    padding: 12px 16px !important;
  }

  .article h3 {
    font-size: 15px !important;
    padding: 8px 14px !important;
  }

  .entry-title,
  .article h1 {
    font-size: 22px !important;
  }

  .site-name-text,
  .header .site-name-text a {
    font-size: 20px !important;
    letter-spacing: 2px !important;
  }

  .navi-in > ul > li > a {
    padding: 10px 14px !important;
  }
}

@media screen and (max-width: 480px) {
  .article h2 {
    font-size: 16px !important;
    padding: 10px 14px !important;
    margin: 32px 0 16px !important;
  }

  .article h3 {
    font-size: 14px !important;
  }
}

/* ============================================
   16. その他の細部調整
   ============================================ */

/* スクロールバー（Chrome/Edge） */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sc-ivory);
}

::-webkit-scrollbar-thumb {
  background: var(--sc-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sc-text-light);
}

/* 選択テキスト */
::selection {
  background: var(--sc-navy);
  color: #fff;
}

/* 画像角丸（記事内） */
.article img {
  border-radius: 4px;
}

/* タグ */
.tag-link,
.tagcloud a {
  background: var(--sc-ivory) !important;
  border: 0.5px solid var(--sc-border) !important;
  color: var(--sc-text-muted) !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  transition: all 0.2s;
}

.tag-link:hover,
.tagcloud a:hover {
  background: var(--sc-navy) !important;
  color: #fff !important;
  border-color: var(--sc-navy) !important;
}

/* 関連記事セクション */
.related-entries {
  background: var(--sc-ivory) !important;
  border-radius: 8px !important;
  padding: 24px !important;
}

.related-entry-heading {
  font-family: var(--sc-serif) !important;
  color: var(--sc-navy) !important;
  border: none !important;
  border-bottom: 2px solid var(--sc-gold) !important;
  padding-bottom: 8px !important;
}

/*  lazyload  */
.card-thumb img.lazyload {
	  display: block !important;
	  visibility: hidden;
}
.card-thumb img.lazyloaded,
.card-thumb img.lazyloading {
	  visibility: visible;
}

/* --- サイドバーウィジェットタイトル文字色修正（暗背景対応） --- */
.sidebar h3.widget-title,
h3.widget-sidebar-title {
  color: #ffffff !important;
}


/* --- FIREシミュレーター 1列レイアウト（PC・スマホ共通） --- */
.sfs-layout {
  grid-template-columns: 1fr !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

.sfs-root {
  max-width: 720px !important;
  margin: 0 auto !important;
}

.sfs-result-panel {
  width: 100% !important;
}

.sfs-input-panel {
  position: static !important;
}

}
}

/* =============================================
 *    FIRE PC2
 *    ============================================= */

/* PC (835px): 2 */
@media screen and (min-width: 835px) {
	
	  /*  */
	.footer-widgets {
		    flex-direction: column !important;
	}
	
	  /*  */
	  .footer-left,
	.footer-right {
		    display: none !important;
	}
	
	  /*  */
	.footer-center {
		    flex: 0 0 100% !important;
		    width: 100% !important;
		    max-width: 100% !important;
		    padding: 0 !important;
	}
	
	  /* sfs-root */
	.sfs-root {
		    max-width: 100% !important;
		    width: 100% !important;
		    margin: 0 !important;
		    border-radius: 0 !important;
		    border-left: none !important;
		    border-right: none !important;
	}
	
	  /*  */
	.sfs-header {
		    padding: 24px 40px !important;
	}
	
	  /* 2 */
	.sfs-layout {
		    display: grid !important;
		    grid-template-columns: 400px 1fr !important;
		    gap: 0 !important;
		    max-width: 100% !important;
		    padding: 0 !important;
		    align-items: start !important;
	}
	
	  /* :  */
	.sfs-input-panel {
		    position: sticky !important;
		    top: 20px !important;
		    border-right: 1px solid #ddd8ce !important;
		    padding: 28px 32px !important;
	}
	
	  /* :  */
	.sfs-result-panel {
		    width: 100% !important;
		    padding: 28px 32px !important;
	}
	
	  /*  */
	.sfs-footer {
		    padding: 16px 40px !important;
	}
}
	}
	}
	}
	}
	}
	}
	}
	}
	}
}