/* =====================================================================
   コベドー塾 共通CSS（全ページ共通）
   原則このファイルは変更しない。ページ固有のスタイルは assets/css/page-<名前>.css に。
   構成：①色トークン（ライト／ダーク） ②土台・書体 ③板書アニメ ④ヘッダー ⑤ボタン
         ⑥方眼・黒板 ⑦区画と見出し ⑧ピクト・コマ ⑨詳しく見る ⑩共通部品（流れ・特長・プラン・ステップ・Q&A・表・注記）
         ⑪ページ見出し・パンくず ⑫最後の申込 ⑬フッター ⑭追従ボタン ⑮画面幅
   ===================================================================== */

/* ---------- ①色（設計メモ §2） ---------- */
:root{
  --paper:#FAFCFE;      /* 紙 */
  --paper-2:#EEF3F7;    /* 紙の濃いところ */
  --grid:#D9E5EE;       /* 方眼の線・罫線 */
  --ink:#1E2B36;        /* 墨 */
  --ink-2:#45535F;      /* 補足の文字 */
  --ai:#165E83;         /* 藍 */
  --ai-deep:#0F4765;    /* 藍の濃い色（押下・hover） */
  --shiraai:#E3F0F7;    /* 白藍（うすい面） */
  --on-ai:#FFFFFF;      /* 藍の上の文字 */
  --board:#123E58;      /* 藍の黒板 */
  --board-line:rgba(255,255,255,.09); /* 黒板の方眼 */
  --band:#0B2A3C;       /* 濃い帯・黒い見出し帯 */
  --chalk:#FFFFFF;      /* チョーク */
  --yellow:#FFD23F;     /* 強調の黄（黒板上の強調・申込ボタン） */
  --yellow-deep:#F2BE00;
  --on-yellow:#1E2B36;
  --pen:#C73E36;        /* 赤ペン（紙の上の添削） */
  --pen-board:#FF5A47;  /* 黒板の上の赤ペン（朱寄り） */
  --note-bg:#FFF6DA;    /* 仮の印・お知らせ */
  --note-ink:#5A4300;
  --final:#165E83;      /* 最後の申込欄の背景（ダークでは濃い藍にして白文字を読めるように） */
  --box:#FFFFFF;        /* 白い箱（コマ・カード・表）の背景。ダークでは紙の濃い色 */
  --on-ai-sub:#FFD23F;  /* 藍の帯の上の小見出し（ダークでは藍が明るくなるので濃い色に） */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1A22;--paper-2:#16242E;--grid:#24384A;--ink:#E8EFF4;--ink-2:#B3C2CE;
    --ai:#6FB3DA;--ai-deep:#8FC6E6;--shiraai:#17303F;--on-ai:#0A1720;
    --board:#0B2A3C;--band:#061B28;--pen:#F0867D;--pen-board:#FF7A68;--note-bg:#3A2F10;--note-ink:#F3E2A8;--final:#0F4765;--box:#16242E;--on-ai-sub:#061B28;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1A22;--paper-2:#16242E;--grid:#24384A;--ink:#E8EFF4;--ink-2:#B3C2CE;
  --ai:#6FB3DA;--ai-deep:#8FC6E6;--shiraai:#17303F;--on-ai:#0A1720;
  --board:#0B2A3C;--band:#061B28;--pen:#F0867D;--pen-board:#FF7A68;--note-bg:#3A2F10;--note-ink:#F3E2A8;--final:#0F4765;--box:#16242E;--on-ai-sub:#061B28;
}

/* ---------- ②土台・書体 ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important} /* hidden 属性は必ず非表示（site-config.js で現す要素も、JSが動かない間は隠れたまま） */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"BIZ UDPGothic","BIZ UDGothic","Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  font-size:17px;line-height:1.8;letter-spacing:.03em;overflow-wrap:anywhere;
  padding-bottom:100px; /* 右下の追従ボタンのぶん */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ai);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ai-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
