/* 教育資金なび シミュレーター（育児なびのデザインに合わせた配色） */
.ksn{
  --ksn-pk:#F29C8F; --ksn-pk-dk:#D97F72; --ksn-pkbg:#FFEDE8;
  --ksn-mt:#6FBF98; --ksn-mtbg:#E8F6EF;
  --ksn-tx:#5B4038; --ksn-sub:#8A6B5E; --ksn-line:#F2E4DB;
  --ksn-cr:#FFF7F0; --ksn-card:#FFFFFF;
  --ksn-c-pre:#F5B971; --ksn-c-ele:#F29C8F; --ksn-c-jhs:#7EB6E0; --ksn-c-hs:#6FBF98; --ksn-c-uni:#B39DDB;
  color:var(--ksn-tx); line-height:1.8; font-size:15px;
}
.ksn *{box-sizing:border-box}
.ksn-num{font-variant-numeric:tabular-nums}

/* Cocoon の見出し・表・フォーム装飾をリセット */
.article .ksn h2,.article .ksn h3,.entry-content .ksn h2,.entry-content .ksn h3{background:none;border:none;padding:0;margin:0;color:var(--ksn-tx);line-height:1.4;font-weight:800;box-shadow:none;border-radius:0}
.article .ksn h2::before,.article .ksn h2::after,.article .ksn h3::before,.article .ksn h3::after{display:none;content:none}
.article .ksn p{margin:0}
.article .ksn table{margin:0;border:none}
.article .ksn th,.article .ksn td{border:none;border-bottom:1px solid var(--ksn-line);background:none}
.article .ksn ul{margin:0}
.ksn img{margin:0!important}

/* section heading */
.ksn-sec{margin-top:44px}
.ksn-en{display:block;text-align:center;color:var(--ksn-pk);font-weight:700;letter-spacing:.18em;font-size:12px}
.article .ksn h2.ksn-h2{text-align:center;font-size:1.55em;margin:2px 0 4px}
.article .ksn p.ksn-lead{text-align:center;color:var(--ksn-sub);font-size:14px;margin:0 0 20px}

