:root {
  --bg: #f3f7fa;
  --surface: #ffffff;
  --surface-2: #eaf5f6;
  --ink: #17202a;
  --muted: #5d6978;
  --line: #d9e1ea;
  --accent: #0d6b72;
  --accent-2: #24539b;
  --accent-soft: #dff2ef;
  --warn: #9f6b12;
  --good: #21764b;
  --shadow: 0 14px 32px rgba(23, 32, 42, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  line-height: 1.75;
}
a { color: var(--accent-2); text-decoration-thickness: .08em; text-underline-offset: .18em; }
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav {
  max-width: 1120px;
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 18px;
}
.brand { color: var(--ink); font-weight: 800; text-decoration: none; letter-spacing: .02em; }
.nav-links { display: flex; gap: 18px; align-items: center; font-size: 14px; }
.nav-links a { color: var(--muted); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(13, 107, 114, .13), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #edf7f7 52%, #edf3fb 100%);
  border-bottom: 1px solid var(--line);
}
.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 54px 24px 50px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .8fr);
  gap: 34px;
  align-items: center;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}
h1, h2, h3 { line-height: 1.35; }
h1 { margin: 0 0 16px; font-size: clamp(30px, 5vw, 52px); letter-spacing: 0; }
.hero-title {
  max-width: 720px;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.25;
  letter-spacing: .02em;
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero-title-main {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero-title-break { display: block; }
h2 { margin: 0 0 18px; font-size: 25px; }
h3 { margin: 0 0 8px; font-size: 18px; }
.lead { margin: 0 0 24px; color: var(--muted); font-size: 17px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  font-weight: 800;
}
.button.secondary { background: #fff; color: var(--accent); }
.button.small { min-height: 50px; padding: 13px 20px; font-size: 14px; }
.summary-card, .tool-card, .card, .cta-card, .simple-calc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.simple-calc { padding: 22px; }
.simple-calc h2 { margin-bottom: 6px; }
.simple-calc .subtext { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.simple-result {
  margin: 18px 0;
  padding: 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e6f6f3, #edf3fb);
  border: 1px solid #c2ddd9;
}
.simple-result span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.simple-result strong { display: block; font-size: clamp(30px, 4vw, 42px); line-height: 1.2; color: var(--accent); }
.simple-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.simple-metrics div { padding: 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); }
.simple-metrics b { display: block; font-size: 16px; }
.calc-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.summary-card { padding: 24px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stat { padding: 14px; background: var(--surface-2); border-radius: 8px; }
.stat span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.stat strong { display: block; font-size: 24px; }
.main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 24px 56px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid #c7dee1;
  border-radius: 8px;
  background: #f2fbfa;
  color: var(--muted);
  font-size: 13px;
}
.meta-strip b { color: var(--ink); }
.section { margin: 0 0 36px; }
.section.narrow { max-width: 860px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { padding: 20px; box-shadow: none; }
.tool-layout { display: grid; grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: start; }
.tool-card { padding: 22px; }
.field { margin: 0 0 18px; }
.field label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-weight: 800; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
select, input[type="number"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  font: inherit;
}
.result-panel { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.result-main { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.metric { padding: 16px; border-radius: 8px; background: #eef6f7; }
.metric span { display: block; color: var(--muted); font-size: 13px; font-weight: 800; }
.metric strong { display: block; font-size: clamp(24px, 4vw, 36px); line-height: 1.25; }
.breakdown { width: 100%; border-collapse: collapse; background: #fff; }
.breakdown th, .breakdown td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; }
.breakdown td:last-child, .breakdown th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.source-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.source-table th, .source-table td { border-bottom: 1px solid var(--line); padding: 12px; text-align: left; vertical-align: top; }
.source-table th { background: var(--surface-2); }
.notice { border-left: 4px solid var(--warn); background: #fff8e8; padding: 14px 16px; border-radius: 8px; color: #4f3a14; }
.answer { background: #e9f6f3; border: 1px solid #b9dad2; padding: 18px; border-radius: 8px; }
.answer strong { font-size: 24px; }
.section:has(.cta-grid) {
  margin-bottom: 30px;
  padding: 18px;
  border-radius: 8px;
  background: #edf8f5;
  border: 1px solid #cfe5df;
}
.cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.cta-grid > .affiliate-pr-label { grid-column: 1 / -1; }
.cta-grid-single { grid-template-columns: minmax(0, 680px); justify-content: start; }
.inline-cta {
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #cfe5df;
  background: #edf8f5;
}
.inline-cta h2 { font-size: 18px; margin-bottom: 10px; }
.cta-card {
  padding: 20px;
  box-shadow: 0 12px 26px rgba(23, 32, 42, .08);
  border: 1px solid #c8dde0;
  border-top: 9px solid var(--accent);
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
}
.cta-card h3 { margin-bottom: 8px; font-size: 19px; }
.cta-card p { color: var(--muted); margin: 0 0 10px; }
.cta-card .button {
  margin-top: auto;
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.cta-card .button:hover { filter: brightness(.96); }
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.pill-list a { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: #fff; text-decoration: none; }
.related-links {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.related-links h2 { margin-bottom: 12px; font-size: 20px; }
.wall-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wall-card {
  display: block;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: var(--ink);
}
.wall-card strong { display: block; font-size: 24px; color: var(--accent); }
.wall-card span { color: var(--muted); font-size: 13px; }
.income-page { max-width: 960px; }
.income-header { padding: 28px 30px; border-top: 5px solid var(--accent); border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(23, 32, 42, .07); }
.income-header h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.3; }
.income-answer { margin-top: 20px; padding: 22px; border: 1px solid #c8dde0; border-radius: 8px; background: #eef8f6; }
.income-answer-label { margin: 0 0 4px; color: var(--muted); font-weight: 800; }
.income-answer strong { display: block; color: var(--accent-dark); font-size: clamp(27px, 4vw, 38px); line-height: 1.25; }
.income-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.income-metrics span { padding: 10px; border-radius: 6px; background: #fff; color: var(--muted); font-size: 13px; }
.income-metrics b { display: block; margin-top: 3px; color: var(--ink); font-size: 16px; }
.income-point-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.income-point { padding: 18px; border: 1px solid var(--line); border-top: 4px solid #6faeb0; border-radius: 8px; background: #fff; }
.income-point p { margin-bottom: 0; color: var(--muted); }
.income-story { padding-top: 4px; }
.income-story .check-list { margin-top: 16px; }
.income-sources { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #f7faf9; }
.income-directory { margin-top: 24px; }
.income-group { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.income-group h3 { color: var(--accent-dark); }
.income-link-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.income-link { display: flex; min-height: 42px; align-items: center; justify-content: center; padding: 8px; border: 1px solid #c8dde0; border-radius: 6px; background: #f6fbfa; color: var(--ink); font-weight: 800; text-align: center; text-decoration: none; }
.income-link:hover { border-color: var(--accent); color: var(--accent-dark); }
.home-income-shortcuts { margin-top: 14px; }
.home-topic-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.home-topic-links a { padding: 16px 18px; border: 1px solid #c8dde0; border-radius: 8px; background: #f6fbfa; color: var(--ink); text-decoration: none; }
.home-topic-links strong, .home-topic-links span { display: block; }
.home-topic-links strong { color: var(--accent); }
.home-topic-links span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.section-link { margin: 16px 0 0; font-weight: 800; }
.section-link a { color: var(--accent); }
.hub-link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
  padding: 20px 22px;
  border: 1px solid #b9dad2;
  border-left: 7px solid var(--accent);
  border-radius: 8px;
  background: #f2fbfa;
  color: var(--ink);
}
.hub-link-card h3 { margin: 0 0 4px; color: var(--accent); font-size: 20px; }
.hub-link-card p { margin: 0; color: var(--muted); font-size: 14px; }
.hub-link-button { flex: 0 0 auto; min-width: 148px; background: #fff; }
.cta-intro { margin: -6px 0 14px; color: var(--muted); }
.point-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.point-card { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.point-card h3 { color: var(--accent); }
.check-list { padding: 0; margin: 0; list-style: none; }
.check-list li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid var(--line); }
.check-list li::before { content: "✓"; position: absolute; left: 4px; color: var(--good); font-weight: 800; }
.key-note { padding: 16px 18px; border-left: 5px solid var(--accent); border-radius: 8px; background: #eef7f7; }
.small-note { color: var(--muted); font-size: 14px; }
.article-main { max-width: 960px; }
.l3-page { max-width: 960px; }
.l3-header { padding: 28px 30px; border-top: 5px solid var(--accent); border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgba(23, 32, 42, .07); }
.l3-header h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.3; }
.l3-conclusion { margin-top: 18px; padding: 18px 20px; border-left: 5px solid var(--accent); border-radius: 8px; background: #eef8f6; }
.l3-point-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.l3-point-grid article { padding: 17px; border: 1px solid var(--line); border-top: 4px solid #6faeb0; border-radius: 8px; background: #fff; }
.l3-point-grid h3 { font-size: 17px; }
.l3-point-grid p { margin: 0; color: var(--muted); }
.l3-practice { padding: 22px; border: 1px solid #d4e3e1; border-radius: 8px; background: #f7fbfa; }
.l3-caution { padding: 20px; border-left: 5px solid var(--warn); border-radius: 8px; background: #fff8e8; }
.cta-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-header { max-width: 900px; }
.article-header h1 { font-size: clamp(30px, 4.5vw, 46px); }
.kabe-hero {
  max-width: none;
  padding: 30px 32px;
  border-top: 5px solid var(--accent);
  border-bottom: 1px solid #c7dee1;
  border-radius: 8px;
  background: #f8fcfc;
}
.kabe-title { max-width: 850px; font-size: clamp(32px, 4.2vw, 44px); line-height: 1.28; word-break: keep-all; }
.kabe-title-line { display: block; }
.kabe-title-amounts { display: flex; flex-wrap: wrap; column-gap: .12em; color: #174d57; font-size: .88em; }
.kabe-title-amounts .nowrap + .nowrap::before { content: "・"; }
.nowrap { white-space: nowrap; }
.kabe-hero .lead { max-width: 780px; margin-bottom: 20px; }
.kabe-hero .meta-strip { margin-bottom: 16px; background: #eaf7f5; }
.kabe-hero .notice { margin-bottom: 0; background: #fff9ed; border-left-color: #ad7b24; }
.kabe-key-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.kabe-key-grid article { padding: 18px; border: 1px solid #cddfe2; border-top: 4px solid var(--accent); border-radius: 8px; background: #fff; }
.kabe-key-grid h3 { margin: 8px 0; font-size: 18px; }
.kabe-key-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.kabe-key-number { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.kabe-wall-table .wall-amount { display: inline-block; color: var(--accent); font-size: 19px; font-weight: 800; white-space: nowrap; }
.wall-type { display: inline-flex; margin: 0 8px 5px 0; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.wall-type-tax { color: #24539b; background: #eaf1fb; }
.wall-type-social { color: #0d6b72; background: #e2f4f1; }
.wall-type-family { color: #76571e; background: #faf1dc; }
.kabe-faq { padding: 24px; border: 1px solid #d5e2e6; border-radius: 8px; background: #f6f9fa; }
.faq-grid { display: grid; gap: 12px; }
.faq-card { padding: 18px 20px; border: 1px solid #d9e3e6; border-radius: 8px; background: #fff; }
.faq-card.qa-card h3, .faq-card.qa-card p { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.faq-card h3 { margin-bottom: 10px; font-size: 17px; }
.faq-card p { margin: 0; color: var(--muted); line-height: 1.8; }
.faq-card h3 span, .faq-card p span { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; font-weight: 800; }
.faq-card h3 span { color: #fff; background: var(--accent); }
.faq-card p span { color: var(--accent); background: var(--accent-soft); }
.situation-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.situation-card { box-sizing: border-box; min-width: 0; padding: 18px 20px; border: 1px solid #d9e3e6; border-radius: 8px; background: #fff; box-shadow: 0 8px 22px rgba(17, 81, 90, .06); }
.situation-card h3 { margin: 0 0 10px; color: var(--text); font-size: 17px; line-height: 1.55; }
.situation-card p { margin: 0; color: var(--muted); line-height: 1.85; }

.kabe-sources { padding: 24px; border: 1px solid #d4e0e4; border-radius: 8px; background: #fff; }
.source-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.source-heading h2, .source-heading .eyebrow { margin-bottom: 0; }
.source-heading > p { max-width: 410px; margin: 0; color: var(--muted); font-size: 14px; }
.source-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.source-card { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #f9fbfc; }
.source-card h3 { margin-bottom: 5px; font-size: 16px; }
.source-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.source-disclaimer { margin: 18px 0 14px; padding: 13px 15px; border-left: 4px solid var(--accent); background: #eef7f7; color: var(--muted); font-size: 13px; }
.source-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.source-chip { display: inline-flex; min-height: 42px; align-items: center; padding: 8px 13px; border: 1px solid #b9d4d6; border-radius: 8px; background: #fff; color: var(--accent); font-size: 14px; font-weight: 800; text-decoration: none; }
.article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.article-grid > div { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.article-grid h2 { font-size: 21px; }
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll table { min-width: 680px; }
.source-list { padding-left: 1.25rem; }
.source-list li { margin-bottom: 10px; }
.footer { background: #14212b; color: #d9e1ea; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 28px 24px; font-size: 13px; }
.footer a { color: #fff; }
@media (max-width: 820px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .hero-inner, .tool-layout { grid-template-columns: 1fr; }
  .grid, .cta-grid, .wall-grid { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .point-grid { grid-template-columns: 1fr; }
  .kabe-key-grid, .source-card-grid, .income-point-grid, .income-metrics, .l3-point-grid, .cta-grid-three { grid-template-columns: 1fr; }
  .l3-header { padding: 22px 18px; }
  .income-header { padding: 22px 18px; }
  .income-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-topic-links { grid-template-columns: 1fr; }
  .income-group { padding: 16px; }
  .nav { align-items: flex-start; flex-direction: column; padding: 14px 20px; }
  .nav-links { flex-wrap: wrap; }
  .nav-links a:nth-child(n+4) { display: none; }
  .result-main, .stats { grid-template-columns: 1fr; }
  .hero-inner { padding-top: 34px; }
  .hero-title { font-size: clamp(27px, 7.2vw, 32px); line-height: 1.3; }
  .simple-metrics { grid-template-columns: 1fr; }
  .simple-calc .button { width: 100%; }
  .section:has(.cta-grid) { padding: 16px; }
  .cta-grid { gap: 18px; }
  .inline-cta { padding: 16px; }
  .cta-card .button { width: 100%; }
  .cta-card .button {
    align-self: stretch;
  }

  .table-scroll { overflow-x: visible; }
  .table-scroll table { min-width: 0; table-layout: fixed; }
  .table-scroll th, .table-scroll td {
    padding: 9px 7px;
    font-size: 13px;
    overflow-wrap: anywhere;
  }
  .hub-link-card { align-items: stretch; flex-direction: column; gap: 14px; padding: 18px; }
  .hub-link-button { width: 100%; }
  .kabe-hero { padding: 24px 20px; }
  .kabe-title { font-size: clamp(25px, 7vw, 32px); line-height: 1.35; }
  .kabe-title-amounts { display: block; font-size: .92em; }
  .kabe-title-amounts .nowrap { display: block; }
  .kabe-title-amounts .nowrap + .nowrap::before { content: ""; }
  .kabe-hero .meta-strip { display: grid; gap: 5px; }
  .kabe-faq, .kabe-sources { padding: 18px 16px; }
  .faq-card { padding: 16px 14px; }
  .faq-card.qa-card h3, .faq-card.qa-card p { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .situation-card-grid { grid-template-columns: 1fr; gap: 12px; }
  .situation-card { padding: 16px 14px; }

  .source-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .source-chip { width: 100%; justify-content: center; }
  .kabe-wall-table table { border: 0; background: transparent; }
  .kabe-wall-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kabe-wall-table tbody { display: grid; gap: 12px; }
  .kabe-wall-table tr { display: block; padding: 14px 15px; border: 1px solid #d4e1e4; border-left: 5px solid var(--accent); border-radius: 8px; background: #fff; }
  .kabe-wall-table td { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 9px; padding: 5px 0; border: 0; font-size: 14px; overflow-wrap: anywhere; }
  .kabe-wall-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 800; }
  .kabe-wall-table .wall-amount { font-size: 20px; }
}
@media (max-width: 640px) {
  .hero-title { font-size: clamp(24px, 7.5vw, 30px); }
  .article-header .kabe-title { font-size: clamp(23px, 6.2vw, 25px); }
}



.article-hero-image { margin: 20px 0 26px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 12px 26px rgba(23,32,42,.06); }
.article-hero-image img { display: block; width: 100%; height: auto; }
.article-hero-image figcaption { padding: 8px 12px; color: var(--muted); font-size: 12px; background: #f8fbfc; }
.status-grid, .mini-table-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.status-card { padding: 18px; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 8px; background: #fff; }
.status-card strong { display: block; color: var(--accent); font-size: 22px; }
.comparison-box { padding: 18px; border: 1px solid #c7dee1; border-left: 5px solid var(--accent); border-radius: 8px; background: #f2fbfa; }
.page-cta-box { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.bar-table .bar-cell { min-width: 170px; }
.rate-bar { display: block; height: 12px; border-radius: 999px; background: #d8ece9; overflow: hidden; }
.rate-bar span { display: block; height: 100%; background: var(--accent); }
@media (max-width: 820px) { .status-grid, .mini-table-grid { grid-template-columns: 1fr; } .page-cta-box .button { width: 100%; } }



.insurance-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.insurance-choice-grid .field { margin-bottom: 0; }
.field-help { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.calc-assumption-box { margin-top: 14px; border: 1px solid #d5e4e7; border-left: 5px solid var(--accent); background: #f5fbfb; border-radius: 8px; padding: 14px 16px; }
.calc-assumption-box p { margin: 0 0 8px; }
.calc-assumption-box p:last-child { margin-bottom: 0; }
.low-income-compare { border: 1px solid #d4e2e5; background: #f7fbfb; border-radius: 8px; padding: 18px; }
.low-income-compare h2 { margin-bottom: 10px; }
.low-income-compare .breakdown { margin-top: 12px; }
.low-income-compare .breakdown th { background: #eaf5f6; }
.low-income-compare .small-note { margin-top: 12px; }
.tax-exempt-note { border-left: 5px solid var(--warn); background: #fff8e8; border-radius: 8px; padding: 16px; }
@media (max-width: 720px) { .insurance-choice-grid { grid-template-columns: 1fr; } .result-main { grid-template-columns: 1fr; } .breakdown th, .breakdown td { padding: 9px 6px; font-size: 14px; } }



.takehome-rate-chart {
  display: grid;
  gap: 10px;
  margin: 18px 0 18px;
  padding: 18px;
  border: 1px solid #cfe1e4;
  border-radius: 12px;
  background: #f7fbfb;
}
.rate-chart-row {
  display: grid;
  grid-template-columns: 88px minmax(120px, 1fr) 58px;
  align-items: center;
  gap: 12px;
}
.rate-chart-label { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.rate-chart-track { height: 18px; border-radius: 999px; background: #dcebea; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(13,107,114,.08); }
.rate-chart-bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0d6b72, #5caeb2); }
.rate-chart-value { color: var(--accent); font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.bar-table .bar-cell { min-width: 190px; }
.bar-table .rate-bar { display: inline-block; width: min(150px, 70%); vertical-align: middle; margin-right: 8px; }
.bar-rate-label { color: var(--muted); font-size: 12px; font-weight: 800; vertical-align: middle; }
.insurance-choice-intro {
  margin: 16px 0 12px;
  padding: 14px 16px;
  border: 1px solid #cfe1e4;
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  background: #f5fbfb;
}
.insurance-choice-intro strong { display: block; margin-bottom: 4px; color: var(--ink); }
.insurance-choice-intro p { margin: 0; color: var(--muted); font-size: 14px; }
.insurance-choice-grid { align-items: stretch; }
.insurance-option-card {
  padding: 15px;
  border: 1px solid #d5e4e7;
  border-radius: 10px;
  background: #fff;
}
.insurance-option-card label {
  display: block;
  margin-bottom: 9px;
}
.insurance-field-title {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 900;
}
.insurance-field-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}
.insurance-option-card select { min-height: 46px; font-weight: 800; }
.article-hero-image img {
  border-radius: 0;
}
@media (max-width: 720px) {
  .rate-chart-row { grid-template-columns: 68px minmax(100px, 1fr) 50px; gap: 8px; font-size: 13px; }
  .takehome-rate-chart { padding: 14px 12px; }
  .bar-table .bar-cell { min-width: 0; }
  .bar-table .rate-bar { width: 100%; margin: 0 0 3px; }
  .bar-rate-label { display: block; text-align: right; }
  .insurance-option-card { padding: 14px; }
  .insurance-field-title { font-size: 14px; }
}


.operator-table th { width: 190px; white-space: nowrap; }
.contact-frame-wrap {
  margin: 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}
.contact-frame {
  display: block;
  width: 100%;
  min-height: 760px;
  border: 0;
  background: #fff;
}
.contact-actions { margin-top: 12px; }
@media (max-width: 820px) {
  .operator-table th { width: auto; }
  .contact-frame { min-height: 880px; }
}


.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 12px; }
.footer-nav a { display: inline-block; line-height: 1.7; }
.footer-copy { margin: 0; color: #d9e1ea; }
@media (max-width: 640px) {
  .footer-inner { padding: 24px 18px; }
  .footer-nav { display: grid; grid-template-columns: 1fr; gap: 6px; }
}



.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.compare-table th,.compare-table td{white-space:nowrap}.growth-block .status-grid,.growth-intent .status-grid{margin-top:1rem}.growth-intent .check-list{margin-top:1rem}.hero-section .meta-strip{margin-top:1.1rem}.answer-section strong{font-weight:800}.cta-section .button{display:inline-flex;align-items:center;justify-content:center}.pill-list{display:flex;flex-wrap:wrap;gap:.65rem;list-style:none;padding-left:0}.pill-list a{display:inline-block;padding:.55rem .8rem;border:1px solid #dbe5ee;border-radius:999px;background:#fff;text-decoration:none}.growth-intent .table-scroll{margin-top:1rem}
@media(max-width:640px){.compare-table th,.compare-table td{font-size:.9rem}.hero-section{padding-top:1.4rem}.pill-list a{font-size:.92rem}}



.table-scroll-hint {
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 820px) {
  .table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .table-scroll table {
    min-width: 680px !important;
    table-layout: auto !important;
  }
  .table-scroll.wide-table-scroll table,
  .monthly-wide-table table {
    min-width: 760px !important;
  }
  .table-scroll th,
  .table-scroll td,
  .compare-table th,
  .compare-table td,
  .breakdown th,
  .breakdown td {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  .table-scroll::-webkit-scrollbar { height: 8px; }
  .table-scroll::-webkit-scrollbar-thumb { background: #b8c9d6; border-radius: 999px; }
}
.content-depth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.content-depth-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.content-depth-card strong { display:block; margin-bottom:6px; color:var(--accent); }
.notice-box {
  margin: 16px 0;
  padding: 15px 17px;
  border-left: 4px solid var(--accent);
  background: #eef7f7;
  color: var(--ink);
}
@media (max-width: 820px) {
  .content-depth-grid { grid-template-columns: 1fr; }
}



@media (max-width: 820px) {
  .table-scroll.summary-table-scroll {
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }
  .table-scroll.summary-table-scroll table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  .table-scroll.summary-table-scroll th,
  .table-scroll.summary-table-scroll td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: 14px;
  }
  .table-scroll.wide-table-scroll,
  .table-scroll.monthly-wide-table {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .table-scroll.wide-table-scroll table {
    min-width: 760px !important;
    table-layout: auto !important;
  }
  .table-scroll.monthly-wide-table table {
    min-width: 820px !important;
  }
  .table-scroll.wide-table-scroll th,
  .table-scroll.wide-table-scroll td,
  .table-scroll.monthly-wide-table th,
  .table-scroll.monthly-wide-table td {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }
  .table-scroll.summary-table-scroll + .small-note,
  .answer-section .table-scroll.summary-table-scroll { margin-top: 6px; }
}



.checklist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}.check-card{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:14px;padding:14px;box-shadow:0 8px 24px rgba(15,23,42,.04)}.check-card p{margin:0}.checkmark{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:#e6f4f1;color:#0f766e;font-weight:700}.intent-depth-section .info-card{margin-top:12px;background:#fff;border:1px solid rgba(15,23,42,.1);border-radius:14px;padding:16px;box-shadow:0 8px 24px rgba(15,23,42,.04)}



.notice-box strong{color:var(--accent);}
.intent-depth-section .content-depth-grid + p{margin-top:12px;}


.article--graph .lead {
  font-size: 1.08rem;
  line-height: 1.9;
}

.graph-panel {
  background: #f7fbfb;
  border: 1px solid #d9e7e6;
  border-radius: 12px;
  padding: 24px;
}

.gross-net-chart,
.breakdown-chart {
  display: grid;
  gap: 14px;
  margin: 20px 0;
}

.gross-net-row,
.breakdown-row {
  display: grid;
  gap: 8px;
}

.gross-net-row {
  grid-template-columns: 96px minmax(0, 1fr) 136px;
  align-items: center;
}

.gross-net-row.is-focus {
  background: #fff8e6;
  border: 1px solid #ecd28c;
  border-radius: 10px;
  padding: 10px;
}

.gross-net-label,
.breakdown-label {
  font-weight: 700;
  color: #1f3d3d;
}

.gross-net-bar {
  display: flex;
  width: var(--gross);
  min-width: 42px;
  max-width: 100%;
  height: 20px;
  overflow: hidden;
  background: #e8eeee;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(31, 61, 61, .08);
}

.gross-net-fill {
  background: linear-gradient(90deg, #1d8f7a, #43b39f);
}

.gross-net-deduct {
  background: #d6b66c;
}

.gross-net-values {
  display: grid;
  gap: 2px;
  font-size: .9rem;
  color: #405252;
}

.gross-net-values strong {
  color: #163c39;
}

.breakdown-stack {
  display: flex;
  min-height: 38px;
  overflow: hidden;
  border-radius: 10px;
  background: #eef4f4;
  box-shadow: inset 0 0 0 1px rgba(31, 61, 61, .08);
}

.breakdown-stack span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 6px;
  color: #fff;
  font-size: .78rem;
  line-height: 1.35;
  text-align: center;
}

.breakdown-net {
  background: #1d8f7a;
}

.breakdown-social {
  background: #607d8b;
}

.breakdown-resident {
  background: #7c6bb0;
}

.breakdown-tax {
  background: #c98643;
}

.breakdown-note {
  margin: 4px 0 0;
  font-size: .9rem;
  color: #526565;
}

.graph-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.graph-link-card {
  border: 1px solid #d9e7e6;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

.graph-link-card h3 {
  margin-top: 0;
  font-size: 1rem;
}

.graph-link-card ul {
  margin: 0;
  padding-left: 1.15em;
}

@media (max-width: 520px) {
  .graph-panel {
    padding: 16px;
  }

  .gross-net-row {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .gross-net-values {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }

  .breakdown-stack {
    min-height: 72px;
  }

  .breakdown-stack span {
    min-width: 30px;
    padding: 4px 2px;
    font-size: .68rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }
}


.affiliate-pr-label {
  margin: 0 0 10px;
  color: #667276;
  font-size: .82rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .container,
  .site-header .container,
  .section,
  .graph-panel,
  .graph-link-card,
  .cta-card,
  .notice-box,
  .income-point,
  .faq-card {
    box-sizing: border-box;
    max-width: 100%;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .article--graph .section,
  .article--graph .graph-panel {
    margin-left: 0;
    margin-right: 0;
  }

  .cta-grid,
  .graph-link-grid,
  .income-point-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .button,
  .button.small,
  .button.small.secondary,
  .cta-card .button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .table-scroll,
  .graph-panel,
  .gross-net-chart,
  .breakdown-chart {
    max-width: 100%;
  }
}

@media (max-width: 430px) {
  .container,
  .section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .graph-panel {
    padding: 14px;
  }

  .gross-net-label,
  .breakdown-label {
    font-size: .92rem;
  }
}

@media (max-width: 390px) {
  .container,
  .section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .graph-panel {
    padding: 12px;
  }
}


/* Graph and summary enhancements */
.seo-graph-figure,.article-hero-image{margin:24px 0;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.08);border:1px solid rgba(148,163,184,.22)}
.seo-graph-figure img,.article-hero-image img{display:block;width:100%;height:auto}
.seo-graph-figure figcaption,.article-hero-image figcaption{padding:12px 16px;font-size:.92rem;color:#475569;background:#f8fafc;border-top:1px solid rgba(148,163,184,.18)}
.answer-summary{border:1px solid rgba(14,165,233,.18);background:linear-gradient(135deg,#f0f9ff,#fff);border-radius:24px;box-shadow:0 12px 30px rgba(14,165,233,.08)}
.answer-summary-strong{border-color:rgba(234,88,12,.25);background:linear-gradient(135deg,#fff7ed,#fff)}
.graph-support-links{border-left:6px solid #0ea5e9}
.table-scroll-hint{font-size:.9rem;color:#64748b;margin-bottom:8px}

/* 都道府県別手取りページ */
.prefecture-hero{background:linear-gradient(135deg,#fff 0%,#edf7f7 58%,#eef3fb 100%);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.prefecture-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}
.prefecture-metric{background:#fff;border:1px solid #cbdde3;border-radius:12px;padding:14px;min-width:0}.prefecture-metric span{display:block;font-size:12px;font-weight:800;color:var(--muted)}.prefecture-metric strong{display:block;font-size:clamp(18px,2.6vw,27px);line-height:1.35;color:var(--accent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.prefecture-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.prefecture-link-card{display:flex;flex-direction:column;gap:5px;padding:18px;border:1px solid #c7dee1;border-radius:12px;background:#f6fbfb;text-decoration:none}.prefecture-link-card strong{font-size:20px;color:var(--accent)}.prefecture-link-card span{color:var(--ink)}
.prefecture-figure{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 14px 34px rgba(23,32,42,.08);margin:22px 0}.prefecture-figure img{display:block;width:100%;height:auto}.prefecture-figure figcaption{padding:12px 16px;background:#f8fafc;color:var(--muted);font-size:14px}.muted{color:var(--muted)}
.source-section{border-top:3px solid #d8e7e8;padding-top:24px}.source-list{padding-left:1.3rem}.source-list li{margin:.45rem 0}
@media(max-width:768px){.prefecture-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.prefecture-link-grid{grid-template-columns:1fr}.prefecture-hero{padding:22px}.prefecture-hero h1{font-size:clamp(28px,9vw,42px)}}
@media(max-width:390px){.main{padding-left:14px;padding-right:14px}.prefecture-hero{padding:18px 14px}.prefecture-metrics{grid-template-columns:1fr 1fr;gap:8px}.prefecture-metric{padding:10px}.prefecture-metric strong{font-size:17px}.tool-layout{grid-template-columns:1fr}.result-main{grid-template-columns:1fr 1fr}.metric{padding:11px}.metric strong{font-size:20px}.nav{padding:0 14px}.nav-links{gap:9px;font-size:12px;overflow-x:auto}.table-scroll{max-width:100%}.prefecture-figure figcaption{font-size:12px}}