/* 家計のみらい図 / C motif — shared visual system for every application route. */
:root{--mirai-canvas:#f7f7f1;--mirai-paper:#fff;--mirai-ink:#242721;--mirai-muted:#596253;--mirai-line:#c8cebf;--mirai-outline:#78816e;--mirai-green:#2b7160;--mirai-mint:#bbdcd4;--mirai-coral:#e5b4a5;--mirai-lavender:#d8d2ea;--mirai-yellow:#e5e9a6;--mirai-danger:#a83d30;--mirai-radius:10px}
html,body.mirai-design{background:var(--mirai-canvas);color:var(--mirai-ink)}
body.mirai-design{font-size:15px;line-height:1.8;letter-spacing:.015em;-webkit-font-smoothing:antialiased}
body.mirai-design ::selection{background:var(--mirai-yellow);color:var(--mirai-ink)}
body.mirai-design a{color:var(--mirai-green)}
body.mirai-design h1,body.mirai-design h2,body.mirai-design h3{line-height:1.5;letter-spacing:.025em;font-weight:900}
body.mirai-design button{font-family:inherit;line-height:1.5;border-radius:6px!important;transition:background-color .15s,transform .15s}
body.mirai-design button:not(:disabled):active{transform:translateY(1px)}
body.mirai-design button:disabled{cursor:not-allowed;opacity:.58}
body.mirai-design button:focus-visible,body.mirai-design a:focus-visible{outline:3px solid var(--mirai-green);outline-offset:3px}
body.mirai-design .ui-primary,body.mirai-design .record-save{background:var(--mirai-ink)!important;color:#fff!important;border:1px solid var(--mirai-ink)!important;border-radius:6px!important;box-shadow:none!important;min-height:44px;font-size:14px!important;font-weight:700}
body.mirai-design .ui-primary:hover,body.mirai-design .record-save:not(:disabled):hover{background:var(--mirai-green)!important}
body.mirai-design .record-save:disabled{background:#dde1d6!important;color:#596253!important;border-color:#c8cebf!important}
body.mirai-design input:not([type=checkbox]):not([type=radio]),body.mirai-design textarea,body.mirai-design select{font-family:inherit;font-size:15px!important;line-height:1.5;color:var(--mirai-ink);border-color:var(--mirai-outline)!important;border-radius:6px!important;min-height:38px;background-color:#fff}
body.mirai-design input[type=checkbox],body.mirai-design input[type=radio]{accent-color:var(--mirai-green);min-width:17px;min-height:17px}
body.mirai-design input::placeholder,body.mirai-design textarea::placeholder{color:#707769;opacity:1}
body.mirai-design input:focus,body.mirai-design textarea:focus,body.mirai-design select:focus{outline:2px solid var(--mirai-green)!important;outline-offset:1px;box-shadow:0 0 0 4px #bbdcd455}
body.mirai-design .ui-card{background:#fff!important;border:1px solid var(--mirai-line)!important;border-radius:var(--mirai-radius)!important;box-shadow:none}
body.mirai-design [role=alert]{line-height:1.8}
body.mirai-design ::-webkit-scrollbar-thumb{background:#b7beae;border-radius:4px}
.brand-lockup-inline{color:var(--mirai-ink);font-weight:900;letter-spacing:.01em;gap:10px}
.brand-mark-inline{width:37px;height:37px;color:var(--mirai-ink)}
.brand-mark-inline path{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round}
.mirai-eyebrow{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.13em;font-weight:700;line-height:1.7}
.mirai-title-accent{position:relative;display:inline-block;color:var(--mirai-green);isolation:isolate}
.mirai-title-accent:before{content:"";position:absolute;bottom:8%;left:2%;right:4%;height:28%;background:var(--mirai-yellow);border-radius:50%;transform:rotate(-3deg);z-index:-1}
.mirai-title-accent:after{content:"";position:absolute;bottom:-3px;left:1%;right:5%;height:7px;border-top:2px solid var(--mirai-green);border-bottom:2px solid var(--mirai-green);transform:rotate(-2deg);border-radius:50%}
.mirai-stamp{display:grid;justify-items:center;align-content:center;gap:7px;flex:none;width:120px;height:120px;border:1px solid var(--mirai-ink);border-radius:50%;transform:rotate(8deg);font:600 14px/1 Arial,sans-serif;letter-spacing:.08em}
.mirai-stamp span:nth-child(2){font-size:28px;font-weight:400}
/* Public landing — the selected C design, with real application actions. */
.mirai-landing{min-height:100vh}
.mirai-wrap{max-width:1240px;width:calc(100% - 96px);margin-inline:auto}
.mirai-landing-header{display:flex;align-items:center;gap:28px;min-height:110px;border-bottom:1px solid var(--mirai-ink)}
.mirai-landing-header .brand-lockup-inline{font-size:23px}
.mirai-landing-header nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:14px}
.mirai-landing-header nav a{color:var(--mirai-ink)}
.mirai-landing button{padding:14px 23px;cursor:pointer;font-size:14px;font-weight:700}
.mirai-landing .mirai-link-button{padding:10px 0;background:none;border:0;color:var(--mirai-ink)}
.mirai-landing-header nav a.mirai-link-button{display:inline-flex}
.mirai-landing .mirai-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-width:210px;min-height:56px;border-radius:4px!important}
.mirai-landing .mirai-cta span{font-size:22px;font-weight:400}
.mirai-hero{padding-top:30px}
.mirai-hero-eyebrows{display:flex;justify-content:space-between;gap:18px}
.mirai-trial-offer{display:grid;grid-template-columns:1fr auto;gap:3px 18px;margin-top:22px;padding:16px 24px;background:var(--mirai-yellow);border:1px solid var(--mirai-ink);border-radius:8px}
.mirai-trial-offer strong{grid-column:1/-1;grid-row:2;font-size:clamp(20px,2.3vw,29px);line-height:1.45;letter-spacing:.015em}
.mirai-trial-offer>span:last-child{grid-column:2;grid-row:1;font-size:13px;font-weight:700;white-space:nowrap}
.mirai-hero-title{display:flex;justify-content:space-between;align-items:center;gap:45px;margin-top:28px}
.mirai-hero h1{font-size:clamp(40px,5.4vw,72px);line-height:1.5;margin:0;letter-spacing:.025em}
.mirai-hero-lead{display:flex;justify-content:space-between;align-items:center;gap:32px;margin:35px 0}
.mirai-hero-lead p{font-size:16px;line-height:2;margin:0}
.mirai-nowrap{display:inline-block}
.mirai-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mirai-tile{display:flex;flex-direction:column;border:1px solid var(--mirai-outline);border-radius:10px;overflow:hidden;background:#fff;color:var(--mirai-ink)!important;transition:transform .15s}
.mirai-tile:hover{transform:translateY(-3px);text-decoration:none;box-shadow:4px 4px 0 var(--mirai-ink)}
.mirai-tile-label{display:flex;justify-content:space-between;padding:17px 22px 0;font:600 12px/1.7 Arial,sans-serif}
.mirai-tile img{display:block;width:100%;height:210px;object-fit:contain;padding:8px 14px}
.mirai-tile-caption{padding:20px 23px 24px;border-top:1px solid var(--mirai-outline);margin-top:auto;background:var(--mirai-mint)}
.mirai-tile:nth-child(2) .mirai-tile-caption{background:var(--mirai-coral)}
.mirai-tile:nth-child(3) .mirai-tile-caption{background:var(--mirai-lavender)}
.mirai-tile h2{font-size:26px;margin:0}.mirai-tile p{font-size:14px;margin:8px 0 0}
.mirai-scroll{display:flex;justify-content:space-between;gap:20px;padding:25px 0 30px;font-size:12px}
.mirai-features{padding-block:72px;border-top:1px solid var(--mirai-ink)}
.mirai-features>h2{font-size:34px;margin:18px 0 38px}
.mirai-feature{display:grid;grid-template-columns:65px 1fr 1.4fr;gap:24px;align-items:center;border-top:1px solid var(--mirai-line);padding:29px 0}
.mirai-feature>span{font:32px Georgia,serif}.mirai-feature h3{font-size:24px;margin:0}.mirai-feature p{font-size:16px;margin:0;line-height:2}
.mirai-screens,.mirai-pricing{padding-block:72px;border-top:1px solid var(--mirai-ink)}
.mirai-screens h2,.mirai-pricing h2{font-size:34px;margin:16px 0 8px}
.mirai-section-lead{font-size:16px;line-height:1.9;margin:0 0 30px;color:var(--mirai-muted)}
.mirai-screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mirai-screen-card{margin:0;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--mirai-outline);border-radius:12px;overflow:hidden}
.mirai-screen-frame{padding:20px;background:var(--mirai-mint);margin-top:auto}
.mirai-screen-card:nth-child(3n+2) .mirai-screen-frame{background:var(--mirai-coral)}
.mirai-screen-card:nth-child(3n) .mirai-screen-frame{background:var(--mirai-lavender)}
.mirai-screen-frame a{display:block;max-width:390px;margin:auto;overflow:hidden;border:1px solid var(--mirai-outline);border-radius:10px;box-shadow:0 6px 16px #24272114;cursor:zoom-in}
.mirai-screen-frame a:focus-visible{outline:3px solid var(--mirai-green);outline-offset:4px}
.mirai-screen-frame img{display:block;width:100%;height:auto}
.mirai-screen-card figcaption{padding:22px 22px 20px}
.mirai-screen-card figcaption>span{font:700 11px/1.5 Arial,sans-serif;letter-spacing:.1em;color:var(--mirai-green)}
.mirai-screen-card h3{font-size:22px;margin:4px 0 5px}
.mirai-screen-card p{font-size:14px;line-height:1.8;margin:0;color:var(--mirai-muted)}
.mirai-screen-note,.mirai-pricing-note{font-size:13px;line-height:1.8;color:var(--mirai-muted);margin:20px 0 0}
.mirai-screen-swipe-hint{display:none;font-size:13px;color:var(--mirai-muted)}
.mirai-screen-grid:focus-visible{outline:2px solid var(--mirai-green);outline-offset:4px}
@media(min-width:761px) and (max-width:1100px){.mirai-screen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.mirai-screens .mirai-screen-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:100%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding-bottom:12px}.mirai-screen-card{scroll-snap-align:start}.mirai-screen-frame{padding:12px}.mirai-screen-swipe-hint{display:block;margin:0 0 16px}.mirai-screen-card figcaption{padding:20px}.mirai-screen-card h3{font-size:21px}}
.mirai-pricing-table-wrap{overflow-x:auto;border:1px solid var(--mirai-outline);border-radius:10px;background:#fff}
.mirai-pricing-table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px;line-height:1.55}
.mirai-pricing-table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mirai-pricing-table th,.mirai-pricing-table td{padding:14px 20px;border-bottom:1px solid var(--mirai-line)}
.mirai-pricing-table tr:last-child th,.mirai-pricing-table tr:last-child td{border-bottom:0}
.mirai-pricing-table thead{background:var(--mirai-mint)}
.mirai-pricing-table th:first-child{text-align:left;width:55%}
.mirai-pricing-table td,.mirai-pricing-table thead th:not(:first-child){text-align:center;width:22.5%}
.mirai-pricing-table tbody th{font-weight:600}
.mirai-pricing-table tbody tr:nth-child(even){background:#f7f7f1}
.mirai-pricing-table .mirai-trial-row{background:#f1f4ca}
.mirai-pricing-table .mirai-trial-row th,.mirai-pricing-table .mirai-trial-row td{font-weight:900}
.mirai-pricing-table .mirai-trial-row td{font-size:19px;color:var(--mirai-green)}
.mirai-pricing-table .mirai-price-row td{font-size:23px;font-weight:900;white-space:nowrap}
.mirai-pricing-table small{display:block;font-size:11px;font-weight:600;line-height:1.5;color:#415449;white-space:normal}
.mirai-pricing>.mirai-cta{margin-top:26px}
@media(max-width:760px){.mirai-pricing-table{min-width:0;font-size:12px}.mirai-pricing-table th:first-child{width:50%}.mirai-pricing-table td,.mirai-pricing-table thead th:not(:first-child){width:25%}.mirai-pricing-table th,.mirai-pricing-table td{padding:11px 7px}.mirai-pricing-table .mirai-price-row td{font-size:17px}.mirai-pricing-table small{font-size:10px}}
.mirai-start{display:grid;grid-template-columns:1fr 1fr;gap:65px;padding-block:68px;border-top:1px solid var(--mirai-ink)}
.mirai-start h2{font-size:34px;margin:16px 0}.mirai-start ol{list-style:none;counter-reset:start;padding:0;margin:0}
.mirai-start li{counter-increment:start;display:grid;grid-template-columns:30px 1fr;gap:8px 16px;padding:22px 0;border-bottom:1px solid var(--mirai-line)}
.mirai-start li:before{content:"0" counter(start);font:14px Arial,sans-serif;padding-top:7px}.mirai-start h3{font-size:20px;margin:0}.mirai-start li p{grid-column:2;font-size:15px;margin:0}
.mirai-closing{background:var(--mirai-yellow);text-align:center;padding:64px 24px}.mirai-closing h2{font-size:34px;margin:0 0 28px}
.mirai-closing p{font-size:15px;margin:-12px 0 28px}
@media(max-width:760px){.mirai-trial-offer{grid-template-columns:1fr;gap:5px;padding:17px 18px}.mirai-trial-offer>span:last-child{grid-column:1;grid-row:3;white-space:normal}.mirai-pricing-table .mirai-trial-row td{font-size:14px}.mirai-closing h2{font-size:27px}}
.mirai-footer{padding-block:35px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;font-size:13px}.mirai-footer nav{display:flex;flex-wrap:wrap;gap:20px}.mirai-footer button{padding:4px 0;background:none;border:0;font-size:13px;color:var(--mirai-muted)}
/* Auth, invitations, password resets and legal/help documents. */
body.mirai-design .gate-shell{min-height:100dvh;padding:48px 30px;display:flex;gap:75px;align-items:center;justify-content:center;background:var(--mirai-canvas)}
.auth-story{max-width:460px;flex:1}.auth-story h1{font-size:34px;line-height:1.65;margin:20px 0 25px}.auth-story img{display:block;width:100%;max-height:285px;object-fit:contain;background:#fff;border:1px solid var(--mirai-outline);border-radius:10px}.auth-story p{font-size:15px;margin-top:20px}
body.mirai-design .auth-card{width:420px!important;max-width:100%;padding:32px!important;gap:18px!important;background:#fff;border:1px solid var(--mirai-outline)!important;border-radius:10px!important;box-shadow:6px 6px 0 var(--mirai-mint);flex:none}
.auth-card .brand-lockup-inline{font-size:21px;margin-bottom:12px}.auth-card form{gap:14px!important}.auth-card input:not([type=checkbox]){min-height:45px}.auth-card label{line-height:1.9!important}
.mirai-public{background:var(--mirai-canvas);min-height:100vh}.mirai-public header{background:var(--mirai-canvas)!important;border-bottom-color:var(--mirai-ink)!important}.mirai-public main{padding-block:50px!important}.mirai-public h1{font-size:32px!important;border-bottom:2px solid var(--mirai-ink);padding-bottom:22px}.mirai-public h2{font-size:21px!important}.mirai-public section div{font-size:16px!important}.mirai-public footer button{font-size:13px}
/* App frame. Black ink, a quiet paper canvas, and clear active navigation. */
body.mirai-design .app-header{background:var(--mirai-canvas)!important;border-bottom:1px solid var(--mirai-ink)!important;border-radius:0;box-shadow:none}
.app-header .app-brand{flex-direction:column;align-items:flex-start!important;gap:0!important}.app-header .app-brand-subtitle{font-size:12px!important;color:var(--mirai-muted)!important;margin-left:47px}
.app-header .app-tabs{gap:7px!important}.app-header .app-tabs button{font-size:14px!important;min-height:42px;padding:10px 14px!important;border-radius:6px!important;color:var(--mirai-ink)!important}
.app-header .app-tabs button.is-active{background:var(--mirai-mint)!important;box-shadow:inset 0 -2px 0 var(--mirai-green)}
.app-header .app-actions{flex-wrap:wrap}.app-header .app-actions>button{min-height:36px;background:#fff!important;border:1px solid var(--mirai-outline)!important;color:var(--mirai-ink)!important;border-radius:6px!important;box-shadow:none}
.app-header .app-actions>button.is-active{background:var(--mirai-coral)!important}
body.mirai-design .app-main{padding:30px 24px 40px!important}
[data-screen-label]{gap:22px!important}
[data-screen-label]>div:first-of-type{flex-wrap:wrap}
[data-screen-label]>div:first-of-type h1{flex-shrink:0}
[data-screen-label]>div:first-of-type h1{font-size:28px!important;line-height:1.6;position:relative;display:inline-block;isolation:isolate;padding-bottom:4px}
[data-screen-label]>div:first-of-type h1:after{content:"";position:absolute;left:0;right:0;bottom:5px;height:8px;background:var(--mirai-yellow);z-index:-1;transform:rotate(-1deg)}
body.mirai-design .home-hero{background:var(--mirai-mint);color:var(--mirai-ink);border:1px solid var(--mirai-outline);border-radius:10px;padding:24px 28px;box-shadow:none;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:35px;align-items:center}
.home-hero-illustration{background:#fff;border:1px solid var(--mirai-outline);border-radius:8px;overflow:hidden}.home-hero-illustration img{display:block;width:100%;height:190px;object-fit:contain;padding:6px}
.home-hero-meta,.home-hero-status{color:var(--mirai-ink)!important;font-size:14px!important;line-height:1.8}.home-hero-value{font-size:clamp(36px,4.5vw,52px);font-weight:900}.home-progress{background:#96b8aa;height:7px}.home-progress>div{background:var(--mirai-green)}
body.mirai-design .home-primary-action{background:var(--mirai-ink);color:#fff;border:1px solid var(--mirai-ink);border-radius:6px;min-height:44px;font-size:14px}
body.mirai-design .home-secondary-action{background:transparent;color:var(--mirai-ink);border:1px solid var(--mirai-ink);border-radius:6px;min-height:44px;font-size:14px}
body.mirai-design .home-kpi-card{border:1px solid var(--mirai-outline)!important;border-radius:10px!important;box-shadow:none;padding:20px!important;border-top:5px solid var(--mirai-mint)!important}
body.mirai-design .home-kpi-card:nth-child(2){border-top-color:var(--mirai-coral)!important}body.mirai-design .home-kpi-card:nth-child(3){border-top-color:var(--mirai-lavender)!important}body.mirai-design .home-kpi-card:nth-child(4){border-top-color:var(--mirai-yellow)!important}
.home-kpi-grid{gap:18px!important}
body.mirai-design .record-layout>section{border:1px solid var(--mirai-outline)!important;border-radius:10px!important;padding:25px!important}
body.mirai-design .record-layout>aside{background:#f4e5df!important;border:1px solid var(--mirai-outline)!important;border-radius:10px!important;padding:22px!important}
body.mirai-design input.record-amount:not([type=checkbox]):not([type=radio]){min-width:0;flex:1;background:transparent!important;min-height:70px;font-size:44px!important;font-weight:900;outline-offset:3px;border-radius:0!important;border-bottom:2px solid var(--mirai-green)!important}
.record-note{font-size:14px;color:var(--mirai-muted);line-height:1.9}.record-illustration{display:block;width:100%;height:175px;object-fit:contain;background:#fff;border:1px solid var(--mirai-line);border-radius:8px;margin-bottom:18px}
body.mirai-design .plan-hero{background:var(--mirai-lavender);border:1px solid var(--mirai-outline);border-radius:10px;padding:22px;box-shadow:none}
.plan-hero-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-hero-grid>div:first-child{grid-column:1/-1;display:grid!important;grid-template-columns:120px minmax(0,1fr);gap:4px 20px!important;align-items:center}
.plan-hero-grid>div:first-child .plan-mini-illustration{grid-row:1/3;width:120px;height:90px;margin:0}
.plan-hero h1{font-size:25px!important;color:var(--mirai-ink)!important}.plan-hero-kpi{border-color:var(--mirai-outline);border-radius:8px;padding:18px;background:#fff}
.plan-mini-illustration{width:135px;height:92px;object-fit:contain;background:#fff;border:1px solid var(--mirai-line);border-radius:6px;margin-bottom:8px}
.screen-with-illustration{position:relative}
.screen-with-illustration>div:first-of-type{min-height:96px;padding-right:156px}
.screen-illustration{position:absolute;z-index:1;top:0;right:0;display:block;width:136px;height:96px;object-fit:contain;background:#fff;border:1px solid var(--mirai-outline);border-radius:8px;padding:3px}
.screen-illustration--mint{box-shadow:5px 5px 0 var(--mirai-mint)}
.screen-illustration--coral{box-shadow:5px 5px 0 var(--mirai-coral)}
.screen-illustration--lavender{box-shadow:5px 5px 0 var(--mirai-lavender)}
.screen-illustration--yellow{box-shadow:5px 5px 0 var(--mirai-yellow)}
.plan-wizard,.plan-wizard-invite{border:1px solid var(--mirai-outline)!important;border-radius:10px!important;background:#fff;box-shadow:none}
.plan-grid:not([data-detail-open="true"]){grid-template-columns:minmax(0,1fr)}
.goal-progress{background:#e4e7dc}.goal-progress>div{background:var(--mirai-green)}
/* Dense data stays legible; input transparency preserves memo and category colors. */
body.mirai-design .data-table-wrap{background:#fff!important;border:1px solid var(--mirai-outline)!important;border-radius:10px!important;box-shadow:none;max-width:100%;overflow:auto}
.budget-table{min-width:1050px}.budget-table th{font-weight:700!important;font-size:13px!important;line-height:1.6}.budget-table td{font-size:13px!important;line-height:1.5;border-color:var(--mirai-line)!important}
.budget-table thead th{background:#edf2e9!important;border-bottom:1px solid var(--mirai-outline)!important;padding-block:12px!important}
body.mirai-design .budget-table td input:not([type=checkbox]):not([type=radio]){font-size:13px!important;min-height:33px;border-radius:3px;background-color:transparent!important;min-width:60px}
.budget-table input:not([readonly]):hover{background:#edf5f0!important}.budget-table input:not([readonly]):focus{box-shadow:inset 0 -2px 0 var(--mirai-green)!important}
/* 1年分の表は必ず横スクロールになるので、左端の「月」列は貼り付けたままにする。
   これが無いと、右のほうの列を見ている間はどの月の行なのか分からなくなる。
   行の色（予算行・年間合計行・メモ済みセル）はインラインで tr / td に付くので、
   貼り付けたセルの地色は inherit で行から引き継ぐ。 */
.budget-table tbody tr{background:#fff}
.budget-table th:first-child,.budget-table td:first-child{position:sticky;left:0;z-index:1;background-color:inherit;box-shadow:1px 0 0 var(--mirai-line)}
.budget-table thead th:first-child{z-index:2;background-color:#edf2e9!important}
.chart-axis-label,.chart-axis-month,.chart-axis-year,.chart-axis-age{font-size:12px!important;color:var(--mirai-muted)}
[data-screen-label="予定表"]{--mirai-line:#ccd2c3}
body.mirai-design .settings-panel,body.mirai-design [role=dialog]{border:1px solid var(--mirai-outline)!important;border-radius:10px!important;box-shadow:5px 5px 0 #24272122;background:#fff}
body.mirai-design .settings-panel{width:410px!important;padding:20px!important;max-width:calc(100vw - 28px);max-height:calc(100dvh - 90px)!important;top:78px!important}
body.mirai-design .app-mobile-nav{background:var(--mirai-canvas)!important;border-top:1px solid var(--mirai-ink)!important;box-shadow:none;border-radius:0}
body.mirai-design .app-mobile-nav button{font-size:12px;color:var(--mirai-ink);border-radius:6px;line-height:1.4}
body.mirai-design .app-mobile-nav button.is-active{background:var(--mirai-mint);color:var(--mirai-ink);box-shadow:inset 0 -2px 0 var(--mirai-green)}
body.mirai-design .app-mobile-nav button.is-record{background:var(--mirai-ink);color:#fff;box-shadow:none}
@media(max-width:1080px){.mirai-wrap{width:calc(100% - 64px)}.mirai-landing-header{gap:20px}.mirai-landing-header nav{gap:18px}.mirai-landing-header .brand-lockup-inline{font-size:20px}.mirai-hero h1{font-size:54px}.mirai-hero-lead{align-items:flex-start}.mirai-tile img{height:185px}.mirai-tile h2{font-size:23px}.mirai-landing .mirai-cta{min-width:185px}.app-header .app-tabs{order:3;width:100%;justify-content:center}.plan-grid{grid-template-columns:minmax(0,1fr)}.auth-story{max-width:380px}body.mirai-design .gate-shell{gap:40px}}
@media(max-width:760px){.mirai-wrap{width:calc(100% - 40px)}.mirai-landing-header{flex-wrap:wrap;padding-block:20px;gap:16px}.mirai-landing-header nav{margin-left:auto}.mirai-landing-header nav a{display:none}.mirai-landing-header>.mirai-cta{width:100%;justify-content:center}.mirai-hero h1{font-size:44px}.mirai-stamp{width:95px;height:95px;font-size:12px}.mirai-hero-lead{flex-direction:column;align-items:flex-start}.mirai-feature{grid-template-columns:35px 1fr;gap:12px 18px}.mirai-feature p{grid-column:2}.mirai-screen-grid{grid-template-columns:1fr}.mirai-screen-card-wide{grid-column:auto}.mirai-screen-card-wide .mirai-screen-frame{aspect-ratio:auto}.mirai-screens h2,.mirai-pricing h2,.mirai-features>h2,.mirai-start h2{font-size:29px}.mirai-pricing-table th,.mirai-pricing-table td{padding:12px}.mirai-start{grid-template-columns:1fr;gap:18px}.mirai-tile-label{padding-inline:14px;font-size:11px}.mirai-tile img{height:145px;padding-inline:6px}.mirai-tile-caption{padding:18px 14px}.mirai-tile h2{font-size:20px}.mirai-tile p{font-size:13px}body.mirai-design .gate-shell{flex-direction:column;padding:30px 22px!important;gap:25px}.auth-story{width:100%;max-width:420px;flex:none}
/* 以前はスマホで消していたが、ログイン画面が文字だけになってしまう。縦に積む
   レイアウトのままでも収まる高さ（130px）まで下げて残す。 */
.auth-story img{max-height:130px;padding:4px}
.auth-story h1{font-size:28px;margin:15px 0}.auth-story p{display:none}.auth-card{width:100%}.plan-hero-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.plan-hero-grid>div:first-child{grid-column:1/-1}.plan-hero-grid>div:first-child{display:block!important}
/* 見出しの左に回り込ませる小さいイラスト。1列レイアウトのままなので高さは増えない。 */
.plan-hero-grid>div:first-child .plan-mini-illustration{float:left;width:92px;height:66px;margin:3px 12px 2px 0}.plan-hero-kpi{padding:14px}.app-header .app-brand-subtitle{display:none}.home-hero-illustration img{height:160px}body.mirai-design .home-hero{grid-template-columns:minmax(0,1fr) 165px;gap:20px}.settings-panel{left:auto;right:14px}}
@media(max-width:600px){.mirai-hero-eyebrows>span:last-child{display:none}.mirai-hero-title{position:relative;margin-top:65px;display:block}.mirai-hero h1{font-size:clamp(30px,8vw,44px);white-space:nowrap}.mirai-stamp{position:absolute;right:0;top:-96px;width:80px;height:80px;font-size:11px;gap:4px}.mirai-stamp span:nth-child(2){font-size:23px}.mirai-hero-lead p{font-size:15px}.mirai-tiles{grid-template-columns:1fr}.mirai-tile img{height:220px;padding:8px 18px}.mirai-tile-label{font-size:12px;padding-inline:22px}.mirai-tile h2{font-size:26px}.mirai-tile p{font-size:15px}.mirai-tile-caption{padding:20px 23px}.mirai-scroll{flex-wrap:wrap}.mirai-features{padding-block:48px}.mirai-feature h3{font-size:23px}.mirai-feature p{font-size:15px}.mirai-closing h2{font-size:29px}.mirai-footer nav{gap:12px 20px}.mirai-public .public-header-inner{flex-wrap:wrap}.mirai-public section div{font-size:15px!important}.mirai-public h1{font-size:27px!important}/* 画面の塊どうしの間隔。PCの22pxはスマホだと、見出しと区分チップだけで1画面を
   使い切ってしまい、肝心の表までスクロールが要る。塊の間だけを詰める。 */
[data-screen-label]{gap:12px!important}
[data-screen-label]>div:first-of-type{gap:8px 10px!important}
.uchi-kpi{padding:10px 12px!important}
/* 2列に並べたとき最後の1枚が余ると、右半分が空いたまま残る。段いっぱいに広げる。 */
.uchi-kpi-grid>*:last-child:nth-child(odd){grid-column:1/-1}
.uchi-kpi-sub{font-size:11.5px!important;line-height:1.55!important}
/* 内訳「月ごと」の行。以前はスマホで「残り」「項目名」「予算＋実績」が3段に割れて
   1行140px近くあり、画面に4項目しか入らなかった。項目名と実績を1段目、予算と
   残り／超過を2段目に畳んで2段にし、その下に使い具合の帯を1本敷く。並べ替えは
   order で行い、::after（行が予算を持つときだけ）で段を折り返す。 */
.uchi-month-row{align-items:center!important;gap:4px 8px!important;padding:8px 10px!important;border-radius:10px!important}
.uchi-month-name{order:0;flex:1 1 auto!important;min-width:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uchi-month-usage{order:0;flex:none}
.uchi-month-spacer{display:none!important}
.uchi-month-amount{order:1;flex:none!important;width:112px!important}
.uchi-month-row:has(.uchi-month-budget):after{content:"";flex-basis:100%;height:0;order:2}
.uchi-month-budget{order:3}
.uchi-month-budget>input{width:88px!important}
.uchi-month-diff{order:4;margin-left:auto}
.uchi-month-bar{order:5}
body.mirai-design .uchi-month-row input:not([type=checkbox]):not([type=radio]){min-height:34px;padding:4px 8px!important}
/* 1年分の表もスマホでは1行48px近くあった。入力欄の背を詰めて、同じ画面に
   1年ぶんの月が収まるようにする。 */
.budget-table{min-width:600px}
.budget-table thead th{padding-block:8px!important}
body.mirai-design .budget-table td input:not([type=checkbox]):not([type=radio]){min-height:28px!important;min-width:56px!important;padding:3px 5px!important}
.chart-axis-label,.chart-axis-month,.chart-axis-year,.chart-axis-age{font-size:11px!important}.chart-xtick-alt{display:none}}
@media(max-width:480px){body.mirai-design .app-main{padding:22px 14px 106px!important}.app-header .brand-lockup-inline{gap:7px}.app-header .brand-mark-inline{width:30px;height:30px}.app-header .brand-lockup-inline span{font-size:17px!important}.app-header .app-header-inner{gap:10px!important;padding:12px!important}.app-header .app-actions{flex-wrap:nowrap}.app-header .app-actions>button{font-size:13px!important;min-height:38px;padding:8px 11px!important}.app-header .app-tabs{display:none!important}.app-mobile-nav{left:0;right:0;bottom:0;padding:7px 7px calc(7px + env(safe-area-inset-bottom))}.app-mobile-nav button{min-height:51px!important;padding:6px 2px!important;font-size:11px!important}[data-screen-label]>div:first-of-type h1{font-size:25px!important}.home-kpi-grid{grid-template-columns:minmax(0,1fr)!important}
/* イラストを消すとホームが数字だけになるので、細い列（78px）にして残す。
   本文が狭くなるぶん、金額の文字サイズと余白も落として折り返しを増やさない。 */
body.mirai-design .home-hero{grid-template-columns:minmax(0,1fr) 78px;padding:18px;gap:0 12px;align-items:center}
.home-hero-illustration img{height:84px;padding:3px}
.home-hero-value{font-size:clamp(30px,8vw,40px)}.home-hero-actions{display:flex;flex-wrap:wrap;gap:8px}
/* イラストのぶん本文が狭くなるので、ボタンは内容の幅で並べて1行に収める。 */
body.mirai-design .home-hero-actions button{flex:1 1 auto;min-width:0;white-space:nowrap;font-size:13px!important;padding:9px 10px!important}.home-hero-meta{flex-wrap:wrap}.record-layout>section,.record-layout>aside{padding:20px!important}.record-illustration{height:170px}.plan-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-hero-grid>div:first-child{grid-column:1/-1}.plan-hero-kpi:last-child{grid-column:1/-1}.screen-with-illustration>div:first-of-type{min-height:76px;padding-right:96px}.screen-illustration{width:82px;height:62px;padding:2px;box-shadow:3px 3px 0 var(--mirai-mint)}.screen-illustration--coral{box-shadow-color:var(--mirai-coral)}.screen-illustration--lavender{box-shadow-color:var(--mirai-lavender)}.screen-illustration--yellow{box-shadow-color:var(--mirai-yellow)}body.mirai-design .settings-panel{left:12px;right:12px;width:auto!important;top:64px!important;max-height:calc(100dvh - 140px - env(safe-area-inset-bottom))!important;overscroll-behavior:contain}.auth-card .brand-lockup-inline{font-size:20px}body.mirai-design .auth-card{padding:25px!important}.mirai-public .brand-lockup-inline{font-size:18px}.mirai-public .public-header-cta{font-size:13px!important}}
@media(prefers-reduced-motion:reduce){body.mirai-design *,body.mirai-design *:before,body.mirai-design *:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

@media(max-width:600px){body.mirai-design input:not([type=checkbox]):not([type=radio]),body.mirai-design textarea,body.mirai-design select{font-size:16px!important}}

.mirai-screen-nav{display:none}.mirai-screen-frame img{-webkit-user-drag:none;user-select:none}.mirai-screen-card-wide{grid-column:1/-1}.mirai-screen-card-wide .mirai-screen-frame a{max-width:none}
@media(max-width:760px){.mirai-screen-card-wide{grid-column:auto}.mirai-screen-grid{touch-action:pan-x pan-y;cursor:grab}.mirai-screen-grid.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}.mirai-screen-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}.mirai-screen-nav button{font:inherit;min-height:44px;border:1px solid var(--mirai-outline);border-radius:999px;padding:8px 16px;background:#fff;color:var(--mirai-ink);cursor:pointer}.mirai-screen-nav button:disabled{opacity:.4;cursor:default}.mirai-screen-nav span{font-variant-numeric:tabular-nums;font-size:14px}.mirai-screen-card-wide .mirai-screen-frame{display:flex;align-items:flex-start;min-height:640px;margin-top:0}}