/* ============================================================
   猫家 明るいテーマ「いっしょに、がんばりましょう」
   朝日のイエロー × 信頼の紺。全ページ共通の上書きスタイル。
   各ページの <style> と Tailwind の暗色クラスを上書きする。
   外すときは各ページの <link ... theme-pop.css> を消すだけ。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yomogi&text=%E3%81%84%E3%81%A3%E3%81%97%E3%82%87%E3%81%AB%E3%80%81%E3%81%8C%E3%82%93%E3%81%B0%E3%82%8A%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%EF%BC%81%EF%BC%BC%EF%BC%8F&display=swap');

:root {
  --paper: #FFFDF7;        /* あたたかい白 */
  --band: #FFF6D8;         /* 交互のうすい黄色の帯 */
  --card: #FFFFFF;
  --ink: #22314A;          /* 紺（本文・枠） */
  --ink-2: #3F4B62;
  --ink-3: #69748A;
  --rule: #ECE3CB;
  --sun: #FFD23F;          /* 朝日のイエロー */
  --sun-deep: #F5B700;
  --sun-pale: #FFF1BF;
  --mark: #FFE27A;         /* 蛍光ペン */
  --orange: #FF7A2F;
  --orange-deep: #C4500F;  /* 白背景で読めるオレンジ */
  --green: #1F8A57;  --green-pale: #E1F4E9;
  --sky: #2D6FB0;    --sky-pale: #E4EFFA;
  --plum: #85468A;   --plum-pale: #F3E6F3;
  --rose: #C73A35;   --rose-pale: #FCE7E5;
  --radius: 20px;
  --hand: 'Yomogi', 'Zen Kaku Gothic New', cursive;
}

/* ---------- 土台 ---------- */
html, body, body.bg-black { background: var(--paper) !important; color: var(--ink) !important; }
body { font-family: 'Zen Kaku Gothic New', sans-serif !important; }
h1, h2, h3, h4, .serif, .section-title, .logo-text { font-family: 'Zen Kaku Gothic New', sans-serif !important; letter-spacing: .01em; }
h1, h2, .section-title { font-weight: 900 !important; }
::selection { background: var(--sun); color: var(--ink); }

/* ---------- Tailwind 暗色クラスの置き換え ---------- */
.bg-black { background-color: var(--paper) !important; }
.bg-zinc-950 { background-color: var(--band) !important; }          /* セクションを交互の帯に */
.bg-zinc-900, .bg-zinc-800, .bg-black\/95, .bg-black\/50 { background-color: var(--card) !important; }
.bg-amber-900\/50, .bg-amber-900\/60, .bg-amber-900\/20, .bg-amber-900, .bg-yellow-900\/50 { background-color: var(--sun-pale) !important; }
.bg-orange-900\/50, .bg-red-900\/50, .bg-red-900\/60, .bg-rose-900\/50, .bg-pink-900\/50 { background-color: var(--rose-pale) !important; }
.bg-green-900\/50, .bg-emerald-900\/50, .bg-teal-900\/50, .bg-lime-900\/50 { background-color: var(--green-pale) !important; }
.bg-blue-900\/50, .bg-blue-900\/60, .bg-indigo-900\/50, .bg-cyan-900\/50 { background-color: var(--sky-pale) !important; }
.bg-purple-900\/50, .bg-purple-900\/60, .bg-purple-900\/40, .bg-violet-900\/50 { background-color: var(--plum-pale) !important; }

.text-white, .text-gray-200 { color: var(--ink) !important; }
.text-gray-300 { color: var(--ink-2) !important; }
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--ink-3) !important; }
.text-amber-200, .text-amber-300, .text-amber-400, .text-yellow-300, .text-yellow-400, .text-orange-300 { color: var(--orange-deep) !important; }
.text-red-300, .text-red-400, .text-rose-300, .text-pink-300, .text-pink-400 { color: var(--rose) !important; }
.text-green-300, .text-green-400, .text-emerald-300, .text-teal-300, .text-lime-300 { color: var(--green) !important; }
.text-blue-300, .text-blue-400, .text-indigo-300, .text-cyan-300 { color: var(--sky) !important; }
.text-purple-200, .text-purple-300, .text-violet-300 { color: var(--plum) !important; }
.hover\:text-amber-300:hover, .hover\:text-amber-400:hover, .hover\:text-pink-300:hover, .hover\:text-green-300:hover, .hover\:text-red-300:hover { color: var(--orange-deep) !important; }
.hover\:text-white:hover, .hover\:text-black:hover { color: var(--ink) !important; }

