/* ==========================================================================
不動産買取LP（/lp/kawaguchi-fudosan-kaitori/）専用のスタイル
2026-10-04 から、このURLの中身は3案目（明るい地のFV・物件の種類の4択）。
3案目の差分CSSは末尾に統合してある。旧1本目と2案目はローカル専用の見本
（/lp/kawaguchi-fudosan-kaitori-1/・-2/）として残し、このファイルを土台に
lp-kawaguchi-fudosan-kaitori-1.css・-2.css を重ねて表示している。本番へは送らない
（inc/lp.php の ICHIROKU_LP_LOCAL_ONLY）。**見本だけが使うルールをここに足さないこと。**
土台に置くのは、本番の1本目が使う部品だけにする。
このファイルはLPだけが読む。サイト共通のCSS（tokens/base/layout/top/archive/page、
合計で約195KB）はLPでは一切読み込まない。広告の着地点なので表示速度を優先する。
除外の判定は functions.php の ichiroku_assets() にある（URLの形で判定）。
デザイン方針はB案（王道のLP）。2026-09-18 に島根さんが3案から選定。
配色は「紺 × 朱」。2026-09-19 に4案をコントラスト比で比較して決めた。
紺で信頼をつくり、朱のボタンを唯一の目立つ要素にする組み立て。
朱（#d6501c）は既存サイトのトークン #ca4917 に寄せてある。
白文字 × ボタン 4.18（大きな文字の基準3.0以上）
白文字 × 濃色部 15.54
ボタン × 背景 3.72（3.0を下回るとボタンが背景に溶ける）
ボタン × マーカー黄 3.21（近すぎると押す場所が一意に決まらない）
色はすべて :root の配色ブロックに出してある。配色を変えるならそこだけ差し替える。
別案の生成元は issues/3/prototype/_b-template.html と _palettes.json。
配色・字面はサイト本体と意図的に変えている。コーポレートサイトの延長ではなく
広告の受け皿として作るため、tokens.css の変数には依存させていない。
========================================================================== */
:root{
/* ===== 配色 ここだけ差し替えれば全体が変わる ===== */
--base:#0a2540;
--base-d:#061a2e;
--base-l:#1b4570;
--base-rgb:10,37,64;
--cta:#d6501c;
--cta-top:#ee6534;
--cta-d:#a93a10;
--cta-rgb:214,80,28;
--mark:#ffe14d;
--mark-rgb:255,225,77;
--ink:#1a1a1a;
--sub:#5a6b7a;
--line:#dfe6ec;
--soft:#f2f7fb;
--tint:#fdf2ee;
--tint2:#fff7f4;
--field:#fbfdff;
--bar-cost:#7f93a5;
--bar-profit:#c8d4de;
--red:#e03131; --red-rgb:224,49,49;
--gr:#0f9d58;
--sans:"Noto Sans JP",system-ui,sans-serif; --gut:16px; --max:1060px;
}
@media(min-width:768px){:root{--gut:32px}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.75;font-size:15px;overflow-x:hidden}
@media(min-width:768px){body{font-size:16px}}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:52px}
@media(min-width:768px){.sec{padding-block:84px}}
.soft{background:var(--soft)}
.navy{background:var(--base);color:#fff}
/*
* SP/PCだけの改行。テンプレートに
が5箇所あるのに定義が無く、
* PCでも改行されていた。
*/
@media(min-width:768px){.sp{display:none}}
.pc{display:none}
@media(min-width:768px){.pc{display:inline}}
/*
* 1文字だけ次の行に落ちるのを防ぐ（「断られ／た」「中間マ／ージン」など）。
* auto-phrase は文節で折り返す（Chrome 119+。html の lang="ja" が前提）。
* 長い本文に掛けると右端ががたつくので、短い見出し・ラベル・中央揃えの注記だけにする。
* pretty は最終行が1語だけになるのを避ける。非対応のブラウザでは今までどおり折り返すだけ。
* Safari（auto-phrase 非対応）では、iPhone で残る1文字の行を .nw で包んで止めている。
*/
body{text-wrap:pretty}
h1,h2,h4,summary,.ttl p,.tile,.okbox>b,.dg__seg,.dg__nm,.cmp th,.cmp td,
.dg__pt,.honest>b,.work__t,.fv__area,.fv__cau,.works-note,.cmp-note,.flow-note,.fnote,.honest__lead,.honest__why dd,.mid__lead,.mid__sub{word-break:auto-phrase}
/*
* Safari 26 の pretty は段落全体で行の長さをならすため、短いラベルを1〜2文字幅に崩す
* （タイルが「傷み／が激／しい」「相／続／し…」になる。iOS 26.5 で確認）。
* ラベルは
と auto-phrase で折り返しを決めてあるので、pretty を外す。
*/
.tile,.pick__btn,.dg__seg,.cmp th,.cmp td{text-wrap:wrap}
/* headings */
.ttl{text-align:center;margin-bottom:34px}
.ttl .en{font-size:11px;letter-spacing:.2em;color:var(--cta);font-weight:700;display:block;margin-bottom:8px}
.ttl h2{font-size:23px;font-weight:900;line-height:1.5;letter-spacing:.01em}
@media(min-width:768px){.ttl h2{font-size:34px}}
.ttl h2 .mk{background:linear-gradient(transparent 62%,var(--mark) 62%);padding:0 2px}
.ttl h2 .or{color:var(--cta)}
.navy .ttl h2{color:#fff}
.ttl p{color:var(--sub);font-size:14px;margin-top:12px;line-height:1.85}
.navy .ttl p{color:rgba(255,255,255,.75)}
@media(min-width:768px){.ttl p{font-size:15.5px}}
/* buttons */
.cta{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
background:linear-gradient(180deg,var(--cta-top),var(--cta));color:#fff;text-decoration:none;
border-radius:100px;padding:17px 30px;font-weight:900;font-size:17px;line-height:1.35;
box-shadow:0 6px 0 var(--cta-d),0 10px 22px rgba(var(--cta-rgb),.34);transition:.15s;width:100%;max-width:400px}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 var(--cta-d)}
.cta small{font-size:11.5px;font-weight:400;opacity:.95;margin-top:3px}
@media(min-width:768px){.cta{font-size:20px;padding:20px 40px}}
.tel{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;
background:#fff;border:2px solid var(--base);border-radius:14px;padding:12px 24px;width:100%;max-width:400px}
.tel .lb{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--sub)}
.tel .no{font-size:29px;font-weight:900;letter-spacing:.02em;line-height:1.2;color:var(--base)}
.tel .hr{font-size:11px;color:var(--sub);font-weight:400}
/*
* FV の部品。地・h1・サブコピー（.fv / .fv__in / .fv h1 / .fv__sub）は旧1本目だけが使うので
* lp-kawaguchi-fudosan-kaitori-1.css に移した（2026-10-04）。ここに残すのは2案目・1本目（3案目由来）も使う部品。
*/
.fv__badges{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:6px;margin-bottom:20px}
@media(min-width:768px){.fv__badges{display:flex;flex-wrap:wrap}}
.fv__badges span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
border-radius:100px;font-size:11px;padding:5px 13px;font-weight:700;backdrop-filter:blur(4px)}
@media(min-width:768px){.fv__badges span{font-size:12.5px;padding:6px 16px}}
.fv__ctawrap{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:11px}
@media(min-width:768px){.fv__ctawrap{flex-direction:row;justify-content:center;align-items:stretch}
.fv__ctawrap .cta,.fv__ctawrap .tel{width:auto;max-width:none}}
.fv__lic{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
display:grid;gap:7px;font-size:11px;color:rgba(255,255,255,.82);line-height:1.55}
@media(min-width:768px){.fv__lic{grid-template-columns:repeat(3,1fr);font-size:12px;gap:16px}}
.fv__lic b{display:block;color:var(--mark);font-weight:700}
.fv__area,.fv__cau{margin-top:14px;font-size:12px;color:rgba(255,255,255,.72)}
/* h1の断定に対する注記。エリア表記と同じ字面で、続けて読める位置に置く */
.fv__cau{margin-top:6px}
/* 物件タイル */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:6px}
@media(min-width:768px){.tiles{grid-template-columns:repeat(5,1fr);gap:12px}}
.tile{background:#fff;border:2px solid var(--base);border-radius:11px;padding:16px 8px;text-align:center;
font-size:12.5px;font-weight:700;line-height:1.5;display:flex;align-items:center;justify-content:center;min-height:74px}
@media(min-width:768px){.tile{font-size:13.5px;min-height:90px}}
.okbox{margin-top:22px;background:var(--base);color:#fff;border-radius:14px;padding:22px 20px;text-align:center}
.okbox>b{font-size:17px;font-weight:900;display:block;margin-bottom:7px;color:var(--mark)}
.okbox p{font-size:13.5px;color:rgba(255,255,255,.88);line-height:1.8}
/* 理由・図 */
.dg{background:#fff;border-radius:16px;padding:22px 16px;box-shadow:0 3px 20px rgba(var(--base-rgb),.09)}
@media(min-width:768px){.dg{padding:38px 40px}}
.dg__row{margin-bottom:26px}
.dg__row:last-of-type{margin-bottom:0}
.dg__nm{font-size:14px;font-weight:900;margin-bottom:9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dg__nm em{font-style:normal;font-size:11px;font-weight:400;color:var(--sub)}
.dg__nm .tag{background:var(--sub);color:#fff;font-size:10.5px;padding:3px 9px;border-radius:4px}
.dg__nm .tag.us{background:var(--cta)}
.dg__bar{display:flex;min-height:54px;border-radius:7px;overflow:hidden}
@media(min-width:768px){.dg__bar{min-height:64px}}
.dg__seg{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
color:#fff;text-align:center;line-height:1.3;padding:2px}
@media(min-width:768px){.dg__seg{font-size:12.5px}}
/*
* 買取価格は両社とも同じ色。以前は一般的な買取会社だけ紺で、凡例（朱＝買取価格）と食い違い、
* 「どの帯どうしを比べるのか」が色で伝わらなかった。同じ色なら長さの差がそのまま答えになる。
*/
.s1{background:linear-gradient(180deg,var(--cta-top),var(--cta))}
.s2{background:var(--bar-cost)}.s3{background:var(--red)}.s4{background:var(--bar-profit);color:var(--base)!important}
/*
* 「読み切れない分の上乗せ」は帯が細い（12%）。全文が「読み切れない／分の上乗せ」の2行で入るのは
* 幅1024px以上（帯の内側で約100px）なので、それより狭いときは「上乗せ」だけにする（凡例に全文がある）。
* テンプレートではラベル全体を1つの span に包んである。.dg__seg は flex なので、包まないと
* 「読み切れない分の」と「上乗せ」が別々の flex アイテムになって横に並び、PCで崩れていた。
*/
.dg__long{display:none}
@media(min-width:1024px){.dg__long{display:inline}}
.dg__lg{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;color:var(--sub)}
.dg__lg i{width:11px;height:11px;display:inline-block;border-radius:2px;margin-right:5px;vertical-align:-1px}
.dg__pt{margin-top:18px;background:var(--tint);border:2px solid var(--cta);border-radius:12px;padding:16px 18px;
font-size:14.5px;font-weight:700;line-height:1.8}
.dg__pt .mk{background:linear-gradient(transparent 62%,var(--mark) 62%)}
.dg__note{margin-top:14px;font-size:11px;color:var(--sub);line-height:1.7}
.reasons{display:grid;gap:14px;margin-top:30px}
@media(min-width:768px){.reasons{grid-template-columns:repeat(3,1fr);gap:20px}}
.rs{background:#fff;border-radius:14px;padding:24px 20px;box-shadow:0 2px 14px rgba(var(--base-rgb),.08);text-align:center}
.rs__n{width:44px;height:44px;border-radius:50%;background:var(--cta);color:#fff;font-weight:900;
font-size:17px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.rs h4{font-size:16.5px;font-weight:900;line-height:1.55;margin-bottom:10px}
.rs p{font-size:13px;color:var(--sub);line-height:1.85;text-align:left}
/* 比較 */
/*
* SPでは横スクロールさせない。min-width:540px だと375pxでは右が197px隠れ、
* 隠れるのが「壱六の買取」列＝この節の結論そのものだった。
* スクロールできる手がかりも無く、仲介の欠点だけ見て終わる読み方になる。
* 3列とも入る寸法に落として、PCで元の余裕に戻す。
*/
.cmp{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;background:#fff;border-radius:12px;overflow:hidden}
.cmp th,.cmp td{padding:12px 6px;text-align:center;line-height:1.6;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--base);color:#fff;font-weight:900;font-size:12.5px}
.cmp thead th:last-child{background:var(--cta)}
.cmp tbody th{background:var(--soft);text-align:left;font-weight:700;width:27%;font-size:11.5px;padding-left:10px}
.cmp td:last-child{background:var(--tint2);font-weight:700}
@media(min-width:768px){
.cmp table{min-width:540px;font-size:13.5px}
.cmp th,.cmp td{padding:14px 12px;line-height:1.65}
.cmp thead th{font-size:14px}
.cmp tbody th{width:26%;font-size:12.5px;padding-left:12px}
}
.mark{font-size:19px;font-weight:900;display:block}
.m-o{color:var(--gr)}.m-x{color:var(--red)}.m-t{color:#e8a020}
.cmp td small{display:block;font-size:11.5px;font-weight:400;color:var(--sub);margin-top:2px}
.honest{margin-top:22px;background:#fff;border:2px dashed var(--base);border-radius:14px;padding:22px 20px}
.honest>b{font-size:16px;font-weight:900;display:block;margin-bottom:9px;color:var(--base)}
.honest p{font-size:13.5px;color:var(--sub);line-height:1.9}
.honest .mk{background:linear-gradient(transparent 62%,var(--mark) 62%);color:var(--ink);font-weight:700}
/* 買取が安くなる理由（左）と、壱六の答え（右）を対にする。理由だけを目立たせない */
.honest__lead{margin-top:12px;color:var(--ink)!important;font-weight:700}
.honest__why{display:grid;gap:8px;margin:10px 0 12px}
.honest__why>div{display:grid;gap:6px;background:var(--soft);border-radius:10px;padding:12px 14px}
.honest__why dt{font-size:14px;font-weight:900;color:var(--base);line-height:1.6}
.honest__why dd{font-size:13px;color:var(--sub);line-height:1.8;border-left:3px solid var(--cta);padding-left:10px}
.honest__why dd b{color:var(--cta);font-weight:900;margin-right:.2em}
/*
* 答えの結論（「そのぶんを買取価格に回せます」）を、理由の説明より強く読ませる。
* 黄のマーカーはこの箱の「仲介のほうが向いています」が使っているので、壱六の答えは
* 「ただし、壱六は」と左の線と同じ朱の下線にして、どちらの話かを色で分ける。
* 淡い朱の帯も試したが、本文の灰色の中では弱く、ピンクに見えたので線にした。
* inline-block は、入りきらないときに「そのぶん、／買取価格を…」と途中で割らず、ひとまとまりで次の行へ送るため
*/
.honest__why dd strong{display:inline-block;color:var(--ink);font-weight:700;
text-decoration:underline 2px var(--cta);text-underline-offset:.35em}
@media(min-width:768px){
.honest__why>div{grid-template-columns:12em 1fr;align-items:center;gap:16px;padding:12px 18px}
}
/*
* 中間CTA（2案目・3案目で使う。1本目には無い）。ボタンとお電話の組は .fv__ctawrap をそのまま使う。
* 別案どうしで同じ部品を複製しないよう、土台に置いている（.claude/rules/lp.md の5。2026-10-03 に2案目から移した）
*/
.mid{background:var(--tint);border-block:1px solid rgba(var(--cta-rgb),.18)}
.mid__in{padding-block:34px 38px;text-align:center}
.mid__lead{font-size:20px;font-weight:900;color:var(--base);line-height:1.5}
@media(min-width:768px){.mid__lead{font-size:26px}}
.mid__sub{font-size:13.5px;color:var(--sub);margin-top:6px;line-height:1.8}
.mid .fv__ctawrap{margin-top:18px}
/* 実績 */
.works{display:grid;gap:18px}
@media(min-width:768px){.works{grid-template-columns:repeat(3,1fr);gap:24px}}
.work{background:#fff;border-radius:13px;overflow:hidden;box-shadow:0 2px 14px rgba(var(--base-rgb),.09)}
.work img{aspect-ratio:3/2;object-fit:cover;width:100%}
.work__b{padding:16px 17px 19px}
.work__tag{display:inline-block;background:var(--base);color:#fff;font-size:10.5px;font-weight:700;
padding:3px 10px;border-radius:4px;margin-bottom:9px}
.work__t{font-size:15.5px;font-weight:900;line-height:1.55}
.work__m{font-size:12px;color:var(--sub);margin-top:7px;line-height:1.7}
.works-note,.cmp-note{margin-top:20px;font-size:11.5px;color:var(--sub);line-height:1.8;text-align:center}
/*
* 流れ。見出しは4つとも1行にそろえる（「お問い合わせ・簡易査定」がいちばん長く、実測176px）。
* 4列で176pxが入るのは幅960px以上なので、768〜1023pxは2列×2段にしている。
*/
.flow{display:grid;gap:12px}
@media(min-width:768px){.flow{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(min-width:1024px){.flow{grid-template-columns:repeat(4,1fr)}}
.st{background:#fff;border-radius:13px;padding:20px 18px;position:relative;box-shadow:0 2px 12px rgba(var(--base-rgb),.07)}
.st__n{background:var(--base);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.1em;
padding:4px 11px;border-radius:5px;display:inline-block;margin-bottom:11px}
.st__d{position:absolute;top:18px;right:16px;background:var(--mark);color:var(--base);font-size:11.5px;
font-weight:900;padding:4px 10px;border-radius:5px}
.st h4{font-size:16px;font-weight:900;margin-bottom:8px;line-height:1.5}
.st p{font-size:12.5px;color:var(--sub);line-height:1.8}
.flow-note{margin-top:18px;font-size:11.5px;color:var(--sub);line-height:1.8;text-align:center}
/* FAQ */
.faq{max-width:780px;margin-inline:auto}
details{background:#fff;border-radius:11px;margin-bottom:10px;box-shadow:0 1px 8px rgba(var(--base-rgb),.07);overflow:hidden}
summary{cursor:pointer;list-style:none;padding:17px 44px 17px 46px;position:relative;font-size:14.5px;font-weight:700;line-height:1.6}
summary::-webkit-details-marker{display:none}
summary::before{content:"Q";position:absolute;left:17px;top:15px;width:22px;height:22px;background:var(--base);
color:#fff;border-radius:50%;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
summary::after{content:"";position:absolute;right:19px;top:23px;width:9px;height:9px;
border-right:2px solid var(--cta);border-bottom:2px solid var(--cta);transform:rotate(45deg);transition:.25s}
details[open] summary::after{transform:rotate(-135deg)}
.faq__a{padding:0 20px 19px 46px;font-size:13.5px;color:var(--sub);line-height:1.95;position:relative}
.faq__a::before{content:"A";position:absolute;left:17px;top:0;width:22px;height:22px;background:var(--cta);
color:#fff;border-radius:50%;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
/* 会社 */
.co{display:grid;gap:26px}
@media(min-width:900px){.co{grid-template-columns:1fr 1fr;gap:40px}}
.co dl{display:grid;grid-template-columns:minmax(92px,auto) 1fr;font-size:13px;background:#fff;border-radius:12px;overflow:hidden}
.co dt{padding:12px 14px;background:var(--soft);font-weight:700;border-bottom:1px solid var(--line)}
.co dd{padding:12px 14px;border-bottom:1px solid var(--line);line-height:1.7}
.co iframe{width:100%;height:280px;border:0;border-radius:12px}
@media(min-width:900px){.co iframe{height:100%;min-height:340px}}
/* フォーム */
.lp-formbox form{max-width:720px;margin:0 auto;background:#fff;border-radius:16px;padding:24px 18px;
box-shadow:0 8px 34px rgba(var(--base-rgb),.16);display:grid;gap:18px;color:var(--ink)}
@media(min-width:768px){.lp-formbox form{padding:38px 40px;gap:22px}}
/*
* align-content:start が無いと、.two の隣の欄だけに補足（.fh）があるとき、
* 行の高さに合わせて伸びた分がラベルと入力欄の間に配られ、左右で欄がずれる
* （連絡日／時間帯、メール／連絡方法の2行で起きていた）。
*/
.f{display:grid;gap:8px;align-content:start}
.f>label{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.req{background:var(--red);color:#fff;font-size:10px;padding:2px 8px;border-radius:3px;font-weight:700}
.opt{background:var(--line);color:var(--sub);font-size:10px;padding:2px 8px;border-radius:3px;font-weight:700}
.f input[type=text],.f input[type=tel],.f input[type=email],.f input[type=date],.f select,.f textarea{
width:100%;border:2px solid var(--line);border-radius:9px;padding:13px 14px;font-size:16px;
font-family:var(--sans);background:var(--field);line-height:1.6;color:var(--ink)}
.f textarea{height:132px;min-height:110px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--cta);background:#fff}
.f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230a2540' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.two{display:grid;gap:18px}
@media(min-width:680px){.two{grid-template-columns:1fr 1fr}}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.7;background:var(--soft);
border-radius:10px;padding:15px}
.agree input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--cta)}
.agree a{color:var(--base);font-weight:700}
.submit{background:linear-gradient(180deg,var(--cta-top),var(--cta));color:#fff;border:0;border-radius:100px;
padding:20px;font-size:17.5px;font-weight:900;font-family:var(--sans);cursor:pointer;
box-shadow:0 6px 0 var(--cta-d);transition:.15s}
.submit:active{transform:translateY(4px);box-shadow:0 2px 0 var(--cta-d)}
/* 送信中（lp.js が disabled にする）。押し込んだ形のまま薄くして、反応したことを見せる */
.submit:disabled{transform:translateY(4px);box-shadow:0 2px 0 var(--cta-d);opacity:.7;cursor:progress}
.fnote{font-size:11.5px;color:var(--sub);text-align:center;line-height:1.8}
.fnote a{color:var(--base);font-weight:700;white-space:nowrap}
/* 項目ごとの補足。input[type=date]は曜日を除外できないので、定休日はここで伝える */
.fh{display:block;margin-top:6px;font-size:11px;color:var(--sub);line-height:1.7}
/*
* 追従CTA（.sticky）の逃がしは body ではなく .foot に持たせる。
* body に置くと .sticky を持たない完了ページにも72pxが効き、
* 下に何も無い空白へスクロールできてしまっていた。.foot はLPにしか無い。
*/
.foot{background:var(--base-d);color:rgba(255,255,255,.62);padding:30px 0 102px;text-align:center;font-size:11.5px;line-height:2}
@media(min-width:768px){.foot{padding:30px 0}}
/*
* 規約系リンク（プライバシーポリシー・利用規約）。
* LPは共通フッターを出さないので、ここが唯一の導線になる（Google広告のポリシー上も要る）。
* 色を当てないとブラウザ既定の青リンクになり、濃紺の背景に対してコントラスト1.87で
* 事実上読めなくなる。本文より少し明るくして下線を引き、リンクだと分かる程度に留める。
*/
.foot__legal{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px 18px}
.foot__legal a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:.2em}
.foot__legal a:hover{color:#fff}
/* 完了ページ側の同じリンク */
.thx__legal{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;font-size:12px}
.thx__legal a{color:rgba(255,255,255,.62);text-decoration:underline;text-underline-offset:.2em}
.thx__legal a:hover{color:#fff}
/* 追従 */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.98);
box-shadow:0 -3px 16px rgba(var(--base-rgb),.16);padding:8px 10px;display:grid;grid-template-columns:1fr 1.25fr;gap:8px}
@media(min-width:768px){.sticky{display:none}}
.sticky a{text-decoration:none;border-radius:100px;padding:13px 4px;text-align:center;font-weight:900;font-size:14px}
.sticky .t{border:2px solid var(--base);color:var(--base)}
.sticky .f2{background:linear-gradient(180deg,var(--cta-top),var(--cta));color:#fff}
.deskcta{display:none}
@media(min-width:768px){.deskcta{display:flex;position:fixed;right:22px;bottom:22px;z-index:60;flex-direction:column;gap:9px;align-items:flex-end}
.deskcta a{text-decoration:none;border-radius:100px;font-weight:900;padding:15px 26px;font-size:15px;box-shadow:0 5px 20px rgba(var(--base-rgb),.26)}
.deskcta .t{background:#fff;color:var(--base);border:2px solid var(--base)}
.deskcta .f2{background:linear-gradient(180deg,var(--cta-top),var(--cta));color:#fff}}
/*
* FVのボタンかフォームが見えている間は追従CTAを引っ込める（assets/js/lp.js）。
* visibility も落とすのは、見えないボタンにTabで止まらないようにするため。
*/
.sticky,.deskcta{transition:transform .25s,opacity .25s,visibility 0s}
.sticky.is-hidden{transform:translateY(110%);visibility:hidden;transition:transform .25s,visibility 0s .25s}
.deskcta.is-hidden{opacity:0;transform:translateY(12px);visibility:hidden;transition:transform .25s,opacity .25s,visibility 0s .25s}
@media(prefers-reduced-motion:reduce){.sticky,.deskcta,.sticky.is-hidden,.deskcta.is-hidden{transition:none}}
/* ==========================================================================
Contact Form 7 が出すマークアップに合わせる
フォーム本体はCF7で管理している（項目とメール文面をクライアントが直せるように）。
CF7は入力欄を .wpcf7-form-control-wrap で包み、チェックボックスとラジオを
span.wpcf7-list-item > label > (input + span.wpcf7-list-item-label) の形で出す。
その形のままで丸いチップに見えるよう、ここで見た目を作る。
========================================================================== */
.lp-formbox .wpcf7-form-control-wrap{display:block}
.lp-formbox form>p{margin:0}
/* チェックボックス・ラジオを丸いチップに見せる */
.chips .wpcf7-checkbox,.chips .wpcf7-radio{display:flex;flex-wrap:wrap;gap:8px}
.chips .wpcf7-list-item{margin:0}
.chips .wpcf7-list-item label{position:relative;display:block;margin:0;cursor:pointer}
.chips .wpcf7-list-item input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.chips .wpcf7-list-item-label{display:block;background:#fff;border:2px solid var(--line);border-radius:100px;
padding:8px 15px;font-size:13px;font-weight:700;transition:.15s;user-select:none}
.chips .wpcf7-list-item input:checked+.wpcf7-list-item-label{background:var(--cta);border-color:var(--cta);color:#fff}
.chips .wpcf7-list-item input:focus-visible+.wpcf7-list-item-label{outline:2px solid var(--base);outline-offset:2px}
/* 同意欄はチップにせず、ふつうのチェックボックスのまま出す */
.agree{display:block;background:var(--soft);border-radius:10px;padding:15px;font-size:13px;line-height:1.7}
.agree .wpcf7-list-item{margin:0}
.agree .wpcf7-list-item label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:0}
.agree input[type=checkbox]{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--cta)}
.agree a{color:var(--base);font-weight:700}
/* 入力エラーと送信結果 */
.wpcf7-not-valid-tip{color:var(--red);font-size:12px;font-weight:700;margin-top:6px;display:block}
/*
* 直すべき欄そのものを赤くする。
* 文言（.wpcf7-not-valid-tip）だけだと、一覧から飛んだ先や
* スクロールして探しているときに、どれが該当の欄か分からない。
*
* :focus まで指定するのは .f input:focus が --cta（橙）に塗り替えるため。
* エラー中の欄を触ったときに橙になると、直ったように見えてしまう。
*
* .wpcf7-form-control-wrap を挟んでいるのは詳細度のため。上の
* .f input[type=text]（0,2,1）が border ショートハンドで色ごと指定していて、
* .f .wpcf7-not-valid（0,2,0）では負ける。select だけ赤くなって
* テキスト欄が赤くならない、という食い違いが実際に出た。
*/
.f .wpcf7-form-control-wrap .wpcf7-not-valid,
.f .wpcf7-form-control-wrap .wpcf7-not-valid:focus{border-color:var(--red)}
/* チェックボックス群は span.wpcf7-checkbox に付くので、中のチップへ流す */
.chips .wpcf7-not-valid .wpcf7-list-item-label{border-color:var(--red)}
/*
* 同意欄は枠を持っていないので、border を足すと2px ぶん送信ボタンが下にずれる。
* inset の影なら位置が動かない。
*/
.agree:has(.wpcf7-not-valid){box-shadow:inset 0 0 0 2px var(--red)}
/*
* 送信できなかったときの要約（assets/js/lp.js が組み立てる）
*
* 置き場所は送信ボタンの直前。CF7の総括メッセージ（.wpcf7-response-output）は
* ボタンより下・ページ最下部にあり、そこは .sticky が下から約72px被るので、
* このLPでいちばん見えない場所にあたる。押した指のすぐ上に出す。
*
* LP共通のCSSは無く、LPごとに :root を持たせる設計なので、
* 系統の違うLPを作るときはこのブロックをコピーする（同じLPの別案 -b・-2 は
* inc/lp.php がこのファイルを土台に読むので要らない）。スタイルが当たらなくても
* JSが作る一覧は素のリストとして機能する（情報は落ちない）。
*/
.form-err{border:2px solid var(--red);border-radius:10px;background:rgba(var(--red-rgb),.05);padding:14px 16px;
scroll-margin-bottom:88px}
/* 一覧から送信ボタンへ戻れるように、ボタン側にも同じ逃がしを持たせる（lp.js が使う） */
.lp-formbox .wpcf7-submit{scroll-margin-bottom:88px}
@media(min-width:768px){.form-err,.lp-formbox .wpcf7-submit{scroll-margin-bottom:24px}}
.form-err:focus{outline:none}
.form-err__head{font-size:13.5px;font-weight:900;color:var(--red);line-height:1.6}
.form-err__list{list-style:none;display:grid;gap:6px;margin-top:10px}
/* 行はタップ領域を44px以上とる（指で押す前提） */
.form-err__item{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
width:100%;min-height:44px;padding:9px 30px 9px 12px;background:#fff;
border:1px solid rgba(var(--red-rgb),.35);border-radius:8px;
font-family:var(--sans);font-size:13px;text-align:left;color:var(--ink);cursor:pointer}
.form-err__item::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;
border-top:2px solid var(--red);border-right:2px solid var(--red);
transform:translateY(-50%) rotate(45deg)}
.form-err__item:focus-visible{outline:2px solid var(--base);outline-offset:2px}
.form-err__name{font-weight:900;color:var(--base)}
.form-err__msg{font-size:12px;color:var(--sub);line-height:1.6}
.lp-formbox .wpcf7-response-output{border:2px solid var(--cta)!important;border-radius:10px;
padding:14px 16px!important;margin:0!important;font-size:13.5px;font-weight:700;line-height:1.7}
.lp-formbox .wpcf7-form.invalid .wpcf7-response-output,
.lp-formbox .wpcf7-form.failed .wpcf7-response-output,
.lp-formbox .wpcf7-form.spam .wpcf7-response-output{border-color:var(--red)!important;color:var(--red)}
.wpcf7-spinner{display:block;margin:12px auto 0}
/*
* 迷惑メール対策のおとり。人には見せず、読み上げにも出さない。
* 自動投稿はこの欄まで埋めるので、埋まっていたら送信を捨てる（inc/cf7.php）。
* display:none にすると埋めない実装があるため、画面外へ逃がす形にしている。
*/
.hp{position:absolute!important;left:-9999px!important;top:auto!important;
width:1px!important;height:1px!important;overflow:hidden!important}
/* ==========================================================================
完了ページ（/lp/kawaguchi-fudosan-kaitori/thanks/）
========================================================================== */
.thx{min-height:100vh;display:flex;align-items:center;background:linear-gradient(160deg,var(--base),var(--base-l));color:#fff;padding:56px 0}
.thx__in{text-align:center}
.thx__mark{width:62px;height:62px;border-radius:50%;background:var(--cta);margin:0 auto 24px;
display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1}
.thx h1{font-size:23px;font-weight:900;line-height:1.55}
@media(min-width:768px){.thx h1{font-size:32px}}
.thx__lead{margin-top:18px;font-size:14.5px;line-height:1.95;color:rgba(255,255,255,.85)}
@media(min-width:768px){.thx__lead{font-size:16px}}
.thx__next{margin:32px auto 0;max-width:560px;background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:22px 20px;text-align:left}
.thx__next b{display:block;font-size:15px;font-weight:900;color:var(--mark);margin-bottom:12px}
.thx__next li{list-style:none;font-size:13.5px;line-height:1.85;padding-left:22px;position:relative;margin-bottom:8px}
.thx__next li:last-child{margin-bottom:0}
.thx__next li::before{content:"→";position:absolute;left:0;color:var(--cta);font-weight:900}
.thx__tel{margin-top:28px}
.thx__tel a{display:inline-flex;flex-direction:column;text-decoration:none;color:#fff;
border:1px solid rgba(255,255,255,.35);border-radius:14px;padding:13px 30px}
.thx__tel a .no{font-size:26px;font-weight:900;letter-spacing:.02em;line-height:1.3}
.thx__tel a .hr{font-size:11.5px;color:rgba(255,255,255,.65)}
.thx__back{margin-top:28px;font-size:13px}
.thx__back a{color:rgba(255,255,255,.75)}
/* ==========================================================================
ここから下は、2026-10-04 まで lp-kawaguchi-fudosan-kaitori-3.css（3案目の差分）だったもの
3案目がこのLPの本番の中身に選ばれたので、差分CSSを中身を変えずに末尾へ移した。
末尾に置くのは、3案目だったときと同じ読み込み順（土台の後）を保ち、
同じ詳細度のルールどうしの勝ち負けを変えないため。
3案目で新しく作った部品：
FV（明るい地・家の線画・物件の種類の4択）／しなくていいこと（取り消し線）／
こんなご事情でも／知っておきたいこと／フォーム前の3点
色は :root の変数だけを使い、新しい色を足していない。
**FVだけ明るい地にしている。** 旧1本目・2案目は紺の地。h1 の「しなくていい」を力を抜いた
画面で受けるためで、紺は h1 の文字・線画・免許の帯に回して信頼の色として残した。
朱をFVの唯一の塗りにする方針（上の配色ブロック）は変えていない。
中間CTA（.mid）は2案目と共用なので、上の部分にある。
========================================================================== */
/* 1文字だけ次の行に落ちるのを防ぐ（土台と同じ方針。短い見出し・ラベルだけに掛ける） */
.fv3 h1,.fv3__eyebrow,.fv3__sub,.pick__q,.pick__btn,.undo__todo,.undo__ok b,.jijo__q,.know h3,
.know__to,.know-note,.promise b{word-break:auto-phrase}
/*
* カードの本文も文節で折る（「引き取／って」「契／約不適合責任」と語の途中で割れていた）。
* 制度の3枚は3列（900px以上）だと1行が18字ほどしかなく、文節で折ると右端が大きく欠けるので1列のときだけ
*/
.undo__ok span,.jijo__a,.promise li{word-break:auto-phrase}
@media(max-width:899px){.know li>p{word-break:auto-phrase}}
/* 読み上げだけに残す（取り消し線は読み上げでは伝わらないため、「しなくていいこと：」を足している） */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* --------------------------------------------------------------------------
FV
SPは1列で左寄せ。線画は h1 の前の2行の右に浮かせ（float）、ボタンを最初の画面に残す。
PC（960px以上）は左にコピーとボタン、右に線画を大きく置き、判子を出す。
-------------------------------------------------------------------------- */
.fv3{background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);color:var(--ink);overflow:hidden;
border-bottom:1px solid var(--line)}
.fv3__in{position:relative;padding-block:18px 26px}
.fv3__eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--sub);margin-bottom:10px}
/* 左寄せでは土台の2列グリッドだと「秘密厳守」の枠だけ間延びするので、流し込みにする */
.fv3 .fv__badges{display:flex;flex-wrap:wrap;justify-content:start;margin-bottom:14px}
.fv3 .fv__badges span{background:#fff;border-color:rgba(var(--base-rgb),.2);color:var(--base);backdrop-filter:none}
/*
* 線画の高さ（幅×360/440）は、h1 の前の3行（片付け〜／直さ〜／その家、）の高さを超えないこと。
* 超えた分だけ「壱六が買い取ります。」が下へ押され、「その家、」との間が空く
* （上限150pxのときは414〜599pxで9〜20px空いていた）。3行の高さは393px以上で約107px、
* 375pxで約105pxなので、幅の上限を128px（高さ約105px）にしている
*/
.fv3__art{float:right;width:clamp(104px,33vw,128px);margin:0 -6px 0 8px}
.fv3__art svg{display:block;width:100%;height:auto}
.fv3 h1{color:var(--base);font-weight:900;line-height:1.4;letter-spacing:-.005em}
.fv3__pre{display:block;font-size:clamp(18px,5.6vw,22px)}
/* 「壱六が買い取ります。」の10文字を、320pxでも1行に収める（2案目と同じ寸法） */
.fv3__main{display:block;font-size:clamp(26px,8vw,30px);margin-top:4px}
/* 長い行だけは線画の下へ送る。線画の横に入ると「買い取／ります。」と割れる */
.fv3__l2{display:block;clear:both}
.fv3 h1 .mk{background:linear-gradient(transparent 64%,var(--mark) 64%);padding:0 2px}
.fv3__sub{margin-top:12px;font-size:14px;line-height:1.85;color:var(--sub)}
/* 線画。塗りは土台の変数だけ */
.a-halo{fill:var(--tint)}
.a-ground{fill:none;stroke:var(--base);stroke-width:3;stroke-linecap:round}
.a-roof{fill:var(--base);stroke:var(--base);stroke-width:3;stroke-linejoin:round}
.a-tile{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2}
.a-crack{fill:none;stroke:var(--mark);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.a-wall{fill:#fff;stroke:var(--base);stroke-width:3}
.a-stain{fill:var(--line)}
.a-drop{fill:var(--bar-cost)}
.a-win,.a-door{fill:var(--soft);stroke:var(--base);stroke-width:3}
.a-line{fill:none;stroke:var(--base);stroke-width:2}
.a-box rect{fill:var(--tint);stroke:var(--cta-d);stroke-width:2}
.a-box path{fill:none;stroke:var(--cta-d);stroke-width:2}
.a-grass{fill:none;stroke:var(--gr);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* 判子は小さい線画では文字が潰れるので、PCでだけ出す */
.fv3__stamp{display:none}
.fv3__stamp circle{fill:rgba(255,255,255,.92);stroke:var(--cta);stroke-width:3}
.fv3__stamp circle.in{fill:none;stroke-width:1.5}
.fv3__stamp text{fill:var(--cta-d);font-family:var(--sans);font-size:17px;font-weight:900;text-anchor:middle}
/* 物件の種類の4択（FVのボタン） */
.fv3__act{margin-top:16px}
.pick__q{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900;color:var(--base);margin-bottom:9px}
.pick__q span{flex:none;background:var(--base);color:#fff;font-size:11px;padding:3px 9px;border-radius:4px}
.pick{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* ボタンを li の高さいっぱいに伸ばす。伸ばさないと「その他」（2行）だけ背が高くなり、下端がそろわない */
.pick li{display:flex}
.pick__btn{flex:1;position:relative;display:flex;align-items:center;gap:9px;min-height:58px;padding:9px 28px 9px 12px;
border-radius:12px;background:linear-gradient(180deg,var(--cta-top),var(--cta));color:#fff;text-decoration:none;
font-size:16px;font-weight:900;line-height:1.3;box-shadow:0 4px 0 var(--cta-d),0 8px 16px rgba(var(--cta-rgb),.22);
transition:transform .15s,box-shadow .15s}
.pick__btn::after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;
border-top:2.5px solid #fff;border-right:2.5px solid #fff;transform:translateY(-50%) rotate(45deg)}
.pick__btn svg{flex:none;width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pick__btn small{display:block;font-size:11px;font-weight:700;opacity:.92}
.pick__btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cta-d)}
.pick__btn:focus-visible{outline:3px solid var(--base);outline-offset:3px}
@media(hover:hover){.pick__btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--cta-d),0 10px 20px rgba(var(--cta-rgb),.28)}}
@media(prefers-reduced-motion:reduce){.pick__btn{transition:none}}
.pick__note{margin-top:9px;font-size:11.5px;color:var(--sub)}
.fv3 .tel{margin-top:12px}
/* 明るい地に合わせて、土台の白文字を紺と灰に戻す */
.fv3 .fv__area,.fv3 .fv__cau{color:var(--sub)}
.fv3 .fv__lic{clear:both;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);color:var(--sub)}
.fv3 .fv__lic b{color:var(--base)}
@media(min-width:600px){
/* 線画の高さを h1 の前の3行（約133px）以下にする（160px幅で約131px）。高いと「壱六が買い取ります。」の上が空く */
.fv3__art{width:160px;margin-right:0}
.fv3__pre{font-size:26px}
.fv3__main{font-size:40px}
.fv3__sub{font-size:15.5px}
.pick{grid-template-columns:repeat(4,1fr)}
/*
* 4列ではアイコンを上に積む（横並びだと「マンション」が入らない）。
* 上下中央ではなく上から積むのは、「その他」だけ小さな注記の1行が多く、中央寄せだと
* そのアイコンと文字だけ7pxほど上にずれるため。上の余白を、1行のボタンが中央に見える18pxにしている
*/
.pick__btn{flex-direction:column;justify-content:flex-start;text-align:center;gap:6px;min-height:92px;padding:18px 6px 6px}
.pick__btn::after{display:none}
.pick__btn svg{width:30px;height:30px}
.fv3 .tel{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:12px;max-width:none;padding:10px 20px}
.fv3 .tel .no{font-size:24px}
}
/* 768px以上は「壱六が買い取ります。」（40px×10字）の横にも線画が並ぶ幅があるので、下へ送らずに大きく置く */
@media(min-width:768px) and (max-width:959px){
.fv3__art{width:240px}
.fv3__l2{clear:none}
}
@media(min-width:960px){
.fv3__in{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:44px;align-items:start;padding-block:44px 48px}
/*
* 線画はSPでは h1 の横に浮かせるため .fv3__copy の中にある。PCではその箱を外して（contents）
* 線画だけを右の列に置き、左の5行（見出し〜ボタン）の上下中央にそろえる
*/
.fv3__copy{display:contents}
.fv3__copy>*,.fv3__act{grid-column:1}
/* 上の .fv3__copy>* より詳細度を上げておく（同じ詳細度だと記述順で左の列に落ちる） */
.fv3 .fv__lic{grid-column:1/-1;margin-top:34px}
.fv3__eyebrow{font-size:13px}
.fv3__copy>.fv3__art{grid-column:2;grid-row:1/span 5;align-self:center;float:none;width:100%;margin:0}
.fv3__stamp{display:inline}
.fv3__pre{font-size:30px}
.fv3__main{font-size:40px;margin-top:8px}
.fv3__sub{font-size:16px;margin-top:16px}
.fv3__act{margin-top:24px}
}
@media(min-width:1200px){
.fv3__in{grid-template-columns:minmax(0,1fr) 440px}
.fv3__pre{font-size:32px}
.fv3__main{font-size:48px}
}
/* --------------------------------------------------------------------------
しなくていいこと（取り消し線で消す「やらなきゃ」と、壱六の答え）
-------------------------------------------------------------------------- */
.undo{list-style:none;display:grid;gap:10px;max-width:940px;margin-inline:auto}
@media(min-width:768px){.undo{grid-template-columns:repeat(2,1fr);gap:14px}}
.undo li{background:#fff;border:2px solid var(--line);border-radius:14px;padding:15px 16px 16px}
.undo__todo{font-size:13.5px;color:var(--sub);line-height:1.6}
.undo__todo s{text-decoration:line-through 2px var(--cta)}
.undo__ok{margin-top:9px}
.undo__ok b{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:900;color:var(--base);line-height:1.45}
/* 丸の中のチェック。文字ではなく線で描く（フォントによって✓の太さが変わるため） */
.undo__ok b::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;
background:var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.undo__ok span{display:block;margin-top:6px;padding-left:31px;font-size:13px;color:var(--sub);line-height:1.8}
/* --------------------------------------------------------------------------
こんなご事情でも
-------------------------------------------------------------------------- */
.jijo{list-style:none;display:grid;gap:12px;max-width:940px;margin-inline:auto}
@media(min-width:768px){.jijo{grid-template-columns:repeat(2,1fr);gap:16px}}
.jijo li{background:var(--soft);border-radius:14px;padding:18px 18px 20px}
.jijo__q{position:relative;font-size:16px;font-weight:900;color:var(--base);line-height:1.55;padding-left:.85em}
/* 吹き出しの代わりに鉤括弧を置く。お客様の声に見せないよう、人の絵や名前は付けない */
.jijo__q::before{content:"「";position:absolute;left:-.2em;top:0;color:var(--cta)}
.jijo__q::after{content:"」";color:var(--cta)}
.jijo__a{margin-top:10px;padding-left:12px;border-left:3px solid var(--cta);font-size:13.5px;line-height:1.85}
/* --------------------------------------------------------------------------
知っておきたいこと（制度の3枚）
-------------------------------------------------------------------------- */
.know{list-style:none;display:grid;gap:14px}
@media(min-width:900px){.know{grid-template-columns:repeat(3,1fr);gap:18px}}
.know li{display:flex;flex-direction:column;background:#fff;border-radius:14px;padding:20px 18px;
box-shadow:0 2px 14px rgba(var(--base-rgb),.08)}
.know__tag{align-self:flex-start;background:var(--base);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px}
.know h3{margin-top:10px;font-size:17px;font-weight:900;color:var(--base);line-height:1.5}
.know li>p{margin-top:8px;font-size:13px;color:var(--sub);line-height:1.85}
/* 壱六に何ができるか（または、どこに確かめるか）。カードの高さがそろうよう下端に寄せる */
.know li>.know__to{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:13px;font-weight:700;color:var(--ink);line-height:1.75}
.know li>p:not(.know__to){margin-bottom:12px}
.know-note{margin-top:18px;font-size:11.5px;color:var(--sub);line-height:1.8;text-align:center}
/* --------------------------------------------------------------------------
フォーム前の3点
-------------------------------------------------------------------------- */
.promise{list-style:none;max-width:720px;margin:0 auto 18px;display:grid;gap:8px}
@media(min-width:768px){.promise{grid-template-columns:repeat(3,1fr)}}
.promise li{position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;
padding:11px 14px 12px 44px;font-size:12px;color:rgba(255,255,255,.78);line-height:1.6}
.promise li::before{content:"";position:absolute;left:14px;top:14px;width:20px;height:20px;border-radius:50%;
background:var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.promise b{display:block;font-size:14px;font-weight:900;color:#fff;margin-bottom:1px}
/* 日付と金額を途中で割らない（「3,000／万円」「2027年／3月31日」と割れていた） */
.nw{white-space:nowrap}