/* ============================================================
   案D 「ブライト・スカイ」
   参考2サイトから“雰囲気だけ”を抽出：
   ・淡い水色の地に白いパネルを置く（＝明るさの土台）
   ・角丸 16〜20px ＋ ピル 999px
   ・影は「ぼかさず斜めにずらす」ハード影（ブランド色の薄い版）
   ・見出しは「色ベタ帯＋白文字＋丸ポチ」／タグは小さい色ピル
   ・CTAはビタミンカラー（橙）＋黄色のリング
   ※ロゴ・キャラクター・イラスト・文言は一切流用していない
   ------------------------------------------------------------
   ・既存HTML/JSは変更なし（トップのヒーロー1ブロックのみ追加）
   ・inline style のアフィリエイト枠 aside[aria-label="PR"] は触らない
   ・表のスマホ対策（white-space / min-width / overflow-x）は触らない
   ・.sources（出典ボックス）は現状の見た目に固定
   ============================================================ */

:root, html body {
  --accent:      #0b72ac;   /* メインの青（帯・面） */
  --accent-dark: #075782;   /* 文字用（白地 7.8:1） */
  --accent-soft: #e3f2fc;
  --sky:         #eef8ff;   /* ページ地 */
  --sun:         #ffc233;   /* 差し色の黄 */
  --sun-soft:    #fff4d4;
  --sun-ink:     #8a5a00;
  --orange:      #c4500d;
  --orange-soft: #fff1e6;
  --bg:          #eef8ff;
  --card:        #ffffff;
  --ink:         #1d2b36;   /* 白地 14.5:1 */
  --ink-soft:    #55656f;   /* 白地 6.0:1 */
  --ink-faint:   #7d8b95;
  --line:        #d8e9f5;
  --radius:      18px;
  --hard:        5px 5px 0 rgba(11,114,172,.10);
  --hard-lg:     8px 8px 0 rgba(11,114,172,.16);
  --shadow:      var(--hard);
  --shadow-lg:   var(--hard-lg);
}