.border-zinc-700, .border-zinc-800, .border-gray-700, .border-gray-800, .border-red-900\/50, .border-amber-700\/50, .border-amber-600\/40 { border-color: var(--rule) !important; }
.border-amber-400, .border-amber-500, .border-amber-700, .border-amber-500\/30, .border-amber-500\/20,
.hover\:border-amber-400:hover, .hover\:border-amber-500:hover { border-color: var(--ink) !important; }
.border-red-600 { border-color: var(--rose) !important; }

/* グラデーション背景（ブログのサムネイル等）は淡色に */
.to-black { --tw-gradient-to: var(--card) var(--tw-gradient-to-position) !important; }
.from-zinc-900 { --tw-gradient-from: var(--card) var(--tw-gradient-from-position) !important; }
.from-amber-900\/30, .from-yellow-900\/30 { --tw-gradient-from: var(--sun-pale) var(--tw-gradient-from-position) !important; }
.from-red-900\/30, .from-red-900\/40, .from-orange-900\/30, .from-rose-900\/30, .from-pink-900\/30 { --tw-gradient-from: var(--rose-pale) var(--tw-gradient-from-position) !important; }
.from-green-900\/30, .from-emerald-900\/30, .from-teal-900\/30, .from-lime-900\/30 { --tw-gradient-from: var(--green-pale) var(--tw-gradient-from-position) !important; }
.from-blue-900\/30, .from-indigo-900\/30, .from-cyan-900\/30 { --tw-gradient-from: var(--sky-pale) var(--tw-gradient-from-position) !important; }
.from-purple-900\/30, .from-violet-900\/30 { --tw-gradient-from: var(--plum-pale) var(--tw-gradient-from-position) !important; }

