/* 相続マーケット（次世代株式会社様）構成確認用ワイヤー 共通スタイル 2026-10-20。カプテリのワイヤー（clients/kaputeli.com/wireframes/2026-10-03-renewal/wire.css）を雛形に複製 */
:root{--ink:#212529;--sub:#5f6670;--line:#c9ced4;--bg:#fff;--bg2:#f3f4f6;--box:#e6e8eb;--acc:#111}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.hdr{padding:14px 20px;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.hdr .nav span,.hdr .nav a{margin-left:14px;color:var(--sub)}
.hdr .cta{border:1px solid var(--ink);padding:6px 12px;border-radius:2px;white-space:nowrap}
.crumb{font-size:12px;color:var(--sub);padding:10px 20px}
section{padding:56px 0}
section.alt{background:var(--bg2)}
.lab{font-size:11px;letter-spacing:.18em;color:var(--sub);margin-bottom:8px}
h1,h2,h3{margin:0 0 14px;font-weight:700;line-height:1.35}
h1{font-size:28px}h2{font-size:24px}h3{font-size:17px}
p{margin:0 0 12px}
.lead{color:var(--sub)}
.small{font-size:13px}
.img{background:var(--box);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:12px;text-align:center;padding:8px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid var(--line);padding:18px;background:#fff}
.card h3{font-size:15px}
.card.big{padding:26px}
/* ボタン: 外側の余白を持たせない（横並びの枠と線がずれる原因だった）。並びは .btnrow の gap で取る */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ink);padding:14px 26px;border-radius:2px;font-weight:700;background:#fff;text-align:center}
.btn.fill{background:var(--acc);color:#fff}
.btn.big{font-size:18px;padding:20px 44px;min-width:340px}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
/* 問い合わせの帯: ボタンを大きく真ん中に */
.cta-center{text-align:center}
.cta-center .btnrow{justify-content:center}
.cta-center .lead{margin-left:auto;margin-right:auto;max-width:760px}
/* リンク: 文字を枠の上下中央に置く（横並びで箱だけ伸びても文字が上に寄らない） */
.link{display:flex;align-items:center;border:1px solid var(--line);padding:14px 16px;background:#fff;font-weight:700}
.link:after{content:" →";color:var(--sub);margin-left:.3em}
.links{display:grid;gap:12px}
.num{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0}
.num div{min-width:120px}.num b{display:block;font-size:26px;line-height:1.1}.num small{color:var(--sub)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left}
thead th{background:var(--bg2)}
.fv{padding:40px 0 48px}
.fv .catch{min-height:120px;border:2px dashed #999;background:#fafafa;display:flex;align-items:center;justify-content:center;color:#999;font-size:13px;margin:14px 0 18px;text-align:center;padding:12px}
.fv .g2{align-items:start}
.tags span{display:inline-block;border:1px solid var(--line);padding:2px 8px;font-size:11px;margin:0 4px 4px 0;color:var(--sub)}
/* 取引先ロゴの枠 */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:6px}
.logo{display:flex;flex-direction:column;align-items:center;gap:8px}
.logo .mark{width:100%;height:76px;border:2px dashed #999;background:#fafafa;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px;letter-spacing:.12em}
.logo small{font-size:11px;color:var(--sub);text-align:center;line-height:1.5}
/* コラム: 画像＋タイトルのカード */
.col-card{display:block;border:1px solid var(--line);background:#fff;padding:12px}
.col-card .img{height:170px;margin-bottom:12px}
.col-card .body{padding:0 4px 4px}
.col-card small{color:var(--sub)}
.q{border-top:1px solid var(--line);padding:12px 0;margin-bottom:4px}
.q b{display:block}
ul.chk{list-style:none;padding:0;margin:0 0 12px}
ul.chk li{padding-left:1.4em;position:relative;margin-bottom:6px}
ul.chk li:before{content:"✓";position:absolute;left:0;color:var(--sub)}
.foot{padding:28px 20px;font-size:12px;color:var(--sub)}
.mt{margin-top:28px}
@media (max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}h1{font-size:23px}h2{font-size:20px}.hdr .nav{display:none}section{padding:40px 0}.logos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.btnrow{flex-direction:column}.btnrow .btn,.btn.big{width:100%;min-width:0}}
tbody th[scope=row]{width:9.5em}
.card h4{font-size:15px;margin:0 0 14px;font-weight:700;line-height:1.35}
.hdr .brand b{display:block}.hdr .brand small{display:block;color:var(--sub);font-size:11px}
/* FVのボタンは左の列いっぱいに縦に並べ、幅をそろえる */
.fv .btnrow{display:grid;grid-template-columns:1fr}.fv .btnrow .btn{width:100%;min-width:0}
/* 問い合わせの帯のボタンは同じ幅で横に3つ */
.cta-center .btnrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin-left:auto;margin-right:auto}
.cta-center .btnrow .btn.big{min-width:0;width:100%;line-height:1.4}
/* リンクのあるカードは、リンクをカードの下端にそろえる */
.card:has(> .link){display:flex;flex-direction:column}
.card:has(> .link) > .link{margin-top:auto}
@media (max-width:760px){.cta-center .btnrow{grid-template-columns:1fr}.cta-center h2 br{display:none}}
@media (max-width:760px){.num{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.num div{min-width:0}.num b{font-size:20px}}
.btn{line-height:1.4}
.cta-center .btnrow.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px}
@media (max-width:760px){.cta-center .btnrow.two{grid-template-columns:1fr}}
/* 発注者別ページのFV: 対象（〇〇向け）とサービス名を2行に分け、用途をタグで見せる */
.fv-title .for{display:block;font-size:15px;font-weight:700;color:var(--sub);letter-spacing:.06em;margin-bottom:8px}
.fv-title{font-size:34px;line-height:1.3}
ul.fv-uses{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
ul.fv-uses li{border:1px solid var(--ink);padding:4px 12px;font-size:13px;font-weight:700;border-radius:999px}
@media (max-width:760px){.fv-title{font-size:26px}}

/* FV周りの見直し（2026-10-02）: ボタンの下の一言、問い合わせ欄はフォームを大きく1つ・電話とLINEはその下に小さめに */
.btn-note{margin:-6px 0 2px;font-size:13px;color:var(--sub);text-align:center}
.cta-center .btnrow.one{grid-template-columns:1fr;max-width:560px}
.cta-center .btnrow.two.sub{max-width:560px;margin-top:12px}
@media (max-width:760px){.btn.big{padding:18px 16px}}
.btn-note,.cta-center .lead.small{text-wrap:balance;word-break:auto-phrase}
.fv-tel{margin:12px 0 0;font-size:14px;text-align:center;text-wrap:balance;word-break:auto-phrase}.fv-tel a{font-weight:700;text-decoration:underline}

/* 10/2 FB2: ヘッダーに全ページ（ホバーで開く）、ページ内ナビ、選ばれる理由は画像＋文、途中の問い合わせ帯、一緒に頼めること、メッセージ、関連ページ */
.hdr{position:relative}
.hdr .brand{display:block}
.gnav{display:flex;align-items:center;gap:2px}
.gnav > a,.gnav .dd > span{display:block;padding:8px 10px;color:var(--sub);white-space:nowrap;cursor:pointer}
.gnav .dd{position:relative}
.gnav .dd > span:after{content:" ▾";font-size:10px}
.dd-menu{display:none;position:absolute;left:0;top:100%;min-width:230px;background:#fff;border:1px solid var(--line);padding:6px 0;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.dd:hover > .dd-menu,.dd:focus-within > .dd-menu{display:block}
.dd-menu a{display:block;padding:8px 14px;color:var(--ink);white-space:nowrap;margin:0}
.dd-menu a:hover{background:var(--bg2)}
.gnav a[aria-current],.dd-menu a[aria-current]{font-weight:700;color:var(--ink)}
.hdr .nav .dd{position:relative;display:inline-block}
.hdr .nav .dd-menu a{margin-left:0}
.spnav{display:none}
.spnav summary{list-style:none;border:1px solid var(--line);padding:6px 12px;border-radius:2px;cursor:pointer}
.spnav summary::-webkit-details-marker{display:none}
.spnav-body{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 20px 14px;z-index:30}
.spnav-body b{display:block;font-size:11px;letter-spacing:.1em;color:var(--sub);margin:10px 0 2px}
.spnav-body a{display:block;padding:7px 0;border-bottom:1px solid var(--bg2)}
@media (max-width:760px){.gnav{display:none}.spnav{display:block}.hdr .cta{margin-left:auto}}
.pnav{position:sticky;top:0;z-index:20;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pnav .wrap{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-top:8px;padding-bottom:8px;white-space:nowrap;scrollbar-width:thin}
.pnav b{font-size:12px;color:var(--sub);padding-right:6px;flex:0 0 auto}
.pnav a{flex:0 0 auto;font-size:13px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}
section[id]{scroll-margin-top:56px}
.reason-list{display:grid;gap:18px}
.reason{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:center;background:#fff;border:1px solid var(--line);padding:18px}
.reason .img{aspect-ratio:4/3;min-height:0}
.reason:nth-child(even) > .img{order:2}
.reason h3{font-size:19px;margin-bottom:10px}
.reason p{margin:0}
@media (max-width:760px){.reason{grid-template-columns:1fr;gap:14px}.reason:nth-child(even) > .img{order:0}}
.cta-band{margin-top:28px;border:2px solid var(--ink);background:#fff;padding:22px 20px;text-align:center}
.cta-band .ttl{font-weight:700;font-size:17px;margin:0 0 12px;text-wrap:balance;word-break:auto-phrase}
.cta-band .btn.big{width:100%;max-width:560px;min-width:0}
.cta-band .btn-note{margin:8px auto 0;max-width:560px}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc .card{padding:14px}
.svc .card .img{height:120px;margin-bottom:10px}
.svc .card b{display:block;margin-bottom:4px}
.svc .card p{margin:0}
@media (max-width:760px){.svc{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.svc .card{padding:10px}.svc .card .img{height:90px}.svc .card p{font-size:12px}}
.msg-box{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px;align-items:start}
.msg-sign{margin-top:14px;font-weight:700}
.msg-sup{font-size:13px;color:var(--sub);border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
@media (max-width:760px){.msg-box{grid-template-columns:1fr}}
.fit{border:1px solid var(--ink);background:#fff;padding:18px 20px}
.fit h3{margin-bottom:10px}
.fit ul.chk{margin:0}
.rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.rel-ttl{font-size:12px;letter-spacing:.08em;color:var(--sub);margin:0 0 4px;font-weight:700}
.rel a{display:block;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.rel-top{margin-top:20px}
@media (max-width:760px){.rel{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
a.tl{text-decoration:underline}
thead th.void{background:transparent;border-top-color:transparent;border-left-color:transparent}
.hdr .nav .dd-menu{margin-left:0}
/* ページ内ナビは上下の節から少し離す。関連ページのリンクは枠線を付けず、間をあけて並べる */
.pnav{margin:10px 0}
.rel a{border-bottom:0;padding:4px 0;margin:0 0 6px;text-decoration:underline;text-underline-offset:3px}
.spnav:not([open]) .spnav-body{display:none}
a.tl{white-space:nowrap}
a.tl.wrap{white-space:normal}
/* 選ばれる理由の行は画像を少し小さく。スマホではメッセージの写真枠と理由の画像を低く。見出しは語の途中で折り返さない */
.reason{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.reason .img{aspect-ratio:16/10}
@media (max-width:760px){.msg-box .img{min-height:200px !important;max-width:260px}.reason .img{aspect-ratio:16/9}}
h1,h2,h3,.svc .card b,.reason h3{text-wrap:balance;word-break:auto-phrase}
@media (max-width:760px){.reason{grid-template-columns:1fr}}
/* 10/3 選ばれる理由の偶数行（画像が右）も、文の列を広くする */
.reason:nth-child(even){grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
@media (max-width:760px){.reason:nth-child(even){grid-template-columns:1fr}}

/* 10/6 コンセプト反映: 選ばれる理由の導入、お客様の声、グレードの作例、問い合わせフォーム、スマホの固定ボタン */
.reason-intro{font-size:18px;margin:0 0 6px}
.voices .card p:first-child{margin-bottom:8px}
.voices .voice-frame{padding:10px}
.grade .img{min-height:0}
.cform{max-width:720px;margin:0 auto;text-align:left}
.cform label{display:block;font-size:13px;font-weight:700;margin:0 0 12px}
.cform .req{font-size:11px;font-weight:700;color:#fff;background:var(--ink);padding:1px 6px;margin-left:6px;border-radius:2px}
.cform input,.cform select,.cform textarea{display:block;width:100%;margin-top:4px;border:1px solid var(--line);padding:10px 12px;font:inherit;font-weight:400;background:#fff}
.cform button{width:100%;max-width:560px;min-width:0;margin:6px auto 0;display:block;cursor:pointer}
.cform .btn-note{margin-top:8px}
.spbar{display:none}
@media (max-width:760px){
  .spbar{display:grid;grid-template-columns:2fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);padding:8px 12px}
  .spbar .btn{padding:12px 8px;font-size:14px;min-width:0}
  body{padding-bottom:64px}
  .cform .grid{grid-template-columns:1fr}
}
/* 10/6 FVのキャッチは本文の文になったので、枠の見た目をやめて見出しの見た目に。数字の3つは1行に */
.fv .catch{min-height:0;border:0;background:none;color:var(--ink);font-size:24px;font-weight:700;justify-content:flex-start;text-align:left;padding:0;margin:8px 0 14px;line-height:1.4;text-wrap:balance;word-break:auto-phrase}
.num{gap:18px}.num div{min-width:0;flex:1 1 150px}.num small{display:block;font-size:11px;line-height:1.4}
@media (max-width:760px){.fv .catch{font-size:20px}.num{display:flex}.num div{flex:1 1 45%}}
/* 10/6 依頼の流れを5段に */
.g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:760px){.g5{grid-template-columns:1fr}}

/* ===== 2026-10-20 相続マーケット TOP で足した部品（カプテリの部品はそのまま上に残す） ===== */
/* 見出し: h2 は本文の1.6倍以上（スマホも24px） */
@media (max-width:760px){h2{font-size:24px}}
.lead-wide{max-width:760px}
/* FV: h1 は小さめの見出し、入口の一言を一番大きく */
.fv .fv-h1{font-size:16px;font-weight:700;color:var(--sub);letter-spacing:.06em;margin:0 0 10px}
.fv .catch{font-size:38px;line-height:1.35;margin:0 0 16px}
.fv .fv-sub{font-size:16px;margin:0 0 6px}
.fv .btnrow{gap:10px}
.fv-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;font-size:14px}
.fv-links a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.fv .catch{font-size:30px}.fv .fv-sub{font-size:15px}.fv .img{min-height:220px !important}}
/* LINE のボタン（色は白黒。配色はデザイナーが決める） */
.hdr .cta.line{font-weight:700}
/* よくある悩み: 吹き出し（PC 3列・スマホ 2列） */
.bubbles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:6px 0 0}
.bubble{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.bubble p{position:relative;margin:0;width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 14px;font-weight:700;line-height:1.6;text-wrap:balance;word-break:auto-phrase}
.bubble p:after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.bubble .ico{width:56px;height:56px;border-radius:50%;margin-top:4px;font-size:10px;padding:4px}
.answer{margin:30px auto 0;max-width:760px;text-align:center}
.answer p{font-size:17px;font-weight:700;margin:0 0 12px;text-wrap:balance;word-break:auto-phrase}
.answer .btn.big{width:100%;max-width:560px;min-width:0}
@media (max-width:760px){.bubbles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bubble p{padding:12px 10px;font-size:14px}.answer p{font-size:16px}}
/* 3つの質問の入口: 質問ごとに選択肢を並べる（押せる見た目にしない） */
.q3{border:1px solid var(--ink);background:#fff;padding:24px 26px}
.q3-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.q3-row:last-of-type{border-bottom:0}
.q3-row b{display:block;font-size:16px}
.q3-row small{display:block;color:var(--sub);font-size:12px;letter-spacing:.08em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{border:1px solid var(--line);background:var(--bg2);padding:6px 14px;border-radius:4px;font-size:14px}
.q3 .btnrow{justify-content:center;margin-top:18px}
.q3 .btn.big{width:100%;max-width:560px;min-width:0}
@media (max-width:760px){.q3{padding:16px}.q3-row{grid-template-columns:1fr;gap:8px}.chips span{padding:5px 10px;font-size:13px}}
/* 大阪市24区: 区名のタイル（PC 6列・スマホ 3列） */
.wards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.wards a{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;padding:14px 6px;font-weight:700;text-align:center}
.wards a:hover{background:var(--bg2)}
.ward-map{min-height:260px;margin-bottom:18px}
@media (max-width:760px){.wards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.wards a{padding:12px 4px;font-size:14px}.ward-map{min-height:180px}}
/* 売却の流れ: 3段（PCは横・スマホは縦の番号つき） */
ol.flow3{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:step}
ol.flow3 li{counter-increment:step;border:1px solid var(--line);background:#fff;padding:18px;display:flex;flex-direction:column;gap:8px}
ol.flow3 li:before{content:"STEP " counter(step);font-size:11px;letter-spacing:.18em;color:var(--sub)}
ol.flow3 .img{height:110px}
ol.flow3 h3{margin:0;font-size:18px}
ol.flow3 p{margin:0}
.flow-note{margin:16px 0 0}
@media (max-width:760px){ol.flow3{grid-template-columns:1fr;gap:10px}ol.flow3 li{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:14px}ol.flow3 li:before{grid-column:1 / -1}ol.flow3 .img{height:72px;grid-row:2 / span 2}ol.flow3 h3{font-size:16px}ol.flow3 p{font-size:14px}}
/* よくある質問の抜粋 */
.faq-list{max-width:860px}
.faq-list .q b{font-size:16px;margin-bottom:4px}
.faq-list .q b:before{content:"Q. ";color:var(--sub)}
.faq-list .q p{margin:0}
/* 相続マーケットについて（会社案内） */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;align-items:start}
.about table th{width:9em;background:var(--bg2);font-weight:700}
@media (max-width:760px){.about{grid-template-columns:1fr;gap:16px}.about table th{width:6.5em}}
/* 最後の相談の帯: LINE を大きく1つ、メールと3問はその下に */
.cta-center .btnrow.one .btn.big{width:100%}
.contact-sub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:560px;margin:12px auto 0}
.contact-sub .btn{width:100%;min-width:0}
@media (max-width:760px){.contact-sub{grid-template-columns:1fr}}
/* スマホの固定ボタン: LINE と 3問 */
@media (max-width:760px){.spbar{grid-template-columns:3fr 2fr}}
/* フッター */
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px}
.foot-links a{text-decoration:underline;text-underline-offset:3px}
/* 3つの質問の行は線で区切らず、薄い地の帯を間をあけて並べる（L-08 箱どうしが接する対策） */
.q3-row{border-bottom:0;background:var(--bg2);padding:14px 16px;margin-bottom:10px}
.q3-row .chips span{background:#fff}
/* スマホで押せるもの（相談の文字リンク・ヘッダーのボタン）は高さ44px以上（D-14） */
@media (max-width:760px){
  .hdr .cta{min-height:44px;display:inline-flex;align-items:center}
  .fv-links a,.foot-links a{min-height:44px;display:inline-flex;align-items:center}
}
/* 10/20 PC/SP の描画を見て直した点: ボタン下の一言がボタンに重なる・行末の1〜2字の取り残し・表の見出しの折り返し・スマホのヘッダー */
.btnrow + .btn-note{margin-top:10px}
p,.lead{text-wrap:pretty}
.faq-list .q b{text-wrap:balance;word-break:auto-phrase}
.about table th{width:10.5em;word-break:auto-phrase}
ol.flow3 .img{width:72px;height:72px}
@media (max-width:760px){
  .hdr .brand small{display:none}
  .spnav summary{white-space:nowrap}
  .about table th{width:7em}
  .about > .img{min-height:140px !important}
}
.lead,.btn-note,.answer p,.about td{word-break:auto-phrase}
/* 10/20 R1: 売却の流れの下に、相談の窓口・査定・仲介をする会社を分けて示す表 */
table.roles{margin:18px 0 0;max-width:720px;background:#fff}
table.roles th{width:12em;background:var(--bg2);font-weight:700;word-break:auto-phrase}
@media (max-width:760px){table.roles th{width:8.5em}}
table.roles td{word-break:auto-phrase}
@media (max-width:760px){.bubble p{font-size:13px;padding:12px 8px}}
/* 10/20 方針変更（デザインはデザイナーに依頼）: 色は白黒だけで置く。LINEのボタンも緑にせず、配色はデザイナーが決める */
.btn.line,.hdr .cta.line{background:var(--acc);border-color:var(--acc);color:#fff}

/* ===== 2026-11-05 残りの9本（3問・結果・メール相談・査定・売却の流れ・よくある質問・会社案内・区ページの型・記事の型）で足した部品 ===== */
/* 下層ページの見出しの帯（FVと同じく読点・句点を入れない） */
.fv.ph{padding:28px 0 36px}
.ph .ph-lab{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.06em;margin:0 0 8px}
.ph h1{font-size:32px;line-height:1.35;margin:0 0 12px}
.ph .fv-sub{font-size:16px;margin:0 0 4px;text-wrap:balance;word-break:auto-phrase}
.ph .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ph .btnrow .btn{width:auto;min-width:300px}
@media (max-width:760px){.ph h1{font-size:26px}.ph .fv-sub{font-size:15px}.ph .btnrow{display:grid;grid-template-columns:1fr}.ph .btnrow .btn{min-width:0;width:100%}}
.crumb a{text-decoration:underline;text-underline-offset:3px}
.crumb span[aria-current]{color:var(--ink)}
/* 文の仮枠（区ごと・記事ごとに書く本文の置き場所。本番には出ない） */
.txt-ph{border:1px dashed var(--line);background:var(--bg2);color:var(--sub);font-size:13px;padding:14px 16px;margin:0 0 14px;line-height:1.7}
/* 3つの質問: 1画面1問 */
.quiz{display:grid;gap:22px}
.quiz-step{border:1px solid var(--ink);background:#fff;padding:22px 24px}
.quiz-prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sub);margin:0 0 10px}
.quiz-prog b{font-size:15px;color:var(--ink)}
.quiz-bar{flex:1;height:6px;background:var(--bg2);border:1px solid var(--line);position:relative}
.quiz-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.quiz-step h2{font-size:22px;margin:0 0 6px}
.quiz-step .hint{font-size:14px;color:var(--sub);margin:0 0 14px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts a{display:flex;align-items:center;justify-content:center;min-height:64px;border:1px solid var(--ink);background:#fff;font-size:18px;font-weight:700;text-align:center;padding:10px}
.quiz-back{display:inline-block;margin-top:12px;font-size:14px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.quiz-step{padding:16px}.opts,.opts.three{grid-template-columns:1fr}.opts a{min-height:56px;font-size:17px}}
/* 結果: あなたの状況 */
.status{border:1px solid var(--ink);background:#fff;padding:18px 20px;margin-top:18px}
.status-ttl{font-weight:700;margin:0 0 10px}
.status dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.status dl div{background:var(--bg2);padding:10px 12px}
.status dt{font-size:12px;color:var(--sub)}
.status dd{margin:0;font-size:17px;font-weight:700}
.status .quiz-back{margin-top:10px}
@media (max-width:760px){.status dl{grid-template-columns:1fr}}
/* 比べる表（列見出しあり） */
table.cmp{background:#fff}
table.cmp thead th{font-weight:700;word-break:auto-phrase}
table.cmp tbody th{background:var(--bg2);font-weight:700;width:9em;word-break:auto-phrase}
/* スマホで表を1行ずつの箱にする指定は、下の日本語の改行の基本セット（table.tbl-card）に任せる */
/* 情報の表（行見出しだけ） */
table.info{background:#fff;max-width:860px}
table.info th{width:11em;background:var(--bg2);font-weight:700;word-break:auto-phrase}
table.info td{word-break:auto-phrase}
@media (max-width:760px){table.info th{width:7.5em}}
/* フォーム（カプテリの .cform を使い、ラジオとチェックの並びを足す） */
.cform fieldset{border:0;padding:0;margin:0 0 14px}
.cform legend{font-size:13px;font-weight:700;margin:0 0 6px;padding:0}
.cform .choices{display:flex;flex-wrap:wrap;gap:8px}
.cform .choices label{display:inline-flex;align-items:center;gap:6px;margin:0;border:1px solid var(--line);background:#fff;padding:8px 12px;font-weight:400}
.cform .choices input{display:inline-block;width:auto;margin:0}
.cform .agree{display:flex;align-items:flex-start;gap:8px;font-weight:400;font-size:14px}
.cform .agree input{display:inline-block;width:auto;margin:4px 0 0}
.cform .field-note{display:block;font-size:12px;font-weight:400;color:var(--sub);margin-top:4px}
.form-box{border:1px solid var(--ink);background:#fff;padding:24px 26px}
@media (max-width:760px){.form-box{padding:16px}}
/* よくある質問の分類 */
.faq-group{margin:0 0 28px}
.faq-group h2{font-size:20px;margin:0 0 6px}
.faq-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.faq-cats a{border:1px solid var(--line);background:#fff;padding:6px 14px;border-radius:999px;font-size:14px}
/* 区ページ: 区役所の相談窓口のカード */
.office{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.office .card h3{font-size:16px;margin-bottom:8px}
.office .card p{margin:0 0 6px;font-size:14px}
@media (max-width:760px){.office{grid-template-columns:1fr}}
.wards.small a{padding:10px 4px;font-size:14px}
.wards a[aria-current]{background:var(--bg2);border-color:var(--ink)}
.src{font-size:13px;color:var(--sub);padding-left:1.2em;margin:0}
.src li{margin-bottom:4px}
.src a{text-decoration:underline;text-underline-offset:3px}
/* 記事: 目次・執筆と監修・関連記事 */
.art{max-width:820px}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--sub);margin:0 0 6px}
.toc{border:1px solid var(--line);background:#fff;padding:16px 20px;margin:18px 0 26px}
.toc b{display:block;margin-bottom:6px}
.toc ol{margin:0;padding-left:1.4em}
.toc li{margin-bottom:4px}
.art h2{font-size:22px;margin:34px 0 12px;padding-top:6px;border-top:2px solid var(--ink)}
.art h3{font-size:18px;margin:20px 0 10px}
.in-cta{border:2px solid var(--ink);background:#fff;padding:18px 20px;margin:20px 0}
.in-cta p{margin:0 0 10px;font-weight:700}
.in-cta .btn{width:100%;max-width:520px}
.who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px}
.who .card p{margin:0;font-size:14px}
.who .card b{display:block;margin-bottom:6px}
@media (max-width:760px){.who{grid-template-columns:1fr}}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cols3 .col-card .img{height:120px}
@media (max-width:760px){.cols3{grid-template-columns:1fr}}
/* 次にすること（番号つきの縦の列） */
ol.steps{list-style:none;padding:0;margin:0;counter-reset:st;display:grid;gap:12px}
ol.steps li{counter-increment:st;border:1px solid var(--line);background:#fff;padding:16px 18px 16px 64px;position:relative}
ol.steps li:before{content:counter(st);position:absolute;left:18px;top:14px;width:32px;height:32px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
ol.steps h3{font-size:17px;margin:0 0 6px}
ol.steps p{margin:0}
ol.steps .step-time{display:block;font-size:13px;color:var(--sub);margin-top:6px}
/* 区ページのページ内ナビの位置 */
.pnav b{white-space:nowrap}
/* KWの表 */
table.kw{background:#fff;font-size:14px}
table.kw thead th{font-weight:700;white-space:nowrap}
table.kw td.n{text-align:right;white-space:nowrap}
@media (max-width:760px){table.kw{font-size:13px}}
.scroll-x{overflow-x:auto}
.cform .form-note{font-size:13px;color:var(--sub);margin:-4px 0 14px}
.cform .btn.big{width:100%;max-width:560px}
table caption.tbl-src{caption-side:bottom;text-align:left;font-size:13px;color:var(--sub);padding-top:6px}

/* ===== 2026-11-05 日本語の改行の基本セット（~/matsushita-cockpit/apollo-ops/ops/tools/linebreak/base.css をそのまま貼った） ===== */
/* 日本語の改行の基本セット（松下 2026-10-20「変な改行見にくい。全クライアント同様に」）
   ワイヤー・LP・ページの CSS の最後に貼る。文字は変えない。手順と注意は ~/.claude/skills/jp-linebreak/SKILL.md */

/* 1. 見出し・リード・ボタン・FV は文節で折り返す（「構図／の検討」のように助詞の前で折れない）。行頭の句読点・小さい仮名は全部で禁止 */
body{word-break:auto-phrase;line-break:strict}
/* 1-2. 本文の段落（p・dd・blockquote）は行の端まで詰めて組む（2026-10-28 松下「3行以上の本文は行の端まで詰めて。助詞が行頭に来るのは許す」）。
        リスト・表は短い項目が多いので文節折り返しのまま。長い文が並ぶリスト・表（リスク・経歴など）は ul / table に class="fill" を付けて詰める。
        見出し・リード・キャッチ・FV・ボタン・CTA の中は 1 の文節折り返しのまま。2行で終わる短い段落は class="phrase" で文節折り返しに戻す */
:where(p,dd,blockquote,.fill li,.fill td,li.fill,td.fill){word-break:normal}
:where(.lead,.catch,.btn,.ttl,.phrase,[class*="lead"],[class*="catch"],[class*="fv"],[class*="cta"],[class*="btn"]) :where(p,dd,li,td),
:where(p,dd,li,td):where(.phrase,[class*="lead"],[class*="catch"],[class*="ttl"]){word-break:inherit}
/* 2. 本文は最後の行が短くなりすぎないように、見出し・リード・ボタンは行の長さをそろえる */
p,li,td,th,dd,dt,label,blockquote,figcaption,small{text-wrap:pretty}
h1,h2,h3,h4,.lead,.catch,.btn,.ttl{text-wrap:balance}
/* 3. 割れてはいけない語・数字と単位は <span class="nb">…</span> で包む（例: 5〜7営業日・（税抜）です・40%を） */
.nb{white-space:nowrap}
.nb > a{white-space:normal}
/* 4. 本文中のリンクは1つの塊にする（「料金・納期の／ページ」と2行にまたがって割れるため）。直後の助詞は .nb で一緒に包む */
:where(p,li,td,th,dd,blockquote) a:not(.btn):not(.link){display:inline-block}
/* 5. スマホでは、文の入った表を1行ずつの箱にする（3列の表はセルが1行7文字ほどになり、語が細切れになる）。
      <table class="tbl-card"> にし、2列目以降のセルに data-label="見出し" を付ける。値だけの料金表は表のまま */
@media (max-width:760px){
table.tbl-card,table.tbl-card tbody,table.tbl-card tr,table.tbl-card th,table.tbl-card td{display:block;width:auto}
table.tbl-card thead{display:none}
table.tbl-card tr{border:1px solid #d9dce1;background:#fff;margin:0 0 10px}
table.tbl-card th,table.tbl-card td{border:0;padding:8px 14px}
table.tbl-card tr > :first-child{background:#f3f4f6;font-weight:700;padding:10px 14px}
table.tbl-card [data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:#6b7280;margin-bottom:2px}
table.tbl-card tr > :last-child{padding-bottom:12px}
}
/* 6. PC の表の左列（行の見出し）は「分譲マンションの／販売」のように2文字だけ落ちないよう、12文字分の最低幅 */
@media (min-width:761px){tbody th[scope=row]{min-width:12em}}

/* 基本セットのあとに足したもの: KWの表は区名の列を狭く */
@media (min-width:761px){table.kw tbody th[scope=row]{min-width:0}}
/* 改行の手直し（2026-11-05）: 部品の中の短い文は文節で折る・表の行見出しは行の長さをそろえる */
.faq-list p,ol.steps p,ol.flow3 p,.card p,.quiz-step .hint,.office p,.who p,.txt-ph,.status dd,.about p{word-break:auto-phrase}
table.roles th,table.info th,.about table th,table.cmp tbody th{text-wrap:balance}
table.kw tbody th{white-space:nowrap}
@media (max-width:380px){.cta-center h2{letter-spacing:-.02em}}
@media (max-width:760px){.about table th{width:9em}table.roles th{width:9.5em}}
@media (max-width:760px){table.tbl-card tr > th:first-child{margin-bottom:6px;width:auto}}
.crumb span[aria-current]{display:inline-block}
ul.chk.mt{margin-top:20px}
@media (max-width:760px){.cform .choices{display:grid;grid-template-columns:1fr}}
.quiz + .btn-note{margin:14px 0 0}
/* 相談の帯の中の一番大きいボタンは中央に（2026-11-05 PDF で左寄りを確認して直した） */
.cta-band .btnrow{justify-content:center}
.cta-band .btnrow.one .btn.big{width:100%;max-width:560px;min-width:0}