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

/* ============================================================
   QUIET CONFIDENCE v1 — 軽貨物開業ナビ (kuro) 統一デザイン
   方針: 温かい下地 / ほぼモノクロ / アクセント=エバーグリーン1色のみ
   旧ブルー(#1565c0)系を置換。撤回はこのファイルをバックアップに戻すのみ。
   Marker: QC-V1
   ============================================================ */

:root{
  --canvas:#faf9f6; --paper:#ffffff; --surface:#f4f2ec; --surface-2:#ece8df;
  --line:#e8e3d9; --line-2:#d8d2c6;
  --ink:#221f1b; --ink-2:#524d45; --muted:#8a8478; --faint:#b3ac9e;
  --accent:#2b4c78; --accent-2:#21395b; --accent-soft:#eef2f8; --accent-line:#ccd8e8;
  --cta:#d9772f; --cta-2:#bf6526;
  --r:10px; --r-lg:14px;
}

/* ---- 全体下地・タイポ ---- */
body.page-body,
body{ background:var(--canvas) !important; color:var(--ink-2);
  font-family:"Inter","Hiragino Kaku Gothic ProN","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased; }
#container, #content, .main, #main{ background:transparent !important; }
.article, #main .post, .entry-content{ color:var(--ink-2); }
a{ color:var(--accent-2); }

/* ============================================================
   ヘッダー / ナビ — 旧ダークネイビーをやめ、清潔な白＋エバーグリーン
   ============================================================ */
#header, .header-container, #header-in{ background:#ffffff !important; box-shadow:none !important; border-bottom:1px solid var(--line) !important; }
#header .site-name-text a, #header .site-name-text, .site-name-text a{ color:var(--ink) !important; font-weight:800 !important; letter-spacing:-.01em; }
#header .tagline, .tagline{ color:var(--muted) !important; }

#navi{ background:#ffffff !important; border-top:1px solid var(--line) !important; }
#navi .navi-in > ul > li > a{ color:var(--ink-2) !important; font-weight:500 !important; }
#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li.current-menu-item > a{
  background:var(--accent-soft) !important; color:var(--accent-2) !important;
}
.navi-in > ul > li > ul{ border-top:2px solid var(--accent) !important; }

/* ============================================================
   本文タイポグラフィ
   ============================================================ */
.entry-content{ max-width:760px !important; margin-left:auto !important; margin-right:auto !important; }
.entry-content p, .entry-content li{
  line-height:1.95 !important; font-size:16.5px !important; letter-spacing:.02em !important;
  color:var(--ink-2) !important;
}
.entry-content p{ margin-bottom:1.5em !important; }
.entry-content strong{ color:var(--ink) !important; font-weight:700 !important; }
.entry-content a{ color:var(--accent-2) !important; border-bottom:1px solid var(--accent-line); }
.entry-content a:hover{ background:var(--accent-soft); }

/* 見出し: 塗り枠をやめ、アクセント下線ティックのエディトリアル様式 */
.entry-content h2{
  position:relative; background:none !important; border:none !important;
  border-bottom:1px solid var(--line) !important;
  padding:0 0 .5rem 0 !important; margin:2.6em 0 1em !important;
  color:var(--ink) !important; font-weight:800 !important; font-size:24px !important; line-height:1.45 !important; letter-spacing:-.01em;
}
.entry-content h2::after{ content:""; position:absolute; left:0; bottom:-1px; width:46px; height:2px; background:var(--accent); }
.entry-content h3{
  background:none !important; border:none !important; border-left:3px solid var(--accent) !important;
  padding:.1em 0 .1em .7em !important; margin:2em 0 .7em !important;
  color:var(--ink) !important; font-weight:700 !important; font-size:19px !important;
}
.entry-content h4{ color:var(--ink) !important; }

/* 画像: 中央寄せ・幅60%（既存仕様を踏襲） */
.entry-content img{ max-width:60% !important; height:auto !important; display:block !important; margin:1.4em auto !important; border-radius:8px; }
.entry-content figure{ max-width:62% !important; margin:1.4em auto !important; }
.entry-content figcaption{ color:var(--muted) !important; font-size:13px !important; text-align:center; }

/* ============================================================
   テーブル — ヘアライン基調・サチュレーション無し
   ============================================================ */
.entry-content table{ border-collapse:separate !important; border-spacing:0 !important; width:100% !important; min-width:400px;
  border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; overflow:hidden; font-size:15px !important; margin:1.8em 0 !important; }
