/* 手取りナビ v3 — モバイルファースト / trustworthy fintech */
:root {
  --ink: #182338;
  --ink-soft: #566178;
  --ink-faint: #8592a6;
  --bg: #eef2f8;
  --bg-tint: #e7edf7;
  --card: #ffffff;

  /* ブランド(信頼の青) */
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --brand-deep: #1e3a8a;
  --grad: linear-gradient(135deg, #2f6bf6 0%, #4f46e5 100%);
  --accent: #eef4ff;

  /* 手取り(手元に残るお金=緑) */
  --take: #0e9f7e;
  --take-dark: #0b7d63;
  --take-grad: linear-gradient(140deg, #12b98e 0%, #0e9f7e 55%, #0b7a68 100%);

  /* 内訳の色 */
  --c-social: #3b82f6;   /* 社会保険料 */
  --c-tax: #f59e0b;      /* 税金 */
  --c-take: #0e9f7e;     /* 手取り */

  --line: #e3e9f2;
  --line-soft: #eef2f8;
  --minus: #d94848;
  --warn-bg: #fff8ea;
  --warn-line: #f0dcab;
  --warn-ink: #6a5220;
  --new: #e0472a;

  --radius: 18px;
  --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(22, 33, 58, .05), 0 12px 34px -14px rgba(22, 33, 58, .20);
  --shadow-soft: 0 1px 2px rgba(22, 33, 58, .04), 0 6px 18px -10px rgba(22, 33, 58, .14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 50% -280px, #dbe7fb 0%, rgba(219,231,251,0) 70%),
    var(--bg);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px 76px; }

/* ヘッダー */
header.site {
  background: var(--grad);
  padding: 15px 16px;
  box-shadow: 0 8px 24px -14px rgba(37, 99, 235, .55);
  position: relative;
  overflow: hidden;
}
header.site::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 160px at 88% -40px, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
header.site .inner { max-width: 720px; margin: 0 auto; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; position: relative; }
.logo { font-size: 1.32rem; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: .02em; }
.logo::before { content: "💴 "; }
.tagline { font-size: .77rem; color: rgba(255, 255, 255, .9); font-weight: 600; }

/* 見出し */
h1 { font-size: 1.56rem; margin: 32px 0 8px; line-height: 1.42; letter-spacing: .01em; font-weight: 900; }
h1::after {
  content: ""; display: block; width: 60px; height: 4px;
  background: var(--grad); border-radius: 3px; margin-top: 12px;
}
.lede { color: var(--ink-soft); font-size: .95rem; margin: 16px 0 14px; }
.lede strong { color: var(--brand-dark); }

/* 安心バッジ */
.trust {
  display: inline-flex; align-items: center; gap: 7px;
  background: #eafaf3; border: 1px solid #bfead8; color: #0b7357;
  font-size: .8rem; font-weight: 800; letter-spacing: .01em;
  padding: 7px 13px; border-radius: 999px; margin-bottom: 22px;
}
.trust::before { content: "🔒"; font-size: .95rem; }

/* カード */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.card h2 { letter-spacing: .01em; font-weight: 900; }
.card-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.12rem; font-weight: 900; margin-bottom: 14px;
}
.card-title .ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: 1rem;
  background: var(--accent); color: var(--brand-dark);
}

/* フォーム */
.form-card { position: relative; }
.field { margin-bottom: 17px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-weight: 800; font-size: .93rem; margin-bottom: 7px; }
.field .hint { font-weight: 500; color: var(--ink-soft); font-size: .78rem; }
input[type="number"], select {
  width: 100%;
  font-size: 1.05rem;
  padding: 13px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fafbfe;
  color: var(--ink);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  cursor: pointer;
}
input[type="number"]:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 102, 224, .18);
  background: #fff;
}
.field-lead label { font-size: 1rem; }
.field-lead input { font-size: 1.22rem; font-weight: 800; padding: 15px 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; gap: 0; } .row2 .field { margin-bottom: 17px; } }

