*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue-50:#eff6ff;--blue-100:#dbeafe;--blue-500:#3b82f6;--blue-600:#2563eb;--blue-700:#1d4ed8;--blue-800:#1e40af;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;
  --green-500:#22c55e;--green-600:#16a34a;
  --radius:12px;--shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.04);
  --c-health:#3b82f6;--c-pension:#8b5cf6;--c-employment:#06b6d4;--c-income-tax:#f59e0b;--c-resident-tax:#ef4444;--c-take-home:#22c55e;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;background:var(--gray-50);color:var(--gray-800);line-height:1.7;-webkit-font-smoothing:antialiased}
.container{max-width:720px;margin:0 auto;padding:0 16px 40px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px}

/* Hero */
.hero{text-align:center;padding:32px 0 8px}
.hero h1{font-size:1.6rem;font-weight:900;color:var(--blue-700);letter-spacing:-.02em}
.hero-sub{font-size:.85rem;color:var(--gray-500);margin-top:4px}

/* Input */
.input-group{margin-bottom:20px}
.input-group label{font-size:.85rem;font-weight:700;color:var(--gray-600)}
.income-display{display:flex;align-items:baseline;justify-content:center;gap:4px;margin:8px 0}
.income-number{font-size:3rem;font-weight:900;color:var(--blue-700);line-height:1}
.income-unit{font-size:1.1rem;font-weight:700;color:var(--gray-500)}

/* Slider */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:var(--blue-100);outline:none;margin:12px 0 4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--blue-600);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgba(37,99,235,.3)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--blue-600);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgba(37,99,235,.3)}
.slider-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--gray-500)}

/* Options */
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.option-item{display:flex;flex-direction:column;gap:4px}
.option-item label{font-size:.8rem;font-weight:700;color:var(--gray-600)}
.option-item select{padding:8px 10px;border:1px solid var(--gray-200);border-radius:8px;font-size:.9rem;font-family:inherit;background:#fff}
.toggle-item{flex-direction:row;align-items:center;gap:8px}
.toggle-item input[type=checkbox]{width:20px;height:20px;accent-color:var(--blue-600)}
.toggle-item label{margin:0}

/* Result */
.result-main{text-align:center;padding-bottom:16px;border-bottom:1px solid var(--gray-100)}
.result-label{font-size:.85rem;color:var(--gray-500);font-weight:700}
.result-amount{display:flex;align-items:baseline;justify-content:center;gap:4px}
.big-number{font-size:2.4rem;font-weight:900;color:var(--green-600);line-height:1.2}
.result-unit{font-size:1rem;color:var(--gray-500);font-weight:700}
.result-monthly{font-size:.9rem;color:var(--gray-500);margin-top:4px}
.result-monthly span{font-weight:700;color:var(--gray-700)}

/* Chart */
.chart-area{display:flex;justify-content:center;padding:20px 0}
.chart-wrapper{position:relative;width:280px;height:280px}
.chart-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.chart-center span:first-child{font-size:2rem;font-weight:900;color:var(--gray-800)}
.chart-percent{font-size:1rem;font-weight:700;color:var(--gray-500)}
.chart-center small{display:block;font-size:.75rem;color:var(--gray-500)}

/* Breakdown */
.breakdown{margin-top:16px}
.breakdown h2{font-size:1rem;font-weight:700;margin-bottom:12px;color:var(--gray-700)}
.breakdown-table{width:100%;border-collapse:collapse}
.breakdown-table td{padding:8px 4px;font-size:.9rem;border-bottom:1px solid var(--gray-100)}
.breakdown-table .amount{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.breakdown-table .subtotal td{background:var(--gray-50);font-weight:700;font-size:.85rem}
.breakdown-table .total-row td{border-top:2px solid var(--gray-300);font-weight:900;font-size:.95rem;color:var(--gray-900)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot-health{background:var(--c-health)}
.dot-pension{background:var(--c-pension)}
.dot-employment{background:var(--c-employment)}
.dot-income-tax{background:var(--c-income-tax)}
.dot-resident-tax{background:var(--c-resident-tax)}

/* Wall Guide */
.wall-section h2{font-size:1rem;font-weight:700;color:var(--gray-700);margin-bottom:12px}
.wall-list{display:flex;flex-direction:column;gap:12px}
.wall-item{display:flex;gap:12px;padding:12px;border-radius:8px;background:var(--gray-50);border-left:4px solid var(--blue-500);transition:background .2s}
.wall-item.active{background:var(--blue-50);border-left-color:var(--blue-700)}
.wall-amount{font-weight:900;font-size:.95rem;white-space:nowrap;min-width:100px;color:var(--blue-700)}
.wall-desc{font-size:.8rem;color:var(--gray-600);line-height:1.5}
.wall-desc strong{color:var(--blue-700)}

/* Explain */
.explain-section h2{font-size:1rem;font-weight:700;color:var(--gray-700);margin-bottom:12px}
.explain-content h3{font-size:.9rem;font-weight:700;color:var(--gray-800);margin:16px 0 4px}
.explain-content h3:first-child{margin-top:0}
.explain-content p{font-size:.85rem;color:var(--gray-600)}

/* Conditions */
.conditions-section h2{font-size:1rem;font-weight:700;color:var(--gray-700);margin-bottom:12px}
.conditions-section ul{padding-left:20px}
.conditions-section li{font-size:.8rem;color:var(--gray-500);margin-bottom:4px}

/* Footer */
.footer{background:var(--gray-800);color:var(--gray-300);padding:24px 16px;text-align:center}
.footer-inner{max-width:720px;margin:0 auto}
.footer-links{display:flex;justify-content:center;gap:24px;margin-bottom:12px}
.footer-links a{color:var(--gray-300);text-decoration:none;font-size:.85rem}
.footer-links a:hover{color:#fff}
.copyright{font-size:.75rem;color:var(--gray-500)}

/* Ad slots */
.ad-slot{max-width:720px;margin:0 auto;min-height:0;text-align:center}

/* Mobile */
@media(max-width:480px){
  .hero h1{font-size:1.3rem}
  .income-number{font-size:2.4rem}
  .big-number{font-size:2rem}
  .options-grid{grid-template-columns:1fr 1fr}
  .chart-wrapper{width:240px;height:240px}
  .wall-item{flex-direction:column;gap:4px}
  .wall-amount{min-width:auto}
}