.entry-content th, .entry-content td{
  padding:13px 16px !important; border:none !important; border-bottom:1px solid var(--line) !important; text-align:left !important; line-height:1.7 !important;
}
.entry-content thead th, .entry-content th{
  background:var(--surface) !important; color:var(--ink) !important; font-weight:700 !important; font-size:13.5px !important; border-bottom:1px solid var(--line-2) !important;
}
.entry-content tr:nth-child(even) td{ background:var(--paper) !important; }
.entry-content tbody tr:hover td{ background:var(--surface) !important; }
.entry-content table tr:last-child td{ border-bottom:none !important; }

/* 引用 */
.entry-content blockquote{
  border-left:3px solid var(--accent) !important; background:var(--surface) !important;
  padding:14px 20px !important; margin:1.8em 0 !important; border-radius:0 !important; color:var(--ink-2) !important; font-style:normal !important;
}

/* ============================================================
   目次 (TOC)
   ============================================================ */
.toc, .toc-box{ background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--r) !important; }
.toc-title{ color:var(--ink) !important; font-weight:700 !important; }
.toc a{ color:var(--ink-2) !important; }
.toc a:hover{ color:var(--accent-2) !important; }
.toc-list li::before{ color:var(--accent) !important; }

/* ============================================================
   Cocoon カラーボックス/ラベル/マーカーの色数を抑制
   （多色 → エバーグリーン系 + ニュートラルに収れん）
   ============================================================ */
/* 各種ボックス枠を淡いトーンへ */
.entry-content .blank-box,
.entry-content .information-box, .entry-content .info-box,
.entry-content .question-box, .entry-content .memo-box{
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--r) !important; color:var(--ink-2) !important;
}
.entry-content .ok-box, .entry-content .good-box{ background:var(--accent-soft) !important; border:1px solid var(--accent-line) !important; }
.entry-content .alert-box, .entry-content .caution-box, .entry-content .bad-box{
  background:#f8f1e3 !important; border:1px solid #e7d6b4 !important; color:#7a5a1c !important;
}
/* Cocoon マーカー（蛍光）→ エバーグリーンの極淡下線マーカーに統一 */
.entry-content .marker, .entry-content .marker-under,
.entry-content [class*="marker"]{
  background:linear-gradient(transparent 62%, var(--accent-soft) 62%) !important; color:inherit !important;
}
/* Cocoon 吹き出し（balloon）をニュートラルに */
.entry-content .speech-balloon .speech-person, .wc-balloon-box .wc-balloon{
  border-color:var(--line-2) !important;
}
.entry-content .speech-wrap .speech-balloon, .wc-balloon{
  background:var(--paper) !important; border:1px solid var(--line-2) !important; border-radius:14px !important; color:var(--ink-2) !important;
}

/* インライン装飾色（記事内 style="" の派手色）を沈静化（背景のみ・テキストは温存） */
.entry-content [style*="background:#e95295"], .entry-content [style*="background:#ea5506"],
.entry-content [style*="background:#f39800"], .entry-content [style*="background:#e60033"],
.entry-content [style*="background:#c3d825"], .entry-content [style*="background:#8bc34a"],
.entry-content [style*="background:#ffc107"], .entry-content [style*="background:#ffd900"]{
  background:var(--accent) !important; color:#fff !important;
}
.entry-content [style*="background:#fdf2f2"], .entry-content [style*="background:#fff7cc"],
.entry-content [style*="background:#ebf8f4"], .entry-content [style*="background:#f3fafe"]{
  background:var(--surface) !important;
}

/* ============================================================
   CTA / ボタン — 静かなカード + 単一アクセント（購入はAmazon橙）
   ============================================================ */
.entry-content .wp-block-button__link,
.entry-content a.btn, .entry-content a.button{
  background:var(--accent) !important; color:#fff !important; border:none !important;
  border-radius:var(--r) !important; font-weight:700 !important; box-shadow:0 4px 14px -4px var(--accent-line) !important;
}
.entry-content a[href*="amzn"], .entry-content a[href*="amazon."]{ /* Amazon系リンクボタンは橙（ボタン状のもののみ想定） */ }
.entry-content a.btn[href*="amzn"], .entry-content a.button[href*="amzn"]{ background:var(--cta) !important; }
/* 既存インライン緑CTA (#1b5e20系) をブランド緑に統一 */
.entry-content a[style*="background:#1b5e20"], .entry-content a[style*="background:#2e7d32"]{
  background:var(--accent) !important; color:#fff !important; border-radius:var(--r) !important;
}

/* ============================================================
   記事カード（一覧・関連）
   ============================================================ */
