/* Kataware LP styles */
:root{
  --navy:#13294B; --ink2:#3A4A63; --primary:#0075C2; --primary-d:#015A97;
  --brand:#82CDDD; --brand-lt:#E4F4F8; --accent-d:#2E8CA6;
  --bg:#F5FAFB; --white:#fff; --line:#E2E8EA; --gray:#5E6673;
  --sh:0 10px 30px -16px rgba(19,41,75,.30);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Yu Gothic UI",Meiryo,sans-serif;color:var(--navy);background:var(--white);line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:820px}
.dot{color:var(--brand)}

/* header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-head__inner{max-width:1080px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px}
.site-logo{font-weight:800;font-size:20px;color:var(--navy);letter-spacing:.01em}
.site-head__by{font-size:11.5px;color:var(--gray);border-left:1px solid var(--line);padding-left:14px}
.site-head__cta{margin-left:auto;background:var(--primary);color:#fff;font-weight:700;font-size:13px;padding:8px 18px;border-radius:99px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;border-radius:99px;padding:14px 30px;font-size:16px;transition:.18s;cursor:pointer;border:2px solid transparent;line-height:1.3;text-align:center}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-d);transform:translateY(-1px)}
.btn--ghost{background:#fff;border-color:var(--primary);color:var(--primary)}
.btn--ghost:hover{background:var(--brand-lt)}
.btn--cta{background:var(--brand);color:var(--navy)}
.btn--cta:hover{background:#6FC2D6;transform:translateY(-1px)}
.btn--xl{padding:17px 40px;font-size:17px}

/* hero */
.hero{background:linear-gradient(170deg,#fff 0%,var(--bg) 100%);padding:64px 0 60px}
.hero--lp{position:relative;overflow:hidden;min-height:540px;display:flex;align-items:center;background:#EAF6FB;padding:0}
.hero--lp .wrap{position:relative;z-index:3;width:100%}
.hero__body{max-width:560px}
.hero__illust{position:absolute;inset:0;z-index:1}
.hero__illust picture{display:block;width:100%;height:100%}
.hero__illust img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero__illust::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to right,rgba(234,246,251,.97) 0%,rgba(234,246,251,.88) 24%,rgba(234,246,251,.46) 50%,rgba(234,246,251,0) 72%)}
@media(max-width:820px){
  .hero--lp{display:block;min-height:0;padding:46px 0 0}
  .hero--lp .wrap{z-index:3}
  .hero__illust{position:relative;inset:auto;z-index:1;margin-top:24px}
  .hero__illust img{height:280px}
  .hero__illust::after{display:none}
}
.hero__eyebrow{display:inline-block;font-size:13px;font-weight:800;color:var(--accent-d);letter-spacing:.14em;margin-bottom:14px}
.hero__h1{font-size:clamp(28px,5vw,46px);font-weight:900;line-height:1.42;letter-spacing:-.01em;color:var(--navy)}
.brandword{color:var(--primary)}
.hero__lead{margin-top:20px;font-size:clamp(16px,2.4vw,19px);color:var(--ink2);line-height:1.9}
.pill{display:inline-block;margin-top:24px;background:var(--brand);color:var(--navy);font-weight:800;font-size:14px;padding:8px 20px;border-radius:99px}
.pill b{font-size:16px}
.hero__cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px}
.hero__note{margin-top:14px;font-size:13px;color:var(--gray)}

/* sections */
.sec{padding:62px 0}
.sec:nth-of-type(even){background:var(--bg)}
.sec__label{font-size:12px;font-weight:800;color:var(--accent-d);letter-spacing:.18em;margin-bottom:10px}
.sec__h2{font-size:clamp(22px,3.6vw,30px);font-weight:900;line-height:1.45;color:var(--navy);letter-spacing:-.01em}
.sec__sub{margin-top:12px;color:var(--gray);font-size:15px}
.lead-c{margin-top:16px;font-size:17px;color:var(--ink2);line-height:1.95}

/* grids */
.grid{display:grid;gap:18px;margin-top:30px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* bands */
.band{margin-top:28px;border-radius:14px;padding:18px 24px;font-weight:800;text-align:center;line-height:1.7}
.band--soft{background:var(--brand-lt);color:var(--navy);font-size:15px}
.band--brand{background:var(--brand);color:var(--navy);font-size:17px}

/* problem cards */
.pcard{background:#fff;border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:12px;padding:20px 22px;box-shadow:var(--sh)}
.pcard h3{font-size:17px;color:var(--navy);margin-bottom:8px}
.pcard p{font-size:14px;color:var(--gray)}

/* choice / why cards */
.ccard{border-radius:16px;padding:28px 26px;box-shadow:var(--sh)}
.ccard--plain{background:#fff;border:1px solid var(--line)}
.ccard--ink{background:var(--navy);color:#fff}
.ccard__cap{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--gray)}
.ccard--ink .ccard__cap{color:var(--brand-lt)}
.ccard__big{font-size:30px;font-weight:900;margin:8px 0;color:var(--navy)}
.ccard--ink .ccard__big{color:#fff}
.ccard__sub2{font-size:14px;font-weight:800;color:var(--brand);margin-bottom:8px}
.ccard__sub{font-size:14px;color:var(--ink2)}
.ccard--ink .ccard__sub{color:#CFE7F2}
.why__txt{margin-top:10px;font-size:15px;color:var(--ink2)}
.ccard--ink .why__txt{color:#E6F2F8}

/* what cards */
.what-cards{margin-top:24px}
.wcard{background:#fff;border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:12px;padding:20px 14px;text-align:center;font-weight:800;color:var(--navy);font-size:15px;box-shadow:var(--sh)}

/* demo */
.demo__fig{margin:30px auto 0;max-width:900px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 60px -28px rgba(19,41,75,.45)}
.demo__cap{margin-top:18px;text-align:center;color:var(--gray);font-size:14px}

/* features */
.flist{margin-top:28px;display:grid;gap:14px}
.fitem{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;box-shadow:var(--sh)}
.fnum{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:15px}
.fitem b{font-size:16px;color:var(--navy)}
.fitem p{font-size:14px;color:var(--gray);margin-top:3px}

/* before/after */
.bacard{border-radius:16px;padding:26px;box-shadow:var(--sh)}
.bacard--before{background:#fff;border:1px solid var(--line)}
.bacard--after{background:#FBFEFF;border:2px solid var(--brand)}
.bacard__head{font-weight:900;font-size:16px;display:inline-block;padding:4px 16px;border-radius:99px;margin-bottom:14px}
.bacard--before .bacard__head{background:#EDF0F3;color:var(--gray)}
.bacard--after .bacard__head{background:var(--brand);color:var(--navy)}
.bacard__lead{font-weight:800;margin-bottom:10px;color:var(--navy)}
.bacard ul{list-style:none}
.bacard li{padding:7px 0 7px 28px;position:relative;color:var(--ink2);font-size:15px}
.bacard--before li::before{content:"×";position:absolute;left:4px;color:#A6B0BD;font-weight:900}
.bacard--after li::before{content:"✓";position:absolute;left:2px;color:var(--accent-d);font-weight:900}

/* pricing */
.prcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--sh);position:relative}
.prcard--reco{border:2px solid var(--primary)}
.prcard__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:12px;font-weight:800;padding:4px 16px;border-radius:99px}
.prcard__name{font-size:14px;font-weight:800;color:var(--accent-d)}
.prcard__price{font-size:16px;color:var(--gray);margin:8px 0 12px}
.prcard__price strong{font-size:30px;color:var(--navy);font-weight:900}
.prcard__desc{font-size:13.5px;color:var(--ink2);line-height:1.85}

/* partner */
.pcol{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--sh)}
.pcol--ink{background:var(--navy);color:#fff}
.pcol__h{font-size:16px;font-weight:800;color:var(--accent-d);margin-bottom:14px}
.pcol--ink .pcol__h{color:var(--brand-lt)}
.pcol__price{font-size:18px;font-weight:900;margin-bottom:10px}
.pcol__txt{font-size:14px;color:#CFE7F2;margin-bottom:12px}
.pcol__note{font-size:12.5px;color:#9FB6C9}
.ticks{list-style:none}
.ticks li{padding:8px 0 8px 28px;position:relative;font-size:14.5px;color:var(--ink2);line-height:1.7}
.ticks li::before{content:"✓";position:absolute;left:2px;color:var(--accent-d);font-weight:900}

/* not a fit */
.xlist{list-style:none;margin-top:24px}
.xlist li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--line);color:var(--ink2);font-size:15px}
.xlist li::before{content:"×";position:absolute;left:4px;color:#C0556F;font-weight:900}

/* how */
.steps{margin-top:28px;display:grid;gap:12px}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--sh)}
.snum{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--accent-d);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px}
.step b{color:var(--navy);font-size:15.5px}
.step p{color:var(--gray);font-size:13.5px;margin-top:2px}

/* cta final */
.cta-final{background:linear-gradient(160deg,var(--primary) 0%,var(--primary-d) 100%);color:#fff;padding:70px 0;text-align:center}
.cta-final__h2{font-size:clamp(24px,4vw,34px);font-weight:900}
.cta-final__lead{margin-top:14px;font-size:16px;color:#E6F2FB}
.cta-final__box{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:22px 26px;margin:26px auto 0;max-width:560px;text-align:left}
.cta-final__boxh{font-weight:800;color:var(--brand);margin-bottom:10px}
.cta-final__box ul{list-style:none}
.cta-final__box li{padding:5px 0 5px 22px;position:relative;font-size:14px;color:#fff}
.cta-final__box li::before{content:"・";position:absolute;left:2px;color:var(--brand)}
.cta-final .btn--cta{margin-top:26px}
.cta-final__note{margin-top:16px;font-size:13px;color:#CFE7F2}

/* footer */
.site-foot{background:var(--navy);color:#fff;padding:48px 0}
.site-foot__inner{max-width:1080px;margin:0 auto;padding:0 22px;text-align:center}
.site-foot__brand{font-size:22px;font-weight:800}
.site-foot__desc{margin-top:10px;font-size:13.5px;color:#B9C6D6;line-height:1.8}
.site-foot__copy{margin-top:18px;font-size:12px;color:#7E91A6}

/* index/front simple */
.now-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--sh);margin-top:24px}
.now-card h3{font-size:18px;color:var(--navy);margin-bottom:10px}
.now-card p{color:var(--ink2);font-size:15px;margin-bottom:18px}
.roadmap-note{margin-top:20px;color:var(--gray);font-size:14px}
.sec--operator{background:var(--bg)}
.now-card .btn{margin-top:0}
.roadmap{margin-top:28px;display:grid;gap:14px}
.rm{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;box-shadow:var(--sh)}
.rm--now{border-left:5px solid var(--primary)}
.rm--next{border-left:5px solid var(--brand)}
.rm__tag{flex:0 0 auto;font-weight:800;font-size:13px;color:#fff;background:var(--primary);border-radius:99px;padding:4px 14px;white-space:nowrap}
.rm--next .rm__tag{background:var(--brand);color:var(--navy)}
.rm__name{font-weight:700;color:var(--navy);font-size:15.5px}
@media(max-width:480px){.rm{flex-direction:column;align-items:flex-start;gap:10px}}

/* responsive */
@media(max-width:820px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .sec{padding:48px 0}
  .hero{padding:48px 0}
  .hero__cta .btn{width:100%}
  .site-head__by{display:none}
}
@media(max-width:480px){
  .btn{width:100%}
  .ccard__big{font-size:26px}
}