/* 塗りつぶしのボタン・バッジ */
.bg-amber-500, .hover\:bg-amber-400:hover, .hover\:bg-amber-500:hover { background-color: var(--sun) !important; color: var(--ink) !important; }
.hover\:bg-amber-500\/10:hover { background-color: var(--sun-pale) !important; }
.bg-green-600, .hover\:bg-green-500:hover { color: #fff !important; }
.hover\:bg-red-600:hover { background-color: var(--rose) !important; color: #fff !important; }

/* ---------- インラインの色指定 ---------- */
[style*="-webkit-text-fill-color: white"], [style*="-webkit-text-fill-color:white"] { -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }
[style*="-webkit-text-fill-color: #d1d5db"], [style*="-webkit-text-fill-color:#d1d5db"] { -webkit-text-fill-color: var(--ink-2) !important; color: var(--ink-2) !important; }
[style*="-webkit-text-fill-color:#f4e7b1"], [style*="-webkit-text-fill-color: #f4e7b1"], [style*="color:#f4e7b1"] { -webkit-text-fill-color: var(--orange-deep) !important; color: var(--orange-deep) !important; }
[style*="color:#4ade80"] { color: var(--green) !important; }
[style*="background:rgba(0,0,0,0.95)"], [style*="background:rgba(0,0,0,.95)"] { background: var(--card) !important; }
[style*="background:#06C755"], [style*="background:#06C755"] * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ---------- ナビ・ロゴ ---------- */
.nav-glass { background: rgba(255,255,255,.97) !important; backdrop-filter: none !important; border-bottom: 4px solid var(--sun) !important; }
#mobile-menu { background: #fff; }
.logo-text { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; font-weight: 900 !important; font-size: 1.7rem !important; }
.logo-text::before {
  content: "\f6be"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%;
  background: var(--sun); color: var(--ink); -webkit-text-fill-color: var(--ink);
  font-size: .62em; margin-right: .4em; vertical-align: .2em;
}

/* ---------- 強調語：金色 → 紺＋蛍光ペン ---------- */
.gold-text {
  background: none !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
  text-decoration: underline !important; text-decoration-color: var(--mark) !important;
  text-decoration-thickness: .38em !important; text-underline-offset: -.22em !important; text-decoration-skip-ink: none !important;
}
.section-title::after { content: ""; display: block; width: 40px; height: 6px; border-radius: 6px; background: var(--orange); margin: .7rem auto 0; }

/* ---------- ボタン ---------- */
.btn-gold, .profit-highlight {
  background: var(--sun) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
  border: 2px solid var(--ink) !important; box-shadow: 0 4px 0 var(--ink) !important;
}
.btn-gold *, .profit-highlight * { color: inherit !important; -webkit-text-fill-color: inherit !important; }
.btn-gold:hover { transform: translateY(2px) !important; box-shadow: 0 2px 0 var(--ink) !important; background: var(--sun-deep) !important; }
.btn-line, .btn-line * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.btn-line { border: 2px solid var(--ink) !important; box-shadow: 0 4px 0 var(--ink) !important; }
.btn-line:hover { transform: translateY(2px) !important; box-shadow: 0 2px 0 var(--ink) !important; }
.btn-border, a.border-2.border-amber-400 { background: #fff !important; border: 2px solid var(--ink) !important; color: var(--ink) !important; box-shadow: 0 4px 0 var(--ink); }
a.border-2.border-amber-400:hover { background: var(--sun-pale) !important; }

/* ---------- ヒーロー：朝日のモチーフ ---------- */
.hero-bg, .hero-fc {
  background:
    radial-gradient(circle at 50% 122%, var(--sun) 0 24%, transparent 24.3%),
    radial-gradient(circle at 50% 122%, #FFE488 0 34%, transparent 34.3%),
    radial-gradient(circle at 50% 122%, var(--sun-pale) 0 46%, transparent 46.3%),
    var(--paper) !important;
}
.hero-bg::before, .hero-fc::before { background: none !important; }
.page-header-bg { background: var(--band) !important; border-bottom: none !important; }

/* FC募集ページ：手書きのひとこと */
.hero-fc h1::before {
  content: "いっしょに、がんばりましょう！"; display: block;
  font-family: var(--hand) !important; font-weight: 400 !important; font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--orange-deep); -webkit-text-fill-color: var(--orange-deep); letter-spacing: .06em;
  transform: rotate(-2.5deg); margin-bottom: .9rem;
}

/* ---------- カード類 ---------- */
.card-dark, .menu-card, .concept-card, .info-card, .content-box, .contact-card, .sim-card, .step-card,
.channel-card, .article-card, .rank-card, .reason-card, .related-link {
  background: var(--card) !important; border: 2px solid var(--ink) !important;
  border-radius: var(--radius) !important; box-shadow: none !important;
}
.card-dark:hover, .menu-card:hover, .contact-card:hover, .sim-card:hover, .channel-card:hover, .article-card:hover, .related-link:hover {
  transform: translate(-3px, -3px) !important; box-shadow: 6px 6px 0 var(--sun) !important; border-color: var(--ink) !important;
}
.sim-card.featured { background: var(--sun-pale) !important; border-width: 3px !important; }
.concept-card, .step-card { border-left: 10px solid var(--sun) !important; }
.badge-red { background: var(--orange) !important; color: #fff !important; border: 2px solid var(--ink); }
.cta-section { background: var(--sun-pale) !important; border: 2px solid var(--ink) !important; border-radius: 28px !important; }
.cta-section, .cta-section * { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
.cta-section .btn-line, .cta-section .btn-line * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ---------- 記事本文 ---------- */
.article-body h2, .ab h2 {
  color: var(--ink) !important; background: none !important; border: none !important;
  border-bottom: 3px solid var(--ink) !important; border-radius: 0 !important;
  padding: 0 0 .45rem !important; font-size: 1.5rem !important; line-height: 1.5;
}
.article-body h2::before, .ab h2::before {
  content: ""; display: inline-block; width: .78em; height: .78em; border-radius: 50%;
  background: var(--sun); border: 2px solid var(--ink); margin-right: .5em; vertical-align: -.02em;
}
.article-body h3, .ab h3 { color: var(--ink) !important; }
.article-body h3::before, .ab h3::before {
  content: ""; display: inline-block; width: .95em; height: .28em; border-radius: 4px;
  background: var(--orange); margin-right: .45em; vertical-align: .28em;
}
.article-body p, .article-body ul li, .article-body li, .ab p, .ab ul li { color: var(--ink-2) !important; border-bottom-color: var(--rule) !important; }
.article-body strong { color: var(--ink) !important; background: linear-gradient(transparent 60%, var(--mark) 60%); }
.article-body td strong, .article-body th strong, .cta-box strong { background: none; }
.article-body a, .breadcrumb a { color: var(--sky) !important; }
.article-body ul li::before, .ab ul li::before { color: var(--orange) !important; }
.breadcrumb { color: var(--ink-3) !important; }

.info-box, .toc, .step-box, .compare-card, .next-action-box, .privacy-box {
  background: var(--card) !important; border: 2px solid var(--ink) !important; border-radius: var(--radius) !important; color: var(--ink-2) !important;
}
.point-box { background: var(--card) !important; border: 2px solid var(--ink) !important; border-left: 10px solid var(--sun) !important; border-radius: var(--radius) !important; }
.data-pill, .kw-badge { background: var(--sun-pale) !important; border: 1.5px solid var(--ink) !important; color: var(--ink) !important; }
.toc a, .toc li a { color: var(--ink-2) !important; border-bottom-color: var(--rule) !important; }
.toc a:hover, .toc li a:hover { color: var(--orange-deep) !important; }
.highlight-box, .hb { background: var(--sun-pale) !important; border: 2px solid var(--ink) !important; border-radius: var(--radius) !important; }

/* 記事内の相談枠：手書きのひとことを添える */
.cta-box { background: var(--sun-pale) !important; border: 2px solid var(--ink) !important; border-radius: 28px !important; }
.cta-box::before {
  content: "＼ いっしょに、がんばりましょう！ ／"; display: block;
  font-family: var(--hand); font-size: 1.15rem; letter-spacing: .06em;
  color: var(--orange-deep); margin-bottom: .6rem;
}
.cta-box, .cta-box p, .cta-box h3, .cta-box .gold-text { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
.cta-box .btn-line, .cta-box .btn-line * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.cta-box .btn-gold, .cta-box .btn-gold * { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
.cta-box .btn-gold { background: #fff !important; }

.warning-box, .alert-box, .fail-card, .warn-box, .news-box { background: var(--rose-pale) !important; border: 2px solid var(--rose) !important; border-radius: var(--radius) !important; }
.ok-card { background: var(--green-pale) !important; border: 2px solid var(--green) !important; }
.disclaimer-box { background: var(--band) !important; border-color: var(--rule) !important; }
.disclaimer-box p { color: var(--ink-3) !important; }

.faq-item { border: 2px solid var(--ink) !important; border-radius: var(--radius) !important; background: var(--card); }
.faq-q { background: var(--band) !important; color: var(--ink) !important; border-bottom: 2px solid var(--ink); }
.faq-q i { color: var(--orange) !important; }
.faq-a { color: var(--ink-2) !important; }

/* ---------- 表 ---------- */
.check-table, .compare-table { border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; border-collapse: separate !important; border-spacing: 0; }
.check-table th, .compare-table th { background: var(--ink) !important; color: #fff !important; border-color: rgba(255,255,255,.15) !important; }
.check-table td, .compare-table td { background: var(--card); color: var(--ink-2) !important; border-color: var(--rule) !important; }
.check-table tr:nth-child(even) td, .compare-table tr:nth-child(even) td { background: #FFFBEE !important; }
.nekoya-row td { background: var(--sun-pale) !important; }
.good { color: var(--green) !important; }
.bad { color: var(--rose) !important; }
.warning, .mid { color: #946200 !important; }

/* ---------- 数字バッジ ---------- */
.step-num, .num-badge, .rank-badge, .reason-num, .check-circle, .rank-1, .rank-gold, .step-box .step-num {
  background: var(--sun) !important; color: var(--ink) !important; border: 2px solid var(--ink);
}
.rank-2, .rank-silver { background: #E3E7EE !important; color: var(--ink) !important; border: 2px solid var(--ink); }
.rank-3, .rank-bronze { background: #F6D2B4 !important; color: var(--ink) !important; border: 2px solid var(--ink); }
.rank-other, .rank-normal, .check-num { background: #fff !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; }
.rank-num { background: var(--rose-pale) !important; color: var(--rose) !important; }

/* ---------- フォーム ---------- */
.form-label { color: var(--ink) !important; }
.form-input, .form-select, .form-textarea { background: #fff !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 14px !important; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--ink) !important; box-shadow: 0 0 0 4px var(--sun) !important; }
.form-input::placeholder, .form-textarea::placeholder { color: #9AA2B1 !important; }
.form-select option { background: #fff !important; color: var(--ink) !important; }
.form-optional { color: var(--ink-3) !important; border-color: var(--rule) !important; background: var(--band) !important; }
.checklist-item { border-bottom-color: var(--rule) !important; }

/* ---------- フッター（:not(#_) で Tailwind の色クラスより優先） ---------- */
footer:not(#_) { background: var(--ink) !important; border-top: 6px solid var(--sun) !important; }
footer:not(#_), footer *:not(#_) { color: #EEF1F6 !important; -webkit-text-fill-color: #EEF1F6 !important; border-color: rgba(255,255,255,.15) !important; }
footer a:not(#_):hover { color: var(--sun) !important; -webkit-text-fill-color: var(--sun) !important; }
footer .gold-text:not(#_) { text-decoration-color: rgba(255,210,63,.45) !important; }
footer .logo-text:not(#_)::before { -webkit-text-fill-color: var(--ink); color: var(--ink); }
footer .btn-gold:not(#_), footer .btn-gold *:not(#_) { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }

/* 相談枠の見出しに記事用の飾りを付けない／ボタンに下線を付けない */
.cta-box h3::before, .highlight-box h3::before, .info-box h3::before { display: none !important; }
a.btn-gold, a.btn-line, a.btn-border, .article-body a.btn-gold, .article-body a.btn-line { text-decoration: none !important; }
.cta-box::before { white-space: nowrap; }
@media (max-width: 640px) { .cta-box::before { font-size: .92rem; letter-spacing: 0; } }
.badge-red, .badge-red * { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
.article-body a[style*="06C755"], a[style*="06C755"], .article-body a[style*="06C755"] * { color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; }
.toc-title, .toc-title * { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
a[class*="bg-[#06C755]"], a[class*="bg-[#06C755]"] *, .article-body a[class*="bg-[#06C755]"] { color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
[style*="-webkit-text-fill-color:#d4af37"], [style*="-webkit-text-fill-color: #d4af37"], [style*="color:#d4af37"], [style*="color: #d4af37"] { -webkit-text-fill-color: var(--orange-deep) !important; color: var(--orange-deep) !important; }
[style*="color:#fbbf24"], [style*="color: #fbbf24"] { color: #946200 !important; -webkit-text-fill-color: #946200 !important; }

/* ---------- 主ボタン（旧LINEボタンの置き換え：加盟ページ・フォームへ） ---------- */
.btn-cta {
  background: var(--sun) !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
  border: 2px solid var(--ink) !important; box-shadow: 0 4px 0 var(--ink) !important; font-weight: 900 !important;
  display: inline-block; text-decoration: none !important; transition: transform .15s, box-shadow .15s;
}
.btn-cta * { color: inherit !important; -webkit-text-fill-color: inherit !important; }
.btn-cta:hover { transform: translateY(2px) !important; box-shadow: 0 2px 0 var(--ink) !important; background: var(--sun-deep) !important; }
.flex-1.btn-cta:not(.rounded-full) { box-shadow: none !important; border-width: 0 0 0 2px !important; }

/* ---------- 記事冒頭「この記事の結論」（2026-10-01 追加） ---------- */
.summary-box { background: var(--card) !important; border: 2px solid var(--ink) !important; border-left: 10px solid var(--green) !important; border-radius: var(--radius) !important; padding: 18px 22px 12px !important; margin: 0 0 28px !important; }
.summary-box .summary-title { font-weight: 900 !important; font-size: 1.05rem; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; margin: 0 0 6px !important; }
.summary-box .summary-title i { color: var(--green) !important; }
.summary-box ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.summary-box ul li, .article-body .summary-box ul li { position: relative; padding: 7px 0 7px 1.6em !important; margin: 0 !important; color: var(--ink) !important; font-weight: 700; line-height: 1.75; border-bottom: 1px dashed var(--rule) !important; }
.summary-box ul li:last-child { border-bottom: none !important; }
.summary-box ul li::before, .article-body .summary-box ul li::before { content: "\2713" !important; position: absolute; left: 0; top: 7px; color: var(--green) !important; font-weight: 900; }