/* hero */
.ksn-hero{background:var(--ksn-cr);border-radius:24px;padding:28px 24px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.article .ksn h2.ksn-hero-h{font-size:1.9em;line-height:1.4;text-align:left}
.ksn-hero-h b{color:var(--ksn-pk)}
.article .ksn .ksn-hero p{margin:8px 0 0;font-size:14px;color:var(--ksn-sub);max-width:34em}
.ksn-badge{display:inline-block;background:var(--ksn-pk);color:#fff;font-weight:700;font-size:12px;padding:2px 12px;border-radius:999px;margin-bottom:8px}
.ksn-hero-pig{width:120px;height:120px;border-radius:50%;background:var(--ksn-card);border:3px solid var(--ksn-pk);display:grid;place-items:center}
.ksn-hero-pig canvas{width:92px;height:92px}

/* form */
.ksn-form{background:var(--ksn-cr);border:2px solid var(--ksn-line);border-radius:24px;padding:22px 20px;display:grid;gap:14px;margin:0}
.ksn-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;background:var(--ksn-card);border-radius:16px;padding:12px 16px}
.ksn-lbl{font-weight:800;font-size:15px;display:flex;align-items:center;gap:8px;margin:0}
.ksn-dot{width:12px;height:12px;border-radius:50%;flex:none;display:inline-block}
.ksn-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.ksn-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.ksn-seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.ksn-seg label{cursor:pointer;border:2px solid var(--ksn-line);background:var(--ksn-card);border-radius:999px;padding:5px 14px;font-size:14px;font-weight:700;color:var(--ksn-sub);transition:all .15s;line-height:1.5;margin:0}
.ksn-seg input:checked + label{border-color:var(--ksn-pk);background:var(--ksn-pkbg);color:var(--ksn-tx)}
.ksn-seg input:focus-visible + label{outline:3px solid var(--ksn-mt);outline-offset:2px}
.ksn select,.ksn input[type=number]{font:inherit;font-weight:700;color:var(--ksn-tx);background:var(--ksn-card);border:2px solid var(--ksn-line);border-radius:12px;padding:6px 12px;min-height:40px;width:auto;max-width:100%;margin:0}
.ksn select:focus-visible,.ksn input:focus-visible{outline:3px solid var(--ksn-mt);outline-offset:1px}
.ksn-hint{font-size:12px;color:var(--ksn-sub);width:100%;line-height:1.6}
.ksn-hint.ksn-auto{width:auto}
.ksn-yen-in{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ksn-yen-in input{width:120px!important;text-align:right}
.ksn-done{font-size:12px;font-weight:700;color:var(--ksn-sub);background:var(--ksn-line);border-radius:999px;padding:2px 10px}
.ksn [hidden]{display:none!important}

/* result */
.ksn-total{background:var(--ksn-card);border:3px solid var(--ksn-pk);border-radius:24px;padding:22px 20px;text-align:center}
.ksn-cap{font-size:14px;font-weight:700;color:var(--ksn-sub)}
.ksn-big{font-weight:900;font-size:48px;line-height:1.2}
.ksn-big small{font-size:20px;margin-left:4px}
.ksn-per{font-size:13px;color:var(--ksn-sub)}
.ksn-stack{display:flex;height:26px;border-radius:999px;overflow:hidden;margin:16px 0 10px;background:var(--ksn-line)}
.ksn-stack div{height:100%;min-width:2px;transition:flex-basis .4s}
.ksn-legend{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:13px}
.ksn-legend span{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.ksn-legend i,.ksn-save-key i{width:10px;height:10px;border-radius:3px;display:inline-block}

.ksn-panel{background:var(--ksn-cr);border-radius:24px;padding:20px 18px;margin-top:16px}
.ksn-panel.ksn-mt0{margin-top:0}
.article .ksn h3.ksn-h3{font-size:1.15em;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.article .ksn h3.ksn-h3::before{content:"";display:block;width:8px;height:22px;border-radius:4px;background:var(--ksn-pk)}
.ksn-chart-box{overflow-x:auto;background:var(--ksn-card);border-radius:16px;padding:10px 8px 4px}
#ksn-chart{display:block;width:100%;min-width:560px;height:auto}
.ksn-tbl-box{overflow-x:auto;background:var(--ksn-card);border-radius:16px}
.article .ksn table.ksn-tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.article .ksn .ksn-tbl th,.article .ksn .ksn-tbl td{padding:10px 12px;text-align:left}
.article .ksn .ksn-tbl th{font-size:12px;color:var(--ksn-sub);font-weight:700;background:var(--ksn-mtbg)}
.article .ksn .ksn-tbl .r{text-align:right}
.article .ksn .ksn-tbl tfoot td{font-weight:800;font-size:15px;border-bottom:none}
.ksn-stg{display:inline-flex;align-items:center;gap:8px;font-weight:700}

/* saving */
.ksn-save-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.ksn-save-goal{font-size:14px}
.ksn-save-goal b{font-size:18px}
.ksn-rates{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ksn-rate{background:var(--ksn-card);border-radius:18px;padding:14px 12px;text-align:center;border:2px solid var(--ksn-line);min-width:0}
.ksn-step .ksn-rate{background:var(--ksn-cr)}
.ksn-rate.hl{border-color:var(--ksn-mt)}
.ksn-rl{display:inline-block;font-size:12px;font-weight:700;background:var(--ksn-mtbg);border-radius:999px;padding:0 10px}
.ksn-rv{font-weight:900;font-size:26px;line-height:1.3;margin:6px 0 0}
.ksn-rv small{font-size:13px}
.ksn-rs{font-size:12px;color:var(--ksn-sub);line-height:1.6}
.ksn-bar{height:8px;border-radius:99px;background:var(--ksn-line);margin-top:8px;overflow:hidden;display:flex}
.ksn-bar i{display:block;height:100%;background:var(--ksn-pk)}
.ksn-bar b{display:block;height:100%;background:var(--ksn-mt)}
.ksn-save-key{display:flex;gap:14px;justify-content:center;font-size:12px;color:var(--ksn-sub);margin-top:10px}
.ksn-save-key span{display:inline-flex;align-items:center;gap:5px}
.ksn-avg{margin-top:12px;background:var(--ksn-card);border-radius:14px;padding:10px 14px;font-size:13px}
.ksn-empty{background:var(--ksn-card);border-radius:16px;padding:16px;text-align:center;color:var(--ksn-sub);font-size:14px}
.ksn-step{background:var(--ksn-card);border-radius:18px;padding:16px 16px 14px;margin-bottom:12px}
.ksn-step-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ksn-step-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ksn-pk);color:#fff;font-weight:900;display:grid;place-items:center}
.ksn-step.inv .ksn-step-n{background:var(--ksn-mt)}
.ksn-step.sum .ksn-step-n{background:var(--ksn-tx)}
.ksn-step-t{font-weight:900;font-size:16px}
.ksn-step-g{margin-left:auto;font-size:13px;color:var(--ksn-sub)}
.ksn-step-g b{font-size:16px;color:var(--ksn-tx)}
.article .ksn .ksn-step p{font-size:13px;color:var(--ksn-sub)}
.ksn-dep{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--ksn-pkbg);border-radius:14px;padding:10px 14px;margin-top:8px}
.ksn-dep .ksn-rv{font-size:28px;margin:0}
.article .ksn table.ksn-sum{min-width:0}
.article .ksn .ksn-sum tr.hl td{background:var(--ksn-mtbg)}

.ksn-notes{font-size:12px;color:var(--ksn-sub);background:var(--ksn-cr);border-radius:16px;padding:14px 18px;margin-top:28px;line-height:1.75}
.article .ksn .ksn-notes ul{margin:4px 0 0;padding-left:1.2em}
.ksn-notes li{margin:2px 0}
.ksn-notes b{color:var(--ksn-tx)}
.article .ksn p.ksn-src{margin-top:8px}
.ksn-talk{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.ksn-face img{width:56px;height:56px;border-radius:50%;display:block}
.ksn-talk>div{background:var(--ksn-card);border:2px solid var(--ksn-mt);border-radius:16px;padding:8px 14px;font-weight:700;font-size:14px}

@media (max-width:720px){
  .ksn-hero{grid-template-columns:1fr}.ksn-hero-pig{display:none}
  .article .ksn h2.ksn-hero-h{font-size:1.5em}
  .ksn-row{grid-template-columns:1fr;gap:6px}
  .ksn-rates{grid-template-columns:repeat(2,1fr)}
  .ksn-big{font-size:38px}
  .article .ksn h2.ksn-h2{font-size:1.3em}
  .ksn-form{padding:16px 12px}
  .ksn-step-g{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){.ksn *{transition:none!important}}