/* ============================================
   ポップ版 上書きスタイル（2026-09-08）
   個人向け・あそびひろば・猫ブログ に読み込む。
   HTMLは変更せず、見た目だけを上書きします。
   企業向け(corp)は対象外（corp2026.css を使用）。
   ============================================ */

:root{
  --p-ink:#0A0A0F;
  --p-lime:#C1FF00;
  --p-pink:#FF0090;
  --p-cyan:#00E5FF;
  --p-yellow:#FFE800;
  --p-violet:#7B2FF7;
  --p-paper:#FFFDF2;
  --p-sh:8px 8px 0 var(--p-ink);
  --p-sh-s:5px 5px 0 var(--p-ink);
  --p-sh-w:8px 8px 0 #fff;
}

body{
  background:var(--p-paper) !important;
  color:var(--p-ink) !important;
  font-weight:700;
}

/* AI感の元になっていた飾りを消す */
.star,.deco,.banner-blob,.blog-banner-blob{display:none !important;}
/* .blob / .blob2 は写真の切り抜き枠なので消さない */
.hero-photo,.contents-photo{border:5px solid var(--p-ink) !important;box-shadow:var(--p-sh) !important;}
.hero-badge{
  background:var(--p-pink) !important;color:#fff !important;
  border:4px solid var(--p-ink) !important;box-shadow:var(--p-sh-s) !important;
  font-weight:900 !important;
}

/* ── ヘッダー ──
   ※ header タグは「見出し」に使われているページもあるため、
     ナビ(nav)を持つヘッダーだけを対象にする */
