/* loan-matome.com 2026 renewal */
:root{
  --ink:#1d2733; --ink2:#4a5868; --mute:#7a8795;
  --bg:#f6f5f1; --card:#ffffff; --line:#e3e0d8;
  --navy:#1f3a5f; --navy2:#2d4f7c; --teal:#0f766e; --teal-bg:#e7f4f2;
  --warn:#9a4d00; --warn-bg:#fff4e5; --red:#b42318;
  --radius:12px; --w:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;font-size:16px;line-height:1.85;letter-spacing:.02em}
a{color:var(--navy2)}
a:hover{color:var(--teal)}
img{max-width:100%;height:auto}
.wrap{max-width:var(--w);margin:0 auto;padding:0 16px}

/* header */
.site-header{background:var(--navy);color:#fff}
.site-header .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{color:#fff;text-decoration:none;display:flex;flex-direction:column;line-height:1.35;margin-right:auto}
.brand b{font-size:1.15rem;letter-spacing:.04em}
.brand small{font-size:.75rem;opacity:.8}
.brand:hover{color:#fff}
.hsearch{display:flex}
.hsearch input{width:180px;border:0;border-radius:8px 0 0 8px;padding:7px 10px;font-size:.9rem}
.hsearch button{border:0;background:var(--teal);color:#fff;border-radius:0 8px 8px 0;padding:0 12px;cursor:pointer}
.gnav{background:var(--navy2)}
.gnav ul{list-style:none;margin:0 auto;padding:0 8px;display:flex;overflow-x:auto;max-width:var(--w)}
.gnav a{display:block;color:#fff;text-decoration:none;padding:10px 14px;font-size:.92rem;white-space:nowrap}
.gnav a:hover,.gnav a[aria-current]{background:rgba(255,255,255,.14);color:#fff}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;margin:28px auto}
@media (max-width:900px){.layout{grid-template-columns:1fr}.hsearch{width:100%}.hsearch input{flex:1}}
main{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
@media (max-width:600px){.card{padding:20px 16px}}
.crumb{font-size:.82rem;color:var(--mute);margin:0 0 10px}
.crumb a{color:var(--mute)}

h1{font-size:1.6rem;line-height:1.45;margin:.2em 0 .5em;color:var(--navy)}
h2{font-size:1.3rem;line-height:1.5;margin:2em 0 .8em;padding:.4em .7em;border-left:5px solid var(--teal);background:var(--teal-bg);border-radius:0 8px 8px 0}
h3{font-size:1.1rem;margin:1.6em 0 .6em;color:var(--navy)}
.meta{font-size:.85rem;color:var(--mute);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.meta a{color:var(--mute)}
.chip{display:inline-block;font-size:.78rem;background:var(--teal-bg);color:var(--teal);border-radius:999px;padding:1px 10px;text-decoration:none}

/* article body */
.entry p{margin:0 0 1.1em}
.entry strong{background:linear-gradient(transparent 62%,#fde9b8 62%);font-weight:700}
.entry img{border-radius:8px}
.entry table{border-collapse:collapse;width:100%;margin:1em 0}
.entry th,.entry td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.entry th{background:#f1efe9}
.entry ul,.entry ol{padding-left:1.4em}
.entry li{margin:.3em 0}
.table-scroll{overflow-x:auto}

/* notices */
.note{border-radius:10px;padding:14px 18px;margin:0 0 22px;font-size:.92rem;line-height:1.75}
.note p{margin:.3em 0}
.note-archive{background:var(--warn-bg);border:1px solid #f3d3a6;color:#5b3a12}
.note-info{background:var(--teal-bg);border:1px solid #bfe3dd}
.note-help{background:#eef2f8;border:1px solid #cfd9ea}
.note b{color:inherit}

/* boxes & lists */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px dashed var(--line);padding:10px 0;display:flex;gap:12px;align-items:baseline}
.post-list time{font-size:.8rem;color:var(--mute);white-space:nowrap;min-width:6.5em}
.post-list a{text-decoration:none}
.post-list a:hover{text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:14px 0}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--teal);transform:translateY(-2px);color:var(--ink)}
.tile b{display:block;color:var(--navy);margin-bottom:4px}
.tile span{font-size:.86rem;color:var(--ink2);line-height:1.6;display:block}
.tile .ico{font-size:1.5rem;line-height:1;margin-bottom:6px;display:block}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:28px;font-size:.9rem}
.pager a{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-decoration:none;background:#fbfaf7}
.pager .next{text-align:right}
.cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:var(--radius);padding:18px 22px;margin:28px 0 0}
.cta p{margin:0;flex:1;min-width:220px}
.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;border-radius:999px;padding:9px 22px;font-weight:700;border:0;cursor:pointer;font-size:.95rem}
.btn:hover{background:#0b5f58;color:#fff}
.btn-ghost{background:#fff;color:var(--navy)}
.btn-ghost:hover{background:#eef2f8;color:var(--navy)}

/* sidebar */
aside .card{padding:20px;margin-bottom:20px}
aside h2{font-size:1rem;margin:0 0 10px;padding:0 0 6px;border:0;border-bottom:2px solid var(--teal);background:none;border-radius:0}
aside ul{list-style:none;margin:0;padding:0;font-size:.9rem}
aside li{padding:5px 0;border-bottom:1px dashed var(--line)}
aside li:last-child{border-bottom:0}
aside a{text-decoration:none}
aside .count{color:var(--mute);font-size:.8rem}
.side-help{background:#eef2f8}

/* hero */
.hero{background:linear-gradient(135deg,var(--navy) 0%,#264c78 60%,var(--teal) 130%);color:#fff;border-radius:var(--radius);padding:34px 30px;margin-bottom:24px}
.hero h1{color:#fff;font-size:1.75rem;margin:0 0 .4em}
.hero p{margin:0 0 1em;opacity:.95;max-width:40em}
.hero .btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:600px){.hero{padding:24px 18px}.hero h1{font-size:1.4rem}}
.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0;display:grid;gap:12px}
.steps li{counter-increment:s;background:#fbfaf7;border:1px solid var(--line);border-radius:10px;padding:12px 14px 12px 54px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps b{color:var(--navy)}

/* simulator */
.sim fieldset{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 14px}
.sim legend{font-weight:700;color:var(--navy);padding:0 6px}
.sim label{display:block;font-size:.88rem;color:var(--ink2);margin-bottom:8px}
.sim input,.sim select{font:inherit;width:100%;padding:7px 10px;border:1px solid #cfcac0;border-radius:8px;background:#fff}
.sim .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sim .row4{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px}
@media (max-width:640px){.sim .row{grid-template-columns:1fr}.sim .row4{grid-template-columns:1fr 1fr}}
.sim .del{background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;padding:7px 10px;color:var(--mute)}
.result{background:var(--teal-bg);border:1px solid #bfe3dd;border-radius:10px;padding:16px 18px;margin-top:14px}
.result .big{font-size:1.4rem;font-weight:700;color:var(--navy)}
.result .warn{color:var(--red);font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.kpi{background:#fff;border-radius:8px;padding:10px 12px;border:1px solid var(--line)}
.kpi small{display:block;color:var(--mute);font-size:.78rem}
.kpi b{font-size:1.15rem;color:var(--navy)}
.bars{margin-top:12px}
.bar{display:grid;grid-template-columns:7em 1fr;gap:8px;align-items:center;font-size:.85rem;margin:6px 0}
.bar div{height:22px;border-radius:5px;background:#dfe6ef;position:relative;overflow:hidden}
.bar i{display:block;height:100%;background:var(--navy2)}
.bar i.b{background:var(--teal)}
.bar em{position:absolute;right:4px;top:2px;font-style:normal;font-size:.78rem;line-height:18px;color:var(--ink);background:rgba(255,255,255,.9);border-radius:4px;padding:0 5px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{font:inherit;font-size:.9rem;border:1px solid var(--line);background:#fbfaf7;border-radius:999px;padding:6px 16px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.small{font-size:.82rem;color:var(--mute)}

/* footer */
.site-footer{background:#18222e;color:#c8d0da;font-size:.86rem;margin-top:40px}
.site-footer .wrap{padding-top:28px;padding-bottom:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.site-footer h2{all:unset;display:block;color:#fff;font-weight:700;margin-bottom:8px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{padding:3px 0}
.site-footer a{color:#c8d0da}
.site-footer a:hover{color:#fff}
.copy{border-top:1px solid #2b3846;text-align:center;padding:14px 16px;font-size:.78rem;color:#8e9aa8}

/* search */
.search-box{display:flex;gap:8px;margin:0 0 18px}
.search-box input{flex:1;font:inherit;padding:9px 12px;border:1px solid #cfcac0;border-radius:8px}
mark{background:#fde9b8;padding:0 1px}