:root { --olive: #d1aa67; --ink: #f0e7d9; --cream: #0b090a; --pale: #171112; --sand: #3d2927; --muted: #b5a69e; --foot-bg: #1c1516; --foot-ink: #f0e7d9; --foot-muted: #b5a69e; --foot-line: #4a3532; --foot-rule: #3d2927; --cta: #FFD84D; --cta-ink: #1f1e1a; --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif; --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.9; color: var(--ink); background: var(--cream); overflow-wrap: anywhere; }
img { max-width: 100%; height: auto; }
a { color: var(--olive); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inner { padding-inline: max(20px, calc((100% - 1120px) / 2)); }
main > .article, main > .listing { padding-inline: max(20px, calc((100% - 760px) / 2)); }

/* ヘッダー（B：選び方ガイドのボタン） */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--cream) 96%, transparent); border-bottom: 1px solid var(--ink); padding-block: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ph { display: inline-block; }
.mg h1, .mg h2, .mg h3, .mg .t { text-wrap: balance; line-break: strict; }
.logo { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: .12em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.h-acts { display: flex; align-items: center; gap: 6px; }
/* サイト名が長いサイト（ゴルフハックチャンネル・養分のトリセツ）でも、狭い画面でメニューが押し出されないように。
   ボタン側は縮めず、サイト名の文字の大きさと字間だけで収める（名前は省略しない） */
.logo { min-width: 0; flex: 0 1 auto; } .h-acts { flex: none; }
/* 長いサイト名（ゴルフハックチャンネル等）は、スマホでロゴを小さくし、メニューは記号だけにする（文字は読み上げ用に残す）。それでも入らない幅では2行に折る。ロゴがボタンの下へはみ出して重ならないように */
@media (max-width: 480px) { .logo.logo-long { font-size: clamp(11px, 4.2vw, 17.5px); letter-spacing: .02em; } .logo-long ~ .h-acts .guide-btn { padding: 0 9px; font-size: 11px; } .logo-long ~ .h-acts .menu-btn { font-size: 0; gap: 0; padding: 8px; } }
@media (max-width: 370px) { .logo.logo-long { white-space: normal; line-height: 1.25; } }
/* 幅370px以下（小さいスマホ）は、どのサイトもメニューを記号だけにし、ロゴを少し小さくする */
@media (max-width: 370px) { .site-header .logo:not(.logo-long) { font-size: 16px; letter-spacing: .04em; } .site-header .h-acts .menu-btn { font-size: 0; gap: 0; padding: 8px; } .site-header .h-acts .guide-btn { padding: 0 8px; font-size: 11px; } }
/* 長いサイト名は、PCの横並びメニューが入りきらない幅（1000〜1199px）ではメニューボタンのままにする */
.pc-nav { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1199px) { .logo-long ~ .pc-nav { display: none; } .logo-long ~ .h-acts .menu-btn { display: inline-flex; } }
.guide-btn { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 500; color: var(--ink); border: 1px solid var(--ink); padding: 0 14px; text-decoration: none; white-space: nowrap; }
.guide-btn:hover { background: var(--pale); }
.icon-btn { font: inherit; font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--ink); background: none; border: 0; padding: 8px 6px 8px 10px; min-height: 44px; min-width: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.icon-btn:hover { background: var(--pale); }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.pc-nav { display: none; gap: 22px; font-size: 12.5px; font-weight: 500; letter-spacing: .04em; }
.pc-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; }
.pc-nav a:hover { border-bottom-color: var(--ink); }
@media (min-width: 1000px) { .pc-nav { display: flex; } .menu-btn { display: none; } }
.drawer { background: var(--cream); border-bottom: 1px solid var(--ink); padding-block: 18px 22px; position: sticky; top: 65px; z-index: 9; max-height: calc(100dvh - 65px); overflow: auto; }
.drawer h2, .site-footer h2, .side h2 { font-size: 11px; color: var(--muted); margin: 0 0 4px; font-weight: 500; letter-spacing: .14em; line-height: 1.6; }
.drawer h2:not(:first-child) { margin-top: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: var(--ink); border-bottom: 1px solid var(--ink); padding: 0 2px; text-decoration: none; }
.chip:hover { color: var(--olive); border-bottom-color: var(--olive); }