header:has(nav),.hd{
  background:var(--p-ink) !important;
  border-bottom:5px solid var(--p-lime) !important;
  box-shadow:none !important;backdrop-filter:none !important;
}
header:has(nav) .logo,.hd .logo{color:var(--p-lime) !important;}
header:has(nav) .logo i{color:var(--p-cyan) !important;font-style:normal;}
header:has(nav) .logo span{color:var(--p-cyan) !important;}
header:has(nav) nav a{color:#fff !important;font-weight:900 !important;}
header:has(nav) nav a:hover{color:var(--p-lime) !important;}
.nav-cta{
  background:var(--p-lime) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;border-radius:999px !important;
  box-shadow:3px 3px 0 #fff !important;font-weight:900 !important;
}
.menu-btn{
  background:var(--p-lime) !important;border:3px solid var(--p-ink) !important;
  border-radius:10px !important;
}
.menu-btn span{
  background:var(--p-ink) !important;display:block !important;
  flex:none !important;width:22px !important;height:3px !important;
  margin:2px auto !important;border-radius:2px;
}

/* ── 見出し ── */
.eyebrow{
  display:inline-block;background:var(--p-ink) !important;color:var(--p-lime) !important;
  font-weight:900 !important;letter-spacing:.16em;padding:7px 18px !important;
  border:3px solid var(--p-ink) !important;border-radius:999px !important;
  transform:rotate(-2deg);
}
h1,h2,h3{font-weight:900 !important;letter-spacing:-.01em;}
.sec-head h2,.hero h1,.hero .big{font-weight:900 !important;}
.mark{
  background:var(--p-yellow) !important;color:var(--p-ink) !important;
  border:4px solid var(--p-ink) !important;border-radius:10px !important;
  padding:0 12px 4px !important;box-shadow:var(--p-sh-s) !important;
  display:inline-block;transform:rotate(-1.4deg);
  margin:0 14px 8px 0 !important;
}

/* ── ボタン ── */
.btn,.rb-go,.tool-go,.c-item .go{
  background:var(--p-yellow) !important;color:var(--p-ink) !important;
  border:4px solid var(--p-ink) !important;border-radius:16px !important;
  box-shadow:var(--p-sh-s) !important;font-weight:900 !important;
  transition:transform .1s,box-shadow .1s !important;
}
.btn:hover,.rb-go:hover{transform:translate(3px,3px) !important;box-shadow:2px 2px 0 var(--p-ink) !important;}

/* ── カード類：太い黒フチ＋ずらした影 ── */
.c-item,.faq-item,.support-row,.card,.post,.stamp,.runner-banner,.study-card{
  background:#fff !important;
  border:5px solid var(--p-ink) !important;
  border-radius:20px !important;
  box-shadow:var(--p-sh) !important;
}
.c-item:hover,.card:hover,.post:hover{
  transform:translate(3px,3px) !important;box-shadow:5px 5px 0 var(--p-ink) !important;
}
.c-tag,.tag,.post-cat,.rb-new{
  background:var(--p-cyan) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;border-radius:999px !important;
  font-weight:900 !important;
}
.support-num,.stat-num,.count{
  color:var(--p-ink) !important;font-weight:900 !important;
}

/* ── 数字 ── */
.stat-num{font-size:clamp(34px,6vw,48px) !important;}
.stat-label{font-weight:900 !important;}

/* ── FAQ ── */
.faq-q{font-weight:900 !important;}

/* ── フッター ── */
footer{
  background:var(--p-ink) !important;color:#fff !important;
  border-top:6px solid var(--p-lime) !important;
}
footer .logo{color:var(--p-lime) !important;}
footer a{color:#fff !important;font-weight:900 !important;}
footer a:hover{color:var(--p-lime) !important;}

@media(max-width:820px){
  .c-item,.card,.post,.faq-item,.support-row,.study-card{
    box-shadow:var(--p-sh-s) !important;
  }
  .mark,.eyebrow{transform:none;}
}

/* ============================================
   クイズページ（あそびひろば）は思いきり派手に
   ============================================ */
body.quiz-pop{
  background:var(--p-ink) !important;
  background-image:radial-gradient(var(--p-lime) 2px,transparent 2px) !important;
  background-size:16px 16px !important;
  color:#fff !important;
}
.quiz-pop .panel,.quiz-pop .wrap{
  background:#fff !important;border:5px solid var(--p-ink) !important;
  border-radius:22px !important;box-shadow:var(--p-sh-w) !important;color:var(--p-ink) !important;
}
.quiz-pop .badge{
  background:var(--p-cyan) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;border-radius:999px !important;font-weight:900 !important;
}
.quiz-pop h1,.quiz-pop h2{font-weight:900 !important;}
.quiz-pop .btn{
  background:var(--p-yellow) !important;color:var(--p-ink) !important;
  border:4px solid var(--p-ink) !important;border-radius:16px !important;
  box-shadow:var(--p-sh-s) !important;font-weight:900 !important;
}
.quiz-pop .btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--p-ink) !important;}
.quiz-pop .opt{
  background:#fff !important;color:var(--p-ink) !important;
  border:4px solid var(--p-ink) !important;border-radius:14px !important;
  box-shadow:4px 4px 0 var(--p-ink) !important;font-weight:900 !important;
}
.quiz-pop .opt:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--p-ink) !important;}
.quiz-pop .qcard{
  background:var(--p-lime) !important;color:var(--p-ink) !important;
  border:5px solid var(--p-ink) !important;border-radius:18px !important;
  box-shadow:var(--p-sh-s) !important;font-weight:900 !important;
}
.quiz-pop .topbar{color:var(--p-ink) !important;font-weight:900 !important;}
.quiz-pop .bar{background:#E6E6EE !important;border:3px solid var(--p-ink) !important;border-radius:999px !important;overflow:hidden;}
.quiz-pop .bar > div{background:var(--p-pink) !important;}
.quiz-pop .score-big{color:var(--p-pink) !important;font-weight:900 !important;}
.quiz-pop .emoji{filter:drop-shadow(3px 3px 0 var(--p-ink));}
/* 解説エリアは長文なので、読みやすさ優先（白地に黒文字のまま） */
.quiz-pop .study-card{
  background:#fff !important;color:var(--p-ink) !important;
  border:5px solid var(--p-ink) !important;box-shadow:var(--p-sh-w) !important;
}
.quiz-pop .study h2{color:var(--p-ink) !important;}
.quiz-pop .study summary{
  background:var(--p-yellow) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;border-radius:12px !important;font-weight:900 !important;
}

/* ============================================
   猫ブログ（記事・一覧）
   ヘッダー/カード/見出しはポップ、本文は読みやすさ優先
   ============================================ */
.neko-pop .site-head,.neko-pop header{
  background:var(--p-ink) !important;border-bottom:5px solid var(--p-lime) !important;
}
.neko-pop .art-cat,.neko-pop .post-cat,.neko-pop .cats a{
  border:3px solid var(--p-ink) !important;border-radius:999px !important;
  font-weight:900 !important;
}
.neko-pop .art-head h1,.neko-pop .hero h1{font-weight:900 !important;letter-spacing:-.01em;}
.neko-pop .art-hero{
  border:5px solid var(--p-ink) !important;border-radius:20px !important;
  box-shadow:var(--p-sh) !important;
}
.neko-pop .body,.neko-pop .post,.neko-pop .card,.neko-pop .stamp,.neko-pop .sibling,.neko-pop .backlinks{
  border:5px solid var(--p-ink) !important;border-radius:20px !important;
  box-shadow:var(--p-sh) !important;
}
/* 本文の見出しだけポップに（文章は触らない） */
.neko-pop .body h2{
  border-left:8px solid var(--p-pink) !important;font-weight:900 !important;
}
.neko-pop .body h3{font-weight:900 !important;}
.neko-pop .body a:not(.pr-btn){
  color:var(--p-ink) !important;background:var(--p-yellow) !important;
  border-bottom:3px solid var(--p-ink) !important;padding:1px 4px;font-weight:900 !important;
}
/* アフィリの「Amazonで見る」ボタンはポップ調の色に合わせつつ、ボタンとして見せる */
.neko-pop .body .pr-btn{
  background:var(--p-yellow) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;border-radius:999px !important;
  box-shadow:4px 4px 0 var(--p-ink) !important;padding:13px 26px !important;
}
.neko-pop .body .pr-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--p-ink) !important;}
.neko-pop footer,.neko-pop .site-foot{
  background:var(--p-ink) !important;color:#fff !important;
  border-top:6px solid var(--p-lime) !important;
}

