@charset "UTF-8";
:root{--ink:#213c35;--green:#2f5d50;--mint:#a8cdbd;--orange:#e99569;--cream:#f6f3eb;--paper:#fffdf8;--line:#dddcd3;--muted:#6e7a75;--white:#fff;--shadow:0 16px 50px rgba(34,60,53,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:"DM Sans","Noto Sans JP",sans-serif;line-height:1.7}button,input,select{font:inherit;color:inherit}button,a{transition:.2s ease}a{color:inherit;text-decoration:none}.site-header{height:78px;padding:0 clamp(24px,5vw,74px);display:flex;align-items:center;gap:48px;border-bottom:1px solid rgba(33,60,53,.13);background:rgba(248,247,242,.9);backdrop-filter:blur(12px);position:relative;z-index:5}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.04em;font-size:17px}.brand-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:white;font-size:14px}.site-header nav{display:flex;gap:30px;margin-left:auto;font-size:13px;font-weight:600}.site-header nav a:hover{color:var(--orange)}.header-save{border:1px solid var(--ink);background:transparent;border-radius:2px;padding:9px 18px;font-size:12px;font-weight:600;cursor:pointer}.header-save:hover{background:var(--ink);color:white}.hero{min-height:620px;padding:110px clamp(24px,10vw,150px) 90px;position:relative;overflow:hidden;background:radial-gradient(circle at 85% 30%,#dfece5 0 13%,transparent 13.2%),radial-gradient(circle at 86% 25%,transparent 0 18%,rgba(47,93,80,.08) 18.1% 18.4%,transparent 18.5%),var(--cream)}.hero:after{content:"暮らし";position:absolute;right:-25px;bottom:-105px;color:rgba(47,93,80,.035);font-size:250px;font-weight:700;white-space:nowrap}.eyebrow,.section-number{font-size:11px;font-weight:700;letter-spacing:.2em}.eyebrow{display:flex;align-items:center;gap:12px}.eyebrow span{width:35px;height:1px;background:var(--orange)}h1{font-family:"Noto Sans JP",sans-serif;font-size:clamp(45px,6vw,78px);line-height:1.25;letter-spacing:.02em;margin:25px 0 28px;font-weight:500}h1 em{font-style:normal;color:var(--orange)}.hero-copy{max-width:510px;font-size:15px;color:#586b65}.primary-link{display:inline-flex;gap:35px;align-items:center;margin-top:24px;padding:15px 22px;background:var(--green);color:white;font-size:13px;font-weight:600}.primary-link:hover{background:#193f34;transform:translateY(-2px)}.hero-points{position:absolute;right:clamp(45px,9vw,140px);bottom:80px;display:flex;list-style:none;padding:0;margin:0;z-index:1}.hero-points li{padding:0 26px;border-right:1px solid rgba(33,60,53,.2);display:flex;flex-direction:column}.hero-points li:last-child{border:0}.hero-points strong{font-size:22px}.hero-points span{font-size:10px;letter-spacing:.08em;color:var(--muted)}.simulator-section{background:var(--paper);padding:100px clamp(20px,8vw,120px) 120px}.section-heading{max-width:980px;margin:0 auto 55px;position:relative}.section-heading h2{font-size:clamp(32px,4vw,49px);font-weight:500;line-height:1.35;margin:16px 0}.section-heading>p:last-child{position:absolute;right:0;bottom:5px;color:var(--muted);font-size:13px}.section-number{color:var(--orange)}.panel,.result-panel{max-width:980px;margin:0 auto 24px;background:white;border:1px solid var(--line);padding:36px 42px;box-shadow:0 8px 28px rgba(40,50,45,.03)}.panel-title-row{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:25px;border-bottom:1px solid var(--line)}.panel-title-row>div:first-child{display:flex;align-items:baseline;gap:18px}.step{color:var(--orange);font-size:10px;letter-spacing:.1em;font-weight:700}.panel h3{font-size:22px;margin:0;font-weight:600}.panel-title-row p{font-size:12px;color:var(--muted);margin:0}.income-grid{display:grid;grid-template-columns:1fr auto 1fr 1.15fr;gap:22px;align-items:end;padding-top:30px}.money-field,.expense-row{display:flex}.money-field{flex-direction:column;gap:8px}.person-label{font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px}.person-label i{width:8px;height:8px;border-radius:50%;background:var(--green)}.person-b .person-label i,.result-b .person-label i{background:var(--orange)}.input-wrap,.expense-input{display:flex;align-items:center;border-bottom:1px solid var(--ink)}input[type=number]{width:100%;border:0;outline:none;background:transparent;text-align:right;font-weight:600;-moz-appearance:textfield}input::-webkit-inner-spin-button{appearance:none}.input-wrap input{font-size:23px;padding:8px}.input-wrap b,.expense-input b{font-size:12px}.plus{padding-bottom:11px;color:var(--muted)}.income-total{background:var(--green);color:white;margin:-31px -1px -1px 5px;padding:25px 28px;display:flex;flex-direction:column}.income-total>span:first-child{font-size:11px;opacity:.7}.income-total strong{font-size:27px}.income-total strong small,.expense-total-row strong small,.result-person strong small{font-size:12px;margin-left:5px}.income-total .per-year{font-size:10px;border-top:1px solid rgba(255,255,255,.2);padding-top:7px}.preset-wrap{display:flex;align-items:center;gap:10px}.preset-wrap label{font-size:11px;color:var(--muted)}select{border:1px solid var(--line);background:white;padding:8px 28px 8px 10px;font-size:11px}.expense-list{display:grid;grid-template-columns:1fr 1fr;column-gap:50px}.expense-row{align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid #ecebe5}.expense-icon{width:34px;height:34px;border:1px solid #d5ddd8;border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--green)}.expense-name{display:flex;flex:1;flex-direction:column;font-weight:600;font-size:13px}.expense-name small{font-weight:400;font-size:9px;color:#8b9490}.expense-input{width:115px}.expense-input input{padding:5px;font-size:15px}.expense-total-row{display:flex;justify-content:flex-end;align-items:baseline;gap:30px;padding-top:24px}.expense-total-row span{font-size:12px}.expense-total-row strong{font-size:27px}.split-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:28px}.split-options label{cursor:pointer}.split-options input{position:absolute;opacity:0}.split-options span{display:flex;flex-direction:column;padding:19px 20px;border:1px solid var(--line);position:relative}.split-options span:after{content:"";position:absolute;right:14px;top:14px;width:12px;height:12px;border:1px solid #aaa;border-radius:50%}.split-options input:checked+span{border-color:var(--green);background:#f0f6f2}.split-options input:checked+span:after{border:4px solid var(--green);box-sizing:border-box}.split-options b{font-size:13px}.split-options small{font-size:10px;color:var(--muted)}.custom-slider{margin-top:24px;padding:20px;background:var(--cream)}.custom-slider label,.custom-slider>div{display:flex;justify-content:space-between;font-size:11px}.custom-slider input{width:100%;accent-color:var(--green)}.result-panel{background:var(--green);color:white;border:0;padding:45px 50px;box-shadow:var(--shadow)}.result-panel>header{display:flex;justify-content:space-between;align-items:flex-start}.result-panel h2{font-size:27px;margin:4px 0}.result-panel button{border:1px solid rgba(255,255,255,.6);background:transparent;color:white;padding:10px 17px;font-size:11px;cursor:pointer}.result-panel button:hover{background:white;color:var(--green)}.result-overview{display:grid;grid-template-columns:1fr 140px 1fr;align-items:center;margin:35px 0}.result-person{padding:10px 30px}.result-a{text-align:right}.result-person .person-label{display:flex}.result-a .person-label{justify-content:flex-end}.result-person strong{display:block;font-size:32px;margin:8px 0}.result-person p{font-size:11px;margin:0;opacity:.7}.donut-area{text-align:center}.donut{width:115px;height:115px;margin:auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--mint) 0 55%,var(--orange) 55%);position:relative}.donut:before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--green)}.donut span{z-index:1;font-size:24px;font-weight:700}.donut small{font-size:11px}.donut-area p{font-size:9px;opacity:.6}.balance-section{border-top:1px solid rgba(255,255,255,.2);padding-top:25px}.balance-section header{display:flex;justify-content:space-between}.balance-section h3{font-size:13px;margin:0}.balance-section header span{font-size:11px;opacity:.7}.balance-bars{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:18px}.balance-item{display:grid;grid-template-columns:65px 1fr 85px;align-items:center;gap:12px;font-size:10px}.balance-item strong{text-align:right}.bar-track{height:5px;background:rgba(255,255,255,.15)}.bar-track i{display:block;height:100%;background:var(--mint);width:50%;transition:width .35s}.balance-item:nth-child(2) i{background:var(--orange)}.result-message{margin-top:28px;background:rgba(255,255,255,.09);padding:16px 20px;display:flex;gap:14px;align-items:center}.result-message>span{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--mint);color:var(--green);font-weight:700}.result-message p{margin:0;font-size:11px;line-height:1.7}.result-message strong{font-size:13px}.tips-section{background:#e5eee9;padding:105px clamp(20px,8vw,120px)}.section-heading.light{max-width:980px}.tips-grid{max-width:980px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(33,60,53,.16)}.tips-grid article{background:#e5eee9;padding:38px}.tips-grid span{color:var(--orange);font-size:11px}.tips-grid h3{font-size:20px;line-height:1.6;margin:18px 0}.tips-grid p{font-size:12px;color:#65756f}.site-footer{padding:45px clamp(24px,8vw,120px);background:var(--ink);color:white;display:grid;grid-template-columns:1fr 1fr;align-items:center}.site-footer p{font-size:12px;text-align:right}.site-footer small{grid-column:1/-1;margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);opacity:.5;font-size:9px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,100px);background:#182f29;color:white;padding:12px 22px;font-size:12px;box-shadow:var(--shadow);opacity:0;z-index:20;transition:.3s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:800px){.site-header{height:64px;padding:0 20px}.site-header nav{display:none}.header-save{margin-left:auto}.hero{padding:75px 24px 150px;min-height:620px}.hero-points{left:20px;right:auto;bottom:55px}.hero-points li{padding:0 14px}.hero-points li:first-child{padding-left:0}.simulator-section,.tips-section{padding:70px 16px}.section-heading>p:last-child{position:static}.panel,.result-panel{padding:28px 20px}.panel-title-row{align-items:flex-start}.income-grid{grid-template-columns:1fr auto 1fr}.income-total{grid-column:1/-1;margin:10px 0 0}.expense-list{grid-template-columns:1fr}.preset-wrap{flex-direction:column;align-items:flex-end}.split-options{grid-template-columns:1fr}.result-overview{grid-template-columns:1fr 85px 1fr}.result-person{padding:8px}.result-person strong{font-size:21px}.donut{width:80px;height:80px}.donut:before{inset:9px}.balance-bars{grid-template-columns:1fr}.tips-grid{grid-template-columns:1fr}.site-footer{grid-template-columns:1fr}.site-footer p{text-align:left}.hero:after{display:none}}
@media(max-width:480px){h1{font-size:42px}.panel-title-row{display:block}.panel-title-row>div:first-child{margin-bottom:8px}.preset-wrap{align-items:flex-start;margin-top:15px}.income-grid{gap:10px}.input-wrap input{font-size:18px}.result-panel>header{display:block}.result-panel button{margin-top:10px}.result-overview{grid-template-columns:1fr 65px 1fr}.donut{width:62px;height:62px}.donut span{font-size:18px}.result-person strong{font-size:17px}.balance-item{grid-template-columns:55px 1fr 75px}.hero-points strong{font-size:18px}}