/* 見出しまわり */
.crumb, .breadcrumb { font-size: 11px; color: var(--muted); margin: 22px 0 4px; padding: 0; letter-spacing: .06em; line-height: 1.6; }
.crumb a, .breadcrumb a { display: inline-block; padding: 11px 0; color: var(--muted); }
h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(18px, 4.6vw, 30px); line-height: 1.45; letter-spacing: .02em; margin: 0 0 14px; }
.a-head { padding: 0; }
.meta, .a-meta { font-size: 11.5px; color: var(--muted); margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; letter-spacing: .04em; line-height: 1.6; }
.pr { font-size: 11px; font-weight: 400; color: var(--muted); border: 1px solid var(--sand); padding: 1px 7px; background: none; }
.layout { display: block; }
@media (min-width: 1000px) { .layout { display: grid; grid-template-columns: minmax(0, 720px) 260px; gap: 96px; align-items: start; } }
.hero { display: block; width: calc(100% + 40px); max-width: none; margin: 0 -20px 30px; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
@media (min-width: 1000px) { .hero { width: 100%; margin-inline: 0; } }
details.toc { border-bottom: 1px solid var(--sand); border-top: 1px solid var(--sand); margin: 0 0 30px; }
details.toc summary { cursor: pointer; font-weight: 500; letter-spacing: .1em; min-height: 52px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.toc summary::-webkit-details-marker { display: none; }
details.toc summary::after { content: "開く"; font-size: 11.5px; }
details.toc[open] summary::after { content: "閉じる"; }
details.toc ol { margin: 0; padding: 0 0 14px 1.6em; }
details.toc li a { display: block; padding: 9px 0; color: var(--ink); text-decoration: none; line-height: 1.6; }
@media (min-width: 1000px) { details.toc { display: none; } }

/* 比較記事の冒頭 */
.answer { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 20px 0 6px; margin: 0 0 30px; }
.answer .k { font-family: var(--serif); font-size: 16px; font-weight: 700; letter-spacing: .02em; margin: 0 0 4px; line-height: 1.5; }
.v-list { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: v; }
.v-list li { display: grid; grid-template-columns: 1.8em minmax(0, 1fr) auto; column-gap: 6px; align-items: center; padding: 12px 0; border-top: 1px solid var(--sand); counter-increment: v; }
.v-list li::before { content: counter(v); grid-row: 1 / 3; font-family: var(--serif); font-size: 21px; color: var(--muted); line-height: 1.2; }
.v-n { grid-column: 2; font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.5; }
.v-w { grid-column: 2; font-size: 12px; color: var(--muted); line-height: 1.6; }
.v-go { grid-row: 1 / 3; grid-column: 3; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.v-rest { font-size: 11.5px; color: var(--muted); margin: 0; padding: 10px 0; border-top: 1px solid var(--sand); line-height: 1.7; }

/* 本文 */
.a-body { counter-reset: h; padding: 0; }
.a-body p { margin: 0 0 26px; }
.a-body h2 { counter-increment: h; font-family: var(--serif); font-weight: 700; font-size: clamp(17px, 2.6vw, 23px); line-height: 1.5; letter-spacing: .01em; margin: 68px 0 18px; padding: 0; background: none; color: var(--ink); scroll-margin-top: 84px; }
.a-body h2::before { content: counter(h, decimal-leading-zero); display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--muted); margin-bottom: 4px; }
.a-body h3 { font-size: 15px; font-weight: 700; line-height: 1.6; margin: 40px 0 10px; padding: 0; scroll-margin-top: 84px; }
.a-body h4 { font-size: 14px; margin: 28px 0 8px; }
.a-body ul, .a-body ol { margin: 0 0 26px; padding-left: 1.4em; }
.a-body li { margin: 0 0 6px; }
.a-body strong, .a-body b { font-weight: 800; }
.a-body figure { margin: 26px 0; }
.a-body figure.wp-block-image img { display: block; width: 100%; height: auto; }
.a-body figcaption { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 6px; }
.a-body a:not([rel~="sponsored"]):not(.affiliate-program-creative a):not([data-affiliate-program] a) { color: var(--olive) !important; text-decoration: underline !important; }
.a-body span[style*="linear-gradient"] { background: none !important; font-weight: 800; }
/* 記事に埋め込まれた色つきの箱は、色をやめて罫線にする（文字とリンクは変えない） */
.a-body div[style*="background"]:not([data-nx]), .a-body div[style*="border-left"]:not([data-nx]) { background: none !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; border-top: 1px solid var(--sand) !important; border-bottom: 1px solid var(--sand) !important; padding: 18px 0 !important; margin: 30px 0 !important; font-size: 13px; }
.a-body div[style*="border-left"]:not([data-nx]) { border-top: 0 !important; border-bottom: 0 !important; border-left: 2px solid var(--ink) !important; padding: 2px 0 2px 18px !important; }
.a-body div[style] > p[style*="color"], .a-body div[style] > p[style*="font-weight"] { color: var(--ink) !important; }
.a-body div[style] > p:last-child, .a-body div[style] > ul:last-child { margin-bottom: 0 !important; }
.a-body div[style] p { margin-bottom: 8px; }
.a-body [data-nx="bridge"] { background: none !important; border: 0 !important; border-top: 1px solid var(--ink) !important; border-bottom: 1px solid var(--ink) !important; border-radius: 0 !important; padding: 22px 0 !important; margin: 44px 0 !important; }
.a-body [data-nx="bridge"] > p:first-child { color: var(--muted) !important; font-weight: 500 !important; font-size: 11px; letter-spacing: .12em; margin: 0 0 6px !important; }
.a-body [data-nx="bridge"] > p { margin: 0 !important; }
.a-body [data-nx="bridge"] a { font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.6; color: var(--ink) !important; }
/* 表 */
.a-body .table-scroll, .a-body figure.wp-block-table { margin: 0 0 26px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.a-body table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-feature-settings: "tnum"; margin: 0; }
.a-body table:has(tr > :nth-child(4)) { min-width: 560px; }
.a-body th, .a-body td { padding: 10px 10px 10px 0; text-align: left; border: 0; border-bottom: 1px solid var(--sand); line-height: 1.6; vertical-align: top; background: none !important; }
.a-body thead th { color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: .06em; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.a-body tbody tr:last-child td, .a-body tbody tr:last-child th { border-bottom: 0; }
.a-body tbody th, .a-body tbody td:first-child { font-weight: 700; }
/* 広告のボタン。情報記事は墨色、比較記事だけ黄色 */
.a-body a[rel~="sponsored"], .a-body [data-affiliate-program] a:not(:has(img)), .a-body .affiliate-program-creative a:not(:has(img)), .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; font-weight: 700; font-size: 13px; line-height: 1.5; letter-spacing: .04em; text-align: center; text-decoration: none !important; color: var(--cream) !important; background: var(--ink) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 24px !important; margin: 4px 0; max-width: 100%; }
.a-body a[rel~="sponsored"]:hover, .btn:hover { opacity: .88; }
.is-compare .a-body a[rel~="sponsored"], .is-compare .a-body .affiliate-program-creative a:not(:has(img)), .is-compare .a-body [data-affiliate-program] a:not(:has(img)), .cta-bar .btn, .side .card .btn { color: var(--cta-ink) !important; background: var(--cta) !important; }
.btn.quiet { background: none !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; }
.btn.quiet:hover { background: var(--pale) !important; opacity: 1; }
.cta-box { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 22px 0 24px; margin: 44px 0; }
.cta-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--muted); line-height: 1.6; }
.cta-pr { font-size: 11px; letter-spacing: 0; border: 1px solid var(--sand); padding: 0 6px; }
.cta-main-name { font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.5; margin-top: 8px; }
.cta-main-sub { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 2px; }
.a-body .cta-box .cta-btn, .a-body .cta-box[data-affiliate-program] > a { display: flex; width: 100%; margin: 16px 0 0; }
.cta-subs { display: flex; flex-direction: column; margin-top: 12px; border-top: 1px solid var(--sand); }
.a-body .cta-subs a[rel~="sponsored"] { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; background: none !important; color: var(--ink) !important; border-bottom: 1px solid var(--sand) !important; padding: 8px 0 !important; margin: 0; font-size: 12.5px; text-align: left; letter-spacing: 0; }
.cs-act { flex-shrink: 0; font-size: 11px; font-weight: 500; white-space: nowrap; }
.cs-act::after { content: " →"; }
.swell-block-faq__item, .faq-item { border-bottom: 1px solid var(--sand); padding: 14px 0; }
.swell-block-faq { border-top: 1px solid var(--sand); margin: 0 0 26px; }
.faq_q { font-weight: 700; margin: 0 0 4px; }
.faq_a { margin: 0; font-size: 13px; }
.faq_a p:last-child { margin-bottom: 0; }