/* ============================================
   企業ブログの記事（206本）
   ヘッダー/目次/関連記事はポップ、本文は読みやすさ優先
   ============================================ */
.art-pop .site-header{
  background:var(--p-ink) !important;border-bottom:5px solid var(--p-lime) !important;
  box-shadow:none !important;
}
.art-pop .site-header .brand-name{color:var(--p-lime) !important;}
.art-pop .site-header .brand-tag{color:var(--p-cyan) !important;}
.art-pop .site-header .brand-mark{
  background:var(--p-lime) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;
}
.art-pop .nav-list a{color:#fff !important;font-weight:900 !important;}
.art-pop .nav-list a:hover{color:var(--p-lime) !important;}
.art-pop .nav-cta{
  background:var(--p-lime) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;box-shadow:3px 3px 0 #fff !important;
}
.art-pop .hamburger span{background:#fff !important;}
.art-pop .page-title{font-weight:900 !important;letter-spacing:-.01em;}
.art-pop .article-cat{
  background:var(--p-cyan) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;border-radius:999px !important;font-weight:900 !important;
}
.art-pop .article-body{
  border:5px solid var(--p-ink) !important;border-radius:20px !important;
  box-shadow:var(--p-sh) !important;
}
.art-pop .article-body h2{
  border-left:8px solid var(--p-pink) !important;font-weight:900 !important;
}
.art-pop .article-body h3{font-weight:900 !important;}
.art-pop .article-toc{
  background:var(--p-yellow) !important;border:4px solid var(--p-ink) !important;
  border-radius:16px !important;
}
.art-pop .article-toc > p{font-weight:900 !important;}
.art-pop .article-toc a{color:var(--p-ink) !important;font-weight:900 !important;}
.art-pop .a-note{
  background:var(--p-lime) !important;border-left:8px solid var(--p-ink) !important;
  border-radius:12px !important;
}
.art-pop .a-tbl th{background:var(--p-cyan) !important;color:var(--p-ink) !important;font-weight:900 !important;}
.art-pop .a-tbl th,.art-pop .a-tbl td{border:2px solid var(--p-ink) !important;}
.art-pop .a-rel a{
  color:var(--p-ink) !important;background:var(--p-yellow) !important;
  border-bottom:3px solid var(--p-ink) !important;padding:1px 4px;font-weight:900 !important;
}
.art-pop .btn-ghost{
  background:var(--p-yellow) !important;color:var(--p-ink) !important;
  border:4px solid var(--p-ink) !important;border-radius:16px !important;
  box-shadow:var(--p-sh-s) !important;font-weight:900 !important;
}
.art-pop .site-footer{
  background:var(--p-ink) !important;color:#fff !important;
  border-top:6px solid var(--p-lime) !important;
}
.art-pop .article-back{color:var(--p-ink) !important;font-weight:900 !important;}

/* 猫ブログの見出しヘッダー（navを持たない header）は地色のまま */
.neko-pop header:not(:has(nav)){
  background:transparent !important;border-bottom:0 !important;
}
.neko-pop header:not(:has(nav)) h1,
.neko-pop header:not(:has(nav)) .lead{color:var(--p-ink) !important;}
.neko-pop .hero h1{color:var(--p-ink) !important;}

/* ============================================
   文字が見えなくなっていた箇所の修正（2026-09-08）
   ============================================ */

/* 1) 黒いヘッダーの中のロゴ・リンクを白系に（.art-pop以外のページ用） */
header:has(nav) .brand,header:has(nav) .brand-name,
.site-header .brand,.site-header .brand-name{color:var(--p-lime) !important;}
.site-header .brand-tag,header:has(nav) .brand-tag{color:var(--p-cyan) !important;}
.site-header .brand-mark,header:has(nav) .brand-mark{
  background:var(--p-lime) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;
}
.site-header .nav-list a,header:has(nav) .nav-list a{color:#fff !important;font-weight:900 !important;}
.site-header .nav-list a:hover{color:var(--p-lime) !important;}
.site-header .nav-cta,header:has(nav) .nav-cta{
  background:var(--p-lime) !important;color:var(--p-ink) !important;
}
.site-header .hamburger span,header:has(nav) .hamburger span{background:#fff !important;}
.site-header{
  background:var(--p-ink) !important;border-bottom:5px solid var(--p-lime) !important;
  box-shadow:none !important;
}

/* 2) 白くしたカードの中の文字を必ず濃い色にする */
.c-item,.faq-item,.support-row,.card,.post,.stamp,.runner-banner,.study-card,
.kalo,.rb-text,.rb-title,.rb-desc{
  color:var(--p-ink) !important;
}
.runner-banner .rb-title,.runner-banner .rb-desc,.runner-banner .rb-icon{color:var(--p-ink) !important;}
.kalo h3,.kalo p{color:var(--p-ink) !important;}

/* 3) 猫ブログ「‹ トップページ」など、地色の上の白文字を濃く */
.neko-pop a{color:var(--p-ink);}
.neko-pop .site-foot a,.neko-pop footer a{color:#fff !important;}

/* 猫ブログの前後リンク（白地に白文字だった） */
.neko-pop .backlinks a,.neko-pop .sibling a{color:var(--p-ink) !important;}

/* 記事下のCTAボックス（背景が消えて白文字だけ残っていた） */
.art-pop .article-cta-box{
  background:var(--p-ink) !important;
  border:5px solid var(--p-ink) !important;border-radius:20px !important;
  box-shadow:var(--p-sh) !important;
}
.art-pop .cta-box-title{color:var(--p-lime) !important;font-weight:900 !important;}
.art-pop .cta-box-desc{color:#fff !important;}
.art-pop .article-cta-box a{
  background:var(--p-yellow) !important;color:var(--p-ink) !important;
  border:4px solid var(--p-ink) !important;border-radius:14px !important;font-weight:900 !important;
}

/* スマホで開くメニュー（.global-nav）が白地に白文字だった */
.global-nav{background:var(--p-ink) !important;}
.global-nav .nav-list a,.global-nav a{color:#fff !important;}
.global-nav .nav-list a:hover{color:var(--p-lime) !important;}
.global-nav .nav-cta{
  background:var(--p-lime) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;
}

/* ============================================
   記事の著者情報（2026-09-08）
   ============================================ */
.au-box{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border:5px solid var(--p-ink);border-radius:20px;
  box-shadow:var(--p-sh);padding:22px 22px;margin:36px 0 0;
}
.au-box img{
  width:74px;height:74px;flex:none;border-radius:50%;object-fit:cover;
  border:4px solid var(--p-ink);
}
.au-box .au-b{min-width:0;}
.au-box .au-t{font-size:11.5px;font-weight:900;color:#6b7b8c;letter-spacing:.1em;margin:0 0 4px;}
.au-box .au-n{font-size:18px;font-weight:900;margin:0 0 6px;color:var(--p-ink);}
.au-box .au-d{font-size:13.5px;line-height:1.85;font-weight:500;color:#3a3a48;margin:0 0 10px;}
.au-box .au-l{font-size:13px;font-weight:900;color:var(--p-ink);
  background:var(--p-yellow);border:2.5px solid var(--p-ink);border-radius:999px;padding:5px 14px;
  display:inline-block;}
.au-box .au-l:hover{background:var(--p-pink);color:#fff;}
@media(max-width:600px){
  .au-box{flex-direction:column;gap:12px;padding:20px 18px;box-shadow:var(--p-sh-s);}
  .au-box img{width:64px;height:64px;}
}

/* 記事のアイキャッチ画像 */
.art-pop .eyecatch{
  margin:0 0 26px;border:5px solid var(--p-ink);border-radius:20px;
  overflow:hidden;box-shadow:var(--p-sh);
}
.art-pop .eyecatch img{width:100%;height:auto;display:block;aspect-ratio:1200/630;object-fit:cover;}
@media(max-width:768px){
  .art-pop .eyecatch{border-radius:16px;box-shadow:var(--p-sh-s);margin-bottom:20px;}
}

/* ============================================
   ブログ一覧のサムネイル（2026-09-08）
   これまで色のグラデーションだけの飾りだったので、
   記事ごとに生成したアイキャッチ画像を表示する
   ============================================ */
.blog-thumb{
  aspect-ratio:1200/630 !important;position:relative;overflow:hidden;
  background:var(--p-ink) !important;border-bottom:4px solid var(--p-ink);
}
.blog-thumb img{
  width:100%;height:100%;display:block;object-fit:cover;
}
.blog-thumb .blog-cat{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--p-cyan) !important;color:var(--p-ink) !important;
  border:3px solid var(--p-ink) !important;border-radius:999px !important;
  padding:4px 13px !important;font-size:11.5px !important;font-weight:900 !important;
}
.blog-card{
  background:#fff !important;border:5px solid var(--p-ink) !important;
  border-radius:20px !important;box-shadow:var(--p-sh) !important;overflow:hidden;
  display:block;
}
.blog-card:hover{transform:translate(3px,3px);box-shadow:5px 5px 0 var(--p-ink) !important;}
.blog-card .blog-body{padding:20px 20px 24px !important;}
.blog-card h3{font-size:17px !important;font-weight:900 !important;line-height:1.65 !important;margin:8px 0 10px !important;}
.blog-card .blog-date{font-size:12.5px !important;font-weight:900 !important;color:#6b7b8c !important;margin:0 !important;}
.blog-card .blog-excerpt{font-size:13.5px !important;line-height:1.85 !important;font-weight:500 !important;color:#3a3a48 !important;margin:0 !important;}
@media(max-width:768px){
  .blog-card{box-shadow:var(--p-sh-s) !important;}
  .blog-card .blog-body{padding:16px 16px 20px !important;}
}

/* スマホで押しやすく（2026-09-29） */
.article-back{min-height:44px;}