.brandbar{position:relative;z-index:20;background:rgba(252,252,250,.96);border-bottom:1px solid var(--rule,#D7DDDA)}
.brandbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:76rem;height:50px;padding:0 32px}
.brandbar-home{display:inline-flex;align-items:center;gap:7px;align-self:stretch;
  text-decoration:none;color:var(--ink,#1B2A41);font-size:13px;font-weight:700;
  font-feature-settings:"palt";letter-spacing:.01em}
.brandbar-home svg{flex:none}
.brandbar-home .bb-logo{display:block;width:auto;height:32px}
@media(max-width:480px){.brandbar-home .bb-logo{height:28px}}
.brandbar-home:hover span{text-decoration:underline}
.brandbar-tag{font-size:12px;color:var(--mute,#55636A);margin-right:auto}
@media(max-width:480px){.brandbar-tag{display:none}}
.brandbar-list{display:inline-flex;align-items:center;align-self:stretch;
  font-size:13px;color:var(--action-text,#006B70);text-decoration:underline;
  text-underline-offset:2px}
.brandbar a:focus-visible{outline:3px solid var(--action,#006B70);outline-offset:-3px}
@media(max-width:760px){.brandbar .wrap{padding-inline:16px}}
.rail{font-size:12.5px;color:var(--mute);margin:-14px 0 20px;max-width:min(46rem,42em)}
.rail a{color:var(--mute)}
.order{border:1px solid var(--rule);border-radius:var(--r);padding:14px 18px;margin:4px 0 24px;
  max-width:min(46rem,42em)}
.order>b{display:block;font-size:14px;color:var(--mute);margin:0 0 6px;font-weight:600}
.order ol{margin:0;padding-left:1.5em;font-size:15px;line-height:1.9}
.order li{margin:.2em 0;text-wrap:pretty}
.cta-note{font-size:13px;color:var(--mute);margin:0 0 8px;max-width:46rem;text-wrap:pretty}
.photo-hero{position:relative;isolation:isolate;overflow:hidden;background:#17201D;color:#fff}
.hero-track{position:absolute;inset:0 auto 0 0;z-index:-3;display:flex;width:100%;height:100%;will-change:transform}
.hero-sequence{display:flex;width:100%;height:100%;padding:0}
.hero-sequence:first-child .hero-frame:first-child{display:block;width:100%;padding:0}
.hero-sequence:first-child .hero-frame:not(:first-child),.hero-sequence[aria-hidden="true"]{display:none}
.hero-frame{height:100%;overflow:hidden;background:#26332F}
.is-motion-ready .hero-track{width:max-content}
.is-motion-ready .hero-sequence{display:flex;width:auto;padding-right:6px}
.is-motion-ready .hero-frame,.is-motion-ready .hero-sequence:first-child .hero-frame{display:block;width:min(42vw,560px);padding-right:6px}
.hero-frame picture,.hero-frame img,.hero-single,.hero-single picture,.hero-single img{display:block;width:100%;height:100%}
.hero-frame img,.hero-single img{object-fit:cover;object-position:center}
.hero-single{position:absolute;inset:0;z-index:-3}
.hero-frame:nth-child(even) img{object-position:55% center}
.photo-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(11,27,25,.62),rgba(11,27,25,.58) 48%,rgba(11,27,25,.58))}
.photo-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,20,18,.08),rgba(8,20,18,.18) 48%,rgba(8,20,18,.70))}
[data-hero-toggle]{position:absolute;right:24px;bottom:20px;z-index:3;display:none;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(15,31,28,.58);color:#fff;font:600 12px/1 var(--gothic,inherit);cursor:pointer}
.has-motion-js [data-hero-toggle]{display:inline-flex}
[data-hero-toggle]::before{content:"Ⅱ";font-size:11px}
[data-hero-toggle][aria-pressed="true"]::before{content:"▶"}
[data-hero-toggle]:focus-visible{outline:3px solid #fff;outline-offset:3px}
.photo-market-hero .market-kv{height:560px;display:grid;place-items:center}
.photo-market-hero .market-kv-title{position:relative;z-index:2;width:100%;padding:48px 32px;text-align:center}
.photo-market-hero .market-kv-title h1{max-width:25em;margin-inline:auto;color:#fff;font-size:46px;line-height:1.28;letter-spacing:.02em;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.photo-market-hero .market-kv-entry{padding-block:28px 34px}
.photo-market-hero .market-kv-entry .acts{margin:0 0 14px}
.photo-market-hero .kv-note{margin:0 0 14px;font-size:12px;line-height:1.8;color:var(--mute)}
@media(max-width:760px){
  .is-motion-ready .hero-sequence{padding-right:4px}
  .is-motion-ready .hero-frame,.is-motion-ready .hero-sequence:first-child .hero-frame{width:78vw;padding-right:4px}
  [data-hero-toggle]{right:16px;bottom:14px}
  .photo-market-hero .market-kv{height:420px}
  .photo-market-hero .market-kv-title{padding:36px 16px}
  .photo-market-hero .market-kv-title h1{font-size:30px;line-height:1.35;letter-spacing:.01em}
  .photo-market-hero .market-kv-entry{padding-block:18px 24px}
}
@media(prefers-reduced-motion:reduce){.hero-track{will-change:auto}}
.scene-links .scene-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px 24px;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}
.scene-links .scene-list li{padding-left:1em;text-indent:-1em}
.scene-links .scene-list li::before{content:"›";margin-right:.4em;color:var(--mute)}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/sub/noto-400.woff2) format('woff2')}
@font-face{font-family:'Noto Sans JP';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/sub/noto-700.woff2) format('woff2')}
:root{--paper:#FCFCFA;--surface:#F0F3F1;--ink:#17201D;--mute:#5D6762;--rule:#D7DDDA;--border:#7D8984;--action:#006B70;--action-text:#006B70;--action-soft:#DCEBEC;--cv:#006B70;--cv-hover:#004F53;--r:4px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s18:72px;--small:14px;--body:16px;--medium:20px;--large:24px;--title:40px}
*{box-sizing:border-box}html{color-scheme:light;scroll-padding-top:var(--s6)}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:var(--body);line-height:1.8}a{color:var(--action-text);text-underline-offset:3px}a:hover{text-decoration-thickness:2px}a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--action);outline-offset:4px}.skip{position:absolute;left:var(--s4);top:-100px;z-index:20;background:var(--paper);padding:var(--s3)}.skip:focus{top:var(--s2)}.wrap{width:min(100% - 64px,76rem);margin-inline:auto}header{border-bottom:1px solid var(--rule);background:var(--paper)}.site-name{margin:var(--s3) 0;font-size:var(--body);font-weight:700}.breadcrumbs{font-size:var(--small);color:var(--mute);margin-top:var(--s4)}h1,h2,h3{font-family:"Helvetica Neue","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;line-height:1.5;text-wrap:balance}h1{font-size:var(--title);margin:var(--s6) 0 var(--s3);letter-spacing:-.02em}h2{font-size:var(--large);margin:0 0 var(--s4)}h3{font-size:var(--medium);margin:0 0 var(--s2)}p{margin:var(--s3) 0}.lead{font-size:var(--medium);font-weight:700;max-width:46rem}.answer{max-width:46rem;background:var(--surface);border-radius:var(--r);padding:18px 20px}.meta,.note,small{color:var(--mute);font-size:var(--small)}.meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);margin-top:var(--s4)}nav.jump{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s4) 0 var(--s6)}nav.jump a{border:1px solid var(--border);border-radius:var(--r);padding:var(--s2) var(--s3);text-decoration:none;background:var(--paper)}section{padding-block:26px;border-top:1px solid var(--rule)}.table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r)}table{border-collapse:separate;border-spacing:0;width:100%;min-width:960px;font-size:var(--small)}caption{text-align:left;font-size:var(--body);font-weight:700;padding:var(--s3) var(--s4);background:var(--surface)}th,td{text-align:left;vertical-align:top;padding:8px 12px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}thead th{background:var(--surface);font-weight:700}tbody th{font-weight:700;width:180px;position:sticky;left:0;background:var(--paper);z-index:1;border-right:1px solid var(--border)}thead th:first-child{position:sticky;left:0;z-index:2}tbody tr:last-child>*{border-bottom:0}tr>*:last-child{border-right:0}.loan{font-weight:700;font-size:var(--body)}td{max-width:240px}td small,th small{display:block;margin-top:var(--s1);font-weight:400}.company{display:grid;grid-template-columns:16rem 1fr;gap:var(--s6);padding:var(--s6) 0;border-top:1px solid var(--rule)}.company h3{font-size:var(--medium)}.company p:first-child{margin-top:0}.company dl{margin:0}.company dt{font-weight:700}.company dd{margin:0 0 var(--s3)}.sources{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);list-style:none;padding:0;font-size:var(--small)}.official{display:inline-block;background:var(--cv);color:var(--paper);font-weight:700;padding:var(--s2) var(--s4);border-radius:var(--r);text-decoration:none;margin-top:var(--s2)}.official:hover{background:var(--cv-hover)}.read{max-width:46rem}.checklist{padding-left:var(--s6)}.checklist li{padding-left:var(--s1);margin-bottom:var(--s3)}.method{background:var(--surface);padding:var(--s6);border-radius:var(--r)}footer{border-top:1px solid var(--rule);margin-top:var(--s8);padding:36px 0 52px;background:var(--surface);font-size:var(--small)}footer ul{display:flex;gap:var(--s3) var(--s6);flex-wrap:wrap;list-style:none;padding:0}.number{font-variant-numeric:tabular-nums}
@media(max-width:767px){.wrap{width:min(100% - 32px,76rem)}h1{font-size:30px}.lead{font-size:var(--body)}.company{grid-template-columns:1fr;gap:var(--s3)}section{padding-block:16px}tbody th{width:132px;min-width:132px;max-width:132px}table{min-width:870px}th,td{padding:var(--s2)}.method{padding:var(--s4)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.mobile-compare{display:none}
@media(max-width:767px){.table-scroll{display:none}.mobile-compare{display:block}.mobile-company{padding:var(--s4) 0;border-top:1px solid var(--border)}.mobile-company h3{margin-bottom:0}.mobile-company p{margin:var(--s1) 0 var(--s3)}.mobile-company dl{display:grid;grid-template-columns:6em minmax(0,1fr);gap:var(--s2) var(--s3);margin:0;font-size:var(--small)}.mobile-company dt{font-weight:700}.mobile-company dd{margin:0}}

/* KV: 題材写真の上に横方向のスクリーンを重ね、白のH1を置く（共通DESIGN 2026-09-07 全体視覚文法の市場トップ写真KV）。 */
.mk-kv{position:relative;isolation:isolate;margin-top:20px;border:0;padding:0;background:var(--ink);min-height:300px;display:grid;align-content:end}
.mk-kv>picture{position:absolute;inset:0;z-index:-2;display:block}
.mk-kv>picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.mk-kv::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,28,47,.72),rgba(15,28,47,.64) 50%,rgba(15,28,47,.62))}
.mk-kv-title{padding:64px 36px 16px}
.mk-kv-title h1{color:#FFF;margin:0;font-size:clamp(28px,3.2vw,40px);line-height:1.4;max-width:22em}
.mk-kv-note{color:#FFF;font-size:12px;line-height:1.8;margin:0;padding:0 36px 14px;opacity:.92}
nav.jump{padding-block:20px 12px}
nav.jump a:first-child{background:var(--action);color:#FFF;border-color:var(--action);font-weight:700}
.price{font-weight:700;font-size:var(--body);font-variant-numeric:tabular-nums}
.unpriced{font-weight:400}
.voc{margin:var(--s4) 0;padding:var(--s3) var(--s4);border-left:3px solid var(--rule);background:var(--surface);border-radius:0 var(--r) var(--r) 0}
.voc p{margin:0 0 var(--s2)}.voc footer{font-size:var(--small);color:var(--mute)}
td{max-width:300px}
@media(max-width:640px){.mk-kv{min-height:220px}.mk-kv-title{padding:44px 16px 10px}.mk-kv-title h1{font-size:26px}.mk-kv-note{padding:0 16px 12px}}
@media(max-width:767px){.mobile-company dl{grid-template-columns:5.5em minmax(0,1fr)}}
.mk-kv .keep{white-space:nowrap}

/* 広告枠のCSSは build.mjs が _build/asp.mjs の ASP_CSS から差し込む */


/* 字寸の下限。**12px を下回る宣言を置かない**（DESIGN.md 視覚言語 v1）。
   <small> はブラウザ既定が親の 0.8333 倍なので、宣言が無いだけで 11.67px に落ちる。
   2026-09-20に touch_audit（_tools/touch_audit.mjs）で266件の実測が出た。
   ここは素の要素セレクタなので、クラス付きの規則に負ける。下げる宣言を足さないこと。 */
small{font-size:12px}

/* 押せる大きさの下限。**44px を下回るボタンを作らない**（Apple HIG・WCAG 2.5.8 AAA）。
   2026-09-20に touch_audit で29件の実測が出た。いちばん多かったのが送客ボタンの
   40.3px と 43.2px で、CSSのコメントには「タップ高さ44pxは維持」と書いてあった。
   **高さだけを決める。** display を inline-flex に変えると幅が変わり、
   ヘッダーが375pxをはみ出して layout_audit が止まる（別セッションが実際に踏んだ）。 */
.btn,button,[role="button"]{min-height:44px}


/* 成果報酬の広告枠（_build/asp.mjs）。景表法のステマ規制で読者に見える表示が要る。 */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.btn{display:inline-block;padding:12px 20px;border:1px solid var(--action,#006B70);border-radius:var(--r,4px);background:var(--action,#006B70);color:#fff;font-weight:700;text-decoration:none;line-height:1.4}
.btn:hover{background:var(--action-hover,#004F53);border-color:var(--action-hover,#004F53);color:#fff}
/* 送客ボタンの色は --action から取る。overlay.css:365 の
   .cta-official .btn,.btn-primary,.btn-go{background:var(--action)} が
   塗り直すので、overlay を読む市場では --cv はボタンに届かない。
   部品側だけ --cv を見ると市場ごとに出所が変わるので1か所に揃える
   （2026-09-20に別セッションが本番を測って判明）。 */
.btn-go{background:var(--action,#006B70);border-color:var(--action,#006B70);color:#fff}
.btn-go:hover{background:var(--action-hover,#004F53);border-color:var(--action-hover,#004F53);color:#fff}
.asp{margin:24px 0;padding:20px;background:var(--surface,#F7F7F7);border:1px solid var(--rule,#DDD);border-radius:var(--r,4px)}
.asp-head{margin:0 0 10px;font-size:13px;color:var(--mute,#55636A);display:flex;align-items:center;gap:8px}
.asp-pr{display:inline-block;padding:2px 8px;background:var(--ink,#1B2A41);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}
.asp-name{margin:0 0 8px;font-size:18px;line-height:1.5;font-weight:700}
.asp-lead{margin:0 0 8px}
.asp-note{margin:0 0 8px;font-size:14px;color:var(--mute,#55636A)}
.asp-act{margin:12px 0 0}
.asp-act>img{visibility:hidden}
.asp-act>a{display:inline-block;box-sizing:border-box;max-width:100%;padding:12px 20px;border:1px solid var(--action,#006B70);border-radius:var(--r,4px);background:var(--action,#006B70);color:#fff;font-weight:700;text-decoration:none;line-height:1.5;overflow-wrap:anywhere}
.asp-act>a:hover{background:var(--action-hover,#004F53);border-color:var(--action-hover,#004F53);color:#fff}
.asp-act>a:focus-visible{outline:3px solid var(--action,#006B70);outline-offset:3px}
.asp-list .asp+.asp{margin-top:16px}
@media(max-width:760px){.asp{padding:16px}}


/* 会社ページ（_build/company-page.mjs）。overlay.css を読まない市場でも成り立つよう自前で持つ。 */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.btn{display:inline-block;padding:12px 20px;border:1px solid var(--action,#006B70);border-radius:var(--r,4px);background:var(--action,#006B70);color:#fff;font-weight:700;text-decoration:none;line-height:1.4}
.btn:hover{background:var(--action-hover,#004F53);border-color:var(--action-hover,#004F53);color:#fff}
/* 送客ボタンの色は --action から取る。overlay.css:365 の
   .cta-official .btn,.btn-primary,.btn-go{background:var(--action)} が
   塗り直すので、overlay を読む市場では --cv はボタンに届かない。
   部品側だけ --cv を見ると市場ごとに出所が変わるので1か所に揃える
   （2026-09-20に別セッションが本番を測って判明）。 */
.btn-go{background:var(--action,#006B70);border-color:var(--action,#006B70);color:#fff}
.btn-go:hover{background:var(--action-hover,#004F53);border-color:var(--action-hover,#004F53);color:#fff}
.cta-top{margin:var(--s4,18px) 0}
.checks{padding-left:1.3em}
.checks li{margin-bottom:.5em}

/* 事実表。比較表用の table{min-width:960px} をこの表だけ外す
   （それが効いたまま375pxで横スクロールが出る。2026-09-19 layout_audit で検出）。 */
.kv{width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;font-size:var(--small,14px)}
.kv th{width:34%;min-width:0;max-width:none;position:static;text-align:left;vertical-align:top;padding:10px 12px 10px 0;font-weight:700;background:transparent;border-right:0;word-break:break-word}
.kv td{max-width:none;padding:10px 0;vertical-align:top;border-right:0;word-break:break-word;overflow-wrap:anywhere}
.kv tr>*{border-bottom:1px solid var(--rule,#DDD)}
.kv tr:last-child>*{border-bottom:0}
@media(max-width:767px){.kv{min-width:0}.kv th{width:40%;min-width:0;max-width:none}}