/* ===== 蔵太郎 LP（テーマ管理に貼付） ===== */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&display=swap');
/* ---------------------------------------------------------------
パレット。アプリの lib/theme.dart（KuraColors）と対応させている。
色を変えるときは必ずここだけを触ること。
--------------------------------------------------------------- */
:root{
/* 固定ヘッダーの高さ。.kt-nav に height として直接与えるので、中身の背に
左右されない（以前は min-height だったため、CTAボタンが伸びると
ここの値と実際の高さがズレて本文が3pxめり込んでいた） */
--kt-header-h:74px;
/* 背景。温かみのあるオフホワイト = KuraColors.offWhite */
--kt-bg:#F7F3EA;
--kt-surface:#FFFFFF; /* = KuraColors.surface */
--kt-sunken:#F0ECE2; /* 白カードの中で一段沈める面（アプリの品目カード地と同値） */
/* 藍・ネイビー = KuraColors.indigo / indigoLight */
--kt-indigo:#2B3A67;
--kt-indigo-light:#4A5A8A;
/* 水のアクセント = KuraColors.water / waterLight */
--kt-water:#4A90D9;
--kt-water-light:#BFD9F2;
--kt-water-pale:#DCE9F7; /* バッジ・CTA帯に敷く最も淡い水色 */
/* テキスト。ink = KuraColors.ink。
アプリには本文サブ用の色が無いので、inkMuted(#6B7280)を
LPの小さい文字でもAA(4.5:1)を満たす濃さに寄せた2段を用意している */
--kt-ink:#1E2333;
--kt-ink-sub:#3E4553; /* 段落 */
--kt-ink-muted:#5A6272; /* 注記・ふりがな・ラベル */
/* 境界線 = KuraColors.cardBorder */
--kt-border:#E6E0D3;
/* 補助色。grow = KuraColors.grow、caution はアプリの「期限が近い」と同値。
CLAUDE.md のとおり、注意色は本当に注意すべき箇所だけに使う */
--kt-grow:#3FA796;
--kt-caution:#C77A2B;
/* 端末モックのベゼル */
--kt-device:#141824;
}
.kt-lp{font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;background:var(--kt-bg);color:var(--kt-ink);line-height:1.8;-webkit-font-smoothing:antialiased;}
.kt-lp h1,.kt-lp h2,.kt-lp h3{margin:0;font-weight:900;color:var(--kt-indigo);}
.kt-lp p{margin:0;}
.kt-lp a{color:var(--kt-indigo);text-decoration:none;}
.kt-lp a:hover{color:var(--kt-indigo-light);}
.kt-lp img{max-width:100%;}
/* ボタン */
.kt-btn{display:inline-block;background:var(--kt-indigo);color:#fff !important;padding:14px 28px;border-radius:999px;font-weight:700;font-size:15px;}
.kt-btn:hover{background:var(--kt-indigo-light);}
.kt-btn-nav{background:var(--kt-indigo);padding:10px 22px;font-size:14px;}
.kt-btn-ghost{background:transparent;border:1.5px solid var(--kt-border);color:var(--kt-ink-sub) !important;padding:12px 22px;font-size:13.5px;}
.kt-btn-ghost:hover{background:transparent;}
.kt-badge{display:inline-block;background:var(--kt-water-pale);color:var(--kt-indigo);font-size:13px;font-weight:900;padding:7px 16px;border-radius:999px;margin-bottom:22px;}
/* 数字は等幅（タブラー数字）で出す。59L・27.5%・62品目 などが揃う */
.kt-lp p strong{color:var(--kt-indigo);font-weight:900;font-size:1.15em;background:linear-gradient(transparent 68%,var(--kt-water-light) 68%);padding:0 2px;font-variant-numeric:tabular-nums;}
.kt-note{font-size:13px;color:var(--kt-ink-muted);}
.kt-center{text-align:center;margin-top:14px;}
.kt-source{margin-top:14px;font-size:12px;color:var(--kt-ink-muted);}
/* エリア分割時のラッパー調整 */
.kt-lp-header,.kt-lp-footer{padding:0;}
/* ヘッダー追従。sticky は「親要素の箱の中」でしか動けず、エリア分割後の
ヘッダーエリアはナビと同じ高さしかないので効かない。fixed で画面に固定する */
.kt-lp-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;}
/* fixed で浮いたぶんの高さを body で確保する。ヘッダーエリアは全ページ共通なので、
TOPだけでなくプライバシーポリシー等でも同じだけ空けないと本文がナビの下に潜る */
body{padding-top:var(--kt-header-h);}
/* ヘッダーとメインの間の隙間。ヘッダーの中身は fixed で流れから抜けているのに、
CMS 側の枠（#ccHeaderArea > … > .card.mb-3）だけが高さ0＋下マージン16pxとして
流れに残り、そのぶん本文が下がる。ヘッダーエリアの footprint を消す */
#ccHeaderArea{margin-bottom:0;}
#ccHeaderArea:has(.kt-lp-header) .card{margin-bottom:0 !important;}
/* 記事側ラッパーの上余白も潰す。body は上の余白確保に使っているので触らない */
body :has(.kt-lp-main){margin-top:0 !important;padding-top:0 !important;}
/* 余白が残っても白く見えないよう、ページ背景をヒーローと同色にする */
html,body{background:var(--kt-bg);}
/* 固定ヘッダーぶん、アンカーの着地位置を下げる */
.kt-lp [id]{scroll-margin-top:calc(var(--kt-header-h) + 12px);}
/* 記事本文に直接書かれたナビ・フッターを隠す。
エリア分割前に作った固定記事（プライバシーポリシー等）は自前のナビとフッターを
持っており、ヘッダー／フッターエリアと二重に出てしまうため。
記事側のHTMLを消して回らなくてよいよう、CSS側で片方だけ表示する */
.kt-lp:not(.kt-lp-header) > .kt-nav{display:none;}
.kt-lp:not(.kt-lp-footer) > .kt-footer{display:none;}
/* ナビ */
/* 高さは height で固定する。min-height だと中身（CTAボタン）の背で伸び、
--kt-header-h とズレて本文がヘッダーに潜る。上下 padding も持たせない */
.kt-nav{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 56px;flex-wrap:nowrap;gap:12px;height:var(--kt-header-h);background:rgba(247,243,234,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--kt-border);}
.kt-nav-brand{display:flex;align-items:center;gap:10px;}
.kt-nav-brand img{width:42px !important;height:42px !important;object-fit:contain;}
.kt-nav-name{font-weight:900;font-size:20px;color:var(--kt-indigo);}
.kt-nav-kana{font-size:11px;color:var(--kt-ink-muted);margin-top:5px;}
.kt-nav-links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:700;}
.kt-nav-links a{color:var(--kt-ink-sub);}
/* ヒーロー */
.kt-hero{display:grid;grid-template-columns:1fr 480px;gap:32px;padding:52px 56px 0;align-items:end;max-width:1240px;margin:0 auto;}
.kt-hero-copy{padding-bottom:64px;}
.kt-hero h1{font-size:44px;line-height:1.5;margin-bottom:18px;text-wrap:pretty;}
.kt-hero h1 mark{background:linear-gradient(transparent 62%,var(--kt-water-light) 62%);color:inherit;padding:0 4px;}
.kt-lead{font-size:15.5px;line-height:2.1;color:var(--kt-ink-sub);max-width:480px;margin-bottom:30px;text-wrap:pretty;}
.kt-hero-actions{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.kt-hero-visual{display:flex;align-items:flex-end;justify-content:center;}
.kt-phone{width:300px;background:var(--kt-device);border-radius:38px 38px 0 0;padding:11px 11px 0;flex:none;}
/* 画面の地はアプリの背景色そのもの。スクショの余白と継ぎ目が出ないようにする */
.kt-phone-screen{background:var(--kt-bg);border-radius:28px 28px 0 0;overflow:hidden;height:480px;}
.kt-phone-screen img{width:100% !important;height:auto !important;display:block;}
.kt-mascot{position:relative;width:190px;margin-left:28px;flex:none;}
.kt-mascot > img{width:190px !important;height:auto !important;display:block;}
.kt-balloon{position:absolute;top:-64px;left:24px;background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:18px;border-bottom-left-radius:4px;padding:10px 16px;font-size:13px;font-weight:700;white-space:nowrap;}
/* セクション共通 */
.kt-concept,.kt-features{background:var(--kt-surface);padding:64px 56px;}
.kt-data,.kt-pricing{padding:64px 56px;}
.kt-concept h2,.kt-features h2,.kt-pricing h2{font-size:28px;text-align:center;margin-bottom:36px;}
.kt-lp .kt-section-lead{max-width:640px;margin:-24px auto 44px;font-size:15px;line-height:2;color:var(--kt-ink-sub);text-align:center;text-wrap:pretty;}
/* 積立防災ステップ */
.kt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1140px;margin:0 auto;}
.kt-step{background:var(--kt-sunken);border-radius:16px;padding:28px;text-align:center;}
.kt-step-num{width:56px;height:56px;margin:0 auto 14px;background:var(--kt-water-pale);border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:900;color:var(--kt-indigo);}
.kt-step h3{font-size:17px;margin-bottom:8px;}
.kt-step p{font-size:13px;line-height:1.9;color:var(--kt-ink-sub);}
/* 現状データ */
.kt-data{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1140px;margin:0 auto;}
.kt-data h2{font-size:28px;line-height:1.6;margin-bottom:14px;}
.kt-data-copy p{font-size:14.5px;line-height:2.1;color:var(--kt-ink-sub);text-wrap:pretty;}
.kt-data-cards{display:grid;gap:14px;}
.kt-data-card{background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:16px;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;}
.kt-data-card span{font-weight:700;font-size:15px;}
.kt-data-card strong{font-size:26px;font-weight:900;color:var(--kt-water);font-variant-numeric:tabular-nums;}
.kt-data-card-dark{background:var(--kt-indigo);border-color:var(--kt-indigo);}
.kt-data-card-dark span{color:#fff;}
.kt-data-card-dark strong{color:var(--kt-water-light);}
/* ---------------------------------------------------------------
ミニ診断（ヒーロー直下）。挙動は design/site/kuratarou-shindan.js が正。
⚠️ 係数を触ったら .js も配り直すこと（docs/site/web-shindan.md §7）。
下地は白。次の .kt-concept も白なので、境目は 1px の罫線で切る。
--------------------------------------------------------------- */
.kt-shindan{background:var(--kt-surface);border-bottom:1px solid var(--kt-border);padding:56px 56px 60px;}
.kt-shindan-inner{max-width:1140px;margin:0 auto;}
/* バッジはヒーローと同じ見た目のまま中央へ。inline-block のままだと左に寄る */
.kt-shindan .kt-badge{display:block;width:-moz-fit-content;width:fit-content;margin:0 auto 14px;}
.kt-shindan h2{font-size:28px;text-align:center;margin-bottom:36px;}
.kt-shindan-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;}
/* 入力側 */
.kt-shindan-form{background:var(--kt-sunken);border-radius:16px;padding:22px 24px;}
.kt-shindan-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;}
.kt-shindan-row + .kt-shindan-row{border-top:1px solid var(--kt-border);}
.kt-shindan-label{font-size:14.5px;font-weight:700;color:var(--kt-ink-sub);}
.kt-shindan-label small{display:block;font-size:11.5px;font-weight:500;color:var(--kt-ink-muted);margin-top:2px;}
.kt-shindan-stepper{display:flex;align-items:center;gap:8px;flex:none;}
.kt-shindan-stepper button,.kt-shindan-daybtns button{-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;}
.kt-shindan-stepper button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--kt-border);background:var(--kt-surface);color:var(--kt-indigo);font-size:19px;font-weight:900;line-height:1;padding:0;}
.kt-shindan-stepper button:hover:not(:disabled){background:var(--kt-water-pale);}
.kt-shindan-stepper button:disabled{opacity:.3;cursor:default;}
/* 直接入力できること。＋を何十回も押させない（アプリの入力ルールと同じ） */
.kt-shindan-stepper input{width:54px;height:38px;box-sizing:border-box;text-align:center;border:1.5px solid var(--kt-border);border-radius:10px;background:var(--kt-surface);font-family:inherit;font-size:16px;font-weight:900;color:var(--kt-indigo);font-variant-numeric:tabular-nums;-moz-appearance:textfield;}
.kt-shindan-stepper input::-webkit-outer-spin-button,.kt-shindan-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* 日数プリセット。ここを触らせることが「積立防災」の説明そのもの */
.kt-shindan-days{margin-top:16px;padding-top:16px;border-top:1px solid var(--kt-border);}
.kt-shindan-days-title{font-size:13px;font-weight:700;color:var(--kt-ink-muted);margin-bottom:10px;}
.kt-shindan-daybtns{display:flex;gap:8px;flex-wrap:wrap;}
.kt-shindan-daybtns button{border:1.5px solid var(--kt-border);background:var(--kt-surface);color:var(--kt-ink-sub);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
.kt-shindan-daybtns button:hover{background:var(--kt-water-pale);}
.kt-shindan-daybtns button[aria-pressed="true"]{background:var(--kt-indigo);border-color:var(--kt-indigo);color:#fff;}
/* 結果側 */
.kt-shindan-out{display:grid;gap:12px;align-content:start;}
.kt-shindan-card{background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:16px;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;}
.kt-shindan-card-name{display:block;font-size:15px;font-weight:900;color:var(--kt-indigo);}
.kt-shindan-card-desc{display:block;font-size:12px;font-weight:500;color:var(--kt-ink-muted);margin-top:3px;text-wrap:pretty;}
.kt-shindan-qty{text-align:right;flex:none;white-space:nowrap;}
.kt-shindan-num{font-size:30px;font-weight:900;color:var(--kt-water);font-variant-numeric:tabular-nums;line-height:1.2;}
.kt-shindan-unit{font-size:14px;font-weight:700;color:var(--kt-water);margin-left:3px;}
.kt-shindan-conv{font-size:12px;color:var(--kt-ink-muted);font-variant-numeric:tabular-nums;}
.kt-shindan-empty{font-size:13px;color:var(--kt-ink-muted);text-align:center;padding:4px 0;}
/* 総量に圧倒させないための一文。結果のすぐ下に置く位置が仕事のうち */
.kt-shindan-reassure{background:var(--kt-water-pale);border-radius:14px;padding:14px 18px;font-size:13.5px;line-height:1.9;color:var(--kt-indigo);text-wrap:pretty;}
.kt-shindan-cta{text-align:center;margin-top:6px;}
.kt-shindan-cta .kt-note{margin-top:10px;}
/* 機能カード */
.kt-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1140px;margin:0 auto;}
.kt-feature{border:1.5px solid var(--kt-border);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 200px;}
.kt-feature-copy{padding:30px;}
.kt-feature h3{font-size:20px;margin-bottom:10px;}
.kt-feature p{font-size:14px;line-height:2;color:var(--kt-ink-sub);}
.kt-feature-shot{background:var(--kt-sunken);padding:20px 20px 0;}
.kt-feature-shot img{width:100% !important;height:auto !important;display:block;border:7px solid var(--kt-device);border-bottom:none;border-radius:22px 22px 0 0;background:var(--kt-device);box-shadow:0 6px 20px rgba(43,58,103,.18);}
/* 料金 */
/* 初回公開から「無料 / 蔵太郎プラス」の2プランを出すため、単独カード
（旧 .kt-price-card）から2カラムへ差し替えた（2026-08-06）。
⚠️ 有料側を強調するのはボーダーの濃さだけ。バッジも「7日間 無料でおためし」＝
入口の軽さを言う語にする。料金表で不安を煽らない（CLAUDE.md / monetization §6.6） */
/* 高さを揃える（align-items は既定の stretch のまま）。2枚の下端が揃わないと
料金表として比べにくい */
.kt-plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto;}
.kt-plan{position:relative;background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:16px;padding:32px 30px;}
.kt-plan-plus{border:2px solid var(--kt-indigo);}
/* ⚠️ バッジは絶対配置で上辺に載せる。カードの中に流し込むと、その1行ぶん
プラス側だけプラン名・価格・項目が下がり、2枚を横に読み比べられなくなる。
left:30px = カードの padding-left と同値（絶対配置の基準は padding box なので
これで本文の左端と揃う）。top は高さ24pxのバッジを枠線の上で半分に割る位置 */
.kt-plan-badge{position:absolute;top:-14px;left:30px;display:inline-block;background:var(--kt-indigo);color:#fff;font-size:12px;font-weight:900;line-height:1;padding:6px 14px;border-radius:999px;}
.kt-plan-name{font-size:17px;font-weight:900;color:var(--kt-indigo);}
.kt-plan-price{font-size:38px;font-weight:900;line-height:1.35;color:var(--kt-indigo);font-variant-numeric:tabular-nums;}
.kt-plan-unit{font-size:15px;font-weight:700;color:var(--kt-ink-muted);margin-left:8px;}
.kt-plan-sub{font-size:12.5px;color:var(--kt-ink-muted);}
/* プラン名から下の説明までを1ブロックとして、罫線で「中身」と区切る。
⚠️ 無料／プラスの罫線位置を2枚で揃えるため、この文は「2カラム表示になる
900〜1280px幅のどこでも1行に収まる」長さに抑えること（実測20字強が上限）。
line-clamp で高さを強制する案は Chrome でも display が flow-root に落ちて
効かなかったため不採用（2026-08-06 検証）。文が伸びて2行になると、右の
カードだけ罫線・チェックリストの開始位置が下にずれる */
.kt-plan-tagline{font-size:13.5px;line-height:1.9;color:var(--kt-ink-sub);margin-top:14px;padding-bottom:18px;border-bottom:1px solid var(--kt-border);}
.kt-plan-list{list-style:none;margin:18px 0 0;padding:0;}
.kt-plan-list li{position:relative;padding-left:26px;margin-bottom:10px;font-size:13.5px;line-height:1.9;color:var(--kt-ink-sub);}
/* line-height を本文と合わせる。既定（normal）のままだと ✓ が1行目より上に浮く */
.kt-plan-list li::before{content:"✓";position:absolute;left:0;top:0;line-height:1.9;color:var(--kt-water);font-weight:900;}
.kt-plan-plus .kt-plan-list li::before{color:var(--kt-indigo);}
/* li の strong は LP のマーカー（p strong）の対象外なので、ここで太字だけ与える */
.kt-plan-list li strong{color:var(--kt-ink);font-weight:900;font-variant-numeric:tabular-nums;}
/* CTA */
.kt-cta{background:var(--kt-water-pale);padding:56px;display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;}
.kt-lp img.kt-cta-mascot{width:120px !important;max-width:120px;height:auto;flex:none;}
.kt-cta h2{font-size:26px;margin-bottom:10px;}
.kt-cta p{font-size:14px;color:var(--kt-ink-sub);margin-bottom:20px;}
/* フッター */
.kt-footer{background:var(--kt-indigo);padding:32px 56px;display:flex;justify-content:space-between;align-items:center;color:var(--kt-water-light);font-size:13px;flex-wrap:wrap;gap:12px;}
/* 折り返しは必須。狭い画面では1行に収まらず、指定が無いと項目ごとに
縦へ潰れて1語が3行になる（375px幅で確認）。行間は10pxを別に取る */
.kt-footer-links{display:flex;flex-wrap:wrap;gap:10px 24px;}
.kt-footer a{color:var(--kt-water-light);}
.kt-footer a:hover{color:#fff;}
/* Xのマーク。公式サイト（about.x.com）が配信しているパスをそのまま使っている。
⚠️ 商標なので、色を勝手に変えない・つぶさない・回転させないこと。
フッターの地が濃紺なので白のまま置く（周りの文字より少し明るいのは意図どおり）。
⚠️ 画像として持たずCSSの背景で描いているのは、CMSの本文HTMLに画像を1枚
増やさずに済ませるため。テーマCSSを貼り忘れると @ から始まる文字だけが残る */
.kt-footer-x::before{content:"";display:inline-block;width:14px;height:14px;margin-right:7px;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%201227'%3E%3Cpath%20fill='%23ffffff'%20d='M714.163%20519.284L1160.89%200H1055.03L667.137%20450.887L357.328%200H0L468.492%20681.821L0%201226.37H105.866L515.491%20750.218L842.672%201226.37H1200L714.137%20519.284H714.163ZM569.165%20687.828L521.697%20619.934L144.011%2079.6944H306.615L611.412%20515.685L658.88%20583.579L1055.08%201150.3H892.476L569.165%20687.854V687.828Z'/%3E%3C/svg%3E") no-repeat center/contain;}
/* ===============================================================
法務・サポートページ（プライバシーポリシー等の長文ページ）
docs/site/privacy-policy.html の .kt-legal / .kt-toc / .kt-sec 系に対応する
=============================================================== */
.kt-legal{max-width:1140px;margin:0 auto;padding:48px 56px 72px;}
/* 目次を置かない短い法務ページ（特商法表記など）。1140px のまま本文を流すと1行が長すぎる */
.kt-legal--narrow{max-width:880px;}
/* ページ見出し帯 */
.kt-legal__head{border-bottom:1px solid var(--kt-border);padding-bottom:24px;margin-bottom:36px;}
.kt-legal__eyebrow{font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--kt-water);margin-bottom:6px;}
.kt-legal__title{font-size:30px;line-height:1.5;}
.kt-legal__meta{margin-top:10px;font-size:13px;color:var(--kt-ink-muted);}
/* 目次＋本文の2カラム。min-width:0 が無いと、表がグリッドを押し広げて横スクロールする */
.kt-legal__layout{display:grid;grid-template-columns:248px 1fr;gap:44px;align-items:start;}
.kt-legal__main{min-width:0;}
/* 目次（固定ヘッダーの下に貼り付く） */
.kt-toc{position:sticky;top:calc(var(--kt-header-h) + 20px);background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:16px;padding:20px 22px;}
.kt-toc__title{font-size:13px;font-weight:900;color:var(--kt-indigo);margin-bottom:8px;}
.kt-toc__list{list-style:none;margin:0;padding:0;}
.kt-toc__list a{display:block;padding:5px 0;font-size:13px;line-height:1.7;color:var(--kt-ink-sub);}
.kt-toc__list a:hover{color:var(--kt-indigo);}
/* 本文 */
.kt-legal-lead{font-size:15px;line-height:2.1;color:var(--kt-ink-sub);margin-bottom:36px;text-wrap:pretty;}
.kt-sec{margin-bottom:44px;}
.kt-sec__h{font-size:20px;padding-bottom:10px;margin-bottom:16px;border-bottom:2px solid var(--kt-water-light);}
.kt-sec__h3{font-size:16px;margin:28px 0 10px;}
.kt-legal__main p{font-size:14.5px;line-height:2.1;color:var(--kt-ink-sub);margin-bottom:14px;text-wrap:pretty;}
.kt-legal__main a{color:var(--kt-indigo);text-decoration:underline;text-underline-offset:3px;}
/* 法務文書は strong の数が多い。LPのマーカー＋1.15倍のままだと本文が荒れるので戻す */
.kt-legal p strong,.kt-legal li strong,.kt-legal td strong{font-size:1em;background:none;padding:0;color:var(--kt-ink);font-weight:900;}
/* 箇条書き */
.kt-list{margin:0 0 18px;padding-left:1.4em;}
.kt-list li{font-size:14.5px;line-height:2;color:var(--kt-ink-sub);margin-bottom:6px;}
.kt-list li::marker{color:var(--kt-water);}
.kt-list--tight li{margin-bottom:2px;line-height:1.9;}
/* 注記ボックス。既定は水色、--good は達成色、--warn は注意色 */
.kt-legal-note{background:var(--kt-sunken);border-left:4px solid var(--kt-water);border-radius:0 16px 16px 0;padding:20px 24px;margin:18px 0 22px;}
.kt-legal-note--good{border-left-color:var(--kt-grow);}
.kt-legal-note--warn{border-left-color:var(--kt-caution);}
.kt-legal-note .kt-legal-note__title{font-weight:700;color:var(--kt-ink);margin-bottom:10px;}
.kt-legal-note .kt-legal-note__foot{font-size:13.5px;margin:12px 0 0;}
.kt-legal-note > :last-child{margin-bottom:0;}
/* 表。狭い画面では表だけ横スクロールさせる（ページ全体は横に動かさない） */
.kt-tablewrap{overflow-x:auto;margin:0 0 22px;}
.kt-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--kt-surface);border:1px solid var(--kt-border);}
.kt-table th,.kt-table td{padding:12px 16px;text-align:left;vertical-align:top;line-height:1.9;color:var(--kt-ink-sub);border-bottom:1px solid var(--kt-border);}
.kt-table th{background:var(--kt-sunken);color:var(--kt-ink);font-weight:700;white-space:nowrap;}
.kt-table tr:last-child th,.kt-table tr:last-child td{border-bottom:none;}
.kt-table--grid{min-width:560px;}
.kt-table--grid th,.kt-table--grid td{border:1px solid var(--kt-border);}
.kt-table--grid thead th{background:var(--kt-water-pale);color:var(--kt-indigo);}
.kt-table--grid tbody td:first-child{font-weight:700;color:var(--kt-ink);white-space:nowrap;}
/* FAQ（サポートページ）。Q/A は丸バッジで、質問と答えの境目を1行目で分からせる */
.kt-faq{padding:20px 0;border-bottom:1px solid var(--kt-border);}
.kt-faq:last-child{border-bottom:none;padding-bottom:0;}
.kt-legal__main .kt-faq__q{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;font-weight:900;line-height:1.8;color:var(--kt-indigo);margin-bottom:10px;}
.kt-faq__q::before{content:"Q";flex:none;width:24px;height:24px;margin-top:4px;border-radius:50%;background:var(--kt-indigo);color:#fff;font-size:12px;font-weight:900;line-height:1;display:grid;place-items:center;}
.kt-faq__a{position:relative;padding-left:34px;}
.kt-faq__a::before{content:"A";position:absolute;left:0;top:4px;width:24px;height:24px;border-radius:50%;background:var(--kt-water-pale);color:var(--kt-indigo);font-size:12px;font-weight:900;line-height:1;display:grid;place-items:center;}
.kt-faq__a > :last-child{margin-bottom:0;}
/* 問い合わせ先 */
.kt-contact{background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:16px;padding:22px 26px;}
.kt-legal__main .kt-contact p{margin-bottom:4px;}
.kt-legal__main .kt-contact p:last-child{margin-bottom:0;}
.kt-contact__name{font-weight:900;color:var(--kt-ink);}
/* 問い合わせ先の中のボタン。p の margin-bottom:4px だけだと窮屈なので上に間隔を足す。
本文リンクの下線（.kt-legal__main a）がボタンにも乗るので、そこだけ外す */
.kt-legal__main .kt-contact p.kt-contact__action{margin-top:16px;}
.kt-legal__main a.kt-btn{text-decoration:none;}
/* 付記 */
.kt-sec--appendix{margin-top:56px;padding-top:28px;border-top:1px solid var(--kt-border);}
.kt-sec--appendix .kt-sec__h{font-size:16px;border-bottom:none;padding-bottom:0;}
.kt-legal__main .kt-sec--appendix p{font-size:13px;color:var(--kt-ink-muted);}
/* ===============================================================
Connect-CMS プラグインのスキン（FAQ・お問い合わせフォーム・ブログ）
プラグインが吐くHTMLは編集できないので、Bootstrap のクラスに直接当てる。
スコープはプラグインの枠クラス（.plugin-faqs / .plugin-forms / .plugin-blogs）
に限定する。body 全体に当てると管理画面やログイン画面まで巻き添えになるため。
=============================================================== */
.plugin-faqs,.plugin-forms,.plugin-blogs{font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;color:var(--kt-ink);}
.plugin-faqs > .container,.plugin-forms > .container,.plugin-blogs > .container{max-width:900px;}
/* 枠のカードと見出し（「FAQ」「お問い合わせ」） */
.plugin-faqs > .container > .card,.plugin-forms > .container > .card{border:1.5px solid var(--kt-border);border-radius:16px;background:var(--kt-surface);}
.plugin-faqs > .container > .card > .card-header,.plugin-forms > .container > .card > .card-header{background:transparent;border-bottom:1px solid var(--kt-border);border-radius:16px 16px 0 0;padding:18px 24px;font-size:20px;font-weight:900;color:var(--kt-indigo);}
.plugin-faqs > .container > .card > .card-body,.plugin-forms > .container > .card > .card-body{padding:24px;}
/* 入力欄とボタンは3プラグイン共通 */
.plugin-faqs .form-control,.plugin-forms .form-control,.plugin-blogs .form-control{font-family:inherit;font-size:15px;line-height:1.8;height:auto;padding:11px 14px;color:var(--kt-ink);background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:12px;box-shadow:none;}
.plugin-faqs .form-control:focus,.plugin-forms .form-control:focus,.plugin-blogs .form-control:focus{border-color:var(--kt-water);box-shadow:0 0 0 3px rgba(74,144,217,.20);}
.plugin-faqs .form-control::placeholder,.plugin-forms .form-control::placeholder,.plugin-blogs .form-control::placeholder{color:var(--kt-ink-muted);opacity:.75;}
.plugin-faqs .btn-primary,.plugin-forms .btn-primary,.plugin-blogs .btn-primary{background:var(--kt-indigo);border-color:var(--kt-indigo);font-family:inherit;font-weight:700;}
.plugin-faqs .btn-primary:hover,.plugin-forms .btn-primary:hover,.plugin-blogs .btn-primary:hover{background:var(--kt-indigo-light);border-color:var(--kt-indigo-light);}
/* --- FAQ --- */
/* 検索欄。input-group なので角丸は左右で分ける */
.plugin-faqs .faq-search-form .form-control{border-radius:12px 0 0 12px;}
.plugin-faqs .input-group-append .btn{border-radius:0 12px 12px 0;padding-left:20px;padding-right:20px;}
/* カテゴリ見出し（バッジの色は記事側のインラインstyleで指定済み） */
.plugin-faqs .faq-category-title{margin:30px 0 10px;}
/* 質問の行。カードの入れ子をやめて、1本の罫線で区切るリストに見せる */
.plugin-faqs .faq-category > .card{border:none;border-bottom:1px solid var(--kt-border);border-radius:0;background:transparent;}
.plugin-faqs .faq-category > .card:last-child{border-bottom:none;}
.plugin-faqs .faq-list-title{background:transparent;}
/* .p-0 が !important なので、こちらも !important でないと padding が入らない */
.plugin-faqs .faq-list-title .btn-link{padding-top:14px !important;padding-bottom:14px !important;color:var(--kt-ink);font-weight:700;font-size:15.5px;line-height:1.8;text-decoration:none;white-space:normal;}
.plugin-faqs .faq-list-title .btn-link:hover{color:var(--kt-indigo);}
/* Q・A のバッジを同じ大きさの丸にそろえる */
.plugin-faqs .faq-list-title .badge,.plugin-faqs .faq-list-body .badge{width:24px;height:24px;padding:0;border-radius:50%;font-size:12px;font-weight:900;display:inline-grid;place-items:center;}
.plugin-faqs .badge-primary{background:var(--kt-indigo);color:#fff;}
.plugin-faqs .badge-secondary{background:var(--kt-water-pale);color:var(--kt-indigo);}
/* 答え。開いたことが分かるよう一段沈める */
.plugin-faqs .faq-list-body{background:var(--kt-sunken);border-radius:12px;margin:0 0 16px;padding:18px 20px;}
.plugin-faqs .faq-list-body p{font-size:14.5px;line-height:2;color:var(--kt-ink-sub);margin-bottom:0;}
.plugin-faqs .faq-list-body a{color:var(--kt-indigo);text-decoration:underline;text-underline-offset:3px;}
/* --- お問い合わせフォーム --- */
.plugin-forms .form-group.row{margin-bottom:22px;}
.plugin-forms .control-label{padding-top:10px;font-size:14px;font-weight:700;color:var(--kt-ink);}
/* col-sm-2（16%）は日本語ラベルには狭く、「お問い合わせ種別」等が折り返す */
@media (min-width: 576px){
.plugin-forms .form-group.row > .control-label{flex:0 0 210px;max-width:210px;}
}
/* 必須バッジ。赤は入力の必須・エラーだけに使う */
.plugin-forms .badge-danger{background:transparent;border:1px solid #D9534F;color:#D9534F;font-weight:700;}
/* 補足文（例）iOS 18.5 など）。.text-dark は !important 付き */
.plugin-forms .small.text-dark{color:var(--kt-ink-muted) !important;font-size:12.5px;display:block;margin-top:6px;}
.plugin-forms .small.text-dark a{color:var(--kt-indigo);text-decoration:underline;text-underline-offset:3px;}
/* メールアドレスの確認欄が直下に続くので離す */
.plugin-forms .form-control + .form-control{margin-top:8px;}
/* ラジオ・チェックボックス */
.plugin-forms .custom-control-inline{margin-bottom:8px;}
.plugin-forms .custom-control-label{font-size:14px;color:var(--kt-ink-sub);}
.plugin-forms .custom-control-input:checked ~ .custom-control-label::before{background-color:var(--kt-indigo);border-color:var(--kt-indigo);}
.plugin-forms .custom-control-input:focus ~ .custom-control-label::before{box-shadow:0 0 0 3px rgba(74,144,217,.20);}
/* 送信ボタン */
.plugin-forms .form-group.text-center{margin-top:28px;margin-bottom:0;}
.plugin-forms .form-group.text-center .btn{border-radius:999px;padding:13px 34px;font-size:15px;}
/* --- ブログ --- */
/* CMS 側の「フレームデザインなし」設定で枠線は既に消してあるので、ここで
角丸カードを描き直す。一覧・記事詳細どちらも同じ card-body を通る。
⚠️ card-body には CMS が付与する .p-0（padding:0 !important）が乗っているので、
ここの padding は !important でないと効かない（2026-08-19、実機で余白ゼロを確認して判明） */
.plugin-blogs > .container > .card{border:none;background:transparent;}
.plugin-blogs > .container > .card > .card-body{background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:16px;padding:32px 36px !important;}
/* 記事タイトル。一覧では h2>a、詳細では h2 のみなので両対応 */
.plugin-blogs article header h2{font-size:21px;line-height:1.6;margin-bottom:8px;text-wrap:pretty;}
.plugin-blogs article header h2 a{color:var(--kt-indigo);text-decoration:none;}
.plugin-blogs article header h2 a:hover{color:var(--kt-indigo-light);}
.plugin-blogs .blog-posted-at{font-size:12.5px;font-weight:500;color:var(--kt-ink-muted);}
.plugin-blogs .blog-posted-at-date{margin-right:2px;}
/* 本文段落。法務ページの本文と同じ行間に揃える */
.plugin-blogs article p{font-size:14.5px;line-height:2.1;color:var(--kt-ink-sub);margin-bottom:14px;text-wrap:pretty;}
.plugin-blogs article p:empty{display:none;}
/* 一覧で記事が複数並ぶときの区切り線 */
.plugin-blogs article.cc_article + article.cc_article{margin-top:40px;padding-top:40px;border-top:1px solid var(--kt-border);}
/* いいねボタン。Bootstrap既定の枠線ボタンをサイトの丸ボタンへ */
.plugin-blogs .btn-link.border{border:1.5px solid var(--kt-border) !important;border-radius:999px;background:var(--kt-surface);color:var(--kt-ink-sub) !important;font-weight:700;padding:7px 18px;text-decoration:none;}
.plugin-blogs .btn-link.border:hover{background:var(--kt-water-pale);color:var(--kt-indigo) !important;}
.plugin-blogs .btn-link.border .badge-light{background:var(--kt-water-pale);color:var(--kt-indigo);font-weight:900;}
/* 記事詳細の「一覧へ」ボタン */
.plugin-blogs .btn-info{background:var(--kt-indigo);border-color:var(--kt-indigo);border-radius:999px;font-weight:700;padding:11px 26px;}
.plugin-blogs .btn-info:hover{background:var(--kt-indigo-light);border-color:var(--kt-indigo-light);}
/* タグ・ページャー（投稿が増えたときのため） */
.plugin-blogs footer .badge{background:var(--kt-water-pale);color:var(--kt-indigo);font-weight:700;font-size:12px;padding:6px 12px;border-radius:999px;margin-left:6px;}
.plugin-blogs .pagination{gap:6px;flex-wrap:wrap;}
.plugin-blogs .page-link{border:1.5px solid var(--kt-border);border-radius:10px;color:var(--kt-ink-sub);font-weight:700;padding:8px 14px;}
.plugin-blogs .page-link:hover{background:var(--kt-water-pale);color:var(--kt-indigo);}
.plugin-blogs .page-item.active .page-link{background:var(--kt-indigo);border-color:var(--kt-indigo);color:#fff;}
/* --- ブログ記事の本文パーツ（docs/articles/*.html で使う） ---
h2 は記事タイトルがプラグイン側で使うので、本文の見出しは h3 から。
リストは共通の .kt-list、囲みは .kt-legal-note がそのまま使える */
.plugin-blogs article h3{font-size:16.5px;font-weight:900;line-height:1.7;color:var(--kt-ink);margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--kt-water-light);}
.plugin-blogs article strong{color:var(--kt-ink);font-weight:900;}
.plugin-blogs article a{color:var(--kt-indigo);text-decoration:underline;text-underline-offset:3px;}
/* 記事冒頭のアイキャッチ（1200x630 を横幅いっぱいに）
⚠️ CMS の画像挿入UIから入れると class が img-fluid に置き換わり に包まれるので、
「本文の最初の段落の画像」も同じ見た目になるようにしてある。どちらの入れ方でも崩れない。
⚠️ 一覧ページでは本文がもう一段
で包まれる（記事詳細は article 直下）。
article 直下だけを見ていると一覧だけ角丸が当たらないので、両方書く
（2026-08-19、実機で確認。同じ本文でも一覧と詳細で入れ子の深さが違うのが原因） */
.kt-blog-eyecatch{display:block;width:100%;height:auto;border-radius:14px;margin:0 0 30px;}
.plugin-blogs article > p:first-of-type > img,
.plugin-blogs article > div > p:first-of-type > img{display:block;width:100%;height:auto;border-radius:14px;margin-bottom:16px;}
/* 計算式の1行。主役なので大きく・水色の面で */
.kt-blog-formula{background:var(--kt-water-pale);border-radius:12px;padding:16px 20px;margin:18px 0 20px;text-align:center;font-size:16px;font-weight:900;color:var(--kt-indigo);}
/* 出典と最終確認日。付録扱いで小さく */
.kt-blog-sources{margin-top:36px;padding-top:20px;border-top:1px solid var(--kt-border);}
.kt-blog-sources p,.plugin-blogs article .kt-blog-sources p{font-size:13px;line-height:1.9;color:var(--kt-ink-muted);margin-bottom:6px;}
/* 蔵太郎のひとこと。アプリのコメントカードと同型（挿絵88px＋吹き出し1〜2文）。
挿絵はCMSへアップした透過版を .kt-blog-hitokoto__img で置く（無くても崩れない） */
.kt-blog-hitokoto{display:flex;gap:16px;align-items:center;background:var(--kt-surface);border:1.5px solid var(--kt-border);border-radius:16px;padding:18px 22px;margin:28px 0 0;}
.kt-blog-hitokoto__img{flex:none;width:104px;height:104px;object-fit:contain;}
.kt-blog-hitokoto__label{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--kt-water);margin-bottom:6px;}
.plugin-blogs article .kt-blog-hitokoto p{margin-bottom:0;font-size:14.5px;color:var(--kt-ink);}
@media (max-width: 600px){
.kt-blog-hitokoto{flex-direction:column;text-align:center;gap:10px;padding:20px 18px;}
}
/* 記事末尾の出口ボタン。1記事に1つだけ */
.kt-blog-cta{text-align:center;margin:26px 0 6px;}
.plugin-blogs article .kt-blog-cta a{display:inline-block;background:var(--kt-indigo);color:#fff;text-decoration:none;font-weight:700;border-radius:999px;padding:13px 30px;font-size:15px;}
.plugin-blogs article .kt-blog-cta a:hover{background:var(--kt-indigo-light);}
/* レスポンシブ */
@media (max-width: 900px){
.plugin-faqs > .container > .card > .card-body,.plugin-forms > .container > .card > .card-body{padding:22px 20px;}
.plugin-blogs > .container > .card > .card-body{padding:22px 20px !important;}
.kt-legal{padding:32px 20px 56px;}
.kt-legal__title{font-size:24px;}
.kt-legal__layout{grid-template-columns:1fr;gap:24px;}
/* 1カラムでは目次を貼り付けない（本文の前に置かれるだけの箱にする） */
.kt-toc{position:static;}
.kt-nav,.kt-hero,.kt-shindan,.kt-concept,.kt-data,.kt-features,.kt-pricing,.kt-cta,.kt-footer{padding-left:20px;padding-right:20px;}
/* 診断は入力→結果の順に縦へ積む。狭い画面では結果が折り返しの下に来るので、
入力を1つ触るたびに結果へ目が戻る形になる */
.kt-shindan-grid{grid-template-columns:1fr;gap:20px;}
.kt-shindan h2{font-size:24px;text-wrap:balance;}
/* 日数は5つを等幅で1行に収める。折り返して「30日」だけが次の行に落ちると、
選択肢が5つあることが見た目から分からなくなる */
.kt-shindan-daybtns{gap:6px;}
.kt-shindan-daybtns button{flex:1 1 0;padding:9px 4px;font-size:13.5px;}
.kt-hero{grid-template-columns:1fr;}
.kt-hero h1{font-size:32px;}
.kt-hero-visual{flex-wrap:wrap;justify-content:center;}
.kt-phone{width:min(300px,80vw);}
.kt-mascot{margin-left:0;margin-top:80px;width:150px;}
.kt-mascot > img{width:150px !important;}
.kt-balloon{top:-58px;left:12px;}
.kt-data{grid-template-columns:1fr;}
.kt-steps{grid-template-columns:1fr;}
.kt-feature-grid{grid-template-columns:1fr;}
/* 料金は2枚とも同じ幅で縦に積む（有料側を下に置き、無料→有料の順で読ませる） */
.kt-plans{grid-template-columns:1fr;}
}
/* 固定ヘッダーは高さが変わると本文がめり込むので、狭い画面でもナビを1行に保つ */
@media (max-width: 760px){
.kt-nav-links{gap:14px;font-size:13px;}
.kt-nav-links a{white-space:nowrap;}
.kt-nav-kana{display:none;}
.kt-nav-name{white-space:nowrap;}
.kt-btn-nav{padding:9px 15px;font-size:12.5px;}
}
/* 640px以下。以前はボタン（.kt-btn-nav）だけ残して他を隠していたが、
2026-08-10 に「公開通知を受け取る」ボタンを撤去したので、そのままだと
スマホでナビが空になる。3項目を詰めて1行に収める方針へ変更した。
2026-08-19 に「ブログ」を足して4項目に。ロゴと項目名を一段小さくして
幅を作った（375px幅で確認。320px幅は3項目のときから既に折り返す仕様で、
今回もその対象外のまま）。⚠️ さらに増やすなら折りたたみの実装から要る */
@media (max-width: 640px){
.kt-nav-brand img{width:32px !important;height:32px !important;}
.kt-nav-brand{gap:6px;}
.kt-nav-name{font-size:16px;}
.kt-nav-links{gap:8px;font-size:11.5px;}
}