/* 米国クレカ比較ガイド — 全ページ共通のスタイル（色・文字・共通メニュー・共通フッター・記事本文） */
:root{
  --bg:#f3f5f6; --surface:#ffffff; --ink:#14212b; --muted:#5b6973; --line:#d9dfe3;
  --accent:#9a6b1f; --accent-soft:#f4ead8;
  --ok:#1f7a4d; --ok-soft:#e1f2e8; --warn:#a1501b; --warn-soft:#fbe9dc; --na:#6a6f75; --na-soft:#eceef0;
  --stamp:#2d4a8a;
  --f-display:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --f-body:"BIZ UDPGothic","Hiragino Sans","Yu Gothic",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f161c; --surface:#16212a; --ink:#e6ecef; --muted:#9aa8b1; --line:#2a3843;
  --accent:#d9a85a; --accent-soft:#3a2f1c;
  --ok:#6fcf9b; --ok-soft:#173528; --warn:#f0a06a; --warn-soft:#3d2618; --na:#a6adb3; --na-soft:#26313a; --stamp:#8fa9e6; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f161c; --surface:#16212a; --ink:#e6ecef; --muted:#9aa8b1; --line:#2a3843;
  --accent:#d9a85a; --accent-soft:#3a2f1c;
  --ok:#6fcf9b; --ok-soft:#173528; --warn:#f0a06a; --warn-soft:#3d2618; --na:#a6adb3; --na-soft:#26313a; --stamp:#8fa9e6; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.65}
a{color:inherit}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:10;background:var(--surface);padding:6px 10px;border-radius:6px}

/* 共通メニュー：サイト名（小さな押印つき）＋ページへのリンク。スマホでは横にスクロール */
.site-head{background:var(--surface);border-bottom:1px solid var(--line)}
.site-head .in{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap}
.site-head .brand{color:var(--ink);display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:900;font-size:17px;letter-spacing:.02em;white-space:nowrap}
.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;color:var(--stamp);border:2px solid currentColor;border-radius:4px;transform:rotate(-7deg);
  font-family:var(--f-num);font-size:10px;font-weight:500;letter-spacing:.04em;box-shadow:inset 0 0 0 2px var(--surface),inset 0 0 0 3px currentColor}
.site-nav{margin-left:auto;min-width:0}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.site-nav ul::-webkit-scrollbar{display:none}
.site-nav a{display:block;padding:8px 10px;border-radius:6px;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:14px;color:var(--muted);white-space:nowrap}
.site-nav a:hover{color:var(--ink);background:var(--bg)}
.site-nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent);border-radius:6px 6px 0 0}
@media (max-width:640px){.site-nav{margin-left:-8px;width:calc(100% + 16px)}.site-nav a{padding:8px 7px;font-size:13px}}

/* 共通フッター */
.site-foot{border-top:1px solid var(--line);background:var(--surface);margin-top:24px}
.site-foot .in{max-width:1200px;margin:0 auto;padding:22px 16px 36px;display:grid;gap:10px;font-size:12.5px;color:var(--muted)}
.site-foot .in > b{font-family:var(--f-display);font-size:14px;color:var(--ink)}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.site-foot a{color:var(--muted);text-underline-offset:3px}
.site-foot a:hover{color:var(--ink)}
.site-foot p{margin:0;max-width:82ch}

/* 記事ページ */
.article-wrap{max-width:760px;margin:0 auto;padding:22px 16px 40px}
.crumbs{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted);text-underline-offset:3px}
.crumbs span{margin:0 6px}
.article-head{display:grid;gap:10px;padding-bottom:16px;border-bottom:1px dashed var(--line);margin-bottom:8px}
.article-head h1{font-family:var(--f-display);font-weight:900;font-size:clamp(24px,4.2vw,32px);line-height:1.35;margin:0;text-wrap:balance}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:12.5px;color:var(--muted)}
.checked{display:inline-flex;align-items:center;gap:6px;color:var(--stamp);border:1.5px solid currentColor;border-radius:4px;padding:2px 8px;font-family:var(--f-num);font-size:11.5px;letter-spacing:.06em;transform:rotate(-2deg)}
.prose{font-size:16px;line-height:1.85}
.prose > *{margin:0 0 1em}
.prose h2{font-family:var(--f-display);font-weight:900;font-size:21px;line-height:1.45;margin:2.2em 0 .7em;padding-left:12px;border-left:4px solid var(--accent)}
.prose h3{font-family:var(--f-display);font-weight:700;font-size:17px;margin:1.6em 0 .5em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin:.25em 0}
.prose li > ul,.prose li > ol{margin:.2em 0}
.prose strong{font-weight:700;background:linear-gradient(transparent 62%,var(--accent-soft) 62%)}
.prose a{color:var(--stamp);text-underline-offset:3px;font-weight:700}
.prose code{font-family:var(--f-num);font-size:.9em;background:var(--bg);padding:1px 4px;border-radius:4px}
.prose hr{border:0;border-top:1px dashed var(--line);margin:2em 0}
/* 表：比較表と同じ帳票風。横にはみ出す場合は枠の中でスクロール */
.table-scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;margin:0 0 1.2em}
.prose table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;line-height:1.6}
.prose th,.prose td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose thead th{font-family:var(--f-display);font-size:12.5px;color:var(--muted);background:var(--bg);white-space:nowrap}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody td:first-child{font-weight:700;white-space:nowrap}
/* 体験談：書き手の声として本文と区別する */
.prose blockquote{margin:1.4em 0;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--stamp);border-radius:6px;font-size:15px}
.prose blockquote::before{content:"ばきらぶのメモ";display:block;font-family:var(--f-display);font-weight:700;font-size:12px;color:var(--stamp);letter-spacing:.06em;margin-bottom:4px}
.prose blockquote p{margin:0 0 .5em}.prose blockquote p:last-child{margin:0}
/* チェックリスト */
.prose ul.checklist{list-style:none;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.prose ul.checklist li{position:relative;padding-left:28px}
.prose ul.checklist li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border:2px solid var(--accent);border-radius:3px}
/* 下書きの未確定箇所（公開前に必ず消える。残っていたら公開スクリプトが止める） */
.todo{display:block;background:var(--warn-soft);color:var(--warn);border-radius:6px;padding:6px 10px;font-size:13px;font-weight:700}
/* 出典と、比較表への案内 */
.sources{font-size:13.5px;color:var(--muted)}
.cta{display:grid;gap:6px;margin:2em 0 0;padding:16px 18px;background:var(--accent-soft);border-radius:8px}
.cta b{font-family:var(--f-display);font-size:16px;color:var(--ink)}
.cta a{justify-self:start;font-family:var(--f-display);font-weight:700;color:var(--accent);text-underline-offset:4px}

