/* 単機能ツールと「計算の根拠」ページの共通の見た目(本体の色・形に合わせる) */
:root{
  --aqua:#5CD6D6; --aqua-light:#D3F5F5; --aqua-text:#1E7C80;
  --sky:#8EC9FF; --sky-light:#DDEEFF; --sky-text:#2E6FB0;
  --lilac:#C7B8FF; --lilac-light:#ECE6FF; --lilac-text:#5B4BB0;
  --pink-light:#FFE8F4; --pink-text:#B03A78;
  --bg:#F2FBFF; --card:#FFFFFF; --text:#2F4858; --muted:#728A9A; --border:#D5EEF5; --danger:#FF6B8A;
  --shadow:0 6px 24px rgba(92,170,214,.16),0 1px 3px rgba(92,170,214,.12);
  --font:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Meiryo UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--text);background:var(--bg);min-height:100vh;line-height:1.6;
  background-image:radial-gradient(1100px 520px at 0% -10%,rgba(92,214,214,.30),transparent 60%),radial-gradient(900px 520px at 100% 0%,rgba(199,184,255,.38),transparent 60%);background-attachment:fixed}
button,input,select{font-family:inherit;color:inherit}
.wrap{max-width:860px;margin:0 auto;padding:16px 16px 60px}
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.top a.home{font-weight:800;color:var(--aqua-text);text-decoration:none;font-size:14px}
h1{font-size:22px;margin:0 0 6px;font-weight:800}
.lead{font-size:14px;color:#5D7787;margin:0 0 14px}
.card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:14px}
.card h2{font-size:16px;margin:0 0 10px;font-weight:800}
.fields{display:grid;gap:10px 12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f label{font-size:12px;font-weight:700;color:var(--muted)}
.inp{display:flex;align-items:center;background:#F6FBFE;border-radius:12px;box-shadow:0 0 0 1.5px var(--border) inset}
.inp:focus-within{box-shadow:0 0 0 2px var(--aqua) inset;background:#fff}
.inp input,.inp select{border:0;background:transparent;outline:0;padding:9px 10px;font-size:15px;width:100%;min-width:0}
.inp .u{font-size:12px;color:var(--muted);padding-right:10px;white-space:nowrap}
.big{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 10px}
.kpi{flex:1 1 180px;background:linear-gradient(160deg,#fff,#F4FCFF);border-radius:18px;padding:12px 14px;box-shadow:0 0 0 1.5px var(--border) inset}
.kpi .l{font-size:12px;color:var(--muted);font-weight:700}
.kpi .v{font-size:24px;font-weight:800;color:var(--aqua-text)}
.kpi .v small{font-size:13px;margin-left:2px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:6px 8px;border-bottom:1px solid #EDF5F9;text-align:right}
th:first-child,td:first-child{text-align:left}
thead th{background:#F4FBFF;font-weight:800}
tr.on td{background:var(--lilac-light);font-weight:800}
.note{font-size:12px;color:var(--muted);line-height:1.7;margin:8px 0 0}
.btn{border:0;cursor:pointer;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(120deg,#46CACA,#7DB8FF 55%,#B3A1FF);box-shadow:0 4px 14px rgba(125,184,255,.45)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.tools a{font-size:13px;font-weight:700;color:var(--lilac-text);background:var(--lilac-light);border-radius:999px;padding:6px 12px;text-decoration:none}
.foot{font-size:11.5px;color:var(--muted);margin-top:24px}
/* 感想を送るボタン(右下)と、入力を初期値に戻すボタン */
.fb-fab{position:fixed;right:16px;bottom:16px;z-index:900;display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;background:#fff;color:var(--lilac-text);border:2px solid var(--lilac);box-shadow:0 6px 18px rgba(91,75,176,.18);font-size:13px;font-weight:800;text-decoration:none}
.fb-fab:hover{background:var(--lilac-light)}
body.has-fb .wrap{padding-bottom:84px}
@media (max-width:600px){.fb-fab{right:12px;bottom:12px;padding:8px 13px;font-size:12px}}
.mem-reset{margin-left:auto;border:0;background:none;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;padding:4px 2px;font-family:inherit}
.mem-reset:hover{color:var(--aqua-text);text-decoration:underline}
.mem-note{font-size:12px;font-weight:700;color:var(--aqua-text);background:var(--aqua-light);border-radius:999px;padding:3px 10px}
/* スマホ: 入力欄を16pxにして、iPhoneで入力のたびに画面が拡大されないようにする */
@media (max-width:640px){.inp input,.inp select{font-size:16px;padding:10px}.wrap{padding:12px 12px 60px}}
/* 判定のひとこと・切り替えボタン・表の横スクロール(住宅ローン控除の2つのツール) */
.verdict{border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.7;font-weight:700;background:var(--aqua-light);color:var(--aqua-text);margin:4px 0 10px}
.verdict.warn{background:#FFF6E0;color:#8A5A00}
.verdict.bad{background:#FFE8EE;color:#B0345A}
.seg{display:inline-flex;flex-wrap:wrap;background:#EEF6FA;border-radius:16px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;border-radius:13px;padding:7px 12px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
.seg button.on{background:#fff;color:var(--aqua-text);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tbl-x{overflow-x:auto}
.tbl-x table{min-width:520px}
.tbl-x td,.tbl-x th{white-space:nowrap}
td.neg{color:#B0345A;font-weight:800}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:4px 0}
.chk input{width:18px;height:18px;accent-color:var(--aqua)}
details.more{margin-top:8px;font-size:12.5px;color:#5D7787;line-height:1.7}
details.more summary{cursor:pointer;font-weight:800;color:var(--lilac-text)}
/* たたむ枠の中の入力欄・見出しは、ふつうの文字色(薄い説明文の色を引き継がない) */
details.more .inp input,details.more .inp select,details.more h3{color:var(--text)}
details.more .fields label{color:var(--muted)}
/* ツールの一覧(tools.html)と、各ツールの「関連するツール」 */
.tools a.all{background:#fff;color:var(--aqua-text);box-shadow:0 0 0 1.5px var(--aqua-light) inset}
.tool-group{margin-top:14px}
.tg-h{font-size:14px;font-weight:800;margin:0 0 8px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.tool-tile{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:12px 14px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 1.5px var(--border) inset,0 2px 10px rgba(92,170,214,.08);text-decoration:none;color:var(--text)}
.tool-tile:hover{box-shadow:0 0 0 2px var(--aqua) inset,0 6px 16px rgba(92,170,214,.18)}
.tt-ic{grid-row:span 2;font-size:24px;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,#E3FAF5,#EEF2FF)}
.tt-t{font-size:14.5px;font-weight:800}
.tt-d{font-size:12px;color:#5D7787;line-height:1.5}
/* 本体(ライフプラン)へ誘うカード */
.cta{margin:0 0 14px;padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,#E3FAF5 0%,#EEF2FF 55%,#FFF0F7 100%);box-shadow:0 0 0 1.5px #DCEBFF inset,var(--shadow)}
.cta-t{font-size:15.5px;font-weight:800;color:var(--lilac-text)}
.cta p{font-size:13.5px;line-height:1.75;color:#3F5B6B;margin:6px 0 12px}
.cta .btn{display:inline-block;text-decoration:none}
.cta-s{display:block;margin-top:8px;font-size:11.5px;color:var(--muted)}

/* ===== ダークモード(案A「ミッドナイト・ミント」)。本体の設定タブの「表示」と同じ設定で切り替わる ===== */
@media screen{
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1A24; --card:#16242F; --text:#E6F4F7; --muted:#8FA9B6; --note:#9DB4BF; --border:#24404D;
  --aqua-light:#123A3D; --sky-light:#15304A; --lilac-light:#28254A; --pink-light:#3A1F33; --lemon-light:#3A3018;
  --aqua-text:#7FE3E0; --sky-text:#9CCBFF; --lilac-text:#C9BCFF; --pink-text:#FF9BCB; --lemon-text:#FFD27A;
  --shadow:0 6px 24px rgba(0,0,0,.35),0 0 0 1px rgba(92,214,214,.10);
}
:root[data-theme="dark"] body{background-image:none}
:root[data-theme="dark"] .fb-fab{background:#26333e}
/* プルダウンを開いたときの一覧(ブラウザによっては白地に薄い文字になるので、色をはっきり決める) */
:root[data-theme="dark"] select option{background-color:#16242F;color:#E6F4F7}
:root[data-theme="dark"] select option:checked{background-color:#2A6B6E;color:#fff}
:root[data-theme="dark"] select option:disabled{color:#5E7684}
:root[data-theme="dark"] .chart svg [stroke="#E3EEF4"],:root[data-theme="dark"] .chart svg [stroke="#E8F2F7"]{stroke:#22394A}
:root[data-theme="dark"] .inp{background:#26333d}
:root[data-theme="dark"] .inp:focus-within{background:#26333e}
:root[data-theme="dark"] .kpi{background:linear-gradient(160deg,#26333e,#26333e)}
:root[data-theme="dark"] th,:root[data-theme="dark"] td{border-bottom:1px solid #25333d}
:root[data-theme="dark"] thead th{background:#26333e}
:root[data-theme="dark"] .verdict.warn{background:#3b464b;color:#cab58c}
:root[data-theme="dark"] .verdict.bad{background:#3b434e;color:#dba4b5}
:root[data-theme="dark"] .seg{background:#25333d}
:root[data-theme="dark"] .seg button.on{background:#26333e}
:root[data-theme="dark"] td.neg{color:#dba4b5}
:root[data-theme="dark"] .tools a.all{background:#26333e}
:root[data-theme="dark"] .tool-tile{background:#26333e}
:root[data-theme="dark"] .tt-ic{background:linear-gradient(140deg,#37464f,#394550)}
:root[data-theme="dark"] .cta{background:linear-gradient(135deg,#37464f 0%,#394550 55%,#3b454f 100%);box-shadow:0 0 0 1.5px #364450 inset,var(--shadow)}
:root[data-theme="dark"] .cta p{color:var(--text)}
}