/* 次に読む・一覧の行 */
.reads { margin: 76px 0 0; }
.reads > h2 { font-family: var(--serif); font-size: 16.5px; line-height: 1.5; margin: 0 0 2px; }
.reads > p { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.read { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--sand); text-decoration: none; color: var(--ink); min-height: 44px; }
.read .thumb { display: block; aspect-ratio: 4 / 3; background: var(--pale); overflow: hidden; }
.read .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.read .tag, .feature .tag { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .06em; line-height: 1.6; }
.read .t { display: block; font-weight: 700; font-size: 13px; line-height: 1.6; }
.read:hover .t, .feature:hover .t { text-decoration: underline; }
.read.lead { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); padding: 20px 0; }
.read.lead .t { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; }
.read.lead .go, .side .card .go { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.reads-more { margin: 0; border-top: 1px solid var(--sand); }
.reads-more a { display: flex; align-items: center; min-height: 52px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.reads-grid { border-bottom: 1px solid var(--sand); }
@media (min-width: 1000px) { .reads-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; } }

/* PCの右列 */
.side { display: none; }
@media (min-width: 1000px) { .side { display: block; position: sticky; top: 92px; max-height: calc(100dvh - 110px); overflow: auto; } }
.side ol { list-style: none; margin: 0 0 28px; padding: 0; border-left: 2px solid var(--sand); }
.side li a { display: block; font-size: 11.5px; line-height: 1.6; color: var(--muted); text-decoration: none; padding: 11px 0 11px 14px; margin-left: -2px; border-left: 2px solid transparent; }
.side li a:hover { color: var(--ink); }
.side li a[aria-current="true"] { color: var(--ink); font-weight: 700; border-left-color: var(--ink); }
.side .card { border-top: 1px solid var(--ink); padding: 16px 0; }
.side .card .k { font-size: 11px; color: var(--muted); letter-spacing: .1em; margin: 0; line-height: 1.6; }
.side .card a.t { padding: 6px 0; }
.side .card .t { display: block; font-family: var(--serif); font-weight: 700; font-size: 14.5px; line-height: 1.6; color: var(--ink); text-decoration: none; margin: 2px 0 8px; }

/* 悩みページ */
.w-head p { max-width: 40em; margin: 0 0 26px; font-size: 14.5px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; max-width: 760px; }
.steps > li { counter-increment: s; padding: 0 0 44px; }
.steps > li::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--serif); font-size: 35px; line-height: 1; color: var(--muted); margin-bottom: 4px; }
.steps h2 { font-family: var(--serif); font-size: 17px; line-height: 1.6; margin: 0; }
.steps .why { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin: 0 0 10px; }
.steps .none { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--sand); padding-top: 14px; margin: 0; }
.pick { border-top: 1px solid var(--ink); padding: 16px 0 20px; }
.pick a.t { display: block; padding: 6px 0; font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--ink); text-decoration: none; }
.pick .btn { margin-top: 10px; }
.more-reads { border-top: 1px solid var(--sand); }
.more-reads summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-size: 12.5px; font-weight: 700; list-style: none; }
.more-reads summary::-webkit-details-marker { display: none; }
.more-reads summary::after { content: "＋"; margin-left: 8px; color: var(--muted); }
.more-reads[open] summary::after { content: "−"; }
.others { margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--ink); }
.others h2 { font-family: var(--serif); font-size: 15px; margin: 0 0 6px; line-height: 1.6; }

