:root{
  --cream:#faf7f2; --card:#ffffff; --ink:#2b3a37; --sub:#6f817c; --line:#ece5da;
  --brand:#0e7d72; --brand-d:#0a5a52; --coral:#ff7a5c; --coral-d:#e85d3d; --gold:#efa92e;
  --rental:#2f6fb0; --purchase:#0e7d72; --pr:#8a958f; --win:#fff5ec;
  --radius:18px; --shadow:0 8px 34px rgba(30,60,52,.10); --shadow-sm:0 2px 14px rgba(30,60,52,.07);
  font-size:16px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.8;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 60% at 100% 0%, #fdf3ec 0%, rgba(250,247,242,0) 60%);}
.wrap{max-width:840px;margin:0 auto;padding:0 18px}
h1,h2,h3,.logo,.eyebrow{font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif}
a{color:var(--brand-d)}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes floatArt{from{opacity:0;transform:scale(.98) translateY(10px)}to{opacity:1;transform:none}}

/* header */
header{background:rgba(255,255,255,.72);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;padding:11px 0}
header .wrap{display:flex;align-items:center;gap:10px}
header .logo{font-weight:700;font-size:1.04rem;color:var(--brand-d);text-decoration:none;display:flex;flex-direction:column;line-height:1.2}
header .logo small{font-weight:500;font-size:.68rem;color:var(--sub);margin-top:1px}

/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:18px;padding:34px 0 14px;align-items:center}
@media(min-width:760px){.hero{grid-template-columns:1.05fr .95fr;gap:30px;padding:48px 0 24px}}
.hero-copy>*{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
.hero-copy .eyebrow{animation-delay:.05s}
.hero-copy h1{animation-delay:.12s}
.hero-copy>p{animation-delay:.2s}
.hero-copy .hero-cta{animation-delay:.28s}
.hero-copy .hero-note{animation-delay:.34s}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;color:var(--coral-d);background:var(--win);border:1px solid #ffe2d4;padding:5px 12px;border-radius:999px;letter-spacing:.02em}
.hero h1{font-size:2.05rem;line-height:1.34;margin:.45em 0 .35em;letter-spacing:.01em}
@media(min-width:760px){.hero h1{font-size:2.5rem}}
.hero h1 em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.34em;background:var(--gold);opacity:.32;border-radius:4px;z-index:-1}
.hero-copy>p{color:#46554f;font-size:1.02rem;margin:.2em 0 1.1em;max-width:30em}
.hero-cta{display:inline-block;background:var(--coral);color:#fff;text-decoration:none;font-weight:700;font-size:1.02rem;padding:14px 26px;border-radius:14px;box-shadow:0 8px 20px rgba(255,122,92,.34);transition:transform .15s,box-shadow .15s,background .15s}
.hero-cta:hover{background:var(--coral-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,122,92,.42)}
.hero-note{font-size:.8rem;color:var(--sub);margin:.9em 0 0}
.hero-art{animation:floatArt .8s ease both .2s;min-height:210px;border-radius:22px;
  background:url("/hero.jpg") center/cover no-repeat, linear-gradient(135deg,#bfe3dd 0%,#f6d9c6 100%);
  box-shadow:var(--shadow);position:relative;overflow:hidden}
@media(min-width:760px){.hero-art{min-height:330px}}
.hero-art::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);border-radius:22px}

/* tool card */
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin:22px 0;scroll-margin-top:72px;animation:fadeUp .6s ease both .15s}
.tool h2{font-size:1.22rem;margin:.1em 0 .9em;display:flex;align-items:center;gap:9px}
.tool h2::before{content:"";width:8px;height:24px;background:linear-gradient(var(--brand),var(--gold));border-radius:4px}
.grid{display:grid;grid-template-columns:1fr;gap:15px}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.82rem;color:#4a5a55;margin-bottom:5px;font-weight:700}
.field input,.field select{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;background:#fcfaf6;color:var(--ink);font-family:inherit;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(14,125,114,.13);background:#fff}
.field .unit{font-size:.74rem;color:var(--sub);margin-top:4px}
.span2{grid-column:1/-1}
.more{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;background:#fcfaf6;overflow:hidden}
.more summary{cursor:pointer;padding:12px 15px;font-size:.85rem;font-weight:700;color:var(--brand-d);list-style:none;user-select:none}
.more summary::-webkit-details-marker{display:none}
.more[open] summary{border-bottom:1px solid var(--line)}
.more .grid{padding:14px}

/* verdict */
.verdict{margin:20px 0 6px;padding:18px 18px 16px;border-radius:15px;border:1px solid var(--line);animation:fadeUp .4s ease}
.verdict.is-rental{background:linear-gradient(180deg,#eef5fb,#f7fbff);border-color:#d3e4f3}
.verdict.is-purchase{background:linear-gradient(180deg,#e9f6f1,#f5fbf8);border-color:#cae8df}
.verdict.is-tie{background:linear-gradient(180deg,#f6f4ee,#fbfaf6);border-color:#e7e1d4}
.verdict h3{margin:.1em 0 .35em;font-size:1.25rem}
.verdict.is-rental h3{color:#1d5790}.verdict.is-purchase h3{color:var(--brand-d)}.verdict.is-tie h3{color:#7d7150}
.verdict p{margin:.2em 0;font-size:.96rem;color:#34433f}
.calc-basis{font-size:.78rem;color:var(--sub);margin-top:.6em;padding-top:.6em;border-top:1px dashed var(--line)}

.summary{display:flex;gap:13px;margin:15px 0}
.summary .box{flex:1;text-align:center;background:#fcfaf6;border:1px solid var(--line);border-radius:13px;padding:14px}
.summary .box .k{font-size:.76rem;color:var(--sub)}
.summary .box .v{font-size:1.32rem;font-weight:700;margin-top:3px;font-family:"Zen Maru Gothic",sans-serif}

.periods{margin:18px 0}
.periods .cap{font-size:.84rem;color:var(--sub);margin-bottom:8px}
.prow{display:flex;align-items:center;gap:11px;margin:9px 0}
.prow .plabel{width:36px;font-weight:700;font-size:.85rem;color:var(--sub);flex:none}
.pbars{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.bar{position:relative;min-width:96px;height:28px;border-radius:8px;display:flex;align-items:center;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bar span{font-size:.72rem;color:#fff;padding:0 9px;white-space:nowrap;font-weight:700}
.bar-rental{background:linear-gradient(135deg,#3f7cbd,#2f6fb0)}
.bar-purchase{background:linear-gradient(135deg,#16907f,#0e7d72)}
.bar.win{box-shadow:0 0 0 2.5px var(--gold)}

/* CTA */
#ctaArea{margin-top:20px}
.cta-block{border:1px solid var(--line);border-radius:15px;padding:16px;margin:13px 0;background:#fcfaf6}
.cta-block.primary{border-color:#ffd9c8;background:var(--win)}
.cta-block h3{margin:.1em 0 .25em;font-size:1.04rem}
.cta-block p{margin:.2em 0 .7em;font-size:.85rem;color:var(--sub)}
.cta-block .pr{font-size:.72rem;color:var(--pr);margin-left:4px;font-weight:600}
.cta-list{display:flex;flex-direction:column;gap:9px}
a.cta{display:flex;flex-direction:column;gap:2px;text-align:center;background:var(--brand);color:#fff;text-decoration:none;padding:13px;border-radius:12px;transition:transform .14s,box-shadow .14s,background .14s}
a.cta:hover{background:var(--brand-d);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cta-name{font-weight:700;font-size:.96rem}
.cta-meta{font-size:.72rem;opacity:.93;font-weight:400}
.cta-block.primary a.cta{background:var(--coral)}
.cta-block.primary a.cta:hover{background:var(--coral-d)}
.cta-block a.cta.cta-soft,.cta-block.primary a.cta.cta-soft{background:#fff;color:var(--brand);border:1px solid var(--line)}
.cta-block a.cta.cta-soft:hover,.cta-block.primary a.cta.cta-soft:hover{background:var(--win);border-color:#ffd9c8;transform:translateY(-2px)}
.cta-soft .cta-meta{opacity:.8}
.ad-banner{margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fcfaf6;text-align:center}
.ad-banner a{display:inline-block;line-height:0;transition:transform .14s}
.ad-banner a:hover{transform:translateY(-2px)}
.ad-banner img{max-width:100%;height:auto}

.note-chuko{font-size:.85rem;background:#eef5fb;border:1px solid #d3e4f3;border-radius:12px;padding:11px 13px;margin:15px 0}
.pr-note{font-size:.78rem;color:var(--sub);background:#fcfaf6;border:1px dashed var(--line);border-radius:12px;padding:11px 13px;margin:15px 0}

/* related */
.related{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin:22px 0;box-shadow:var(--shadow-sm)}
.related h2{font-size:1.1rem;margin:0 0 .6em}
.related h3{font-size:.92rem;margin:1em 0 .4em;color:var(--sub)}
.related ul{margin:0;padding-left:1.1em}
.related li{margin:.45em 0;font-size:.93rem}
.related a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.related a:hover{border-bottom-color:var(--brand)}

/* content */
.content{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:22px 0;box-shadow:var(--shadow-sm)}
.content h2{font-size:1.2rem;margin:1.2em 0 .45em}.content h2:first-child{margin-top:0}
.content h3{font-size:1.04rem;margin:1.1em 0 .35em}
.content p,.content li{font-size:.96rem;color:#33433f}
.lead-answer{background:linear-gradient(180deg,#eef7f4,#f6fbf9);border-left:4px solid var(--brand);padding:12px 16px;border-radius:0 12px 12px 0;font-weight:500}
.sources{font-size:.85rem;color:#3a4a47}
.faq dt{font-weight:700;margin:1em 0 .2em;font-family:"Zen Maru Gothic",sans-serif}
.faq dd{margin:0 0 .7em;color:#3a4a47;font-size:.93rem}

/* footer */
footer{margin-top:30px;background:#0c211e;color:#cfdbd7;padding:26px 0}
footer .wrap{font-size:.82rem}
footer a{color:#a3ddd3;text-decoration:none;margin-right:15px}
footer .copy{margin-top:11px;opacity:.72}

/* article / static page */
.article h2{font-size:1.26rem;margin:1.5em 0 .5em;padding-bottom:.25em;border-bottom:2px solid var(--line);font-family:"Zen Maru Gothic",sans-serif}
.article h3{font-size:1.08rem;margin:1.25em 0 .4em}
.article p,.article li{font-size:.97rem;line-height:1.9}
.article blockquote{background:#fcfaf6;border-left:4px solid var(--brand);margin:1em 0;padding:11px 15px;border-radius:0 10px 10px 0;font-size:.86rem;color:#3a4a47}
.article a{color:var(--brand-d)}
.table-wrap{overflow-x:auto;margin:1.1em 0;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--line)}
.article table{border-collapse:collapse;width:100%;font-size:.85rem;min-width:480px}
.article th,.article td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.article th{background:#f1f7f4;font-weight:700}
.article tr:last-child td{border-bottom:none}
.article td:last-child,.article th:last-child{border-right:none}
.page{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:26px 0;box-shadow:var(--shadow-sm)}
.page h1{font-size:1.5rem;margin:0 0 .6em;font-family:"Zen Maru Gothic",sans-serif}
.page h2{font-size:1.12rem;margin:1.3em 0 .4em}
.page p,.page li{font-size:.95rem;color:#33433f}