.a-wrap{ border:1px solid var(--line) !important; border-radius:var(--r-lg) !important; box-shadow:none !important; overflow:hidden; transition:border-color .15s, transform .15s, box-shadow .15s; }
.a-wrap:hover{ border-color:var(--line-2) !important; transform:translateY(-2px); box-shadow:0 10px 30px -16px rgba(34,31,27,.25) !important; }
.a-title, .entry-card-title{ color:var(--ink) !important; font-weight:700 !important; }
.cat-label, .post-cat-label{ background:var(--accent) !important; color:#fff !important; border-radius:0 !important; }

/* ============================================================
   サイドバー / ウィジェット
   ============================================================ */
.widget .widget-title{
  background:none !important; color:var(--ink) !important; border:none !important; border-bottom:2px solid var(--accent) !important;
  border-radius:0 !important; padding:0 0 8px 0 !important; font-weight:700 !important;
}
.widget ul li{ border-bottom:1px solid var(--line) !important; }
.widget ul li a{ color:var(--ink-2) !important; font-size:14px; }
.widget ul li a:hover{ color:var(--accent-2) !important; }

/* パンくず・タグ・ページネーション */
.breadcrumb a{ color:var(--muted) !important; }
.breadcrumb a:hover{ color:var(--ink) !important; }
.tag a, .post-tag a{ background:var(--surface) !important; color:var(--ink-2) !important; border:1px solid var(--line) !important; border-radius:999px !important; padding:3px 11px !important; font-size:12px; }
.pagination .current, .pagination a:hover{ background:var(--accent) !important; color:#fff !important; }

/* ============================================================
   フッター — 重い黒をやめ、温かいニュートラル
   ============================================================ */
#footer{ background:var(--ink) !important; color:#cfc9bd !important; }
#footer a{ color:#cfc9bd !important; }
#footer a:hover{ color:#fff !important; }
.footer-widget .widget-title{ color:#fff !important; background:none !important; border-bottom:1px solid rgba(255,255,255,.2) !important; }
.copyright{ background:#191613 !important; color:#9a948a !important; font-size:13px; }

/* ============================================================
   レガシー・インライン 青(#1565c0)/橙 デザインの再スキン
   記事内インライン(!important・後勝ち)を深い紺+中立へ。body接頭でspecificity勝ち
   ============================================================ */
body .entry-content [style*="color:#1565c0"],
body .entry-content [style*="color:#0d47a1"]{ color:var(--accent-2) !important; }
body .entry-content strong{ color:var(--ink) !important; }
body .entry-content [style*="solid #1565c0"],
body .entry-content [style*="solid #0d47a1"]{ border-color:var(--accent-line) !important; }
/* 見出しの青塗りつぶし背景を除去（中立hairline+紺ティックは下の規則で） */
body .entry-content h2{ background:none !important; }
/* テーブル: 青ヘッダ → 中立サーフェス */
body .entry-content table th,
body .entry-content table thead th,
body .entry-content table tr:first-child th{ background:var(--surface) !important; color:var(--ink) !important; }
/* 青/橙の薄い箱背景 → 中立サーフェス */
body .entry-content [style*="background:#f0f6ff"], body .entry-content [style*="background:#e3f2fd"],
body .entry-content [style*="background:#f8fbff"], body .entry-content [style*="background:#eef4ff"],
body .entry-content [style*="background:#f8fb"], body .entry-content [style*="background:#fff8e1"],
body .entry-content [style*="background:#fffbf0"], body .entry-content [style*="background:#fff3e0"],
body .entry-content [style*="background:#fffbf5"], body .entry-content [style*="background:#fffbf"]{ background:var(--surface) !important; border-color:var(--line) !important; }
/* CTA: 旧ダーク紺グラデ+橙ボタン → 静かなカード+紺ボタン */
body .entry-content div[style*="linear-gradient(135deg,#1a237e"],
body .entry-content div[style*="linear-gradient(135deg, #1a237e"],
body .entry-content div[style*="#1a237e"]{ background:var(--surface) !important; border:1px solid var(--line) !important; }
body .entry-content div[style*="#1a237e"] p{ color:var(--ink-2) !important; }
body .entry-content a[style*="background:#ff8f00"],
body .entry-content a[style*="background:#ff8c00"],
body .entry-content a[style*="background:#ff5722"]{ background:var(--accent) !important; color:#fff !important; }

/* SNSシェアボタン: 多色 → 中立アウトライン（色数抑制） */
.sns-share-buttons .sns-button,
.sns-share-buttons a.sns-button{
  background:var(--paper) !important; color:var(--ink-2) !important;
  border:1px solid var(--line-2) !important; border-radius:8px !important; box-shadow:none !important;
}
.sns-share-buttons .sns-button .button-caption{ color:var(--ink-2) !important; }
.sns-share-buttons .sns-button:hover{ background:var(--surface) !important; border-color:var(--accent-line) !important; color:var(--accent-2) !important; }
.sns-share-buttons .sns-button .icon-share,
.sns-share-buttons .sns-button [class*="fa-"]{ color:var(--ink-2) !important; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:480px){
  .entry-content{ max-width:94% !important; }
  .entry-content p, .entry-content li{ font-size:15.5px !important; line-height:2.0 !important; }
  .entry-content h2{ font-size:20px !important; margin-top:2.4em !important; }
  .entry-content h3{ font-size:17px !important; }
  .entry-content img{ max-width:92% !important; }
  .entry-content figure{ max-width:94% !important; }
  .entry-content table{ font-size:13.5px !important; }
}

/* ============================================================
   Cocoon キーカラー(teal #1a9fb5)を確実に上書き
   Cocoonの生成CSSが !important + 後勝ちで残るため body 接頭で specificity 強化
   ============================================================ */
body .entry-content h2{ border:0 !important; border-bottom:1px solid var(--line) !important; }
body .entry-content h2::after{ background:var(--accent) !important; }
body .entry-content h3{ border:0 !important; border-left:3px solid var(--accent) !important; border-bottom:0 !important; }
body .cat-label, body [class*="cat-label"], body .post-cat-label{ background:var(--accent) !important; color:#fff !important; }
body #header, body .header-container, body #header-in, body .header-in{ background:#ffffff !important; color:var(--ink) !important; }
/* グローバルナビ: Cocoonキーカラー(青)を白＋中立リンクへ */
body #navi, body .navi-in, body #navi .navi-in{ background:#ffffff !important; border-top:1px solid var(--line) !important; }
body #navi .navi-in>ul>li>a{ color:var(--ink-2) !important; background:transparent !important; }
body #navi .navi-in>ul>li>a:hover, body #navi .navi-in>ul>li.current-menu-item>a{ background:var(--accent-soft) !important; color:var(--accent-2) !important; }
/* サイト名をインクへ（キーカラー青を打ち消し） */
body #header .site-name-text a, body .site-name-text a, body #site-title a, body .logo-header a{ color:var(--ink) !important; }
body .entry-content blockquote{ border-left:3px solid var(--accent) !important; }
body .toc, body .toc-box{ border-color:var(--line) !important; }
body .toc-title, body .toc-list a{ color:var(--ink) !important; }
body .pagination .current, body .page-numbers.current{ background:var(--accent) !important; color:#fff !important; }
body .entry-content a:not(.btn):not(.button):not(.wp-block-button__link){ color:var(--accent-2) !important; }
body .widget .widget-title{ border-bottom-color:var(--accent) !important; }
/* h2 下線は中立hairline（短い緑ティックで差し色）— 全幅緑化を防ぐ */
body .entry-content h2{ border-bottom:1px solid var(--line) !important; }
/* Cocoon keycolor のテキスト色のみ中立化（ボーダーは上の h2/h3 規則で制御） */
body [style*="color:#1a9fb5"]{ color:var(--ink) !important; }

/* ============================================================
   Cocoonキーカラー(媒体既定色)を html body 接頭で一括無力化
   ヘッダ/ナビ/ラベル/フッターのキーカラー→QC（残り媒体でも再利用）
   ============================================================ */
html body #header-container, html body #header-container .navi,
html body #navi, html body .navi, html body .navi-in, html body #navi .navi-in,
html body .mobile-menu-buttons{ background:#ffffff !important; }
html body #navi .navi-in>ul>li>a{ color:var(--ink-2) !important; }
html body #navi .navi-in>ul>li>a:hover,
html body #navi .navi-in>ul>li.current-menu-item>a{ background:var(--accent-soft) !important; color:var(--accent-2) !important; }
html body #header #site-title a, html body #header #site-title a span, html body #header .site-name-text, html body #header .site-name-text a, html body .site-name-text, html body .site-name-text a{ color:var(--ink) !important; }
html body .cat-label, html body .cat-link, html body .blogcard-label, html body .blogcard-type .blogcard-label{ background:var(--accent) !important; color:#fff !important; }
html body #footer{ background:var(--ink) !important; color:#cfc9bd !important; }