/* 詳細トグル */
.details-toggle { margin: 4px 0 18px; border-top: 1px dashed var(--line); padding-top: 16px; }
.details-toggle > summary {
  cursor: pointer; font-weight: 800; font-size: .92rem; color: var(--brand-dark);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.details-toggle > summary::-webkit-details-marker { display: none; }
.details-toggle > summary::before {
  content: "＋"; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 7px; font-size: .95rem;
  background: var(--accent); color: var(--brand-dark); transition: transform .2s;
}
.details-toggle[open] > summary::before { content: "－"; }
.details-body { margin-top: 14px; }

/* ボタン */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  background: var(--grad); color: #fff;
  font-size: 1.14rem; font-weight: 900;
  padding: 16px; border: none; border-radius: 13px;
  cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .5);
  transition: transform .12s, box-shadow .12s, filter .12s;
  letter-spacing: .04em;
}
.btn::after { content: "→"; font-weight: 900; transition: transform .15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 26px -6px rgba(37, 99, 235, .58); }
.btn:hover::after { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

/* 結果 */
#result { display: none; }
#result.show { display: block; animation: rise .4s cubic-bezier(.2,.7,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.takehome {
  background: var(--take-grad);
  color: #fff;
  border-radius: var(--radius);
  text-align: center;
  padding: 24px 14px 22px;
  margin-bottom: 18px;
  box-shadow: 0 16px 34px -14px rgba(14, 159, 126, .62);
  position: relative; overflow: hidden;
}
.takehome::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(340px 150px at 82% -30px, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
}
.takehome > * { position: relative; }
.takehome .label { font-size: .88rem; opacity: .95; font-weight: 700; letter-spacing: .02em; }
.takehome .value { font-size: 2.7rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }
.takehome .value small { font-size: 1.1rem; font-weight: 800; }
.takehome .ratio {
  display: inline-block; margin-top: 12px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: 5px 14px;
  font-size: .84rem; font-weight: 700; letter-spacing: .01em;
}