/* ---- ページごとのテーマ色（html[data-cat]） ---- */
html[data-cat="kyufu"]  body, html[data-cat="kyufu"] {--accent:#31741b;--accent-dark:#2f7a1c;--accent-soft:#eef8e6;--line:#dcecd0;--hard:5px 5px 0 rgba(49,116,27,.10);--hard-lg:8px 8px 0 rgba(49,116,27,.16);}
html[data-cat="zeikin"] body, html[data-cat="zeikin"]{--accent:#0b72ac;--accent-dark:#075782;--accent-soft:#e3f2fc;}
html[data-cat="kakei"]  body, html[data-cat="kakei"] {--accent:#bd4c0b;--accent-dark:#b8500f;--accent-soft:#fff1e6;--line:#f6e0cc;--hard:5px 5px 0 rgba(189,76,11,.10);--hard-lg:8px 8px 0 rgba(189,76,11,.16);}
html[data-cat="hatara"] body, html[data-cat="hatara"]{--accent:#7a45bd;--accent-dark:#6a35ad;--accent-soft:#f2ebfc;--line:#e4d8f5;--hard:5px 5px 0 rgba(122,69,189,.10);--hard-lg:8px 8px 0 rgba(122,69,189,.16);}
html[data-cat="fuyasu"] body, html[data-cat="fuyasu"]{--accent:#0f7f8c;--accent-dark:#0d6b76;--accent-soft:#e2f5f7;--line:#cfe9ec;--hard:5px 5px 0 rgba(15,127,140,.10);--hard-lg:8px 8px 0 rgba(15,127,140,.16);}

html { background: var(--sky); }
body {
  background:
    radial-gradient(620px 300px at 88% -120px, #fff0cc 0, rgba(255,240,204,0) 72%),
    radial-gradient(760px 340px at 8% -140px, #cfeaff 0, rgba(207,234,255,0) 72%),
    var(--sky);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  letter-spacing: .012em;
}

/* ---- 共通ナビ ---- */
.gnav-bar { background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            border-bottom: 2px solid #d5e9f7; box-shadow: 0 3px 0 rgba(11,114,172,.05); }
.gnav-logo { color: var(--ink); font-weight: 700; }
.gnav-btn { border-radius: 999px; }
.gnav-panel a:hover { background: var(--accent-soft); }

/* ============================================================
   トップ：ヒーロー（追加HTML 1ブロック）
   ============================================================ */
.d-hero {
  position: relative; margin: 8px 0 18px; padding: 24px 20px 22px; text-align: center;
  background:
    radial-gradient(circle at 12% 18%, #ffe9ae 0 7px, rgba(255,233,174,0) 8px),
    radial-gradient(circle at 90% 78%, #bfe6ff 0 9px, rgba(191,230,255,0) 10px),
    linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
  border: 3px solid #bfe2f7; border-radius: 26px; box-shadow: var(--hard-lg);
}
.d-hero .dh-kicker { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 12px; }
.d-hero .dh-kicker span {
  background: var(--sun-soft); color: var(--sun-ink); border: 2px solid #ffe3a6;
  font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 4px 11px;
}
.d-hero .dh-copy { margin: 0; font-size: 1.32rem; font-weight: 700; line-height: 1.55; color: var(--ink); }
.d-hero .dh-copy em {
  font-style: normal; color: #075782;
  background: linear-gradient(transparent 56%, var(--sun) 56%, #ffe08a 100%);
  padding: 0 6px; border-radius: 5px;
}
.d-hero .dh-sub { margin: 11px 0 0; font-size: .87rem; color: var(--ink-soft); line-height: 1.8; }
.d-hero .dh-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 15px 0 0; }
.d-hero .dh-tags span {
  font-size: .76rem; font-weight: 700; border-radius: 999px; padding: 6px 12px;
  background: #fff; border: 2px solid currentColor; box-shadow: 3px 3px 0 rgba(11,114,172,.08);
}
.d-hero .dh-tags .t-g { color: #2f7a1c; } .d-hero .dh-tags .t-b { color: #075782; }
.d-hero .dh-tags .t-o { color: #b8500f; } .d-hero .dh-tags .t-p { color: #6a35ad; }
.d-hero .dh-tags .t-t { color: #0d6b76; }
@media (max-width: 520px) { .d-hero { padding: 20px 14px; } .d-hero .dh-copy { font-size: 1.12rem; } }

/* ---- ヘッダー ---- */
header h1 { color: var(--ink); letter-spacing: .015em; }
header h1 .hl {
  color: var(--accent-dark);
  background: linear-gradient(transparent 56%, var(--sun) 56%, #ffe08a 100%);
  padding: 0 5px; border-radius: 5px;
}
header .lead { color: var(--ink-soft); }
header .logo, .logo { color: var(--ink); font-weight: 700; }
.badge {
  background: var(--accent); color: #fff; border-radius: 999px; padding: 5px 14px;
  font-weight: 700; box-shadow: 3px 3px 0 rgba(11,114,172,.18);
}
.trust span {
  background: #fff; border: 2px solid var(--line); color: var(--ink-soft);
  border-radius: 999px; padding: 5px 12px; font-weight: 700;
  box-shadow: 2px 2px 0 rgba(11,114,172,.07);
}

/* ============================================================
   カード（白いパネル＋ハード影）
   ============================================================ */
.card, .rank, .intro, .fig, .toc, .top-nores, .no-result {
  background: var(--card); border: 2px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--hard);
}
.card { padding-top: 0; overflow: hidden; }
.card > h2 {
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 78%, #ffffff) 100%);
  color: #fff; margin: 0 -18px 16px; padding: 12px 18px 12px 34px;
  font-size: 1.02rem; font-weight: 700; position: relative;
}
.card > h2::before {
  content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--sun);
}
.card h2 .num { background: #fff; color: var(--accent-dark); width: 26px; height: 26px; box-shadow: none; }
.card > h2 * { color: #fff; }

/* ---- トップ：カテゴリ見出し＝色ベタ帯＋丸ポチ ---- */
.cat-title {
  border-radius: 999px; padding: 10px 18px 10px 34px; color: #fff;
  font-size: .85rem; letter-spacing: .07em; font-weight: 700;
  margin: 34px 0 14px; position: relative; box-shadow: 4px 4px 0 rgba(11,114,172,.12);
}
.cat-title::before {
  background: var(--sun); width: 10px; height: 10px; border-radius: 50%;
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); content: "";
}
.cat-title:nth-of-type(1) { background: #31741b; box-shadow: 4px 4px 0 rgba(49,116,27,.16); }
.cat-title:nth-of-type(2) { background: #bd4c0b; box-shadow: 4px 4px 0 rgba(189,76,11,.16); }
.cat-title:nth-of-type(3) { background: #7a45bd; box-shadow: 4px 4px 0 rgba(122,69,189,.16); }

/* ---- トップ：ツール／記事カード ---- */
.tool-card, .post-card, .next-card, .ns-card {
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(11,114,172,.08); position: relative; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tool-card { padding-left: 22px; }
.tool-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: #bcd7e8; }
.tool-card:hover, .post-card:hover, .next-card:hover, .ns-card:hover {
  box-shadow: 7px 7px 0 rgba(11,114,172,.16); transform: translate(-2px, -2px);
}
.tool-card .icon, .pc-tile, .next-tile, .ns-tile { border-radius: 13px; }
.tool-card .body .name { font-weight: 700; color: var(--ink); }
.tool-card .body .desc, .pc-desc { color: var(--ink-soft); }
.ctag { font-weight: 700; border-radius: 999px; }
.ctag.new { background: #eef8e6; color: #2f7a1c; }
.ctag.hot { background: var(--sun-soft); color: var(--sun-ink); }
.rank a::before {
  background: var(--sun); color: #3d2c00; box-shadow: 2px 2px 0 rgba(140,90,0,.18);
  font-weight: 700;
}

/* ---- 検索・チップ ---- */
.topsearch input, .searchbox input {
  border: 2px solid var(--line); border-radius: 999px; background: #fff;
  box-shadow: 3px 3px 0 rgba(11,114,172,.07);
}
.topsearch input:focus, .searchbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px #cfe9fa; outline: none; }
.evchips button, .col-chips .chip {
  border: 2px solid var(--line); background: #fff; border-radius: 999px;
  font-weight: 700; padding: 11px 16px; box-shadow: 3px 3px 0 rgba(11,114,172,.07);
  transition: transform .1s ease, box-shadow .1s ease;
}
.evchips button:hover, .col-chips .chip:hover { border-color: var(--accent); background: #f3fbff; transform: translate(-1px,-1px); }
.evchips button.on, .col-chips .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- 入力 ---- */
.val-display {
  color: var(--accent-dark); font-size: 1.95rem; font-weight: 700;
  font-family: "Quicksand", -apple-system, "Hiragino Sans", sans-serif;
  font-variant-numeric: tabular-nums;
}
input[type=range] { background: var(--accent-soft); height: 10px; border-radius: 999px; }
input[type=range]::-webkit-slider-thumb { background: var(--accent); border: 4px solid #fff; box-shadow: 0 2px 7px rgba(7,87,130,.35); }
input[type=range]::-moz-range-thumb { background: var(--accent); border: 4px solid #fff; }
.toggle-row input[type=checkbox] { accent-color: var(--accent); }
select, input[type=text], input[type=number] { border-radius: 12px; }

/* ============================================================
   計算結果（数字の可読性 最優先）
   ============================================================ */
.result-hero {
  background: linear-gradient(135deg, #1a8ecc 0%, var(--accent) 45%, #075782 100%);
  border-radius: 24px; padding: 28px 18px;
  box-shadow: 8px 8px 0 rgba(7,87,130,.18);
  border: 3px solid #ffffff;
}
.result-hero.free { background: linear-gradient(135deg, #46a62c 0%, #31741b 55%, #235612 100%); box-shadow: 8px 8px 0 rgba(49,116,27,.18); }
.result-hero .total {
  font-size: 3rem; font-weight: 700; letter-spacing: -.01em; color: #fff;
  font-family: "Quicksand", -apple-system, "Hiragino Sans", sans-serif;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.result-hero .total .yen { font-size: 1.35rem; }
.note-card .row b {
  color: var(--accent-dark); font-size: 1.04rem; font-weight: 700;
  font-family: "Quicksand", -apple-system, "Hiragino Sans", sans-serif; font-variant-numeric: tabular-nums;
}
.note-card .row.is-total b { font-size: 1.24rem; }
.infobox { background: var(--accent-soft); border: 2px solid var(--line); border-radius: 14px; color: #3d4a54; }
.infobox.warn, .warn, .guide .warn { background: #fff8e5; border: 2px solid #f5e2b0; color: #7a5200; border-radius: 14px; }
.advice { background: #fff; border: 2px solid var(--line); border-left: 8px solid var(--sun); border-radius: 14px; box-shadow: var(--hard); }
.advice b, .advice .advice-links a { color: var(--accent-dark); font-weight: 700; }

/* ---- ボタン（ビタミン橙＋黄リング） ---- */
.cta a.btn, .share a, .share button { border-radius: 999px; font-weight: 700; }
.cta a.btn {
  background: linear-gradient(140deg, #c4500d, #a8420a); color: #fff;
  padding: 17px 32px; font-size: 1.05rem;
  box-shadow: 0 0 0 5px #ffe3bf, 5px 5px 0 rgba(168,66,10,.22);
}
.cta a.btn:hover { box-shadow: 0 0 0 5px #ffd79f, 7px 7px 0 rgba(168,66,10,.28); }
.share a, .share button { padding: 14px 0; border: 2px solid var(--line); box-shadow: 3px 3px 0 rgba(11,114,172,.08); }

/* ---- 表（スマホ対策 white-space / min-width / overflow-x には触れない） ---- */
.guide th, article th { background: var(--accent-soft); color: var(--accent-dark); font-weight: 700; }
.guide th, .guide td, article th, article td { border-color: var(--line); }
article tr:nth-child(even) td { background: #f7fcff; }
td.num, .guide td.num { font-family: "Quicksand", -apple-system, "Hiragino Sans", sans-serif; font-weight: 600; }

/* ============================================================
   コラム
   ============================================================ */
article h1 { color: var(--ink); }
article h2 {
  border-left: none; background: linear-gradient(90deg, var(--accent-soft), #f6fcff);
  color: var(--accent-dark); border-radius: 13px; padding: 12px 16px 12px 32px;
  margin-top: 36px; position: relative; box-shadow: 3px 3px 0 rgba(11,114,172,.07);
  border: 2px solid var(--line);
}
article h2::before {
  content: ""; position: absolute; left: 13px; top: 1.05em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--sun);
}
article h3 { color: var(--accent-dark); font-weight: 700; }
article .lead {
  background: linear-gradient(135deg, var(--sun-soft), #f2fbff); border: 2px solid #ffe3a6;
  border-radius: var(--radius); color: #3a4550; box-shadow: var(--hard);
}
.note { background: #f4fafd; border: 2px solid var(--line); border-radius: 14px; color: var(--ink-soft); }
.cta {
  border: 3px solid var(--sun); background: linear-gradient(160deg, #fffaf0, #fff);
  border-radius: 22px; box-shadow: var(--hard-lg);
}
.related { background: var(--accent-soft); border: 2px solid var(--line); border-radius: var(--radius); }
.related a, .backtop a, .next-go, .ns-go, .next-more a, .next-more2 a { color: var(--accent-dark); font-weight: 700; }
.toc { border: 2px solid var(--line); }
.toc > summary { color: var(--accent-dark); font-weight: 700; }
.toc li::before { background: var(--accent); color: #fff; }
.pc-tag { border-radius: 999px; font-weight: 700; }
.breadcrumb, .breadcrumb a { color: #5f6e79; }
.disclaimer { background: #f4fafd; border: 2px solid var(--line); border-radius: 14px; color: var(--ink-soft); }
footer { color: #5c6c77; }
footer a { color: #4d5d68; }

/* ---- 出典ボックスは現状の見た目に固定（--ink-soft の変更を打ち消す） ---- */
.sources { background: #f7f6f3; color: #697084; border-radius: 12px; }
.sources a { color: #4f6bb0; }

/* ============================================================
   ツールカードのカテゴリ色（href で判定）
   ============================================================ */
/* もらえるお金＝緑 */
.tool-card[href*="shussan/"]::before,.tool-card[href*="jidou-teate/"]::before,.tool-card[href*="ikukyu/"]::before,.tool-card[href*="shoubyou/"]::before,.tool-card[href*="kougaku/"]::before,.tool-card[href*="izoku/"]::before,.tool-card[href*="shitsugyou/"]::before,.tool-card[href*="iryouhi/"]::before{background:#3f8f2a;}
.tool-card[href*="shussan/"] .icon,.tool-card[href*="jidou-teate/"] .icon,.tool-card[href*="ikukyu/"] .icon,.tool-card[href*="shoubyou/"] .icon,.tool-card[href*="kougaku/"] .icon,.tool-card[href*="izoku/"] .icon,.tool-card[href*="shitsugyou/"] .icon,.tool-card[href*="iryouhi/"] .icon{background:#eef8e6 !important;box-shadow:inset 0 0 0 2px #3f8f2a33;}
.tool-card[href*="shussan/"]:hover,.tool-card[href*="jidou-teate/"]:hover,.tool-card[href*="ikukyu/"]:hover,.tool-card[href*="shoubyou/"]:hover,.tool-card[href*="kougaku/"]:hover,.tool-card[href*="izoku/"]:hover,.tool-card[href*="shitsugyou/"]:hover,.tool-card[href*="iryouhi/"]:hover{border-color:#3f8f2a;box-shadow:7px 7px 0 rgba(49,116,27,.18);}
/* 税金＝青 */
.tool-card[href*="shotokuzei/"]::before,.tool-card[href*="juminzei/"]::before,.tool-card[href*="furusato/"]::before,.tool-card[href*="ideco/"]::before,.tool-card[href*="fuyou/"]::before,.tool-card[href*="souzoku/"]::before,.tool-card[href*="zouyo/"]::before,.tool-card[href*="kojin/"]::before{background:#2196d4;}
.tool-card[href*="shotokuzei/"] .icon,.tool-card[href*="juminzei/"] .icon,.tool-card[href*="furusato/"] .icon,.tool-card[href*="ideco/"] .icon,.tool-card[href*="fuyou/"] .icon,.tool-card[href*="souzoku/"] .icon,.tool-card[href*="zouyo/"] .icon,.tool-card[href*="kojin/"] .icon{background:#e3f2fc !important;box-shadow:inset 0 0 0 2px #2196d433;}
.tool-card[href*="shotokuzei/"]:hover,.tool-card[href*="juminzei/"]:hover,.tool-card[href*="furusato/"]:hover,.tool-card[href*="ideco/"]:hover,.tool-card[href*="fuyou/"]:hover,.tool-card[href*="souzoku/"]:hover,.tool-card[href*="zouyo/"]:hover,.tool-card[href*="kojin/"]:hover{border-color:#2196d4;box-shadow:7px 7px 0 rgba(11,114,172,.18);}
/* 家計＝橙 */
.tool-card[href*="loan/"]::before,.tool-card[href*="kariire/"]::before,.tool-card[href*="karikae/"]::before,.tool-card[href*="kasai-hoken/"]::before,.tool-card[href*="kuruma/"]::before,.tool-card[href*="shokihiyou/"]::before,.tool-card[href*="hoiku/"]::before,.tool-card[href*="kyoiku/"]::before,.tool-card[href*="gakushi/"]::before{background:#f08a2e;}
.tool-card[href*="loan/"] .icon,.tool-card[href*="kariire/"] .icon,.tool-card[href*="karikae/"] .icon,.tool-card[href*="kasai-hoken/"] .icon,.tool-card[href*="kuruma/"] .icon,.tool-card[href*="shokihiyou/"] .icon,.tool-card[href*="hoiku/"] .icon,.tool-card[href*="kyoiku/"] .icon,.tool-card[href*="gakushi/"] .icon{background:#fff1e6 !important;box-shadow:inset 0 0 0 2px #f08a2e40;}
.tool-card[href*="loan/"]:hover,.tool-card[href*="kariire/"]:hover,.tool-card[href*="karikae/"]:hover,.tool-card[href*="kasai-hoken/"]:hover,.tool-card[href*="kuruma/"]:hover,.tool-card[href*="shokihiyou/"]:hover,.tool-card[href*="hoiku/"]:hover,.tool-card[href*="kyoiku/"]:hover,.tool-card[href*="gakushi/"]:hover{border-color:#f08a2e;box-shadow:7px 7px 0 rgba(189,76,11,.18);}
/* はたらく＝紫 */
.tool-card[href*="tedori/"]::before,.tool-card[href*="bonus/"]::before,.tool-card[href*="taishoku/"]::before,.tool-card[href*="tenshoku/"]::before,.tool-card[href*="fukugyou/"]::before{background:#9163d4;}
.tool-card[href*="tedori/"] .icon,.tool-card[href*="bonus/"] .icon,.tool-card[href*="taishoku/"] .icon,.tool-card[href*="tenshoku/"] .icon,.tool-card[href*="fukugyou/"] .icon{background:#f2ebfc !important;box-shadow:inset 0 0 0 2px #9163d440;}
.tool-card[href*="tedori/"]:hover,.tool-card[href*="bonus/"]:hover,.tool-card[href*="taishoku/"]:hover,.tool-card[href*="tenshoku/"]:hover,.tool-card[href*="fukugyou/"]:hover{border-color:#9163d4;box-shadow:7px 7px 0 rgba(122,69,189,.18);}
/* ふやす＝ティール */
.tool-card[href*="tsumitate/"]::before,.tool-card[href*="rougo/"]::before,.tool-card[href*="nenkin/"]::before,.tool-card[href*="torikuzushi/"]::before{background:#12a0b0;}
.tool-card[href*="tsumitate/"] .icon,.tool-card[href*="rougo/"] .icon,.tool-card[href*="nenkin/"] .icon,.tool-card[href*="torikuzushi/"] .icon{background:#e2f5f7 !important;box-shadow:inset 0 0 0 2px #12a0b040;}
.tool-card[href*="tsumitate/"]:hover,.tool-card[href*="rougo/"]:hover,.tool-card[href*="nenkin/"]:hover,.tool-card[href*="torikuzushi/"]:hover{border-color:#12a0b0;box-shadow:7px 7px 0 rgba(15,127,140,.18);}

/* ---- embed（埋め込み）は地色を白のままに ---- */
body.embed, html.embed body { background: #fff; }

/* ============================================================
   追い込み：参考2サイト共通の「色地の上に白いパネル」を徹底
   ============================================================ */

/* ---- コラム本文を白いパネルに載せる（article はコラムページのみに存在） ---- */
/* .wrap は max-width:680px / padding:18px。article を左右 -18px に引き出し、
   内側 padding+border を 18px 相当にして「本文の横幅は現状と同じ」を厳守する。
   影は真下方向のみ（横に出すと狭い画面で横スクロールの原因になるため）。 */
article {
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  margin: 0 -18px 8px; padding: 22px 16px 28px;
  box-shadow: 0 4px 0 rgba(11,114,172,.08);
}
article h1 { margin-top: 0; }
@media (max-width: 719px) {
  article { border-radius: 0; border-left: none; border-right: none; padding: 18px 18px 24px; box-shadow: none; }
}

/* ---- ランキングカードにも色帯の見出し ---- */
.rank { padding-top: 0; overflow: hidden; }
.rank > h2 {
  background: linear-gradient(90deg, var(--accent) 0%, #2196d4 100%);
  color: #fff; margin: 0 -16px 8px; padding: 11px 16px 11px 32px;
  font-size: .93rem; position: relative;
}
.rank > h2::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--sun);
}
.rank a { border-top-color: var(--line); }
.rank a::before { background: var(--sun); color: #3d2c00; }

/* ---- トップの大見出し「🧮 計算ツール（全32本）」を黄色の下線で飾る ---- */
.tools-lead { color: var(--accent-dark); }
.tools-h2 {
  font-size: 1.06rem; font-weight: 700; padding-bottom: 8px;
  background: linear-gradient(90deg, var(--sun) 0 64px, #ffe9b3 64px 108px, rgba(255,226,166,0) 108px) 0 100% / 100% 5px no-repeat;
}
.tools-h2::before { width: 6px; height: 20px; border-radius: 3px; background: var(--accent); }

/* ---- ヒーローの飾りをもう一段はっきりさせる ---- */
.d-hero {
  background:
    radial-gradient(circle at 7% 22%, #ffd979 0 9px, rgba(255,217,121,0) 10px),
    radial-gradient(circle at 15% 72%, #a8dcff 0 6px, rgba(168,220,255,0) 7px),
    radial-gradient(circle at 93% 26%, #a8dcff 0 7px, rgba(168,220,255,0) 8px),
    radial-gradient(circle at 86% 80%, #ffd979 0 10px, rgba(255,217,121,0) 11px),
    linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
}

/* ---- コラム一覧・関連記事まわりの小物 ---- */
.pc-tag { background: var(--accent-soft); color: var(--accent-dark); }
.col-chips .chip.on { color: #fff; }