/* トップ */
.h-hero { padding: 30px 0 28px; border-bottom: 1px solid var(--ink); }
.h-eyebrow { font-size: 11px; color: var(--muted); letter-spacing: .12em; margin: 0 0 8px; line-height: 1.6; }
.h-hero h1 { font-size: clamp(20px, 5.4vw, 36px); margin: 0; }
.h-label { font-size: 11px; color: var(--muted); letter-spacing: .14em; font-weight: 500; margin: 34px 0 6px; line-height: 1.6; }
.w-list { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.w-list a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--sand); text-decoration: none; color: var(--ink); min-height: 44px; }
.w-list a::before { counter-increment: w; content: counter(w, decimal-leading-zero); grid-row: 1 / 3; font-size: 11px; color: var(--muted); padding-top: 9px; letter-spacing: .06em; line-height: 1.6; }
.w-t { font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.5; }
.w-s { grid-column: 2; font-size: 12px; color: var(--muted); line-height: 1.6; }
.w-list a:hover .w-t { text-decoration: underline; }
.feature { display: block; text-decoration: none; color: var(--ink); padding-bottom: 16px; }
.feature img { display: block; width: calc(100% + 40px); max-width: none; margin: 0 -20px 12px; aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
.feature .t { display: block; font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.5; }
.t-list { list-style: none; margin: 0; padding: 0; }
.t-list a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 54px; padding: 10px 0; border-bottom: 1px solid var(--sand); color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.5; }
.t-list a::after { content: "→"; color: var(--muted); }
.t-list a:hover span { text-decoration: underline; }
@media (min-width: 1000px) {
  .mg-home { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 96px; }
  .h-hero { grid-column: 1 / -1; padding: 64px 0 52px; }
  .h-worry { grid-row: 2 / 4; }
  .feature img { width: 100%; margin-inline: 0; }
}