p,ul,ol,dl,table{margin:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
section[id]{scroll-margin-top:12px}
h1,h2,h3{
  font-family:"Klee One","UD Digi Kyokasho NK-R","Klee","Hiragino Sans",serif;
  font-weight:600;margin:0;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;letter-spacing:.01em;
}
.klee{font-family:"Klee One","UD Digi Kyokasho NK-R","Klee","Hiragino Sans",serif;font-weight:600}
.gothic{font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;font-weight:900}
.nowrap{white-space:nowrap}
.kari{display:inline-block;font-size:14px;background:var(--note-bg);color:var(--note-ink);border-radius:4px;padding:0 8px;margin-left:8px;vertical-align:4px;font-weight:700;font-family:"BIZ UDPGothic",sans-serif}

/* ---------- ③板書アニメ（JSが動いたときだけ。初期状態は全部見えている） ----------
   .write … 文字を1字ずつ左から「書く」見出し。JSが文字を span.ch に分け、画面に入ったら .on を付ける
   .draw .stroke … 赤ペン・チョークの線（SVG）。文字を書き終えてから描く */
.board-ready .write:not(.on) .ch{clip-path:inset(-.2em 100% -.25em -.1em)}
.write.on .ch{clip-path:inset(-.2em -.1em -.25em -.1em);transition:clip-path .16s linear}
.draw .stroke{fill:none;stroke:var(--pen);stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: reduce){.board-ready .write:not(.on) .ch{clip-path:none}}
@media print{.ch{clip-path:none !important}.draw .stroke{stroke-dashoffset:0 !important;stroke-dasharray:none !important}}

/* ---------- ④ヘッダー（右上に目立つボタン2つ＋メニュー） ---------- */
.site-head{background:var(--paper);border-bottom:1px solid var(--grid)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand{text-decoration:none;color:var(--ink);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand-name{font-family:"Klee One","Hiragino Sans",serif;font-weight:600;font-size:28px;line-height:1.2}
.brand-sub{font-size:14px;color:var(--ink-2)}
.head-btns{display:flex;gap:10px;align-items:center}
.head-btns .btn{min-height:46px;padding:8px 18px;font-size:16px;border-radius:8px}
.site-nav{width:100%}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center}
.site-nav a{color:var(--ink);text-decoration:none;font-size:16px;padding:4px 0;display:inline-block;white-space:nowrap;font-weight:700}
.site-nav a:hover{color:var(--ai);text-decoration:underline}
/* 今いるページ：黄の太い下線（レイアウトを動かさない text-decoration で） */
.site-nav a[aria-current="page"]{color:var(--ai);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:5px}

/* ---------- ⑤ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:12px 30px;border-radius:10px;
  background:var(--ai);color:var(--on-ai);text-decoration:none;
  font-weight:700;font-size:18px;line-height:1.4;text-align:center;border:2px solid var(--ai);
}
.btn:hover{background:var(--ai-deep);border-color:var(--ai-deep);color:var(--on-ai)}
.btn-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow);box-shadow:0 4px 0 var(--yellow-deep)}
.btn-yellow:hover{background:var(--yellow-deep);border-color:var(--yellow-deep);color:var(--on-yellow)}
.btn-ghost{background:transparent;color:var(--chalk);border-color:var(--chalk)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--chalk);color:var(--chalk)}
.btn-line{background:var(--paper);color:var(--ai);border-color:var(--ai)}
.btn-line:hover{background:var(--shiraai);color:var(--ai)}
.after-btn{margin-top:12px;font-size:16px}
a.btn-yellow,a.btn-yellow:hover{color:var(--on-yellow)}
a.btn-ghost,a.btn-ghost:hover{color:var(--chalk)}

/* ---------- ⑥方眼の下地・藍の黒板 ---------- */
.ruled{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;background-position:center top;
}
.board{
  background-color:var(--board);color:var(--chalk);
  background-image:linear-gradient(var(--board-line) 1px, transparent 1px),linear-gradient(90deg, var(--board-line) 1px, transparent 1px);
  background-size:28px 28px;background-position:center top;
  --pen:var(--yellow);
}
.board a{color:var(--yellow)}
.board a:hover{color:#fff}
/* 黒板の上でもボタンの文字色は変えない（.board a より後に書いて優先させる） */
.board a.btn-yellow,.board a.btn-yellow:hover{color:var(--on-yellow)}
.board a.btn-ghost,.board a.btn-ghost:hover{color:var(--chalk)}

/* ---------- ⑦区画と見出し（Klee One＋黄の下線） ---------- */
.sec{padding:72px 0;border-bottom:1px solid var(--grid)}
.sec .q,.page-title{font-size:clamp(30px,4vw,46px);color:var(--ai);line-height:1.35;display:inline-block;position:relative;padding-bottom:6px;z-index:0}
.sec .q::after,.page-title::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:12px;background:var(--yellow);z-index:-1;border-radius:2px}
.sec .a{font-size:clamp(20px,2.4vw,26px);font-weight:700;margin-top:22px;max-width:30em;line-height:1.6}
.sec .a2{margin-top:14px;max-width:40em;color:var(--ink-2)}
.sec h3{font-size:22px;margin-top:40px;padding-bottom:8px;border-bottom:3px solid var(--ai)}
.board .q,.board .page-title{color:var(--chalk)}
.board .a2{color:#D9E6EF}
.board h3{border-bottom-color:var(--yellow)}

/* ---------- ⑧ピクトグラム（自作のインラインSVG。線の太さ・丸みを統一）とコマの浮かび上がり ---------- */
.pict{display:block;width:100%;height:auto;color:var(--ai);fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pict.small{stroke-width:7}
.plans .pict{stroke-width:6}
.pict .f{fill:currentColor;stroke:none}
.pict .accent{fill:var(--yellow)}
.pict .accent-s{stroke:var(--pen)}
.pict .flag{fill:var(--yellow)}
/* .lift はJSが付ける（.flow > li, .facts > li, .plans > div, .steps > li, .card）。初期は全表示 */
.board-ready .lift:not(.on){opacity:0;transform:translateY(18px)}
.lift.on{box-shadow:0 6px 16px rgba(30,43,54,.10)}

/* ---------- ⑨「詳しく見る」 ---------- */
.more-link{margin-top:34px}
.more-link a{display:inline-flex;align-items:center;min-height:52px;padding:10px 26px;border:2px solid var(--ai);border-radius:10px;color:var(--ai);text-decoration:none;font-weight:700;font-size:17px;background:var(--paper)}
.more-link a:hover{background:var(--shiraai)}
.board .more-link a{border-color:var(--chalk);color:var(--chalk);background:transparent}
.board .more-link a:hover{background:rgba(255,255,255,.12);color:var(--chalk)}

/* ---------- ⑩共通部品 ---------- */
/* 流れの2コマ（.flow）：見出し帯＋ピクト＋一言 */
.flow{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:1fr auto 1fr;gap:16px 18px;align-items:stretch}
.flow li{border:3px solid var(--ai);border-radius:12px;background:var(--box);overflow:hidden;color:var(--ink)}
.flow li h3{margin:0;padding:12px 20px;border:0;font-size:24px;line-height:1.4;background:var(--ai);color:var(--on-ai)}
.flow li h3 small{display:block;font-family:"BIZ UDPGothic",sans-serif;font-size:15px;font-weight:700;color:var(--on-ai-sub);line-height:1.5;margin-bottom:2px}
.flow li .pict{width:min(70%,260px);margin:16px auto 0}
.flow li p{padding:10px 20px 16px;font-size:17px;font-weight:700;text-align:center}
.flow .arrow{display:grid;place-items:center;color:var(--ai);border:0;background:none}
.flow .arrow svg{width:48px;height:48px}
/* 特長の1行箱（.facts）：小さなピクト＋1行 */
.facts{margin-top:30px;list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 28px}
.facts li{font-size:19px;font-weight:700;padding:10px 16px 10px 14px;background:var(--box);border:2px solid var(--band);border-radius:10px;color:var(--ink);display:flex;align-items:center;gap:14px}
.facts li .pict{width:72px;flex:none}
/* プランの箱（.plans）：黒い見出し帯＋黄の小見出し＋ピクト＋価格 */
.plans{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.plans > div{border:2px solid var(--band);border-radius:12px;overflow:hidden;background:var(--box);color:var(--ink)}
.plans dt{background:var(--band);color:var(--chalk);padding:14px 20px;font-size:26px;font-family:"Klee One",serif;font-weight:600;line-height:1.3}
.plans dt small{display:block;font-family:"BIZ UDPGothic",sans-serif;font-size:15px;font-weight:700;color:var(--yellow);margin-top:4px}
.plans dd{margin:0;padding:16px 20px 18px;font-size:16px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 18px;align-items:center}
.plans dd .pict{width:150px}
.plans dd .p{font-size:26px;font-weight:900;display:block;margin-bottom:4px;color:var(--ai);font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif}
/* 番号つきステップ（.steps）：番号＋ピクト＋ステップ名 */
.steps{counter-reset:step;list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.steps li{counter-increment:step;background:var(--box);border:2px solid var(--band);border-radius:12px;padding:16px 16px 18px;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative}
.steps li::before{content:counter(step);flex:none;width:44px;height:44px;background:var(--ai);color:var(--on-ai);border-radius:10px;display:grid;place-items:center;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:22px}
.steps li .pict{width:min(100%,170px);align-self:center}
.steps.three,.steps:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.steps h3{margin:0;padding:0;border:0;font-size:20px;line-height:1.4}
.steps h3 small{display:block;font-family:"BIZ UDPGothic",sans-serif;font-size:14px;font-weight:400;color:var(--ink-2)}
/* 質問＋答え（.qa-list。トップとよくある質問ページだけ）
   質問だけを並べ、押すと答えが開く（<details><summary>質問</summary><p class="a">答え</p></details>。JSなしで動く）
   右端の＋が開くと−に。開くとき答えが軽く浮かぶ（動きを減らす設定では無し） */
.qa{background:var(--paper-2)}
.qa-list{margin-top:26px;max-width:860px}
.qa-list details{border-bottom:1px solid var(--grid)}
.qa-list details:first-child{border-top:1px solid var(--grid)}
.qa-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:0 12px;min-height:44px;padding:13px 0;font-weight:700;font-size:19px;line-height:1.5;color:var(--ink)}
.qa-list summary::-webkit-details-marker{display:none}
.qa-list summary:hover{color:var(--ai)}
.qa-list summary::before{content:"Q";flex:none;min-width:30px;text-align:center;margin-top:.1em;color:var(--on-ai);background:var(--ai);border-radius:6px;padding:0 6px;font-family:"Klee One",serif;font-weight:600;font-size:15px;line-height:1.6}
.qa-list summary::after{content:"＋";width:28px;height:28px;margin-top:.05em;border:2px solid var(--ai);border-radius:50%;color:var(--ai);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:17px;line-height:24px;text-align:center;transition:transform .25s ease}
.qa-list details[open] summary::after{content:"−";transform:rotate(180deg)}
.qa-list .a{margin:0 40px 16px 42px;font-size:16px;line-height:1.8;color:var(--ink-2)}
.qa-list details[open] .a{animation:qa-open .28s ease-out}
@keyframes qa-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.qa-list details[open] .a{animation:none}.qa-list summary::after{transition:none}}
/* 白いカード（.card）：詳細ページの一般的な箱 */
.card{background:var(--box);color:var(--ink);border:2px solid var(--band);border-radius:12px;padding:18px 20px}
.card h3{margin-top:0;border:0;padding:0;font-size:22px}
/* 表（.tbl）：料金表など */
.tbl{width:100%;border-collapse:collapse;font-size:17px;margin-top:20px}
.tbl th,.tbl td{padding:12px 10px;border-bottom:1px solid var(--grid);text-align:left;vertical-align:top}
.tbl thead th{background:var(--paper-2);font-weight:700;font-size:16px;border-bottom:2px solid var(--ai)}
.tbl td.num,.tbl th.num{text-align:right;white-space:nowrap}
.tbl tr.total td{font-weight:700;background:var(--yellow);color:var(--on-yellow)}
.board .tbl th,.board .tbl td{border-bottom-color:rgba(255,255,255,.25)}
.board .tbl thead th{background:transparent;color:var(--chalk);border-bottom-color:var(--yellow)}
/* 注記（.note）：小さめの補足。本文より薄い色 */
.note{margin-top:14px;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:46em}
.note p + p{margin-top:4px}
.board .note{color:#C9D9E4}
/* 本文（.lead／.body）：詳細ページの短い説明文 */
.lead{font-size:clamp(18px,2vw,21px);font-weight:700;margin-top:22px;max-width:34em;line-height:1.7}
.body{margin-top:14px;max-width:40em}
.body p + p{margin-top:12px}

/* ---------- ⑪詳細ページの見出し・パンくず・準備中 ---------- */
.breadcrumb{font-size:14px;color:var(--ink-2);padding:12px 0 0}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.breadcrumb li + li::before{content:"＞";margin-right:6px;color:var(--ink-2)}
.breadcrumb a{color:var(--ink-2)}
.page-head{padding:28px 0 36px;border-bottom:1px solid var(--grid)}
.page-head .lead{margin-top:18px}
.page-body{padding:56px 0 64px}
.wip{display:inline-block;margin-top:28px;padding:10px 18px;background:var(--note-bg);color:var(--note-ink);border-radius:8px;font-weight:700;font-size:16px}

/* ---------- ⑫最後の申込（全ページ共通） ---------- */
.final{background:var(--final);color:#fff;padding:56px 0 0;overflow:hidden}
.final .wrap{display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
.final-text{padding-bottom:56px}
.final h2{font-size:clamp(30px,3.6vw,44px);color:#fff}
.final p{margin-top:12px;font-size:18px}
.final .cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.final .btn{min-width:300px}
.final .after-btn{margin:0}
.final a:not(.btn){color:#fff}

/* ---------- ⑬フッター（テキストリンクを並べる） ---------- */
.site-foot{padding:30px 0 40px;font-size:15px;color:var(--ink-2)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-top:4px}
.site-foot .foot-h{font-weight:700;color:var(--ink);margin-bottom:2px}
.site-foot a{color:var(--ink-2)}
.site-foot a[aria-current="page"]{color:var(--ai);font-weight:700}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 48px}
.foot-links{display:grid;grid-template-columns:auto auto;gap:4px 28px}
.foot-legal{grid-template-columns:auto}

/* ---------- ⑭追従ボタン（PC：右下／スマホ：画面下の帯） ---------- */
.float-cta{position:fixed;right:24px;bottom:24px;z-index:10;transition:opacity .25s,transform .25s}
.float-cta .btn{box-shadow:0 0 0 5px var(--paper),0 4px 0 5px var(--yellow-deep);min-width:260px}
.sticky-cta{display:none}
.cta-near .float-cta,.cta-near .sticky-cta{opacity:0;transform:translateY(10px);pointer-events:none}

/* ---------- ⑮画面幅 ---------- */
@media (max-width:900px){
  .facts{grid-template-columns:1fr;gap:10px}
  .plans{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps.three,.steps:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .flow{grid-template-columns:1fr}
  .flow .arrow svg{transform:rotate(90deg);width:36px;height:36px}
}
@media (max-width:640px){
  body{padding-bottom:88px}
  .wrap{padding:0 16px}
  .site-head .wrap{padding-top:10px;padding-bottom:8px;gap:6px}
  .brand-name{font-size:24px}
  .head-btns{display:none}
  .site-nav{position:relative}
  .site-nav ul{flex-wrap:nowrap;gap:0 18px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 56px 0 16px;width:calc(100% + 32px)}
  .site-nav ul::-webkit-scrollbar{display:none}
  .site-nav a{font-size:15px;font-weight:400}
  .site-nav::after{content:"";position:absolute;top:0;bottom:0;right:-16px;width:64px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--paper) 55%)}
  .sec{padding:48px 0}
  .sec .q{font-size:min(7.6vw,32px)}
  .page-title{font-size:min(6.4vw,32px)}
  .sec .q::after,.page-title::after{height:9px}
  .sec .a{font-size:20px}
  .flow li h3{font-size:21px;padding:10px 16px}
  .flow li p{padding:10px 16px 12px;font-size:16px}
  .flow li .pict{width:min(80%,240px)}
  .facts li{font-size:17px}
  .facts li .pict{width:60px}
  .plans dt{font-size:23px}
  .plans dd .p{font-size:23px}
  .plans dd{grid-template-columns:110px minmax(0,1fr);gap:0 12px}
  .plans dd .pict{width:110px}
  .steps{grid-template-columns:1fr 1fr;gap:10px}
  .steps li{padding:12px 12px 14px}
  .steps li .pict{width:100%}
  /* 3件のときは1列・横並び（番号＋ピクト＋名前） */
  .steps.three,.steps:has(> li:nth-child(3):last-child){grid-template-columns:1fr}
  .steps.three li,.steps:has(> li:nth-child(3):last-child) li{flex-direction:row;align-items:center;gap:12px}
  .steps.three li .pict,.steps:has(> li:nth-child(3):last-child) li .pict{width:80px;flex:none}
  .steps h3{font-size:18px}
  .qa-list summary{font-size:17px;gap:0 10px}
  .qa-list .a{margin:0 0 14px 40px;font-size:15px}
  .tbl{font-size:16px}
  .tbl th,.tbl td{padding:10px 6px}
  .more-link{margin-top:26px}
  .more-link a{width:100%;justify-content:center}
  .page-head{padding:20px 0 28px}
  .page-body{padding:40px 0 48px}
  .final{padding:40px 0 0}
  .final-text{padding-bottom:36px}
  .final .btn{width:100%;min-width:0}
  .foot-nav{gap:10px 28px}
  .float-cta{display:none}
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:10;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--grid);transition:opacity .25s,transform .25s}
  .sticky-cta .btn{width:100%}
}
.final .wrap > *,.plans > *{min-width:0}