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

/* ============================================================
   ニコリのAI仕事術｜白基調・信頼系デザイン  2026-07-26
   方針：白×ネイビー×ブルー／文字を大きく・行間を広く／
        転職・スクール等の高単価案件でも信用される清潔感。
   すべて !important でCocoonスキン非依存。
   ============================================================ */

:root{
  --nf-navy:#0f2947;      /* 見出し・タイトル */
  --nf-blue:#1b6fd4;      /* リンク・CTA */
  --nf-blue-d:#1559ab;    /* CTAホバー */
  --nf-text:#333a45;      /* 本文 */
  --nf-sub:#6a7585;       /* 補助テキスト */
  --nf-line:#e3e8ef;      /* 罫線 */
  --nf-bg-soft:#f5f8fc;   /* 淡い背景 */
  --nf-yellow:#ffd400;    /* 差し色（鮮やかな黄） */
  --nf-yellow-s:#fff3b0;  /* 淡い黄（マーカー用） */
  --nf-cut:14px;          /* 斜めカットの大きさ */
}

/* --- 土台：背景と文字 -------------------------------------- */
body,
body.public-page,
.wrap, #main, #container, #content,
.main, .content{
  background-color:#ffffff !important;
  color:var(--nf-text) !important;
}
body{
  font-size:17px !important;
  line-height:2.0 !important;
  -webkit-font-smoothing:antialiased;
}
.article, .entry-content, .post-date, .cat-link, .tag-link{
  color:var(--nf-text) !important;
}
/* 本文の余白を広く（読みやすさ優先） */
.article .entry-content p{
  margin:1.5em 0 !important;
  line-height:2.0 !important;
}
.article .entry-content{font-size:17px !important}
@media screen and (max-width:480px){
  body{font-size:16.5px !important}
  .article .entry-content{font-size:16.5px !important}
  .article .entry-content p{line-height:1.95 !important}
}