/* 固定ページ・404（従来の組みのまま外枠だけ替わる） */
.is-page .a-body h2::before { content: none; }
.is-page .a-body h2 { font-size: 16.5px; margin-top: 44px; }
.listing { padding-bottom: 20px; }
.more a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 700; }
.is-page input, .is-page textarea, .is-page select { font: inherit; max-width: 100%; }

/* 比較記事の下部固定ボタン（強い色はここだけ） */
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--cream); border-top: 1px solid var(--ink); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cta-bar .cb-t { min-width: 0; }
.cta-bar .cb-k { display: block; font-size: 11px; color: var(--muted); line-height: 1.4; }
.cta-bar b { display: block; font-size: 12.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta-bar .btn { flex-shrink: 0; min-height: 48px; padding: 10px 18px !important; margin: 0; white-space: nowrap; }
@media (min-width: 1000px) { .cta-bar { display: none; } }
@media (max-width: 999px) { .is-compare .site-footer { padding-bottom: 104px; } }

/* フッター */
.site-footer { background: var(--foot-bg); color: var(--foot-ink); margin-top: 88px; padding-block: 44px 34px; }
.f-grid { display: grid; gap: 28px; }
@media (min-width: 800px) { .f-grid { grid-template-columns: 1.2fr 1.2fr 1fr; gap: 48px; } }
.site-footer h2 { color: var(--foot-muted); }
.site-footer .f-about { margin-top: 22px; }
.site-footer .chip, .f-list a { color: var(--foot-ink); border-bottom-color: var(--foot-line); }
.site-footer a:focus-visible { outline-color: var(--foot-ink); }
.f-list { list-style: none; margin: 0; padding: 0; }
.f-list a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; text-decoration: none; font-weight: 700; line-height: 1.5; font-size: 12.5px; }
.f-list.plain a { font-weight: 400; }
.f-list a:hover { text-decoration: underline; }
.f-brand { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--foot-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; font-size: 11.5px; color: var(--foot-muted); line-height: 1.7; }
.f-brand b { color: var(--foot-ink); font-family: var(--serif); font-size: 14.5px; letter-spacing: .12em; }
@media (max-width: 420px) { .logo { font-size: 17.5px; letter-spacing: .08em; } .guide-btn { font-size: 11px; padding: 0 10px; } .icon-btn { font-size: 11px; } }