@charset "UTF-8";
/* ==========================================================================
   みんなの税金 — グローバルシェル（ヘッダー / ナビ / パンくず / フッター）
   ※ 各ページ本文の装飾は page.html 内の <style> が担当。
     ここではサイト全体の枠だけを定義し、本文クラスとは衝突しないよう
     接頭辞付きセレクタに限定している。
   ========================================================================== */

:root {
  --color-key: #e8620e;       /* 基幹ブランドカラー（オレンジ。CTA・アクセント） */
  --color-key-dark: #b0470a;  /* 濃いオレンジ */
  --ink: #16233b;             /* 帳簿インク紺＝見出し・数字・精密さ/信頼 */
  --ink-2: #41506a;           /* サブテキスト */
  --gain: #12805a;            /* お金の緑＝得・手取り・プラスの数字にだけ */
  --paper: #fbf8f2;           /* 温かい紙の背景 */
  --line: #e7ddcd;            /* 温かいヘアライン */
  --color-text: #2b3648;
  --color-link: #1565c0;
  --color-bg: #f7f6f4;
  --color-header-bg: #ffffff;
  --color-footer-bg: #16233b;
  --color-footer-text: #c6cede;
  --content-width: 840px;
  --shell-width: 1080px;
  --font-base: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP",
               "Noto Sans CJK JP", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  font-size: 16px;
}

img { max-width: 100%; height: auto; }
a { color: var(--color-link); }

/* ---------- ヘッダー ---------- */
/* ---------- ヘッダー（単一スティッキーバー：ロゴ左／ナビ右／応援CTA） ---------- */
/* 追従要素（目次・右レールの追従枠）がヘッダーの下に潜らないための共通オフセット。
   .site-header は position:sticky・z-index:100 なので、この値より上に置くと裏に隠れる。
   ヘッダー高は言語で違う（日本語・中国語・韓国語は65px、英語はナビが折り返して111px）ため
   言語ごとに既定値を持ち、実測値での補正は tocScript() が --sticky-top を上書きして行う。 */
:root { --sticky-top: 76px; }
html[lang="en"] { --sticky-top: 122px; }

.site-header {
  background: var(--color-header-bg);
  border-bottom: 1px solid #ececec;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .03);
}
.site-header__inner {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.site-logo__icon { width: 38px; height: 38px; display: block; }
.site-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--color-key-dark);
}