/* --- リンク ------------------------------------------------- */
.article a, .entry-content a{
  color:var(--nf-blue) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
.article a:hover, .entry-content a:hover{color:var(--nf-blue-d) !important}

/* --- 記事タイトル ------------------------------------------- */
.entry-title, .article h1.entry-title{
  color:var(--nf-navy) !important;
  font-weight:800 !important;
  line-height:1.5 !important;
  border:none !important;
}

/* --- 見出し：ネイビーの太い左ライン ------------------------- */
.article h2, .article .entry-content h2{
  background:linear-gradient(95deg,#eef4fc 0%,#f9fbfe 60%,#fff 100%) !important;
  color:var(--nf-navy) !important;
  border:none !important;
  border-left:7px solid var(--nf-navy) !important;
  border-radius:0 !important;
  padding:.7em .9em !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  background-image:linear-gradient(var(--nf-yellow),var(--nf-yellow)),linear-gradient(95deg,#eef4fc 0%,#f9fbfe 60%,#fff 100%) !important;
  background-size:3px 100%,100% 100% !important;
  background-position:0 0,0 0 !important;
  background-repeat:no-repeat,no-repeat !important;
  margin:2.4em 0 1.1em !important;
  font-size:1.32em !important;
  font-weight:800 !important;
  line-height:1.55 !important;
}
.article h3, .article .entry-content h3{
  color:var(--nf-navy) !important;
  background:none !important;
  border:none !important;
  border-bottom:2px solid var(--nf-line) !important;
  border-left:4px solid var(--nf-blue) !important;
  box-shadow:inset 0 -2px 0 -1px var(--nf-yellow);
  padding:.15em 0 .35em .6em !important;
  margin:2em 0 .9em !important;
  font-size:1.15em !important;
  font-weight:700 !important;
}
.article h4, .article .entry-content h4{
  color:var(--nf-navy) !important;
  border:none !important; border-left:3px solid var(--nf-line) !important;
  padding-left:.6em !important; margin:1.6em 0 .7em !important; font-weight:700 !important;
}

/* --- 番号ステップ：本文の <ol> をカード化 ------------------- */
.article .entry-content ol:not(.toc-list):not(.nf-plain){
  counter-reset:nf-step; list-style:none; padding-left:0; margin:1.8em 0;
}
.article .entry-content ol:not(.toc-list):not(.nf-plain) > li{
  position:relative; counter-increment:nf-step;
  background:#fff !important;
  border:1px solid var(--nf-line) !important;
  border-left:4px solid var(--nf-navy) !important;
  border-radius:0 !important;
  padding:16px 18px 16px 64px !important;
  margin:0 0 12px !important;
  list-style:none !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.article .entry-content ol:not(.toc-list):not(.nf-plain) > li::before{
  content:counter(nf-step);
  position:absolute; left:14px; top:14px;
  width:34px; height:34px; border-radius:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--nf-yellow);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
  color:var(--nf-navy); font-weight:900; font-size:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.article .entry-content ol:not(.toc-list):not(.nf-plain) > li::marker{content:none}

/* --- 箇条書き：ブルーの菱形マーカー ------------------------- */
.article .entry-content ul:not(.toc-list):not(.nf-plain){
  list-style:none; padding-left:0; margin:1.3em 0;
}
.article .entry-content ul:not(.toc-list):not(.nf-plain) > li{
  position:relative; padding-left:1.7em; margin:.65em 0; list-style:none;
}
.article .entry-content ul:not(.toc-list):not(.nf-plain) > li::before{
  content:""; position:absolute; left:.18em; top:.62em;
  width:10px; height:10px; background:var(--nf-yellow);
  border:1.5px solid var(--nf-navy);
  transform:rotate(45deg); border-radius:0;
}

/* --- 目次：素のリストに戻す（誤爆防止）＋見やすく ----------- */
.article .toc, .toc{
  background:var(--nf-bg-soft) !important;
  border:1px solid var(--nf-line) !important;
  border-radius:8px !important;
  padding:18px 20px !important;
  width:100% !important;
}
.toc-title{color:var(--nf-navy) !important; font-weight:800 !important}
.article .toc ol, .article .toc ul{
  list-style:revert !important; padding-left:1.5em !important;
  counter-reset:none !important; margin:.4em 0 !important;
}
.article .toc li{
  background:none !important; border:none !important; box-shadow:none !important;
  padding:0 !important; margin:.35em 0 !important; list-style:inherit !important;
  line-height:1.75 !important;
}
.article .toc li::before{display:none !important; content:none !important}
.article .toc a{color:var(--nf-text) !important; text-decoration:none}
.article .toc a:hover{color:var(--nf-blue) !important; text-decoration:underline}

/* --- 色分けカラーボックス ----------------------------------- */
.article .nf-box,
.article .nf-point, .article .nf-ok, .article .nf-memo,
.article .nf-caution, .article .nf-warn{
  position:relative; background:#fff !important;
  border:1px solid var(--nf-line) !important;
  border-left:5px solid var(--nf-blue) !important;
  border-radius:0 !important; padding:16px 18px !important; margin:1.8em 0 !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.article .nf-box > *:first-child, .article .nf-point > *:first-child,
.article .nf-ok > *:first-child, .article .nf-memo > *:first-child,
.article .nf-caution > *:first-child, .article .nf-warn > *:first-child{margin-top:0}
.article .nf-box > *:last-child, .article .nf-point > *:last-child,
.article .nf-ok > *:last-child, .article .nf-memo > *:last-child,
.article .nf-caution > *:last-child, .article .nf-warn > *:last-child{margin-bottom:0}
/* ラベル */
.article .nf-box::before, .article .nf-point::before, .article .nf-ok::before,
.article .nf-memo::before, .article .nf-caution::before, .article .nf-warn::before{
  display:block; font-size:12px; font-weight:800; letter-spacing:.1em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  margin-bottom:.6em; color:var(--nf-blue);
}
.article .nf-box[data-label]::before, .article .nf-point[data-label]::before,
.article .nf-ok[data-label]::before, .article .nf-memo[data-label]::before,
.article .nf-caution[data-label]::before, .article .nf-warn[data-label]::before{
  content:attr(data-label);
}
/* 種類ごとの色（淡い背景＋濃いラベル） */
.article .nf-point{background:#eef5ff !important; border-left-color:#1b6fd4 !important}
.article .nf-point::before{color:#13509e}
.article .nf-point:not([data-label])::before{content:"POINT"}
.article .nf-ok{background:#eefaf3 !important; border-left-color:#1a9c62 !important}
.article .nf-ok::before{color:#137a4c}
.article .nf-ok:not([data-label])::before{content:"OK"}
.article .nf-memo{background:#f5f2fd !important; border-left-color:#7159c9 !important}
.article .nf-memo::before{color:#5a44a8}
.article .nf-memo:not([data-label])::before{content:"MEMO"}
.article .nf-caution{background:#fff8e6 !important; border-left-color:#e0a12b !important}
.article .nf-caution::before{color:#a9741a}
.article .nf-caution:not([data-label])::before{content:"NOTE"}
.article .nf-warn{background:#fdeeee !important; border-left-color:#d64545 !important}
.article .nf-warn::before{color:#b32d2d}
.article .nf-warn:not([data-label])::before{content:"WARNING"}
/* ボックス内のリストは素の見た目 */
.article .nf-box ul, .article .nf-box ol,
.article .nf-point ul, .article .nf-point ol, .article .nf-ok ul, .article .nf-ok ol,
.article .nf-memo ul, .article .nf-memo ol, .article .nf-caution ul, .article .nf-caution ol,
.article .nf-warn ul, .article .nf-warn ol{
  margin:.5em 0 !important; padding-left:0 !important; list-style:none !important;
  counter-reset:nf-inbox;
}
.article .nf-box li, .article .nf-point li, .article .nf-ok li, .article .nf-memo li,
.article .nf-caution li, .article .nf-warn li{
  position:relative; background:none !important; border:none !important; box-shadow:none !important;
  padding:0 0 0 1.5em !important; margin:.4em 0 !important; list-style:none !important;
  counter-increment:nf-inbox;
}
.article .nf-box ul li::before, .article .nf-point ul li::before, .article .nf-ok ul li::before,
.article .nf-memo ul li::before, .article .nf-caution ul li::before, .article .nf-warn ul li::before{
  content:""; position:absolute; left:.2em; top:.62em; width:8px; height:8px;
  background:currentColor; opacity:.55; transform:rotate(45deg); border-radius:1px;
}
.article .nf-box ol li::before, .article .nf-point ol li::before, .article .nf-ok ol li::before,
.article .nf-memo ol li::before, .article .nf-caution ol li::before, .article .nf-warn ol li::before{
  content:counter(nf-inbox)". "; position:absolute; left:0; top:0; width:auto; height:auto;
  background:none; font-weight:800; opacity:.8; border-radius:0;
}

/* --- 運営者ニコリの吹き出し（白地＋枠線） ------------------- */
.article .nf-advice{
  position:relative; display:flex; gap:16px; align-items:center;
  background:#fff !important;
  border:1px solid #cfe0f5 !important;
  border-left:5px solid var(--nf-yellow) !important;
  border-radius:0 !important; padding:18px 20px !important; margin:2em 0 !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.article .nf-advice::before{
  content:""; flex:0 0 auto; width:64px; height:64px; border-radius:50%;
  background:url(https://nicori1031.com/wp-content/uploads/2026/07/nicori-avatar.jpg) center/cover, #eef5ff;
  border:3px solid var(--nf-yellow); box-shadow:0 0 0 1px var(--nf-navy);
}
.article .nf-advice > *{margin:0 !important}
.article .nf-advice .nfa-l{
  display:block; color:var(--nf-navy) !important; font-weight:800; font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em; margin-bottom:.35em !important;
}
@media screen and (max-width:480px){
  .article .nf-advice{gap:12px; padding:14px 15px !important}
  .article .nf-advice::before{width:54px; height:54px}
}

/* --- 黄色マーカー（最重要だけ） ----------------------------- */
.article .entry-content strong.nf-hl,
.article .entry-content .nf-hl,
.article .marker{
  background:linear-gradient(transparent 58%, var(--nf-yellow) 58%) !important;
  color:inherit !important; font-weight:700;
}
.article .entry-content strong{color:#1f2937 !important; font-weight:700}

/* --- 表 ----------------------------------------------------- */
.article table{
  border-collapse:collapse !important; width:100% !important;
  margin:1.8em 0 !important; font-size:.97em;
  border:1px solid var(--nf-line) !important;
}
.article table th{
  background:var(--nf-navy) !important; color:#fff !important;
  border:1px solid #24456f !important; border-bottom:3px solid var(--nf-yellow) !important;
  padding:12px 10px !important; font-weight:700 !important;
}
.article table td{
  background:#fff !important; color:var(--nf-text) !important;
  border:1px solid var(--nf-line) !important; padding:12px 10px !important;
}
.article table tr:nth-child(even) td{background:#fafcfe !important}
.scrollable-table, .article .scrollable-table{-webkit-overflow-scrolling:touch}

/* --- 引用 --------------------------------------------------- */
.article blockquote{
  background:var(--nf-bg-soft) !important;
  border:none !important; border-left:4px solid #b9c6d8 !important;
  border-radius:0 6px 6px 0 !important;
  color:#4a5462 !important; padding:16px 20px !important; margin:1.8em 0 !important;
}
.article blockquote::before{content:none !important}

/* --- アフィリエイトCTAをボタン化（ブルー） ------------------ */
.article .entry-content a[href*="px.a8.net"]:not(:has(img)),
.article .entry-content a[href*="af.moshimo.com"]:not(:has(img)){
  display:inline-block; background:var(--nf-yellow) !important; color:var(--nf-navy) !important;
  text-decoration:none !important; font-weight:900; letter-spacing:.02em;
  padding:16px 34px !important; margin:.8em 0; border-radius:0;
  border:2px solid var(--nf-navy) !important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  transition:transform .15s, background .15s, color .15s;
}
.article .entry-content a[href*="px.a8.net"]:not(:has(img)):hover,
.article .entry-content a[href*="af.moshimo.com"]:not(:has(img)):hover{
  background:var(--nf-navy) !important; color:var(--nf-yellow) !important; transform:translateY(-2px);
}
/* 計測ビーコン画像・かんたんリンク内の画像リンクはボタン化しない */
.article .entry-content a[href*="px.a8.net"] img{vertical-align:middle}
.article .msmaflink a{background:none !important; color:inherit !important; box-shadow:none !important; padding:0 !important; display:inline}

/* --- サイドバー・ウィジェット ------------------------------- */
#sidebar, .sidebar{background:#fff !important; color:var(--nf-text) !important}
.sidebar h3, .sidebar .widget-sidebar-title, .sidebar .wp-block-heading{
  background:var(--nf-bg-soft) !important; color:var(--nf-navy) !important;
  border:none !important; border-left:5px solid var(--nf-navy) !important;
  border-bottom:2px solid var(--nf-yellow) !important;
  border-radius:0 !important; padding:.6em .8em !important; font-weight:800 !important;
}
.sidebar a{color:var(--nf-text) !important; text-decoration:none}
.sidebar a:hover{color:var(--nf-blue) !important}
.widget_categories li, .widget_archive li{border-bottom:1px solid var(--nf-line); padding:.45em 0}

/* --- ヘッダー・フッター・ナビ ------------------------------- */
#header, .header, #header-container, .header-container{
  background:#fff !important; color:var(--nf-navy) !important;
  border-bottom:1px solid var(--nf-line) !important;
}
.site-name-text, .site-name a, .tagline{color:var(--nf-navy) !important; text-decoration:none}
.navi, #navi, .navi-in > ul > li > a{background:#fff !important; color:var(--nf-navy) !important}
.navi-in > ul > li > a:hover{background:var(--nf-bg-soft) !important; color:var(--nf-blue) !important}
#footer, .footer{
  background:var(--nf-navy) !important; color:#dbe4f0 !important;
  border-top:none !important;
}
#footer a, .footer a, #navi-footer a{color:#dbe4f0 !important}
#footer a:hover, #navi-footer a:hover{color:#fff !important}

/* --- カード（記事一覧） ------------------------------------- */
.entry-card, .related-entry-card, .carousel-entry-card{
  background:#fff !important; border:1px solid var(--nf-line) !important;
  border-radius:10px !important; padding:14px !important;
  box-shadow:0 1px 4px rgba(18,50,92,.05);
}
.entry-card:hover, .related-entry-card:hover{box-shadow:0 6px 18px rgba(18,50,92,.12)}
.entry-card-title, .related-entry-card-title, .a-wrap .entry-card-title{
  color:var(--nf-navy) !important; font-weight:700 !important;
}
.entry-card-snippet, .related-entry-card-snippet{color:var(--nf-sub) !important}
.a-wrap:hover{background:transparent !important}
.related-entry-heading, .related-entry-main-heading{
  color:var(--nf-navy) !important; border-left:5px solid var(--nf-navy) !important;
  background:var(--nf-bg-soft) !important; padding:.6em .8em !important;
}

/* --- 検索・ページネーション・パンくず ----------------------- */
#search-box input, .search-edit{
  background:#fff !important; color:var(--nf-text) !important;
  border:1px solid var(--nf-line) !important; border-radius:6px !important;
}
.pagination .page-numbers{
  background:#fff !important; color:var(--nf-text) !important;
  border:1px solid var(--nf-line) !important; border-radius:6px !important;
}
.pagination .current{background:var(--nf-blue) !important; color:#fff !important; border-color:var(--nf-blue) !important}
.breadcrumb, .breadcrumb a{color:var(--nf-sub) !important}

/* --- Cocoon標準の装飾ボックスもライトに ---------------------- */
.information-box, .question-box, .alert-box, .success-box, .memo-box{
  background:var(--nf-bg-soft) !important; color:var(--nf-text) !important;
  border:1px solid var(--nf-line) !important; border-radius:8px !important;
}
.alert-box{background:#fdeeee !important; border-color:#f3c9c9 !important}
.success-box{background:#eefaf3 !important; border-color:#c6ecd8 !important}

/* --- 画像 --------------------------------------------------- */
.article img{border-radius:8px; max-width:100%; height:auto}
.eye-catch img, .entry-thumb img{border-radius:10px}

/* --- トップLP(page-id-168)：白基調LPを邪魔しない ------------ */
.page-id-168 .article a, .page-id-168 .entry-content a{text-decoration:none !important}
/* LPのCTAボタン文字色（Cocoonのリンク色上書きを防ぐ） */
.article .entry-content a.nl-btn-main, .article .entry-content a.nl-btn-white{color:#fff !important}
.article .entry-content a.nl-btn-white{color:#12325c !important}
.article .entry-content a.nl-btn-sub, .article .entry-content a.nl-pill{color:#12325c !important}
/* ============================================================ */

/* --- リンク色の一括指定から除外するUI（ここが青くなると読めない） ----- */
/* シェア・フォローボタン：背景色の上なので文字は白を維持 */
.article .sns-share a, .article .sns-follow a,
.sns-share a, .sns-follow a,
.sns-buttons a, .sns-button, a.sns-button,
.sns-share .button-caption, .sns-follow .button-caption,
.sns-buttons .button-caption, .sns-buttons .social-icon,
.share-count, .follow-count{
  color:#fff !important;
}
/* ボタン類は下線を出さない */
.sns-buttons a, a.sns-button, .sns-share a, .sns-follow a{
  text-decoration:none !important;
}
/* コピー・feedly等アイコンも白 */
.sns-buttons a *{color:inherit !important}
/* カテゴリ／タグのチップ：ネイビー地に白文字 */
.article .cat-link, .article .tag-link, a.cat-link, a.tag-link{
  background:var(--nf-navy) !important; color:#fff !important;
  border:none !important; border-radius:4px !important;
  padding:5px 12px !important; font-weight:700; text-decoration:none !important;
}
.article .cat-link:hover, a.cat-link:hover{background:var(--nf-blue) !important; color:#fff !important}
/* 関連記事カードのタイトルはネイビー（青リンク・下線にしない） */
a.related-entry-card, a.entry-card-wrap, a.a-wrap, .a-wrap,
.related-entry-card-title, .related-entry-card a, .entry-card-title, .entry-card a{
  color:var(--nf-navy) !important; text-decoration:none !important;
}
a.a-wrap:hover .entry-card-title, a.related-entry-card:hover .related-entry-card-title{
  color:var(--nf-blue) !important;
}
.related-entry-card a:hover .related-entry-card-title{color:var(--nf-blue) !important}
/* 著者リンク・フッターメタは落ち着いたグレー */
.author-link, .footer-meta a, .post-author a{color:var(--nf-sub) !important}
.author-link:hover, .footer-meta a:hover{color:var(--nf-blue) !important}
/* 本文リンクは少し濃いブルーにして可読性を上げる */
.article .entry-content a{color:#1559ab !important}
.article .entry-content a:hover{color:#0f3f7a !important}