:root{
  --navy:#1B3A5C; --navy-d:#12283F; --navy-l:#417095;
  --gold:#8B6720; --gold-l:#D9A441;
  --ink:#22262B; --gray:#6B7280; --line:#E3E7EB;
  --soft:#F5F7F9; --acc:#0F7B6C; --acc-bg:#EAF6F3;
  --warn:#B3522A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Sans JP",sans-serif;color:var(--ink);line-height:1.9;background:#fff;font-size:16px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
a{color:var(--navy)}
img{max-width:100%}


header.site{border-bottom:1px solid var(--line);background:#fff}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;min-height:70px;flex-wrap:wrap;gap:10px}
.logo{font-weight:700;color:var(--navy);font-size:17px;line-height:1.3;text-decoration:none}
.logo small{display:block;font-size:11.5px;color:var(--gray);letter-spacing:.1em;font-weight:400}
nav.g{display:flex;gap:16px;font-size:13px;flex-wrap:wrap;align-items:center}
nav.g a{color:var(--ink);text-decoration:none;white-space:nowrap}
nav.g a.on{color:var(--navy);font-weight:700}
nav.g a.cta{background:var(--gold);color:#fff;padding:8px 15px;border-radius:4px;font-weight:700}

.bc{font-size:12px;color:var(--gray);padding:14px 0}
.bc a{color:var(--gray)}

/* ヒーロー */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-d) 100%);color:#fff;padding:66px 0 58px}
.hero .eng{font-size:11.5px;letter-spacing:.24em;color:#9FBBD6;font-weight:500}
.hero h1{font-size:clamp(27px,4.2vw,41px);font-weight:900;margin:12px 0 18px;line-height:1.5}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero .kicker em{font-style:normal;color:var(--gold-l)}
em{font-style:normal}
.hero p{font-size:16px;color:#D6E2EE;max-width:44em}
.hero .kicker{margin-top:20px;padding:17px 22px;background:rgba(255,255,255,.09);border-left:4px solid var(--gold);font-size:15.5px;color:#fff;font-weight:700;line-height:1.85;border-radius:0 6px 6px 0}
.stats{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap}
.stat{border-left:2px solid var(--gold);padding-left:13px}
.stat b{display:block;font-size:25px;font-weight:900;line-height:1.2}
.stat span{font-size:11.5px;color:#9FBBD6}

.btn{display:inline-block;margin-top:22px;background:var(--gold);color:#fff!important;text-decoration:none;font-weight:700;padding:14px 30px;border-radius:4px;font-size:15px}
.btn:hover{filter:brightness(1.08)}
.btn.navy{background:var(--navy)}
.btn.acc{background:var(--acc)}
.btn.sm{padding:10px 18px;font-size:13.5px;margin-top:12px}

section{padding:62px 0}
section.soft{background:var(--soft)}
.eng-label{font-size:11px;letter-spacing:.24em;color:var(--gold);font-weight:700}
h2{font-size:clamp(23px,3vw,30px);font-weight:900;color:var(--navy);margin:10px 0 22px;line-height:1.5}
h2 em{font-style:normal;color:var(--gold)}
h3{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:10px}
p.lead{max-width:47em;color:#3F4650}
.note{font-size:13px;color:var(--gray);margin-top:10px}

/* ドア */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.doors .full{grid-column:1/-1}
.door{display:block;background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);
  padding:24px 26px;text-decoration:none;color:var(--ink);border-radius:0 0 8px 8px;transition:.15s}
.door:hover{box-shadow:0 10px 26px rgba(27,58,92,.12);transform:translateY(-2px)}
.door .q{font-size:13px;color:var(--gold);font-weight:700}
.door h3{margin:6px 0 8px}
.door p{font-size:14px;color:#4A5058}
.door .fee{margin-top:11px;font-size:13px;font-weight:700;color:var(--navy)}
.door .fee .free{color:var(--acc)}
.door .go{margin-top:9px;font-size:13px;font-weight:700;color:var(--gold)}
.door.entry{border-top-color:var(--gold);background:#FFFCF5}
.door.prep{border-top-color:var(--gray);background:#FAFBFC}

/* 表 */
table{width:100%;border-collapse:collapse;background:#fff;margin-top:16px;font-size:15px}
th,td{border:1px solid var(--line);padding:13px 15px;text-align:left;vertical-align:top}
th{background:var(--navy);color:#fff;font-weight:700}
td.n{font-weight:700;white-space:nowrap;color:var(--navy)}
td.free{color:var(--acc);font-weight:700;white-space:nowrap}
td.grp{background:var(--soft);font-weight:700;color:var(--navy)}
table.mini th,table.mini td{padding:9px 11px;font-size:13.5px}

/* カード */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);padding:22px;border-radius:8px}
.card h3{font-size:17px}
.card p{font-size:14px;color:#4A5058}
.card .ic,.gi .ic{color:var(--gold);margin-bottom:10px}
.card .ic svg{width:30px;height:30px;display:block}
.gi .ic{display:flex;justify-content:center}
.gi .ic svg{width:34px;height:34px}

.svc{background:#fff;border:1px solid var(--line);padding:24px 26px;margin-bottom:13px;border-radius:8px}
.svc .no{font-size:11px;letter-spacing:.18em;color:var(--gold);font-weight:700}
.svc ul{margin:11px 0 0 19px;font-size:14.5px;color:#3F4650}
.svc ul li{margin-bottom:5px}
.svc.hi{border:2px solid var(--gold);background:#FFFCF5}

ul.pain{list-style:none;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
ul.pain li{background:#fff;border:1px solid var(--line);padding:13px 16px;font-size:14.5px;border-radius:6px}
ul.pain li::before{content:"✓";color:var(--gold);font-weight:900;margin-right:8px}

.callout{background:var(--acc-bg);border-left:4px solid var(--acc);padding:18px 22px;border-radius:0 8px 8px 0;margin-top:18px}
.callout.gold{background:#FFF9EC;border-left-color:var(--gold)}
.callout b{color:var(--acc)}
.callout.gold b{color:var(--gold)}

.cta{background:var(--navy);color:#fff;text-align:center;padding:56px 24px}
.cta h2{color:#fff}
.cta p{color:#C9D8E6}
.tel{font-size:22px;font-weight:900;margin-top:16px}
.tel small{display:block;font-size:12px;font-weight:400;color:#9FBBD6}

footer.site{background:var(--navy-d);color:#9FBBD6;padding:42px 0 28px;font-size:13px}
footer.site a{color:#fff;text-decoration:none}
.footer-company a{color:inherit}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:22px}
.fgrid h4{font-size:12px;letter-spacing:.14em;color:#7FA0BC;margin-bottom:9px}
.fgrid li{list-style:none;margin-bottom:6px}
.cr{border-top:1px solid rgba(255,255,255,.14);padding-top:15px;text-align:center;font-size:12px}

/* ══ 図解: 分岐マインドマップ ══ */
.mind{background:#fff;border:1px solid var(--line);border-radius:10px;padding:30px 26px;margin-top:18px}
.mind-row{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.mind-entry{flex:0 0 190px;background:#FFFCF5;border:2px solid var(--gold);border-radius:10px;padding:18px 16px;text-align:center}
.mind-entry .t{font-weight:900;color:var(--navy);font-size:16px}
.mind-entry .s{font-size:11.5px;color:var(--gray);margin-top:4px;line-height:1.6}
.mind-entry .p{font-size:12.5px;font-weight:700;color:var(--gold);margin-top:8px}
.mind-arrow{flex:0 0 auto;color:var(--gold);font-size:20px;font-weight:900}
.mind-branches{flex:1;display:grid;gap:9px}
.mind-b{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:6px;padding:11px 15px}
.mind-b .bt{font-weight:700;color:var(--navy);font-size:14.5px;flex:0 0 145px}
.mind-b .bd{font-size:12.5px;color:#55606B;flex:1}
.mind-b .bf{font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap}
.mind-b .bf.free{color:var(--acc)}
.mind-b.free{border-left-color:var(--acc)}
.mind-skip{margin-top:16px;text-align:center;font-size:13px;color:#4B5563;background:var(--acc-bg);border:1px dashed var(--acc);border-radius:20px;padding:9px 18px;display:inline-block}

/* ══ 図解: 資産運用マインドマップ ══ */
.assetmap{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px 24px;margin-top:18px}
.am-head{text-align:center;margin-bottom:20px}
.am-head .core{display:inline-block;background:var(--navy);color:#fff;font-weight:900;font-size:16px;padding:12px 30px;border-radius:30px}
.am-head .sub{font-size:12.5px;color:var(--gray);margin-top:8px}
.am-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.am-col{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.am-col .h{padding:11px 14px;font-weight:700;font-size:14px;color:#fff;text-align:center}
.am-col.tax .h{background:var(--acc)}
.am-col.tokutei .h{background:var(--navy-l)}
.am-col.hoken .h{background:var(--gold)}
.am-col .b{padding:14px}
.am-item{border-bottom:1px dashed var(--line);padding:9px 0}
.am-item:last-child{border:0}
.am-item .n{font-weight:700;font-size:14px;color:var(--navy)}
.am-item .d{font-size:12px;color:#6B7280;line-height:1.65}
.am-note{margin-top:16px;font-size:12.5px;color:#55606B;background:var(--soft);border-radius:6px;padding:12px 16px}

/* ══ 相続: 4つの分け方 ══ */
.divide{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.dv{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.dv .h{background:var(--navy);color:#fff;text-align:center;padding:10px;font-weight:700;font-size:15px}
.dv.ng .h{background:var(--warn)}
.dv .b{padding:16px 15px}
.dv .b p{font-size:13px;color:#4A5058;line-height:1.75}
.dv .tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;margin-bottom:7px}
.dv .tag.ok{background:var(--acc-bg);color:var(--acc)}
.dv .tag.cau{background:#FDF2EC;color:var(--warn)}

/* ══ CF資料サンプル ══ */
.cfdoc{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 12px 30px rgba(27,58,92,.10);margin-top:18px}
.cfdoc-head{background:linear-gradient(120deg,var(--navy),var(--navy-d));color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.cfdoc-head .eng{font-size:9.5px;letter-spacing:.24em;color:#9FBBD6}
.cfdoc-head h3{color:#fff;font-size:20px;margin:3px 0 0}
.cfdoc-head .sample{background:var(--gold);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px}
.cfdoc-body{padding:20px 24px 24px}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.chips span{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12px;color:#4A5058}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:20px}
.kpi{border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:6px;padding:12px 13px}
.kpi.g{border-top-color:var(--acc)} .kpi.o{border-top-color:var(--warn)} .kpi.y{border-top-color:var(--gold)}
.kpi small{display:block;font-size:10.5px;color:var(--gray);line-height:1.5}
.kpi b{font-size:20px;font-weight:900;color:var(--navy)}
.kpi b em{font-style:normal;font-size:12px;font-weight:700}
.kpi.g b{color:var(--acc)} .kpi.o b{color:var(--warn)} .kpi.y b{color:var(--gold)}
.chartbox{border:1px solid var(--line);border-radius:8px;padding:15px 17px 11px;background:#FCFDFE}
.chartbox h4{font-size:12.5px;color:var(--gray);font-weight:700;text-align:center;margin-bottom:11px}
.area{display:flex;align-items:flex-end;gap:2px;height:120px;border-bottom:1.5px solid var(--line);border-left:1.5px solid var(--line);padding-left:2px}
.area i{flex:1;background:linear-gradient(180deg,var(--navy-l),var(--navy));border-radius:1px 1px 0 0;display:block;position:relative}
.area i.dip{background:linear-gradient(180deg,#E0A860,var(--warn))}
.area i.peak::after{content:"退職金";position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--gold);white-space:nowrap;font-weight:700}
.area i.zero::after{content:"▼ 底";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--warn);white-space:nowrap;font-weight:700}
.axis2{display:flex;justify-content:space-between;font-size:10px;color:var(--gray);margin-top:5px}
.finding{background:#F0F5FA;border-left:4px solid var(--navy);padding:15px 19px;border-radius:0 6px 6px 0;margin-top:18px;font-size:14px;line-height:1.85}
.finding b{color:var(--warn)}
.pages{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.pages span{font-size:11.5px;border:1px solid var(--line);border-radius:5px;padding:6px 10px;background:#fff;color:#4A5058}
.pages span b{color:var(--navy)}

/* ══ 資料プレゼント ══ */
.gift{background:linear-gradient(135deg,#FFFCF5,#FDF6E8);border:2px solid var(--gold);border-radius:12px;padding:28px 28px 24px;margin-top:18px}
.gift .lbl{display:inline-block;background:var(--gold);color:#fff;font-size:11.5px;font-weight:700;padding:4px 14px;border-radius:20px;letter-spacing:.06em}
.gift h3{font-size:22px;margin:12px 0 6px}
.gift .sub{font-size:14.5px;color:#5A5443}
.gift-items{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.gi{background:#fff;border:1px solid #E8DCC0;border-radius:8px;padding:18px 16px;text-align:center}

.gi .t{font-weight:700;color:var(--navy);font-size:15px;line-height:1.5}
.gi .p{font-size:11.5px;color:var(--gold);font-weight:700;margin-top:4px}
.gi .d{font-size:12px;color:#6B7280;margin-top:7px;line-height:1.7;text-align:left}

/* ══ 保険: 保障の種類バー ══ */
.covbars{margin-top:18px}
.cov{display:flex;align-items:center;gap:0;margin-bottom:9px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.cov .k{flex:0 0 150px;padding:12px 14px;font-weight:700;font-size:14px;color:#fff;text-align:center}
.cov .v{flex:1;padding:12px 16px;font-size:13.5px;background:#fff;color:#4A5058}
.cov.c1 .k{background:#7A4FB0} .cov.c2 .k{background:var(--gold)}
.cov.c3 .k{background:var(--navy-l)} .cov.c4 .k{background:var(--navy)}
.cov.c5 .k{background:#5B6470}

/* 保険: 社会保障との関係 */
.layers{margin-top:18px}
.layer{display:flex;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:10px}
.layer .a{flex:0 0 34%;background:var(--acc-bg);padding:16px 18px}
.layer .b{flex:0 0 33%;background:#FFF9EC;padding:16px 18px;border-left:1px solid var(--line)}
.layer .c{flex:1;background:#F0F5FA;padding:16px 18px;border-left:1px solid var(--line)}
.layer .ttl{font-weight:700;font-size:13.5px;margin-bottom:5px}
.layer .a .ttl{color:var(--acc)} .layer .b .ttl{color:var(--gold)} .layer .c .ttl{color:var(--navy)}
.layer p{font-size:12.5px;color:#55606B;line-height:1.7}

@media(max-width:900px){
  nav.g{display:none}
  .doors,.cards,.cards.c2,.cards.c4,ul.pain,.fgrid,.am-cols,.divide,.gift-items,.kpis{grid-template-columns:1fr}
  .mind-row{flex-direction:column}
  .mind-entry{flex:auto;width:100%}
  .mind-arrow{transform:rotate(90deg)}
  .mind-b{flex-wrap:wrap}
  .mind-b .bt{flex:auto}
  .cov{flex-direction:column;align-items:stretch}
  .cov .k{flex:auto}
  .layer{flex-direction:column}
  .layer .a,.layer .b,.layer .c{flex:auto;border-left:0;border-top:1px solid var(--line)}
  .kpis{grid-template-columns:1fr 1fr}
}

/* ══ レスポンシブ改善 ══ */
/* PC専用の改行：スマホでは無効化 */
@media(max-width:640px){ br.pc{display:none} }

/* 表の横スクロール（スマホで崩れない） */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px}
.tw table{margin-top:0;min-width:520px}
.tw::-webkit-scrollbar{height:6px}
.tw::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* ══ スマホの表：横スクロールを撤廃する（v53） ══
   ・.tw.kv（2列の項目/内容テーブル） → min-width を解除して素直に折り返す
   ・.tw.stack / .compare.stack（3列以上の比較テーブル） → 1行=1カードに縦積みし、
     各セルの data-l（列見出し）をラベルとして表示する
   ・クラス無しの .tw は従来どおり横スクロール（loan-koujyo等のJS生成の数値表を守る）
   PC（641px以上）の見た目は一切変更しない */
@media(max-width:640px){
  .tw.kv{overflow-x:visible}
  .tw.kv table{min-width:0!important;width:100%}
  .stack{overflow-x:visible}
  th,td{padding:11px 12px}
  table.mini th,table.mini td{padding:9px 10px}

  .stack table{min-width:0!important;width:100%;border-collapse:separate;border-spacing:0;background:transparent;border:0}
  .stack tr:first-child{display:none}
  .stack tr{display:block;background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:12px;overflow:hidden}
  .stack td,.stack th{display:block;border:0;border-bottom:1px solid var(--line);padding:10px 13px;font-size:13.5px;text-align:left;vertical-align:baseline}
  .stack tr>*:first-child{background:var(--navy);color:#fff;font-weight:700;font-size:13.5px}
  /* 1列目がそれ単体では意味が伝わらない表は data-h で列見出しを補う（PCでは非表示） */
  .stack tr>*:first-child[data-h]::before{content:attr(data-h) "：";font-weight:400;opacity:.75;margin-right:2px}
  .stack tr>*:first-child small{color:rgba(255,255,255,.78)!important}
  /* ★!important必須(2026-07-16): 本文側の <small style="color:#6B7280"> 等の
     インライン指定がこの規則に勝ってしまい、紺カードの上にグレー文字(比2.4)が
     残っていた。v53のカード化以降スマホでほぼ読めない状態だった。 */
  .stack tr>*:first-child [style*="color"]{color:rgba(255,255,255,.78)!important}
  .stack tr>*:last-child{border-bottom:0}
  .stack td[data-l]{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-align:right}
  .stack td[data-l]::before{content:attr(data-l);font-weight:700;color:var(--navy);text-align:left;
    flex:0 0 46%;font-size:11.5px;line-height:1.55;letter-spacing:0}
  .stack td small{display:block;text-align:left;font-size:11.5px;line-height:1.6;margin-top:3px}
  .stack td[data-l] small{text-align:right}
  .stack .mk{font-size:15px}
  .stack td.n{white-space:normal}
}

/* モバイルメニュー */
.mnav{display:none}
.mtoggle{display:none}
@media(max-width:900px){
  .mtoggle{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);
    border-radius:5px;padding:9px 13px;font-family:inherit;font-size:13px;font-weight:700;
    color:var(--navy);cursor:pointer}
  .mtoggle svg{width:16px;height:16px}
  #mchk:checked ~ .mnav{display:block}
  .mnav{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);padding:10px 24px 18px;z-index:60;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .mnav a{display:block;padding:13px 4px;border-bottom:1px solid var(--line);text-decoration:none;
    color:var(--ink);font-size:15px;font-weight:500}
  .mnav a.cta{background:var(--gold);color:#fff;text-align:center;border:0;border-radius:5px;
    margin-top:14px;font-weight:700}
  header.site{position:relative}
  header.site .wrap{min-height:62px}
  .logo{font-size:15px}
}

/* タブレット（900〜1100px） */
@media(max-width:1100px) and (min-width:901px){
  nav.g{gap:12px;font-size:12px}
  nav.g a.cta{padding:7px 12px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.c4{grid-template-columns:repeat(2,1fr)}
  .divide{grid-template-columns:repeat(2,1fr)}
  .am-cols{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* スマホ細部 */
@media(max-width:640px){
  body{font-size:15px}
  .wrap{padding:0 18px}
  section{padding:46px 0}
  .hero{padding:46px 0 42px}
  h2{margin-bottom:18px}
  .area{height:100px;gap:1px}
  .area i.peak::after,.area i.zero::after{font-size:8px}
  .btn{width:100%;text-align:center;padding:15px 20px}
  .btn.sm{width:auto}
  .cfdoc-body,.cfdoc-head{padding-left:18px;padding-right:18px}
  .gift{padding:22px 20px 20px}
  .mind{padding:22px 18px}
  .form-wrap{padding:24px 20px}
  .radios label{flex-wrap:wrap}
  .radios .fee{margin-left:0;margin-top:4px;width:100%}
  .tel{font-size:19px}
  .kpi b{font-size:18px}
}


/* ══ 日本語の改行品質 ══ */
/* 禁則処理を厳格に＋孤立行（最終行に1〜2文字）を防ぐ */
h1,h2,h3,h4,p,li,td,th,.kicker,.finding,.callout,.gi .d,.mind-b .bd,
.door p,.card p,.svc p,.am-item .d,.dv .b p,.layer p,.cov .v,.note,.hint{
  line-break:strict;
  text-wrap:pretty;
  /* 文節の途中で折らない。折り返し位置はHTML側の<wbr>（BudouXで機械挿入）だけに限定する。
     ★word-break:auto-phrase から変更(2026-07-16): auto-phraseはChromium系のみで、
     iOS Safari/Firefox(=約30%)が非対応のため熟語が割れていた（例「数字」→「数/字」）。
     keep-all + <wbr> は全ブラウザで同一の結果になる。 */
  word-break:keep-all;
  /* 安全弁: wbrが無い長い連続文字（JS生成テキスト等）がはみ出すのを防ぐ */
  overflow-wrap:anywhere;
}
/* 英数字の混在で不自然に切れるのを防ぐ */
.tel,.kpi b,td.n,td.free,.mind-b .bf{overflow-wrap:normal}
/* 数値・英字のみのセルはkeep-all不要（折り返し自体が起きない） */
.tel,.kpi b,td.n,td.free,.eng-label{word-break:normal}


/* ══ 最終調整：可読性・タップ領域 ══ */
/* 極小フォントの底上げ（11px未満をなくす） */
.eng-label,.cfdoc-head .eng,.hero .eng,.stat span{font-size:11px}
.axis2,.area i.peak::after,.area i.zero::after{font-size:11px}
.chartbox h4{font-size:12.5px}
.kpi small{font-size:11px}
.gi .p{font-size:12px}
.card .ic svg{width:30px;height:30px}

/* タップ領域の確保（WCAG 2.5.8）※文中のインラインリンクは適用除外 */
@media(max-width:900px){
  .fgrid li a{display:inline-block;padding:9px 0;min-height:38px;line-height:1.4}
  .bc a{display:inline-block;padding:8px 0;min-height:34px}
  .mnav a{min-height:46px;display:flex;align-items:center}
  .door,.col{min-height:44px}
  .radios label{min-height:52px}
  .consent label{min-height:44px;align-items:center}
  .submit{min-height:54px}
  .mtoggle{min-height:44px}
  nav.g a.cta{min-height:44px;display:flex;align-items:center;justify-content:center}
}


@media(max-width:900px){
  .logo{display:flex;flex-direction:column;justify-content:center;min-height:44px}
}
.radios input[type=radio],.consent input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;accent-color:var(--gold);cursor:pointer}
.radios label,.consent label{cursor:pointer}

/* ═══ v49追補: 欠損していた基本スタイル(フォーム/法務/toushi図解) ═══ */
/* --- 予約フォーム --- */
.form-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px 36px;max-width:860px;margin:0 auto}
.fg{margin-bottom:26px}
.fg>label{display:block;font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:10px}
.req,.opt{display:inline-block;font-size:10.5px;font-weight:700;border-radius:3px;padding:2px 7px;margin-left:8px;vertical-align:2px;letter-spacing:.04em}
.req{background:#B3373C;color:#fff}
.opt{background:var(--soft);color:var(--gray);border:1px solid var(--line)}
.radios{display:flex;flex-direction:column;gap:10px}
.radios label{display:flex;align-items:flex-start;gap:12px;border:1.5px solid var(--line);border-radius:8px;padding:13px 16px;background:#fff;transition:border-color .15s}
.radios label:hover{border-color:var(--navy-l)}
.radios label>span:first-of-type{flex:1;display:block}
.radios .m{display:block;font-weight:700;font-size:14.5px;color:var(--ink)}
.radios .s{display:block;font-size:12px;color:var(--gray);margin-top:3px;line-height:1.7}
.radios .fee{margin-left:auto;font-weight:700;font-size:14px;color:var(--navy);white-space:nowrap;align-self:center}
.radios .fee.free{color:var(--acc)}
.fg input[type=text],.fg input[type=email],.fg input[type=tel],.fg select,.fg textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff;box-sizing:border-box}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--navy-l)}
.fg textarea{min-height:120px;resize:vertical}
.consent{margin:26px 0 18px}
.consent label{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.8}
.submit{display:block;width:100%;background:var(--navy);color:#fff;border:none;border-radius:8px;padding:16px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.submit:hover{background:var(--navy-d)}
@media(max-width:640px){.form-wrap{padding:24px 18px}.radios .fee{margin-left:32px}}
/* --- 法務ページ(プラポリ/特商法) --- */
.legal{background:#fff;border:1px solid var(--line);border-radius:12px;padding:36px 40px;max-width:860px;margin:0 auto;font-size:14.5px;line-height:2;color:var(--ink)}
.legal h3{font-size:16px;color:var(--navy);margin:28px 0 10px;padding-left:12px;border-left:4px solid var(--gold)}
.legal ul{padding-left:22px;margin:8px 0}
.legal li{margin:4px 0}
.legal p{margin:8px 0}
.legal-t{width:100%;border-collapse:collapse;font-size:14px}
.legal-t th,.legal-t td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.9}
.legal-t th{background:var(--soft);color:var(--navy);white-space:nowrap;width:28%}
@media(max-width:640px){.legal{padding:24px 18px}.legal-t th{white-space:normal;width:32%}}
/* --- toushi 収支フロー図 --- */
.flowbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;margin-top:24px}
.fl{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.fl .b{flex:1;min-width:130px;border-radius:10px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.fl .b .t{font-weight:700;font-size:14.5px}
.fl .b .v{font-size:11.5px;margin-top:5px;opacity:.85}
.fl .in{background:var(--acc-bg);color:var(--acc);border:1.5px solid var(--acc)}
.fl .out{background:var(--soft);color:var(--gray);border:1.5px solid var(--line)}
.fl .res{background:var(--navy);color:#fff;border:1.5px solid var(--navy)}
.fl .op{display:flex;align-items:center;font-size:22px;font-weight:700;color:var(--gray);flex:0 0 auto}
.flnote{margin-top:18px;background:var(--soft);border-radius:8px;padding:16px 18px;font-size:13px;line-height:2;color:var(--ink)}
@media(max-width:640px){.fl{flex-direction:column}.fl .op{justify-content:center}}
/* --- toushi 比較表 --- */
.compare{overflow-x:auto;margin-top:20px;-webkit-overflow-scrolling:touch}
.compare table{width:100%;min-width:640px;border-collapse:collapse;background:#fff;font-size:13.5px}
.compare th,.compare td{border:1px solid var(--line);padding:11px 12px;text-align:center;line-height:1.6}
.compare th{background:var(--navy);color:#fff;font-size:13px}
.compare td:first-child{background:var(--soft);font-weight:700;color:var(--navy);white-space:nowrap}
.compare small{color:var(--gray);font-size:11px}
.mk{display:inline-block;font-weight:700;font-size:15px}
.mk.g{color:var(--acc)}
.mk.y{color:var(--gold)}
.mk.r{color:#B3373C}
/* --- toushi 論点カード --- */
.warns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.warn{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:20px 22px}
.warn h3{font-size:15.5px;color:var(--navy);margin-bottom:10px}
.warn p{font-size:13px;line-height:1.9;color:var(--ink)}
@media(max-width:820px){.warns{grid-template-columns:1fr}}
/* v49追補2: モバイルで.mind-b説明文の縦落ち防止(説明を2行目へ回す) */
@media(max-width:640px){
  .mind-b .bd{flex:1 1 100%;order:3;margin-top:2px}
  .mind-b .bt{flex:1 1 auto}
}

/* v49追補3: 改行の視覚最適化(対応ブラウザのみ) */
li,td,.s{text-wrap:pretty}
p,.lead,.sub,.door p,.card p,.svc p,.am-item .d,.dv .b p,.layer p,.gi .d,.mind-b .bd,.kicker,.finding{text-wrap:balance}
h1,h2,h3,h4{text-wrap:balance}

/* v49追補4: フォーム注記ボックス */
.hint-box{background:var(--soft);border-left:3px solid var(--gold);border-radius:8px;padding:14px 18px;margin-top:14px;font-size:13px;line-height:1.9;color:#3F4650}
.hint-box p{margin:0 0 8px}
.hint-box p:last-child{margin-bottom:0}

/* ══ スマホのタイポグラフィ最適化（2026-07-16 v56） ══════════════════
   方針: 見出しが390px幅に対して大きすぎ、行間も広く、1画面の情報量が乏しかった。
         見出しを縮めて行間を締め、本文は15px前後を維持（本文を14px未満にすると可読性が落ちる）。
         逆に11.5px未満の極小文字は底上げする（メモ■8の「11px未満をなくす」ルール）。
   ★PC(641px以上)は一切変更しない。 */
@media(max-width:640px){
  /* 見出し: 大きすぎたものを縮める＋行間を締める */
  .hero h1{font-size:23px;line-height:1.45}
  h2{font-size:19.5px;line-height:1.5}
  h3{font-size:17px;line-height:1.6}
  /* 本文: サイズは維持〜微減、行間1.9→1.8で1画面の情報量を増やす */
  p,li,.lead,.hint,.finding{line-height:1.8}
  p{font-size:15px}
  li{font-size:14px}
  .lead{font-size:14.5px}
  .hero .kicker{font-size:14.5px;line-height:1.75}
  .hero p{font-size:15px}
  /* 表: 行間を締める */
  td,th{font-size:13px;line-height:1.7}
  .note{font-size:12.5px;line-height:1.8}
  /* 極小文字の底上げ（下限11.5px） */
  .eng-label{font-size:11.5px}
  small{font-size:11.5px}
  /* ★インラインstyleのfont-size(144箇所)はCSSより優先されるため、
     同じ比率で縮めるには!importantで個別に上書きするしかない。
     12px以下は可読性の下限なので据え置く。 */
  [style*="font-size:19px"]{font-size:17px!important}
  [style*="font-size:18px"]{font-size:16.5px!important}
  [style*="font-size:15.5px"]{font-size:14.5px!important}
  [style*="font-size:15px"]{font-size:14.5px!important}
  [style*="font-size:14.5px"]{font-size:13.8px!important}
  [style*="font-size:13.5px"]{font-size:13px!important}
  [style*="font-size:12px"]{font-size:11.5px!important}
  [style*="font-size:11px"]{font-size:11.5px!important}
}

/* ══ v57 スマホの情報設計を修正（2026-07-16） ══════════════════════
   ユーザー指摘「式や○×の位置が統一されていない、流れが分かりにくい」への対応。
   実測で判明した2つの構造的欠陥を直す。★PC(641px以上)は一切変更しない。 */
@media(max-width:640px){

  /* ── ① stack表: 値と○×△の位置が揃わない ───────────────
     原因: .stack td[data-l] が flex+space-between で、::before(列名)・値・<small>(補足)が
           それぞれ独立したflexアイテムになっていた。アイテム数が行ごとに違う(2〜4個)ため
           space-betweenの配分が変わり、値の位置が行ごとにズレる。
           実測: / で9種類、/souzoku で11種類、/toushi で18種類のX座標にバラついていた。
           記号(.mk)を持つ比較表では、説明の無い行だけ記号が右端(328px)へ飛んでいた。
     対策: gridで列を固定する。★.compare.stack だけでなく .stack 全体に適用する
           （料金表・ケーススタディ表・税率表など9表86行が同じ構造）。 */

  /* 値のみ（数値・テキスト）の行: 「列名 | 値」の2列固定 */
  .stack td[data-l]{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:baseline;
    justify-items:end;
    gap:2px 10px;
    text-align:right;
    padding:10px 13px;
  }
  .stack td[data-l]::before{
    content:attr(data-l);
    justify-self:start;
    font-size:11.5px;
    line-height:1.5;
    color:var(--navy);
    font-weight:700;
    text-align:left;
  }
  /* 補足(small)は値の下＝2列目に回り、右揃えで値と縦のラインが揃う */
  .stack td[data-l] br{display:none}
  .stack td[data-l] small{
    grid-column:2;
    text-align:right;
    margin-top:2px;
    font-size:11.5px;
    line-height:1.5;
  }

  /* ○×△を持つ比較表: 「列名 | 記号 | 説明」の3列固定 */
  .compare.stack td[data-l]{
    grid-template-columns:7.2em 2.6em 1fr;
    align-items:center;
    justify-items:stretch;
    gap:4px 8px;
    text-align:left;
    padding:9px 13px;
  }
  .compare.stack td[data-l] .mk{
    justify-self:center;       /* ★記号は常に同じ列の中央。説明が無い行でも動かない */
    font-size:17px;
    line-height:1;
  }
  .compare.stack td[data-l] small{
    grid-column:3;             /* 3列目に固定 */
    justify-self:end;
    text-align:right;
    margin-top:0;
    color:#55606B;
  }

  /* ── ② 収支フロー図: 縦に間延びして流れが読めない ───────
     原因: 箱が各89px・演算子が42pxで、4段の式に482pxを消費していた(画面の6割)。
           演算子(− =)は22pxのグレーで、箱に埋もれて「流れ」に見えない。
     対策: 箱を圧縮し、演算子を丸バッジにして流れの節目を明示する。 */
  .flowbox{padding:18px 14px}
  .fl{gap:0}
  .fl .b{
    padding:11px 12px;
    min-height:0;
    border-radius:8px;
    display:flex;
    flex-direction:row;        /* ★横並びにして高さを半減 */
    align-items:baseline;
    justify-content:center;
    flex-wrap:wrap;
    gap:2px 8px;
    text-align:center;
  }
  .fl .b .t{font-size:14px;line-height:1.4}
  .fl .b .v{font-size:11.5px;margin-top:0;line-height:1.4}
  /* 演算子: 小さな丸バッジにして、箱と箱の“つなぎ目”に見せる */
  .fl .op{
    justify-content:center;
    font-size:0;               /* 元の文字は消す */
    height:26px;
    position:relative;
  }
  .fl .op::before{
    content:attr(data-op);
    display:flex;align-items:center;justify-content:center;
    width:24px;height:24px;
    border-radius:50%;
    background:#fff;
    border:1.5px solid var(--line);
    color:var(--navy);
    font-size:14px;font-weight:900;line-height:1;
  }
  /* 最後の「＝」だけは結果への合流なので強調 */
  .fl .op.eq::before{background:var(--navy);border-color:var(--navy);color:#fff}
  .flnote{padding:14px 15px;font-size:12.5px;line-height:1.9;margin-top:14px}
}

/* ══ v58 スマホの折りたたみ（2026-07-16） ═══════════════════════
   ユーザー指摘「やはり長くて視認性が悪い／ケーススタディはスマホでは別リンクのように」。
   実測: toushi は390px幅で全高21,532px＝25.5画面。POINT Ⅴ(4,103px)とPOINT Ⅱ(3,847px)
         だけで9画面を占めていた。
   設計: 「結論は見せ、根拠は畳む」。本文はHTMLに残したまま display:none にするだけなので、
         Googleは従来どおりインデックスする（モバイルファーストでも消えない）。
         ★スマホで本文を“削除”すると検索対象から外れるため、削除ではなく折りたたみで対応する。
   実装: 既存のハンバーガー(#mchk:checked ~ .mnav)と同じチェックボックス方式＝JSなし。
   ★PC(641px以上)はラベルを隠すだけで、中身は常時表示＝表示も構造も一切変わらない。 */
.fold-c{position:absolute;opacity:0;pointer-events:none}
.fold-t{display:none}
@media(max-width:640px){
  .fold-t{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;margin-top:14px;padding:14px 16px;min-height:48px;
    background:#fff;border:1.5px solid var(--navy);border-radius:8px;
    color:var(--navy);font-weight:700;font-size:13.5px;line-height:1.5;
    cursor:pointer;text-align:left;
  }
  .fold-t::after{content:"＋";font-size:15px;font-weight:900;flex:0 0 auto;color:var(--gold)}
  .fold-c:checked ~ .fold-t{border-radius:8px 8px 0 0;margin-bottom:0;background:var(--soft)}
  .fold-c:checked ~ .fold-t::after{content:"−"}
  .fold-t .sub{display:block;font-weight:400;font-size:11.5px;color:var(--gray);margin-top:3px}
  .fold-b{display:none}
  .fold-c:checked ~ .fold-b{
    display:block;
    border:1.5px solid var(--navy);border-top:0;border-radius:0 0 8px 8px;
    padding:4px 13px 14px;
  }
  /* 折りたたみ内は上マージンを詰める（枠内で二重に空かないように） */
  .fold-c:checked ~ .fold-b > *:first-child{margin-top:10px}
  .fold-c:checked ~ .fold-b .tw{margin-top:10px}
  .fold-c:checked ~ .fold-b .kpis{margin-top:10px!important}
  .fold-c:checked ~ .fold-b h3{margin-top:16px}
}

/* ══ v59 iOSの電話番号 自動リンク化への対応（2026-07-16） ═══════════
   ★症状: iPhoneのCTA帯で電話番号とFAX番号が消えていた（ユーザー実機スクショで発覚）。
   ★原因: format-detection メタタグが無いため、iOS Safariが電話番号らしき文字列を
           自動的に <a href="tel:..."> でリンク化する。そこへグローバルの a{color:var(--navy)}
           が当たり、.cta{background:var(--navy)} の上で「紺の背景に紺の文字」＝完全に不可視。
           footer.site だけ無事だったのは footer.site a{color:#fff} があったため。
   ★Chromeは電話番号を自動リンク化しないので、PC検証では絶対に再現しない(auto-phraseと同型)。
   対策: 暗い背景（.cta / .hero）の中のリンクは明示的に明るい色を指定する。
         HTML側で <a href="tel:"> を書いている箇所にも同じ色が当たるので副作用はない。 */
.cta a,.cta .tel a{color:#fff}
.cta .tel small a{color:#9FBBD6}
.hero a{color:var(--gold-l)}
.hero .tel a,.hero .tel small a{color:#fff}
/* 会社概要・特商法など、暗いヒーロー内に住所/電話を置くページ用 */
.hero .legal-t a,.hero p a{color:var(--gold-l)}


/* ══ v63 スマホ視認性の抜本改革（2026-07-16） ═══════════
   方針: PC(641px以上)は一切不変。@media(max-width:640px)のみで
   ①装飾要素の割愛(.eng-label英字ラベル/カードSVGアイコン=display:none。
     HTMLに残るためインデックスへの影響なし)
   ②余白の全面圧縮(section 46→32px ほか)
   ③.m-hide=スマホのみ非表示の汎用クラス(積極削除用・PC不変)
   ④折りたたみ(fold)を全主要ページへ展開(v58方式・toushi以外に17箇所)。 */
@media(max-width:640px){
  .m-hide{display:none!important}
  .eng-label{display:none}
  .hero .eng{display:none}
  .card .ic{display:none}
  .gi .ic{display:none}
  section{padding:32px 0}
  .hero{padding:36px 0 32px}
  .hero h1{margin:10px 0 12px}
  .hero .kicker{margin-top:14px;padding:12px 15px;font-size:14px;line-height:1.75}
  h2{margin:4px 0 14px}
  .cards{gap:10px}
  .card{padding:17px 15px}
  .callout{padding:14px 15px;margin-top:14px}
  .hint-box{padding:12px 14px}
  .gift{padding:20px 16px 16px;margin-top:12px}
  .kpis{gap:8px;margin-bottom:14px}
  .cfdoc-body{padding:14px 18px 16px}
  .assetmap{padding:18px 14px;margin-top:14px}
  .divide{gap:10px;margin-top:14px}
  .covbars{margin-top:14px}
  .cta{padding:38px 20px}
  .stack tr{margin-bottom:9px}
  .note{font-size:12px;line-height:1.7}
  footer.site{padding:28px 0 22px}
}


/* ══ 料金一覧：スマホは1メニュー=1カードで縦積み（v76 全面再設計） ══
   ★旧v65（時間列を非表示にして2列化）が実機で崩れていた原因（2026-07-22 発覚）:
     時間・内容セルは <td data-l="…"> かつ nth-child(2)。
       ・.price-tbl.stack td:nth-child(2){display:none!important}   ← 隠す意図
       ・.price-tbl.stack td[data-l]{display:table-cell!important}  ← 見せる
     が同特異度(0,3,1)+!importantで衝突し、ソース後勝ちで table-cell が採用。
     結果、隠すはずの時間列が復活し、3列の卓上表が390px幅なりに潰れて
     全セルが1文字ずつ縦割れ（「面/談/2/〜/3/回」状態）になっていた。
   ★あわせて設計変更: 時間・内容（面談2〜3回＋書面納品 等）は判断に必要な情報なので
     「隠す」のをやめ、メニュー名の下に補足行として残す。ヘッダ行のみ非表示。
   実装: 各行をカード化。上段＝メニュー名（左）＋料金（右）、下段＝時間・内容。
     衝突を避けるため display は全て block/flex で明示し、grid化ルールを打ち消す。
   ★PC(641px以上)は一切変更しない。 */
@media(max-width:640px){
  .price-tbl.stack table{
    min-width:0!important;width:100%!important;
    border-collapse:collapse!important;background:transparent!important;border:0!important
  }
  /* ヘッダ行は隠す（カード内にラベルを持たせるため） */
  .price-tbl.stack tr:first-child{display:none!important}
  /* 各行＝カード */
  .price-tbl.stack tr{
    display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;
    background:#fff!important;border:1px solid var(--line)!important;border-radius:8px!important;
    padding:13px 15px!important;margin-bottom:10px!important;overflow:visible!important
  }
  .price-tbl.stack td{
    display:block!important;border:0!important;padding:0!important;
    background:transparent!important;color:var(--ink)!important;text-align:left!important;
    white-space:normal!important;grid-template-columns:none!important;font-weight:400!important
  }
  .price-tbl.stack td::before{display:none!important}
  /* 1列目：メニュー名（カード見出し・左） */
  .price-tbl.stack td:first-child{
    flex:1 1 62%!important;order:0!important;
    font-size:15.5px!important;font-weight:700!important;color:var(--navy)!important;line-height:1.5!important
  }
  /* 3列目：料金（右上・大きく） */
  .price-tbl.stack td.n,.price-tbl.stack td.free{
    flex:0 0 auto!important;order:1!important;margin-left:auto!important;
    text-align:right!important;font-size:17px!important;font-weight:700!important;
    white-space:nowrap!important;line-height:1.4!important
  }
  .price-tbl.stack td.n{color:var(--navy)!important}
  .price-tbl.stack td.free{color:var(--acc)!important}
  /* 料金内の補足（2回目以降 等）は金額の下へ小さく右寄せで */
  .price-tbl.stack td.n small{
    display:block!important;font-size:11.5px!important;font-weight:400!important;
    color:var(--gray)!important;white-space:normal!important;margin-top:2px!important;text-align:right!important
  }
  /* 2列目：時間・内容（カード下段・全幅・ラベル付き補足） */
  .price-tbl.stack td:nth-child(2){
    flex:1 1 100%!important;order:2!important;
    margin-top:8px!important;padding-top:8px!important;border-top:1px solid var(--line)!important;
    font-size:12.5px!important;color:var(--gray)!important;line-height:1.7!important
  }
  .price-tbl.stack td:nth-child(2)::before{
    content:"時間・内容："!important;display:inline!important;
    color:var(--gray)!important;font-weight:700!important
  }
}

/* ══ v64 スマホ本文の改行を自然に（2026-07-16） ═══════════
   ユーザー指摘「全体的に改行位置が気になる。視認性最優先で、読みながら違和感のないように」。
   ★原因の分析: v55のkeep-all＋BudouX<wbr>は「熟語の途中で折れない」代わりに、
     390pxの狭い行では文節境界まで折り返しを我慢するため右端に最大数文字分の
     「歯抜けの空き」が生じ、さらにtext-wrap:balance(v49追補3)が行長を均すよう
     早めに折るため、読みの流れと無関係な位置で改行されていた。
   ★対策: 本文(p/li/td等)はスマホでは日本語標準の折返し(任意の文字間・禁則のみ)に戻す。
     新聞・書籍と同じ組みで、行末が揃い読み流しに違和感が出ない。
     見出し(h1〜h4)・KPI・ラベル類は文字が大きく1〜2行なので、熟語分割の悪目立ちを
     防ぐkeep-all＋<wbr>を維持(「数/字」問題の再発防止)。
     HTML中の<wbr>は標準折返し下では無害(単なる追加候補点)なので除去不要。
   ★PC(641px以上)は不変。 */
@media(max-width:640px){
  p,li,dt,dd,td,th,
  .lead,.note,.hint,.finding,.kicker,.callout,.hint-box,
  .door p,.card p,.svc p,.am-item .d,.dv .b p,.layer p,.cov .v,.gi .d,.gi .t,
  .mind-b .bd,.mind-b .bt,.fold-t,.fold-t .sub,.chips span,.flnote,.warn p{
    word-break:normal;
    overflow-wrap:break-word;
    text-wrap:pretty;
  }
  /* 見出しは維持: keep-all+<wbr>+balance（上の一覧に含めない） */
}

/* ══ v75 スマホ視認性の総点検（2026-07-22） ═══════════════════════
   ユーザー指摘「スマホの視認性が異常に悪い。文字・表が壊れている部分もある。
   文字サイズ・改行位置・表の揃え方・線や色での段落構成を確認して修正」。
   実測で判明した欠陥と対策:
   ① .fold-t が flex のため、題名テキストと .sub が横並びの独立アイテムになり、
      題名が数文字幅に圧縮されて「ケース/スタ/ディ」のように縦割れしていた
      （toushi/toushi-lp/insurance/jutaku/souzoku/asset/index の全fold 31箇所）→ block化。
   ② .stack td[data-l] の grid が「1fr auto」で、値が長い行はラベル列が1文字幅まで
      潰れ「現/金/へ/の/影/響」になっていた → 「auto 1fr」＋ラベルnowrapに変更。
      説明文セルの表は .txtcell でラベル上・本文下の縦組みに。
   ③ 11.5px未満の極小文字（.req/.opt 10.5px 等）の底上げ。
   ④ 表の数値を等幅数字（tabular-nums）で桁揃え。
   ⑤ kv表の項目列が「事前ヒ/アリング/シート」と割れる → 1列目に最低幅。
   ⑥ 段落構成: h2 に金の縦ライン（中央揃えの .cta/.am-head は除外）。
   ★PC(641px以上)は一切変更しない（html の text-size-adjust のみ全幅・表示不変）。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:640px){
  /* ① fold-t: 題名1行＋説明の縦組みに。開閉記号（::after）は右端固定 */
  .fold-t{display:block;position:relative;padding:13px 42px 13px 16px;font-size:15px;line-height:1.55}
  .fold-t::after{position:absolute;right:15px;top:50%;transform:translateY(-50%)}
  .fold-t .sub{font-size:12.5px;line-height:1.7;margin-top:4px}
  /* ② stack表: ラベル列の潰れ防止 */
  .stack td[data-l]{grid-template-columns:auto 1fr}
  .stack td[data-l]::before{white-space:nowrap;font-size:12px}
  .stack td small{font-size:12px}
  .stack tr>*:first-child{word-break:normal;overflow-wrap:break-word}
  /* ②b 説明文セルの表（.txtcell）: ラベルの下に本文を左揃えで */
  .stack.txtcell td[data-l]{display:block;text-align:left}
  .stack.txtcell td[data-l]::before{display:block;white-space:normal;margin-bottom:3px}
  .stack.txtcell td[data-l] small{display:block;text-align:left;margin-top:4px}
  /* ③ 極小文字の底上げ（11.5px未満をなくす） */
  .req,.opt{font-size:12px}
  .eng-label,.cfdoc-head .eng,.hero .eng,.stat span,.svc .no,.dv .tag,.cfdoc-head .sample,.axis2{font-size:11.5px}
  .compare small{font-size:11.5px}
  /* ④ 数値の桁揃え */
  table,.kpi b,.kpi small{font-variant-numeric:tabular-nums}
  /* ⑤ kv表: 項目列（1列目）の最低幅＋文節単位の折返し（「事前ヒ/アリング」防止） */
  .tw.kv th:first-child,.tw.kv td:first-child{min-width:8.2em;word-break:keep-all;overflow-wrap:break-word}
  /* ⑤c 見出し・ラベル: overflow-wrap:anywhere と text-wrap:balance の組み合わせが
     「金利タイ/プ」「諸費用350/万」のような任意位置の分断を生んでいた → break-wordに
     （はみ出す場合のみの緊急折返しに限定。<wbr>の文節折返しは維持） */
  h1,h2,h3,h4,.kicker,.finding,.callout,.gi .d,.cov .v,.note,.hint{overflow-wrap:break-word}
  /* ⑤b KPIカードのラベル・注記: keep-allの緊急折返し（「350/万」）をやめ標準折返しに */
  .kpi small,.kpi span,.gi .p{word-break:normal;overflow-wrap:break-word;text-wrap:pretty;font-size:12px}
  /* ⑥ 段落構成: 章見出しに金の縦ライン */
  h2{padding-left:12px;border-left:4px solid var(--gold-l)}
  .cta h2,.am-head h2{padding-left:0;border-left:0}
  /* ⑦ ボタン・選択肢の孤立改行（末尾1文字のぶら下がり）防止 */
  .radios .m,.btn{text-wrap:balance}
  /* ⑧ asset「3つの箱」の帯: 題名とサブの密着解消 */
  .am-col .h span{display:block;margin-top:3px;font-size:12px!important}
}


/* ══════════════════════════════════════════════════════════════════════
   v88 モーションレイヤー（2026-07-28）  ※このブロックは style.css 末尾への追記のみ。
   既存の宣言・HTMLマークアップ・文言・href は1文字も変更していない。

   次にここを触る人へ（メモ §2-6）
   ① すべて html.js 配下＝JS無効なら v87 の見た目がそのまま残る。
      初期非表示は静的セレクタで宣言する（JSで属性を後付けすると初回ペイントでちらつく）。
   ② 動かすのは transform ではなく translate / scale。
      .door:hover{transform:translateY(-2px)} と合成されるので衝突しない。
      ★ここを transform で書き直すとカードのホバーが死ぬ。
   ③ リビール対象を増やしたら、最下部の print と prefers-reduced-motion の
      打ち消しリストにも必ず足すこと（透明のまま固定＝事故）。
   ④ 段差は必ずクラス（.mo-d1〜5）で与える。JSから style 属性を書かない。
   ══════════════════════════════════════════════════════════════════════ */

/* ── スクロールリビール ────────────────────────────────── */
html.js section>.wrap>.eng-label,
html.js section>.wrap>h2,
html.js section>.wrap>.lead,
html.js .cards>.card,
html.js .doors>.door,
html.js .gift-items>.gi,
html.js .mind-branches>.mind-b,
html.js .tw,
html.js .callout{
  opacity:0;translate:0 18px;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1)}
html.js section>.wrap>.eng-label.mo-in,
html.js section>.wrap>h2.mo-in,
html.js section>.wrap>.lead.mo-in,
html.js .cards>.card.mo-in,
html.js .doors>.door.mo-in,
html.js .gift-items>.gi.mo-in,
html.js .mind-branches>.mind-b.mo-in,
html.js .tw.mo-in,
html.js .callout.mo-in{opacity:1;translate:none}

/* ★折りたたみ（SPアコーディオン）の中は初期非表示にしない。
   SPでは .fold-b が display:none のため IntersectionObserver が発火せず、
   ユーザーが開いたときに中身が透明のまま固定される（＝事故）。 */
html.js .fold-b .cards>.card,
html.js .fold-b .gift-items>.gi,
html.js .fold-b .mind-branches>.mind-b,
html.js .fold-b .tw,
html.js .fold-b .callout{opacity:1!important;translate:none!important;transition:none!important}

/* 段差（グリッド内の2枚目以降） */
html.js .mo-d1{transition-delay:70ms}
html.js .mo-d2{transition-delay:140ms}
html.js .mo-d3{transition-delay:210ms}
html.js .mo-d4{transition-delay:280ms}
html.js .mo-d5{transition-delay:350ms}

/* ── ヒーロー：読み込み直後に段差で立ち上げる ──────────────── */
html.js .hero .wrap>*{
  opacity:0;translate:0 14px;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1)}
html.js.mo-ready .hero .wrap>*{opacity:1;translate:none}
html.js.mo-ready .hero .wrap>*:nth-child(2){transition-delay:.07s}
html.js.mo-ready .hero .wrap>*:nth-child(3){transition-delay:.14s}
html.js.mo-ready .hero .wrap>*:nth-child(4){transition-delay:.21s}
html.js.mo-ready .hero .wrap>*:nth-child(5){transition-delay:.28s}

/* ── ホバー（reveal が translate なので、ホバー側は transform を使う） ── */
.card{transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
.card:hover{transform:translateY(-3px);border-color:#C7D4E2;
  box-shadow:0 12px 28px rgba(27,58,92,.10)}
.gi{transition:transform .25s ease}
.gi:hover{transform:translateY(-3px)}

/* ── 打ち消し（★対象を増やしたら両方に足すこと） ─────────────── */
@media print{
  html.js section>.wrap>.eng-label,
  html.js section>.wrap>h2,
  html.js section>.wrap>.lead,
  html.js .cards>.card,
  html.js .doors>.door,
  html.js .gift-items>.gi,
  html.js .mind-branches>.mind-b,
  html.js .tw,
  html.js .callout,
  html.js .hero .wrap>*{opacity:1!important;translate:none!important;transition:none!important}
}
@media (prefers-reduced-motion:reduce){
  html.js section>.wrap>.eng-label,
  html.js section>.wrap>h2,
  html.js section>.wrap>.lead,
  html.js .cards>.card,
  html.js .doors>.door,
  html.js .gift-items>.gi,
  html.js .mind-branches>.mind-b,
  html.js .tw,
  html.js .callout,
  html.js .hero .wrap>*{opacity:1!important;translate:none!important;transition:none!important}
  .card,.gi{transition:none!important}
  .card:hover,.gi:hover{transform:none!important}
}


/* ══ v96 スマホのフッターを横並びに（2026-07-29） ═══════════════════
   スマホで「ご相談メニュー」「サイト情報」が1行1件で縦に伸び、フッターだけで
   画面数枚分あった。<ul> を折り返す横並びにして高さを詰める。
   ★PC（901px以上）は一切変更しない。タップ領域 min-height:38px は維持。 */
@media(max-width:900px){
  .fgrid{gap:20px}
  .fgrid ul{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
  .fgrid li{margin-bottom:0}
  .fgrid li a{padding:8px 0;min-height:38px;display:inline-flex;align-items:center;line-height:1.4}
}