/* 構成バー */
.comp { margin-bottom: 20px; }
.comp-title { font-size: .9rem; font-weight: 800; color: var(--ink-soft); margin-bottom: 9px; }
.comp-title b { color: var(--ink); }
.compbar {
  display: flex; width: 100%; height: 26px; border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(22,33,58,.05); background: var(--line-soft);
}
.compbar .seg { height: 100%; transition: width .6s cubic-bezier(.2,.7,.2,1); min-width: 0; }
.seg-take { background: linear-gradient(180deg, #14b394, var(--c-take)); }
.seg-social { background: linear-gradient(180deg, #4f90f7, var(--c-social)); }
.seg-tax { background: linear-gradient(180deg, #fbbf3c, var(--c-tax)); }
.complegend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; padding: 0; }
.complegend li { display: flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.complegend b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 800; }
.complegend .dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.dot-take { background: var(--c-take); }
.dot-social { background: var(--c-social); }
.dot-tax { background: var(--c-tax); }

/* 内訳テーブル */
.breakdown-head { font-size: .95rem; font-weight: 900; margin-bottom: 6px; }
table.breakdown { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.breakdown th, table.breakdown td { padding: 11px 4px; border-bottom: 1px solid var(--line-soft); text-align: left; font-weight: 600; vertical-align: top; }
table.breakdown th { font-weight: 700; }
table.breakdown td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.breakdown td.num.minus { color: var(--minus); }
table.breakdown tr.group th {
  font-size: .78rem; font-weight: 900; letter-spacing: .05em;
  color: var(--brand-dark); text-transform: none;
  padding: 14px 4px 5px; border-bottom: 2px solid var(--line);
}
table.breakdown tr.group.tax th { color: #b5750a; }
table.breakdown tr.group th .g-ico { margin-right: 5px; }
table.breakdown tr.total th, table.breakdown tr.total td {
  border-top: 2.5px solid var(--take); border-bottom: none;
  font-weight: 900; font-size: 1.12rem; color: var(--take-dark);
  padding-top: 14px;
}
table.breakdown tr.employer th, table.breakdown tr.employer td {
  color: var(--ink-faint); font-size: .84rem; font-weight: 600;
  border-bottom: none; padding-top: 12px;
}
table.breakdown tr.employer td { color: var(--ink-soft); }
.sub { color: var(--ink-soft); font-size: .78rem; font-weight: 500; }
.badge-new {
  display: inline-block; vertical-align: 1px; margin-left: 5px;
  background: var(--new); color: #fff; font-size: .64rem; font-weight: 900;
  letter-spacing: .04em; padding: 1px 6px; border-radius: 5px;
}

/* 注意書き */
.note {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: .82rem;
  color: var(--warn-ink);
  margin-top: 16px;
}
.note strong { color: #7a5a12; }

/* CTA(診断への導線) */
.cta-shindan {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px;
  background: linear-gradient(135deg, #fff6f2, #ffeee7);
  border: 2px solid #f6c3ad;
  color: #bd4a24;
  border-radius: 13px;
  text-align: center;
  padding: 15px 14px;
  font-weight: 900; font-size: 1rem;
  text-decoration: none;
  transition: background .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 6px 16px -10px rgba(189, 74, 36, .5);
}
.cta-shindan:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(189, 74, 36, .55); }

/* 記事リンクリスト */
.linklist { list-style: none; padding: 0; }
.linklist li { margin: 0; }
.linklist li + li { border-top: 1px solid var(--line-soft); }
.linklist a {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 6px; color: var(--brand-dark); font-weight: 700;
  text-decoration: none; font-size: .94rem; transition: color .12s, padding .12s;
}
.linklist a::before { content: "📄"; font-size: .95rem; flex: 0 0 auto; }
.linklist a::after { content: "›"; margin-left: auto; color: var(--ink-faint); font-weight: 900; font-size: 1.2rem; transition: transform .15s; }
.linklist a:hover { color: var(--brand); }
.linklist a:hover::after { transform: translateX(3px); }

/* 2026の変更点 */
.changes { list-style: none; padding: 0; }
.changes li {
  position: relative; padding: 11px 12px 11px 40px; margin-bottom: 9px;
  background: var(--accent); border: 1px solid #dce8fb; border-radius: var(--radius-sm);
  font-size: .9rem;
}
.changes li:last-child { margin-bottom: 0; }
.changes li::before {
  content: "✓"; position: absolute; left: 11px; top: 11px;
  width: 20px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: .72rem; font-weight: 900;
}
.changes li strong { color: var(--brand-deep); }

/* 汎用リンク(本文中) */
.card ul a, .card ol a, .card p a, .prose a { color: var(--brand-dark); font-weight: 700; text-decoration-color: rgba(37, 99, 235, .35); text-underline-offset: 2px; }
.card ul a:hover, .card ol a:hover, .card p a:hover, .prose a:hover { text-decoration-color: var(--brand); }

/* フッター */
footer.site {
  border-top: 1px solid var(--line);
  background: #fff;
  margin-top: 48px;
  padding: 28px 16px;
  font-size: .8rem;
  color: var(--ink-soft);
}
footer.site .inner { max-width: 720px; margin: 0 auto; }
footer.site a { color: var(--ink-soft); }
footer.site ul { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
footer.site ul a { font-weight: 700; }

/* ===== 診断ページ ===== */
.q { margin-bottom: 22px; }
.q:last-of-type { margin-bottom: 8px; }
.q .qtitle { font-weight: 900; margin-bottom: 10px; font-size: 1rem; display: flex; gap: 9px; align-items: baseline; }
.q .qnum {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 8px;
  background: var(--grad); color: #fff; display: inline-grid; place-items: center;
  font-size: .82rem; font-weight: 900; align-self: center;
}
.q .qhint { font-size: .78rem; font-weight: 600; color: var(--ink-faint); }
.opts label {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 9px; cursor: pointer; font-size: .95rem; font-weight: 600;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.opts label:hover { border-color: #b9cef4; background: #f7faff; }
.opts label:has(input:checked) { border-color: var(--brand); background: var(--accent); box-shadow: 0 0 0 3px rgba(37,102,224,.12); }
.opts input { width: 19px; height: 19px; margin: 0; accent-color: var(--brand); flex: 0 0 auto; }

.cause {
  border-left: 5px solid var(--brand); background: linear-gradient(90deg, var(--accent), #fff 70%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 16px; margin-bottom: 12px;
  box-shadow: var(--shadow-soft);
}
.cause:first-child { border-left-color: var(--take); background: linear-gradient(90deg, #eafaf3, #fff 70%); }
.cause h3 { font-size: 1.02rem; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.cause:first-child h3::before { content: "① 最有力"; font-size: .66rem; font-weight: 900; color: #fff; background: var(--take); padding: 2px 8px; border-radius: 6px; }
.cause p { font-size: .9rem; }
.cause a { color: var(--brand-dark); font-weight: 700; }

/* ===== 記事ページ ===== */
.article-page { max-width: 680px; }
.article-page h1 { font-size: 1.44rem; }
.article-page .card { font-size: .97rem; line-height: 1.85; }
.article-page .card h2 {
  font-weight: 900; margin: 2px 0 10px; letter-spacing: .01em; line-height: 1.5;
  padding-left: 12px; border-left: 4px solid var(--brand);
}
.article-page .card p { margin-bottom: 12px; }
.article-page .card p:last-child { margin-bottom: 0; }
.article-page .card ul { padding-left: 1.25em; margin-top: 8px; }
.article-page .card ul li { margin-bottom: 8px; }
.article-page .card ul li:last-child { margin-bottom: 0; }
.article-page .card table { width: 100%; border-collapse: collapse; margin-top: 6px; font-variant-numeric: tabular-nums; }
.article-page .card table th, .article-page .card table td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; font-size: .92rem; }
.article-page .card table th { color: var(--ink-soft); font-weight: 700; }

/* 番号付きチェックリスト */
ol.steps { padding-left: 0; list-style: none; counter-reset: step; }
ol.steps > li {
  position: relative; padding: 3px 0 14px 46px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft); counter-increment: step;
}
ol.steps > li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 31px; height: 31px; border-radius: 9px; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: .98rem; font-weight: 900;
  box-shadow: 0 4px 10px -4px rgba(37,99,235,.5);
}
ol.steps > li strong { color: var(--brand-deep); }

.crumb { font-size: .82rem; color: var(--ink-faint); margin: 20px 0 -6px; }
.crumb a { color: var(--ink-soft); font-weight: 700; text-decoration: none; }
.crumb a:hover { color: var(--brand); }

.back-home {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  color: var(--brand-dark); font-weight: 800; text-decoration: none; font-size: .92rem;
}
.back-home::before { content: "←"; font-weight: 900; }
.back-home:hover { color: var(--brand); }