/* 案内ページ（はじめての方へ など） */
.guide .article-head{border-bottom:0;margin-bottom:0}
.eyebrow-s{margin:0;font-family:var(--f-num);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.guide-lead{margin:0;font-size:16px;line-height:1.9;color:var(--ink)}
.guide-lead b{background:linear-gradient(transparent 62%,var(--accent-soft) 62%)}
.guide-sec{margin-top:36px;display:grid;gap:12px}
.guide-sec h2{font-family:var(--f-display);font-weight:900;font-size:21px;line-height:1.45;margin:0;padding-left:12px;border-left:4px solid var(--accent)}
.guide-sec p{margin:0;line-height:1.85}
.guide-sec a{color:var(--stamp);font-weight:700;text-underline-offset:3px}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.gcard{display:grid;gap:6px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--ink) !important;font-weight:400 !important;font-size:14px;line-height:1.7}
a.gcard:hover{border-color:var(--accent)}
.gcard b{font-family:var(--f-display);font-size:16px}
.gcard > span:not(.gnum):not(.go){color:var(--muted)}
.gnum{font-family:var(--f-num);font-size:12px;color:var(--accent);letter-spacing:.1em}
.go{margin-top:4px;color:var(--accent);font-family:var(--f-display);font-weight:700}
.route{list-style:none;margin:0;padding:0;display:grid;gap:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.route li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:start;padding:14px 16px;border-bottom:1px solid var(--line)}
.route li:last-child{border-bottom:0}
.route .step{font-family:var(--f-num);font-size:11.5px;letter-spacing:.08em;color:var(--stamp);border:1.5px solid currentColor;border-radius:4px;padding:2px 6px;margin-top:2px;white-space:nowrap}
.route div{display:grid;gap:2px}
.route b{font-family:var(--f-display);font-size:16px}
.route b a{color:var(--ink)}
.route div span{font-size:14px;color:var(--muted);line-height:1.7}
.soon{font-size:12px;font-weight:700;color:var(--na);background:var(--na-soft);border-radius:999px;padding:2px 10px;white-space:nowrap;margin-top:2px}
@media (max-width:520px){.route li{grid-template-columns:1fr auto}.route .step{grid-column:1;justify-self:start}.route div{grid-column:1 / -1;grid-row:2}}
.route-end{justify-self:start;font-family:var(--f-display)}
.paths{display:grid;gap:10px}
.path{display:grid;gap:2px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px}
.path b{font-family:var(--f-display);font-size:15.5px}
.path span{font-size:14px;color:var(--muted);line-height:1.7}
.words{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.words div{display:grid;grid-template-columns:minmax(9em,13em) 1fr;gap:4px 16px;padding:12px 2px;border-bottom:1px solid var(--line)}
.words dt{font-family:var(--f-display);font-weight:700}
.words dd{margin:0;font-size:14.5px;color:var(--muted);line-height:1.75}
@media (max-width:520px){.words div{grid-template-columns:1fr}}
.guide-note{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:8px;padding:16px 18px}
.guide-note h2{border-left-color:var(--warn);font-size:18px}
.guide-note ul{margin:0;padding-left:1.2em;display:grid;gap:6px;font-size:14.5px;line-height:1.75}
.guide-me{grid-template-columns:auto 1fr;align-items:start;gap:16px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.guide-me > div{display:grid;gap:8px}
.guide-me h2{font-size:18px}
.me-stamp{display:grid;place-items:center;width:64px;height:64px;color:var(--stamp);border:2.5px solid currentColor;border-radius:6px;transform:rotate(-7deg);font-family:var(--f-display);font-weight:700;font-size:12px;box-shadow:inset 0 0 0 3px var(--surface),inset 0 0 0 4px currentColor;margin-top:4px}

/* 記事の情報時点の注記。45日を過ぎると警告色になる */
.freshness{margin:0;font-size:13px;line-height:1.7;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 12px}
.freshness a{color:var(--stamp);font-weight:700;text-underline-offset:3px}
.freshness.stale{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--ink)}
.stale-msg{display:block;margin-top:4px;color:var(--warn);font-weight:700}
.stale-msg[hidden]{display:none}

/* 記事一覧 */
.alist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.alist li{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.alist b{font-family:var(--f-display);font-size:17px;line-height:1.5}
.alist a{color:var(--ink);text-decoration:none}
.alist a:hover b{text-decoration:underline;text-underline-offset:3px}
.alist span{font-size:14px;color:var(--muted);line-height:1.75}
.alist time{font-family:var(--f-num);font-size:12px;color:var(--stamp)}
.guide-sec:not(.guide-note) ul{margin:0;padding-left:1.2em;display:grid;gap:6px;line-height:1.85}