/* ---------- グローバルナビ（ヘッダー右側） ---------- */
.global-nav { margin-left: auto; }
.global-nav ul.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.global-nav li { position: relative; }
.global-nav a {
  display: block;
  padding: 10px 13px;
  color: #333;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 8px;
}
.global-nav a:hover { color: var(--color-key); background: #fdf3e6; }

/* 応援CTAボタン */
.nav-cta {
  flex-shrink: 0;
  background: var(--color-key);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s;
}
.nav-cta:hover { background: var(--color-key-dark); }

/* 言語切替（翻訳ページ、および翻訳を持つ日本語ページのみ表示）
   他のナビ同様、縦に開くドロップダウンにして横幅を取らない。 */
.lang-switch { position: relative; flex-shrink: 0; margin-left: 4px; }
.lang-switch__toggle {
  display: flex; align-items: center; gap: 5px;
  padding: 9px 12px; font-size: 13.5px; font-weight: 600; color: #333;
  border-radius: 8px; white-space: nowrap; cursor: pointer; user-select: none;
}
.lang-switch__toggle::after { content: "▾"; font-size: 10px; color: #999; }
.lang-switch__toggle:hover { color: var(--color-key); background: #fdf3e6; }
.lang-switch__menu {
  position: absolute; top: 100%; right: 0; min-width: 150px;
  background: #fff; border: 1px solid #ececec; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  list-style: none; margin: 6px 0 0; padding: 6px 0; z-index: 200; display: none;
}
/* toggle と menu の 6px 隙間を透明ブリッジで埋め、ゆっくりマウスを動かしても hover が切れないようにする */
.lang-switch__menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px;
}
.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu { display: block; }
.lang-switch__menu a {
  display: block; padding: 10px 16px; font-size: 13.5px; color: #333;
  text-decoration: none; white-space: nowrap;
}
.lang-switch__menu a:hover { background: #fdf3e6; color: var(--color-key); }
.lang-switch__menu a[aria-current="true"] { color: var(--color-key); font-weight: 700; background: #fff7ef; }

/* 翻訳ページ冒頭の注記（日本語版が正本である旨） */
.i18n-note {
  background: #f5f7fa; border: 1px solid #dfe6ef; border-left: 4px solid #1565c0;
  border-radius: 8px; padding: 12px 16px; margin: 0 0 24px;
  font-size: 13.5px; line-height: 1.75; color: #445;
}
.i18n-note a { color: #1565c0; font-weight: 700; }

/* 閲覧バッジ（過去30日ユーザー数・GAより）。コラム見出し下と一覧カードに表示 */
/* 訪問バッジ（詳細ページの見出し下）：目アイコン＋「直近N人が訪問しました」 */
.views-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; color: #6b7280; white-space: nowrap; }
.views-badge b { color: #374151; font-weight: 800; font-variant-numeric: tabular-nums; }
.views-badge svg { flex-shrink: 0; opacity: .85; }
.entry-header .views-badge { margin-top: 10px; }
/* 訪問チップ（一覧カード）：サムネ上のダーク丸ピル。無サムネ時は本文に静的表示 */
.views-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(20,16,11,.62); color: #fff; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.views-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.views-chip svg { flex-shrink: 0; }
.column-card__thumb { position: relative; }
.column-card__thumb .views-chip { position: absolute; left: 8px; bottom: 8px; }
.column-card__views { display: block; margin-top: 8px; }

/* ドロップダウン（サブメニュー） */
.global-nav .has-sub > .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  display: none;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}
.global-nav .has-sub:hover > .submenu { display: flex; }
.global-nav .submenu a { padding: 11px 16px; font-weight: 500; border-top: 1px solid #f3f3f3; }
.global-nav .submenu li:first-child a { border-top: none; }

/* ハンバーガー（モバイル） */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; }
/* サブメニュー開閉トグル（モバイルのアコーディオンでのみ使用。PCでは非表示・hoverドロップダウン優先） */
.sub-toggle { display: none; }
.sub-toggle-label { display: none; }

/* ---------- パンくず ---------- */
.breadcrumb {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 12px 20px 0;
  font-size: 12.5px;
  color: #888;
}
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li::after { content: "›"; margin-left: 6px; color: #bbb; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: #888; text-decoration: none; }
.breadcrumb a:hover { color: var(--color-key); }

/* ---------- メイン ---------- */
.site-main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 20px 20px 60px;
}
.site-main--wide { max-width: var(--shell-width); }
/* トップは新着フィード＋右レールの2カラム。ヘッダー/フッターと同じ幅まで広げて横幅を活かす */
.site-main--home { max-width: var(--shell-width); }
.entry-header { margin: 8px 0 24px; }
.entry-title {
  font-size: 29px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 8px 0 14px;
  font-weight: 800;
}
.entry-eyecatch { margin: 0 0 24px; border-radius: 10px; overflow: hidden; }
.entry-content { background: #fff; padding: 28px; border-radius: 10px; }

/* ---------- コラムの目次（本文外。Qiita/Zenn風の左サイド。狭幅では本文上にインライン） ---------- */
/* 既定（〜1279px）：本文の上に出る軽量ボックス */
.toc-rail { margin: 2px 0 24px; }
.toc-rail .col-toc { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 14px 16px; }
.toc-rail .col-toc__t { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #8a8f98; margin: 0 0 8px; }
.toc-rail .col-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid #edeef0; }
.toc-rail .col-toc li { margin: 0; }
.toc-rail .col-toc a {
  display: block; padding: 6px 0 6px 14px; margin-left: -2px;
  border-left: 2px solid transparent; color: #6b7280; font-size: 13px; line-height: 1.55;
  text-decoration: none; transition: color .15s, border-color .15s;
}
.toc-rail .col-toc a:hover { color: #1f2937; }
.toc-rail .col-toc a.is-active { color: var(--color-key-dark); border-left-color: var(--color-key); font-weight: 700; }
/* インライン目次ボックス（翻訳版コラム。JAは左レール、翻訳版は本文冒頭にボックス表示） */
.entry-content .entry-toc { margin: 0 0 22px; }
.entry-content .entry-toc .col-toc { background: #fafafa; border: 1px solid #ececec; border-radius: 12px; padding: 14px 18px; }
.entry-content .entry-toc .col-toc__t { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #8a8f98; margin: 0 0 8px; text-transform: uppercase; }
.entry-content .entry-toc .col-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid #edeef0; display: grid; gap: 1px; }
.entry-content .entry-toc .col-toc li { margin: 0; }
.entry-content .entry-toc .col-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; color: #4b5563; text-decoration: none; font-size: 13.5px; line-height: 1.5; }
.entry-content .entry-toc .col-toc a:hover { color: var(--accent, #1f2937); border-left-color: var(--accent, #c9c9c9); }
/* 目次クリック時に見出しがヘッダー等で隠れないよう余白を確保 */
.entry-content .page-section h2 { scroll-margin-top: 18px; }

/* ---------- 記事末「まとめ」カード：上にキャッチワード／下に端的な解説（縦並び） ----------
   各コラムのインライン style では .summary-row が横並び(flex)で右側が詰まりやすいため、
   詳細度の高い .entry-content スコープで縦並びに統一上書きする（背景・枠色などのテーマは各記事のまま）。*/
.entry-content .summary-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.entry-content .summary-row { flex-direction: column; align-items: flex-start; gap: 5px; padding: 13px 16px; }
.entry-content .summary-label { min-width: 0; font-size: 13px; letter-spacing: .02em; }
.entry-content .summary-val { font-size: 14px; }

/* ---------- コラムのカテゴリチップ（記事冒頭・複数カテゴリ対応） ---------- */
.entry-content .col-cats { font-size: 13px; color: #888; margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entry-content .col-cats a { font-weight: 700; color: #4a5160; background: #eef1f4; border-radius: 999px; padding: 4px 12px; text-decoration: none; }
.entry-content .col-cats a:hover { background: #e2e6ec; }

/* ---------- コラムの関連記事（同カテゴリ・自動） ---------- */
.entry-content .col-related { margin: 36px 0 8px; }
.entry-content .col-related h2 { font-size: 18px; }
.entry-content .col-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.entry-content .col-related__card { display: flex; align-items: center; gap: 10px; border: 1px solid #ececec; border-radius: 10px; padding: 8px 10px; text-decoration: none; background: #fff; transition: box-shadow .15s; }
.entry-content .col-related__card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.entry-content .col-related__card img { width: 80px; height: 42px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.entry-content .col-related__card span { font-size: 13px; font-weight: 700; color: var(--color-key-dark); line-height: 1.5; }

/* フローティングの👍（画面右下・スクロールで常時表示） */
.good-fab { position: fixed; z-index: 60; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--color-key-dark, #9a5f1a); border: 2px solid var(--color-key, #d97706); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.16); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s, background .15s, color .15s, box-shadow .15s; }
.good-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.good-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.good-fab:active { transform: scale(.95); }
.good-fab__icon { font-size: 18px; line-height: 1; }
.good-fab__count { background: #f0ede8; color: #333; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 800; }
.good-fab.is-liked { background: var(--color-key, #d97706); color: #fff; border-color: var(--color-key, #d97706); }
.good-fab.is-liked .good-fab__count { background: rgba(255,255,255,.28); color: #fff; }
@keyframes good-pop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.good-fab__count.pop { animation: good-pop .3s ease; }
@media (max-width: 480px) { .good-fab { right: 14px; bottom: 14px; padding: 9px 14px; font-size: 13px; } }
/* 👍を押すと出る「シェア／応援」の促しポップオーバー */
.good-promo { position: fixed; z-index: 61; right: 20px; bottom: 76px; width: 268px; max-width: calc(100vw - 40px); background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.22); padding: 16px 16px 15px; animation: gp-in .2s ease; }
@keyframes gp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.good-promo__x { position: absolute; top: 7px; right: 10px; border: none; background: none; font-size: 19px; color: #b0b0b0; cursor: pointer; line-height: 1; padding: 2px; }
.good-promo__x:hover { color: #666; }
.good-promo__h { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: var(--color-key-dark, #9a5f1a); }
.good-promo__t { margin: 0 0 12px; font-size: 12.5px; line-height: 1.7; color: #666; }
.good-promo__share { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.good-promo .gp-btn { font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 8px; text-decoration: none; cursor: pointer; border: none; color: #fff; line-height: 1.2; }
.good-promo .gp-x { background: #111; }
.good-promo .gp-copy { background: #f0ede8; color: #444; }
.good-promo__sup { display: block; text-align: center; background: var(--color-key, #d97706); color: #fff; font-weight: 800; font-size: 13.5px; text-decoration: none; padding: 10px; border-radius: 999px; }
.good-promo__sup:hover { background: var(--color-key-dark, #9a5f1a); }
@media (max-width: 480px) { .good-promo { right: 14px; bottom: 66px; } }

/* 記事末尾「この記事は役に立ちましたか？」フィードバック（コラムのみ・.sb-btn は share-band と共用） */
.entry-content .fb-box { margin: 40px 0 8px; padding: 22px 20px; background: #faf7f2; border: 1px solid #f0e6d8; border-radius: 14px; text-align: center; }
.entry-content .fb-box__q { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: #3a3a3a; }
.entry-content .fb-box__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.entry-content .fb-btn { font-size: 14px; font-weight: 800; padding: 10px 24px; border-radius: 999px; border: 2px solid var(--color-key, #d97706); background: #fff; color: var(--color-key-dark, #9a5f1a); cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.entry-content .fb-btn:hover { background: var(--color-key, #d97706); color: #fff; }
.entry-content .fb-btn:active { transform: scale(.96); }
.entry-content .fb-btn--no { border-color: #cfc9c0; color: #857f74; }
.entry-content .fb-btn--no:hover { background: #948d82; border-color: #948d82; color: #fff; }
.entry-content .fb-box__note { margin: 0; font-size: 12px; color: #a09a90; }
.entry-content .fb-box__thanks { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--color-key-dark, #9a5f1a); }
.entry-content .fb-box__t { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: #666; }
.entry-content .fb-box__t:last-child { margin-bottom: 0; }
.entry-content .fb-box__share { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

/* 全ページ共通「シェアで応援」バー */
.share-band { background: #faf7f2; border-top: 1px solid #f0e6d8; }
.share-band__inner { max-width: var(--shell-width); margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.share-band__label { font-size: 14px; font-weight: 700; color: #555; }
.share-band__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sb-btn { font-size: 13px; font-weight: 700; padding: 8px 15px; border-radius: 8px; text-decoration: none; color: #fff; border: none; cursor: pointer; line-height: 1.3; white-space: nowrap; }
.sb-btn:hover { opacity: .9; }
.sb-x { background: #111; }
.sb-copy { background: #e8e2d8; color: #444; }
@media (max-width: 480px) { .share-band__inner { flex-direction: column; gap: 10px; padding: 18px 16px; } }

/* 自社サイト「泊まり火」への送客バナー（全ページ末尾・PR・OGP画像使用） */
.tomaribi-pr { max-width: 520px; margin: 22px auto 28px; padding: 0 16px; }
.tomaribi-pr__link { display: block; position: relative; border: 1px solid #e7ded0; border-radius: 16px; overflow: hidden; background: #fbf8f2; text-decoration: none; box-shadow: 0 4px 16px rgba(80,60,30,.08); transition: box-shadow .2s, transform .2s; }
.tomaribi-pr__link:hover { box-shadow: 0 10px 28px rgba(80,60,30,.16); transform: translateY(-2px); }
.tomaribi-pr__badge { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #8a7a5c; background: rgba(255,255,255,.85); border: 1px solid #e7ded0; border-radius: 6px; padding: 2px 7px; }
.tomaribi-pr__img { display: block; width: 100%; height: auto; }
.tomaribi-pr__cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; background: #fbf8f2; border-top: 1px solid #efe7d8; color: #6b5836; font-size: 14.5px; font-weight: 700; }
.tomaribi-pr__cta-arw { color: #b08e4f; font-weight: 800; transition: transform .2s; }
.tomaribi-pr__link:hover .tomaribi-pr__cta-arw { transform: translateX(4px); }
@media (max-width: 480px) { .tomaribi-pr__cta { font-size: 13px; padding: 12px 14px; } }

/* みんなの集合知：投票ウィジェット（D1バックエンド） */
.mpoll { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 22px 0; }
.mpoll__q { font-size: 15.5px; font-weight: 800; color: var(--ink); margin: 0 0 13px; line-height: 1.6; }
.mpoll__badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--color-key); border-radius: 6px; padding: 3px 8px; margin-right: 8px; vertical-align: 2px; }
.mpoll__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mpoll__opt { font-size: 13.5px; font-weight: 700; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: border-color .15s, color .15s; }
.mpoll__opt:hover { border-color: var(--color-key); color: var(--color-key-dark); }
.mpoll__opt:disabled { opacity: .5; cursor: default; }
.mpoll__see { background: none; border: 0; color: var(--ink-2); font-size: 12.5px; text-decoration: underline; cursor: pointer; margin: 11px 0 0; padding: 2px 0; }
.mpoll__result { margin-top: 4px; display: flex; flex-direction: column; gap: 11px; }
.mpoll__brow { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); margin-bottom: 4px; font-weight: 600; }
.mpoll__bar.is-mine .mpoll__brow { color: var(--gain); font-weight: 800; }
.mpoll__bpct { font-variant-numeric: tabular-nums; font-weight: 800; }
.mpoll__btrack { height: 12px; background: #ece4d6; border-radius: 999px; overflow: hidden; }
.mpoll__bfill { display: block; height: 100%; background: var(--color-key); border-radius: 999px; transition: width .55s ease; }
.mpoll__bar.is-mine .mpoll__bfill { background: var(--gain); }
.mpoll__meta { font-size: 12px; color: var(--ink-2); margin: 13px 0 0; font-variant-numeric: tabular-nums; }

/* ---------- コラムのカテゴリバー ---------- */
.cat-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.cat-bar a, .cat-bar button { font: inherit; font-size: 13px; font-weight: 700; color: var(--color-key-dark); background: #f3ece0; border: 0; border-radius: 999px; padding: 7px 14px; text-decoration: none; cursor: pointer; }
.cat-bar a:hover, .cat-bar button:hover { background: #fde0b4; }
.cat-bar a[aria-current="page"], .cat-bar button[aria-current="page"] { background: var(--color-key); color: #fff; cursor: default; }

/* コラム一覧の並び順切替（新着順／人気順） */
.sort-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -12px 0 20px; }
.sort-bar__label { font-size: 12.5px; color: #888; margin-right: 2px; }
.sort-bar a, .sort-bar button { font: inherit; font-size: 13px; font-weight: 700; color: #666; background: #fff; border: 1px solid #e2dccd; border-radius: 999px; padding: 6px 14px; text-decoration: none; cursor: pointer; }
.sort-bar a:hover, .sort-bar button:hover { border-color: var(--color-key); color: var(--color-key-dark); }
.sort-bar a[aria-current="page"], .sort-bar button[aria-current="page"] { background: var(--color-key-dark); border-color: var(--color-key-dark); color: #fff; cursor: default; }

/* ---------- 固定ページ共通ヘッダー（旧 page-hero を統一・左寄せで軽量に） ---------- */
.page-head {
  margin: 6px 0 28px;
  padding: 22px 26px;
  background: #faf7f2;
  border-left: 5px solid var(--color-key);
  border-radius: 0 12px 12px 0;
}
.page-head h1 { font-size: 30px; line-height: 1.45; margin: 0 0 12px; color: var(--color-key-dark); font-weight: 800; }
.page-head .page-head__lead { font-size: 17px; font-weight: 700; color: #333; margin: 0 0 10px; line-height: 1.7; }
.page-head .page-head__desc { font-size: 15px; line-height: 1.9; color: #555; margin: 0; }
.page-head .page-head__desc + .page-head__desc { margin-top: 10px; }
.page-head .page-head__lead .yogo-link, .page-head .page-head__desc .yogo-link { color: var(--color-key-dark); border-bottom: 1px dashed var(--color-key); }
@media (max-width: 480px) {
  .page-head { padding: 18px 18px; }
  .page-head h1 { font-size: 23px; }
  .page-head .page-head__lead { font-size: 15px; }
}

/* ---------- コラム一覧カード ---------- */
.column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.column-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(22,35,59,.05);
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.column-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(22,35,59,.10); border-color: #d9cdb8; }
.column-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.column-card__thumb { aspect-ratio: 1200 / 630; background: #f0ede8; overflow: hidden; }
.column-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.column-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.column-card__title { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.5; letter-spacing: -.005em; }
.column-card__desc { font-size: 13px; color: #666; line-height: 1.7; }

/* ---------- コラム一覧のページ送り ---------- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 36px 0 8px; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; }
.pager__n { color: var(--color-key-dark); background: #fff; border: 1px solid #e6ddd0; }
.pager__n:hover { background: #fff7ed; border-color: var(--color-key); }
.pager__n.is-cur { background: var(--color-key); color: #fff; border-color: var(--color-key); }
.pager__edge { color: var(--color-key-dark); background: #fff; border: 1px solid #e6ddd0; }
.pager__edge:hover { background: #fff7ed; border-color: var(--color-key); }
.pager__edge.is-off { color: #bbb; background: #f5f5f5; border: 1px solid #eee; pointer-events: none; }
@media (max-width: 480px) {
  .pager a, .pager span { min-width: 36px; height: 36px; padding: 0 9px; font-size: 13px; }
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 40px 20px 28px;
}
.site-footer__inner { max-width: var(--shell-width); margin: 0 auto; }
.footer-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-social__label { font-size: 13px; font-weight: 700; color: #d7d7d7; margin-right: 4px; }
.footer-social__link { font-size: 13px; font-weight: 700; text-decoration: none; color: #fff; padding: 7px 16px; border-radius: 999px; }
.footer-social__link.fs-x { background: #000; border: 1px solid #444; }
.footer-social__link.fs-note { background: #2cb696; }
.footer-social__link:hover { opacity: .88; }
.footer-nav ul { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a { color: var(--color-footer-text); text-decoration: none; font-size: 14px; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
/* アフィリエイト開示（Amazonアソシエイト運営規約が求める明瞭な表示）。
   本文と同等の可読性を確保するため、コピーライトより明るい色・広い行間にする。 */
.footer-disclosure { font-size: 13px; line-height: 1.8; color: var(--color-footer-text); margin: 0 0 10px; max-width: 68em; }
.footer-copy { font-size: 13px; color: #8f8f8f; }

/* ==========================================================================
   記事本文の共通コンポーネント（コラム = .entry-content 内）
   ※ 各記事の <style> はこれらを上書き可能（body 内のため後勝ち）。
     テーマ色は記事側で --accent / --accent-dark を設定して変える。
     tip / ok / ng などの意味色は固定。
   ========================================================================== */
.entry-content {
  --accent: #e8620e;        /* 既定テーマ色＝基幹ブランド オレンジ（記事側で上書き可） */
  --accent-dark: #b0470a;   /* 見出し文字などの濃いオレンジ */
}

.entry-content .page-section { margin-bottom: 40px; }
.entry-content .page-section h2 { font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; margin-bottom: 18px; padding-bottom: 11px; position: relative; border-bottom: 1px solid var(--line); }
.entry-content .page-section h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 42px; height: 3px; background: var(--accent); border-radius: 2px; }
.entry-content .page-section p { font-size: 15px; line-height: 1.9; color: #3a4356; margin: 0 0 14px; }
.entry-content .sub-heading { font-size: 17px; margin: 26px 0 10px; color: var(--ink); font-weight: 700; border-left: 4px solid var(--accent); padding-left: 12px; }

.entry-content .lead { font-size: 16px; line-height: 2; color: #333; }
.entry-content .entry-meta { font-size: 13px; color: #888; margin: 0 0 24px; }

/* 意味色は3系統でハッキリ分ける：info=ブランドのティール（中立）／tip=アンバー（お得・ヒント）／alert=レッド（注意） */
.entry-content .info-box { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 18px 0; }
.entry-content .info-box-title { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.entry-content .info-box p { margin: 0; font-size: 14px; line-height: 1.85; }

.entry-content .tip-box { background: #edf7f1; border: 1px solid #cfe8da; border-left: 4px solid var(--gain); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 18px 0; }
.entry-content .tip-title { font-size: 14px; font-weight: 800; color: #0f6b4a; margin-bottom: 8px; }
.entry-content .tip-box p { margin: 0; font-size: 14px; line-height: 1.85; }

/* 汎用・横棒グラフ（依存ゼロ／レスポンシブ／テーマ色対応／数値は常時表示でアクセシブル）
   使い方: <figure class="mbar" role="img" aria-label="…要約…">
             <figcaption class="mbar__title">タイトル</figcaption>
             <p class="mbar__cap">出典・注記</p>
             <div class="mbar__row mbar__row--hi"><span class="mbar__label">ラベル</span>
               <span class="mbar__track"><span class="mbar__fill" style="width:100%"></span></span>
               <span class="mbar__val">260万円</span></div> … </figure> */
.entry-content .mbar { margin: 22px 0; padding: 16px 18px; background: #fbfbfc; border: 1px solid #ececf0; border-radius: 12px; }
.entry-content .mbar__title { font-size: 15px; font-weight: 800; color: var(--accent-dark, #333); margin: 0 0 2px; }
.entry-content .mbar__cap { font-size: 12px; color: #8a8a93; margin: 0 0 12px; line-height: 1.6; }
.entry-content .mbar__row { display: grid; grid-template-columns: minmax(76px, 30%) 1fr auto; align-items: center; gap: 10px; margin: 9px 0; }
.entry-content .mbar__label { font-size: 13px; color: #444; line-height: 1.35; }
.entry-content .mbar__track { background: #edeef1; border-radius: 6px; height: 24px; overflow: hidden; }
.entry-content .mbar__fill { display: block; height: 100%; border-radius: 6px; background: var(--accent, #1565c0); min-width: 4px; }
.entry-content .mbar__val { font-size: 13px; font-weight: 800; color: #333; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry-content .mbar__row--hi .mbar__fill { background: var(--accent-dark, #7f0000); }
.entry-content .mbar__row--hi .mbar__label,
.entry-content .mbar__row--hi .mbar__val { font-weight: 800; color: var(--accent-dark, #111); }
.entry-content .mbar__row--mut .mbar__fill { background: #b9c0cc; }
@media (max-width: 520px) {
  .entry-content .mbar__row { grid-template-columns: 1fr auto; }
  .entry-content .mbar__track { grid-column: 1 / -1; order: 3; height: 20px; }
}

.entry-content .alert-box { background: #fdeceb; border-left: 4px solid #e0443a; border-radius: 0 10px 10px 0; padding: 16px 20px; margin: 18px 0; }
.entry-content .alert-title { font-size: 14px; font-weight: 700; color: #c0392b; margin-bottom: 8px; }
.entry-content .alert-box p { margin: 0; font-size: 14px; line-height: 1.8; }

.entry-content .svg-fig { margin: 22px 0; text-align: center; }
.entry-content .svg-fig svg { max-width: 640px; width: 100%; height: auto; }
.entry-content .svg-fig figcaption { font-size: 13px; color: #777; margin-top: 8px; line-height: 1.6; }

.entry-content .calc-box { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 20px 0; font-variant-numeric: tabular-nums; }
.entry-content .calc-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.entry-content .formula-main { font-size: 17px; font-weight: 700; color: var(--ink); }

.entry-content .table-wrap { overflow-x: auto; margin: 14px 0 22px; }
.entry-content .info-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.entry-content .info-table th { background: var(--ink); color: #fff; font-weight: 700; padding: 11px 14px; text-align: left; }
.entry-content .info-table td { padding: 10px 14px; border-bottom: 1px solid #eef0f3; }
.entry-content .info-table tr:nth-child(even) td { background: #faf7f2; }

.entry-content .ok-ng-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0 26px; }
.entry-content .ok-card { background: #eff6f0; border: 1px solid #c3ddc5; border-radius: 10px; padding: 18px; }
.entry-content .ng-card { background: #f9efef; border: 1px solid #ddb9b9; border-radius: 10px; padding: 18px; }
.entry-content .ok-card h4 { color: #2f7a37; margin: 0 0 10px; font-size: 14px; }
.entry-content .ng-card h4 { color: #b04a40; margin: 0 0 10px; font-size: 14px; }
.entry-content .ok-card ul, .entry-content .ng-card ul { margin: 0; padding-left: 18px; font-size: 13px; color: #444; line-height: 2; }

.entry-content .step-list { list-style: none; counter-reset: step; padding: 0; margin: 16px 0 22px; }
.entry-content .step-list li { position: relative; padding: 12px 14px 12px 56px; margin-bottom: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; font-size: 14px; line-height: 1.8; color: #3a4356; }
.entry-content .step-list li::before { counter-increment: step; content: counter(step); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }

.entry-content .faq-item { border-bottom: 1px solid #ececf0; padding: 16px 0; }
.entry-content .faq-q { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0 0 8px; padding-left: 26px; position: relative; }
.entry-content .faq-q::before { content: "Q"; position: absolute; left: 0; top: -2px; color: var(--accent); font-size: 17px; font-weight: 800; }
.entry-content .faq-a { font-size: 14px; line-height: 1.9; color: #444; margin: 0; padding-left: 26px; }

.entry-content .related-links { margin: 14px 0 0; padding-left: 18px; }
.entry-content .related-links li { font-size: 14px; line-height: 2; }
.entry-content .source-note { font-size: 12px; color: #888; line-height: 1.9; border-top: 1px solid #eee; margin-top: 32px; padding-top: 16px; }

/* 記事末の信頼シグナル（運営者・公開日・免責） */
.entry-content .entry-foot { margin-top: 40px; padding: 18px 20px; background: #f7f6f4; border: 1px solid #ececec; border-radius: 10px; }
.entry-content .entry-foot__meta { font-size: 13px; font-weight: 700; color: #555; margin: 0 0 8px; }
.entry-content .entry-foot__byline { font-size: 12.5px; line-height: 1.85; color: #666; margin: 0 0 8px; }
.entry-content .entry-foot__byline a { color: var(--color-link); }
.entry-content .entry-foot__disc { font-size: 12.5px; line-height: 1.85; color: #777; margin: 0; }
.entry-content .entry-foot__disc a { color: var(--color-link); }

@media screen and (max-width: 480px) {
  .entry-content .ok-ng-grid { grid-template-columns: 1fr; }
  .entry-content .page-section h2 { font-size: 20px; }
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width: 1023px) {
  .entry-content { padding: 22px; }
}

/* モバイルのグローバルナビ＝全画面ダークオーバーレイのドロワー（www.tsr-net.co.jp を参考）。
   ・ハンバーガーはヘッダー内に残し ☰⇄✕ で開閉ボタンを兼ねる
   ・親項目はハブへのリンクのまま、右の矢印でサブメニューをアコーディオン開閉（JSなし・checkbox方式） */
@media screen and (max-width: 834px) {
  .site-header__inner { gap: 8px; padding: 9px 14px; }
  .site-logo { flex: 1 1 auto; min-width: 0; gap: 8px; position: relative; z-index: 120; } /* オーバーレイ(z90)より前面＝開いてもロゴを残す */
  .site-logo__icon { width: 30px; height: 30px; flex-shrink: 0; }
  .site-title { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-cta { order: 1; flex-shrink: 0; padding: 7px 14px; font-size: 12.5px; position: relative; z-index: 120; }

  /* ハンバーガー（☰⇄✕。オーバーレイより前面＝閉じるボタンを兼ねる） */
  .nav-toggle-label {
    order: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-right: -6px; flex-shrink: 0;
    position: relative; z-index: 120; cursor: pointer; user-select: none;
    color: var(--color-key-dark); -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle-label::before { content: "\2630"; font-size: 24px; line-height: 1; }
  .nav-toggle:checked ~ .nav-toggle-label::before { content: "\2715"; font-size: 22px; }

  /* 開いている間はヘッダーを透過させ、全画面ダークに溶け込ませる（:has 未対応でも開閉は成立） */
  .site-header:has(.nav-toggle:checked) { background: transparent; border-bottom-color: transparent; box-shadow: none; }
  .site-header:has(.nav-toggle:checked) .site-title { color: #fff; }
  .site-header:has(.nav-toggle:checked) .nav-toggle-label { color: #fff; }

  /* ドロワー本体（全画面・縦並び・内部スクロール） */
  .global-nav {
    position: fixed; inset: 0; z-index: 90; margin-left: 0;
    background: var(--ink);
    padding: 58px 0 max(24px, env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-toggle:checked ~ .global-nav { opacity: 1; visibility: visible; transform: none; }

  .global-nav ul.menu { display: flex; flex-direction: column; width: 100%; }
  .global-nav > ul.menu > li { border-top: 1px solid rgba(255,255,255,.09); }
  .global-nav > ul.menu > li:first-child { border-top: none; }
  .global-nav a { color: #f4f6fa; font-size: 16px; font-weight: 600; border-radius: 0; white-space: normal; }
  .global-nav > ul.menu > li > a { padding: 15px 22px; }
  .global-nav a:hover, .global-nav a:active { background: rgba(255,255,255,.06); color: #fff; }

  /* アコーディオン（親テキスト＝リンク／右の▾で開閉） */
  .global-nav .has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .global-nav .has-sub > a { flex: 1 1 auto; min-width: 0; }
  .sub-toggle-label {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; align-self: stretch; flex-shrink: 0; cursor: pointer;
    color: #aeb8c7; -webkit-tap-highlight-color: transparent;
  }
  .sub-toggle-label::before { content: "\25BE"; font-size: 15px; transition: transform .2s ease; }
  .sub-toggle:checked ~ .sub-toggle-label { color: var(--color-key); }
  .sub-toggle:checked ~ .sub-toggle-label::before { transform: rotate(180deg); }

  .global-nav .has-sub > .submenu {
    position: static; display: none; flex-direction: column;
    width: 100%; min-width: 0; background: rgba(0,0,0,.22); border: none; box-shadow: none;
  }
  .global-nav .has-sub:hover > .submenu { display: none; } /* タッチ端末での誤展開（hover）を無効化 */
  .global-nav .sub-toggle:checked ~ .submenu { display: flex; }
  .global-nav .submenu li { border-top: 1px solid rgba(255,255,255,.06); }
  .global-nav .submenu a { padding: 13px 22px 13px 34px; font-weight: 500; font-size: 14.5px; color: #cdd5e1; border-radius: 0; }

  /* 言語切替：ドロワー下部の固定ストリップ（メニューを開いた時だけ表示） */
  .lang-switch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; margin: 0; display: none;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: #0f1830; border-top: 1px solid rgba(255,255,255,.12); }
  .nav-toggle:checked ~ .lang-switch { display: block; }
  .lang-switch__toggle { display: none; }
  /* PC用の :hover / :focus-within 絶対配置ドロップダウン規則を打ち消し、ピル（実リンク）を横並びで表示 */
  .lang-switch__menu,
  .lang-switch:hover .lang-switch__menu,
  .lang-switch:focus-within .lang-switch__menu {
    position: static; display: flex; flex-wrap: wrap; gap: 8px;
    box-shadow: none; border: none; padding: 0; margin: 0; min-width: 0; background: none;
  }
  .lang-switch__menu a { padding: 7px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #e8edf4; }
  .lang-switch__menu a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .lang-switch__menu a[aria-current="true"] { background: var(--color-key); color: #fff; border-color: var(--color-key); }
}

@media screen and (max-width: 480px) {
  body { font-size: 15px; }
  .entry-title { font-size: 23px; }
  .entry-content { padding: 18px 16px; }
  .site-main { padding: 14px 14px 48px; }
}

/* 記事内の計算ツール／税金カレンダーへの誘導CTA（テーマ色 --accent に追従） */
.entry-content .tool-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent, #c62828) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #c62828) 35%, #fff);
  border-left: 5px solid var(--accent, #c62828);
  border-radius: 10px; padding: 14px 18px; margin: 18px 0;
}
.entry-content .tool-cta .tool-cta-txt {
  flex: 1; min-width: 200px; font-size: 14px; color: #333; line-height: 1.7;
}
.entry-content .tool-cta .tool-cta-txt b { color: var(--accent-dark, #7f0000); }
.entry-content a.tool-cta-btn {
  flex-shrink: 0; display: inline-block;
  background: var(--accent, #c62828); color: #fff; font-weight: 700; font-size: 14px;
  text-decoration: none; padding: 10px 20px; border-radius: 8px; white-space: nowrap;
}
.entry-content a.tool-cta-btn:hover { background: var(--accent-dark, #7f0000); }
@media screen and (max-width: 480px) {
  .entry-content a.tool-cta-btn { width: 100%; text-align: center; }
}

/* 記事内のAmazonアソシエイト広告（ランダム配置・読み込み毎にローテーション） */
.amazon-pr {
  display: block; margin: 26px 0; padding: 16px 18px;
  background: #fffaf2; border: 1px solid #f0d9b5; border-left: 5px solid #ff9900;
  border-radius: 0 12px 12px 0; position: relative;
}
.amazon-pr__tag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
/* 「おすすめ書籍」等＝推薦バッジ（広告色を出さず推薦であることを強調） */
.amazon-pr__cat {
  font-size: 11px; font-weight: 700; color: #1f7a3d;
  background: #e3f5e9; border: 1px solid #b7e2c5; border-radius: 4px; padding: 2px 8px;
}
/* PR表記＝景表法（ステマ規制）対応の最小限の明示。目立たせず残す */
.amazon-pr__pr { font-size: 10px; font-weight: 600; color: #9a9a9a; letter-spacing: .5px; }
/* ライブ価格（PA-API）。取得できた時だけ .has-price で表示＝空枠を出さずレイアウトシフトを防ぐ */
.amazon-pr__price { display: none; font-weight: 800; font-size: 18px; color: #b12704; line-height: 1.2; }
.amazon-pr.has-price .amazon-pr__price, .rail-ad.has-price .amazon-pr__price { display: inline-block; }
.amazon-pr__note { display: none; font-size: 10px; color: #999; line-height: 1.4; }
.has-price .amazon-pr__note { display: block; }
a.amazon-pr__link {
  display: flex; align-items: center; gap: 16px;
  text-decoration: none; color: var(--color-key-dark);
}
.amazon-pr__img {
  flex-shrink: 0; width: 96px; height: 96px; object-fit: contain;
  border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.amazon-pr__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.amazon-pr__t { font-weight: 700; font-size: 15px; line-height: 1.6; }
.amazon-pr__cta {
  align-self: flex-start; background: #ff9900; color: #1a1a1a; font-size: 14px; font-weight: 700;
  padding: 9px 18px; border-radius: 8px; white-space: nowrap;
}
a.amazon-pr__link:hover .amazon-pr__cta { background: #f08800; }
@media (max-width: 480px) {
  .amazon-pr__link { flex-direction: column; align-items: flex-start; }
  .amazon-pr__cta { width: 100%; text-align: center; }
}

/* Amazon星評価バー（評価値の割合だけ金色で塗る） */
.ad-rate { display: inline-flex; align-items: center; gap: 4px; }
.ad-stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; color: #dcdcdc; }
.ad-stars::before { content: "★★★★★"; }
.ad-stars__on { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #ffa41c; }
.ad-stars__on::before { content: "★★★★★"; }
.ad-stars__num { font-size: 12px; font-weight: 700; color: #b66800; }
.ad-stars__cnt { font-size: 11px; color: #999; }

/* コラム本文＋左右レールのレイアウト。PCのみレール表示で、レールは本文と一緒にスクロール（固定しない）。 */
.site-main--article { max-width: 1440px; } /* 右レール広告を約1.5倍（最大約276px）で表示できる幅 */
.col-article { max-width: 840px; margin: 0 auto; min-width: 0; }
.side-rail { display: none; }
@media (min-width: 1280px) {
  /* 左右の列は minmax(0,1fr)。素の 1fr（＝minmax(auto,1fr)）だと、右レールの広告素材の
     min-content 幅が大きいときに右列がその幅まで膨らみ、余りが無くなって左の目次列が数pxまで
     潰れることがある（2026-08-29に本番で発生）。0 を下限にして左右を必ず等分にする。 */
  .col-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 840px) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  /* 見出し+目次は上段（中央）。本文と左右レールはその下の行に並べ、上側レールが本文TOPの高さから始まる。 */
  .col-head { grid-column: 2; grid-row: 1; }
  .col-article { grid-column: 2; grid-row: 2; max-width: none; margin: 0; }
  .side-rail--left  { grid-column: 1; }
  /* 1枚目の広告がファーストビューに入らないよう、右レールは約1画面分下から開始する */
  .side-rail--right { grid-column: 3; padding-top: 70vh; }
  /* 目次は左列にスティッキー配置（Qiita/Zenn風）。本文と一緒にスクロールせず追従。
     top はヘッダー（.site-header は position:sticky・高さ65px・z-index:100）の下に潜らない値にする。
     16px にしていた頃は追従中に上49pxがヘッダーの裏に隠れ、「目次」の見出しと1項目目が見えなかった
     （2026-08-31 修正）。右レールの追従枠と同じ 76px にそろえてある。
     max-height は上76px＋下16pxを引いた残り。項目が多い記事は枠内でスクロールする。 */
  .toc-rail { grid-column: 1; grid-row: 2; position: sticky; top: var(--sticky-top); align-self: start; max-height: calc(100vh - var(--sticky-top) - 16px); overflow-y: auto; margin: 0; padding-right: 4px; }
  .toc-rail .col-toc { background: transparent; border: none; border-radius: 0; padding: 0; }
  .toc-rail .col-toc__t { padding-left: 14px; }
  /* 各サイドに上下2枚（計4枚）。通常フロー＝固定されず本文と一緒に流れる。
     align-self:stretch で溝を本文の高さまで伸ばし、space-between で上端（本文TOP）・下端に配置。 */
  .side-rail { grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; align-self: stretch; justify-self: center; width: min(300px, 100%); } /* A8バナー(300px)を列幅いっぱいまで拡大表示（画面幅1440pxで約276px） */
  /* コンテンツ枠入りレール（コラム・ITmedia型）：space-between で広告を空中に散らさず上から詰める。
     先頭がランキング枠（コンテンツ）になるため、ファーストビュー避けの 70vh 下げも不要。 */
  .side-rail--packed { justify-content: flex-start; }
  .side-rail--right.side-rail--packed { padding-top: 0; }
  .amazon-pr { display: none; }   /* PCはレールに集約・本文内は出さない */
}
.rail-ad { background: #fffaf2; border: 1px solid #f0d9b5; border-radius: 12px; padding: 14px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.rail-ad__tag { display: inline-flex; align-items: center; gap: 6px; }
.rail-ad__link { display: block; text-decoration: none; color: var(--color-key-dark); }
.rail-ad__img { display: block; width: 140px; height: 186px; object-fit: contain; border-radius: 4px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.15); margin: 10px auto 0; }
.rail-ad__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.45; margin: 10px 0 6px; }
.rail-ad .ad-rate { justify-content: center; margin-bottom: 10px; }
.rail-ad__cta { display: block; background: #ff9900; color: #1a1a1a; font-size: 13px; font-weight: 700; padding: 8px 0; border-radius: 8px; }
.rail-ad__link:hover .rail-ad__cta { background: #f08800; }

/* PC右レールのコンテンツ枠（よく読まれている/新着。広告の合間に置く。レールごとモバイル非表示） */
.rail-mod { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 14px 16px; }
.rail-mod__t { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #8a8f98; margin: 0 0 6px; }
.rail-mod__list { list-style: none; margin: 0; padding: 0; counter-reset: railrank; }
.rail-mod__list li { margin: 0; border-top: 1px solid #f2f3f5; }
.rail-mod__list li:first-child { border-top: none; }
.rail-mod__list a { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; text-decoration: none; color: #333; font-size: 13px; line-height: 1.5; }
.rail-mod__list a:hover .rail-mod__title { color: var(--color-key-dark); text-decoration: underline; }
.rail-mod--rank .rail-mod__list a::before { counter-increment: railrank; content: counter(railrank); flex: none; width: 20px; height: 20px; border-radius: 4px; background: #eef1f4; color: #6b7280; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.rail-mod--rank .rail-mod__list li:nth-child(-n+3) a::before { background: var(--color-key); color: #fff; }
.rail-mod__thumb { flex: none; width: 72px; height: 38px; object-fit: cover; border-radius: 6px; background: #f4f4f4; }
/* 「あなたへのおすすめ」：閲覧履歴からの推薦。パーソナライズを示すキー色のアクセント */
.rail-mod--reco { border-color: var(--color-key); box-shadow: 0 0 0 2px rgba(232,98,14,.06); }
.rail-mod--reco .rail-mod__t { color: var(--color-key-dark); }
.rail-mod--reco .rail-mod__t::before { content: "★ "; }
.rail-mod__body { min-width: 0; }
.rail-mod__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.rail-mod__date { display: block; font-size: 11px; color: #9aa0a8; margin-top: 2px; }

/* 記事内の統計・比較グラフ（インラインSVG） */
.entry-content .chart {
  margin: 22px 0; padding: 16px 18px;
  border: 1px solid #ececec; border-radius: 12px; background: #fff;
}
.entry-content .chart .chart-title {
  font-size: 15px; font-weight: 700; line-height: 1.5;
  color: var(--accent-dark, #7f0000); margin: 0 0 10px;
}
.entry-content .chart svg { display: block; max-width: 600px; margin: 0 auto; }
.entry-content .chart .chart-source { font-size: 12px; color: #888; margin: 8px 0 0; }
.entry-content .chart .chart-reuse { font-size: 12px; color: #aaa; margin: 6px 0 0; }
.entry-content .chart .chart-reuse a { color: var(--accent, #c62828); text-decoration: none; }
.entry-content .chart .chart-reuse a:hover { text-decoration: underline; }

/* ---- 今日やることボックス（コラム末の実践アクション・記事のaccent色を継承） ---- */
.entry-content .action-box { background: #fff; border: 2px solid var(--accent, #c62828); border-radius: 14px; padding: 20px 22px; margin: 30px 0; }
.entry-content .action-box__t { display: inline-block; font-size: 13px; font-weight: 800; color: #fff; background: var(--accent, #c62828); border-radius: 999px; padding: 5px 16px; margin: 0 0 12px; letter-spacing: .04em; }
.entry-content .action-box ol { margin: 0; padding-left: 24px; }
.entry-content .action-box li { font-size: 14.5px; line-height: 1.9; color: #333; margin-bottom: 6px; }
.entry-content .action-box li:last-child { margin-bottom: 0; }
.entry-content .action-box__more { font-size: 13px; color: #777; margin: 10px 0 0; }

/* ---- A8.net バナー（PC=右レール / モバイル=記事末に1件のみ） ---- */
/* line-height:0 でインライン画像の行間余白を消し、計測用1×1ピクセルは absolute でレイアウトから外す */
.a8-pr { position: relative; text-align: center; line-height: 0; }
.a8-pr__label { display: block; font-size: 10px; font-weight: 600; color: #9a9a9a; letter-spacing: .5px; text-align: left; margin: 0 0 4px; line-height: 1.4; }
/* 素材に添える一言（何のPRかを画像だけに頼らず伝える）。PR表記の下・素材の上に置く */
.a8-pr__note { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; line-height: 1.5; color: #444; text-align: left; }
.a8-pr img { max-width: 100%; height: auto; vertical-align: bottom; }
.a8-pr > img { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }
.a8-pr--rail { background: #fff; border: 1px solid #e7e7e7; border-radius: 12px; padding: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
/* レール最後の1枚はスクロールに追従（残りのレール全高を占める枠の中で sticky） */
/* PC右レールの追従枠。最後の2枚（通常のバナー＋カルーセル）をまとめて追従させる。
   以前は最後の1枚だけを固定していたため、追従中は画面上部に1枚だけが残り下半分（実測約400px）が
   空いていた。2枚を1つの箱に入れて解消している（2026-08-31）。
   ※ 箱に min-height:100vh と justify-content:flex-end を与えて「画面下端に固定」も試したが、
     余った高さがそのまま広告の上の空白になり、画面が高いほど広がった（実測 800px高で124px、
     1000px高で324px）。レールは通常フローなので予約した高さは必ず空白として見える。
     bottom 指定のスティッキーは上スクロール時にしか効かずこの用途では機能しない。
     結局、余計な高さを確保せず top で留めるのが空白を作らない唯一の形になる。 */
.rail-sticky { flex: 1 1 auto; min-height: 0; }
.rail-sticky__box { position: sticky; top: var(--sticky-top); display: flex; flex-direction: column; gap: 16px; }
/* 追従枠の高さ調整は lib/ads.mjs の fitSticky() が実測で行う（画面に入らなければ「あなたへの
   おすすめ」の一覧を後ろから削り、1件でも入らなければ枠ごと隠す）。
   ここに画面高のメディアクエリを置くと、JSの段階的な絞り込みより先に枠ごと消してしまうため置かない。
   JS無効時は「あなたへのおすすめ」自体が hidden のまま（JSが充填する枠）なので、
   追従枠はカルーセル1枚だけになり、はみ出す心配はない。 */
.a8-pr--bottom { display: none; }
/* 本文途中に差し込むA8（モバイルのみ）。話の区切りに置くので上下に余白を広めに取り、
   本文と地続きに見えないよう薄い区切り線で囲う */
.a8-pr--incard { display: none; }
@media (max-width: 1279.98px) {
  .a8-pr--bottom { display: block; margin: 24px auto 8px; padding: 0 16px; max-width: 340px; }
  .a8-pr--incard { display: block; margin: 30px auto; padding: 16px 0 4px; max-width: 340px; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; }
  .a8-pr--incard .a8-pr__label { text-align: center; margin-bottom: 8px; }
  .a8-pr--incard .a8-pr__note { text-align: center; }
}
/* PC右レール最下部の追従枠：矢印とドットで切り替えるカルーセル（15秒で自動送り）。
   トラック／スライド／ドットの仕組みは下のモバイル用カルーセルと共通のクラスを使う。
   矢印は素材に重ねず下に並べる（バナーを隠さず、広告の誤クリックも招かないため）。 */
.a8-railcar__nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; line-height: 1; }
.a8-railcar__nav[hidden] { display: none; }   /* JSがスライドを足すまでは出さない */
.a8-railcar__arw { appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid #e0e0e0; border-radius: 50%; background: #fff; color: #7a7a7a; font-size: 14px; line-height: 1; cursor: pointer; }
.a8-railcar__arw:hover { background: #f2f2f2; border-color: #ccc; color: #333; }
.a8-railcar .a8-carousel__dots { margin-top: 0; }

/* モバイル最下部A8：横スワイプで切り替えるカルーセル（scroll-snap） */
.a8-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.a8-carousel__track::-webkit-scrollbar { display: none; }
.a8-carousel__slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.a8-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; line-height: 1; }
.a8-carousel__dot { width: 6px; height: 6px; border-radius: 50%; background: #d6d6d6; }
.a8-carousel__dot.is-on { background: #8a8a8a; }

/* cache-bust 2026-07-29: rail width fix */

/* 記事上部の更新履歴バナー（meta.md「## 更新履歴」から自動生成） */
.entry-updates{border:1px solid #cfd8dc;border-left:4px solid #1565c0;background:#f5f9ff;border-radius:0 10px 10px 0;padding:10px 16px;margin:0 0 18px;font-size:13px}
.entry-updates__t{margin:0 0 4px;font-weight:700;color:#0d47a1;font-size:12.5px}
.entry-updates ul{margin:0;padding:0;list-style:none}
.entry-updates li{line-height:1.8;color:#333}
.entry-updates time{font-weight:700;color:#0d47a1;margin-right:8px}

/* 記事見出し直下の日付行（更新日主体）＋読了時間 */
.entry-header .entry-date{margin:10px 0 0;font-size:13px;color:#777;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.entry-date__upd{font-weight:700;color:#444}
.entry-date__min{color:#999}

/* 一覧カードの NEW バッジ（公開14日以内） */
.column-card__thumb .column-card__new{position:absolute;right:8px;top:8px;background:var(--color-key);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;line-height:1;padding:5px 8px;border-radius:6px}

/* ランキング（/column/ranking/）の週間・月間タブ */
/* .column-grid の display:grid が UA の [hidden]{display:none} に勝ってしまうため、hidden 時は明示的に消す */
.column-grid[hidden]{display:none}
.rank-tabs{display:flex;gap:8px;margin:0 0 20px}
.rank-tabs button{font:inherit;font-size:14px;font-weight:800;color:#666;background:#fff;border:1px solid #e2dccd;border-radius:10px 10px 0 0;border-bottom:2px solid #e2dccd;padding:10px 22px;cursor:pointer}
.rank-tabs button:hover{color:var(--color-key-dark);border-color:var(--color-key)}
.rank-tabs button[aria-selected="true"]{color:var(--color-key-dark);border-color:var(--color-key);border-bottom-color:#fff;background:#fff;cursor:default;position:relative}

/* 順位バッジ（ランキング・連載の「第N回」共用） */
/* ラッパー越しでもカードの高さが行内で揃うよう flex で引き伸ばす（column-grid 直下のカードと同じ見た目に） */
.rank-item{position:relative;display:flex}
.rank-item .column-card{width:100%}
.rank-item__no{position:absolute;left:-6px;top:-8px;z-index:2;min-width:30px;height:30px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:#4a5160;color:#fff;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.rank-item__no.is-top{background:var(--color-key)}
.rank-item__no.is-ep{font-size:12px;letter-spacing:.02em}

/* 記事内の連載バナー */
.entry-content .col-series{margin:0 0 18px}
.entry-content .col-series a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid #e2dccd;background:#fdf8ef;border-radius:10px;padding:8px 14px;text-decoration:none;font-size:13.5px;color:#333}
.entry-content .col-series a:hover{border-color:var(--color-key)}
.entry-content .col-series__tag{background:var(--color-key-dark);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.04em}
.entry-content .col-series__name{font-weight:800;color:var(--color-key-dark)}
.entry-content .col-series__ep{font-weight:700;color:#666}
.entry-content .col-series__all{color:#999;font-size:12.5px}

/* コラム一覧上部のツールバー（並び順＋ランキング・連載導線を1行に） */
.list-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:-12px 0 20px}
.list-toolbar .sort-bar{margin:0}
.list-toolbar__links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;font-size:13px}
.list-toolbar__links a{color:var(--color-key-dark);font-weight:700;text-decoration:none}
.list-toolbar__links a:hover{text-decoration:underline}

/* 連載一覧ページの補足行 */
.entry-header .series-note{margin:6px 0 0;font-size:13px;color:#888}

/* 楽天アフィリエイト素材の枠合わせ。素材HTMLは無改変（トラッキング維持）のため、
   幅504px固定・画像240px＋テキスト248pxの2カラムを、外側から縦積み・全幅に上書きする。 */
.a8-pr--rk{line-height:1.5}
.a8-pr--rk table{width:100%!important;max-width:100%!important;border-collapse:collapse}
.a8-pr--rk td{display:block!important;width:100%!important;vertical-align:top}
/* 素材の外枠 div は width:504px がインライン指定されているので、max-width で確実に親幅へ収める
   （max-width は width より優先されるため、素材側の幅指定が変わっても効く） */
.a8-pr--rk div{max-width:100%!important;box-sizing:border-box}
.a8-pr--rk > table > tbody > tr > td > div{width:100%!important;margin:0!important}
.a8-pr--rk img[src*="thumbnail.image.rakuten"],.a8-pr--rk img[src*="hbb.afl.rakuten"]{max-width:100%;height:auto;margin:0 auto!important}
.a8-pr--rk p{text-align:left}
/* 消すのは素材の外枠直後にある余白用の br だけ（商品名と価格の間の br は残す） */
.a8-pr--rk > table > tbody > tr > td > br{display:none}
.a8-pr--rk > table > tbody > tr > td > p{margin:0!important}

/* ---- 商品まとめリンク（Amazon／楽天を1枚のカードに。lib/ads.mjs の productCard が出力） ----
   .a8-pr は line-height:0・text-align:center を効かせているので、カード側で戻す。
   1x1の成果計測gif（.mlink__imp）は .a8-pr > img の absolute 指定が効かない階層にあるため、
   ここで明示的にレイアウトから外す。 */
.a8-pr--pd{line-height:1.6;text-align:left}
.mlink{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #e7e7e7;border-radius:12px;padding:12px;position:relative}
.mlink__thumb{flex:0 0 88px;width:88px;height:88px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;overflow:hidden}
.mlink__thumb img{max-width:100%;max-height:88px;width:auto;height:auto;object-fit:contain}
.mlink__body{flex:1 1 auto;min-width:0}
.mlink__t{font-size:13px;line-height:1.55;color:#333;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mlink__btns{display:flex;flex-direction:column;gap:6px}
.mlink__btn{display:block;text-align:center;font-size:13px;font-weight:700;line-height:1;padding:9px 10px;border-radius:999px;color:#fff;text-decoration:none}
.mlink__btn:hover{opacity:.88}
.mlink__btn--amazon{background:#ff9900;color:#111}
.mlink__btn--rakuten{background:#bf0000}
.mlink__imp{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
/* レール（幅が狭い）は縦積みにして商品名とボタンを読ませる */
.a8-pr--rail .mlink{flex-direction:column;align-items:stretch;text-align:center}
.a8-pr--rail .mlink__thumb{flex:0 0 auto;width:100%;height:120px}
.a8-pr--rail .mlink__thumb img{max-height:120px}
.a8-pr--rail .mlink__t{text-align:left}
/* モバイルの最下部カルーセルは横並びのまま（1枚の高さをそろえる） */
@media (max-width: 1279.98px){
  .a8-pr--pd .mlink{min-height:112px}
}

/* 計算ツール・シミュレーターの数値入力は「直接入力」だけを受け付ける。
   スピナー（上下ボタン）を非表示にし、ホイール／↑↓キーでの増減は
   lib/templates.mjs の numberInputScript() 側で無効化している。
   （このファイルの内容ハッシュが ?v= に入る。immutable キャッシュなので内容を変えれば必ず新URLになる） */
input[type="number"]{appearance:textfield;-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}