:root{--navy:#14606b;--navy-d:#0e4750;--ink:#222a35;--mute:#5a6670;--line:#dbe3e2;--bg:#f4f6f5;--white:#fff;--accent:#8a6d3b;--accent-d:#6f5629;--soft:#e6f0f0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:var(--white);line-height:1.8;font-size:16px;-webkit-text-size-adjust:100%}
img,iframe{max-width:100%}
a{color:var(--navy)}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
/* header */
.hd{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-weight:700;color:var(--navy);text-decoration:none;font-size:15px}
.hd .btn{padding:8px 16px;font-size:14px}
/* buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:16px 36px;border-radius:6px;border:0;font-size:17px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn.ghost:hover{background:var(--soft)}
.cta-note{font-size:13px;color:var(--mute);margin:10px 0 0}
/* sections */
section{padding:72px 0}
section.alt{background:var(--bg)}
section.dark{background:var(--navy);color:#fff}
section.dark h2,section.dark .lead{color:#fff}
.eyebrow{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.12em;margin:0 0 8px}
h1{font-size:clamp(27px,5vw,42px);line-height:1.45;margin:0 0 20px;color:var(--navy)}
h2{font-size:clamp(22px,3.6vw,30px);line-height:1.5;margin:0 0 16px;color:var(--navy)}
h3{font-size:18px;margin:0 0 8px;color:var(--navy)}
.lead{color:var(--mute);margin:0 0 36px}
.center{text-align:center}
/* hero */
.hero{padding:72px 0 64px;background:linear-gradient(180deg,var(--soft),#fff)}
.hero p.sub{font-size:18px;color:var(--mute);max-width:640px}
.hero .actions{margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.fact b{display:block;font-size:30px;color:var(--navy);line-height:1.2}
.fact span{font-size:13px;color:var(--mute)}
/* grid & cards */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px}
.card .num{display:inline-block;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.1em;margin-bottom:6px}
.card p{margin:0;color:var(--mute);font-size:15px}
.check{list-style:none;margin:0;padding:0}
.check li{position:relative;padding:12px 0 12px 32px;border-bottom:1px solid var(--line)}
.check li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:7px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
/* case */
.case .tag{font-size:12px;color:var(--navy);background:var(--soft);padding:2px 10px;border-radius:99px;display:inline-block;margin-bottom:10px}
.case dl{margin:0;font-size:14px}
.case dt{font-weight:700;color:var(--navy);margin-top:10px}
.case dd{margin:0;color:var(--mute)}
.case .res{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-weight:700;color:var(--navy);font-size:17px}
/* table */
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
.tbl th,.tbl td{border:1px solid var(--line);padding:12px 10px;text-align:center}
.tbl th{background:var(--bg);color:var(--navy)}
.tbl td:first-child,.tbl th:first-child{text-align:left}
.tbl .us{background:#f5efe3;font-weight:700}
.logo{display:flex;align-items:center;gap:10px}
.logo svg{flex:none}
.scroll{overflow-x:auto}
/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(4,1fr);counter-reset:s}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 18px}
.steps li::before{content:counter(s);display:flex;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;align-items:center;justify-content:center;font-weight:700;margin-bottom:10px}
.steps b{display:block;color:var(--navy);margin-bottom:4px}
.steps span{font-size:14px;color:var(--mute)}
/* video */
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* faq */
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:700;color:var(--navy);list-style:none;padding-right:28px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:0;font-size:22px;line-height:1.4;color:var(--accent)}
details[open] summary::after{content:"−"}
details p{margin:10px 0 0;color:var(--mute);font-size:15px}
/* price */
.price{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
.price .big{font-size:34px;font-weight:700;color:var(--navy);line-height:1.3}
.price .big small{font-size:14px;font-weight:400;color:var(--mute)}
/* tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tabs button{font:inherit;font-size:14px;padding:10px 16px;border:1px solid var(--line);background:#fff;border-radius:99px;cursor:pointer;color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.panel[hidden]{display:none}
/* form */
.form{background:#fff;border-radius:8px;padding:32px;color:var(--ink);max-width:640px;margin:0 auto}
.form label{display:block;font-weight:700;font-size:14px;margin:16px 0 6px;color:var(--navy)}
.form label i{font-style:normal;color:var(--accent);font-size:12px;margin-left:6px}
.form input,.form textarea,.form select{width:100%;font:inherit;padding:12px;border:1px solid #c5ccd5;border-radius:6px}
.form .btn{width:100%;margin-top:24px}
.form small{display:block;margin-top:12px;color:var(--mute);font-size:12px}
.contact-line{margin-top:20px;font-size:14px;opacity:.9}
.contact-line a{color:#fff}
/* footer */
footer{padding:36px 0;background:var(--navy-d);color:#c8d2de;font-size:13px}
footer a{color:#c8d2de}
.note-box{font-size:12px;color:var(--mute);margin-top:16px}
@media(max-width:820px){
 .g3,.g4,.steps{grid-template-columns:repeat(2,1fr)}
 .price{grid-template-columns:1fr}
}
@media(max-width:560px){
 section{padding:52px 0}
 .g2,.g3,.g4,.steps{grid-template-columns:1fr}
 .hero{padding:48px 0 44px}
 .btn{display:block;text-align:center}
 .hd .btn{display:inline-block}
 .form{padding:22px}
 .fact b{font-size:26px}
}

/* ---- イラスト・図 ---- */
.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico{width:84px;height:84px;border-radius:50%;background:#fff;box-shadow:0 4px 16px rgba(20,96,107,.18);display:flex;align-items:center;justify-content:center;color:var(--navy);margin:0 auto 14px}
.ico .i{width:40px;height:40px}
.ico.acc{color:var(--accent)}
.ico.fill{background:var(--navy);color:#fff;box-shadow:none}
.ttl{text-align:center}
h2.ttl::after{content:"";display:block;width:48px;height:3px;background:var(--accent);margin:14px auto 0}
.center .lead{max-width:640px;margin-left:auto;margin-right:auto}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;align-items:center}
.hero-art{width:100%;height:auto}
.pains{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:32px}
.pain{text-align:center;font-size:14px;font-weight:700;color:var(--navy);line-height:1.6}
.pain .ico{width:88px;height:88px}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:32px;position:relative}
.flow .node{text-align:center;padding:0 12px;position:relative}
.flow .node b{display:block;color:var(--navy);margin-bottom:4px}
.flow .node span{font-size:13px;color:var(--mute);display:block;line-height:1.6}
.flow .node:not(:last-child)::after{content:"";position:absolute;top:32px;right:-8px;width:14px;height:14px;border-top:3px solid var(--accent);border-right:3px solid var(--accent);transform:rotate(45deg)}
.flow .ico{margin-bottom:12px}
.flow-note{margin:32px auto 0;max-width:640px;text-align:center;background:var(--soft);border-radius:8px;padding:14px 18px;font-weight:700;color:var(--navy)}
.card .ico{margin:0 0 12px}
.card.c{text-align:center}
.card.c .ico{margin:0 auto 12px}
.steps2{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.steps2 li{text-align:center;background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 16px}
.steps2 small{display:block;color:var(--accent);font-weight:700;letter-spacing:.1em;font-size:12px}
.steps2 b{display:block;color:var(--navy);margin:2px 0 6px}
.steps2 span{font-size:14px;color:var(--mute);display:block}
.mini{display:block;margin:14px 0 0;max-width:180px}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
.sticky .btn{display:block;text-align:center;padding:14px}
@media(max-width:820px){
 .hero-grid{grid-template-columns:minmax(0,1fr)}
 .hero-art{max-width:420px;margin:0 auto}
 .pains{grid-template-columns:repeat(3,minmax(0,1fr))}
 .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
 .flow .node:nth-child(2)::after{display:none}
 .steps2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
 .pains{grid-template-columns:repeat(2,minmax(0,1fr))}
 .steps2{grid-template-columns:minmax(0,1fr)}
 .sticky{display:block}
 body{padding-bottom:70px}
}

body{word-break:auto-phrase;line-break:strict}
h1,h2,h3,.pain,.sub{text-wrap:balance}
.hero h1{font-size:clamp(26px,3.4vw,38px)}